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.
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
peerDependencieschecknpm installenforces.Fixes: #35707