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 Rollup to 3.x #26442

Merged
merged 3 commits into from
Mar 24, 2023
Merged

Conversation

markerikson
Copy link
Contributor

@markerikson markerikson commented Mar 20, 2023

Summary

This PR:

  • Updates Rollup from 2.x to latest 3.x, and updates associated plugins
    • Updates deprecated / altered config settings in the Rollup plugin pipeline
    • Fixes some file extension and import issues related to use of ESM in react-dom-webpack-server
  • Removes a now-obsolete strip-unused-imports Rollup plugin
  • Fixes an existing bug with the Rollup 2.x plugin pipeline on main that was causing parts of DOMProperty.js to get left out of the react-dom-webpack-server JS bundles, by adding a new plugin to tell Rollup to treat that file as if it as side effects

This PR should be functionally identical to the other existing "Rollup 3 upgrade" PR at #26078 . I'm filing this as a near-duplicate because I'm ready to push this change through ASAP so that I can follow it up with a PR that adds sourcemap support, that PR's artifact diffing seems like it's possibly stuck and I want to compare the build results, and I've got this set up against latest main.

This gets React's build setup updated to the latest Rollup version, which is generally a good practice, but also ensures that any further Rollup config tweaks can be done using the current Rollup docs as a reference.

How did you test this change?

  • Made builds from the latest main
  • Updated Rollup package versions and cross-compared the changes I needed to make locally to get successful builds vs Update rollup to v3 #26078
  • Diffed the output folders between main and this PR, and confirmed that the bundle contents are identical (with the exception of version strings and the react-dom-webpack-server bundle fix re-adding missing DOMProperty.js content)

@react-sizebot
Copy link

react-sizebot commented Mar 20, 2023

Comparing: 3554c88...a2ed86a

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js = 157.77 kB 157.77 kB = 50.28 kB 50.28 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 159.36 kB 159.36 kB = 50.79 kB 50.79 kB
facebook-www/ReactDOM-prod.classic.js = 542.73 kB 542.73 kB = 96.62 kB 96.62 kB
facebook-www/ReactDOM-prod.modern.js = 526.47 kB 526.47 kB = 94.16 kB 94.16 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js = 29.47 kB 28.46 kB = 10.09 kB 9.77 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js = 29.47 kB 28.46 kB = 10.09 kB 9.77 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js = 29.22 kB 28.22 kB = 9.99 kB 9.66 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js = 29.22 kB 28.22 kB = 9.99 kB 9.66 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js = 28.59 kB 27.59 kB = 9.81 kB 9.48 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js = 28.59 kB 27.59 kB = 9.81 kB 9.48 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js = 28.51 kB 27.51 kB = 9.80 kB 9.48 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js = 28.51 kB 27.51 kB = 9.80 kB 9.48 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js = 28.30 kB 27.30 kB = 9.70 kB 9.38 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js = 28.30 kB 27.30 kB = 9.70 kB 9.38 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js = 29.51 kB 28.46 kB = 10.11 kB 9.77 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js = 29.27 kB 28.22 kB = 10.01 kB 9.66 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js = 28.55 kB 27.51 kB = 9.82 kB 9.48 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js = 28.63 kB 27.59 kB = 9.83 kB 9.48 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js = 28.35 kB 27.30 kB = 9.73 kB 9.38 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js = 104.54 kB 99.86 kB = 25.41 kB 24.64 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js = 104.54 kB 99.86 kB = 25.41 kB 24.64 kB
facebook-www/ReactFlightDOMRelayServer-prod.classic.js = 37.45 kB 35.76 kB = 9.37 kB 8.93 kB
facebook-www/ReactFlightDOMRelayServer-prod.modern.js = 37.45 kB 35.76 kB = 9.37 kB 8.93 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js = 104.59 kB 99.86 kB = 25.43 kB 24.64 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js = 103.15 kB 98.46 kB = 25.02 kB 24.25 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js = 103.15 kB 98.46 kB = 25.02 kB 24.25 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js = 106.86 kB 102.00 kB = 25.19 kB 24.42 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js = 106.86 kB 102.00 kB = 25.19 kB 24.42 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js = 103.20 kB 98.46 kB = 25.04 kB 24.25 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 101.99 kB 97.31 kB = 25.05 kB 24.27 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 101.99 kB 97.31 kB = 25.05 kB 24.27 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js = 106.93 kB 102.00 kB = 25.21 kB 24.42 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 101.50 kB 96.82 kB = 24.90 kB 24.12 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 101.50 kB 96.82 kB = 24.90 kB 24.12 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 102.04 kB 97.31 kB = 25.07 kB 24.27 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 101.55 kB 96.82 kB = 24.92 kB 24.12 kB
facebook-www/ReactFlightDOMRelayServer-dev.modern.js = 75.62 kB 70.33 kB = 18.44 kB 17.55 kB
facebook-www/ReactFlightDOMRelayServer-dev.classic.js = 75.62 kB 70.33 kB = 18.44 kB 17.55 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-client/cjs/react-client-flight.production.min.js +1.92% 6.06 kB 6.17 kB +2.09% 2.40 kB 2.45 kB
oss-stable-semver/react-client/cjs/react-client-flight.production.min.js +1.92% 6.06 kB 6.17 kB +2.09% 2.40 kB 2.45 kB
oss-stable/react-client/cjs/react-client-flight.production.min.js +1.92% 6.06 kB 6.17 kB +2.09% 2.40 kB 2.45 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.min.js +1.09% 0.74 kB 0.74 kB +1.10% 0.46 kB 0.46 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.min.js +1.09% 0.74 kB 0.74 kB +1.10% 0.46 kB 0.46 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.min.js +1.09% 0.74 kB 0.74 kB +1.10% 0.46 kB 0.46 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js +0.75% 4.29 kB 4.32 kB +0.65% 1.84 kB 1.86 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js +0.75% 4.29 kB 4.32 kB +0.65% 1.84 kB 1.86 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js +0.75% 4.29 kB 4.32 kB +0.65% 1.84 kB 1.86 kB
oss-experimental/react-server/cjs/react-server-flight.production.min.js +0.70% 16.61 kB 16.73 kB +0.81% 5.82 kB 5.87 kB
oss-stable-semver/react-server/cjs/react-server-flight.production.min.js +0.70% 16.61 kB 16.73 kB +0.81% 5.82 kB 5.87 kB
oss-stable/react-server/cjs/react-server-flight.production.min.js +0.70% 16.61 kB 16.73 kB +0.81% 5.82 kB 5.87 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-flight-server.production.min.js +0.66% 1.22 kB 1.23 kB +0.87% 0.57 kB 0.58 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-flight-server.production.min.js +0.66% 1.22 kB 1.23 kB +0.87% 0.57 kB 0.58 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-flight-server.production.min.js +0.66% 1.22 kB 1.23 kB +0.87% 0.57 kB 0.58 kB
oss-experimental/react-client/cjs/react-client-flight.development.js +0.52% 22.14 kB 22.25 kB +0.61% 5.90 kB 5.93 kB
oss-stable-semver/react-client/cjs/react-client-flight.development.js +0.52% 22.14 kB 22.25 kB +0.61% 5.90 kB 5.93 kB
oss-stable/react-client/cjs/react-client-flight.development.js +0.52% 22.14 kB 22.25 kB +0.61% 5.90 kB 5.93 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js +0.52% 1.55 kB 1.56 kB +0.69% 0.72 kB 0.73 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js +0.52% 1.55 kB 1.56 kB +0.69% 0.72 kB 0.73 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js +0.52% 1.55 kB 1.56 kB +0.69% 0.72 kB 0.73 kB
oss-stable-semver/react-server/cjs/react-server.production.min.js +0.47% 24.49 kB 24.61 kB +0.60% 8.34 kB 8.39 kB
oss-stable/react-server/cjs/react-server.production.min.js +0.47% 24.49 kB 24.61 kB +0.60% 8.34 kB 8.39 kB
oss-experimental/react-server/cjs/react-server.production.min.js +0.47% 24.75 kB 24.87 kB +0.58% 8.43 kB 8.48 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-flight-server.development.js +0.34% 2.34 kB 2.35 kB +0.56% 0.90 kB 0.90 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-flight-server.development.js +0.34% 2.34 kB 2.35 kB +0.56% 0.90 kB 0.90 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-flight-server.development.js +0.34% 2.34 kB 2.35 kB +0.56% 0.90 kB 0.90 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-server.production.min.js +0.25% 3.25 kB 3.26 kB +0.82% 1.22 kB 1.23 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-server.production.min.js +0.25% 3.25 kB 3.26 kB +0.82% 1.22 kB 1.23 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-server.production.min.js +0.25% 3.25 kB 3.26 kB +0.82% 1.22 kB 1.23 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js = 29.47 kB 28.46 kB = 10.09 kB 9.77 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js = 29.47 kB 28.46 kB = 10.09 kB 9.77 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js = 29.22 kB 28.22 kB = 9.99 kB 9.66 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js = 29.22 kB 28.22 kB = 9.99 kB 9.66 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js = 28.59 kB 27.59 kB = 9.81 kB 9.48 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js = 28.59 kB 27.59 kB = 9.81 kB 9.48 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js = 28.51 kB 27.51 kB = 9.80 kB 9.48 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js = 28.51 kB 27.51 kB = 9.80 kB 9.48 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js = 28.30 kB 27.30 kB = 9.70 kB 9.38 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js = 28.30 kB 27.30 kB = 9.70 kB 9.38 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js = 29.51 kB 28.46 kB = 10.11 kB 9.77 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js = 29.27 kB 28.22 kB = 10.01 kB 9.66 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js = 28.55 kB 27.51 kB = 9.82 kB 9.48 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js = 28.63 kB 27.59 kB = 9.83 kB 9.48 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js = 28.35 kB 27.30 kB = 9.73 kB 9.38 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js = 104.54 kB 99.86 kB = 25.41 kB 24.64 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js = 104.54 kB 99.86 kB = 25.41 kB 24.64 kB
facebook-www/ReactFlightDOMRelayServer-prod.classic.js = 37.45 kB 35.76 kB = 9.37 kB 8.93 kB
facebook-www/ReactFlightDOMRelayServer-prod.modern.js = 37.45 kB 35.76 kB = 9.37 kB 8.93 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js = 104.59 kB 99.86 kB = 25.43 kB 24.64 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js = 103.15 kB 98.46 kB = 25.02 kB 24.25 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js = 103.15 kB 98.46 kB = 25.02 kB 24.25 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js = 106.86 kB 102.00 kB = 25.19 kB 24.42 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js = 106.86 kB 102.00 kB = 25.19 kB 24.42 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js = 103.20 kB 98.46 kB = 25.04 kB 24.25 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 101.99 kB 97.31 kB = 25.05 kB 24.27 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 101.99 kB 97.31 kB = 25.05 kB 24.27 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js = 106.93 kB 102.00 kB = 25.21 kB 24.42 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 101.50 kB 96.82 kB = 24.90 kB 24.12 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 101.50 kB 96.82 kB = 24.90 kB 24.12 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 102.04 kB 97.31 kB = 25.07 kB 24.27 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 101.55 kB 96.82 kB = 24.92 kB 24.12 kB
facebook-www/ReactFlightDOMRelayServer-dev.modern.js = 75.62 kB 70.33 kB = 18.44 kB 17.55 kB
facebook-www/ReactFlightDOMRelayServer-dev.classic.js = 75.62 kB 70.33 kB = 18.44 kB 17.55 kB

