Commit Graph

2029 Commits

Author SHA1 Message Date
Lauren Tan
8ebe42f17c [ci] Cleanup --ci flag
This can be restored back to being a boolean instead of an enum

ghstack-source-id: aca58fb7ea386ee489dd895e028f1aa2fc507193
Pull Request resolved: https://github.com/facebook/react/pull/30508
2024-07-29 19:18:03 -04:00
Lauren Tan
e415b22494 [ci] Rename scripts/circleci to scripts/ci
ghstack-source-id: 5d9cb7d3dbd0f5c54856ad194517524f14cf1ccb
Pull Request resolved: https://github.com/facebook/react/pull/30507
2024-07-29 19:18:03 -04:00
Lauren Tan
70885cfebe [ci] Cleanup forked build files
Unforks these scripts now that we are fully migrated to GH.

ghstack-source-id: e1e15452f2d2e178a5b56203ebd0b42151e6a9ba
Pull Request resolved: https://github.com/facebook/react/pull/30506
2024-07-29 19:18:02 -04:00
Lauren Tan
28b7f0bb71 [ci] Remove references to CIRCLE_NODE_{TOTAL,INDEX}
These env variables were used for circlci parallelization and can now be
removed.

ghstack-source-id: 224c47194d
Pull Request resolved: https://github.com/facebook/react/pull/30501
2024-07-29 13:04:00 -04:00
Lauren Tan
164af898c4 [ci] Remove jestSequencer
This was previously used for circleci parallelization but is no longer
needed.

ghstack-source-id: d8c1005e09
Pull Request resolved: https://github.com/facebook/react/pull/30500
2024-07-29 13:04:00 -04:00
Lauren Tan
39acfdb3be [ci] Fix ci prep script
During params parsing for this script, it previously would call out to
CircleCI for a build ID, but this is no longer needed.

ghstack-source-id: 9c70824498
Pull Request resolved: https://github.com/facebook/react/pull/30499
2024-07-29 13:03:59 -04:00
Lauren Tan
c00e895c19 [ci] Update prepare-release-from-ci to dl from GH
Updates this script to download from GH actions instead, to prepare for
moving the cron jobs over to GH actions.

ghstack-source-id: 9bba9f2721e42b508d7fac6604be72906dedd836
Pull Request resolved: https://github.com/facebook/react/pull/30485
2024-07-26 14:57:52 -04:00
Lauren Tan
0d022861d2 [ci] Refactor download-build-artifacts
Extracts out the code to download builds from GH into its own module so
that it can be reused later.

