Commit Graph

126 Commits

Author SHA1 Message Date
Mark Erikson
2c8a139a59 Generate sourcemaps for production build artifacts (#26446)
<!--
  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.
-->
2023-11-07 18:59:27 +00:00
Josh Story
5623f2acf9 Updating forking implementation to match against more general fork implementations (#27205)
Search for more generic fork files if an exact match does not exist. If
`forks/MyFile.dom.js` exists but `forks/MyFile.dom-node.js` does not
then use it when trying to resolve forks for the `"dom-node"` renderer
in flow, tests, and build

consolidate certain fork files that were identical and make semantic
sense to be generalized
add `dom-browser-esm` bundle and use it for
`react-server-dom-esm/client.browser` build
2023-08-17 15:17:46 -07:00
dan
175962c10c Fix remaining CommonJS imports after Rollup upgrade (#26473)
Follow-up to https://github.com/facebook/react/pull/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.
2023-03-25 00:05:23 +00:00
Mark Erikson
909c6dacfd Update Rollup to 3.x (#26442)
<!--
  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)
2023-03-24 18:08:41 +00:00
Sebastian Markbåge
60144a04da Split out Edge and Node implementations of the Flight Client (#26187)
This splits out the Edge and Node implementations of Flight Client into
their own implementations. The Node implementation now takes a Node
Stream as input.

I removed the bundler config from the Browser variant because you're
never supposed to use that in the browser since it's only for SSR.
Similarly, it's required on the server. This also enables generating a
SSR manifest from the Webpack plugin. This is necessary for SSR so that
you can reverse look up what a client module is called on the server.

I also removed the option to pass a callServer from the server. We might
want to add it back in the future but basically, we don't recommend
calling Server Functions from render for initial render because if that
happened client-side it would be a client-side waterfall. If it's never
called in initial render, then it also shouldn't ever happen during SSR.
This might be considered too restrictive.

~This also compiles the unbundled packages as ESM. This isn't strictly
necessary because we only need access to dynamic import to load the
modules but we don't have any other build options that leave
`import(...)` intact, and seems appropriate that this would also be an
ESM module.~ Went with `import(...)` in CJS instead.
2023-02-21 13:18:24 -05:00
Sebastian Silbermann
c7967b194b Distribute bundles more evenly into CI shards (#26208)
## Summary

Previously, we distributed bundles into shards and then checked if we
need to actually build that bundle. This can under-utilize shards
heavily (e.g.
https://app.circleci.com/pipelines/github/facebook/react/38611/workflows/df9e56e7-d476-49ee-9392-d8b37c81aa66/jobs/630545/parallel-runs/28?filterBy=ALL
only building a single bundle).

This won't result in an optimal distribution but, if we're lucky, we
might end up with shard #26 not taking 7mins anymore. The slowest shard
ultimately decicdes when we can start with testing builds.

## How did you test this change?

- [x] `CIRCLE_NODE_INDEX=28 CIRCLE_NODE_TOTAL=40 yarn build` building
more than 1 bundle
- [x] Check timings of `yarn_build` so that we don't up with an
over-stuffed shard (e.g. a shard having to build all the expensive
bundles). Casually dropping 60min idle time 🎉:
- Before:
https://app.circleci.com/pipelines/github/facebook/react/38683/workflows/a41533d7-811c-439d-9751-214ba06035c5/jobs/632230/timing
- After:
https://app.circleci.com/pipelines/github/facebook/react/38686/workflows/8a770df6-5b3e-41ea-b3b5-10abeae703e7/jobs/632247/timing
2023-02-20 22:16:23 +01:00
Sebastian Markbåge
80cf4a099e Update Closure Compiler (#26205)
I need it for https://github.com/facebook/react/pull/26187.

We need to specify specifically the output mode `ECMASCRIPT5_STRICT` to
remove `const` from the Fizz runtime.
2023-02-20 13:27:13 -05:00
Glenn 'devalias' Grant
6b6d0617ef Update Rollup and related plugins to their most recent versions (#24916)
Update Rollup and related plugins to their most recent versions +
resolve any breaking changes/deprecations/etc along the way. I made each
change piece by piece, so the commit history tells a pretty good story
of what was changed where/how/why.

fixes https://github.com/facebook/react/issues/24894

For the full deepdive/context, see:

- https://github.com/facebook/react/issues/24894

The inspiration for this came from @jasonwilliams 's PR for attempting
to add sourcemap output support to React's builds:

- https://github.com/facebook/react/issues/20186
  - https://github.com/facebook/react/pull/21946

But I figured that it would be useful to minimise the scope of changes
in that PR, and to modernise the build tooling along the way.

If any of these updates rely on a node version later than `10.x`, then
the following PR may have to land first, otherwise things might break on
AppVeyor:

- https://github.com/facebook/react/issues/24891
  - https://github.com/facebook/react/pull/24892

Co-authored-by: Sebastian Markbage <sebastian@calyptus.eu>
2023-02-20 01:35:56 -05:00
Ming Ye
bc38a3dfa7 Update rollup config to use moduleSideEffects (#26199)
## Summary

In rollup v1.19.4, The "treeshake.pureExternalModules" option is
deprecated. The "treeshake.moduleSideEffects" option should be used
instead, see
https://github.com/rollup/rollup/blob/v1.19.4/src/Graph.ts#L130.

## How did you test this change?

ci green
2023-02-20 00:04:26 -05:00
Sebastian Markbåge
ef9f6e77b8 Enable passing Server References from Server to Client (#26124)
This is the first of a series of PRs, that let you pass functions, by
reference, to the client and back. E.g. through Server Context. It's
like client references but they're opaque on the client and resolved on
the server.

To do this, for security, you must opt-in to exposing these functions to
the client using the `"use server"` directive. The `"use client"`
directive lets you enter the client from the server. The `"use server"`
directive lets you enter the server from the client.

This works by tagging those functions as Server References. We could
potentially expand this to other non-serializable or stateful objects
too like classes.

This only implements server->server CJS imports and server->server ESM
imports. We really should add a loader to the webpack plug-in for
client->server imports too. I'll leave closures as an exercise for
integrators.

You can't "call" a client reference on the server, however, you can
"call" a server reference on the client. This invokes a callback on the
Flight client options called `callServer`. This lets a router implement
calling back to the server. Effectively creating an RPC. This is using
JSON for serializing those arguments but more utils coming from
client->server serialization.
2023-02-09 19:45:05 -05:00
Jan Kassens
6b30832666 Upgrade prettier (#26081)
The old version of prettier we were using didn't support the Flow syntax
to access properties in a type using `SomeType['prop']`. This updates
`prettier` and `rollup-plugin-prettier` to the latest versions.

I added the prettier config `arrowParens: "avoid"` to reduce the diff
size as the default has changed in Prettier 2.0. The largest amount of
changes comes from function expressions now having a space. This doesn't
have an option to preserve the old behavior, so we have to update this.
2023-01-31 08:25:05 -05:00
Ming Ye
bbf4d22113 Update import for babel-code-frame in build script (#25963)
## Summary

Updating import for babel-code-frame to use the official @babel package,
as babel-code-frame is a ghost dependency. This change is necessary to
avoid potential issues and stay up-to-date with the latest version of
@babel/code-frame, which is already declared in our project's
package.json.

## How did you test this change?
yarn test
2023-01-05 15:56:31 -05:00
Jan Kassens
b83baf63f7 Transform updates to support Flow this annotation syntax (#25918)
Flow introduced a new syntax to annotated the context type of a
function, this tries to update the rest and add 1 example usage.

- 2b1fb91a55 already added the changes
required for eslint.
- Jest transform is updated to use the recommended `hermes-parser` which
can parse current and Flow syntax and will be updated in the future.
- Rollup uses a new plugin to strip the flow types. This isn't ideal as
the npm module is deprecated in favor of using `hermes-parser`, but I
couldn't figure out how to integrate that with Rollup.
2023-01-05 15:41:49 -05:00
Jan Kassens
420f0b7fa1 Remove Reconciler fork (1/2) (#25774)
We've heard from multiple contributors that the Reconciler forking
mechanism was confusing and/or annoying to deal with. Since it's
currently unused and there's no immediate plans to start using it again,
this removes the forking.

Fully removing the fork is split into 2 steps to preserve file history:

**This PR**
- remove `enableNewReconciler` feature flag.
- remove `unstable_isNewReconciler` export
- remove eslint rules for cross fork imports
- remove `*.new.js` files and update imports
- merge non-suffixed files into `*.old` files where both exist
(sometimes types were defined there)

**#25775**
- rename `*.old` files
2022-12-01 23:06:25 -05:00
Colin McDonnell
56ffca8b9e Add Bun streaming server renderer (#25597)
Add support for Bun server renderer
2022-11-17 13:15:56 -08:00
Andrew Clark
54f0e0f730 Scaffolding for react-dom/unstable_external-server-runtime (#25482)
* Scaffolding for react-dom/unstable_external-server-runtime

Implements a new bundle type for in our build config called
BROWSER_SCRIPT. This is intended for scripts that get delivered straight
to the browser without needing to be processed by a bundler. (And also
doesn't include any extra UMD crap.)

Right now there's only a single use case so I didn't stress about making
it general purpose.

The use case is: a script that loads the Fizz browser runtime, and sets
up a MutationObserver to receive instructions as HTML streams in. This
will be an alternative option to the default Fizz behavior of sending
the runtime down as inline script tags, to accommodate environments
where inline script tags are not allowed.

There's no development version of this bundle because it doesn't contain
any warnings or run any user code.

None of the actual implementation is in this PR; it just sets up the
build infra.

Co-authored-by: Mofei Zhang <feifei0@fb.com>

* Set BUNDLE_SCRIPT's GCC output format to ES5

This removes the automatic 'use strict' directive, which we don't need.

Co-authored-by: Mofei Zhang <feifei0@fb.com>
2022-10-14 23:29:17 -04:00
Sebastian Markbåge
80170a0681 Match bundle.name and match upper case entry points (#24346)
Fix matching in the build script.

It's possible to provide a custom bundle name in the case we build deep
imports. We should match those names as a convenience.

The script also calls toLowerCase on requested names but some entries have
upper case now.
2022-04-11 21:01:48 -04:00
Sebastian Markbåge
1ad8d81292 Remove object-assign polyfill (#23351)
* Remove object-assign polyfill

We really rely on a more modern environment where this is typically
polyfilled anyway and we don't officially support IE with more extensive
polyfilling anyway. So all environments should have the native version
by now.

* Use shared/assign instead of Object.assign in code

This is so that we have one cached local instance in the bundle.

Ideally we should have a compile do this for us but we already follow
this pattern with hasOwnProperty, isArray, Object.is etc.

* Transform Object.assign to now use shared/assign

We need this to use the shared instance when Object.spread is used.
2022-02-23 19:34:24 -05:00
Andrew Clark
7034408ff7 Follow-up improvements to error code extraction infra (#22516)
* Output FIXME during build for unminified errors

The invariant Babel transform used to output a FIXME comment if it
could not find a matching error code. This could happen if there were
a configuration mistake that caused an unminified message to
slip through.

Linting the compiled bundles is the most reliable way to do it because
there's not a one-to-one mapping between source modules and bundles. For
example, the same source module may appear in multiple bundles, some
which are minified and others which aren't.

This updates the transform to output the same messages for Error calls.

The source lint rule is still useful for catching mistakes during
development, to prompt you to update the error codes map before pushing
the PR to CI.

* Don't run error transform in development

We used to run the error transform in both production and development,
because in development it was used to convert `invariant` calls into
throw statements.

Now that don't use `invariant` anymore, we only have to run the
transform for production builds.

* Add ! to FIXME comment so Closure doesn't strip it

Don't love this solution because Closure could change this heuristic,
or we could switch to a differnt compiler that doesn't support it. But
it works.

Could add a bundle that contains an unminified error solely for the
purpose of testing it, but that seems like overkill.

* Alternate extract-errors that scrapes artifacts

The build script outputs a special FIXME comment when it fails to minify
an error message. CI will detect these comments and fail the workflow.

The comments also include the expected error message. So I added an
alternate extract-errors that scrapes unminified messages from the
build artifacts and updates `codes.json`.

This is nice because it works on partial builds. And you can also run it
after the fact, instead of needing build all over again.

* Disable error minification in more bundles

Not worth it because the number of errors does not outweight the size
of the formatProdErrorMessage runtime.

* Run extract-errors script in CI

The lint_build job already checks for unminified errors, but the output
isn't super helpful.

Instead I've added a new job that runs the extract-errors script and
fails the build if `codes.json` changes. It also outputs the expected
diff so you can easily see which messages were missing from the map.

* Replace old extract-errors script with new one

Deletes the old extract-errors in favor of extract-errors2
2021-10-31 15:37:32 -07:00
Brian Vaughn
4ba20579da Scheduling Profiler: De-emphasize React internal frames (#22588)
This commit adds code to all React bundles to explicitly register the beginning and ending of the module. This is done by creating Error objects (which capture the file name, line number, and column number) and passing them explicitly to a DevTools hook (when present).

Next, as the Scheduling Profiler logs metadata to the User Timing API, it prints these module ranges along with other metadata (like Lane values and profiler version number).

Lastly, the Scheduling Profiler UI compares stack frames to these ranges when drawing the flame graph and dims or de-emphasizes frames that fall within an internal module.

The net effect of this is that user code (and 3rd party code) stands out clearly in the flame graph while React internal modules are dimmed.

Internal module ranges are completely optional. Older profiling samples, or ones recorded without the React DevTools extension installed, will simply not dim the internal frames.
2021-10-21 14:40:41 -04:00
Andrew Clark
a724a3b578 [RFC] Codemod invariant -> throw new Error (#22435)
* Hoist error codes import to module scope

When this code was written, the error codes map (`codes.json`) was
created on-the-fly, so we had to lazily require from inside the visitor.

Because `codes.json` is now checked into source, we can import it a
single time in module scope.

* Minify error constructors in production

We use a script to minify our error messages in production. Each message
is assigned an error code, defined in `scripts/error-codes/codes.json`.
Then our build script replaces the messages with a link to our
error decoder page, e.g. https://reactjs.org/docs/error-decoder.html/?invariant=92

This enables us to write helpful error messages without increasing the
bundle size.

Right now, the script only works for `invariant` calls. It does not work
if you throw an Error object. This is an old Facebookism that we don't
really need, other than the fact that our error minification script
relies on it.

So, I've updated the script to minify error constructors, too:

Input:
  Error(`A ${adj} message that contains ${noun}`);
Output:
  Error(formatProdErrorMessage(ERR_CODE, adj, noun));

It only works for constructors that are literally named Error, though we
could add support for other names, too.

As a next step, I will add a lint rule to enforce that errors written
this way must have a corresponding error code.

* Minify "no fallback UI specified" error in prod

This error message wasn't being minified because it doesn't use
invariant. The reason it didn't use invariant is because this particular
error is created without begin thrown — it doesn't need to be thrown
because it's located inside the error handling part of the runtime.

Now that the error minification script supports Error constructors, we
can minify it by assigning it a production error code in
`scripts/error-codes/codes.json`.

To support the use of Error constructors more generally, I will add a
lint rule that enforces each message has a corresponding error code.

* Lint rule to detect unminified errors

Adds a lint rule that detects when an Error constructor is used without
a corresponding production error code.

We already have this for `invariant`, but not for regular errors, i.e.
`throw new Error(msg)`. There's also nothing that enforces the use of
`invariant` besides convention.

There are some packages where we don't care to minify errors. These are
packages that run in environments where bundle size is not a concern,
like react-pg. I added an override in the ESLint config to ignore these.

* Temporarily add invariant codemod script

I'm adding this codemod to the repo temporarily, but I'll revert it
in the same PR. That way we don't have to check it in but it's still
accessible (via the PR) if we need it later.

* [Automated] Codemod invariant -> Error

This commit contains only automated changes:

npx jscodeshift -t scripts/codemod-invariant.js packages --ignore-pattern="node_modules/**/*"
yarn linc --fix
yarn prettier

I will do any manual touch ups in separate commits so they're easier
to review.

* Remove temporary codemod script

This reverts the codemod script and ESLint config I added temporarily
in order to perform the invariant codemod.

* Manual touch ups

A few manual changes I made after the codemod ran.

* Enable error code transform per package

Currently we're not consistent about which packages should have their
errors minified in production and which ones should.

This adds a field to the bundle configuration to control whether to
apply the transform. We should decide what the criteria is going
forward. I think it's probably a good idea to minify any package that
gets sent over the network. So yes to modules that run in the browser,
and no to modules that run on the server and during development only.
2021-09-30 12:01:28 -07:00
Dan Abramov
7b84dbd169 Fail build on deep requires in npm packages (#21063) 2021-03-24 02:43:55 +00:00
Sebastian Markbåge
504222dcd2 Add Node ESM build option (#20243)
This allows exporting ESM modules for the Webpack plugin. This is necessary
for making a resolver plugin. We could probably make the whole plugin
use ESM instead of CJS ES2015.
2020-11-13 05:57:45 -08:00
Dominic Gannaway
b61174fb7b Remove the deprecated React Flare event system (#19520) 2020-08-05 15:13:29 +01:00
Sebastian Markbåge
ab1f517000 isFBBundle should be true if it's FB for www or FB for RN (#19420)
This ensures that the .fb.js override files kick in for RN. Otherwise we
won't have FB specific exports in the isomorphic modules.
2020-07-20 10:37:04 -07:00
Sebastian Markbåge
76f157e3dd Add simple Node build (#19022)
The webpack plugin doesn't really need a separate prod and dev build.
It also needs to be ES2015 otherwise we can't extend native classes.
2020-05-28 15:56:34 -07:00
Sebastian Markbåge
60afa3c117 Lint bundles using the bundle config instead of scanning for files (#19025)
* Lint bundles using the bundle config instead of scanning for files

This ensures that we look for all the files that we expect to see there.
If something doesn't get built we wouldn't detect it.

However, this doesn't find files that aren't part of our builds such as
indirection files in the root. This will need to change with ESM anyway
since indirection files doesn't work. Everything should be built anyway.

This ensures that we can use the bundles.js config to determine special
cases instead of relying on file system conventions.

* Run lint with flag
2020-05-28 15:04:25 -07:00
Richard Maisano
c512aa0081 [Blocks] Scaffolding react-fetch + first pass at node implementation (#18863)
* First pass at scaffolding out the Node implementation of react-data.

While incomplete, this patch contains some changes to the react-data
package in order to start adding support for Node.

The first part of this change accounts for splitting react-data/fetch
into two discrete entries, adding (and defaulting to) the Node
implementation.

The second part is sketching out a rough approximation of `fetch` for
Node. This implementation is not complete by any means, but provides a
starting point.

* Remove NodeFetch module and put it directly into ReactDataFetchNode.

* Replaced react-data with react-fetch.

This patch shuffles around some of the scaffolding that was in
react-data in favor of react-fetch. It also removes the additional
"fetch" package in favor of something flatter.

* Tweak package organization

* Simplify and add a test

Co-authored-by: Dan Abramov <dan.abramov@me.com>
2020-05-12 17:21:45 +01:00
Sebastian Markbåge
3c16baf848 Remove /dist/ UMD builds (#18473)
* Remove /dist/ UMD builds

We publish UMDs to npm (and we're considering stopping even that).

This means we'll stop publishing to http://react.zpao.com/builds/master/latest/

* Update fixture paths
2020-04-02 17:52:32 -07:00
Sebastian Markbåge
e6ea3d3873 Use Closure Compiler to compile to ES5 instead of Babel (#18449)
* Upgrade Closure

There are newer versions but they don't yet have corresponding releases
of google-closure-compiler-osx.

* Configure build

* Refactor ReactSymbols a bit

Provides a little better output.
2020-04-01 12:08:37 -07:00
Andrew Clark
cd48a06547 Set up infra for react-reconciler fork (#18285)
* ReactFiberReconciler -> ReactFiberReconciler.old

* Set up infra for react-reconciler fork

We're planning to land some significant refactors of the reconciler.
We want to be able to gradually roll out the new implementation side-by-
side with the existing one. So we'll create a short lived fork of the
react-reconciler package. Once the new implementation has stabilized,
we'll delete the old implementation and promote the new one.

This means, for as long as the fork exists, we'll need to maintain two
separate implementations. This sounds painful, but since the forks will
still be largely the same, most changes will not require two separate
implementations. In practice, you'll implement the change in the old
fork and then copy paste it to the new one.

This commit only sets up the build and testing infrastructure. It does
not actually fork any modules. I'll do that in subsequent PRs.

The forked version of the reconciler will be used to build a special
version of React DOM. I've called this build ReactDOMForked. It's only
built for www; there's no open source version.

The new reconciler is disabled by default. It's enabled in the
`yarn test-www-variant` command. The reconciler fork isn't really
related to the "variant" feature of the www builds, but I'm piggy
backing on that concept to avoid having to add yet another
testing dimension.
2020-03-12 11:38:32 -07:00
Andrew Clark
115cd12d9b Add test run that uses www feature flags (#18234)
In CI, we run our test suite against multiple build configurations. For
example, we run our tests in both dev and prod, and in both the
experimental and stable release channels. This is to prevent accidental
deviations in behavior between the different builds. If there's an
intentional deviation in behavior, the test author must account
for them.

However, we currently don't run tests against the www builds. That's
a problem, because it's common for features to land in www before they
land anywhere else, including the experimental release channel.
Typically we do this so we can gradually roll out the feature behind
a flag before deciding to enable it.

The way we test those features today is by mutating the
`shared/ReactFeatureFlags` module. There are a few downsides to this
approach, though. The flag is only overridden for the specific tests or
test suites where you apply the override. But usually what you want is
to run *all* tests with the flag enabled, to protect against unexpected
regressions.

Also, mutating the feature flags module only works when running the
tests against source, not against the final build artifacts, because the
ReactFeatureFlags module is inlined by the build script.

Instead, we should run the test suite against the www configuration,
just like we do for prod, experimental, and so on. I've added a new
command, `yarn test-www`. It automatically runs in CI.

Some of the www feature flags are dynamic; that is, they depend on
a runtime condition (i.e. a GK). These flags are imported from an
external module that lives in www. Those flags will be enabled for some
clients and disabled for others, so we should run the tests against
*both* modes.

So I've added a new global `__VARIANT__`, and a new test command `yarn
test-www-variant`. `__VARIANT__` is set to false by default; when
running `test-www-variant`, it's set to true.

If we were going for *really* comprehensive coverage, we would run the
tests against every possible configuration of feature flags: 2 ^
numberOfFlags total combinations. That's not practical, though, so
instead we only run against two combinations: once with `__VARIANT__`
set to `true`, and once with it set to `false`. We generally assume that
flags can be toggled independently, so in practice this should
be enough.

You can also refer to `__VARIANT__` in tests to detect which mode you're
running in. Or, you can import `shared/ReactFeatureFlags` and read the
specific flag you can about. However, we should stop mutating that
module going forward. Treat it as read-only.

In this commit, I have only setup the www tests to run against source.
I'll leave running against build for a follow up.

Many of our tests currently assume they run only in the default
configuration, and break when certain flags are toggled. Rather than fix
these all up front, I've hard-coded the relevant flags to the default
values. We can incrementally migrate those tests later.
2020-03-06 09:29:05 -08:00
Sebastian Markbåge
8ccfce460f Only use Rollup's CommonJS plugin for "react-art" (#18186)
* Only use Rollup's CommonJS plugin for "react-art"

We still need it for the "art" UMD builds but nothing else should have
CommonJS dependencies anymore.

* react-debug-tools and jest-react should leave object-assign as an external dep

This avoids it being compiled into the output.
2020-02-28 16:46:16 -08:00
Sebastian Markbåge
60016c448b Export React as Named Exports instead of CommonJS (#18106)
* Add options for forked entry points

We currently fork .fb.js entry points. This adds a few more options.

.modern.fb.js - experimental FB builds
.classic.fb.js - stable FB builds
.fb.js - if no other FB build, use this for FB builds
.experimental.js - experimental builds
.stable.js - stable builds
.js - used if no other override exists

This will be used to have different ES exports for different builds.

* Switch React to named exports

* Export named exports from the export point itself

We need to re-export the Flow exported types so we can use them in our code.

We don't want to use the Flow types from upstream since it doesn't have the non-public APIs that we have.

This should be able to use export * but I don't know why it doesn't work.

This actually enables Flow typing of React which was just "any" before.
This exposed some Flow errors that needs fixing.

* Create forks for the react entrypoint

None of our builds expose all exports and they all differ in at least one
way, so we need four forks.

* Set esModule flag to false

We don't want to emit the esModule compatibility flag on our CommonJS
output. For now we treat our named exports as if they're CommonJS.

This is a potentially breaking change for scheduler (but all those apis
are unstable), react-is and use-subscription. However, it seems unlikely
that anyone would rely on this since these only have named exports.

* Remove unused Feature Flags

* Let jest observe the stable fork for stable tests

This lets it do the negative test by ensuring that the right tests fail.

However, this in turn will make other tests that are not behind
__EXPERIMENTAL__ fail. So I need to do that next.

* Put all tests that depend on exports behind __EXPERIMENTAL__

Since there's no way to override the exports using feature flags
in .intern.js anymore we can't use these APIs in stable.

The tradeoff here is that we can either enable the negative tests on
"stable" that means experimental are expected to fail, or we can disable
tests on stable. This is unfortunate since some of these APIs now run on
a "stable" config at FB instead of the experimental.

* Switch ReactDOM to named exports

Same strategy as React.

I moved the ReactDOMFB runtime injection to classic.fb.js

Since we only fork the entrypoint, the `/testing` entrypoint needs to
be forked too to re-export the same things plus `act`. This is a bit
unfortunate. If it becomes a pattern we can consider forking in the
module resolution deeply.

fix flow

* Fix ReactDOM Flow Types

Now that ReactDOM is Flow type checked we need to fix up its types.

* Configure jest to use stable entry for ReactDOM in non-experimental

* Remove additional FeatureFlags that are no longer needed

These are only flagging the exports and no implementation details so we
can control them fully through the export overrides.
2020-02-25 13:54:27 -08:00
Kunuk Nykjær
abfbae02a4 Update Rollup version to 1.19.4 and fix breaking changes (#15037)
* update rollup versioni

* ignore Rollup warnings for known warning codes

* add lecacy support from elas7

* rollup 1.5

* upd to ver 1.6.0

* don't throw error

* use return instead of throw error

* upd code in comment

* fix getters test

* rollup 1.7

* rollup 1.7.3

* remove comments

* use rollup 1.7.4

* update yarn.lock for new rollup version

* rollup version 1.9.0

* rollback to version 1.7.4

* add globalThis to eslintrc.umd

* rollup 1.9.0

* upd rollup plugin versions to satisfied latest versions

* add result.json update

* rollup 1.9.3

* rollup 1.10.0

* ver 1.10.1

* rollup 1.11.3

* rollup ver 1.12.3

* rollup 1.13.1

* rollup 1.14.6

* rollup 1.15.6

* rollup 1.16.2

* upd tests

* prettier

* Rollup 1.16.3

* upd

* should throw when finding getters with a different syntax from the ones generated by Rollup

* add more one test

* rollup-plugin-prettier updated changed stuff, revert them

* don't upd all the Rollup plugins

* rollup-plugin-babel 3.0.7

* upd rollup plugin versions

* upd rollup-plugin-commonjs

* bracket spacing

* rollup 1.16.6

* rollup 1.16.7

* rename test description

* rollup 1.18.0

* use externalLiveBindings: false

* rollup 1.19.3

* remove remove-getters

* simplify CIRCULAR_DEPENDENCY warning

* simplify if logic in sizes-plugin

* rollup 1.19.4

* update output for small optimizations

* remove globalThis

* remove results.json file

* re-add globalThis
2020-02-20 22:09:30 +00:00
Dan Abramov
8777b44e98 Add Modern WWW build (#18028)
* Build both stable and experimental WWW builds

* Flip already experimental WWW flags to true

* Remove FB-specific internals from modern FB builds

We think we're not going to need these.

* Disable classic features in modern WWW builds

* Disable legacy ReactDOM API for modern WWW build

* Don’t include user timing in prod

* Fix bad copy paste and add missing flags to test renderer

* Add testing WWW feature flag file

We need it because WWW has a different meaning of experimental now.
2020-02-13 20:33:53 +00:00
Dominic Gannaway
529e58ab0a Remove legacy www config from Rollup build (#18016) 2020-02-11 13:42:19 +00:00
Dominic Gannaway
42918f40aa Change build from babylon to babel (#18015) 2020-02-11 11:56:26 +00:00
Dan Abramov
4b0cdf29a8 Build FB RN targets only in experimental mode (#17641) 2019-12-17 20:22:49 +00:00
Dan Abramov
0cf22a56a1 Use console directly instead of warning() modules (#17599)
* Replace all warning/lowPriWarning with console calls

* Replace console.warn/error with a custom wrapper at build time

* Fail the build for console.error/warn() where we can't read the stack
2019-12-14 18:09:25 +00:00
Laura buns
9ac42dd074 Remove the condition argument from warning() (#17568)
* prep for codemod

* prep warnings

* rename lint rules

* codemod for ifs

* shim www functions

* Handle more cases in the transform

* Thanks De Morgan

* Run the codemod

* Delete the transform

* Fix up confusing conditions manually

* Fix up www shims to match expected API

* Also check for low-pri warning in the lint rule
2019-12-11 03:28:14 +00:00
Laura buns
b43eec7eaa Replace wrap-warning-with-env-check with an eslint plugin (#17540)
* Replace Babel plugin with an ESLint plugin

* Fix ESLint rule violations

* Move shared conditions higher

* Test formatting nits

* Tweak ESLint rule

* Bugfix: inside else branch, 'if' tests are not satisfactory

* Use a stricter check for exactly if (__DEV__)

This makes it easier to see what's going on and matches dominant style in the codebase.

* Fix remaining files after stricter check
2019-12-06 18:25:54 +00:00
Dan Abramov
6cb6b1d668 Add yarn build --unsafe-partial (#17316)
* Add yarn build --partial

* unsafe-partial
2019-11-08 19:41:40 +00:00
Andrew Clark
edc234c730 Build script should default to experimental (#17144)
`yarn build` defaults to building in experimental mode. To opt-out, set
the `RELEASE_CHANNEL` environment variable to `stable`. This is the same
as what we do when running tests via `yarn test`, to make local
development easier.
2019-10-18 19:35:33 -07:00
Andrew Clark
7082d5a2db Don't build non-experimental www bundles (#17139)
Reduces the likelihood we'll accidentally sync the wrong ones.
2019-10-18 14:36:59 -07:00
Andrew Clark
d364d8555f Set up experimental builds (#17071)
* Don't bother including `unstable_` in error

The method names don't get stripped out of the production bundles
because they are passed as arguments to the error decoder.

Let's just always use the unprefixed APIs in the messages.

* Set up experimental builds

The experimental builds are packaged exactly like builds in the stable
release channel: same file structure, entry points, and npm package
names. The goal is to match what will eventually be released in stable
as closely as possible, but with additional features turned on.

Versioning and Releasing
------------------------

The experimental builds will be published to the same registry and
package names as the stable ones. However, they will be versioned using
a separate scheme. Instead of semver versions, experimental releases
will receive arbitrary version strings based on their content hashes.
The motivation is to thwart attempts to use a version range to match
against future experimental releases. The only way to install or depend
on an experimental release is to refer to the specific version number.

Building
--------

I did not use the existing feature flag infra to configure the
experimental builds. The reason is because feature flags are designed
to configure a single package. They're not designed to generate multiple
forks of the same package; for each set of feature flags, you must
create a separate package configuration.

Instead, I've added a new build dimension called the **release
channel**. By default, builds use the **stable** channel. There's
also an **experimental** release channel. We have the option to add more
in the future.

There are now two dimensions per artifact: build type (production,
development, or profiling), and release channel (stable or
experimental). These are separate dimensions because they are
combinatorial: there are stable and experimental production builds,
stable and experimental developmenet builds, and so on.

You can add something to an experimental build by gating on
`__EXPERIMENTAL__`, similar to how we use `__DEV__`. Anything inside
these branches will be excluded from the stable builds.
This gives us a low effort way to add experimental behavior in any
package without setting up feature flags or configuring a new package.
2019-10-14 10:46:42 -07:00
Dominic Gannaway
7c802de797 [react-a11y] Add react-ui/accessibility to bundle build (#16804) 2019-09-17 20:22:09 +02:00
Bas Peeters
8a7c2e50f1 Remove duplicate character in regex group (#16572) 2019-08-29 14:49:27 +01:00
Ashwin Ramaswami
dc232e6774 chore: remove outdated comment about gcc (#16232) 2019-08-05 18:18:40 +01:00
Andrew Clark
3b2302253f Fix sizebot (#15771)
The previous naming scheme used the name of the resulting bundle file.
However, there are cases where multiple bundles have the same filename.
This meant whichever bundle finishes last overwrites the previous ones
with the same name.

The updated naming scheme is `bundle-sizes-<CI_NODE_INDEX>.json`.
Instead of generating a separate info file per bundle, it now creates
one per process.
2019-05-29 21:30:16 -07:00