Commit Graph

16475 Commits

Author SHA1 Message Date
Jan Kassens 3e6bc7d2d7 Revert "Land enableClientRenderFallbackOnTextMismatch for www" (#28548)
We're looking to run further experiments on this.

Reverts facebook/react#28538
2024-03-12 15:29:41 -04:00
Jan Kassens eb33bd7477 Remove renderSubtreeIntoContainer_DO_NOT_USE (#28526)
Since D54648741 we no longer need this shim. 

NOTE: There is still some work left to remove the
`unstable_renderSubtreeIntoContainer` export.
2024-03-12 11:31:34 -04:00
Sebastian Markbåge 89021fb4ec Remove invokeGuardedCallback and replay trick (#28515)
We broke the ability to "break on uncaught exceptions" by adding a
try/catch higher up in the scheduling. We're giving up on fixing that so
we can remove the replay trick inside an event handler.

The issue with that approach is that we end up double logging a lot of
errors in DEV since they get reported to the page.

It's also a lot of complexity around this feature.
2024-03-11 20:17:07 -04:00
Sebastian Silbermann 7d6f1e3c13 Remove ReactTestUtils from ReactBrowserEventEmitter-test (#28533) 2024-03-11 22:11:52 +01:00
Sebastian Silbermann 9c48fb25ec Remove ReactTestUtils from refs-destruction-test (#28532)
```diff
-expect(ReactTestUtils.isDOMComponent(maybeElement)).toBe(true);
+expect(maybeElement).toBeInstanceOf(Element);
```

It's not equivalent since `isDOMComponent` checks `maybeElement.nodeType
=== Element.ELEMENT_NODE && !!maybeElement.tagName` but `instanceof`
check seems sufficient here. Checking `nodeType` is mostly for
cross-realm checks and checking falsy `tagName` seems like a check
specifically for incomplete DOM implementations because tagName can't be
empty by spec I believe.
2024-03-11 22:11:40 +01:00
Sebastian Silbermann 58cd0ef35d Remove ReactTestUtils from ReactLegacyUpdates-test (#28531) 2024-03-11 22:11:31 +01:00
Jack Pope eebdbf4454 Remove RTR from ReactProfiler-test (#28407)
## Summary

Internal cleanup of ReactTestRenderer

## How did you test this change?

`yarn test packages/react/src/__tests__/ReactProfiler-test.internal.js`
2024-03-11 15:07:58 -04:00
Jack Pope 605b7c018d Concurrent rendering in ReactDevToolsHooksIntegration-test (#28522)
## Summary

We need to unblock flipping the default for RTR to be concurrent
rendering. Update ReactDevToolsHooksIntegration-test to use
`unstable_isConcurrent` in place.

## How did you test this change?

`yarn test
packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js`
2024-03-11 15:06:35 -04:00
Ricky 56e20051c3 Land enableClientRenderFallbackOnTextMismatch for www (#28538)
This is landed, we can hardcode the flag
2024-03-11 11:40:48 -04:00
Noah Lemen 0d1ae5d753 cleanup enableProfilerNestedUpdateScheduledHook feature flag (#28509)
## Summary

Looks like this was added years ago for instrumentation at meta that
never ended up rolling out. Should be safe to clean up.

## How did you test this change?
`yarn test`
2024-03-11 11:37:17 -04:00
Sebastian Silbermann dfaed55825 Remove remaining usages of ReactTestUtils in tests unrelated to react-dom/test-util (#28534)
Batched the remaining usages since these were straight forward.
Completes removal of `ReactTestUtils` from tests unrelated to
`react-dom/test-util` together with:
- https://github.com/facebook/react/pull/28531
- https://github.com/facebook/react/pull/28532
- https://github.com/facebook/react/pull/28533
2024-03-11 13:27:03 +01:00
Timothy Yung 706d95f486 Configure Dynamic Feature Flags for React Native (#28527)
## Summary

This PR is a subset of https://github.com/facebook/react/pull/28425,
which only includes the feature flags that will be configured as
dynamic.

The following list summarizes the feature flag changes:

* RN FB
  * Change to Dynamic
    * consoleManagedByDevToolsDuringStrictMode
    * enableAsyncActions
    * enableDeferRootSchedulingToMicrotask
    * enableRenderableContext
    * useModernStrictMode

## How did you test this change?

Ran the following successfully:

```
$ yarn test
$ yarn flow native
$ yarn flow fabric
```
2024-03-08 16:14:09 -08:00
Jan Kassens 71c4699de3 Upgrade flow to 0.230.0 (#28528)
Upgrade flow to 0.230.0

Ran
```
yarn add -W flow-bin flow-remove-types hermes-parser hermes-eslint
```
2024-03-08 17:39:27 -05:00
Timothy Yung 4e2fe10fa3 Configure "Always On" Feature Flags for React Native (#28519)
## Summary

This PR is a subset of https://github.com/facebook/react/pull/28425,
which only includes the feature flags that will be configured as "always
on" (i.e. not "dynamic").

The following list summarizes the feature flag changes:

* RN FB
  * Always Enable
    * enableCache
    * enableCustomElementPropertySupport
* RN OSS
  * Always Enable
    * disableLegacyContext
    * enableCache
    * enableCustomElementPropertySupport
* RN Test
  * Always Enable
    * disableModulePatternComponents
    * enableCustomElementPropertySupport

## How did you test this change?

Ran the following successfully:

```
$ yarn test
$ yarn flow native
$ yarn flow fabric
```
2024-03-08 09:20:03 -08:00
Jack Pope 338dddc089 Remove RTR from DebugTracing-test (#28411)
## Summary

Internal cleanup of ReactTestRenderer

## How did you test this change?

`yarn test
packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js`
2024-03-07 16:36:50 -05:00
Timothy Yung c35b9b05fe Fix ReactHooksInspection-test.js (#28520)
## Summary

Currently, `ReactHooksInspection-test.js` fails because something is
polluting the resulting `Promise` with symbol properties. This changes
the unit test to be more resilient to such symbol properties.

## How did you test this change?

Ran the following successfully:

```
$ yarn test
```
2024-03-07 11:22:42 -08:00
Ruslan Lesiutin 447fc27e36 fix[devtools/e2e]: fixed source inspection in e2e tests (#28518)
DevTools e2e tests started to fail after landing
https://github.com/facebook/react/pull/28471:
-
https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798270
-
https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798275
-
https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798271
-
https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798274
-
https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798269

There are 2 reasons for that:
1. Versions 16.0 and 16.5 use legacy renderer, which doesn't support
source inspection by design:

https://github.com/facebook/react/blob/850fac4915864a487e7cb9ecae8a75dbac144174/packages/react-devtools-shared/src/backend/legacy/renderer.js#L831

The corresponding e2e test is now gated for versions >=16.8
2. For other versions (>=16.8), the source is actually
`e2e-app-regression.js`, because these regression tests open a different
page (not the one we open for tests against React from source)

https://github.com/facebook/react/blob/850fac4915864a487e7cb9ecae8a75dbac144174/packages/react-devtools-inline/playwright.config.js#L15-L17
2024-03-07 17:59:37 +00:00
이동현 850fac4915 Link to reactjs/react.dev repo instead of reactjs/reactjs.org (#28493) 2024-03-07 00:20:57 +01:00
bubucuo 64f354cf27 Remove unused returnFiber (#28504)
There is no use of `returnFiber` here, it can be removed.
2024-03-06 14:02:51 -05:00
Sebastian Silbermann 0066e0b68d Devtools: Display actual pending state when inspecting useTransition (#28499) 2024-03-06 15:38:01 +01:00
Sebastian Markbåge c11b196ae3 Move tail hydration mismatch back to hydration context (#28501)
In #23176 we added a special case in completeWork for SuspenseBoundaries
if they still have trailing children. However, that misses a case
because it doesn't log a recoverable error for the hydration mismatch.
So we get an error that we rerendered.

I think this special case was done to avoid contexts getting out of
sync. I don't know why we didn't just move where the pop happens though
so that's what I did here and let the regular pass throw instead. Seems
to be pass the tests.
2024-03-05 20:54:24 -05:00
Ruslan Lesiutin 966d17483c React DevTools 5.0.1 -> 5.0.2 (#28496)
* feat[devtools]: symbolicate source for inspected element
([hoxyq](https://github.com/hoxyq) in
[#28471](https://github.com/facebook/react/pull/28471))
* refactor[devtools]: lazily define source for fiber based on component
stacks ([hoxyq](https://github.com/hoxyq) in
[#28351](https://github.com/facebook/react/pull/28351))
* fix[devtools/tree/element]: onClick -> onMouseDown to handle first
click correctly ([hoxyq](https://github.com/hoxyq) in
[#28486](https://github.com/facebook/react/pull/28486))
* [DOM] disable legacy mode behind flag
([gnoff](https://github.com/gnoff) in
[#28468](https://github.com/facebook/react/pull/28468))
* Fix Broken Links In Documentation
([justindhillon](https://github.com/justindhillon) in
[#28321](https://github.com/facebook/react/pull/28321))
* Update /link URLs to react.dev
([rickhanlonii](https://github.com/rickhanlonii) in
[#28477](https://github.com/facebook/react/pull/28477))
* [tests] add support for @gate pragma
([gnoff](https://github.com/gnoff) in
[#28479](https://github.com/facebook/react/pull/28479))
* Devtools: Unwrap Promise in useFormState
([eps1lon](https://github.com/eps1lon) in
[#28319](https://github.com/facebook/react/pull/28319))
* Add support for rendering BigInt
([eps1lon](https://github.com/eps1lon) in
[#24580](https://github.com/facebook/react/pull/24580))
* Include server component names in the componentStack in DEV
([sebmarkbage](https://github.com/sebmarkbage) in
[#28415](https://github.com/facebook/react/pull/28415))
2024-03-05 14:11:30 +00:00
Ruslan Lesiutin e5287287aa feat[devtools]: symbolicate source for inspected element (#28471)
Stacked on https://github.com/facebook/react/pull/28351, please review
only the last commit.

Top-level description of the approach:
1. Once user selects an element from the tree, frontend asks backend to
return the inspected element, this is where we simulate an error
happening in `render` function of the component and then we parse the
error stack. As an improvement, we should probably migrate from custom
implementation of error stack parser to `error-stack-parser` from npm.
2. When frontend receives the inspected element and this object is being
propagated, we create a Promise for symbolicated source, which is then
passed down to all components, which are using `source`.
3. These components use `use` hook for this promise and are wrapped in
Suspense.

Caching:
1. For browser extension, we cache Promises based on requested resource
+ key + column, also added use of
`chrome.devtools.inspectedWindow.getResource` API.
2. For standalone case (RN), we cache based on requested resource url,
we cache the content of it.
2024-03-05 12:32:11 +00:00
Ruslan Lesiutin 61bd00498d refactor[devtools]: lazily define source for fiber based on component stacks (#28351)
`_debugSource` was removed in
https://github.com/facebook/react/pull/28265.

This PR migrates DevTools to define `source` for Fiber based on
component stacks. This will be done lazily for inspected elements, once
user clicks on the element in the tree.

`DevToolsComponentStackFrame.js` was just copy-pasted from the
implementation in `ReactComponentStackFrame`.

Symbolication part is done in
https://github.com/facebook/react/pull/28471 and stacked on this commit.
2024-03-05 12:10:36 +00:00
Ruslan Lesiutin aa4eae6b99 fix[devtools/tree/element]: onClick -> onMouseDown to handle first click correctly (#28486)
There is a weird behaviour in all shells of RDT: when user opens
`Components` tab and scrolls down a tree (without any prior click or
focus event), and then clicks on some element, the `click` event will
not be fired. Because `click` event hasn't been fired, the `focus` event
is fired for the whole list and we pre-select the first (root) element
in the tree:

https://github.com/facebook/react/blob/034130c02ffb47b0026059b57d17e9b080976ff3/packages/react-devtools-shared/src/devtools/views/Components/Tree.js#L217-L226

Check the demo (before) what is happening. I don't know exactly why
`click` event is not fired there, but it only happens:
1. For elements, which were not previously rendered (for virtualization
purposes).
2. When HTML-element (div), which represents the container for the tree
was not focused previously.

Unlike the `click` event, the `mousedown` event is fired consistently.

### Before


https://github.com/facebook/react/assets/28902667/9f3ad75d-55d0-4c99-b2d0-ead63a120ea0

### After



https://github.com/facebook/react/assets/28902667/e34816be-644c-444c-8e32-562a79494e44


Tested that it works in all shells, including the select / deselect
features (with `metaKey` param in event).
2024-03-05 11:42:10 +00:00
Josh Story 0ae2b13412 [Test] Update flushSync tests to use react-dom (#28490)
Updates the `flushSync` tests to use react-dom instead of ReactNoop.
flushSync is primarily a react-dom API and asserting the implementation
of ReactNoop is not really ideal especially since we are going to be
refactoring flushSync soon to not be implemented in the reconciler
internals.

ReactNoop still have a flushSync api and it can still be used in other
tests that are primarily about testing other functionlity and use
ReactNoop as the renderer.
2024-03-04 21:40:15 -08:00
Josh Story 113ab9af08 [Flight][Fizz][Fiber] Chain HostDispatcher implementations (#28488)
The idea here is that host dispatchers are not bound to renders so we
need to be able to dispatch to them at any time. This updates the
implementation to chain these dispatchers so that each renderer can
respond to the dispatch. Semantically we don't always want every
renderer to do this for instance if Fizz handles a float method we don't
want Fiber to as well so each dispatcher implementation can decide if it
makes sense to forward the call or not. For float methods server
disaptchers will handle the call if they can resolve a Request otherwise
they will forward. For client dispatchers they will handle the call and
always forward. The choice needs to be made for each dispatcher method
and may have implications on correct renderer import order. For now we
just live with the restriction that if you want to use server and client
together (such as renderToString in the browser) you need to import the
server renderer after the client renderer.
2024-03-04 12:27:15 -08:00
Josh Story 1c02b9d2bd [DOM] disable legacy mode behind flag (#28468)
Adds a flag to disable legacy mode. Currently this flag is used to cause
legacy mode apis like render and hydrate to throw. This change also
removes render, hydrate, unmountComponentAtNode, and
unstable_renderSubtreeIntoContainer from the experiemntal entrypoint.
Right now for Meta builds this flag is off (legacy mode is still
supported). In OSS builds this flag matches __NEXT_MAJOR__ which means
it currently is on in experiemental. This means that after merging
legacy mode is effectively removed from experimental builds. While this
is a breaking change, experimental builds are not stable and users can
pin to older versions or update their use of react-dom to no longer use
legacy mode APIs.
2024-03-04 08:19:17 -08:00
Justin Dhillon 034130c02f Fix Broken Links In Documentation (#28321)
## Summary

I used [link-inspector](https://github.com/justindhillon/link-inspector)
to find a bunch of broken links in this projects documentation. Here is
what I fixed:

https://www.html5rocks.com/en/tutorials/canvas/hidpi/ -->
https://web.dev/articles/canvas-hidipi


https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
--> https://www.w3.org/TR/custom-elements/


https://github.com/facebookarchive/fixed-data-table/blob/main/src/vendor_upstream/dom/normalizeWheel.js
-->
https://github.com/facebookarchive/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js

https://upload.wikimedia.org/wikipedia/commons/e/ee/Atom_%282%29.png -->
https://upload.wikimedia.org/wikipedia/commons/1/1b/Atom.png

## Support my work

I used [link-inspector](https://github.com/justindhillon/link-inspector)
to find and fix this issue. If you find this PR useful, give the repo a
2024-03-03 17:44:27 -05:00
Ricky 1940cb27b2 Update /link URLs to react.dev (#28477)
Depends on https://github.com/reactjs/react.dev/pull/6670 [merged]
2024-03-03 17:34:33 -05:00
Josh Story 30ae0baed1 [devtools][tests] add support for @gate pragma (#28479)
Adds support for `// @gate` pragma in devtools tests
Adds a couple gate test assertions to ensure they continue to work
2024-03-01 13:26:07 -08:00
dan 11828bf529 Remove loose-envify dep and browserify configs (#28480)
Browserify isn't widely used, and at this point I don't think it makes
sense to have a special config just for the sake of it. Let's remove it?
2024-03-01 20:49:51 +00:00
Ricky 5f2c6b74db Update homepage URLs to react.dev (#28478)
Updates the package.json "homepage" entry to react.dev
2024-03-01 14:35:18 -05:00
Andrew Clark 2f8f776022 Move ref type check to receiver (#28464)
The runtime contains a type check to determine if a user-provided ref is
a valid type — a function or object (or a string, when
`disableStringRefs` is off). This currently happens during child
reconciliation. This changes it to happen only when the ref is passed to
the component that the ref is being attached to.

This is a continuation of the "ref as prop" change — until you actually
pass a ref to a HostComponent, class, etc, ref is a normal prop that has
no special behavior.
2024-02-29 21:26:36 -05:00
Sebastian Markbåge bb4b147da9 Clean up empty string special cases (#28475)
This was fixed in https://github.com/facebook/react/pull/22807 so we
don't need these special cases anymore.
2024-02-29 20:27:26 -05:00
Jan Kassens b8da12e8f8 Add dynamic flag for infinite loop detection on React Native FB (#28456)
Add dynamic flag for infinite loop detection on React Native FB
2024-02-29 13:19:12 -08:00
Sebastian Silbermann fb10a2c66a Devtools: Unwrap Promise in useFormState (#28319) 2024-02-28 23:52:59 +01:00
Sebastian Silbermann 01ab35a9a7 Run yarn flags in CI (#28345) 2024-02-28 00:12:53 +01:00
Sebastian Silbermann c6bb12edd0 Remove ReactTestUtils from ReactJSXRuntime (#28337) 2024-02-28 00:12:17 +01:00
Sebastian Silbermann e7849b50bc Remove ReactTestUtils from ReactJSXElementValidator (#28335) 2024-02-28 00:12:08 +01:00
Ricky d88fb321a3 Move enableRenderableContext back to dynamic (#28466) 2024-02-27 18:11:42 -05:00
Ricky dee1aac77f Turn on disableJavaScriptURLs for experimental (#28462)
This is on everywhere, ready to turn on in the next major.
2024-02-27 16:33:14 -05:00
Andrew Clark c9798954e2 Remove string refs (behind flag) (#28322)
Depends on:

- https://github.com/facebook/react/pull/28398

---

This removes string refs, which has been deprecated in Strict Mode for
seven years.

I've left them behind a flag for Meta, but in open source this fully
removes the feature.
2024-02-27 11:43:04 -05:00
Noah Lemen 3bcd2de01b clean up isInputPending in Scheduler (#28444)
## Summary

`isInputPending` is not in use. This PR cleans up the flags controlling
its gating and parameters to simplify Scheduler.

Makes `frameYieldMs` feature flag static, set to 10ms in www, which we
found built on the wins provided by a broader yield interval via
`isInputPending`. Flag remains set to 5ms in OSS builds.

## How did you test this change?
`yarn test Scheduler`
2024-02-27 10:39:43 -05:00
Sebastian Silbermann 172a7f629a Convert ReactDOMServerIntegrationLegacyContextDisabled to createRoot (#28448) 2024-02-26 21:55:23 +01:00
Sebastian Silbermann e6d8374728 Convert ReactDOMServerIntegrationLegacyContext to createRoot (#28449) 2024-02-26 21:55:03 +01:00
Sebastian Silbermann 2314227de5 Convert ReactTestUtils to createRoot (#28446)
it'll be removed soon anyway but until then let's unblock moving legacy
APIs behind a flag.
2024-02-26 21:54:46 +01:00
Sebastian Silbermann f637f6a473 Convert ReactServerRenderingHydration to createRoot (#28447) 2024-02-26 20:59:43 +01:00
Sebastian Silbermann 2f240c91ed Add support for rendering BigInt (#24580) 2024-02-26 19:18:50 +01:00
Ricky 6c3b8dbfed Turn on enableRenderableContext for www (#28438)
We can land for www now
2024-02-26 10:08:47 -05:00