Commit Graph

378 Commits

Author SHA1 Message Date
Sebastian Markbåge cdb8a1d19d
[Fizz] Add option to inject bootstrapping script tags after the shell is injected (#22594)
* Add option to inject bootstrap scripts

These are emitted right after the shell as flushed.

* Update ssr fixtures to use bootstrapScripts instead of manual script tag

* Add option to FB renderer too
2021-10-19 19:36:10 -07: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
Sebastian Markbåge d47339ea36
[Fizz] Remove assignID mechanism (#22410)
* Remove pushEmpty

This is only used to support the assignID mechanism.

* Remove assignID mechanism

This effectively isn't used anyway because we always insert a dummy tag
into the fallback.

* Emit the template tag with an ID directly in pending boundaries

This ensures that assigning the ID is deterministic since it's done during
writing.

This also avoids emitting it for client rendered boundaries that start as
client rendered since we never need to refer to them.

* Move lazy ID initialization to the core implementation

We never need an ID before we write a pending boundary. This also ensures
that ID generation is deterministic by moving it to the write phase.

* Simplify the inserted scripts

We can assume that there are no text nodes before the template tag so this
simplifies the script that finds the comment node. It should be the direct
previous child.
2021-09-24 10:22:02 -04:00
salazarm 64e70f82e9
[Fizz] add avoidThisFallback support (#22318) 2021-09-20 15:44:48 -04:00
Sota bd255700d7
Show a soft error when a text string or number is supplied as a child to non text wrappers (#22109) 2021-08-16 21:43:24 -04:00
Sota 424fe58708
Revert "Show a soft error when a text string or number is supplied as a child to non text wrappers (#21953)" (#22108)
This reverts commit e9b2028b32.
2021-08-16 17:53:23 -07:00
Sota e9b2028b32
Show a soft error when a text string or number is supplied as a child to non text wrappers (#21953)
* Show soft errors when a text string or number is supplied as a child instead of throwing an error

* bring __DEV__ check first so that things inside get removed in prod.

* fix lint
2021-08-10 13:14:11 -07:00
Andrew Clark 19092ac8c3
Re-add old Fabric Offscreen impl behind flag (#22018)
* Re-add old Fabric Offscreen impl behind flag

There's a chance that #21960 will affect layout in a way that we don't
expect, so I'm adding back the old implementation so we can toggle the
feature with a flag.

The flag should read from the ReactNativeFeatureFlags shim so that we
can change it at runtime. I'll do that separately.

* Import dynamic RN flags from external module

Internal feature flags that we wish to control with a GK can now be
imported from an external module, which I've called
"ReactNativeInternalFeatureFlags".

We'll need to add this module to the downstream repo.

We can't yet use this in our tests, because we don't have a test
configuration that runs against the React Native feature flags fork. We
should set up that up the same way we did for www.
2021-08-03 19:30:20 -07:00
Andrew Clark 215db465a2
[Fabric] Add `flex: 1` to Offscreen view container (#22019)
Without this style property, the layout of the children is messed up.

The goal is for the container view to have no layout at all. It should
be a completely transparent wrapper, except for when we set `display:
none` to hide its contents. On the web, the equivalent (at least in the
spec) is `display: contents`.

After some initial testing, this seems to be close enough to the desired
behavior that we can ship it. We'll try rolling it out behind a flag.
2021-08-03 19:26:49 -07:00
Timothy Yung 4cc8ec64c2
Separate unit tests for ReactFabricHostComponent (#21969) 2021-07-26 23:45:26 -07:00
Timothy Yung d4d7864934
Fix `ReactFabricHostComponent` methods if detached (#21967) 2021-07-26 21:02:06 -07:00
Andrew Clark 392253a774
[Fabric] Use container node to toggle the visibility of Offscreen and Suspense trees (#21960)
* Fix type of Offscreen props argument

Fixes an oversight from a previous refactor. The fiber that wraps
a Suspense component's children used to be a Fragment but now it's on
Offscreen fiber, so its props type has changed. There's a special
hydration path where I forgot to update this. This isn't observable
because we don't ever end up rendering this particular fiber (because
the Suspense boundary is in its fallback state) but we should fix it
anyway to avoid a potential regression in the future.

* Extract createOffscreenFromFiber logic

...into a new method called `createWorkInProgressOffscreenFiber`. Just
for symmetry with `updateWorkInProgressOffscreenFiber`. Doesn't change
any behavior.

* [Fabric] Use container node to hide/show tree

This changes how we hide and show the contents of Offscreen boundaries
in the React Fabric renderer (persistent mode), and also Suspense
boundaries which use the same feature.=

The way it used to work was that when a boundary is hidden, in the
complete phase, instead of calling the normal `cloneInstance` method
inside `appendAllChildren`, we would call a forked method called
`cloneHiddenInstance` for each of the nearest host nodes within the
subtree. This design was largely based on how it works in React DOM
(mutation mode), where instead of cloning the nearest host nodes, we
mutate their `style.display` property.

The motivation for doing it this way in React DOM was because there's no
built-in browser API for hiding a collection of DOM nodes without
affecting their layout.

In Fabric, however, there is no such limitation, so we can instead wrap
in an extra host node and apply a hidden style.

The immediate motivation for this change is that Fabric on Android has a
view pooling mechanism for instances that relies on the assumption that
a current Fiber that is cloned and replaced by a new Fiber will never
appear in a future commit. When this assumption is broken, it may cause
crashes. In the current implementation, that can indeed happen when a
node that was previously hidden is toggled back to visible. Although
this change sidesteps the issue, we may introduce in other features in
the future that would benefit from being able to revert back to an older
node without cloning it again, such as animations.

The way I've implemented this is to insert an additional HostComponent
fiber as the child of each OffscreenComponent. The extra fiber is not
ideal — the way I'd prefer to do it is to attach the host instance to
the OffscreenComponent. However, the native Fabric implementation
currently expects a 1:1 correspondence between HostComponents and host
instances, so I've deferred that optimization to a future PR to derisk
fixing the Fabric pooling crash. I left a TODO in the host config with a
description of the remaining steps, but this alone should be sufficient
to unblock.
2021-07-26 13:17:08 -07:00
Brian Vaughn 4758e4533e
React Native: Export getInspectorDataForInstance API (#21572)
This PR exports a new top-level API, getInspectorDataForInstance, for React Native (both development and production). Although this change adds a new export to the DEV bundle, it only impacts the production bundle for internal builds (not what's published to NPM).
2021-07-26 09:56:59 -04:00
Andrew Clark cb8afda183
Add test for #21837 (#21842)
Taken from https://github.com/facebook/react/pull/21837#issuecomment-876788973

Co-Authored-By: Timothy Yung <yungsters@fb.com>

Co-authored-by: Timothy Yung <yungsters@fb.com>
2021-07-08 20:01:29 -07:00
Andrew Clark f85f429d55
Use `act()` in ReactFabric tests (#21839) (#21841)
Co-authored-by: Timothy Yung <yungsters@fb.com>
2021-07-08 19:35:46 -07:00
Timothy Yung 84639ab53f
Guard against reused fibers in React Native commands (#21837) 2021-07-08 16:01:51 -07:00
Timothy Yung c549bc4918
Revert "Use `act()` in ReactFabric tests (#21839)" (#21840)
This reverts commit 59d3aca686.
2021-07-08 15:05:51 -07:00
Timothy Yung 59d3aca686
Use `act()` in ReactFabric tests (#21839) 2021-07-08 15:02:02 -07:00
Andrew Clark c96761c7b2
Delete batchedEventUpdates (#21774)
No longer used anywhere.
2021-06-30 15:09:14 -07:00
Sebastian Markbåge dbe3363ccd
[Fizz] Implement Legacy renderToString and renderToNodeStream on top of Fizz (#21276)
* Wire up DOM legacy build

* Hack to filter extra comments for testing purposes

* Use string concat in renderToString

I think this might be faster. We could probably use a combination of this
technique in the stream too to lower the overhead.

* Error if we can't complete the root synchronously

Maybe this should always error but in the async forms we can just delay
the stream until it resolves so it does have some useful semantics.

In the synchronous form it's never useful though. I'm mostly adding the
error because we're testing this behavior for renderToString specifically.

* Gate memory leak tests of internals

These tests don't translate as is to the new implementation and have been
ported to the Fizz tests separately.

* Enable Fizz legacy mode in stable

* Add wrapper around the ServerFormatConfig for legacy mode

This ensures that we can inject custom overrides without negatively
affecting the new implementation.

This adds another field for static mark up for example.

* Wrap pushTextInstance to avoid emitting comments for text in static markup

* Don't emit static mark up for completed suspense boundaries

Completed and client rendered boundaries are only marked for the client
to take over.

Pending boundaries are still supported in case you stream non-hydratable
mark up.

* Wire up generateStaticMarkup to static API entry points

* Mark as renderer for stable

This shouldn't affect the FB one ideally but it's done with the same build
so let's hope this works.
2021-06-14 12:54:30 -07:00
Timothy Yung cb30388d10
Export React Native `AttributeType` Types (#21661) 2021-06-11 00:45:49 -07:00
Samuel Susla c96b78e0e7
Add concurrentRoot property to ReactNativeTypes (#21648)
* Add concurrentRoot property to ReactNativeTypes

* Add concurrentRoot to ReactNativeType

* Use ReactFabricType instead of ReactNativeType
2021-06-10 08:59:22 -04:00
Samuel Susla 1a3f1afbd3
[React Native] Fabric get current event priority (#21553)
* Call into Fabric to get current event priority

Fix flow errors

* Prettier

* Better handle null and undefined cases

* Remove optional chaining and use ?? operator

* prettier-all

* Use conditional ternary operator

* prettier
2021-06-08 12:26:21 -04:00
Samuel Susla 459c34fde6
Add flag concurrent root to Fabric render function (#21552)
* Add flag concurrent root to Fabric render function

* Lint
2021-05-24 10:56:47 -04:00
Joshua Gross bd070eb2c4
Enable setJSResponder/setIsJSResponder for React Native Fabric (#21439)
* Enable setJSResponder/setIsJSResponder for React Native

* yarn prettier

* add types to react-native-host-hooks

* yarn prettier

* mock setIsJSResponder
2021-05-05 21:09:04 -07:00
Ricky e9a4a44aae
Add back root override for strict mode (#21428)
* Add back root override for strict mode

* Switch flag to boolean

* Fix flow
2021-05-04 15:42:48 -04:00
Brian Vaughn 15fb8c3045
createRoot API is no longer strict by default (#21417) 2021-05-03 16:57:03 -04:00
Ricky 9e9dac6505
Add unstable_concurrentUpdatesByDefault (#21227) 2021-04-28 16:09:30 -04:00
Andrew Clark 78120032d4
Remove `flushDiscreteUpdates` from end of event (#21223)
We don't need this anymore because we flush in a microtask.

This should allow us to remove the logic in the event system that
tracks nested event dispatches.

I added a test to confirm that nested event dispatches don't triggger
a synchronous flush, like they would if we wrapped them `flushSync`. It
already passed; I added it to prevent a regression.
2021-04-20 08:25:31 -07:00
Sebastian Markbåge f4d7a0f1ea
Implement useOpaqueIdentifier (#21260)
The format of this ID is specific to the format.
2021-04-14 14:25:42 -07:00
Sebastian Markbåge 4f76a28c93
[Fizz] Implement New Context (#21255)
* Add NewContext module

This implements a reverse linked list tree containing the previous
contexts.

* Implement recursive algorithm

This algorithm pops the contexts back to a shared ancestor on the way down
the stack and then pushes new contexts in reverse order up the stack.

* Move isPrimaryRenderer to ServerFormatConfig

This is primarily intended to be used to support renderToString with a
separate build than the main one. This allows them to be nested.

* Wire up more element type matchers

* Wire up Context Provider type

* Wire up Context Consumer

* Test

* Implement reader in class

* Update error codez
2021-04-14 11:45:42 -07:00
Joshua Gross 686b635b71
Prevent reading canonical property of null (#21242)
* Prevent reading canonical property of null

* prettier
2021-04-12 11:10:51 -07:00
Sebastian Markbåge 172e89b4bf
Reland Remove redundant initial of isArray (#21188)
* Remove redundant initial of isArray (#21163)

* Reapply prettier

* Type the isArray function with refinement support

This ensures that an argument gets refined just like it does if isArray is
used directly.

I'm not sure how to express with just a direct reference so I added a
function wrapper and confirmed that this does get inlined properly by
closure compiler.

* A few more

* Rename unit test to internal

This is not testing a bundle.

Co-authored-by: Behnam Mohammadi <itten@live.com>
2021-04-07 07:57:43 -07:00
Sebastian Markbage b4f119cdf1 Revert "Remove redundant initial of isArray (#21163)"
This reverts commit b130a0f5cd.
2021-04-01 15:19:00 -04:00
Behnam Mohammadi b130a0f5cd
Remove redundant initial of isArray (#21163) 2021-04-01 10:50:48 -07:00
Sebastian Markbåge b9e4c10e99
[Fizz] Implement all the DOM attributes and special cases (#21153)
* Implement DOM format config structure

* Styles

* Input warnings

* Textarea special cases

* Select special cases

* Option special cases

We read the currently selected value from the FormatContext.

* Warning for non-lower case HTML

We don't change to lower case at runtime anymore but keep the warning.

* Pre tags innerHTML needs to be prefixed

This is because if you do the equivalent on the client using innerHTML,
this is the effect you'd get.

* Extract errors
2021-03-31 17:39:38 -07:00
Sebastian Markbåge 32d6f39edd
[Fizz] Support special HTML/SVG/MathML tags to suspend (#21113)
* Encode tables as a special insertion mode

The table modes are special in that its children can't be created outside
a table context so we need the segment container to be wrapped in a table.

* Move formatContext from Task to Segment

It works the same otherwise. It's just that this context needs to outlive
the task so that I can use it when writing the segment.

* Use template tag for placeholders and inserted dummy nodes with IDs

These can be used in any parent. At least outside IE11. Not sure yet what
happens in IE11 to these.

Not sure if these are bad for perf since they're special nodes.

* Add special wrappers around inserted segments depending on their insertion mode

* Allow the root namespace to be configured

This allows us to insert the correct wrappers when streaming into an
existing non-HTML tree.

* Add comment
2021-03-27 10:50:38 -07:00
Sebastian Markbåge 38a1aedb49
[Fizz] Add FormatContext and Refactor Work (#21103)
* Add format context

* Let the Work node hold all working state for the recursive loop

Stacks are nice and all but there's a cost to maintaining each frame
both in terms of stack size usage and writing to it.

* Move current format context into work

* Synchronously render children of a Suspense boundary

We don't have to spawn work and snapshot the context. Instead we can try
to render the boundary immediately in case it works.

* Lazily create the fallback work

Instead of eagerly create the fallback work and then immediately abort it.
We can just avoid creating it if we finish synchronously.
2021-03-25 18:38:43 -07:00
Joshua Gross 1b7e471b91
React Fabric: Support passing nativeViewTag to getInspectorDataForViewAtPoint callback, for React DevTools compat (#21080)
React Fabric: Support passing nativeViewTag to getInspectorDataForViewAtPoint callback, for React DevTools compat
2021-03-25 16:23:39 -07:00
Andrew Clark d0eaf78293
Move priorities to separate import to break cycle (#21060)
The event priority constants exports by the reconciler package are
meant to be used by the reconciler (host config) itself. So it doesn't
make sense to export them from a module that requires them.

To break the cycle, we can move them to a separate module and import
that. This looks like a "deep import" of an internal module, which we
try to avoid, but conceptually these are part of the public interface
of the reconciler module. So, no different than importing from the main
`react-reconciler`.

We do need to be careful about not mixing these types of imports with
implementation details. Those are the ones to really avoid.

An unintended benefit of the reconciler fork infra is that it makes
deep imports harder. Any module that we treat as "public", like this
one, needs to account for the `enableNewReconciler` flag and forward
to the correct implementation.
2021-03-23 13:57:28 -07:00
Benoit Girard 25bfa287f6
[Experiment] Add feature flag for more aggressive memory clean-up of deleted fiber trees (#21039)
* Add feature flag: enableStrongMemoryCleanup

Add a feature flag that will test doing a recursive clean of an unmount
node. This will disconnect the fiber graph making leaks less severe.

* Detach sibling pointers in old child list

When a fiber is deleted, it's still part of the previous (alternate)
parent fiber's list of children. Because children are a linked list, an
earlier sibling that's still alive will be connected to the deleted
fiber via its alternate:


  live fiber
  --alternate--> previous live fiber
  --sibling--> deleted fiber

We can't disconnect `alternate` on nodes that haven't been deleted
yet, but we can disconnect the `sibling` and `child` pointers.

Will use this feature flag to test the memory impact.

* Combine into single enum flag

I combined `enableStrongMemoryCleanup` and `enableDetachOldChildList`
into a single enum flag. The flag has three possible values. Each level
is a superset of the previous one and performs more aggressive clean up.

We will use this to compare the memory impact of each level.

* Add Flow type to new host config method

* Re-use existing recursive clean up path

We already have a recursive loop that visits every deleted fiber. We
can re-use that one for clean up instead of adding another one.

Co-authored-by: Andrew Clark <git@andrewclark.io>
2021-03-22 21:54:53 -07:00
Sebastian Markbåge 6c3202b1e1
[Fizz] Use identifierPrefix to avoid conflicts within the same response (#21037)
* Use identifierPrefix to avoid conflicts within the same response

identifierPrefix as an option exists to avoid useOpaqueIdentifier conflicting
when different renders are used within one HTML response.

This lets this be configured for the DOM renderer specifically since it's DOM
specific whether they will conflict across trees or not.

* Add test for using multiple containers in one HTML document
2021-03-22 13:10:57 -07:00
Timothy Yung 3fb11eed9a
React Native: Touch Instrumentation Interface (#21024) 2021-03-17 13:46:43 -07:00
Sebastian Markbåge 1d1e49cfa4
[Fizz] Assign an ID to the first DOM element in a fallback or insert a dummy (and testing infra) (#21020)
* Patches

* Add Fizz testing infra structure

* Assign an ID to the first DOM node in a fallback or insert a dummy

* unstable_createRoot
2021-03-16 14:05:52 -07:00
Timothy Yung c9f6d0a3a8
Sync `ReactNativeTypes` from React Native (#21015) 2021-03-15 23:48:59 -07:00
Joshua Gross f8979e0e28
Revert 'Fabric-compatible implementation of feature' and have Fabric noop when setJSResponder is called for now (#21009) 2021-03-15 12:22:26 -07:00
Sebastian Markbåge b9c4a01f71
Allow the streaming config to decide how to precompute or compute chunks (#21008)
Some legacy environments can not encode non-strings. Those would specify
both as strings. They'll throw for binary data.

Some environments have to encode strings (like web streams). Those would
encode both as uint8array.

Some environments (like Node) can do either. It can be beneficial to leave
things as strings in case the native stream can do something smart with it.
2021-03-15 10:36:23 -07:00
Sebastian Markbåge 14e4fd1ff2
[Fizz] Move DOM/Native format configs to their respective packages (#20994)
* Move DOM/Native format configs to their respective packages

The streaming configs (Node/Browser) are different because they operate at
another dimension that exists in each package.

* Use escapeTextForBrowser to encode dynamic strings

We can now use local dependencies
2021-03-13 06:54:59 -08:00
Brian Vaughn 7df65725ba
Split getComponentName into getComponentNameFromFiber and getComponentNameFromType (#20940)
Split getComponentName into getComponentNameFromFiber and getComponentNameFromType
2021-03-05 16:02:02 -05:00
Rubén Norte 8336f19aa8
Update React Native types (#20883) 2021-02-25 16:10:17 -05:00
Brian Vaughn 9209c30ff9
Add StrictMode level prop and createRoot unstable_strictModeLevel option (#20849)
* The exported '<React.StrictMode>' tag remains the same and opts legacy subtrees into strict mode level one ('mode == StrictModeL1'). This mode enables DEV-only double rendering, double component lifecycles, string ref warnings, legacy context warnings, etc. The primary purpose of this mode is to help detected render phase side effects. No new behavior. Roots created with experimental 'createRoot' and 'createBlockingRoot' APIs will also (for now) continue to default to strict mode level 1.

In a subsequent commit I will add support for a 'level' attribute on the '<React.StrictMode>' tag (as well as a new option supported by ). This will be the way to opt into strict mode level 2 ('mode == StrictModeL2'). This mode will enable DEV-only double invoking of effects on initial mount. This will simulate future Offscreen API semantics for trees being mounted, then hidden, and then shown again. The primary purpose of this mode is to enable applications to prepare for compatibility with the new Offscreen API (more information to follow shortly).

For now, this commit changes no public facing behavior. The only mechanism for opting into strict mode level 2 is the pre-existing 'enableDoubleInvokingEffects' feature flag (only enabled within Facebook for now).

* Renamed strict mode constants

StrictModeL1 -> StrictLegacyMode and StrictModeL2 -> StrictEffectsMode

* Renamed tests

* Split strict effects mode into two flags

One flag ('enableStrictEffects') enables strict mode level 2. It is similar to 'debugRenderPhaseSideEffectsForStrictMode' which enables srtict mode level 1.

The second flag ('createRootStrictEffectsByDefault') controls the default strict mode level for 'createRoot' trees. For now, all 'createRoot' trees remain level 1 by default. We will experiment with level 2 within Facebook.

This is a prerequisite for adding a configurable option to 'createRoot' that enables choosing a different StrictMode level than the default.

* Add StrictMode 'unstable_level' prop and createRoot 'unstable_strictModeLevel' option

New StrictMode 'unstable_level' prop allows specifying which level of strict mode to use. If no level attribute is specified, StrictLegacyMode will be used to maintain backwards compatibility. Otherwise the following is true:
* Level 0 does nothing
* Level 1 selects StrictLegacyMode
* Level 2 selects StrictEffectsMode (which includes StrictLegacyMode)

Levels can be increased with nesting (0 -> 1 -> 2) but not decreased.

This commit also adds a new 'unstable_strictModeLevel' option to the createRoot and createBatchedRoot APIs. This option can be used to override default behavior to increase or decrease the StrictMode level of the root.

A subsequent commit will add additional DEV warnings:
* If a nested StrictMode tag attempts to explicitly decrease the level
* If a level attribute changes in an update
2021-02-24 16:14:14 -05:00
Valentin Shergin 78d2f2d301
Fabric-compatible implementation of `JSReponder` feature (#20768)
With this change, if a node is a Fabric node, we route the setJSResponder call to FabricUIManager. Native counterpart is already landed. Tested internally as D26241364.
2021-02-22 16:50:03 -05:00
Andrew Clark 1a74726246
Add `supportsMicrotasks` to the host config (#20809)
* Add `supportsMicrotasks` to the host config

Only certain renderers support scheduling a microtask, so we need a
renderer specific flag that we can toggle. That way it's off for some
renderers and on for others.

I copied the approach we use for the other optional parts of the host
config, like persistent mode and test selectors.

Why isn't the feature flag sufficient?

The feature flag modules, confusingly, are not renderer-specific, at
least when running the our tests against the source files. They are
meant to correspond to a release channel, not a renderer, but we got
confused at some point and haven't cleaned it up.

For example, when we run `yarn test`, Jest loads the flags from the
default `ReactFeatureFlags.js` module, even when we import the React
Native renderer — but in the actual builds, we load a different feature
flag module, `ReactFeatureFlags.native-oss.js.` There's no way in our
current Jest load a different host config for each renderer, because
they all just import the same module. We should solve this by creating
separate Jest project for each renderer, so that the flags loaded when
running against source are the same ones that we use in the
compiled bundles.

The feature flag (`enableDiscreteMicrotasks`) still exists — it's used
to set the React DOM host config's `supportsMicrotasks` flag to `true`.
(Same for React Noop) The important part is that turning on the feature
flag does *not* affect the other renderers, like React Native.

The host config will likely outlive the feature flag, too, since the
feature flag only exists so we can gradually roll it out and measure the
impact in production; once we do, we'll remove it. Whereas the host
config flag may continue to be used to disable the discrete microtask
behavior for RN, because RN will likely use a native (non-JavaScript)
API to schedule its tasks.

* Add `supportsMicrotask` to react-reconciler README
2021-02-12 13:13:49 -08:00
Dan Abramov 97fce318a6
Experiment: Infer the current event priority from the native event (#20748)
* Add the feature flag

* Add a host config method

* Wire it up to the work loop

* Export constants for third-party renderers

* Document for third-party renderers
2021-02-09 18:32:20 +00:00
Dan Abramov 77754ae618
Decouple event priority list from event name list (#20760)
* Remove some dead code

* Decouple event priority list from event name list

* Fix lint
2021-02-08 20:48:47 +00:00
Dan Abramov 4ecf11977c
Remove the Fundamental internals (#20745) 2021-02-05 20:36:55 +00:00
Dan Abramov eeb1325b03
Fix UMD bundles by removing usage of global (#20743) 2021-02-05 17:13:42 +00:00
Ricky aa736a0fa6
Add queue microtask to host configs (#20668)
* Queue discrete events in microtask

* Fix flow types

* Add to createReactNoop

* More flow types

* Remove import

* Add to custom HostConfig as well
2021-01-27 15:01:21 -05:00
Joshua Gross e316f78552
RN: Implement `sendAccessibilityEvent` in RN Renderer that proxies between Fabric/non-Fabric (#20554)
* RN: Implement `sendAccessibilityEvent` on HostComponent

Implement `sendAccessibilityEvent` on HostComponent for Fabric and non-Fabric RN.

Currently the Fabric version is a noop and non-Fabric uses
AccessibilityInfo directly. The Fabric version will be updated once
native Fabric Android/iOS support this method in the native UIManager.

* Move methods out of HostComponent

* Properly type dispatchCommand and sendAccessibilityEvent handle arg

* Implement Fabric side of sendAccessibilityEvent

* Add tests: 1. Fabric->Fabric, 2. Paper->Fabric, 3. Fabric->Paper, 4. Paper->Paper

* Fix typo: ReactFaricEventTouch -> ReactFabricEventTouch

* fix flow types

* prettier
2021-01-26 20:02:40 -08:00
Dan Abramov f021a983aa
Bump versions for 17 (#20062) 2020-10-20 21:41:18 +01:00
Dominic Gannaway d95c4938df
[EventSystem] Revise onBeforeBlur propagation mechanics (#20020) 2020-10-14 23:38:57 +01:00
Bhumij Gupta 53e622ca7f
Fix instances of function declaration after return (#19733)
* Add ESLint plugin to check for any function declare after return
* Refactor code to move function declarations before return and fix failing lint
2020-09-01 08:55:10 -04:00
Timothy Yung 380dc95de8
Revert "Append text string to <Text> error message (#19581)" (#19723)
This reverts commit 1a41a196bc.
2020-08-28 13:46:59 -07:00
Timothy Yung 1a41a196bc
Append text string to <Text> error message (#19581)
* Append text string to <Text> error message

* Truncate text in <Text> error message

* Regenerate `codes.json`
2020-08-17 10:47:49 -07:00
CY Lim 702fad4b1b
refactor fb.me redirect link to reactjs.org/link (#19598)
* refactor fb.me url to reactjs.org/link

* Update ESLintRuleExhaustiveDeps-test.js

* Update ReactDOMServerIntegrationUntrustedURL-test.internal.js

* Update createReactClassIntegration-test.js

* Update ReactDOMServerIntegrationUntrustedURL-test.internal.js

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
2020-08-17 13:25:50 +01:00
Dominic Gannaway b61174fb7b
Remove the deprecated React Flare event system (#19520) 2020-08-05 15:13:29 +01:00
Ricky 909b612e27
Sync React Native types (#19437) 2020-07-22 22:56:05 -04:00
Brian Vaughn a89854bc93
Fix Suspense-wrapping heuristic (and bump version numbers) (#19373)
* Fixed suspense wrapping heuristic

* Bump package numbers 16.13.1 -> 17.0.0-alpha.0 to fix DevTools Suspense heuristic
2020-07-15 12:25:27 -04:00
Dominic Gannaway 61dd00db24
Extract some of the tidy up changes from 19278 (#19315) 2020-07-10 22:33:42 +01:00
Dominic Gannaway f5ea39c182
Modern Event System: make on*Capture events use capture phase (#19221) 2020-07-08 17:10:06 +01:00
Dominic Gannaway 4eb9b1d2b4
Refactor createEventHandle signature (#19174) 2020-07-07 13:05:06 +01:00
Dan Abramov 9fba65efa5
Enable modern event system and delete dead code (#19230) 2020-07-01 17:43:34 +01:00
Dan Abramov e3f4eb7272
Fork legacy-events folder into react-dom and react-native (#19228) 2020-07-01 16:37:13 +01:00
Dan Abramov b231445f96
Move responder tests and remove dead code (#19226) 2020-07-01 16:20:49 +01:00
Ricky 30b47103d4
Fix spelling errors and typos (#19138) 2020-06-15 19:59:44 -04:00
Andrew Clark 103ed08c46
Remove shouldDeprioritizeSubtree from host config (#19124)
No longer being used.
2020-06-12 12:57:20 -07:00
Dominic Gannaway 80c4dea0d1
Modern Event System: Add scaffolding for createEventHandle (#18898) 2020-05-12 19:01:12 +01:00
Luna Ruan df14b5bcc1
add new IDs for each each server renderer instance and prefixes to distinguish between each server render (#18576)
There is a worry that `useOpaqueIdentifier` might run out of unique IDs if running for long enough. This PR moves the unique ID counter so it's generated per server renderer object instead. For people who render different subtrees, this PR adds a prefix option to `renderToString`, `renderToStaticMarkup`, `renderToNodeStream`, and `renderToStaticNodeStream` so identifiers can be differentiated for each individual subtree.
2020-05-07 20:46:27 -07:00
Brian Vaughn 3cde22a84e
Experimental test selector API (#18607)
Adds several new experimental APIs to aid with automated testing.

Each of the methods below accepts an array of "selectors" that identifies a path (or paths) through a React tree. There are four basic selector types:

* Component: Matches Fibers with the specified React component type
* Role: Matches Host Instances matching the (explicit or implicit) accessibility role.
* Test name: Matches Host Instances with a data-testname attribute.
* Text: Matches Host Instances that directly contain the specified text.
* There is also a special lookahead selector type that enables further matching within a path (without actually including the path in the result). This selector type was inspired by the :has() CSS pseudo-class. It enables e.g. matching a <section> that contained a specific header text, then finding a like button within that <section>.

API
* findAllNodes(): Finds all Host Instances (e.g. HTMLElement) within a host subtree that match the specified selector criteria.
* getFindAllNodesFailureDescription(): Returns an error string describing the matched and unmatched portions of the selector query.
* findBoundingRects(): For all React components within a host subtree that match the specified selector criteria, return a set of bounding boxes that covers the bounds of the nearest (shallowed) Host Instances within those trees.
* observeVisibleRects(): For all React components within a host subtree that match the specified selector criteria, observe if it’s bounding rect is visible in the viewport and is not occluded.
* focusWithin(): For all React components within a host subtree that match the specified selector criteria, set focus within the first focusable Host Instance (as if you started before this component in the tree and moved focus forwards one step).
2020-05-05 10:37:46 -07:00
Dominic Gannaway 9751935abf
Modern Event System: improve dispatching queue (#18799) 2020-05-04 16:55:45 +01:00
Dominic Gannaway aa88589d0b
Refine experimental Scopes API (#18778)
* Refine experimental Scopes API
2020-05-01 19:01:43 +01:00
Brian Vaughn ea2af878cc
Root API should clear non-empty roots before mounting (#18730)
* Root API should clear non-empty roots before mounting

Legacy render-into-subtree API removes children from a container before rendering into it. The root API did not do this previously, but just left the children around in the document.

This commit adds a new FiberRoot flag to clear a container's contents before mounting. This is done during the commit phase, to avoid multiple, observable mutations.
2020-04-28 13:07:42 -07:00
Dominic Gannaway 30cee2f4c7
Modern Event System: register onMouseEnter for portals (#18720) 2020-04-23 20:57:52 +01:00
Dominic Gannaway ff431b7fc4
Remove ReactDOM.useEvent and associated types+tests (#18689) 2020-04-21 16:40:44 +01:00
Dominic Gannaway a152827ef6
Refine the heuristics around beforeblur/afterblur (#18668)
* Refine the heuristics around beforeblur/afterblur
2020-04-20 19:32:22 +01:00
Sebastian Markbåge 98d410f500
Build Component Stacks from Native Stack Frames (#18561)
* Implement component stack extraction hack

* Normalize errors in tests

This drops the requirement to include owner to pass the test.

* Special case tests

* Add destructuring to force toObject which throws before the side-effects

This ensures that we don't double call yieldValue or advanceTime in tests.

Ideally we could use empty destructuring but ES lint doesn't like it.

* Cache the result in DEV

In DEV it's somewhat likely that we'll see many logs that add component
stacks. This could be slow so we cache the results of previous components.

* Fixture

* Add Reflect to lint

* Log if out of range.

* Fix special case when the function call throws in V8

In V8 we need to ignore the first line. Normally we would never get there
because the stacks would differ before that, but the stacks are the same if
we end up throwing at the same place as the control.
2020-04-10 13:32:12 -07:00
Andrew Clark 376d5c1b5a Split cross-package types from implementation
Some of our internal reconciler types have leaked into other packages.
Usually, these types are treated as opaque; we don't read and write
to its fields. This is good.

However, the type is often passed back to a reconciler method. For
example, React DOM creates a FiberRoot with `createContainer`, then
passes that root to `updateContainer`. It doesn't do anything with the
root except pass it through, but because `updateContainer` expects a
full FiberRoot, React DOM is still coupled to all its fields.

I don't know if there's an idiomatic way to handle this in Flow. Opaque
types are simlar, but those only work within a single file. AFAIK,
there's no way to use a package as the boundary for opaqueness.

The immediate problem this presents is that the reconciler refactor will
involve changes to our internal data structures. I don't want to have to
fork every single package that happens to pass through a Fiber or
FiberRoot, or access any one of its fields. So my current plan is to
share the same Flow type across both forks. The shared type will be a
superset of each implementation's type, e.g. Fiber will have both an
`expirationTime` field and a `lanes` field. The implementations will
diverge, but not the types.

To do this, I lifted the type definitions into a separate module.
2020-04-08 23:49:23 -07:00
Andrew Clark d686f3f16a Add `.old` prefix to reconciler modules 2020-04-08 23:49:19 -07:00
Luna Ruan 3278d24218
Add useOpaqueIdentifier Hook (#17322)
* Add useOpaqueIdentifier Hook

We currently use unique IDs in a lot of places. Examples are:
  * `<label for="ID">`
  * `aria-labelledby`

This can cause some issues:
  1. If we server side render and then hydrate, this could cause an
     hydration ID mismatch
  2. If we server side render one part of the page and client side
     render another part of the page, the ID for one part could be
     different than the ID for another part even though they are
     supposed to be the same
  3. If we conditionally render something with an ID ,  this might also
     cause an ID mismatch because the ID will be different on other
     parts of the page

This PR creates a new hook `useUniqueId` that generates a different
unique ID based on whether the hook was called on the server or client.
If the hook is called during hydration, it generates an opaque object
that will rerender the hook so that the IDs match.

Co-authored-by: Andrew Clark <git@andrewclark.io>
2020-04-06 17:17:27 -07:00
Sebastian Markbåge 4169420198
Refactor Component Stack Traces (#18495)
* Add feature flag

* Split stack from current fiber

You can get stack from any fiber, not just current.

* Refactor description of component frames

These should use fiber tags for switching. This also puts the relevant code
behind DEV flags.

* We no longer expose StrictMode in component stacks

They're not super useful and will go away later anyway.

* Update tests

Context is no longer part of SSR stacks. This was already the case on the
client.

forwardRef no longer is wrapped on the stack. It's still in getComponentName
but it's probably just noise in stacks. Eventually we'll remove the wrapper
so it'll go away anyway. If we use native stack frames they won't have this
extra wrapper.

It also doesn't pick up displayName from the outer wrapper. We could maybe
transfer it but this will also be fixed by removing the wrapper.

* Forward displayName onto the inner function for forwardRef and memo in DEV

This allows them to show up in stack traces.

I'm not doing this for lazy because lazy is supposed to be called on the
consuming side so you shouldn't assign it a name on that end. Especially
not one that mutates the inner.

* Use multiple instances of the fake component

We mutate the inner component for its name so we need multiple copies.
2020-04-06 15:43:39 -07:00
Dominic Gannaway 8815e4cc72
Cleanup getListener and EventSystemFlags (#18469) 2020-04-02 23:17:10 +01:00
Dominic Gannaway 663c13d71d
Refactor Enter/Leave listener accumulation (#18405)
* Refactor Enter/Leave listener accumulation
2020-04-02 11:07:20 +01:00
Sebastian Markbåge 3e94bce765
Enable prefer-const lint rules (#18451)
* Enable prefer-const rule

Stylistically I don't like this but Closure Compiler takes advantage of
this information.

* Auto-fix lints

* Manually fix the remaining callsites
2020-04-01 12:35:52 -07:00
Dan Abramov 9065e02d66
Fix a warning typo (#18443) 2020-03-31 15:55:30 +01:00
Ricky dd7e5e4f5a
Add getInspectorDataForViewAtPoint (take two) (#18388)
* Add getInspectorDataForViewAtPoint (take two)

* Updates from review

* Add DEV to dev-only variable

* Missed this rename
2020-03-30 15:42:41 -04:00
Sebastian Markbåge c5d2fc7127
Move some files out of /shared and rename to upper case (#18363)
* Rename lower case isomorphic default exports modules to upper case named exports

We're somewhat inconsistent here between e.g. ReactLazy and memo.

Let's pick one.

This also moves the responder, fundamental, scope creators from shared
since they're isomorphic and same as the other creators.

* Move some files that are specific to the react-reconciler from shared

Individual renderers are allowed to deep require into the reconciler.

* Move files specific to react-dom from shared

react-interactions is right now dom specific (it wasn't before) so we can
type check it together with other dom stuff. Avoids the need for
a shared ReactDOMTypes to be checked by RN for example.

* Move ReactWorkTags to the reconciler

* Move createPortal to export from reconciler

Otherwise Noop can't access it since it's not allowed deep requires.
2020-03-21 15:22:01 -07:00
Dominic Gannaway c804f9aebb
ReactDOM.useEvent: wire to event system to the hook (#18304) 2020-03-16 21:46:17 +00:00
Dominic Gannaway d3ec42020d
Address feedback for accumulateTwoPhaseListeners (#18289) 2020-03-12 21:48:29 +00:00
Dominic Gannaway 99d271228d
ReactDOM.useEvent: more scaffolding changes (#18282) 2020-03-12 09:12:06 +00:00
Sebastian Markbage a463fef31b Revert "[React Native] Add getInspectorDataForViewAtPoint (#18233)"
This reverts commit bf351089a0.
2020-03-11 10:05:26 -07:00