Rename the react.element symbol to react.transitional.element #28813
Conversation
facebook-github-bot
added
CLA Signed
React Core Team
| export const ELEMENT_SYMBOL_STRING = 'Symbol(react.element)'; | ||
| export const ELEMENT_SYMBOL_STRING = 'Symbol(react.transitional.element)'; | ||
| export const LEGACY_ELEMENT_NUMBER = 0xeac7; | ||
| export const LEGACY_ELEMENT_SYMBOL_STRING = 'Symbol(react.element)'; |
There was a problem hiding this comment.
From what I can tell, these are not used anyway but if we did, we'd check for both.
sebmarkbage
force-pushed
the
renameelement
branch
from
8549a5d to
bd62a21
Compare
|
I noticed babel has a reference to this There are also a couple of internal references at Meta that would need to be checked before merging this. |
|
I mean those are either broken or causing the page to deopt so you probably want to change them ASAP. |
|
It seems like Babel uses an inline helper for the |
|
In addition to changing the format, we plan on JSX in RSC to have side-effects so the inlining strategy won't work in RSC regardless. So just upgrading an inlining plugin to use the new format might not be a good idea. |
sebmarkbage
force-pushed
the
renameelement
branch
from
bd62a21 to
e97aee4
Compare
sebmarkbage
force-pushed
the
renameelement
branch
2 times, most recently
from
ef8ab3a to
a0cebcf
Compare
sebmarkbage
force-pushed
the
renameelement
branch
from
a0cebcf to
0688f2d
Compare
|
Flagged for FB for now. |
We have changed the shape (and the runtime) of React Elements. To help avoid precompiled or inlined JSX having subtle breakages or deopting hidden classes, I renamed the symbol so that we can early error if private implementation details are used or mismatching versions are used. Why "transitional"? Well, because this is not the last time we'll change the shape. This is just a stepping stone to removing the `ref` field on the elements in the next version so we'll likely have to do it again. DiffTrain build for commit 3b551c8.
We have changed the shape (and the runtime) of React Elements. To help avoid precompiled or inlined JSX having subtle breakages or deopting hidden classes, I renamed the symbol so that we can early error if private implementation details are used or mismatching versions are used. Why "transitional"? Well, because this is not the last time we'll change the shape. This is just a stepping stone to removing the `ref` field on the elements in the next version so we'll likely have to do it again. DiffTrain build for [3b551c8](3b551c8)
| @@ -166,6 +167,16 @@ function coerceRef( | |||
| } | |||
|
|
|||
| function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) { | |||
| if (newChild.$$typeof === REACT_LEGACY_ELEMENT_TYPE) { | |||
There was a problem hiding this comment.
I think this might be missing the flag check (haven't run the code internally yet). Not sure why tests wouldn't fail.
There was a problem hiding this comment.
We only get to this error handling path when there's no match, but with the flag off there would be a match.
This is just detecting which error message to provide if there's an error.
|
I'm not sure, and I don't understand exactly why, but I think this commit might have broken our snapshot tests
Is it really because of this commit? |
|
@Tobbe I assume this is from https://github.com/redwoodjs/redwood, right? You need to make sure that you install the canary version of |
|
@unstubbable Amazing! Thank you 🙏 |
We have changed the shape (and the runtime) of React Elements. To help avoid precompiled or inlined JSX having subtle breakages or deopting hidden classes, I renamed the symbol so that we can early error if private implementation details are used or mismatching versions are used. Why "transitional"? Well, because this is not the last time we'll change the shape. This is just a stepping stone to removing the `ref` field on the elements in the next version so we'll likely have to do it again. DiffTrain build for commit 3b551c8.
Full list of changes (not a public changelog): * fix[react-devtools/ci]: fix configurations for e2e testing ([hoxyq](https://github.com/hoxyq) in [#29016](#29016)) * feat[react-devtools]: display forget badge for components in profiling session ([hoxyq](https://github.com/hoxyq) in [#29014](#29014)) * fix[react-devtools]: add backwards compat with legacy element type symbol ([hoxyq](https://github.com/hoxyq) in [#28982](#28982)) * Expose "view source" options to Fusebox integration ([motiz88](https://github.com/motiz88) in [#28973](#28973)) * Enable inspected element context menu in Fusebox ([motiz88](https://github.com/motiz88) in [#28972](#28972)) * Check in `frontend.d.ts` for react-devtools-fusebox, include in build output ([motiz88](https://github.com/motiz88) in [#28970](#28970)) * Devtools: Fix build-for-devtools ([eps1lon](https://github.com/eps1lon) in [#28976](#28976)) * Move useMemoCache hook to react/compiler-runtime ([kassens](https://github.com/kassens) in [#28954](#28954)) * warn -> error for Test Renderer deprecation ([acdlite](https://github.com/acdlite) in [#28904](#28904)) * [react-dom] move all client code to `react-dom/client` ([gnoff](https://github.com/gnoff) in [#28271](#28271)) * Rename the react.element symbol to react.transitional.element ([sebmarkbage](https://github.com/sebmarkbage) in [#28813](#28813)) * Rename Forget badge ([jbonta](https://github.com/jbonta) in [#28858](#28858)) * Devtools: Add support for useFormStatus ([eps1lon](https://github.com/eps1lon) in [#28413](#28413))
Make prepass backwards compatible with react v19, it was necessary to handle with the following changes in React: - facebook/react#28789 - facebook/react#28813 - facebook/react#28226
Make prepass backwards compatible with react v19, it was necessary to handle with the following changes in React: - facebook/react#28789 - facebook/react#28813 - facebook/react#28226
Make prepass backwards compatible with react v19, it was necessary to handle with the following changes in React: - facebook/react#28789 - facebook/react#28813 - facebook/react#28226
We have changed the shape (and the runtime) of React Elements. To help avoid precompiled or inlined JSX having subtle breakages or deopting hidden classes, I renamed the symbol so that we can early error if private implementation details are used or mismatching versions are used. The fix is usually to stop inlining the JSX runtime e.g. by configuring the bundler to treat
react/jsx-runtimeandreact/jsx-dev-runtimeas externals.This also catches using a version of
react-isthat's not the same asreact.react-ismust be the same version asreact.Why "transitional"? Well, because this is not the last time we'll change the shape. This is just a stepping stone to removing the
reffield on the elements in the next version so we'll likely have to do it again.