Skip to content
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 target es5 for use-subscription #36159

Merged
merged 2 commits into from
Apr 14, 2022

Conversation

ijjk
Copy link
Member

@ijjk ijjk commented Apr 14, 2022

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
Copy link
Member Author

ijjk commented Apr 14, 2022

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

@kodiakhq kodiakhq bot merged commit cb526f5 into vercel:canary Apr 14, 2022
@ijjk ijjk deleted the update/compiled-use-subscription branch April 14, 2022 15:23
kodiakhq bot pushed a commit that referenced this pull request May 8, 2022
- [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>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 15, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

IE11 breaks when importing components with next/dynamic
2 participants