Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement HostSingleton #25426

Merged
merged 1 commit into from
Oct 11, 2022
Merged

Implement HostSingleton #25426

merged 1 commit into from
Oct 11, 2022

Conversation

gnoff
Copy link
Collaborator

@gnoff gnoff commented Oct 4, 2022

Background

For a variety of reasons html, head, and body nodes are special in the browser and historically there has not been much heed given to these elements in particular within react-dom which has led to some limitations of interoperability with externals systems such as 3rd party scripts and browser extensions. Additionally new features in React will require some special handling of these instances to be possible.

The main issue has to do with instance lifecycles and React's total ownership of the nodes within it's tree. For the head for instance, if there are stylesheet links inserted by 3rd parties, React might unmount those nodes, or reinsert them somewhere else causing a new fetch and temporary style unloading. Additionally useInsertionEffect runs in the mutation phase but if we are going to be replacing the head it will be unmounted during the time these effects are run so you can't always inject styles when you expected to be able to.

The historical advice has been to render into an element in the body that isn't like to be targeted by any external systems however this conflicts with the guidance for using streaming rendering available in React 18 where it is going to be common that React owns the entire document.

General Approach

To solve these issues, this PR introduces a new fiber type HostSingleton. Currently only react-dom has an implementation for this type and all other renderers still only use HostComponent.

  1. All HostSingletons are placed individually, they will not be appended to a parent fiber even if they are part of a tree that is going to be Placed in the same commit.
  2. During completeWork HostSingletons do not append any HostComponent children
  3. During commitWork HostSingletons if a Placement effect is needed a special Singleton placement method from the HostConfig is used. Child fibers of the fiber are then appended.
  4. During commitWork if a HostSingleton is having Placement effects appended to it, it will use optional additional semantics for finding an insertion edge. This allows for non-react-controlled children to be siblings of Placed fibers without incorrect ordering.

react-dom Approach

In the case of react-dom there are three singleton instances, document.documentElement, document.head, document.body. If you render a <html /> | <head /> | <body /> in your tree they each will bind to the already existing Element and not recreate a new one.

Key Constraints:

  • none of the 3 singleton instances will be unmounted at any time
  • none of the 3 singleton instances will be ever change referential identity
  • Head and Body nodes will never reposition, reorder, or otherwise alter the placement of style-related nodes outside of React

@sizebot
Copy link

sizebot commented Oct 4, 2022

Comparing: aa9988e...e8a7aea

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js +0.13% 135.47 kB 135.64 kB +0.05% 43.44 kB 43.46 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +1.29% 148.01 kB 149.92 kB +1.07% 47.33 kB 47.84 kB
facebook-www/ReactDOM-prod.classic.js = 492.51 kB 492.25 kB +0.01% 87.52 kB 87.53 kB
facebook-www/ReactDOM-prod.modern.js = 477.80 kB 477.51 kB +0.04% 85.29 kB 85.33 kB
facebook-www/ReactDOMForked-prod.classic.js = 492.51 kB 492.25 kB +0.01% 87.52 kB 87.53 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-reconciler/cjs/react-reconciler.production.min.js +1.34% 104.29 kB 105.69 kB +1.37% 31.83 kB 32.26 kB
oss-experimental/react-dom/umd/react-dom.production.min.js +1.31% 148.00 kB 149.95 kB +0.98% 48.03 kB 48.50 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +1.29% 148.01 kB 149.92 kB +1.07% 47.33 kB 47.84 kB
oss-experimental/react-dom/umd/react-dom.profiling.min.js +1.24% 156.81 kB 158.76 kB +1.02% 50.31 kB 50.82 kB
oss-experimental/react-reconciler/cjs/react-reconciler.profiling.min.js +1.24% 113.14 kB 114.54 kB +1.35% 33.98 kB 34.44 kB
oss-experimental/react-dom/cjs/react-dom.profiling.min.js +1.21% 157.49 kB 159.40 kB +1.07% 49.80 kB 50.34 kB
oss-experimental/react-dom/umd/react-dom.development.js +1.04% 1,209.89 kB 1,222.45 kB +0.84% 259.35 kB 261.53 kB
oss-experimental/react-dom/cjs/react-dom.development.js +1.04% 1,153.60 kB 1,165.57 kB +0.83% 256.61 kB 258.75 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js +1.02% 830.70 kB 839.14 kB +0.84% 175.89 kB 177.38 kB
oss-experimental/react-reconciler/cjs/react-reconciler-reflection.development.js +0.66% 18.51 kB 18.63 kB +0.64% 5.32 kB 5.36 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler-reflection.development.js +0.54% 18.11 kB 18.21 kB +0.52% 5.24 kB 5.27 kB
oss-stable/react-reconciler/cjs/react-reconciler-reflection.development.js +0.54% 18.11 kB 18.21 kB +0.52% 5.24 kB 5.27 kB
oss-experimental/react-reconciler/cjs/react-reconciler-reflection.production.min.js +0.26% 2.69 kB 2.70 kB +0.61% 1.14 kB 1.15 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.development.js +0.25% 786.27 kB 788.23 kB +0.26% 167.26 kB 167.70 kB
oss-stable/react-reconciler/cjs/react-reconciler.development.js +0.25% 786.30 kB 788.26 kB +0.26% 167.28 kB 167.72 kB
facebook-www/ReactDOMTesting-dev.modern.js +0.22% 1,090.52 kB 1,092.87 kB +0.18% 243.34 kB 243.78 kB
facebook-www/ReactDOMTesting-dev.classic.js +0.21% 1,119.38 kB 1,121.76 kB +0.18% 249.06 kB 249.52 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.production.min.js +0.21% 96.80 kB 97.01 kB +0.26% 29.74 kB 29.82 kB
oss-stable/react-reconciler/cjs/react-reconciler.production.min.js +0.21% 96.83 kB 97.03 kB +0.26% 29.76 kB 29.84 kB

