Remove experimental tag from Script component (vercel#25435)

* Remove experimental tag from Script component

* update size tests

* Update size

* Update size limit

* Update basic output sizes

Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
Co-authored-by: Tim Neutkens <timneutkens@me.com>

packages/next/build/webpack-config.ts

@@ -1086,9 +1086,6 @@ export default async function getBaseWebpackConfig(
         'process.env.__NEXT_OPTIMIZE_CSS': JSON.stringify(
           config.experimental.optimizeCss && !dev
         ),
-        'process.env.__NEXT_SCRIPT_LOADER': JSON.stringify(
-          !!config.experimental.scriptLoader
-        ),
         'process.env.__NEXT_SCROLL_RESTORATION': JSON.stringify(
           config.experimental.scrollRestoration
         ),

packages/next/client/index.tsx

@@ -141,8 +141,8 @@ if (process.env.__NEXT_I18N_SUPPORT) {
   }
 }
 
-if (process.env.__NEXT_SCRIPT_LOADER && data.scriptLoader) {
-  const { initScriptLoader } = require('./experimental-script')
+if (data.scriptLoader) {
+  const { initScriptLoader } = require('./script')
   initScriptLoader(data.scriptLoader)
 }
 

packages/next/client/experimental-script.tsx → packages/next/client/script.tsx

@@ -136,10 +136,6 @@ function Script(props: Props): JSX.Element | null {
     }
   }, [props, strategy])
 
-  if (!process.env.__NEXT_SCRIPT_LOADER) {
-    return null
-  }
-
   if (strategy === 'beforeInteractive') {
     if (updateScripts) {
       scripts.beforeInteractive = (scripts.beforeInteractive || []).concat([

packages/next/next-server/server/config-shared.ts

@@ -47,7 +47,6 @@ export type NextConfig = { [key: string]: any } & {
     optimizeImages?: boolean
     optimizeCss?: boolean
     scrollRestoration?: boolean
-    scriptLoader?: boolean
     stats?: boolean
     externalDir?: boolean
     conformance?: boolean
@@ -110,7 +109,6 @@ export const defaultConfig: NextConfig = {
     optimizeImages: false,
     optimizeCss: false,
     scrollRestoration: false,
-    scriptLoader: false,
     stats: false,
     externalDir: false,
     eslint: false,

packages/next/package.json

@@ -28,8 +28,8 @@
     "dynamic.d.ts",
     "error.js",
     "error.d.ts",
-    "experimental-script.js",
-    "experimental-script.d.ts",
+    "script.js",
+    "script.d.ts",
     "head.js",
     "head.d.ts",
     "image.js",

packages/next/pages/_document.tsx

@@ -17,9 +17,7 @@ import {
 } from '../next-server/server/get-page-files'
 import { cleanAmpPath } from '../next-server/server/utils'
 import { htmlEscapeJsonString } from '../server/htmlescape'
-import Script, {
-  Props as ScriptLoaderProps,
-} from '../client/experimental-script'
+import Script, { Props as ScriptLoaderProps } from '../client/script'
 
 export { DocumentContext, DocumentInitialProps, DocumentProps }
 
@@ -536,9 +534,7 @@ export class Head extends Component<
       children = this.makeStylesheetInert(children)
     }
 
-    if (process.env.__NEXT_SCRIPT_LOADER) {
-      children = this.handleDocumentScriptLoaderItems(children)
-    }
+    children = this.handleDocumentScriptLoaderItems(children)
 
     let hasAmphtmlRel = false
     let hasCanonicalRel = false

packages/next/script.d.ts

@@ -0,0 +1,2 @@
+export * from './dist/client/script'
+export { default } from './dist/client/script'

packages/next/script.js

@@ -0,0 +1 @@
+module.exports = require('./dist/client/script')

test/integration/build-output/test/index.test.js

@@ -123,16 +123,16 @@ describe('Build Output', () => {
           )
           expect(indexSize.endsWith('B')).toBe(true)
 
-          expect(parseFloat(indexFirstLoad)).toBeCloseTo(gz ? 63.3 : 194, 1)
+          expect(parseFloat(indexFirstLoad)).toBeCloseTo(gz ? 64 : 196, 1)
           expect(indexFirstLoad.endsWith('kB')).toBe(true)
 
           expect(parseFloat(err404Size)).toBeCloseTo(gz ? 3.06 : 8.15, 1)
           expect(err404Size.endsWith('kB')).toBe(true)
 
-          expect(parseFloat(err404FirstLoad)).toBeCloseTo(gz ? 66.1 : 202, 1)
+          expect(parseFloat(err404FirstLoad)).toBeCloseTo(gz ? 66.8 : 204, 1)
           expect(err404FirstLoad.endsWith('kB')).toBe(true)
 
-          expect(parseFloat(sharedByAll)).toBeCloseTo(gz ? 63 : 194, 1)
+          expect(parseFloat(sharedByAll)).toBeCloseTo(gz ? 63.7 : 196, 1)
           expect(sharedByAll.endsWith('kB')).toBe(true)
 
           const appSizeValue = _appSize.endsWith('kB')
@@ -149,7 +149,7 @@ describe('Build Output', () => {
             true
           )
 
-          expect(parseFloat(mainSize)).toBeCloseTo(gz ? 19.4 : 60.6, 1)
+          expect(parseFloat(mainSize)).toBeCloseTo(gz ? 20.1 : 62.8, 1)
           expect(mainSize.endsWith('kB')).toBe(true)
 
           expect(parseFloat(frameworkSize)).toBeCloseTo(gz ? 42.0 : 130, 1)

test/integration/script-loader/next.config.js

@@ -1,3 +1 @@
-module.exports = {
-  experimental: { scriptLoader: true },
-}
+module.exports = {}

test/integration/script-loader/pages/_document.js

@@ -1,7 +1,7 @@
 import * as React from 'react'
 /// @ts-ignore
 import Document, { Main, NextScript, Head } from 'next/document'
-import Script from 'next/experimental-script'
+import Script from 'next/script'
 
 export default class MyDocument extends Document {
   constructor(props) {

test/integration/script-loader/pages/index.js

@@ -1,4 +1,4 @@
-import Script from 'next/experimental-script'
+import Script from 'next/script'
 
 const Page = () => {
   return (

test/integration/script-loader/pages/page1.js

@@ -1,4 +1,4 @@
-import Script from 'next/experimental-script'
+import Script from 'next/script'
 
 const Page = () => {
   return (

test/integration/script-loader/pages/page3.js

@@ -1,4 +1,4 @@
-import Script from 'next/experimental-script'
+import Script from 'next/script'
 
 const Page = () => {
   return (

test/integration/script-loader/pages/page4.js

@@ -1,4 +1,4 @@
-import Script from 'next/experimental-script'
+import Script from 'next/script'
 
 const url =
   'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js'

test/integration/size-limit/test/index.test.js

@@ -85,6 +85,6 @@ describe('Production response size', () => {
     const delta = responseSizesBytes / 1024
 
     // Expected difference: < 0.5
-    expect(delta).toBeCloseTo(286.7, 0)
+    expect(delta).toBeCloseTo(289.3, 0)
   })
 })