Generated by 🚫 dangerJS against a2ed86a

@markerikson
Copy link
Contributor Author

markerikson commented Mar 20, 2023

Notes:

  • I originally was using interop: 'esModule', but the CircleCI prod artifact tests for useSyncExternalStore failed with TypeError: Z is not a function. Changing that to interop: 'default' to match Update rollup to v3 #26078 seems to fix that issue, although it also leaves this new Rollup import interop helper being added to bundles. Ideally I'd like to have that left out if possible.
  • The other size increase for the various DOM-related bundles is expected and intended, in that the DOMProperty contents are now correctly being included

I'll play with the settings some more and see if I can figure out a way to remove that interop helper and still have useSyncExternalStore's prod test job pass.

edit

The actual build/test error seems to be from build/oss-experimental/react-noop-renderer/cjs/react-noop-renderer.production.min.js, not useSyncExternalStore specifically.

Seems like it's doing var ReactFiberReconciler = require('react-reconciler');. With interop: 'esModule', it later calls var _createReactNoop = createReactNoop(ReactFiberReconciler.default.

@markerikson markerikson force-pushed the feature/upgrade-rollup-v3 branch 2 times, most recently from 82372e2 to 473c59b Compare March 20, 2023 18:55
This was added as part of the "Interaction Tracking" work in facebook#13509
back in 2018. That feature was removed in facebook#20037 in 2020, and this
plugin appears to no longer have any effect on the build output.
@markerikson markerikson force-pushed the feature/upgrade-rollup-v3 branch 5 times, most recently from 350a07e to be8a808 Compare March 20, 2023 19:57
@markerikson
Copy link
Contributor Author

Okay, the PR is finally green!

The big difference between this and #26078 is now in how Rollup is configured to handle ESM/CJS import interop behavior.