ghstack-source-id: 26687db971d06339d099d1d5075825efb82cf6b8
Pull Request resolved: https://github.com/facebook/react/pull/30484
2024-07-26 14:57:51 -04:00
Jack Pope
1350a85980 Add unstable context bailout for profiling (#30407)
**This API is not intended to ship. This is a temporary unstable hook
for internal performance profiling.**

This PR exposes `unstable_useContextWithBailout`, which takes a compare
function in addition to Context. The comparison function is run to
determine if Context propagation and render should bail out earlier.
`unstable_useContextWithBailout` returns the full Context value, same as
`useContext`.

We can profile this API against `useContext` to better measure the cost
of Context value updates and gather more data around propagation and
render performance.

The bailout logic and test cases are based on
https://github.com/facebook/react/pull/20646

Additionally, this implementation allows multiple values to be compared
in one hook by returning a tuple to avoid requiring additional Context
consumer hooks.
2024-07-26 14:38:24 -04:00
Jack Pope
e4b4aac2a0 Fix existing usage of names/type in build command (#30450)
https://github.com/facebook/react/pull/30422 broke existing build
shortcuts.

Revert the usage of `names` (`_`) and `type` args.

`yarn build-for-devtools` / `yarn build-for-devtools-dev` / `yarn
build-for-devtools-prod` should all work again.

Moved the bundleType documentation into description so they can be fuzzy
matched. But a build like `yarn build --type FB_WWW_PROD` still works
when matched exactly.

There's probably a better way to document the positional `names` arg in
the `--help` command, but didn't see it when browsing the yargs docs so
let's just fix the existing builds for now.

Now:

```
% yarn build --help
yarn run v1.22.19
$ node ./scripts/rollup/build-all-release-channels.js --help
Options:
  --help                Show help                                                                                                                                             [boolean]
  --version             Show version number                                                                                                                                   [boolean]
  --releaseChannel, -r  Build the given release channel.                                                                                   [string] [choices: "experimental", "stable"]
  --index, -i           Worker id.                                                                                                                                             [number]
  --total, -t           Total number of workers.                                                                                                                               [number]
  --ci                  Run tests in CI                                                                                                                 [choices: "circleci", "github"]
  --type                Build the given bundle type. (NODE_ES2015,ESM_DEV,ESM_PROD,NODE_DEV,NODE_PROD,NODE_PROFILING,BUN_DEV,BUN_PROD,FB_WWW_DEV,FB_WWW_PROD,FB_WWW_PROFILING,RN_OSS_DE
                        V,RN_OSS_PROD,RN_OSS_PROFILING,RN_FB_DEV,RN_FB_PROD,RN_FB_PROFILING,BROWSER_SCRIPT)                                                                    [string]
  --pretty              Force pretty output.                                                                                                                                  [boolean]
  --sync-fbsource       Include to sync build to fbsource.                                                                                                                     [string]
  --sync-www            Include to sync build to www.                                                                                                                          [string]
  --unsafe-partial      Do not clean ./build first.     
```
2024-07-25 07:44:57 -04:00
Jack Pope
e902c45caf Remove forceConcurrentByDefaultForTesting flag (#30436)
Concurrent by default has been unshipped! Let's clean it up.

Here we remove `forceConcurrentByDefaultForTesting`, which allows us to
run tests against both concurrent strategies. In the next PR, we'll
remove the actual concurrent by default code path.
2024-07-24 10:17:33 -04:00
Sebastian Markbåge
fc74a3a3e6 Transform JSX to Lazy Requires instead of Wrappers (#30433)
This ensures that we can keep overriding what runtime to use by
resetting modules while still using the automatic JSX plugin. This is
like the "inline requires" transform but just for JSX.

I got sick of trying to figure out workarounds to hide the extra stack
frame that appears due to the wrappers.
2024-07-23 15:51:23 -04:00
Jack Pope
f6cce072cf Update yarn build options (#30422)
Improve command documentation and make it easier to build specific
bundle types

**Before**
```
% yarn build --help              
yarn run v1.22.19
$ node ./scripts/rollup/build-all-release-channels.js --help
Options:
  --help                Show help                                                                                   [boolean]
  --version             Show version number                                                                         [boolean]
  --releaseChannel, -r  Build the given release channel.                         [string] [choices: "experimental", "stable"]
  --index, -i           Worker id.                                                                                   [number]
  --total, -t           Total number of workers.                                                                     [number]
  --ci                  Run tests in CI                                                       [choices: "circleci", "github"]
  Done in 0.69s.
```

**After**
```
% yarn build --help
yarn run v1.22.19
$ node ./scripts/rollup/build-all-release-channels.js --help
Options:
  --help                Show help                                                                                                               [boolean]
  --version             Show version number                                                                                                     [boolean]
  --releaseChannel, -r  Build the given release channel.                                                     [string] [choices: "experimental", "stable"]
  --index, -i           Worker id.                                                                                                               [number]
  --total, -t           Total number of workers.                                                                                                 [number]
  --bundle              Build the given bundle type.
           [choices: "NODE_ES2015", "ESM_DEV", "ESM_PROD", "NODE_DEV", "NODE_PROD", "NODE_PROFILING", "BUN_DEV", "BUN_PROD", "FB_WWW_DEV", "FB_WWW_PROD",
                     "FB_WWW_PROFILING", "RN_OSS_DEV", "RN_OSS_PROD", "RN_OSS_PROFILING", "RN_FB_DEV", "RN_FB_PROD", "RN_FB_PROFILING", "BROWSER_SCRIPT"]
  --ci                  Run tests in CI                                                                                   [choices: "circleci", "github"]
  --names               Build for matched bundle names. Example: "react-test,index.js".                                                           [array]
  --pretty              Force pretty output.                                                                                                    [boolean]
  --sync-fbsource       Include to sync build to fbsource.                                                                                       [string]
  --sync-www            Include to sync build to www.                                                                                            [string]
  --unsafe-partial      Do not clean ./build first.                                                                                             [boolean]
  Done in 0.61s.
```

Changes
- Use yargs to document existing options: `pretty`, `sync-fbsource`,
`sync-www`, `unsafe-partial`.
- Move `_` arg to `names` option for consistency with other options and
discoverability through yargs help
- Add `bundle` option in place of `argv.type` that allows choices of any
BundleType to be passed in directly.
2024-07-23 11:27:51 -04:00
Jan Kassens
70484844bf [BE] switch to hermes parser for prettier (#30421)
This will allow us to parse new flow syntax since the `flow` parser is
no longer updated.

I had to exclude some files and have them fall back to `flow` parser
since they contain invalid graphql syntax that makes the plugin crash.
2024-07-22 19:16:13 -04:00
Sebastian Markbåge
43dac1ee8d [DevTools] Implement Owner Stacks (#30417)
Stacked on #30410.

Use "owner stacks" as the appended component stack if it is available on
the Fiber. This will only be available if the enableOwnerStacks flag is
on. Otherwise it fallback to parent stacks. In prod, there's no owner so
it's never added there.

I was going back and forth on whether to inject essentially
`captureOwnerStack` as part of the DevTools hooks or replicate the
implementation but decided to replicate the implementation.

The DevTools needs all the same information from internals to implement
owner views elsewhere in the UI anyway so we're not saving anything in
terms of the scope of internals. Additionally, we really need this
information for non-current components as well like "rendered by" views
of the currently selected component.

It can also be useful if we need to change the format after the fact
like we did for parent stacks in:
https://github.com/facebook/react/pull/30289

Injecting the implementation would lock us into specifics both in terms
of what the core needs to provide and what the DevTools can use.

The implementation depends on the technique used in #30369 which tags
frames to strip out with `react-stack-bottom-frame`. That's how the
implementation knows how to materialize the error if it hasn't already.

Firefox:

<img width="487" alt="Screenshot 2024-07-21 at 11 33 37 PM"
src="https://github.com/user-attachments/assets/d3539b53-4578-4fdd-af25-25698b2bcc7d">

Follow up: One thing about this view is that it doesn't include the
current actual synchronous stack. When I used to append these I would
include both the real current stack and the owner stack. That's because
the owner stack doesn't include the name of the currently executing
component. I'll probably inject the current stack too in addition to the
owner stack. This is similar to how native Async Stacks are basically
just appended onto the current stack rather than its own.
2024-07-22 18:49:44 -04:00
Jan Kassens
b7e7f1a3fa [BE] upgrade prettier to 3.3.3 (#30420)
Mostly just changes in ternary formatting.
2024-07-22 16:09:01 -04:00
Sebastian Markbåge
06763852de [Flight] Parse Stack on the Server and Transfer Structured Stack (#30410)
Stacked on #30401.

Previously we were transferring the original V8 stack trace string to
the client and then parsing it there. However, really the server is the
one that knows what format it is and it should be able to vary by server
environment.

We also don't use the raw string anymore (at least not in
enableOwnerStacks). We always create the native Error stacks.

The string also made it unclear which environment it is and it was
tempting to just use it as is.

Instead I parse it on the server and make it a structured stack in the
transfer format. It also makes it clear that it needs to be formatted in
the current environment before presented.
2024-07-22 11:18:55 -04:00
Jan Kassens
fd2b3e13d3 Compiler: unfork prettier config (#30205)
Updates the prettier config to format all `.ts` and `.tsx` files in the
repo using the existing defaults and removing overrides.

The first commit in this PR contains the config changes, the second is
just the result of running `yarn prettier-all`.
2024-07-18 17:00:24 -04:00
Lauren Tan
f6bc05a22a [ci] Add script to download artifact from github
Updates the forked script to download build artifacts from GitHub. Note
that this PR just adds the script, it does not add it to GH actions yet.

ghstack-source-id: 08b0d2f93a88d55386e43a7d1bf88a67a117e899
Pull Request resolved: https://github.com/facebook/react/pull/30376
2024-07-18 16:41:21 -04:00
Lauren Tan
eed9ca203c [ci] Use yargs to parse args to download-experimental-build
ghstack-source-id: 0b222cf61368f1cafdd7b44cdb1a574228cbe403
Pull Request resolved: https://github.com/facebook/react/pull/30375
2024-07-18 16:41:21 -04:00
Lauren Tan
21be03bfed [ci] Fork scripts/release/download-experimental-build.js
This PR just copies the original file without any modifications for
easier review.

The original script makes assumptions about CircleCI that are difficult
to untangle. So let's fork this file temporarily for GitHub actions.
Later on we will remove the original and rename this fork back to the
original naming.

ghstack-source-id: 0ce078538e76349d9ecb69ffc1c352e24390c426
Pull Request resolved: https://github.com/facebook/react/pull/30374
2024-07-18 16:41:21 -04:00
Sebastian Markbåge
ff89ba7346 Disable consoleWithStackDev Transform except in RN/WWW (#30313)
Stacked on #30308.

This is now a noop module so we can stop applying the transform of
console.error using the Babel plugin in the mainline builds. I'm keeping
the transform for RN/WWW for now although it might be nice if the
transform moved into those systems as it gets synced instead of keeping
it upstream.

In jest tests we're already not running the forks for RN/WWW so we don't
need it at all there.
2024-07-12 14:39:38 -04:00
Sebastian Markbåge
400e822277 Remove Component Stack from React Logged Warnings and Error Reporting (#30308)
React transpiles some of its own `console.error` calls into a helper
that appends component stacks to those calls. However, this doesn't
cover user space `console.error` calls - which includes React helpers
that React has moved into third parties like createClass and prop-types.

The idea is that any user space component can add a warning just like
React can which is why React DevTools adds them too if they don't
already exist. Having them appended in both places is tricky because now
you have to know whether to remove them from React's logs.

Similarly it's often common for server-side frameworks to forget to
cover the `console.error` logs from other sources since React DevTools
isn't active there. However, it's also annoying to get component stacks
clogging the terminal - depending on where the log came from.

In the future `console.createTask()` will cover this use case natively
and when available we don't append them at all.

The new strategy relies on either:

- React DevTools existing to add them to React logs as well as third
parties.
- `console.createTask` being supported and surfaced.
- A third party framework showing the component stack either in an Error
Dialog or appended to terminal output.

For a third party to be able to implement this they need to be able to
get the component stack. To get the component stack from within a
`console.error` call you need to use the `React.captureOwnerStack()`
helper which is only available in `enableOwnerStacks` flag. However,
it's possible to polyfill with parent stacks using internals as a stop
gap. There's a question of whether React 19 should just go out with
`enableOwnerStacks` to expose this but regardless I think it's best it
doesn't include component stacks from the runtime for consistency.

In practice it's not really a regression though because typically either
of the other options exists and error dialogs don't implement
`console.error` overrides anyway yet. SSR terminals might miss them but
they'd only have them in DEV warnings to begin with an a subset of React
warnings. Typically those are either going to happen on the client
anyway or replayed.

Our tests are written to assert that component stacks work in various
scenarios all over the place. To ensure that this keeps working I
implement a "polyfill" that is similar to that expected a server
framework might do - in `assertConsoleErrorDev` and `toErrorDev`.

This PR doesn't yet change www or RN since they have their own forks of
consoleWithStackDev for now.
2024-07-12 13:02:22 -04:00
Lauren Tan
3bc79cd41c [ci] Parallelize yarn build
ghstack-source-id: 8a13b456f1
Pull Request resolved: https://github.com/facebook/react/pull/30071
2024-07-12 12:09:14 -04:00
Jan Kassens
d09484c4aa Use explicit git hash length in version string (#30318)
This avoids potential differences between Git versions.

Having a guarantee unique hash isn't neccessary as it's just
informational and we have the date in the version string as well.
2024-07-11 13:58:11 -04:00
Sebastian Markbåge
9647333b3d Add RN fork of consoleWithStackDev so we can improve the mainline one (#30305)
We're removing this wrapper from the mainline but RN is still using
component stacks to filter out warnings.

This is unfortunate since it'll be hard to keep track of the interplay
with these, DevTools and how you're supposed to implement error dialogs
in userspace.
2024-07-10 13:37:56 -04:00
Sebastian Markbåge
b73dcdc04f [Fizz] Refactor Component Stack Nodes (#30298)
Component stacks have a similar problem to the problem with keyPath
where we had to move it down and set it late right before recursing.
Currently we work around that by popping exactly one off when something
suspends. That doesn't work with the new server stacks being added which
are more than one. It also meant that we kept having add a single frame
that could be popped when there shouldn't need to be one.

Unlike keyPath component stacks has this weird property that once
something throws we might need the stack that was attempted for errors
or the previous stack if we're going to retry and just recreate it.

I've tried a few different approaches and I didn't like either but this
is the one that seems least problematic.

I first split out renderNodeDestructive into a retryNode helper. During
retries only retryNode is called. When we first discover a node, we pass
through renderNodeDestructive.

Instead of add a component stack frame deep inside renderNodeDestructive
after we've already refined a node, we now add it before in
renderNodeDestructive. That way it's only added once before being
attempted. This is similar to how Fiber works where in ChildFiber we
match the node once to create the instance and then later do we attempt
to actually render it and it's only the second part that's ever retried.

This unfortunately means that we now have to refine the node down to
element/lazy/thenables twice. To avoid refining the type too I move that
to be done lazily.
2024-07-09 15:44:01 -04:00
Sebastian Markbåge
c3cdbec0a7 [Flight] Add context for non null prototype error (#30293)
We already added this for other thrown errors, not just console.errors.
There's a production form of this. We just missed adding this context.

Mainly the best context is the line number though which comes from owner
stacks.
2024-07-08 22:51:59 -04:00
Sebastian Markbåge
491a4eacce [DevTools] Print component stacks as error objects to get source mapping (#30289)
Before:

<img width="844" alt="Screenshot 2024-07-04 at 3 20 34 PM"
src="https://github.com/facebook/react/assets/63648/0fd8a53f-538a-4429-a4cf-c22f85a09aa8">

After:

<img width="845" alt="Screenshot 2024-07-05 at 6 08 28 PM"
src="https://github.com/facebook/react/assets/63648/7b9da13a-fa97-4581-9899-06de6fface65">

Firefox:

<img width="1338" alt="Screenshot 2024-07-05 at 6 09 50 PM"
src="https://github.com/facebook/react/assets/63648/f2eb9f2a-2251-408f-86d0-b081279ba378">

The first log doesn't get a stack because it's logged before DevTools
boots up and connects which is unfortunate.

The second log already has a stack printed by React (this is on stable)
it gets replaced by our object now.

The third and following logs don't have a stack and get one appended.

I only turn the stack into an error object if it matches what we would
emit from DevTools anyway. Otherwise we assume it's not React. Since I
had to change the format slightly to make this work, I first normalize
the stack slightly before doing a comparison since it won't be 1:1.
2024-07-08 18:42:58 -04:00
Jan Kassens
b0f51f7e5e Upgrade flow to 0.233.0 (#30116)
See [Flow
changelog](https://github.com/facebook/flow/blob/main/Changelog.md) for
changes in this version.
---
[//]: # (BEGIN SAPLING FOOTER)
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with [ReviewStack](https://reviewstack.dev/facebook/react/pull/30116).
* #30118
* #30117
* __->__ #30116
2024-07-08 13:48:24 -04:00
Sebastian Markbåge
6e169fc65d [Flight] Allow String Chunks to Passthrough in Node streams and renderToMarkup (#30131)
It can be efficient to accept raw string chunks to pass through a stream
instead of encoding them into a binary copy first.

Previously our Flight parsers didn't accept receiving string chunks.
That's partly because we sometimes need to encode binary chunks anyway
so string only transport isn't enough but some chunks can be strings.
This adds a partial ability for chunks to be received as strings.

However, accepting strings comes with some downsides. E.g. if the
strings are split up we need to buffer it which compromises the perf for
the common case. If the chunk represents binary data, then we'd need to
encode it back into a typed array which would require a TextEncoder
dependency in the parser. If the string chunk represents a byte length
encoded string we don't know how many unicode characters to read without
measuring them in terms of binary - also requiring a TextEncoder.

This PR is mainly intended for use for pass-through within the same
memory. We can simplify the implementation by assuming that any string
chunk is passed as the original chunk. This requires that the server
stream config doesn't arbitrarily concatenate strings (e.g. large
strings should not be concatenated which is probably a good heuristic
anyway). It also means that this is not suitable to be used with for
example receiving string chunks on the client by passing them through
SSR hydration data - except if the encoding that way was only used with
chunks that were already encoded as strings by Flight.

Web streams mostly just work on binary data anyway so they can't use
this.

In Node.js streams we concatenate precomputed and small strings into
larger buffers. It might make sense to do that using string ropes
instead. However, in the meantime we can at least pass large strings
that are outside our buffer view size as raw strings. There's no benefit
to us eagerly encoding those.

Also, let Node accept string chunks as long as they're following our
expected constraints. This lets us test the mixed protocol using
pass-throughs. This can also be useful when the RSC server is in the
same environment as the SSR server as they don't have to go from strings
to typed arrays back to strings.

Now we can also use this in the pass-through used in renderToMarkup.
This lets us avoid the dependency on TextDecoder/TextEncoder in that
package.
2024-07-03 13:25:04 -04:00
Mike Vitousek
05cebffe16 [prettier][eslint] Support sapling in prettier changed files command
Summary: The listChangesFiles module didn't work under sapling; this fixes

ghstack-source-id: 9f685de5e7
Pull Request resolved: https://github.com/facebook/react/pull/30149
2024-06-30 14:22:22 -07:00
Sebastian Markbåge
58af67a8f8 Only build react-html in experimental channel (#30129)
Even though the whole package is private right now. Once we publish it,
it'll likely be just the experimental channel first before upgrading to
stable.

This means it gets excluded from the built packages.
2024-06-28 10:19:20 -04:00
Sebastian Markbåge
1e241f9d6c Add renderToMarkup for Client Components (#30121)
Follow up to #30105.

This supports `renderToMarkup` in a non-RSC environment (not the
`react-server` condition).

This is just a Fizz renderer but it errors at runtime when you use
state, effects or event handlers that would require hydration - like the
RSC version would. (Except RSC can give early errors too.)

To do this I have to move the `react-html` builds to a new `markup`
dimension out of the `dom-legacy` dimension so that we can configure
this differently from `renderToString`/`renderToStaticMarkup`.
Eventually that dimension can go away though if deprecated. That also
helps us avoid dynamic configuration and we can just compile in the
right configuration so the split helps anyway.

One consideration is that if a compiler strips out useEffects or inlines
initial state from useState, then it would not get called an the error
wouldn't happen. Therefore to preserve semantics, a compiler would need
to inject some call that can check the current renderer and whether it
should throw.

There is an argument that it could be useful to not error for these
because it's possible to write components that works with SSR but are
just optionally hydrated. However, there's also an argument that doing
that silently is too easy to lead to mistakes and it's better to error -
especially for the e-mail use case where you can't take it back but you
can replay a queue that had failures. There are other ways to
conditionally branch components intentionally. Besides if you want it to
be silent you can still use renderToString (or better yet
renderToReadableStream).

The primary mechanism is the RSC environment and the client-environment
is really the secondary one that's only there to support legacy
environments. So this also ensures parity with the primary environment.
2024-06-28 09:25:10 -04:00
Sebastian Markbåge
ffec9ec5b5 Add new package with renderToMarkup export (#30105)
Name of the package is tbd (straw: `react-html`). It's a new package
separate from `react-dom` though and can be used as a standalone package
- e.g. also from a React Native app.

```js
import {renderToMarkup} from '...';
const html = await renderToMarkup(<Component />);
```

The idea is that this is a helper for rendering HTML that is not
intended to be hydrated. It's primarily intended to support a subset of
HTML that can be used as embedding and not served as HTML documents from
HTTP. For example as e-mails or in RSS/Atom feeds or other
distributions. It's a successor to `renderToStaticMarkup`.

A few differences:

- This doesn't support "Client Components". It can only use the Server
Components subset. No useEffect, no useState etc. since it will never be
hydrated. Use of those are errors.
- You also can't pass Client References so you can't use components
marked with `"use client"`.
- Unlike `renderToStaticMarkup` this does support async so you can
suspend and use data from these components.
- Unlike `renderToReadableStream` this does not support streaming or
Suspense boundaries and any error rejects the promise. Since there's no
feasible way to "client render" or patch up the document.
- Form Actions are not supported since in an embedded environment
there's no place to post back to across versions. You can render plain
forms with fixed URLs though.
- You can't use any resource preloading like `preload()` from
`react-dom`.

## Implementation

This first version in this PR only supports Server Components since
that's the thing that doesn't have an existing API. Might add a Client
Components version later that errors.

We don't want to maintain a completely separate implementation for this
use case so this uses the `dom-legacy` build dimension to wire up a
build that encapsulates a Flight Server -> Flight Client -> Fizz stream
to render Server Components that then get SSR:ed.

There's no problem to use a Flight Client in a Server Component
environment since it's already supported for Server-to-Server. Both of
these use a bundler config that just errors for Client References though
since we don't need any bundling integration and this is just a
standalone package.

Running Fizz in a Server Component environment is a problem though
because it depends on "react" and it needs the client version.
Therefore, for this build we embed the client version of "react" shared
internals into the build. It doesn't need anything to be able to use
those APIs since you can't call the client APIs anyway.

One unfortunate thing though is that since Flight currently needs to go
to binary and back, we need TextEncoder/TextDecoder to be available but
this shouldn't really be necessary. Also since we use the legacy stream
config, large strings that use byteLengthOfChunk errors atm. This needs
to be fixed before shipping. I'm not sure what would be the best
layering though that isn't unnecessarily burdensome to maintain. Maybe
some kind of pass-through protocol that would also be useful in general
- e.g. when Fizz and Flight are in the same process.

---------

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>
2024-06-27 12:09:40 -04:00
Lauren Tan
27e9476f0a [ci] Cleanup
- Made each workflow's name consistent
- Rename each workflow file with consistent naming scheme
- Promote flow-ci-ghaction to flow-ci

ghstack-source-id: 490b643dcd
Pull Request resolved: https://github.com/facebook/react/pull/30037
2024-06-22 12:37:42 -04:00
Lauren Tan
85215413cb [ci] Improve parallelism of yarn test
This PR adds parallelism similar to our existing circleci setup for
running yarn tests with the various test params. It does this by
sharding tests into `$SHARD_COUNT` number of groups, then spawning a job
for each of them and using jest's built in `--shard` option.

Effectively this means that the job will spawn an additional (where `n`
is the number of test params)

`n * $SHARD_COUNT` number of jobs to run tests in parallel

for a total of `n + (n * $SHARD_COUNT)` jobs. This does mean the
GitHub UI at the bottom of each PR gets longer and unfortunately it's
not sorted in any way as far as I can tell. But if something goes wrong
it should still be easy to find out what the problem is.

The PR also changes the `ci` argument for jest-cli to be an enum instead
so the tests use all available workers in GitHub actions. This will have
to live around for a bit until we can fully migrate off of circleci.

ghstack-source-id: 08f2d16353
Pull Request resolved: https://github.com/facebook/react/pull/30033
2024-06-22 12:37:42 -04:00
Lauren Tan
419ace93ec [ci] Parallelize flow github action
The existing flow-ci script makes some assumptions about running inside
of circleci for parallelization. This PR forks the script with very smal
ll tweaks to allow for a short name to be passed in as an argument.
These short names are discovered in a new GH job and then each one is
passed as an argument for parallelization

ghstack-source-id: dc85486388f74088c22b386b77b45996ef753f1a
Pull Request resolved: https://github.com/facebook/react/pull/30026
2024-06-21 12:32:47 -04:00
Jan Kassens
b565373afd lint: enable reportUnusedDisableDirectives and remove unused suppressions (#28721)
This enables linting against unused suppressions and removes the ones
that were unused.
2024-06-21 12:24:32 -04:00
Lauren Tan
49c37048de [prettier] Combine compiler and runtime configs
Merges the existing config to the root one so we can have a single
configuration file. I've tried to keep the compiler config as much as
possible in this PR so that no formatting changes occur.

ghstack-source-id: 8bbfc9f269
Pull Request resolved: https://github.com/facebook/react/pull/30021
2024-06-21 12:05:29 -04:00
Lauren Tan
0f568418d2 Re-enable prettier for compiler/
Now that the compiler directory has its own prettier config, we can
remove the prettierignore entry for compiler/ so it still runs in your
editor if you open the root directory

ghstack-source-id: 5e3bd597cf2f11a9931f084eb909ffd81ebdca81
Pull Request resolved: https://github.com/facebook/react/pull/29993
2024-06-20 19:09:31 -04:00
nakjun
395e2fc6a0 [chore] Fix TypeError in shouldSkipBundle During yarn build-for-devtools-dev and yarn build-for-devtools-prod Commands (#29906)
## Summary

Fix bundle type filtering logic to correctly handle array input in
argv.type and use some with includes for accurate filtering. This
addresses a TypeError encountered during yarn build-for-devtools-prod
and yarn build-for-devtools-dev commands.

## Motivation

The current implementation of the `shouldSkipBundle` function in
`scripts/rollup/build.js` has two issues:

1. **Incorrect array handling in
`parseRequestedNames`([#29613](https://github.com/facebook/react/issues/29613)):**
    
The function incorrectly wraps the `argv.type` value in an additional
array when it's already an array. This leads to a `TypeError:
names[i].split is not a function` when `parseRequestedNames` attempts to
split the nested array, as seen in this error message:
    
    ```
C:\Users\Administrator\Documents\새 폴더\react\scripts\rollup\build.js:76
        let splitNames = names[i].split(',');
                            ^
    TypeError: names[i].split is not a function
    ```
This PR fixes this by correctly handling both string and array inputs in
`argv.type`:
    
    ```diff
    - const requestedBundleTypes = argv.type
    -   ? parseRequestedNames([argv.type], 'uppercase')
+ const argvType = Array.isArray(argv.type) ? argv.type : [argv.type];
    + const requestedBundleTypes = argv.type
    +   ? parseRequestedNames(argvType, 'uppercase')
    ```
    
2. **Inaccurate filtering logic in
`shouldSkipBundle`([#29614](https://github.com/facebook/react/issues/29614)):**
    
The function uses `Array.prototype.every` with `indexOf` to check if
**all** requested bundle types are missing in the current bundle type.
However, when multiple bundle types are requested (e.g., `['NODE',
'NODE_DEV']`), the function should skip a bundle only if **none** of the
requested types are present. The current implementation incorrectly
allows bundles that match any of the requested types.
    
    To illustrate, consider the following example output:
    
    ```
    requestedBundleTypes [ 'NODE', 'NODE_DEV' ]
    bundleType NODE_DEV
    isAskingForDifferentType false

    requestedBundleTypes [ 'NODE', 'NODE_DEV' ]
    bundleType NODE_PROD
    isAskingForDifferentType false  // Incorrect behavior
    ```
    
In this case, even though the bundle type is `NODE_PROD` and doesn't
include `NODE_DEV`, the bundle is not skipped due to the incorrect
logic.
    
This PR fixes this by replacing `every` with `some` and using `includes`
for a more accurate check:
    
    ```diff
    - const isAskingForDifferentType = requestedBundleTypes.every(
    -   requestedType => bundleType.indexOf(requestedType) === -1
    - );
    + const isAskingForDifferentType = requestedBundleTypes.some(
    +   requestedType => !bundleType.includes(requestedType)
    + );
    ```
    
This ensures that the bundle is skipped only if **none** of the
requested types are found in the `bundleType`.

This PR addresses both of these issues to ensure correct bundle type
filtering in various build scenarios.


## How did you test this change?

1. **Verification of `requestedBundleTypes` usage in
`shouldSkipBundle`:**

   * I manually tested the following scenarios:
* `yarn build`: Verified that `requestedBundleTypes` remains an empty
array, as expected.
* `yarn build-for-devtools`: Confirmed that `requestedBundleTypes` is
correctly set to `['NODE']`, as in the original implementation.
* `yarn build-for-devtools-dev`: This previously failed due to the
error. After the fix, I confirmed that `requestedBundleTypes` is now
correctly passed as `['NODE', 'NODE_DEV']`.

2. **Debugging of filtering logic in `shouldSkipBundle`:**

* I added the following logging statements to the `shouldSkipBundle`
function to observe its behavior during the build process:

     ```javascript
     console.log('requestedBundleTypes', requestedBundleTypes);
     console.log('bundleType', bundleType);
     console.log('isAskingForDifferentType', isAskingForDifferentType);
     ```

* By analyzing the log output, I confirmed that the filtering logic now
correctly identifies when a bundle should be skipped based on the
requested types. This allowed me to verify that the fix enables building
specific target bundles as intended.
2024-06-20 21:12:41 +01:00
Sebastian Markbåge
6b4646cbd0 Export captureOwnerStacks() only in DEV "react" builds (#29923)
Only with the enableOwnerStacks flag (which is not on in www).

This is a new DEV-only API to be able to implement what we do for
console.error in user space.

This API does not actually include the current stack that you'd get from
`new Error().stack`. That you'd have to add yourself.

This adds the ability to have conditional development exports because we
plan on eventually having separate ESM builds that use the "development"
or "production" export conditions.

NOTE: This removes the export of `act` from `react` in prod (as opposed
to a function that throws) - inline with what we do with other
conditional exports.
2024-06-19 14:19:48 -04:00
Ruslan Lesiutin
ff6e05a705 chore[react-devtools]: unify console patching and default to ansi escape symbols (#29869)
Stacked on https://github.com/facebook/react/pull/29856.

## Summary

By default, React DevTools will apply dimming with ANSI escape symbols,
so it works for both terminals and browser consoles.

For Firefox, which doesn't support ANSI escape symbols console stylings,
we fallback to css properties, like we used to do before.

## How did you test this change?

| Environment | Dark mode | Light mode |
|--------|--------|--------|
| Terminal | ![Screenshot 2024-06-12 at 19 39
46](https://github.com/facebook/react/assets/28902667/2d470eee-ec5f-4362-be7d-8d80c6c72d09)
| ![Screenshot 2024-06-12 at 19 39
09](https://github.com/facebook/react/assets/28902667/616f2c58-a251-406b-aee6-841e07d652ba)
|
| Fusebox&nbsp;console | ![Screenshot 2024-06-12 at 21 03
14](https://github.com/facebook/react/assets/28902667/6050f730-8e82-4aa1-acbc-7179aac3a8aa)
| ![Screenshot 2024-06-12 at 21 02
48](https://github.com/facebook/react/assets/28902667/6708b938-8a90-476f-a057-427963d58caa)
|
| Firefox&nbsp;console | ![Screenshot 2024-06-12 at 21 40
29](https://github.com/facebook/react/assets/28902667/4721084f-bbfa-438c-b61b-395da8ded590)
| ![Screenshot 2024-06-12 at 21 40
42](https://github.com/facebook/react/assets/28902667/72bbf001-2d3d-49e7-91c9-20a4f0914d4d)
|
| Chrome&nbsp;console | ![Screenshot 2024-06-12 at 21 43
09](https://github.com/facebook/react/assets/28902667/93c47881-a0dd-44f8-8dc2-8710149774e5)
| ![Screenshot 2024-06-12 at 21 43
00](https://github.com/facebook/react/assets/28902667/07ea4ff5-4322-4db9-9c12-4321d9577c9d)
|
2024-06-17 16:31:36 +01:00
Lenz Weber-Tronic
50e89ec9f2 Avoid acccessing React internals from use-sync-external-store/shim (#29868)
Co-authored-by: eps1lon <sebastian.silbermann@vercel.com>
2024-06-12 20:13:17 +02:00
Ricky
d172bdaf95 Add jest lint rules (#29760)
## Overview

Updates `eslint-plugin-jest` and enables the recommended rules with some
turned off that are unhelpful.

The main motivations is:
a) we have a few duplicated tests, which this found an I deleted 
b) making sure we don't accidentally commit skipped tests
2024-06-10 14:31:37 -04:00
Ricky
6b35ff766a Move @generated from build to sync (#29799)
## Overview

Reverts https://github.com/facebook/react/pull/26616 and implements the
suggested way instead.

This change in #26616 broken the internal sync command, which now
results in duplicated `@generated` headers. It also makes it harder to
detect changes during the diff train sync. Instead, we will check for
changes, and if there are changes sign the files and commit them to the
sync branch.

## Strategy

The new sync strategy accounts for the generated headers during the
sync:
- **Revert Version**: Revert the version strings
- **Revert @generated**: Re-sign the files (will be the same hash as
before if unchanged)
- **Check**: Check if there are changes **if not, skip**
- **Re-apply Version**: Now add back the new version string
- **Re-sign @generated**: And re-generate the headers

Then commit to branch. This ensures that if there are no changes, we'll
skip.

---------

Co-authored-by: Timothy Yung <yungsters@gmail.com>
2024-06-10 10:16:40 -04:00
Sebastian Markbåge
c2ae9e28bc Minify DEV bundles with closure (#29809)
The goal is to improve speed of the development by inlining and DCE
unused branches.

We have the ability to preserve some variable names and pretty print in
the production version so might as well do the same with DEV.
2024-06-08 11:15:57 -04:00
Josh Story
c4b433f8cb [Flight] Allow aborting during render (#29764)
Stacked on #29491

Previously if you aborted during a render the currently rendering task
would itself be aborted which will cause the entire model to be replaced
by the aborted error rather than just the slot currently being rendered.

This change updates the abort logic to mark currently rendering tasks as
aborted but allowing the current render to emit a partially serialized
model with an error reference in place of the current model.

The intent is to support aborting from rendering synchronously, in
microtasks (after an await or in a .then) and in lazy initializers. We
don't specifically support aborting from things like proxies that might
be triggered during serialization of props
2024-06-06 14:41:27 -07:00
Ricky
90499a730e Fix RN version string in builds (#29787)
The version was set for React but not the renderers
2024-06-06 14:07:16 -04:00