Update to target es5 for use-subscription #36159

ijjk · 2022-04-14T14:40:20Z

This ensures we use the es5 target when pre-compiling the use-subscription dependency similar to our other pre-compiled browser dependencies.

Bug

Related issues linked using fixes #number
Integration tests added
Errors have helpful link attached, see contributing.md

Fixes: #36146

ijjk · 2022-04-14T15:04:36Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/compiled-use-subscription	Change
buildDuration	15.9s	16s	⚠️ +104ms
buildDurationCached	6.3s	6.3s	⚠️ +3ms
nodeModulesSize	484 MB	484 MB	⚠️ +40 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	ijjk/next.js update/compiled-use-subscription	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.242	3.226	-0.02
/ avg req/sec	771.13	775.06	+3.93
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.398	1.366	-0.03
/error-in-render avg req/sec	1788.35	1830.06	+41.71

Client Bundles (main, webpack)

	vercel/next.js canary	ijjk/next.js update/compiled-use-subscription	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	28.3 kB	28.3 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72 kB	72 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js update/compiled-use-subscription	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	ijjk/next.js update/compiled-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	3.05 kB	3.04 kB	-10 B
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.73 kB	5.73 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.36 kB	2.36 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16 kB	16 kB	-10 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/compiled-use-subscription	Change
_buildManifest.js gzip	460 B	461 B	⚠️ +1 B
Overall change	460 B	461 B	⚠️ +1 B

Rendered Page Sizes

	vercel/next.js canary	ijjk/next.js update/compiled-use-subscription	Change
index.html gzip	531 B	531 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	525 B	525 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-f8d6ff68a6e8b080.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-f3793288d6fe105a.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-2fc05fc466ebee90.js"
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-96a5d6ed07cf5a83.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-9dfe734f583d4926.js"],

Diff for dynamic-HASH.js

@@ -633,10 +633,10 @@
       __webpack_require__
     ) {
       var __dirname = "/";
-      (() => {
+      (function() {
         "use strict";
         var e = {
-          800: e => {
+          800: function(e) {
             /*
 object-assign
 (c) Sindre Sorhus
@@ -713,7 +713,7 @@ object-assign
                   return i;
                 };
           },
-          569: (e, r, t) => {
+          569: function(e, r, t) {
             /** @license React vundefined
              * use-subscription.development.js
              *
@@ -725,7 +725,7 @@ object-assign
             if (false) {
             }
           },
-          403: (e, r, t) => {
+          403: function(e, r, t) {
             /** @license React vundefined
              * use-subscription.production.min.js
              *
@@ -775,13 +775,13 @@ object-assign
               return a;
             };
           },
-          138: (e, r, t) => {
+          138: function(e, r, t) {
             if (true) {
               e.exports = t(403);
             } else {
             }
           },
-          522: e => {
+          522: function(e) {
             e.exports = __webpack_require__(7294);
           }
         };

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/compiled-use-subscription	Change
buildDuration	18.9s	19s	⚠️ +87ms
buildDurationCached	6.3s	6.2s	-91ms
nodeModulesSize	484 MB	484 MB	⚠️ +40 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	ijjk/next.js update/compiled-use-subscription	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.236	3.221	-0.02
/ avg req/sec	772.54	776.13	+3.59
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.4	1.389	-0.01
/error-in-render avg req/sec	1786	1799.95	+13.95

Client Bundles (main, webpack)

	vercel/next.js canary	ijjk/next.js update/compiled-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.7 kB	28.7 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.6 kB	72.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js update/compiled-use-subscription	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	ijjk/next.js update/compiled-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	325 B	325 B	✓
dynamic-HASH.js gzip	3.03 kB	3.02 kB	-3 B
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	921 B	921 B	✓
image-HASH.js gzip	5.77 kB	5.77 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.44 kB	2.44 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	393 B	393 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.1 kB	16.1 kB	-3 B

Client Build Manifests

	vercel/next.js canary	ijjk/next.js update/compiled-use-subscription	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	ijjk/next.js update/compiled-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-f8d6ff68a6e8b080.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-f3793288d6fe105a.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-2fc05fc466ebee90.js"
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-96a5d6ed07cf5a83.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-9dfe734f583d4926.js"],

Diff for dynamic-HASH.js

@@ -633,10 +633,10 @@
       __webpack_require__
     ) {
       var __dirname = "/";
-      (() => {
+      (function() {
         "use strict";
         var e = {
-          800: e => {
+          800: function(e) {
             /*
 object-assign
 (c) Sindre Sorhus
@@ -713,7 +713,7 @@ object-assign
                   return i;
                 };
           },
-          569: (e, r, t) => {
+          569: function(e, r, t) {
             /** @license React vundefined
              * use-subscription.development.js
              *
@@ -725,7 +725,7 @@ object-assign
             if (false) {
             }
           },
-          403: (e, r, t) => {
+          403: function(e, r, t) {
             /** @license React vundefined
              * use-subscription.production.min.js
              *
@@ -775,13 +775,13 @@ object-assign
               return a;
             };
           },
-          138: (e, r, t) => {
+          138: function(e, r, t) {
             if (true) {
               e.exports = t(403);
             } else {
             }
           },
-          522: e => {
+          522: function(e) {
             e.exports = __webpack_require__(7294);
           }
         };

Commit: 61c3157

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

ijjk added 2 commits April 14, 2022 09:37

Update to target es5 for use-subscription

94acd3a

update compiled

61c3157

ijjk requested review from timneutkens, shuding and huozhi as code owners April 14, 2022 14:40

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Apr 14, 2022

huozhi approved these changes Apr 14, 2022

View reviewed changes

kodiakhq bot merged commit cb526f5 into vercel:canary Apr 14, 2022

ijjk deleted the update/compiled-use-subscription branch April 14, 2022 15:23

balazsorban44 mentioned this pull request Apr 27, 2022

Update to pre-compile use-subscription #35746

Merged

SukkaW mentioned this pull request May 6, 2022

replace use-subscription with use-sync-external-store #36733

Merged

1 task

github-actions bot locked as resolved and limited conversation to collaborators May 15, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update to target es5 for use-subscription #36159

Update to target es5 for use-subscription #36159

ijjk commented Apr 14, 2022

ijjk commented Apr 14, 2022

Diffs

Diffs

Update to target es5 for use-subscription #36159

Update to target es5 for use-subscription #36159

Conversation

ijjk commented Apr 14, 2022

Bug

ijjk commented Apr 14, 2022

Stats from current PR

Diffs

Diffs