-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update to pre-compile use-subscription #35746
Conversation
Stats from current PRDefault Build (Increase detected
|
vercel/next.js canary | ijjk/next.js ncc/use-subscription | Change | |
---|---|---|---|
buildDuration | 18.3s | 18.5s | |
buildDurationCached | 7.3s | 7.1s | -167ms |
nodeModulesSize | 467 MB | 467 MB | -8.74 kB |
Page Load Tests Overall increase ✓
vercel/next.js canary | ijjk/next.js ncc/use-subscription | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 3.744 | 3.687 | -0.06 |
/ avg req/sec | 667.71 | 678.01 | +10.3 |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.646 | 1.602 | -0.04 |
/error-in-render avg req/sec | 1519.09 | 1560.94 | +41.85 |
Client Bundles (main, webpack)
vercel/next.js canary | ijjk/next.js ncc/use-subscription | Change | |
---|---|---|---|
925.HASH.js gzip | 179 B | 179 B | ✓ |
framework-HASH.js gzip | 42 kB | 42 kB | ✓ |
main-HASH.js gzip | 28.4 kB | 28.4 kB | ✓ |
webpack-HASH.js gzip | 1.44 kB | 1.44 kB | ✓ |
Overall change | 72.1 kB | 72.1 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | ijjk/next.js ncc/use-subscription | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages Overall increase ⚠️
vercel/next.js canary | ijjk/next.js ncc/use-subscription | Change | |
---|---|---|---|
_app-HASH.js gzip | 1.36 kB | 1.36 kB | ✓ |
_error-HASH.js gzip | 192 B | 192 B | ✓ |
amp-HASH.js gzip | 309 B | 309 B | ✓ |
css-HASH.js gzip | 327 B | 327 B | ✓ |
dynamic-HASH.js gzip | 2.57 kB | 3.05 kB | |
head-HASH.js gzip | 351 B | 351 B | ✓ |
hooks-HASH.js gzip | 920 B | 920 B | ✓ |
image-HASH.js gzip | 5.48 kB | 5.48 kB | ✓ |
index-HASH.js gzip | 263 B | 263 B | ✓ |
link-HASH.js gzip | 2.26 kB | 2.26 kB | ✓ |
routerDirect..HASH.js gzip | 320 B | 320 B | ✓ |
script-HASH.js gzip | 387 B | 387 B | ✓ |
withRouter-HASH.js gzip | 319 B | 319 B | ✓ |
85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
Overall change | 15.2 kB | 15.7 kB |
Client Build Manifests
vercel/next.js canary | ijjk/next.js ncc/use-subscription | Change | |
---|---|---|---|
_buildManifest.js gzip | 460 B | 460 B | ✓ |
Overall change | 460 B | 460 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | ijjk/next.js ncc/use-subscription | Change | |
---|---|---|---|
index.html gzip | 532 B | 532 B | ✓ |
link.html gzip | 546 B | 546 B | ✓ |
withRouter.html gzip | 526 B | 526 B | ✓ |
Overall change | 1.6 kB | 1.6 kB | ✓ |
Diffs
Diff for _buildManifest.js
@@ -8,7 +8,7 @@ self.__BUILD_MANIFEST = {
"static\u002Fchunks\u002Fpages\u002Fcss-16a755ee71604f2b.js"
],
"/dynamic": [
- "static\u002Fchunks\u002Fpages\u002Fdynamic-84f8d81080673359.js"
+ "static\u002Fchunks\u002Fpages\u002Fdynamic-db84c8a4bbee83c6.js"
],
"/head": ["static\u002Fchunks\u002Fpages\u002Fhead-96a5d6ed07cf5a83.js"],
"/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-9dfe734f583d4926.js"],
Diff for dynamic-HASH.js
@@ -253,7 +253,7 @@
});
exports["default"] = void 0;
var _react = _interopRequireDefault(__webpack_require__(7294));
- var _useSubscription = __webpack_require__(7161);
+ var _useSubscription = __webpack_require__(2021);
var _loadableContext = __webpack_require__(3644);
function _interopRequireDefault(obj) {
return obj && obj.__esModule
@@ -627,85 +627,195 @@
/***/
},
- /***/ 5152: /***/ function(
+ /***/ 2021: /***/ function(
module,
__unused_webpack_exports,
__webpack_require__
) {
- module.exports = __webpack_require__(7645);
-
- /***/
- },
-
- /***/ 8217: /***/ function(
- __unused_webpack_module,
- exports,
- __webpack_require__
- ) {
- "use strict";
- /** @license React vundefined
- * use-subscription.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
- var e = __webpack_require__(6086),
- g = __webpack_require__(7294);
- exports.useSubscription = function(a) {
- var c = a.getCurrentValue,
- d = a.subscribe,
- b = g.useState(function() {
- return { getCurrentValue: c, subscribe: d, value: c() };
- });
- a = b[0];
- var f = b[1];
- b = a.value;
- if (a.getCurrentValue !== c || a.subscribe !== d)
- (b = c()), f({ getCurrentValue: c, subscribe: d, value: b });
- g.useDebugValue(b);
- g.useEffect(
- function() {
- function b() {
- if (!a) {
- var b = c();
- f(function(a) {
- return a.getCurrentValue !== c ||
- a.subscribe !== d ||
- a.value === b
- ? a
- : e({}, a, { value: b });
+ var __dirname = "/";
+ (() => {
+ "use strict";
+ var e = {
+ 800: e => {
+ /*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+ var r = Object.getOwnPropertySymbols;
+ var t = Object.prototype.hasOwnProperty;
+ var u = Object.prototype.propertyIsEnumerable;
+ function toObject(e) {
+ if (e === null || e === undefined) {
+ throw new TypeError(
+ "Object.assign cannot be called with null or undefined"
+ );
+ }
+ return Object(e);
+ }
+ function shouldUseNative() {
+ try {
+ if (!Object.assign) {
+ return false;
+ }
+ var e = new String("abc");
+ e[5] = "de";
+ if (Object.getOwnPropertyNames(e)[0] === "5") {
+ return false;
+ }
+ var r = {};
+ for (var t = 0; t < 10; t++) {
+ r["_" + String.fromCharCode(t)] = t;
+ }
+ var u = Object.getOwnPropertyNames(r).map(function(e) {
+ return r[e];
});
+ if (u.join("") !== "0123456789") {
+ return false;
+ }
+ var n = {};
+ "abcdefghijklmnopqrst".split("").forEach(function(e) {
+ n[e] = e;
+ });
+ if (
+ Object.keys(Object.assign({}, n)).join("") !==
+ "abcdefghijklmnopqrst"
+ ) {
+ return false;
+ }
+ return true;
+ } catch (e) {
+ return false;
}
}
- var a = !1,
- h = d(b);
- b();
- return function() {
- a = !0;
- h();
+ e.exports = shouldUseNative()
+ ? Object.assign
+ : function(e, n) {
+ var a;
+ var i = toObject(e);
+ var s;
+ for (var c = 1; c < arguments.length; c++) {
+ a = Object(arguments[c]);
+ for (var o in a) {
+ if (t.call(a, o)) {
+ i[o] = a[o];
+ }
+ }
+ if (r) {
+ s = r(a);
+ for (var f = 0; f < s.length; f++) {
+ if (u.call(a, s[f])) {
+ i[s[f]] = a[s[f]];
+ }
+ }
+ }
+ }
+ return i;
+ };
+ },
+ 569: (e, r, t) => {
+ /** @license React vundefined
+ * use-subscription.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+ if (false) {
+ }
+ },
+ 403: (e, r, t) => {
+ /** @license React vundefined
+ * use-subscription.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+ var u = t(800),
+ n = t(522);
+ r.useSubscription = function(e) {
+ var r = e.getCurrentValue,
+ t = e.subscribe,
+ a = n.useState(function() {
+ return { getCurrentValue: r, subscribe: t, value: r() };
+ });
+ e = a[0];
+ var i = a[1];
+ a = e.value;
+ if (e.getCurrentValue !== r || e.subscribe !== t)
+ (a = r()), i({ getCurrentValue: r, subscribe: t, value: a });
+ n.useDebugValue(a);
+ n.useEffect(
+ function() {
+ function b() {
+ if (!e) {
+ var n = r();
+ i(function(e) {
+ return e.getCurrentValue !== r ||
+ e.subscribe !== t ||
+ e.value === n
+ ? e
+ : u({}, e, { value: n });
+ });
+ }
+ }
+ var e = !1,
+ n = t(b);
+ b();
+ return function() {
+ e = !0;
+ n();
+ };
+ },
+ [r, t]
+ );
+ return a;
};
},
- [c, d]
- );
- return b;
- };
+ 138: (e, r, t) => {
+ if (true) {
+ e.exports = t(403);
+ } else {
+ }
+ },
+ 522: e => {
+ e.exports = __webpack_require__(7294);
+ }
+ };
+ var r = {};
+ function __nccwpck_require__(t) {
+ var u = r[t];
+ if (u !== undefined) {
+ return u.exports;
+ }
+ var n = (r[t] = { exports: {} });
+ var a = true;
+ try {
+ e[t](n, n.exports, __nccwpck_require__);
+ a = false;
+ } finally {
+ if (a) delete r[t];
+ }
+ return n.exports;
+ }
+ if (typeof __nccwpck_require__ !== "undefined")
+ __nccwpck_require__.ab = __dirname + "/";
+ var t = __nccwpck_require__(138);
+ module.exports = t;
+ })();
/***/
},
- /***/ 7161: /***/ function(
+ /***/ 5152: /***/ function(
module,
__unused_webpack_exports,
__webpack_require__
) {
- "use strict";
-
- if (true) {
- module.exports = __webpack_require__(8217);
- } else {
- }
+ module.exports = __webpack_require__(7645);
/***/
}
Default Build with SWC (Increase detected ⚠️ )
General Overall decrease ✓
vercel/next.js canary | ijjk/next.js ncc/use-subscription | Change | |
---|---|---|---|
buildDuration | 21.9s | 21.6s | -257ms |
buildDurationCached | 7.1s | 7s | -61ms |
nodeModulesSize | 467 MB | 467 MB | -8.74 kB |
Page Load Tests Overall increase ✓
vercel/next.js canary | ijjk/next.js ncc/use-subscription | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 3.663 | 3.702 | |
/ avg req/sec | 682.48 | 675.23 | |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.62 | 1.593 | -0.03 |
/error-in-render avg req/sec | 1543.29 | 1569.16 | +25.87 |
Client Bundles (main, webpack)
vercel/next.js canary | ijjk/next.js ncc/use-subscription | Change | |
---|---|---|---|
925.HASH.js gzip | 178 B | 178 B | ✓ |
framework-HASH.js gzip | 42.3 kB | 42.3 kB | ✓ |
main-HASH.js gzip | 28.8 kB | 28.8 kB | ✓ |
webpack-HASH.js gzip | 1.45 kB | 1.45 kB | ✓ |
Overall change | 72.7 kB | 72.7 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | ijjk/next.js ncc/use-subscription | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages Overall increase ⚠️
vercel/next.js canary | ijjk/next.js ncc/use-subscription | Change | |
---|---|---|---|
_app-HASH.js gzip | 1.35 kB | 1.35 kB | ✓ |
_error-HASH.js gzip | 179 B | 179 B | ✓ |
amp-HASH.js gzip | 313 B | 313 B | ✓ |
css-HASH.js gzip | 324 B | 324 B | ✓ |
dynamic-HASH.js gzip | 2.56 kB | 3.04 kB | |
head-HASH.js gzip | 351 B | 351 B | ✓ |
hooks-HASH.js gzip | 921 B | 921 B | ✓ |
image-HASH.js gzip | 5.59 kB | 5.59 kB | ✓ |
index-HASH.js gzip | 261 B | 261 B | ✓ |
link-HASH.js gzip | 2.33 kB | 2.33 kB | ✓ |
routerDirect..HASH.js gzip | 322 B | 322 B | ✓ |
script-HASH.js gzip | 388 B | 388 B | ✓ |
withRouter-HASH.js gzip | 317 B | 317 B | ✓ |
85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
Overall change | 15.3 kB | 15.8 kB |
Client Build Manifests Overall increase ⚠️
vercel/next.js canary | ijjk/next.js ncc/use-subscription | Change | |
---|---|---|---|
_buildManifest.js gzip | 458 B | 459 B | |
Overall change | 458 B | 459 B |
Rendered Page Sizes
vercel/next.js canary | ijjk/next.js ncc/use-subscription | Change | |
---|---|---|---|
index.html gzip | 532 B | 532 B | ✓ |
link.html gzip | 546 B | 546 B | ✓ |
withRouter.html gzip | 527 B | 527 B | ✓ |
Overall change | 1.6 kB | 1.6 kB | ✓ |
Diffs
Diff for _buildManifest.js
@@ -8,7 +8,7 @@ self.__BUILD_MANIFEST = {
"static\u002Fchunks\u002Fpages\u002Fcss-16a755ee71604f2b.js"
],
"/dynamic": [
- "static\u002Fchunks\u002Fpages\u002Fdynamic-84f8d81080673359.js"
+ "static\u002Fchunks\u002Fpages\u002Fdynamic-db84c8a4bbee83c6.js"
],
"/head": ["static\u002Fchunks\u002Fpages\u002Fhead-96a5d6ed07cf5a83.js"],
"/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-9dfe734f583d4926.js"],
Diff for dynamic-HASH.js
@@ -253,7 +253,7 @@
});
exports["default"] = void 0;
var _react = _interopRequireDefault(__webpack_require__(7294));
- var _useSubscription = __webpack_require__(7161);
+ var _useSubscription = __webpack_require__(2021);
var _loadableContext = __webpack_require__(3644);
function _interopRequireDefault(obj) {
return obj && obj.__esModule
@@ -627,85 +627,195 @@
/***/
},
- /***/ 5152: /***/ function(
+ /***/ 2021: /***/ function(
module,
__unused_webpack_exports,
__webpack_require__
) {
- module.exports = __webpack_require__(7645);
-
- /***/
- },
-
- /***/ 8217: /***/ function(
- __unused_webpack_module,
- exports,
- __webpack_require__
- ) {
- "use strict";
- /** @license React vundefined
- * use-subscription.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
- var e = __webpack_require__(6086),
- g = __webpack_require__(7294);
- exports.useSubscription = function(a) {
- var c = a.getCurrentValue,
- d = a.subscribe,
- b = g.useState(function() {
- return { getCurrentValue: c, subscribe: d, value: c() };
- });
- a = b[0];
- var f = b[1];
- b = a.value;
- if (a.getCurrentValue !== c || a.subscribe !== d)
- (b = c()), f({ getCurrentValue: c, subscribe: d, value: b });
- g.useDebugValue(b);
- g.useEffect(
- function() {
- function b() {
- if (!a) {
- var b = c();
- f(function(a) {
- return a.getCurrentValue !== c ||
- a.subscribe !== d ||
- a.value === b
- ? a
- : e({}, a, { value: b });
+ var __dirname = "/";
+ (() => {
+ "use strict";
+ var e = {
+ 800: e => {
+ /*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+ var r = Object.getOwnPropertySymbols;
+ var t = Object.prototype.hasOwnProperty;
+ var u = Object.prototype.propertyIsEnumerable;
+ function toObject(e) {
+ if (e === null || e === undefined) {
+ throw new TypeError(
+ "Object.assign cannot be called with null or undefined"
+ );
+ }
+ return Object(e);
+ }
+ function shouldUseNative() {
+ try {
+ if (!Object.assign) {
+ return false;
+ }
+ var e = new String("abc");
+ e[5] = "de";
+ if (Object.getOwnPropertyNames(e)[0] === "5") {
+ return false;
+ }
+ var r = {};
+ for (var t = 0; t < 10; t++) {
+ r["_" + String.fromCharCode(t)] = t;
+ }
+ var u = Object.getOwnPropertyNames(r).map(function(e) {
+ return r[e];
});
+ if (u.join("") !== "0123456789") {
+ return false;
+ }
+ var n = {};
+ "abcdefghijklmnopqrst".split("").forEach(function(e) {
+ n[e] = e;
+ });
+ if (
+ Object.keys(Object.assign({}, n)).join("") !==
+ "abcdefghijklmnopqrst"
+ ) {
+ return false;
+ }
+ return true;
+ } catch (e) {
+ return false;
}
}
- var a = !1,
- h = d(b);
- b();
- return function() {
- a = !0;
- h();
+ e.exports = shouldUseNative()
+ ? Object.assign
+ : function(e, n) {
+ var a;
+ var i = toObject(e);
+ var s;
+ for (var c = 1; c < arguments.length; c++) {
+ a = Object(arguments[c]);
+ for (var o in a) {
+ if (t.call(a, o)) {
+ i[o] = a[o];
+ }
+ }
+ if (r) {
+ s = r(a);
+ for (var f = 0; f < s.length; f++) {
+ if (u.call(a, s[f])) {
+ i[s[f]] = a[s[f]];
+ }
+ }
+ }
+ }
+ return i;
+ };
+ },
+ 569: (e, r, t) => {
+ /** @license React vundefined
+ * use-subscription.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+ if (false) {
+ }
+ },
+ 403: (e, r, t) => {
+ /** @license React vundefined
+ * use-subscription.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+ var u = t(800),
+ n = t(522);
+ r.useSubscription = function(e) {
+ var r = e.getCurrentValue,
+ t = e.subscribe,
+ a = n.useState(function() {
+ return { getCurrentValue: r, subscribe: t, value: r() };
+ });
+ e = a[0];
+ var i = a[1];
+ a = e.value;
+ if (e.getCurrentValue !== r || e.subscribe !== t)
+ (a = r()), i({ getCurrentValue: r, subscribe: t, value: a });
+ n.useDebugValue(a);
+ n.useEffect(
+ function() {
+ function b() {
+ if (!e) {
+ var n = r();
+ i(function(e) {
+ return e.getCurrentValue !== r ||
+ e.subscribe !== t ||
+ e.value === n
+ ? e
+ : u({}, e, { value: n });
+ });
+ }
+ }
+ var e = !1,
+ n = t(b);
+ b();
+ return function() {
+ e = !0;
+ n();
+ };
+ },
+ [r, t]
+ );
+ return a;
};
},
- [c, d]
- );
- return b;
- };
+ 138: (e, r, t) => {
+ if (true) {
+ e.exports = t(403);
+ } else {
+ }
+ },
+ 522: e => {
+ e.exports = __webpack_require__(7294);
+ }
+ };
+ var r = {};
+ function __nccwpck_require__(t) {
+ var u = r[t];
+ if (u !== undefined) {
+ return u.exports;
+ }
+ var n = (r[t] = { exports: {} });
+ var a = true;
+ try {
+ e[t](n, n.exports, __nccwpck_require__);
+ a = false;
+ } finally {
+ if (a) delete r[t];
+ }
+ return n.exports;
+ }
+ if (typeof __nccwpck_require__ !== "undefined")
+ __nccwpck_require__.ab = __dirname + "/";
+ var t = __nccwpck_require__(138);
+ module.exports = t;
+ })();
/***/
},
- /***/ 7161: /***/ function(
+ /***/ 5152: /***/ function(
module,
__unused_webpack_exports,
__webpack_require__
) {
- "use strict";
-
- if (true) {
- module.exports = __webpack_require__(8217);
- } else {
- }
+ module.exports = __webpack_require__(7645);
/***/
}
@timneutkens @ijjk FYI, use-subscription just releases a new version 1.6.0 which solves the peer dependency version issue. |
@SukkaW pre-compiling also speeds up installing a bit, but it does seem the |
I believe this addition has outputted arrow functions in the build which was flagged by our ECMAScript validator. Adding |
@@ -0,0 +1,25 @@ | |||
(()=>{"use strict";var e={800:e=>{ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was updated in #36159 which is available in the latest canary of Next.js
@ijjk With the release of React 18.1.0 (facebook/react#24289), Next.js should either update the built-in dependencies or revert back using external dependencies. |
- [x] Make sure the linting passes by running `yarn lint` Back in 2019, React released the first version of `use-subscription` (facebook/react#15022). At the time, we only has limited information about concurrent rendering, and #9026 add the initial concurrent mode support. In 2020, React provides a first-party official API `useMutableSource` (reactjs/rfcs#147, facebook/react#18000): > ... enables React components to safely and efficiently read from a mutable external source in Concurrent Mode. React 18 introduces `useMutableSource`'s replacement `useSyncExternalStore` (see details here: reactwg/react-18#86), and React changes `use-subscription` implementation to use `useSyncExternalStore` directly: facebook/react#24289 > In React 18, `React.useSyncExternalStore` is a built-in replacement for `useSubscription`. > > This PR makes `useSubscription` simply use `React.useSyncExternalStore` when available. For pre-18, it uses a `use-sync-external-store` shim which is very similar in `use-subscription` but fixes some flaws with concurrent rendering. And according to `use-subscription`: > You may now migrate to [`use-sync-external-store`](https://www.npmjs.com/package/use-sync-external-store) directly instead, which has the same API as `React.useSyncExternalStore`. The `use-subscription` package is now a thin wrapper over `use-sync-external-store` and will not be updated further. The PR does exactly that: - Removes the precompiled `use-subscription` introduced in #35746 - Adds the `use-sync-external-store` to the dependencies. - The `use-sync-external-store` package enables compatibility with React 16 and React 17. - Do not pre-compile `use-sync-external-store` since it is also the dependency of some popular React state management libraries like `react-redux`, `zustand`, `valtio`, `@xstate/react` and `@apollo/client`, etc. By install - Replace `useSubscription` usage with `useSyncExternalStore` --- Ref: #9026, #35746 and #36159 Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com>
This ensures we pass the
peerDependencies
checknpm install
enforces.Fixes: #35707