Feedback: fork writeStyleResource for different contexts

Author: mofeiZ

packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js

@@ -2543,18 +2543,10 @@ export function writeCompletedBoundaryInstruction(
     if (scriptFormat) {
       writeChunk(destination, completeBoundaryScript3a);
       // boundaryResources encodes an array literal
-      writeStyleResourceDependencies(
-        destination,
-        boundaryResources,
-        scriptFormat ? JavascriptEmbedding : HTMLAttributeEmbedding,
-      );
+      writeStyleResourceDependenciesInJS(destination, boundaryResources);
     } else {
       writeChunk(destination, completeBoundaryData3aStart);
-      writeStyleResourceDependencies(
-        destination,
-        boundaryResources,
-        scriptFormat ? JavascriptEmbedding : HTMLAttributeEmbedding,
-      );
+      writeStyleResourceDependenciesInAttr(destination, boundaryResources);
       writeChunk(destination, completeBoundaryData3aEnd);
     }
   } else {
@@ -2996,40 +2988,201 @@ const arraySubsequentOpenBracket = stringToPrecomputedChunk(',[');
 const arrayInterstitial = stringToPrecomputedChunk(',');
 const arrayCloseBracket = stringToPrecomputedChunk(']');
 
-type EmbeddingContext = 0 | 1;
-const HTMLAttributeEmbedding: EmbeddingContext = 0;
-const JavascriptEmbedding: EmbeddingContext = 1;
+// This function writes a 2D array of strings to be embedded in javascript.
+// E.g.
+//  [["JS_escaped_string1", "JS_escaped_string2"]]
+function writeStyleResourceDependenciesInJS(
+  destination: Destination,
+  boundaryResources: BoundaryResources,
+): void {
+  writeChunk(destination, arrayFirstOpenBracket);
 
-function writeStyleResourceObject(
+  let nextArrayOpenBrackChunk = arrayFirstOpenBracket;
+  boundaryResources.forEach(resource => {
+    if (resource.inShell) {
+      // We can elide this dependency because it was flushed in the shell and
+      // should be ready before content is shown on the client
+    } else if (resource.flushed) {
+      writeChunk(destination, nextArrayOpenBrackChunk);
+      writeStyleResourceDependencyHrefOnlyInJS(destination, resource.href);
+      writeChunk(destination, arrayCloseBracket);
+      nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
+    } else {
+      writeChunk(destination, nextArrayOpenBrackChunk);
+      writeStyleResourceDependencyInJS(
+        destination,
+        resource.href,
+        resource.precedence,
+        resource.props,
+      );
+      writeChunk(destination, arrayCloseBracket);
+      nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
+
+      resource.flushed = true;
+      resource.hint.flushed = true;
+    }
+  });
+  writeChunk(destination, arrayCloseBracket);
+}
+
+/* Helper functions */
+function writeStyleResourceDependencyHrefOnlyInJS(
   destination: Destination,
-  str: string,
-  context: EmbeddingContext,
+  href: string,
 ) {
-  if (context === JavascriptEmbedding) {
-    // write "script_escaped_string", since this is writing to a script tag
-    // and will be evaluated as a string literal inside an array literal
-    writeChunk(
-      destination,
-      stringToChunk(escapeJSObjectForInstructionScripts(str)),
-    );
-  } else if (context === HTMLAttributeEmbedding) {
-    // write "JSON_escaped_string" here, since this is writing
-    // to an attribute string and will be parsed manually via JSON.parse
-    writeChunk(
-      destination,
-      stringToChunk(escapeTextForBrowser(JSON.stringify(str))),
-    );
-  } else {
-    throw new Error(
-      'Unknown embedding context type when writing style resources. This is a bug in React.',
-    );
+  // We should actually enforce this earlier when the resource is created but for
+  // now we make sure we are actually dealing with a string here.
+  if (__DEV__) {
+    checkAttributeStringCoercion(href, 'href');
   }
+  const coercedHref = '' + (href: any);
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(coercedHref)),
+  );
 }
 
-function writeStyleResourceDependencies(
+function writeStyleResourceDependencyInJS(
+  destination: Destination,
+  href: string,
+  precedence: string,
+  props: Object,
+) {
+  if (__DEV__) {
+    checkAttributeStringCoercion(href, 'href');
+  }
+  const coercedHref = '' + (href: any);
+  sanitizeURL(coercedHref);
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(coercedHref)),
+  );
+
+  if (__DEV__) {
+    checkAttributeStringCoercion(precedence, 'precedence');
+  }
+  const coercedPrecedence = '' + (precedence: any);
+  writeChunk(destination, arrayInterstitial);
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(coercedPrecedence)),
+  );
+
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'href':
+        case 'rel':
+        case 'precedence':
+        case 'data-precedence': {
+          break;
+        }
+        case 'children':
+        case 'dangerouslySetInnerHTML':
+          throw new Error(
+            `${'link'} is a self-closing tag and must neither have \`children\` nor ` +
+              'use `dangerouslySetInnerHTML`.',
+          );
+        // eslint-disable-next-line-no-fallthrough
+        default:
+          writeStyleResourceAttributeInJS(destination, propKey, propValue);
+          break;
+      }
+    }
+  }
+  return null;
+}
+
+function writeStyleResourceAttributeInJS(
+  destination: Destination,
+  name: string,
+  value: string | boolean | number | Function | Object, // not null or undefined
+): void {
+  let attributeName = name.toLowerCase();
+  let attributeValue;
+  switch (typeof value) {
+    case 'function':
+    case 'symbol':
+      return;
+  }
+
+  switch (name) {
+    // Reserved names
+    case 'innerHTML':
+    case 'dangerouslySetInnerHTML':
+    case 'suppressContentEditableWarning':
+    case 'suppressHydrationWarning':
+    case 'style':
+      // Ignored
+      return;
+
+    // Attribute renames
+    case 'className':
+      attributeName = 'class';
+      break;
+
+    // Booleans
+    case 'hidden':
+      if (value === false) {
+        return;
+      }
+      attributeValue = '';
+      break;
+
+    // Santized URLs
+    case 'src':
+    case 'href': {
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, attributeName);
+      }
+      attributeValue = '' + (value: any);
+      sanitizeURL(attributeValue);
+      break;
+    }
+    default: {
+      if (!isAttributeNameSafe(name)) {
+        return;
+      }
+    }
+  }
+
+  if (
+    // shouldIgnoreAttribute
+    // We have already filtered out null/undefined and reserved words.
+    name.length > 2 &&
+    (name[0] === 'o' || name[0] === 'O') &&
+    (name[1] === 'n' || name[1] === 'N')
+  ) {
+    return;
+  }
+
+  if (__DEV__) {
+    checkAttributeStringCoercion(value, attributeName);
+  }
+  attributeValue = '' + (value: any);
+  writeChunk(destination, arrayInterstitial);
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(attributeName)),
+  );
+  writeChunk(destination, arrayInterstitial);
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(attributeValue)),
+  );
+}
+
+// This function writes a 2D array of strings to be embedded in an attribute
+// value and read with JSON.parse in ReactDOMServerExternalRuntime.js
+// E.g.
+//  [["JSON_escaped_string1", "JSON_escaped_string2"]]
+function writeStyleResourceDependenciesInAttr(
   destination: Destination,
   boundaryResources: BoundaryResources,
-  context: EmbeddingContext,
 ): void {
   writeChunk(destination, arrayFirstOpenBracket);
 
@@ -3040,17 +3193,16 @@ function writeStyleResourceDependencies(
       // should be ready before content is shown on the client
     } else if (resource.flushed) {
       writeChunk(destination, nextArrayOpenBrackChunk);
-      writeStyleResourceDependencyHrefOnly(destination, resource.href, context);
+      writeStyleResourceDependencyHrefOnlyInAttr(destination, resource.href);
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
     } else {
       writeChunk(destination, nextArrayOpenBrackChunk);
-      writeStyleResourceDependency(
+      writeStyleResourceDependencyInAttr(
         destination,
         resource.href,
         resource.precedence,
         resource.props,
-        context,
       );
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
@@ -3062,41 +3214,48 @@ function writeStyleResourceDependencies(
   writeChunk(destination, arrayCloseBracket);
 }
 
-function writeStyleResourceDependencyHrefOnly(
+/* Helper functions */
+function writeStyleResourceDependencyHrefOnlyInAttr(
   destination: Destination,
   href: string,
-  context: EmbeddingContext,
 ) {
   // We should actually enforce this earlier when the resource is created but for
   // now we make sure we are actually dealing with a string here.
   if (__DEV__) {
     checkAttributeStringCoercion(href, 'href');
   }
   const coercedHref = '' + (href: any);
-  writeStyleResourceObject(destination, coercedHref, context);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(coercedHref))),
+  );
 }
 
-function writeStyleResourceDependency(
+function writeStyleResourceDependencyInAttr(
   destination: Destination,
   href: string,
   precedence: string,
   props: Object,
-  context: EmbeddingContext,
 ) {
   if (__DEV__) {
     checkAttributeStringCoercion(href, 'href');
   }
   const coercedHref = '' + (href: any);
   sanitizeURL(coercedHref);
-  writeStyleResourceObject(destination, coercedHref, context);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(coercedHref))),
+  );
 
   if (__DEV__) {
     checkAttributeStringCoercion(precedence, 'precedence');
   }
   const coercedPrecedence = '' + (precedence: any);
   writeChunk(destination, arrayInterstitial);
-
-  writeStyleResourceObject(destination, coercedPrecedence, context);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(coercedPrecedence))),
+  );
 
   for (const propKey in props) {
     if (hasOwnProperty.call(props, propKey)) {
@@ -3119,19 +3278,18 @@ function writeStyleResourceDependency(
           );
         // eslint-disable-next-line-no-fallthrough
         default:
-          writeStyleResourceAttribute(destination, propKey, propValue, context);
+          writeStyleResourceAttributeInAttr(destination, propKey, propValue);
           break;
       }
     }
   }
   return null;
 }
 
-function writeStyleResourceAttribute(
+function writeStyleResourceAttributeInAttr(
   destination: Destination,
   name: string,
   value: string | boolean | number | Function | Object, // not null or undefined
-  context: EmbeddingContext,
 ): void {
   let attributeName = name.toLowerCase();
   let attributeValue;
@@ -3196,7 +3354,13 @@ function writeStyleResourceAttribute(
   }
   attributeValue = '' + (value: any);
   writeChunk(destination, arrayInterstitial);
-  writeStyleResourceObject(destination, attributeName, context);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(attributeName))),
+  );
   writeChunk(destination, arrayInterstitial);
-  writeStyleResourceObject(destination, attributeValue, context);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(attributeValue))),
+  );
 }