On main, Rollup 2.x is set to interop: false. Per rollup/rollup#3710 , that value gives split behavior between using a default import and importing a namespace, but it is deprecated, so we have to change that to something else as part of the upgrade.

#26078 tries setting that value to interop: 'default'. However, that results in the import util helper being added to all bundles, increasing the size.

When I set it to interop: 'esModule', there was no helper util added and bundle sizes stayed the same... but some of the CI tests against our bundles failed. That's because there were cases (mostly in react-noop-renderer) where it did things like import ReactFiberReconciler from 'react-reconciler', but those renderer package bundles are getting wrapped in module.exports = function $$$reconciler() {}. At compile time, Rollup now transforms import ReactFiberReconciler from 'react-reconciler' into const ReactFiberReconciler = require('react-reconciler'), and then later calls createReactNoop(ReactFiberReconciler.default). There isn't a .default field due to the packaging, so that errors.

There were also similar issues with a couple of other dependencies (the art package used by react-art, and error-stack-parser.

I've updated build.js to dynamically determine what the right interop value should be by checking those import paths, and that's allowed CI to finally build clean.

Given all that, I think this PR is now fully ready for review. The bundle sizes should be effectively unchanged vs main, and the output looks otherwise the same.

/cc @gaearon

@markerikson
Copy link
Contributor Author

markerikson commented Mar 21, 2023

Did a pretty extensive hand-check of a full folder diff between the output of yarn build on main vs on this branch, using Beyond Compare to inspect the two build output folders:

image

Ignoring version string changes, the only actual differences I see are:

  • A couple spots where var isPrimaryRenderer = true and references to if (isPrimaryRenderer) are now reasonably getting omitted on this branch, as that's a constant
  • Some formatting changes, such as the order of exports like react package UMD files, or the react-art bundles now being formatted consistently. Since nothing about the Prettier usage changed specifically, my guess is this is due to Rollup internal processing pipeline ordering being tweaked.

image

  • The existing known issue with react-dom-webpack-server bundles not retaining all of DOMProperty.js ( Bug: react-dom-webpack-server bundles are currently broken on main #26443 ) , and more of that getting stripped out in the Rollup v3 bundles generated by this branch. Per discussion in that issue, we've concluded that A) it's already broken, but B) that code is dead in those bundles anyway so it's irrelevant.

So, no actual meaningful differences in build output that I can see.

Just pushed one last tweak to the CJS/ESM import mapping behavior, and with that I think this PR is good to go from my end!

@gaearon
Copy link
Collaborator

gaearon commented Mar 21, 2023

When I set it to interop: 'esModule', there was no helper util added and bundle sizes stayed the same... but some of the CI tests against our bundles failed. That's because there were cases (mostly in react-noop-renderer) where it did things like import ReactFiberReconciler from 'react-reconciler', but those renderer package bundles are getting wrapped in module.exports = function $$$reconciler() {}. At compile time, Rollup now transforms import ReactFiberReconciler from 'react-reconciler' into const ReactFiberReconciler = require('react-reconciler'), and then later calls createReactNoop(ReactFiberReconciler.default). There isn't a .default field due to the packaging, so that errors.

I don't love the idea of keeping a list of these special cases. Can you think of any other solutions? I don't understand the problem deeply enough off the top of my head, so these may be silly:

  • Can the wrapper itself be ESM to avoid this?
    • Maybe it can't be ESM because we ship the wrapper to npm?
    • But if we ship the wrapper to npm, why are we reading the reconciler from it? Is it because the "noop" package is not inlining the reconciler — so it literally uses the npm version of the reconciler?
      • Would shipping an extra ESM bundle of the reconciler package solve this? We might have some ESM bundles already.
  • Approaching it from another end, could we make .default access work?
    • E.g. maybe we can change our wrappers to provide .default for ESM interop?
  • As a final resort, this list feels related to the list of things in bundles.js with moduleType: RECONCILER.
    • Could we reuse that somehow?

@markerikson
Copy link
Contributor Author

markerikson commented Mar 21, 2023

Yeah, I'm not happy with the list of special cases either :) But the combination of CJS/ESM interop, and the numerous complexities in React's build system, make this setup especially challenging.

Just off the top of my head:

  • I don't think the wrappers can be ESM, because the import statements get converted to require(), and I think those wrappers do end up directly used in NPM packages
  • Yes, the noop code is specifically importing from 'react-reconciler'
  • I do think it's likely that I could tweak the wrappers to force-add a .default field to it. It'd be ugly, but I think something like this is doable:
  [NODE_PROD](source, globalName, filename, moduleType) {
    return `/**
 * @license React
 * ${filename}
 *
${license}
 */
module.exports = function $$$reconciler($$$hostConfig) {
    // Key line:
    module.exports.default = $$$reconciler;
    var exports = {};
${source}
    return exports;
};`;
  },

That doesn't help with the other cases like importing from art or error-stack-parser, though.

'error-stack-parser',
];

if (exactModuleNames.includes(id) || id.startsWith('art/')) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's write down all the art ones explicitly.

// Force Rollup to use the `require()`'d value directly, without adding a `.default`.
// Other cases:
// - `react-art` needs to deal with imports from the `art` package
// -`error-stack-parser`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: space after -

scripts/rollup/build.js Outdated Show resolved Hide resolved
@markerikson
Copy link
Contributor Author

Updated the wrappers to add module.exports.default, and did the array rename and module list tweaks.

Anything else that needs adjustment?

@gaearon
Copy link
Collaborator

gaearon commented Mar 23, 2023

@markerikson Do you have edits disabled for your forks? I can't seem to edit anything on this PR

scripts/rollup/build.js Outdated Show resolved Hide resolved
@markerikson
Copy link
Contributor Author

@gaearon : hmm. I don't seem to have admin rights on our repo fork. Asking internally to get that sorted out so you can push changes.

@markerikson
Copy link
Contributor Author

Grr. I've never actually had to enable "Allow Edits by Maintainers" myself :) Apparently that's per-PR, not per-repo, but I can't find the option anywhere in this page. Don't tell me it's only on PR creation?

Anyway. Let me see if I can address your latest comments.

@gaearon gaearon merged commit 909c6da into facebook:main Mar 24, 2023
@gaearon
Copy link
Collaborator

gaearon commented Mar 24, 2023

Let's give it a try! Thank you

@markerikson
Copy link
Contributor Author

Awesome, thank you!

I'll rebase #26446 momentarily . That looked good yesterday, and I've confirmed that sourcemaps are being included in the packages and getting picked up by build tools.

github-actions bot pushed a commit that referenced this pull request Mar 24, 2023
<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https://github.com/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch
TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It
supports the same options as `yarn test`.
6. If you need a debugger, run `yarn test --debug --watch TestName`,
open `chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https://github.com/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary

This PR:

- Updates Rollup from 2.x to latest 3.x, and updates associated plugins
- Updates deprecated / altered config settings in the Rollup plugin
pipeline
- Fixes some file extension and import issues related to use of ESM in
`react-dom-webpack-server`
- Removes a now-obsolete `strip-unused-imports` Rollup plugin
- <s>Fixes an _existing_ bug with the Rollup 2.x plugin pipeline on
`main` that was causing parts of `DOMProperty.js` to get left out of the
`react-dom-webpack-server` JS bundles, by adding a new plugin to tell
Rollup to treat that file as if it as side effects</s>

This PR should be functionally identical to the other existing "Rollup 3
upgrade" PR at #26078 . I'm filing this as a near-duplicate because I'm
ready to push this change through ASAP so that I can follow it up with a
PR that adds sourcemap support, that PR's artifact diffing seems like
it's possibly stuck and I want to compare the build results, and I've
got this set up against latest `main`.

<!--
Explain the **motivation** for making this change. What existing problem
does the pull request solve?
-->

This gets React's build setup updated to the latest Rollup version,
which is generally a good practice, but also ensures that any further
Rollup config tweaks can be done using the current Rollup docs as a
reference.

## How did you test this change?

<!--
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes the user
interface.
How exactly did you verify that your PR solves the issue you wanted to
solve?
  If you leave this empty, your PR will very likely be closed.
-->

- Made builds from the latest `main`
- Updated Rollup package versions and cross-compared the changes I
needed to make locally to get successful builds vs #26078
- Diffed the output folders between `main` and this PR, and confirmed
that the bundle contents are identical (with the exception of version
strings and the `react-dom-webpack-server` bundle fix re-adding missing
`DOMProperty.js` content)

DiffTrain build for [909c6da](909c6da)
gaearon added a commit that referenced this pull request Mar 25, 2023
Follow-up to #26442.

It looks like we missed a few cases where we default import a CommonJS
module, which leads to Rollup adding `.default` access, e.g.
`require('webpack/lib/Template').default` in the output.

To fix, add the remaining cases to the list of exceptions. Verified by
going through all `externals` in the bundle list, and manually checking
the webpack plugin.
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Apr 11, 2023
Summary:
This sync includes the following changes:
- **[ca01f359b](facebook/react@ca01f359b )**: Remove skipUnmountedBoundaries ([#26489](facebook/react#26489)) //<Ricky>//
- **[43a70a610](facebook/react@43a70a610 )**: Limit the meaning of "custom element" to not include `is` ([#26524](facebook/react#26524)) //<Sebastian Markbåge>//
- **[1308e49a6](facebook/react@1308e49a6 )**: [Flight Plugin] Scan for "use client" ([#26474](facebook/react#26474)) //<dan>//
- **[1a1d61fed](facebook/react@1a1d61fed )**: Warn for ARIA typos on custom elements ([#26523](facebook/react#26523)) //<Sebastian Markbåge>//
- **[73deff0d5](facebook/react@73deff0d5 )**: Refactor DOMProperty and CSSProperty ([#26513](facebook/react#26513)) //<Sebastian Markbåge>//
- **[2d51251e6](facebook/react@2d51251e6 )**: Clean up deferRenderPhaseUpdateToNextBatch ([#26511](facebook/react#26511)) //<Andrew Clark>//
- **[0ffc7f632](facebook/react@0ffc7f632 )**: Update useMemoCache test to confirm that cache persists across errors ([#26510](facebook/react#26510)) //<Joseph Savona>//
- **[29a3be78b](facebook/react@29a3be78b )**: Move ReactDOMFloat to react-dom/src/ ([#26514](facebook/react#26514)) //<Sebastian Markbåge>//
- **[4c2fc0190](facebook/react@4c2fc0190 )**: Generate safe javascript url instead of throwing with disableJavaScriptURLs is on ([#26507](facebook/react#26507)) //<Sebastian Markbåge>//
- **[f0aafa1a7](facebook/react@f0aafa1a7 )**: Convert a few more tests to waitFor test helpers ([#26509](facebook/react#26509)) //<Andrew Clark>//
- **[90995ef8b](facebook/react@90995ef8b )**: Delete "triangle" resuming fuzz tester ([#26508](facebook/react#26508)) //<Andrew Clark>//
- **[f118b7ceb](facebook/react@f118b7ceb )**: [Flight] Gated test for dropped transport of undefined object values ([#26478](facebook/react#26478)) //<Sebastian Silbermann>//
- **[fd0511c72](facebook/react@fd0511c72 )**: [Flight] Add support BigInt support ([#26479](facebook/react#26479)) //<Sebastian Silbermann>//
- **[85de6fde5](facebook/react@85de6fde5 )**: Refactor DOM special cases per tags including controlled fields ([#26501](facebook/react#26501)) //<Sebastian Markbåge>//
- **[1f5cdf8c7](facebook/react@1f5cdf8c7 )**: Update Suspense fuzz tests to use `act` ([#26498](facebook/react#26498)) //<Andrew Clark>//
- **[f62cb39ee](facebook/react@f62cb39ee )**: Make disableSchedulerTimeoutInWorkLoop a static ff ([#26497](facebook/react#26497)) //<Ricky>//
- **[41b4714f1](facebook/react@41b4714f1 )**: Remove disableNativeComponentFrames ([#26490](facebook/react#26490)) //<Ricky>//
- **[fc90eb636](facebook/react@fc90eb636 )**: Codemod more tests to waitFor pattern ([#26494](facebook/react#26494)) //<Andrew Clark>//
- **[e0bbc2662](facebook/react@e0bbc2662 )**: Improve tests that deal with microtasks ([#26493](facebook/react#26493)) //<Andrew Clark>//
- **[8faf75193](facebook/react@8faf75193 )**: Codemod some expiration tests to waitForExpired ([#26491](facebook/react#26491)) //<Andrew Clark>//
- **[8342a0992](facebook/react@8342a0992 )**: Remove unused feature flag disableSchedulerTimeoutBasedOnReactExpirationTime ([#26488](facebook/react#26488)) //<Jan Kassens>//
- **[afea1d0c5](facebook/react@afea1d0c5 )**: [flow] make Flow suppressions explicit on the error ([#26487](facebook/react#26487)) //<Jan Kassens>//
- **[768f965de](facebook/react@768f965de )**: Suspensily committing a prerendered tree ([#26434](facebook/react#26434)) //<Andrew Clark>//
- **[d12bdcda6](facebook/react@d12bdcda6 )**: Fix Flow types of useEffectEvent ([#26468](facebook/react#26468)) //<Sebastian Silbermann>//
- **[73b6435ca](facebook/react@73b6435ca )**: [Float][Fiber] Implement waitForCommitToBeReady for stylesheet resources ([#26450](facebook/react#26450)) //<Josh Story>//
- **[175962c10](facebook/react@175962c10 )**: Fix remaining CommonJS imports after Rollup upgrade ([#26473](facebook/react#26473)) //<dan>//
- **[909c6dacf](facebook/react@909c6dacf )**: Update Rollup to 3.x ([#26442](facebook/react#26442)) //<Mark Erikson>//
- **[9c54b29b4](facebook/react@9c54b29b4 )**: Remove ReactFabricPublicInstance and used definition from ReactNativePrivateInterface ([#26437](facebook/react#26437)) //<Rubén Norte>//
- **[f77099b6f](facebook/react@f77099b6f )**: Remove layout effect warning on the server ([#26395](facebook/react#26395)) //<Ricky>//
- **[51a7c45f8](facebook/react@51a7c45f8 )**: Bugfix: SuspenseList incorrectly forces a fallback ([#26453](facebook/react#26453)) //<Andrew Clark>//
- **[afb3d51dc](facebook/react@afb3d51dc )**: Fix enableClientRenderFallbackOnTextMismatch flag ([#26457](facebook/react#26457)) //<Sebastian Markbåge>//
- **[8e17bfd14](facebook/react@8e17bfd14 )**: Make InternalInstanceHandle type opaque in ReactNativeTypes ([#26461](facebook/react#26461)) //<Rubén Norte>//
- **[b93b4f074](facebook/react@b93b4f074 )**: Should not throw for children of iframe or object ([#26458](facebook/react#26458)) //<Sebastian Markbåge>//
- **[c0b34bc5f](facebook/react@c0b34bc5f )**: chore: update links of docs and api ([#26455](facebook/react#26455)) //<Leedom>//
- **[ffb6733ee](facebook/react@ffb6733ee )**: fix docs link for useSyncExternalStore ([#26452](facebook/react#26452)) //<Valor(华洛)>//
- **[12a1d140e](facebook/react@12a1d140e )**: Don't prerender siblings of suspended component  ([#26380](facebook/react#26380)) //<Andrew Clark>//

Changelog:
[General][Changed] - React Native sync for revisions 77ba161...ca01f35

jest_e2e[run_all_tests]

bypass-github-export-checks

Reviewed By: sammy-SC

Differential Revision: D44669450

fbshipit-source-id: f160aad4719a00df3ceeca78d5f3fcd0aa0f8437
jeongshin pushed a commit to jeongshin/react-native that referenced this pull request May 7, 2023
Summary:
This sync includes the following changes:
- **[ca01f359b](facebook/react@ca01f359b )**: Remove skipUnmountedBoundaries ([facebook#26489](facebook/react#26489)) //<Ricky>//
- **[43a70a610](facebook/react@43a70a610 )**: Limit the meaning of "custom element" to not include `is` ([facebook#26524](facebook/react#26524)) //<Sebastian Markbåge>//
- **[1308e49a6](facebook/react@1308e49a6 )**: [Flight Plugin] Scan for "use client" ([facebook#26474](facebook/react#26474)) //<dan>//
- **[1a1d61fed](facebook/react@1a1d61fed )**: Warn for ARIA typos on custom elements ([facebook#26523](facebook/react#26523)) //<Sebastian Markbåge>//
- **[73deff0d5](facebook/react@73deff0d5 )**: Refactor DOMProperty and CSSProperty ([facebook#26513](facebook/react#26513)) //<Sebastian Markbåge>//
- **[2d51251e6](facebook/react@2d51251e6 )**: Clean up deferRenderPhaseUpdateToNextBatch ([facebook#26511](facebook/react#26511)) //<Andrew Clark>//
- **[0ffc7f632](facebook/react@0ffc7f632 )**: Update useMemoCache test to confirm that cache persists across errors ([facebook#26510](facebook/react#26510)) //<Joseph Savona>//
- **[29a3be78b](facebook/react@29a3be78b )**: Move ReactDOMFloat to react-dom/src/ ([facebook#26514](facebook/react#26514)) //<Sebastian Markbåge>//
- **[4c2fc0190](facebook/react@4c2fc0190 )**: Generate safe javascript url instead of throwing with disableJavaScriptURLs is on ([facebook#26507](facebook/react#26507)) //<Sebastian Markbåge>//
- **[f0aafa1a7](facebook/react@f0aafa1a7 )**: Convert a few more tests to waitFor test helpers ([facebook#26509](facebook/react#26509)) //<Andrew Clark>//
- **[90995ef8b](facebook/react@90995ef8b )**: Delete "triangle" resuming fuzz tester ([facebook#26508](facebook/react#26508)) //<Andrew Clark>//
- **[f118b7ceb](facebook/react@f118b7ceb )**: [Flight] Gated test for dropped transport of undefined object values ([facebook#26478](facebook/react#26478)) //<Sebastian Silbermann>//
- **[fd0511c72](facebook/react@fd0511c72 )**: [Flight] Add support BigInt support ([facebook#26479](facebook/react#26479)) //<Sebastian Silbermann>//
- **[85de6fde5](facebook/react@85de6fde5 )**: Refactor DOM special cases per tags including controlled fields ([facebook#26501](facebook/react#26501)) //<Sebastian Markbåge>//
- **[1f5cdf8c7](facebook/react@1f5cdf8c7 )**: Update Suspense fuzz tests to use `act` ([facebook#26498](facebook/react#26498)) //<Andrew Clark>//
- **[f62cb39ee](facebook/react@f62cb39ee )**: Make disableSchedulerTimeoutInWorkLoop a static ff ([facebook#26497](facebook/react#26497)) //<Ricky>//
- **[41b4714f1](facebook/react@41b4714f1 )**: Remove disableNativeComponentFrames ([facebook#26490](facebook/react#26490)) //<Ricky>//
- **[fc90eb636](facebook/react@fc90eb636 )**: Codemod more tests to waitFor pattern ([facebook#26494](facebook/react#26494)) //<Andrew Clark>//
- **[e0bbc2662](facebook/react@e0bbc2662 )**: Improve tests that deal with microtasks ([facebook#26493](facebook/react#26493)) //<Andrew Clark>//
- **[8faf75193](facebook/react@8faf75193 )**: Codemod some expiration tests to waitForExpired ([facebook#26491](facebook/react#26491)) //<Andrew Clark>//
- **[8342a0992](facebook/react@8342a0992 )**: Remove unused feature flag disableSchedulerTimeoutBasedOnReactExpirationTime ([facebook#26488](facebook/react#26488)) //<Jan Kassens>//
- **[afea1d0c5](facebook/react@afea1d0c5 )**: [flow] make Flow suppressions explicit on the error ([facebook#26487](facebook/react#26487)) //<Jan Kassens>//
- **[768f965de](facebook/react@768f965de )**: Suspensily committing a prerendered tree ([facebook#26434](facebook/react#26434)) //<Andrew Clark>//
- **[d12bdcda6](facebook/react@d12bdcda6 )**: Fix Flow types of useEffectEvent ([facebook#26468](facebook/react#26468)) //<Sebastian Silbermann>//
- **[73b6435ca](facebook/react@73b6435ca )**: [Float][Fiber] Implement waitForCommitToBeReady for stylesheet resources ([facebook#26450](facebook/react#26450)) //<Josh Story>//
- **[175962c10](facebook/react@175962c10 )**: Fix remaining CommonJS imports after Rollup upgrade ([facebook#26473](facebook/react#26473)) //<dan>//
- **[909c6dacf](facebook/react@909c6dacf )**: Update Rollup to 3.x ([facebook#26442](facebook/react#26442)) //<Mark Erikson>//
- **[9c54b29b4](facebook/react@9c54b29b4 )**: Remove ReactFabricPublicInstance and used definition from ReactNativePrivateInterface ([facebook#26437](facebook/react#26437)) //<Rubén Norte>//
- **[f77099b6f](facebook/react@f77099b6f )**: Remove layout effect warning on the server ([facebook#26395](facebook/react#26395)) //<Ricky>//
- **[51a7c45f8](facebook/react@51a7c45f8 )**: Bugfix: SuspenseList incorrectly forces a fallback ([facebook#26453](facebook/react#26453)) //<Andrew Clark>//
- **[afb3d51dc](facebook/react@afb3d51dc )**: Fix enableClientRenderFallbackOnTextMismatch flag ([facebook#26457](facebook/react#26457)) //<Sebastian Markbåge>//
- **[8e17bfd14](facebook/react@8e17bfd14 )**: Make InternalInstanceHandle type opaque in ReactNativeTypes ([facebook#26461](facebook/react#26461)) //<Rubén Norte>//
- **[b93b4f074](facebook/react@b93b4f074 )**: Should not throw for children of iframe or object ([facebook#26458](facebook/react#26458)) //<Sebastian Markbåge>//
- **[c0b34bc5f](facebook/react@c0b34bc5f )**: chore: update links of docs and api ([facebook#26455](facebook/react#26455)) //<Leedom>//
- **[ffb6733ee](facebook/react@ffb6733ee )**: fix docs link for useSyncExternalStore ([facebook#26452](facebook/react#26452)) //<Valor(华洛)>//
- **[12a1d140e](facebook/react@12a1d140e )**: Don't prerender siblings of suspended component  ([facebook#26380](facebook/react#26380)) //<Andrew Clark>//

Changelog:
[General][Changed] - React Native sync for revisions 77ba161...ca01f35

jest_e2e[run_all_tests]

bypass-github-export-checks

Reviewed By: sammy-SC

Differential Revision: D44669450

fbshipit-source-id: f160aad4719a00df3ceeca78d5f3fcd0aa0f8437
OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this pull request May 22, 2023
Summary:
This sync includes the following changes:
- **[ca01f359b](facebook/react@ca01f359b )**: Remove skipUnmountedBoundaries ([facebook#26489](facebook/react#26489)) //<Ricky>//
- **[43a70a610](facebook/react@43a70a610 )**: Limit the meaning of "custom element" to not include `is` ([facebook#26524](facebook/react#26524)) //<Sebastian Markbåge>//
- **[1308e49a6](facebook/react@1308e49a6 )**: [Flight Plugin] Scan for "use client" ([facebook#26474](facebook/react#26474)) //<dan>//
- **[1a1d61fed](facebook/react@1a1d61fed )**: Warn for ARIA typos on custom elements ([facebook#26523](facebook/react#26523)) //<Sebastian Markbåge>//
- **[73deff0d5](facebook/react@73deff0d5 )**: Refactor DOMProperty and CSSProperty ([facebook#26513](facebook/react#26513)) //<Sebastian Markbåge>//
- **[2d51251e6](facebook/react@2d51251e6 )**: Clean up deferRenderPhaseUpdateToNextBatch ([facebook#26511](facebook/react#26511)) //<Andrew Clark>//
- **[0ffc7f632](facebook/react@0ffc7f632 )**: Update useMemoCache test to confirm that cache persists across errors ([facebook#26510](facebook/react#26510)) //<Joseph Savona>//
- **[29a3be78b](facebook/react@29a3be78b )**: Move ReactDOMFloat to react-dom/src/ ([facebook#26514](facebook/react#26514)) //<Sebastian Markbåge>//
- **[4c2fc0190](facebook/react@4c2fc0190 )**: Generate safe javascript url instead of throwing with disableJavaScriptURLs is on ([facebook#26507](facebook/react#26507)) //<Sebastian Markbåge>//
- **[f0aafa1a7](facebook/react@f0aafa1a7 )**: Convert a few more tests to waitFor test helpers ([facebook#26509](facebook/react#26509)) //<Andrew Clark>//
- **[90995ef8b](facebook/react@90995ef8b )**: Delete "triangle" resuming fuzz tester ([facebook#26508](facebook/react#26508)) //<Andrew Clark>//
- **[f118b7ceb](facebook/react@f118b7ceb )**: [Flight] Gated test for dropped transport of undefined object values ([facebook#26478](facebook/react#26478)) //<Sebastian Silbermann>//
- **[fd0511c72](facebook/react@fd0511c72 )**: [Flight] Add support BigInt support ([facebook#26479](facebook/react#26479)) //<Sebastian Silbermann>//
- **[85de6fde5](facebook/react@85de6fde5 )**: Refactor DOM special cases per tags including controlled fields ([facebook#26501](facebook/react#26501)) //<Sebastian Markbåge>//
- **[1f5cdf8c7](facebook/react@1f5cdf8c7 )**: Update Suspense fuzz tests to use `act` ([facebook#26498](facebook/react#26498)) //<Andrew Clark>//
- **[f62cb39ee](facebook/react@f62cb39ee )**: Make disableSchedulerTimeoutInWorkLoop a static ff ([facebook#26497](facebook/react#26497)) //<Ricky>//
- **[41b4714f1](facebook/react@41b4714f1 )**: Remove disableNativeComponentFrames ([facebook#26490](facebook/react#26490)) //<Ricky>//
- **[fc90eb636](facebook/react@fc90eb636 )**: Codemod more tests to waitFor pattern ([facebook#26494](facebook/react#26494)) //<Andrew Clark>//
- **[e0bbc2662](facebook/react@e0bbc2662 )**: Improve tests that deal with microtasks ([facebook#26493](facebook/react#26493)) //<Andrew Clark>//
- **[8faf75193](facebook/react@8faf75193 )**: Codemod some expiration tests to waitForExpired ([facebook#26491](facebook/react#26491)) //<Andrew Clark>//
- **[8342a0992](facebook/react@8342a0992 )**: Remove unused feature flag disableSchedulerTimeoutBasedOnReactExpirationTime ([facebook#26488](facebook/react#26488)) //<Jan Kassens>//
- **[afea1d0c5](facebook/react@afea1d0c5 )**: [flow] make Flow suppressions explicit on the error ([facebook#26487](facebook/react#26487)) //<Jan Kassens>//
- **[768f965de](facebook/react@768f965de )**: Suspensily committing a prerendered tree ([facebook#26434](facebook/react#26434)) //<Andrew Clark>//
- **[d12bdcda6](facebook/react@d12bdcda6 )**: Fix Flow types of useEffectEvent ([facebook#26468](facebook/react#26468)) //<Sebastian Silbermann>//
- **[73b6435ca](facebook/react@73b6435ca )**: [Float][Fiber] Implement waitForCommitToBeReady for stylesheet resources ([facebook#26450](facebook/react#26450)) //<Josh Story>//
- **[175962c10](facebook/react@175962c10 )**: Fix remaining CommonJS imports after Rollup upgrade ([facebook#26473](facebook/react#26473)) //<dan>//
- **[909c6dacf](facebook/react@909c6dacf )**: Update Rollup to 3.x ([facebook#26442](facebook/react#26442)) //<Mark Erikson>//
- **[9c54b29b4](facebook/react@9c54b29b4 )**: Remove ReactFabricPublicInstance and used definition from ReactNativePrivateInterface ([facebook#26437](facebook/react#26437)) //<Rubén Norte>//
- **[f77099b6f](facebook/react@f77099b6f )**: Remove layout effect warning on the server ([facebook#26395](facebook/react#26395)) //<Ricky>//
- **[51a7c45f8](facebook/react@51a7c45f8 )**: Bugfix: SuspenseList incorrectly forces a fallback ([facebook#26453](facebook/react#26453)) //<Andrew Clark>//
- **[afb3d51dc](facebook/react@afb3d51dc )**: Fix enableClientRenderFallbackOnTextMismatch flag ([facebook#26457](facebook/react#26457)) //<Sebastian Markbåge>//
- **[8e17bfd14](facebook/react@8e17bfd14 )**: Make InternalInstanceHandle type opaque in ReactNativeTypes ([facebook#26461](facebook/react#26461)) //<Rubén Norte>//
- **[b93b4f074](facebook/react@b93b4f074 )**: Should not throw for children of iframe or object ([facebook#26458](facebook/react#26458)) //<Sebastian Markbåge>//
- **[c0b34bc5f](facebook/react@c0b34bc5f )**: chore: update links of docs and api ([facebook#26455](facebook/react#26455)) //<Leedom>//
- **[ffb6733ee](facebook/react@ffb6733ee )**: fix docs link for useSyncExternalStore ([facebook#26452](facebook/react#26452)) //<Valor(华洛)>//
- **[12a1d140e](facebook/react@12a1d140e )**: Don't prerender siblings of suspended component  ([facebook#26380](facebook/react#26380)) //<Andrew Clark>//

Changelog:
[General][Changed] - React Native sync for revisions 77ba161...ca01f35

jest_e2e[run_all_tests]

bypass-github-export-checks

Reviewed By: sammy-SC

Differential Revision: D44669450

fbshipit-source-id: f160aad4719a00df3ceeca78d5f3fcd0aa0f8437
hoxyq pushed a commit that referenced this pull request Nov 7, 2023
<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https://github.com/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch
TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It
supports the same options as `yarn test`.
6. If you need a debugger, run `yarn test --debug --watch TestName`,
open `chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https://github.com/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary

This PR updates the Rollup build pipeline to generate sourcemaps for
production build artifacts like `react-dom.production.min.js`.
 
It requires the Rollup v3 changes that were just merged in #26442 .

Sourcemaps are currently _only_ generated for build artifacts that are
_truly_ "production" - no sourcemaps will be generated for development,
profiling, UMD, or `shouldStayReadable` artifacts.

The generated sourcemaps contain the bundled source contents right
before that chunk was minified by Closure, and _not_ the original source
files like `react-reconciler/src/*`. This better reflects the actual
code that is running as part of the bundle, with all the feature flags
and transformations that were applied to the source files to generate
that bundle. The sourcemaps _do_ still show comments and original
function names, thus improving debuggability for production usage.

Fixes #20186 .




<!--
Explain the **motivation** for making this change. What existing problem
does the pull request solve?
-->

This allows React users to actually debug a readable version of the
React bundle in production scenarios. It also allows other tools like
[Replay](https://replay.io) to do a better job inspecting the React
source when stepping through.

## How did you test this change?

- Generated numerous sourcemaps with various combinations of the React
bundle selections
- Viewed those sourcemaps in
https://evanw.github.io/source-map-visualization/ and confirmed via the
visualization that the generated mappings appear to be correct

I've attached a set of production files + their sourcemaps here:


[react-sourcemap-examples.zip](https://github.com/facebook/react/files/11023466/react-sourcemap-examples.zip)

You can drag JS+sourcemap file pairs into
https://evanw.github.io/source-map-visualization/ for viewing.

Examples:

- `react.production.min.js`:


![image](https://user-images.githubusercontent.com/1128784/226478247-e5cbdee0-83fd-4a19-bcf1-09961d3c7da4.png)

- `react-dom.production.min.js`:


![image](https://user-images.githubusercontent.com/1128784/226478433-b5ccbf0f-8f68-42fe-9db9-9ecb97770d46.png)

- `use-sync-external-store/with-selector.production.min.js`:


![image](https://user-images.githubusercontent.com/1128784/226478565-bc74699d-db14-4c39-9e2d-b775f8755561.png)


<!--
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes the user
interface.
How exactly did you verify that your PR solves the issue you wanted to
solve?
  If you leave this empty, your PR will very likely be closed.
-->
github-actions bot pushed a commit that referenced this pull request Nov 7, 2023
<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https://github.com/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch
TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It
supports the same options as `yarn test`.
6. If you need a debugger, run `yarn test --debug --watch TestName`,
open `chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https://github.com/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary

This PR updates the Rollup build pipeline to generate sourcemaps for
production build artifacts like `react-dom.production.min.js`.

It requires the Rollup v3 changes that were just merged in #26442 .

Sourcemaps are currently _only_ generated for build artifacts that are
_truly_ "production" - no sourcemaps will be generated for development,
profiling, UMD, or `shouldStayReadable` artifacts.

The generated sourcemaps contain the bundled source contents right
before that chunk was minified by Closure, and _not_ the original source
files like `react-reconciler/src/*`. This better reflects the actual
code that is running as part of the bundle, with all the feature flags
and transformations that were applied to the source files to generate
that bundle. The sourcemaps _do_ still show comments and original
function names, thus improving debuggability for production usage.

Fixes #20186 .

<!--
Explain the **motivation** for making this change. What existing problem
does the pull request solve?
-->

This allows React users to actually debug a readable version of the
React bundle in production scenarios. It also allows other tools like
[Replay](https://replay.io) to do a better job inspecting the React
source when stepping through.

## How did you test this change?

- Generated numerous sourcemaps with various combinations of the React
bundle selections
- Viewed those sourcemaps in
https://evanw.github.io/source-map-visualization/ and confirmed via the
visualization that the generated mappings appear to be correct

I've attached a set of production files + their sourcemaps here:

[react-sourcemap-examples.zip](https://github.com/facebook/react/files/11023466/react-sourcemap-examples.zip)

You can drag JS+sourcemap file pairs into
https://evanw.github.io/source-map-visualization/ for viewing.

Examples:

- `react.production.min.js`:

![image](https://user-images.githubusercontent.com/1128784/226478247-e5cbdee0-83fd-4a19-bcf1-09961d3c7da4.png)

- `react-dom.production.min.js`:

![image](https://user-images.githubusercontent.com/1128784/226478433-b5ccbf0f-8f68-42fe-9db9-9ecb97770d46.png)

- `use-sync-external-store/with-selector.production.min.js`:

![image](https://user-images.githubusercontent.com/1128784/226478565-bc74699d-db14-4c39-9e2d-b775f8755561.png)

<!--
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes the user
interface.
How exactly did you verify that your PR solves the issue you wanted to
solve?
  If you leave this empty, your PR will very likely be closed.
-->

DiffTrain build for [2c8a139](2c8a139)
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https://github.com/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch
TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It
supports the same options as `yarn test`.
6. If you need a debugger, run `yarn test --debug --watch TestName`,
open `chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https://github.com/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary

This PR updates the Rollup build pipeline to generate sourcemaps for
production build artifacts like `react-dom.production.min.js`.
 
It requires the Rollup v3 changes that were just merged in facebook#26442 .

Sourcemaps are currently _only_ generated for build artifacts that are
_truly_ "production" - no sourcemaps will be generated for development,
profiling, UMD, or `shouldStayReadable` artifacts.

The generated sourcemaps contain the bundled source contents right
before that chunk was minified by Closure, and _not_ the original source
files like `react-reconciler/src/*`. This better reflects the actual
code that is running as part of the bundle, with all the feature flags
and transformations that were applied to the source files to generate
that bundle. The sourcemaps _do_ still show comments and original
function names, thus improving debuggability for production usage.

Fixes facebook#20186 .




<!--
Explain the **motivation** for making this change. What existing problem
does the pull request solve?
-->

This allows React users to actually debug a readable version of the
React bundle in production scenarios. It also allows other tools like
[Replay](https://replay.io) to do a better job inspecting the React
source when stepping through.

## How did you test this change?

- Generated numerous sourcemaps with various combinations of the React
bundle selections
- Viewed those sourcemaps in
https://evanw.github.io/source-map-visualization/ and confirmed via the
visualization that the generated mappings appear to be correct

I've attached a set of production files + their sourcemaps here:


[react-sourcemap-examples.zip](https://github.com/facebook/react/files/11023466/react-sourcemap-examples.zip)

You can drag JS+sourcemap file pairs into
https://evanw.github.io/source-map-visualization/ for viewing.

Examples:

- `react.production.min.js`:


![image](https://user-images.githubusercontent.com/1128784/226478247-e5cbdee0-83fd-4a19-bcf1-09961d3c7da4.png)

- `react-dom.production.min.js`:


![image](https://user-images.githubusercontent.com/1128784/226478433-b5ccbf0f-8f68-42fe-9db9-9ecb97770d46.png)

- `use-sync-external-store/with-selector.production.min.js`:


![image](https://user-images.githubusercontent.com/1128784/226478565-bc74699d-db14-4c39-9e2d-b775f8755561.png)


<!--
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes the user
interface.
How exactly did you verify that your PR solves the issue you wanted to
solve?
  If you leave this empty, your PR will very likely be closed.
-->
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https://github.com/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch
TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It
supports the same options as `yarn test`.
6. If you need a debugger, run `yarn test --debug --watch TestName`,
open `chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https://github.com/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary

This PR updates the Rollup build pipeline to generate sourcemaps for
production build artifacts like `react-dom.production.min.js`.

It requires the Rollup v3 changes that were just merged in #26442 .

Sourcemaps are currently _only_ generated for build artifacts that are
_truly_ "production" - no sourcemaps will be generated for development,
profiling, UMD, or `shouldStayReadable` artifacts.

The generated sourcemaps contain the bundled source contents right
before that chunk was minified by Closure, and _not_ the original source
files like `react-reconciler/src/*`. This better reflects the actual
code that is running as part of the bundle, with all the feature flags
and transformations that were applied to the source files to generate
that bundle. The sourcemaps _do_ still show comments and original
function names, thus improving debuggability for production usage.

Fixes #20186 .

<!--
Explain the **motivation** for making this change. What existing problem
does the pull request solve?
-->

This allows React users to actually debug a readable version of the
React bundle in production scenarios. It also allows other tools like
[Replay](https://replay.io) to do a better job inspecting the React
source when stepping through.

## How did you test this change?

- Generated numerous sourcemaps with various combinations of the React
bundle selections
- Viewed those sourcemaps in
https://evanw.github.io/source-map-visualization/ and confirmed via the
visualization that the generated mappings appear to be correct

I've attached a set of production files + their sourcemaps here:

[react-sourcemap-examples.zip](https://github.com/facebook/react/files/11023466/react-sourcemap-examples.zip)

You can drag JS+sourcemap file pairs into
https://evanw.github.io/source-map-visualization/ for viewing.

Examples:

- `react.production.min.js`:

![image](https://user-images.githubusercontent.com/1128784/226478247-e5cbdee0-83fd-4a19-bcf1-09961d3c7da4.png)

- `react-dom.production.min.js`:

![image](https://user-images.githubusercontent.com/1128784/226478433-b5ccbf0f-8f68-42fe-9db9-9ecb97770d46.png)

- `use-sync-external-store/with-selector.production.min.js`:

![image](https://user-images.githubusercontent.com/1128784/226478565-bc74699d-db14-4c39-9e2d-b775f8755561.png)

<!--
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes the user
interface.
How exactly did you verify that your PR solves the issue you wanted to
solve?
  If you leave this empty, your PR will very likely be closed.
-->

DiffTrain build for commit 2c8a139.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants