Remove experimental tag from Script component #25435

janicklas-ralph · 2021-05-25T06:23:20Z

Remove experimental tag from Script component

…to script-loader

ijjk · 2021-06-02T16:22:59Z

Failing test suites

Commit: 4a03a29

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

Build Output > Basic Application Output > should not deviate from snapshot
Build Output > Basic Application Output (with experimental.gzipSize: false) > should not deviate from snapshot
Build Output > Basic Application Output (with experimental.gzipSize: true) > should not deviate from snapshot

Expand output

● Build Output › Basic Application Output (with experimental.gzipSize: true) › should not deviate from snapshot

expect(received).toBeCloseTo(expected, precision)

Expected: 63.3
Received: 64

Expected precision:    1
Expected difference: < 0.05
Received difference:   0.7000000000000028

  124 |           expect(indexSize.endsWith('B')).toBe(true)
  125 |
> 126 |           expect(parseFloat(indexFirstLoad)).toBeCloseTo(gz ? 63.3 : 194, 1)
      |                                              ^
  127 |           expect(indexFirstLoad.endsWith('kB')).toBe(true)
  128 |
  129 |           expect(parseFloat(err404Size)).toBeCloseTo(gz ? 3.06 : 8.15, 1)

  at Object.<anonymous> (integration/build-output/test/index.test.js:126:46)

● Build Output › Basic Application Output (with experimental.gzipSize: false) › should not deviate from snapshot

expect(received).toBeCloseTo(expected, precision)

Expected: 194
Received: 196

Expected precision:    1
Expected difference: < 0.05
Received difference:   2

  124 |           expect(indexSize.endsWith('B')).toBe(true)
  125 |
> 126 |           expect(parseFloat(indexFirstLoad)).toBeCloseTo(gz ? 63.3 : 194, 1)
      |                                              ^
  127 |           expect(indexFirstLoad.endsWith('kB')).toBe(true)
  128 |
  129 |           expect(parseFloat(err404Size)).toBeCloseTo(gz ? 3.06 : 8.15, 1)

  at Object.<anonymous> (integration/build-output/test/index.test.js:126:46)

● Build Output › Basic Application Output › should not deviate from snapshot

expect(received).toBeCloseTo(expected, precision)

Expected: 63.3
Received: 64

Expected precision:    1
Expected difference: < 0.05
Received difference:   0.7000000000000028

  124 |           expect(indexSize.endsWith('B')).toBe(true)
  125 |
> 126 |           expect(parseFloat(indexFirstLoad)).toBeCloseTo(gz ? 63.3 : 194, 1)
      |                                              ^
  127 |           expect(indexFirstLoad.endsWith('kB')).toBe(true)
  128 |
  129 |           expect(parseFloat(err404Size)).toBeCloseTo(gz ? 3.06 : 8.15, 1)

  at Object.<anonymous> (integration/build-output/test/index.test.js:126:46)

ijjk · 2021-06-03T05:32:28Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
buildDuration	14.5s	14.5s	-8ms
buildDurationCached	3.9s	3.8s	-151ms
nodeModulesSize	46.7 MB	46.7 MB	-1.16 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.442	2.485	⚠️ +0.04
/ avg req/sec	1023.94	1006.01	⚠️ -17.93
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.308	1.391	⚠️ +0.08
/error-in-render avg req/sec	1911.71	1796.64	⚠️ -115.07

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	19.5 kB	20.2 kB	⚠️ +716 B
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	59.5 kB	60.3 kB	⚠️ +716 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
index.html gzip	559 B	573 B	⚠️ +14 B
link.html gzip	568 B	580 B	⚠️ +12 B
withRouter.html gzip	556 B	567 B	⚠️ +11 B
Overall change	1.68 kB	1.72 kB	⚠️ +37 B

Diffs

Diff for main-HASH.js

@@ -403,6 +403,27 @@
       /***/
     },
 
+    /***/ 7316: /***/ function(module) {
+      function _objectWithoutPropertiesLoose(source, excluded) {
+        if (source == null) return {};
+        var target = {};
+        var sourceKeys = Object.keys(source);
+        var key, i;
+
+        for (i = 0; i < sourceKeys.length; i++) {
+          key = sourceKeys[i];
+          if (excluded.indexOf(key) >= 0) continue;
+          target[key] = source[key];
+        }
+
+        return target;
+      }
+
+      module.exports = _objectWithoutPropertiesLoose;
+
+      /***/
+    },
+
     /***/ 8585: /***/ function(
       module,
       __unused_webpack_exports,
@@ -891,8 +912,11 @@
           normalizeLocalePath;
       }
 
-      if (false) {
-        var _require5, initScriptLoader;
+      if (data.scriptLoader) {
+        var _require5 = __webpack_require__(7926),
+          initScriptLoader = _require5.initScriptLoader;
+
+        initScriptLoader(data.scriptLoader);
       }
 
       var pageLoader = new _pageLoader["default"](buildId, prefix);
@@ -2866,6 +2890,217 @@
       /***/
     },
 
+    /***/ 7926: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      var _slicedToArray = __webpack_require__(3038);
+
+      var _interopRequireDefault = __webpack_require__(5318);
+
+      exports.__esModule = true;
+      exports.initScriptLoader = initScriptLoader;
+      exports.default = void 0;
+
+      var _extends2 = _interopRequireDefault(__webpack_require__(7154));
+
+      var _objectWithoutPropertiesLoose2 = _interopRequireDefault(
+        __webpack_require__(7316)
+      );
+
+      var _react = __webpack_require__(7294);
+
+      var _headManagerContext = __webpack_require__(1165);
+
+      var _headManager = __webpack_require__(6792);
+
+      var _requestIdleCallback = __webpack_require__(3447);
+
+      var ScriptCache = new Map();
+      var LoadCache = new Set();
+      var ignoreProps = [
+        "onLoad",
+        "dangerouslySetInnerHTML",
+        "children",
+        "onError",
+        "strategy"
+      ];
+
+      var loadScript = function loadScript(props) {
+        var src = props.src,
+          id = props.id,
+          _props$onLoad = props.onLoad,
+          onLoad = _props$onLoad === void 0 ? function() {} : _props$onLoad,
+          dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
+          _props$children = props.children,
+          children = _props$children === void 0 ? "" : _props$children,
+          onError = props.onError;
+        var cacheKey = id || src;
+
+        if (ScriptCache.has(src)) {
+          if (!LoadCache.has(cacheKey)) {
+            LoadCache.add(cacheKey); // Execute onLoad since the script loading has begun
+
+            ScriptCache.get(src).then(onLoad, onError);
+          }
+
+          return;
+        }
+
+        var el = document.createElement("script");
+        var loadPromise = new Promise(function(resolve, reject) {
+          el.addEventListener("load", function() {
+            resolve();
+
+            if (onLoad) {
+              onLoad.call(this);
+            }
+          });
+          el.addEventListener("error", function() {
+            reject();
+
+            if (onError) {
+              onError();
+            }
+          });
+        });
+
+        if (src) {
+          ScriptCache.set(src, loadPromise);
+          LoadCache.add(cacheKey);
+        }
+
+        if (dangerouslySetInnerHTML) {
+          el.innerHTML = dangerouslySetInnerHTML.__html || "";
+        } else if (children) {
+          el.textContent =
+            typeof children === "string"
+              ? children
+              : Array.isArray(children)
+              ? children.join("")
+              : "";
+        } else if (src) {
+          el.src = src;
+        }
+
+        for (
+          var _i = 0, _Object$entries = Object.entries(props);
+          _i < _Object$entries.length;
+          _i++
+        ) {
+          var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+            k = _Object$entries$_i[0],
+            value = _Object$entries$_i[1];
+
+          if (value === undefined || ignoreProps.includes(k)) {
+            continue;
+          }
+
+          var attr = _headManager.DOMAttributeNames[k] || k.toLowerCase();
+          el.setAttribute(attr, value);
+        }
+
+        document.body.appendChild(el);
+      };
+
+      function handleClientScriptLoad(props) {
+        var _props$strategy = props.strategy,
+          strategy =
+            _props$strategy === void 0 ? "afterInteractive" : _props$strategy;
+
+        if (strategy === "afterInteractive") {
+          loadScript(props);
+        } else if (strategy === "lazyOnload") {
+          window.addEventListener("load", function() {
+            (0, _requestIdleCallback.requestIdleCallback)(function() {
+              return loadScript(props);
+            });
+          });
+        }
+      }
+
+      function loadLazyScript(props) {
+        if (document.readyState === "complete") {
+          (0, _requestIdleCallback.requestIdleCallback)(function() {
+            return loadScript(props);
+          });
+        } else {
+          window.addEventListener("load", function() {
+            (0, _requestIdleCallback.requestIdleCallback)(function() {
+              return loadScript(props);
+            });
+          });
+        }
+      }
+
+      function initScriptLoader(scriptLoaderItems) {
+        scriptLoaderItems.forEach(handleClientScriptLoad);
+      }
+
+      function Script(props) {
+        var _props$src = props.src,
+          src = _props$src === void 0 ? "" : _props$src,
+          _props$onLoad2 = props.onLoad,
+          onLoad = _props$onLoad2 === void 0 ? function() {} : _props$onLoad2,
+          _props$strategy2 = props.strategy,
+          strategy =
+            _props$strategy2 === void 0 ? "afterInteractive" : _props$strategy2,
+          onError = props.onError,
+          restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, [
+            "src",
+            "onLoad",
+            "dangerouslySetInnerHTML",
+            "strategy",
+            "onError"
+          ]); // Context is available only during SSR
+
+        var _ref = (0, _react.useContext)(
+            _headManagerContext.HeadManagerContext
+          ),
+          updateScripts = _ref.updateScripts,
+          scripts = _ref.scripts;
+
+        (0, _react.useEffect)(
+          function() {
+            if (strategy === "afterInteractive") {
+              loadScript(props);
+            } else if (strategy === "lazyOnload") {
+              loadLazyScript(props);
+            }
+          },
+          [props, strategy]
+        );
+
+        if (strategy === "beforeInteractive") {
+          if (updateScripts) {
+            scripts.beforeInteractive = (
+              scripts.beforeInteractive || []
+            ).concat([
+              (0, _extends2["default"])(
+                {
+                  src: src,
+                  onLoad: onLoad,
+                  onError: onError
+                },
+                restProps
+              )
+            ]);
+            updateScripts(scripts);
+          }
+        }
+
+        return null;
+      }
+
+      var _default = Script;
+      exports.default = _default;
+
+      /***/
+    },
+
     /***/ 7413: /***/ function(
       __unused_webpack_module,
       exports,

Diff for index.html

@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-a88c715c784a695eafca.js"
+      href="/_next/static/chunks/main-38bab3b1dd44eb32312e.js"
       as="script"
     />
     <link
@@ -40,7 +40,8 @@
         "query": {},
         "buildId": "BUILD_ID",
         "isFallback": false,
-        "gip": true
+        "gip": true,
+        "scriptLoader": []
       }
     </script>
     <script