Generated by 🚫 dangerJS against e8a7aea

@@ -59,6 +59,6 @@ export const disableNativeComponentFrames = false;
export const createRootStrictEffectsByDefault = false;
export const enableStrictEffects = false;
export const allowConcurrentByDefault = true;
export const enableFloat = false;
Copy link
Collaborator

@sebmarkbage sebmarkbage Oct 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You still want to keep the Float flag for the other stuff, right? nvm. That's already hard coded to false in www.

@@ -59,6 +59,6 @@ export const disableNativeComponentFrames = false;
export const createRootStrictEffectsByDefault = false;
export const enableStrictEffects = false;
export const allowConcurrentByDefault = true;
export const enableFloat = false;
export const enableHostSingletons = false;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need this if it's hardcoded to false below in www.

tag === HostComponent ||
tag === HostText ||
(enableFloat ? tag === HostResource : false) ||
(enableHostSingletons && tag === HostSingleton)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting use of two different stylistic patterns. :)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this check supportsSingletons too?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was a litmus test to see how closely you reviewed these PRs, you passed!

No actually it was was rebase artifact. I tried the new style to see if CC could figure out how to omit the || !1 when the flag is false but no luck, either form leaves behind these artifacts in the stable prod build. I did it one way originally in HostSingleton, tried the other way in Float, and then missed this on rebase to main

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, re: supportsSingletons this file gets built without a hostconfig in one entrypoint so I can't import from that file or would need to make a fake entrypoint for it. Presumably it is safe enough to not have the check b/c there should be no fibers with those types so it's a little extra checking if you build with those flags on for a renderer that doesn't support them.

You did mention last time that this file was going to be deprecated at some point. let me know if you think it needs to be resolved

@gnoff gnoff marked this pull request as draft October 5, 2022 18:29
@gnoff
Copy link
Collaborator Author

gnoff commented Oct 5, 2022

Marking as draft, I'm going to push some updates to hydration


export const supportsSingletons = true;

