[Float] support title tags as Resources (#25508)

Adds a category of Resources of type `head` which will be used to track the tags that go into the <head> Currently only implements for `<title>`. titles are keyed off their textContent so each time the title changes a new resource will be created. Currently insertion is done by prepending in the <head>. The argument here is that the newest title should "win" if there are multiple rendered. This also helps when a navigation or update causes a server rendered title to hang around but it is not the most recent one.
facebook · Dec 3, 2022 · 84ebdc2 · 84ebdc2
1 parent 214b061
commit 84ebdc2
Show file tree

Hide file tree

Showing 12 changed files with 801 additions and 112 deletions.
diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js b/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js
@@ -7,11 +7,7 @@
  * @flow
  */
 
-import type {
-  FloatRoot,
-  StyleResource,
-  ScriptResource,
-} from './ReactDOMFloatClient';
+import type {FloatRoot, RootResources} from './ReactDOMFloatClient';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {ReactScopeInstance} from 'shared/ReactTypes';
 import type {
@@ -53,6 +49,7 @@ const internalEventHandlersKey = '__reactEvents$' + randomKey;
 const internalEventHandlerListenersKey = '__reactListeners$' + randomKey;
 const internalEventHandlesSetKey = '__reactHandles$' + randomKey;
 const internalRootNodeResourcesKey = '__reactResources$' + randomKey;
+const internalResourceMarker = '__reactMarker$' + randomKey;
 
 export function detachDeletedInstance(node: Instance): void {
   // TODO: This function is only called on host components. I don't think all of
@@ -282,15 +279,22 @@ export function doesTargetHaveEventHandle(
   return eventHandles.has(eventHandle);
 }
 
-export function getResourcesFromRoot(
-  root: FloatRoot,
-): {styles: Map<string, StyleResource>, scripts: Map<string, ScriptResource>} {
+export function getResourcesFromRoot(root: FloatRoot): RootResources {
   let resources = (root: any)[internalRootNodeResourcesKey];
   if (!resources) {
     resources = (root: any)[internalRootNodeResourcesKey] = {
       styles: new Map(),
       scripts: new Map(),
+      head: new Map(),
     };
   }
   return resources;
 }
+
+export function isMarkedResource(node: Node): boolean {
+  return !!(node: any)[internalResourceMarker];
+}
+
+export function markNodeAsResource(node: Node) {
+  (node: any)[internalResourceMarker] = true;
+}