@@ -56,7 +57,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-a88c715c784a695eafca.js"
+      src="/_next/static/chunks/main-38bab3b1dd44eb32312e.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-a88c715c784a695eafca.js"
+      href="/_next/static/chunks/main-38bab3b1dd44eb32312e.js"
       as="script"
     />
     <link
@@ -45,7 +45,8 @@
         "query": {},
         "buildId": "BUILD_ID",
         "isFallback": false,
-        "gip": true
+        "gip": true,
+        "scriptLoader": []
       }
     </script>
     <script
@@ -61,7 +62,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-a88c715c784a695eafca.js"
+      src="/_next/static/chunks/main-38bab3b1dd44eb32312e.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-a88c715c784a695eafca.js"
+      href="/_next/static/chunks/main-38bab3b1dd44eb32312e.js"
       as="script"
     />
     <link
@@ -40,7 +40,8 @@
         "query": {},
         "buildId": "BUILD_ID",
         "isFallback": false,
-        "gip": true
+        "gip": true,
+        "scriptLoader": []
       }
     </script>
     <script
@@ -56,7 +57,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-a88c715c784a695eafca.js"
+      src="/_next/static/chunks/main-38bab3b1dd44eb32312e.js"
       async=""
     ></script>
     <script

Serverless Mode (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
buildDuration	16.7s	16.4s	-336ms
buildDurationCached	5.3s	5s	-270ms
nodeModulesSize	46.7 MB	46.7 MB	-1.16 kB

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	19.5 kB	20.2 kB	⚠️ +716 B
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	59.5 kB	60.3 kB	⚠️ +716 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
_error.js	16.9 kB	16.9 kB	✓
404.html	2.42 kB	2.44 kB	⚠️ +18 B
500.html	2.41 kB	2.43 kB	⚠️ +18 B
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.61 kB	1.63 kB	⚠️ +18 B
css.html	1.79 kB	1.81 kB	⚠️ +18 B
hooks.html	1.67 kB	1.69 kB	⚠️ +18 B
index.js	17.2 kB	17.2 kB	✓
link.js	17.4 kB	17.4 kB	✓
routerDirect.js	17.4 kB	17.4 kB	✓
withRouter.js	17.4 kB	17.4 kB	✓
Overall change	107 kB	107 kB	⚠️ +90 B

Webpack 4 Mode (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
buildDuration	13.1s	13s	-118ms
buildDurationCached	5.6s	5.6s	⚠️ +14ms
nodeModulesSize	46.7 MB	46.7 MB	-1.16 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.554	2.509	-0.04
/ avg req/sec	978.97	996.37	+17.4
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.334	1.337	0
/error-in-render avg req/sec	1873.45	1870.04	⚠️ -3.41

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
677f882d2ed8..HASH.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.26 kB	7.99 kB	⚠️ +731 B
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.3 kB	61.1 kB	⚠️ +731 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
_app-HASH.js gzip	1.07 kB	1.07 kB	✓
_error-HASH.js gzip	3.74 kB	3.74 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.63 kB	1.63 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	9.16 kB	9.16 kB	✓

Client Build Manifests

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script-loader	Change
index.html gzip	614 B	626 B	⚠️ +12 B
link.html gzip	620 B	632 B	⚠️ +12 B
withRouter.html gzip	607 B	620 B	⚠️ +13 B
Overall change	1.84 kB	1.88 kB	⚠️ +37 B

Diffs

Diff for main-HASH.js

@@ -70,6 +70,234 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       /***/
     },
 
+    /***/ "85TV": /***/ function(module, exports, __webpack_require__) {
+      "use strict";
+
+      var _slicedToArray = __webpack_require__("J4zp");
+
+      var _interopRequireDefault = __webpack_require__("TqRt");
+
+      exports.__esModule = true;
+      exports.initScriptLoader = initScriptLoader;
+      exports["default"] = void 0;
+
+      var _extends2 = _interopRequireDefault(__webpack_require__("pVnL"));
+
+      var _objectWithoutPropertiesLoose2 = _interopRequireDefault(
+        __webpack_require__("8OQS")
+      );
+
+      var _react = __webpack_require__("q1tI");
+
+      var _headManagerContext = __webpack_require__("FYa8");
+
+      var _headManager = __webpack_require__("DqTX");
+
+      var _requestIdleCallback = __webpack_require__("0G5g");
+
+      var ScriptCache = new Map();
+      var LoadCache = new Set();
+      var ignoreProps = [
+        "onLoad",
+        "dangerouslySetInnerHTML",
+        "children",
+        "onError",
+        "strategy"
+      ];
+
+      var loadScript = function loadScript(props) {
+        var src = props.src,
+          id = props.id,
+          _props$onLoad = props.onLoad,
+          onLoad = _props$onLoad === void 0 ? function() {} : _props$onLoad,
+          dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
+          _props$children = props.children,
+          children = _props$children === void 0 ? "" : _props$children,
+          onError = props.onError;
+        var cacheKey = id || src;
+
+        if (ScriptCache.has(src)) {
+          if (!LoadCache.has(cacheKey)) {
+            LoadCache.add(cacheKey); // Execute onLoad since the script loading has begun
+
+            ScriptCache.get(src).then(onLoad, onError);
+          }
+
+          return;
+        }
+
+        var el = document.createElement("script");
+        var loadPromise = new Promise(function(resolve, reject) {
+          el.addEventListener("load", function() {
+            resolve();
+
+            if (onLoad) {
+              onLoad.call(this);
+            }
+          });
+          el.addEventListener("error", function() {
+            reject();
+
+            if (onError) {
+              onError();
+            }
+          });
+        });
+
+        if (src) {
+          ScriptCache.set(src, loadPromise);
+          LoadCache.add(cacheKey);
+        }
+
+        if (dangerouslySetInnerHTML) {
+          el.innerHTML = dangerouslySetInnerHTML.__html || "";
+        } else if (children) {
+          el.textContent =
+            typeof children === "string"
+              ? children
+              : Array.isArray(children)
+              ? children.join("")
+              : "";
+        } else if (src) {
+          el.src = src;
+        }
+
+        for (
+          var _i = 0, _Object$entries = Object.entries(props);
+          _i < _Object$entries.length;
+          _i++
+        ) {
+          var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+            k = _Object$entries$_i[0],
+            value = _Object$entries$_i[1];
+
+          if (value === undefined || ignoreProps.includes(k)) {
+            continue;
+          }
+
+          var attr = _headManager.DOMAttributeNames[k] || k.toLowerCase();
+          el.setAttribute(attr, value);
+        }
+
+        document.body.appendChild(el);
+      };
+
+      function handleClientScriptLoad(props) {
+        var _props$strategy = props.strategy,
+          strategy =
+            _props$strategy === void 0 ? "afterInteractive" : _props$strategy;
+
+        if (strategy === "afterInteractive") {
+          loadScript(props);
+        } else if (strategy === "lazyOnload") {
+          window.addEventListener("load", function() {
+            (0, _requestIdleCallback.requestIdleCallback)(function() {
+              return loadScript(props);
+            });
+          });
+        }
+      }
+
+      function loadLazyScript(props) {
+        if (document.readyState === "complete") {
+          (0, _requestIdleCallback.requestIdleCallback)(function() {
+            return loadScript(props);
+          });
+        } else {
+          window.addEventListener("load", function() {
+            (0, _requestIdleCallback.requestIdleCallback)(function() {
+              return loadScript(props);
+            });
+          });
+        }
+      }
+
+      function initScriptLoader(scriptLoaderItems) {
+        scriptLoaderItems.forEach(handleClientScriptLoad);
+      }
+
+      function Script(props) {
+        var _props$src = props.src,
+          src = _props$src === void 0 ? "" : _props$src,
+          _props$onLoad2 = props.onLoad,
+          onLoad = _props$onLoad2 === void 0 ? function() {} : _props$onLoad2,
+          _props$strategy2 = props.strategy,
+          strategy =
+            _props$strategy2 === void 0 ? "afterInteractive" : _props$strategy2,
+          onError = props.onError,
+          restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, [
+            "src",
+            "onLoad",
+            "dangerouslySetInnerHTML",
+            "strategy",
+            "onError"
+          ]); // Context is available only during SSR
+
+        var _ref = (0, _react.useContext)(
+            _headManagerContext.HeadManagerContext
+          ),
+          updateScripts = _ref.updateScripts,
+          scripts = _ref.scripts;
+
+        (0, _react.useEffect)(
+          function() {
+            if (strategy === "afterInteractive") {
+              loadScript(props);
+            } else if (strategy === "lazyOnload") {
+              loadLazyScript(props);
+            }
+          },
+          [props, strategy]
+        );
+
+        if (strategy === "beforeInteractive") {
+          if (updateScripts) {
+            scripts.beforeInteractive = (
+              scripts.beforeInteractive || []
+            ).concat([
+              (0, _extends2["default"])(
+                {
+                  src: src,
+                  onLoad: onLoad,
+                  onError: onError
+                },
+                restProps
+              )
+            ]);
+            updateScripts(scripts);
+          }
+        }
+
+        return null;
+      }
+
+      var _default = Script;
+      exports["default"] = _default;
+
+      /***/
+    },
+
+    /***/ "8OQS": /***/ function(module, exports) {
+      function _objectWithoutPropertiesLoose(source, excluded) {
+        if (source == null) return {};
+        var target = {};
+        var sourceKeys = Object.keys(source);
+        var key, i;
+
+        for (i = 0; i < sourceKeys.length; i++) {
+          key = sourceKeys[i];
+          if (excluded.indexOf(key) >= 0) continue;
+          target[key] = source[key];
+        }
+
+        return target;
+      }
+
+      module.exports = _objectWithoutPropertiesLoose;
+
+      /***/
+    },
+
     /***/ BMP1: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