export function isHostSingletonInstance(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't need to be exported, does it?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

function is gone now

if (container.nodeType === ELEMENT_NODE) {
// We have refined the container to Element type
const element: Element = (container: any);
switch (element.tagName.toLowerCase()) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can assume this is a HTML and not XHTML document and not do the lowercasing. Just compare the upper case. This should be done elsewhere too for Float.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

got rid of lowercases

@@ -521,15 +552,15 @@ export function appendChildToContainer(
export function insertBefore(
parentInstance: Instance,
child: Instance | TextInstance,
beforeChild: Instance | TextInstance | SuspenseInstance,
beforeChild: InstanceSibling,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this new type needed for? It doesn't seem like you're exporting a new type so where is the input coming from?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed

): boolean {
if (instance.nodeType === ELEMENT_NODE) {
const element: Element = (instance: any);
return isHostSingletonType(element.tagName.toLowerCase());
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed that because of this second usage, this function doesn't get inlined into the reconciler. We shouldn't use this again here. In fact, we probably shouldn't even have this isHostSingletonInstance file. Just inline all of it into getNextHydratable.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rewrote and eliminated this function

return fiber.tag === HostComponent && fiber.memoizedProps.hidden === true;
return (
(fiber.tag === HostComponent ||
(enableHostSingletons ? fiber.tag === HostSingleton : false)) &&
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feature is going to be removed but it doesn't really make sense for HostSingletons anyway so you can skip this case.

if (!htmlElement) {
htmlElement = ownerDocument.appendChild(
ownerDocument.createElement('html'),
);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason we shouldn't assume these exists and just error if they don't?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed for errors

Comment on lines +1608 to +1614
function updateHostSingleton(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
) {
pushHostContext(workInProgress);

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the complete work phase HostSingletons hit the HostComponent path on update renders. I was going to try to do something similar here but the interaction between single text children and the placement of child fibers beneath is wonky. For now I'll leave it like this which may actually be desirable

@gnoff gnoff marked this pull request as ready for review October 7, 2022 06:38
Comment on lines +317 to +323
(!enableHostSingletons || tag !== 'body') &&
(tag !== 'textarea' || nextProp !== '');
if (canSetTextContent) {
setTextContent(domElement, nextProp);
}
} else if (typeof nextProp === 'number') {
setTextContent(domElement, '' + nextProp);
const canSetTextContent = !enableHostSingletons || tag !== 'body';
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI, I'm not sure this is the best way to handle the situation with single-child-as-text but what's going on here is

  1. HostSingletons in beginWork never opt for single-child-as-text so they will always have a child fiber.
  2. When a singleton is acquired on mount we call setInitialProperties which assumes that if there is a single-child-as-text there won't be a child fiber.
  3. This is a subtle leak of internals into the host config but the body exclusion is because this is the only singleton that realistically can have a single-child-as-text and we don't want to set the text content here otherwise we'll end up with two copies (once for this insert, and once when the child fiber appends)

as an alternative I could always resetTextContent in the reconciler since the reconciler knows that there should never be this shortcut
OR I could support single-child-as-text for singletons

@@ -983,7 +983,6 @@ describe('ReactDOMFizzServer', () => {
});

// @gate enableSuspenseList

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left over?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I guess, but shouldn't we get rid of the extra line? seems like the gate comment is usually just above the test

@gnoff gnoff merged commit 2cf4352 into facebook:main Oct 11, 2022
@gnoff gnoff deleted the host-singleton branch October 11, 2022 15:42
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Oct 17, 2022
Summary:
- **[9fb581c7c](facebook/react@9fb581c7c )**: Refactor: merge duplicate imports ([#25489](facebook/react#25489)) //<c0dedance>//
- **[bc358362a](facebook/react@bc358362a )**: [Flight] Improve Error Messages when Invalid Object is Passed to Client/Host Components ([#25492](facebook/react#25492)) //<Sebastian Markbåge>//
- **[780eacd40](facebook/react@780eacd40 )**: Flow upgrade to 0.190 ([#25483](facebook/react#25483)) //<Jan Kassens>//
- **[54f0e0f73](facebook/react@54f0e0f73 )**: Scaffolding for react-dom/unstable_external-server-runtime ([#25482](facebook/react#25482)) //<Andrew Clark>//
- **[0eaca3756](facebook/react@0eaca3756 )**: Add script to generate inline Fizz runtime ([#25481](facebook/react#25481)) //<Andrew Clark>//
- **[69c7246d9](facebook/react@69c7246d9 )**: Initialize useMemoCache with sentinel values ([#25465](facebook/react#25465)) //<Joseph Savona>//
- **[3b814327e](facebook/react@3b814327e )**: Allow Async Functions to be used in Server Components ([#25479](facebook/react#25479)) //<Sebastian Markbåge>//
- **[a6bf46689](facebook/react@a6bf46689 )**: Extract Fizz instruction set to build macro ([#25457](facebook/react#25457)) //<Andrew Clark>//
- **[ea5bc6bac](facebook/react@ea5bc6bac )**: [React Native FB] dynamic feature flag for ref access warning ([#25471](facebook/react#25471)) //<Jan Kassens>//
- **[08d035bc8](facebook/react@08d035bc8 )**: Remove Shallow Renderer Tests ([#25475](facebook/react#25475)) //<Sebastian Markbåge>//
- **[a8c16a004](facebook/react@a8c16a004 )**: Split Cache into its own Dispatcher ([#25474](facebook/react#25474)) //<Sebastian Markbåge>//
- **[2cf4352e1](facebook/react@2cf4352e1 )**: Implement HostSingleton Fiber type ([#25426](facebook/react#25426)) //<Josh Story>//
- **[aa9988e5e](facebook/react@aa9988e5e )**: Server render fork for react-dom ([#25436](facebook/react#25436)) //<Josh Story>//
- **[513417d69](facebook/react@513417d69 )**: Return lastNonHostInstance in getInspectorDataForInstance for devtools ([#25441](facebook/react#25441)) //<Tianyu Yao>//
- **[5d60a0b84](facebook/react@5d60a0b84 )**: Bugfix: LegacyHidden shouldn't defer effects ([#25442](facebook/react#25442)) //<Andrew Clark>//
- **[618388bc3](facebook/react@618388bc3 )**: [Float] Support script preloads ([#25432](facebook/react#25432)) //<Josh Story>//
- **[2872a26e1](facebook/react@2872a26e1 )**: track resources in different roots separately ([#25388](facebook/react#25388)) //<Josh Story>//
- **[ea04a486a](facebook/react@ea04a486a )**: Flow: remove unused suppressions ([#25424](facebook/react#25424)) //<Jan Kassens>//
- **[9813edef2](facebook/react@9813edef2 )**: Flow upgrade to 0.188 //<Jan Kassens>//
- **[3b6826ed9](facebook/react@3b6826ed9 )**: Flow: inference_mode=constrain_writes //<Jan Kassens>//
- **[aed33a49c](facebook/react@aed33a49c )**: Flow upgrade to 0.185 //<Jan Kassens>//
- **[f02a5f5c7](facebook/react@f02a5f5c7 )**: Flow upgrade to 0.182 //<Jan Kassens>//
- **[72593f008](facebook/react@72593f008 )**: Flow upgrade to 0.176 //<Jan Kassens>//
- **[46d40f306](facebook/react@46d40f306 )**: Flow upgrade to 0.175 //<Jan Kassens>//
- **[1089faf0d](facebook/react@1089faf0d )**: Flow: run codemod to remove existential type //<Jan Kassens>//
- **[3fd9bd8e7](facebook/react@3fd9bd8e7 )**: Add RulesOfHooks support for `use` //<Lauren Tan>//
- **[338e6a967](facebook/react@338e6a967 )**: Flow upgrade to 0.155 //<Jan Kassens>//
- **[8bc95bb3c](facebook/react@8bc95bb3c )**: Flow upgrade to 0.154 //<Jan Kassens>//
- **[9f8a98a39](facebook/react@9f8a98a39 )**: Flow upgrade to 0.153 //<Jan Kassens>//
- **[64fe791be](facebook/react@64fe791be )**: Flow upgrade to 0.146 //<Jan Kassens>//
- **[d3c6c16a0](facebook/react@d3c6c16a0 )**: Flow upgrade to 0.145 //<Jan Kassens>//
- **[00a2f8150](facebook/react@00a2f8150 )**: Flow upgrade to 0.143 //<Jan Kassens>//
- **[0a3072278](facebook/react@0a3072278 )**: Flow: complete types first migration ([#25389](facebook/react#25389)) //<Jan Kassens>//
- **[bcc05671f](facebook/react@bcc05671f )**: Flow: types first in shared ([#25343](facebook/react#25343)) //<Jan Kassens>//
- **[b1f34aa30](facebook/react@b1f34aa30 )**: Flow: types first in react-native-renderer ([#25363](facebook/react#25363)) //<Jan Kassens>//
- **[9143864ae](facebook/react@9143864ae )**: Flow: well formed exports for smaller packages ([#25361](facebook/react#25361)) //<Jan Kassens>//
- **[21a851e03](facebook/react@21a851e03 )**: Fix devtools typos and grammar ([#24587](facebook/react#24587)) //<Alexandru Tasica>//
- **[cfafeb685](facebook/react@cfafeb685 )**: Remove extra space in Wedge.js ([#24611](facebook/react#24611)) //<Kerim Büyükakyüz>//
- **[9c3de25e1](facebook/react@9c3de25e1 )**: Flow: types first in reconciler ([#25362](facebook/react#25362)) //<Jan Kassens>//
- **[7b25b961d](facebook/react@7b25b961d )**: [Fizz/Float] Float for stylesheet resources ([#25243](facebook/react#25243)) //<Josh Story>//
- **[4c016e7aa](facebook/react@4c016e7aa )**: Refactor: use  property shorthand ([#25366](facebook/react#25366)) //<zhangrenyang>//
- **[06066c1a5](facebook/react@06066c1a5 )**: Make RulesOfHooks-test more consistent with ExhaustiveDeps-test //<Lauren Tan>//
- **[49ae0fad8](facebook/react@49ae0fad8 )**: Fix RulesOfHooks test case indentation //<Lauren Tan>//
- **[abbbdf4ce](facebook/react@abbbdf4ce )**: Put modern StrictMode behind a feature flag ([#25365](facebook/react#25365)) //<Samuel Susla>//
- **[434110390](facebook/react@434110390 )**: ReactHooks.js - delete emptyObject ([#25031](facebook/react#25031)) //<Igor Berlenko>//
- **[31400ce29](facebook/react@31400ce29 )**: Refactor: merge duplicate imports ([#25364](facebook/react#25364)) //<jerry-lllman>//
- **[3517bd9f7](facebook/react@3517bd9f7 )**: Refactor useEvent ([#25336](facebook/react#25336)) //<Lauren Tan>//
- **[6cf06a929](facebook/react@6cf06a929 )**: Remove outdated comments. ([#24464](facebook/react#24464)) //<zhangenming>//
- **[20a257c25](facebook/react@20a257c25 )**: Refactor: more word doubles removed ([#25352](facebook/react#25352)) //<Vic Graf>//
- **[8cadcffd5](facebook/react@8cadcffd5 )**: Fix typo: reconcilation -> reconciliation ([#25355](facebook/react#25355)) //<zhangrenyang>//
- **[ebbe599a2](facebook/react@ebbe599a2 )**: Fix EventListener fork ([#25347](facebook/react#25347)) //<Sebastian Markbåge>//
- **[97d75c9c8](facebook/react@97d75c9c8 )**: Move react-dom implementation files to react-dom-bindings ([#25345](facebook/react#25345)) //<Sebastian Markbåge>//
- **[3de926449](facebook/react@3de926449 )**: [Fizz] experimental_useEvent ([#25325](facebook/react#25325)) //<dan>//
- **[5b59dd640](facebook/react@5b59dd640 )**: Fix duplicate words tests ([#25333](facebook/react#25333)) //<Vic Graf>//
- **[cb5084d1c](facebook/react@cb5084d1c )**: [ESLint] Check useEvent references instead ([#25319](facebook/react#25319)) //<Lauren Tan>//
- **[c89a83695](facebook/react@c89a83695 )**: Update RulesOfHooks with useEvent rules ([#25285](facebook/react#25285)) //<Lauren Tan>//
- **[efc6a08e9](facebook/react@efc6a08e9 )**: [Flight] Implement error digests for Flight runtime and expose errorInfo in getDerivedStateFromError ([#25302](facebook/react#25302)) //<Josh Story>//
- **[c1d414d75](facebook/react@c1d414d75 )**: Add ref to Offscreen component ([#25254](facebook/react#25254)) //<Samuel Susla>//
- **[135e33c95](facebook/react@135e33c95 )**: Flow: typing of Scheduler ([#25317](facebook/react#25317)) //<Jan Kassens>//
- **[cc8cb145f](facebook/react@cc8cb145f )**: Flow: add some missing types in react-reconciler ([#25316](facebook/react#25316)) //<Jan Kassens>//
- **[112d0498c](facebook/react@112d0498c )**: [Fizz] Move digest from errorInfo to Error instance ([#25313](facebook/react#25313)) //<Josh Story>//
- **[d1bb1c586](facebook/react@d1bb1c586 )**: Fix memory leak after repeated setState bailouts ([#25309](facebook/react#25309)) //<Andrew Clark>//

Changelog:
[General][Changed] - React Native sync for revisions 0cac4d5...9fb581c

jest_e2e[run_all_tests]

Reviewed By: yungsters

Differential Revision: D40383219

fbshipit-source-id: dc2a44bd05df041e0c7f2e1060640b1d2c372187
mondaychen added a commit that referenced this pull request Nov 7, 2022
## Summary

This is to support two new reconciler work tags `HostSingleton` and
`HostResource` introduced in PRs #25243 #25426. The behavior is
described below.
I also renamed an option in components settings from an internal concept
"host" to more understood "dom nodes"

## How did you test this change?

Tested on the latest Vercel playground app
https://github.com/vercel/app-playground/

Before the change, devtools cannot show correct display name for these
new elements. Also, some unnecessary internal details are exposed to
users.
<img width="1395" alt="image"
src="https://user-images.githubusercontent.com/1001890/199578181-c4e4ea74-baa1-4507-83d0-91a62ad7de5f.png">

After the change, the display names are correctly shown and the "state"
would always be hidden in the detail view.
<img width="1417" alt="image"
src="https://user-images.githubusercontent.com/1001890/199578442-adc1951d-7d5b-4b84-ad64-85bcf7a8ebcc.png">

These elements will also be hidden just like other native dom elements
(e.g. `<div>`)
<img width="836" alt="image"
src="https://user-images.githubusercontent.com/1001890/199578598-2dfacf64-ddc9-42b5-a246-dd0b09f629af.png">
mofeiZ pushed a commit to mofeiZ/react that referenced this pull request Nov 17, 2022
## Summary

This is to support two new reconciler work tags `HostSingleton` and
`HostResource` introduced in PRs facebook#25243 facebook#25426. The behavior is
described below.
I also renamed an option in components settings from an internal concept
"host" to more understood "dom nodes"

## How did you test this change?

Tested on the latest Vercel playground app
https://github.com/vercel/app-playground/

Before the change, devtools cannot show correct display name for these
new elements. Also, some unnecessary internal details are exposed to
users.
<img width="1395" alt="image"
src="https://user-images.githubusercontent.com/1001890/199578181-c4e4ea74-baa1-4507-83d0-91a62ad7de5f.png">

After the change, the display names are correctly shown and the "state"
would always be hidden in the detail view.
<img width="1417" alt="image"
src="https://user-images.githubusercontent.com/1001890/199578442-adc1951d-7d5b-4b84-ad64-85bcf7a8ebcc.png">

These elements will also be hidden just like other native dom elements
(e.g. `<div>`)
<img width="836" alt="image"
src="https://user-images.githubusercontent.com/1001890/199578598-2dfacf64-ddc9-42b5-a246-dd0b09f629af.png">
rickhanlonii pushed a commit that referenced this pull request Dec 3, 2022
## Summary

This is to support two new reconciler work tags `HostSingleton` and
`HostResource` introduced in PRs #25243 #25426. The behavior is
described below.
I also renamed an option in components settings from an internal concept
"host" to more understood "dom nodes"

## How did you test this change?

Tested on the latest Vercel playground app
https://github.com/vercel/app-playground/

Before the change, devtools cannot show correct display name for these
new elements. Also, some unnecessary internal details are exposed to
users.
<img width="1395" alt="image"
src="https://user-images.githubusercontent.com/1001890/199578181-c4e4ea74-baa1-4507-83d0-91a62ad7de5f.png">

After the change, the display names are correctly shown and the "state"
would always be hidden in the detail view.
<img width="1417" alt="image"
src="https://user-images.githubusercontent.com/1001890/199578442-adc1951d-7d5b-4b84-ad64-85bcf7a8ebcc.png">

These elements will also be hidden just like other native dom elements
(e.g. `<div>`)
<img width="836" alt="image"
src="https://user-images.githubusercontent.com/1001890/199578598-2dfacf64-ddc9-42b5-a246-dd0b09f629af.png">
OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this pull request May 22, 2023
Summary:
- **[9fb581c7c](facebook/react@9fb581c7c )**: Refactor: merge duplicate imports ([facebook#25489](facebook/react#25489)) //<c0dedance>//
- **[bc358362a](facebook/react@bc358362a )**: [Flight] Improve Error Messages when Invalid Object is Passed to Client/Host Components ([facebook#25492](facebook/react#25492)) //<Sebastian Markbåge>//
- **[780eacd40](facebook/react@780eacd40 )**: Flow upgrade to 0.190 ([facebook#25483](facebook/react#25483)) //<Jan Kassens>//
- **[54f0e0f73](facebook/react@54f0e0f73 )**: Scaffolding for react-dom/unstable_external-server-runtime ([facebook#25482](facebook/react#25482)) //<Andrew Clark>//
- **[0eaca3756](facebook/react@0eaca3756 )**: Add script to generate inline Fizz runtime ([facebook#25481](facebook/react#25481)) //<Andrew Clark>//
- **[69c7246d9](facebook/react@69c7246d9 )**: Initialize useMemoCache with sentinel values ([facebook#25465](facebook/react#25465)) //<Joseph Savona>//
- **[3b814327e](facebook/react@3b814327e )**: Allow Async Functions to be used in Server Components ([facebook#25479](facebook/react#25479)) //<Sebastian Markbåge>//
- **[a6bf46689](facebook/react@a6bf46689 )**: Extract Fizz instruction set to build macro ([facebook#25457](facebook/react#25457)) //<Andrew Clark>//
- **[ea5bc6bac](facebook/react@ea5bc6bac )**: [React Native FB] dynamic feature flag for ref access warning ([facebook#25471](facebook/react#25471)) //<Jan Kassens>//
- **[08d035bc8](facebook/react@08d035bc8 )**: Remove Shallow Renderer Tests ([facebook#25475](facebook/react#25475)) //<Sebastian Markbåge>//
- **[a8c16a004](facebook/react@a8c16a004 )**: Split Cache into its own Dispatcher ([facebook#25474](facebook/react#25474)) //<Sebastian Markbåge>//
- **[2cf4352e1](facebook/react@2cf4352e1 )**: Implement HostSingleton Fiber type ([facebook#25426](facebook/react#25426)) //<Josh Story>//
- **[aa9988e5e](facebook/react@aa9988e5e )**: Server render fork for react-dom ([facebook#25436](facebook/react#25436)) //<Josh Story>//
- **[513417d69](facebook/react@513417d69 )**: Return lastNonHostInstance in getInspectorDataForInstance for devtools ([facebook#25441](facebook/react#25441)) //<Tianyu Yao>//
- **[5d60a0b84](facebook/react@5d60a0b84 )**: Bugfix: LegacyHidden shouldn't defer effects ([facebook#25442](facebook/react#25442)) //<Andrew Clark>//
- **[618388bc3](facebook/react@618388bc3 )**: [Float] Support script preloads ([facebook#25432](facebook/react#25432)) //<Josh Story>//
- **[2872a26e1](facebook/react@2872a26e1 )**: track resources in different roots separately ([facebook#25388](facebook/react#25388)) //<Josh Story>//
- **[ea04a486a](facebook/react@ea04a486a )**: Flow: remove unused suppressions ([facebook#25424](facebook/react#25424)) //<Jan Kassens>//
- **[9813edef2](facebook/react@9813edef2 )**: Flow upgrade to 0.188 //<Jan Kassens>//
- **[3b6826ed9](facebook/react@3b6826ed9 )**: Flow: inference_mode=constrain_writes //<Jan Kassens>//
- **[aed33a49c](facebook/react@aed33a49c )**: Flow upgrade to 0.185 //<Jan Kassens>//
- **[f02a5f5c7](facebook/react@f02a5f5c7 )**: Flow upgrade to 0.182 //<Jan Kassens>//
- **[72593f008](facebook/react@72593f008 )**: Flow upgrade to 0.176 //<Jan Kassens>//
- **[46d40f306](facebook/react@46d40f306 )**: Flow upgrade to 0.175 //<Jan Kassens>//
- **[1089faf0d](facebook/react@1089faf0d )**: Flow: run codemod to remove existential type //<Jan Kassens>//
- **[3fd9bd8e7](facebook/react@3fd9bd8e7 )**: Add RulesOfHooks support for `use` //<Lauren Tan>//
- **[338e6a967](facebook/react@338e6a967 )**: Flow upgrade to 0.155 //<Jan Kassens>//
- **[8bc95bb3c](facebook/react@8bc95bb3c )**: Flow upgrade to 0.154 //<Jan Kassens>//
- **[9f8a98a39](facebook/react@9f8a98a39 )**: Flow upgrade to 0.153 //<Jan Kassens>//
- **[64fe791be](facebook/react@64fe791be )**: Flow upgrade to 0.146 //<Jan Kassens>//
- **[d3c6c16a0](facebook/react@d3c6c16a0 )**: Flow upgrade to 0.145 //<Jan Kassens>//
- **[00a2f8150](facebook/react@00a2f8150 )**: Flow upgrade to 0.143 //<Jan Kassens>//
- **[0a3072278](facebook/react@0a3072278 )**: Flow: complete types first migration ([facebook#25389](facebook/react#25389)) //<Jan Kassens>//
- **[bcc05671f](facebook/react@bcc05671f )**: Flow: types first in shared ([facebook#25343](facebook/react#25343)) //<Jan Kassens>//
- **[b1f34aa30](facebook/react@b1f34aa30 )**: Flow: types first in react-native-renderer ([facebook#25363](facebook/react#25363)) //<Jan Kassens>//
- **[9143864ae](facebook/react@9143864ae )**: Flow: well formed exports for smaller packages ([facebook#25361](facebook/react#25361)) //<Jan Kassens>//
- **[21a851e03](facebook/react@21a851e03 )**: Fix devtools typos and grammar ([facebook#24587](facebook/react#24587)) //<Alexandru Tasica>//
- **[cfafeb685](facebook/react@cfafeb685 )**: Remove extra space in Wedge.js ([facebook#24611](facebook/react#24611)) //<Kerim Büyükakyüz>//
- **[9c3de25e1](facebook/react@9c3de25e1 )**: Flow: types first in reconciler ([facebook#25362](facebook/react#25362)) //<Jan Kassens>//
- **[7b25b961d](facebook/react@7b25b961d )**: [Fizz/Float] Float for stylesheet resources ([facebook#25243](facebook/react#25243)) //<Josh Story>//
- **[4c016e7aa](facebook/react@4c016e7aa )**: Refactor: use  property shorthand ([facebook#25366](facebook/react#25366)) //<zhangrenyang>//
- **[06066c1a5](facebook/react@06066c1a5 )**: Make RulesOfHooks-test more consistent with ExhaustiveDeps-test //<Lauren Tan>//
- **[49ae0fad8](facebook/react@49ae0fad8 )**: Fix RulesOfHooks test case indentation //<Lauren Tan>//
- **[abbbdf4ce](facebook/react@abbbdf4ce )**: Put modern StrictMode behind a feature flag ([facebook#25365](facebook/react#25365)) //<Samuel Susla>//
- **[434110390](facebook/react@434110390 )**: ReactHooks.js - delete emptyObject ([facebook#25031](facebook/react#25031)) //<Igor Berlenko>//
- **[31400ce29](facebook/react@31400ce29 )**: Refactor: merge duplicate imports ([facebook#25364](facebook/react#25364)) //<jerry-lllman>//
- **[3517bd9f7](facebook/react@3517bd9f7 )**: Refactor useEvent ([facebook#25336](facebook/react#25336)) //<Lauren Tan>//
- **[6cf06a929](facebook/react@6cf06a929 )**: Remove outdated comments. ([facebook#24464](facebook/react#24464)) //<zhangenming>//
- **[20a257c25](facebook/react@20a257c25 )**: Refactor: more word doubles removed ([facebook#25352](facebook/react#25352)) //<Vic Graf>//
- **[8cadcffd5](facebook/react@8cadcffd5 )**: Fix typo: reconcilation -> reconciliation ([facebook#25355](facebook/react#25355)) //<zhangrenyang>//
- **[ebbe599a2](facebook/react@ebbe599a2 )**: Fix EventListener fork ([facebook#25347](facebook/react#25347)) //<Sebastian Markbåge>//
- **[97d75c9c8](facebook/react@97d75c9c8 )**: Move react-dom implementation files to react-dom-bindings ([facebook#25345](facebook/react#25345)) //<Sebastian Markbåge>//
- **[3de926449](facebook/react@3de926449 )**: [Fizz] experimental_useEvent ([facebook#25325](facebook/react#25325)) //<dan>//
- **[5b59dd640](facebook/react@5b59dd640 )**: Fix duplicate words tests ([facebook#25333](facebook/react#25333)) //<Vic Graf>//
- **[cb5084d1c](facebook/react@cb5084d1c )**: [ESLint] Check useEvent references instead ([facebook#25319](facebook/react#25319)) //<Lauren Tan>//
- **[c89a83695](facebook/react@c89a83695 )**: Update RulesOfHooks with useEvent rules ([facebook#25285](facebook/react#25285)) //<Lauren Tan>//
- **[efc6a08e9](facebook/react@efc6a08e9 )**: [Flight] Implement error digests for Flight runtime and expose errorInfo in getDerivedStateFromError ([facebook#25302](facebook/react#25302)) //<Josh Story>//
- **[c1d414d75](facebook/react@c1d414d75 )**: Add ref to Offscreen component ([facebook#25254](facebook/react#25254)) //<Samuel Susla>//
- **[135e33c95](facebook/react@135e33c95 )**: Flow: typing of Scheduler ([facebook#25317](facebook/react#25317)) //<Jan Kassens>//
- **[cc8cb145f](facebook/react@cc8cb145f )**: Flow: add some missing types in react-reconciler ([facebook#25316](facebook/react#25316)) //<Jan Kassens>//
- **[112d0498c](facebook/react@112d0498c )**: [Fizz] Move digest from errorInfo to Error instance ([facebook#25313](facebook/react#25313)) //<Josh Story>//
- **[d1bb1c586](facebook/react@d1bb1c586 )**: Fix memory leak after repeated setState bailouts ([facebook#25309](facebook/react#25309)) //<Andrew Clark>//

Changelog:
[General][Changed] - React Native sync for revisions 0cac4d5...9fb581c

jest_e2e[run_all_tests]

Reviewed By: yungsters

Differential Revision: D40383219

fbshipit-source-id: dc2a44bd05df041e0c7f2e1060640b1d2c372187
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants