From 163913a7443455397e6fb215be2c813b72b0db63 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.huang@outlook.fr>
Date: Tue, 11 Apr 2023 16:17:44 +0200
Subject: [PATCH] feat(nuxt): add `experimentalNoScripts` route rule (#19805)

---
 docs/2.guide/1.concepts/3.rendering.md           |  1 +
 packages/nuxt/src/core/runtime/nitro/renderer.ts |  8 +++++---
 packages/nuxt/types.d.ts                         |  2 ++
 packages/schema/src/config/experimental.ts       |  1 +
 test/basic.test.ts                               |  5 +++++
 test/fixtures/basic/nuxt.config.ts               |  3 ++-
 test/fixtures/basic/pages/index.vue              |  3 +++
 test/fixtures/basic/pages/no-scripts.vue         | 12 ++++++++++++
 8 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 test/fixtures/basic/pages/no-scripts.vue

diff --git a/docs/2.guide/1.concepts/3.rendering.md b/docs/2.guide/1.concepts/3.rendering.md
index cc8503fb10..af31e52a73 100644
--- a/docs/2.guide/1.concepts/3.rendering.md
+++ b/docs/2.guide/1.concepts/3.rendering.md
@@ -100,6 +100,7 @@ Nuxt 3 includes route rules and hybrid rendering support. Using route rules you
 - `swr` - Add cache headers to the server response and cache it in the server or reverse proxy for a configurable TTL. The `node-server` preset of Nitro is able to cache the full response. For Netlify and Vercel, the response is also added to the CDN layer.
 - `static` - The behavior is the same as `swr` except that there is no TTL; the response is cached until the next deployment. On Netlify and Vercel, it enables full incremental static generation.
 - `prerender` - Prerenders routes at build time and includes them in your build as static assets
+- `experimentalNoScripts` - Disables rendering of Nuxt scripts and JS resource hints for sections of your site.
 
 **Examples:**
 
diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts
index 78ed13c2e3..86dd6acf1d 100644
--- a/packages/nuxt/src/core/runtime/nitro/renderer.ts
+++ b/packages/nuxt/src/core/runtime/nitro/renderer.ts
@@ -276,6 +276,8 @@ export default defineRenderHandler(async (event) => {
     ? await renderInlineStyles(ssrContext.modules ?? ssrContext._registeredComponents ?? [])
     : ''
 
+  const NO_SCRIPTS = process.env.NUXT_NO_SCRIPTS || routeOptions.experimentalNoScripts
+
   // Create render context
   const htmlContext: NuxtRenderHTMLContext = {
     island: Boolean(islandContext),
@@ -285,7 +287,7 @@ export default defineRenderHandler(async (event) => {
       process.env.NUXT_JSON_PAYLOADS
         ? _PAYLOAD_EXTRACTION ? `<link rel="modulepreload" href="${payloadURL}">` : null
         : _PAYLOAD_EXTRACTION ? `<link rel="preload" as="fetch" crossorigin="anonymous" href="${payloadURL}">` : null,
-      _rendered.renderResourceHints(),
+      NO_SCRIPTS ? null : _rendered.renderResourceHints(),
       _rendered.renderStyles(),
       inlinedStyles,
       ssrContext.styles
@@ -297,7 +299,7 @@ export default defineRenderHandler(async (event) => {
     ]),
     body: [_rendered.html],
     bodyAppend: normalizeChunks([
-      process.env.NUXT_NO_SCRIPTS
+      NO_SCRIPTS
         ? undefined
         : (_PAYLOAD_EXTRACTION
             ? process.env.NUXT_JSON_PAYLOADS
@@ -307,7 +309,7 @@ export default defineRenderHandler(async (event) => {
               ? renderPayloadJsonScript({ id: '__NUXT_DATA__', ssrContext, data: ssrContext.payload })
               : renderPayloadScript({ ssrContext, data: ssrContext.payload })
           ),
-      _rendered.renderScripts(),
+      routeOptions.experimentalNoScripts ? undefined : _rendered.renderScripts(),
       // Note: bodyScripts may contain tags other than <script>
       renderedMeta.bodyScripts
     ])
diff --git a/packages/nuxt/types.d.ts b/packages/nuxt/types.d.ts
index 773e276a24..fd1c9e808c 100644
--- a/packages/nuxt/types.d.ts
+++ b/packages/nuxt/types.d.ts
@@ -11,8 +11,10 @@ declare global {
 declare module 'nitropack' {
   interface NitroRouteConfig {
     ssr?: boolean
+    experimentalNoScripts?: boolean
   }
   interface NitroRouteRules {
     ssr?: boolean
+    experimentalNoScripts?: boolean
   }
 }
diff --git a/packages/schema/src/config/experimental.ts b/packages/schema/src/config/experimental.ts
index 70326c2e45..005110a0b4 100644
--- a/packages/schema/src/config/experimental.ts
+++ b/packages/schema/src/config/experimental.ts
@@ -95,6 +95,7 @@ export default defineUntypedSchema({
 
     /**
      * Turn off rendering of Nuxt scripts and JS resource hints.
+     * You can also disable scripts more granularly within `routeRules`.
      */
     noScripts: false,
 
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 205002d46a..6394819149 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -47,6 +47,11 @@ describe('route rules', () => {
     expect(script.serverRendered).toEqual(false)
     expect(attrs['data-ssr']).toEqual('false')
   })
+
+  it('test noScript routeRules', async () => {
+    const page = await createPage('/no-scripts')
+    expect(await page.locator('script').all()).toHaveLength(0)
+  })
 })
 
 describe('modules', () => {
diff --git a/test/fixtures/basic/nuxt.config.ts b/test/fixtures/basic/nuxt.config.ts
index e625264c02..cda5773b94 100644
--- a/test/fixtures/basic/nuxt.config.ts
+++ b/test/fixtures/basic/nuxt.config.ts
@@ -51,7 +51,8 @@ export default defineNuxtConfig({
   ],
   nitro: {
     routeRules: {
-      '/route-rules/spa': { ssr: false }
+      '/route-rules/spa': { ssr: false },
+      '/no-scripts': { experimentalNoScripts: true }
     },
     output: { dir: process.env.NITRO_OUTPUT_DIR },
     prerender: {
diff --git a/test/fixtures/basic/pages/index.vue b/test/fixtures/basic/pages/index.vue
index 26d5034d75..7e28cc7474 100644
--- a/test/fixtures/basic/pages/index.vue
+++ b/test/fixtures/basic/pages/index.vue
@@ -21,6 +21,9 @@
     <button @click="someValue++">
       Increment state
     </button>
+    <NuxtLink to="/no-scripts">
+      to no script
+    </NuxtLink>
     <NestedSugarCounter :multiplier="2" />
     <CustomComponent />
     <Spin>Test</Spin>
diff --git a/test/fixtures/basic/pages/no-scripts.vue b/test/fixtures/basic/pages/no-scripts.vue
new file mode 100644
index 0000000000..a2d01e200c
--- /dev/null
+++ b/test/fixtures/basic/pages/no-scripts.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    {{ count }}
+    <button @click="count++">
+      ++
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const count = ref(0)
+</script>