@@ -468,8 +696,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           normalizeLocalePath;
       }
 
-      if (false) {
-        var _require5, initScriptLoader;
+      if (data.scriptLoader) {
+        var _require5 = __webpack_require__("85TV"),
+          initScriptLoader = _require5.initScriptLoader;
+
+        initScriptLoader(data.scriptLoader);
       }
 
       var pageLoader = new _pageLoader["default"](buildId, prefix);

Diff for index.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-000257c9a3722fca596f.js"
+      href="/_next/static/chunks/main-139d68b4ace417cc0762.js"
       as="script"
     />
     <link
@@ -45,7 +45,8 @@
         "query": {},
         "buildId": "BUILD_ID",
         "isFallback": false,
-        "gip": true
+        "gip": true,
+        "scriptLoader": []
       }
     </script>
     <script
@@ -65,7 +66,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-000257c9a3722fca596f.js"
+      src="/_next/static/chunks/main-139d68b4ace417cc0762.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-000257c9a3722fca596f.js"
+      href="/_next/static/chunks/main-139d68b4ace417cc0762.js"
       as="script"
     />
     <link
@@ -50,7 +50,8 @@
         "query": {},
         "buildId": "BUILD_ID",
         "isFallback": false,
-        "gip": true
+        "gip": true,
+        "scriptLoader": []
       }
     </script>
     <script
@@ -70,7 +71,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-000257c9a3722fca596f.js"
+      src="/_next/static/chunks/main-139d68b4ace417cc0762.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-000257c9a3722fca596f.js"
+      href="/_next/static/chunks/main-139d68b4ace417cc0762.js"
       as="script"
     />
     <link
@@ -45,7 +45,8 @@
         "query": {},
         "buildId": "BUILD_ID",
         "isFallback": false,
-        "gip": true
+        "gip": true,
+        "scriptLoader": []
       }
     </script>
     <script
@@ -65,7 +66,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-000257c9a3722fca596f.js"
+      src="/_next/static/chunks/main-139d68b4ace417cc0762.js"
       async=""
     ></script>
     <script

Commit: 9d071b8

* 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>

Remove experimental tag from Script component

e73470f

janicklas-ralph requested review from divmain, ijjk, lfades, shuding and timneutkens as code owners May 25, 2021 06:23

ijjk added the type: next label May 25, 2021