Import maps need to be emitted before any scripts or preloads so the …

…browser can properly locate these resources. This change makes React aware of the concept of import maps and emits them before scripts and modules and their preloads.

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

@@ -139,6 +139,7 @@ export type RenderState = {
   // Hoistable chunks
   charsetChunks: Array<Chunk | PrecomputedChunk>,
   preconnectChunks: Array<Chunk | PrecomputedChunk>,
+  importMapChunks: Array<Chunk | PrecomputedChunk>,
   preloadChunks: Array<Chunk | PrecomputedChunk>,
   hoistableChunks: Array<Chunk | PrecomputedChunk>,
 
@@ -205,7 +206,7 @@ const scriptCrossOrigin = stringToPrecomputedChunk('" crossorigin="');
 const endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
 
 /**
- * This escaping function is designed to work with bootstrapScriptContent only.
+ * This escaping function is designed to work with bootstrapScriptContent and importMap only.
  * because we know we are escaping the entire script. We can avoid for instance
  * escaping html comment string sequences that are valid javascript as well because
  * if there are no sebsequent <script sequences the html parser will never enter
@@ -214,7 +215,7 @@ const endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
  * While untrusted script content should be made safe before using this api it will
  * ensure that the script cannot be early terminated or never terminated state
  */
-function escapeBootstrapScriptContent(scriptText: string) {
+function escapeBootstrapAndImportMapScriptContent(scriptText: string) {
   if (__DEV__) {
     checkHtmlStringCoercion(scriptText);
   }
@@ -237,12 +238,19 @@ export type ExternalRuntimeScript = {
   src: string,
   chunks: Array<Chunk | PrecomputedChunk>,
 };
+
+const importMapScriptStart = stringToPrecomputedChunk(
+  '<script type="importmap">',
+);
+const importMapScriptEnd = stringToPrecomputedChunk('</script>');
+
 // Allows us to keep track of what we've already written so we can refer back to it.
 // if passed externalRuntimeConfig and the enableFizzExternalRuntime feature flag
 // is set, the server will send instructions via data attributes (instead of inline scripts)
 export function createRenderState(
   resumableState: ResumableState,
   nonce: string | void,
+  importMap: {[string]: string} | void,
 ): RenderState {
   const inlineScriptWithNonce =
     nonce === undefined
@@ -251,6 +259,17 @@ export function createRenderState(
           '<script nonce="' + escapeTextForBrowser(nonce) + '">',
         );
   const idPrefix = resumableState.idPrefix;
+  const importMapChunks: Array<Chunk | PrecomputedChunk> = [];
+  if (importMap !== undefined) {
+    const map = importMap;
+    importMapChunks.push(importMapScriptStart);
+    importMapChunks.push(
+      stringToChunk(
+        escapeBootstrapAndImportMapScriptContent(JSON.stringify(map)),
+      ),
+    );
+    importMapChunks.push(importMapScriptEnd);
+  }
   return {
     placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
     segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
@@ -260,6 +279,7 @@ export function createRenderState(
     headChunks: null,
     charsetChunks: [],
     preconnectChunks: [],
+    importMapChunks,
     preloadChunks: [],
     hoistableChunks: [],
     nonce,
@@ -290,7 +310,9 @@ export function createResumableState(
           );
     bootstrapChunks.push(
       inlineScriptWithNonce,
-      stringToChunk(escapeBootstrapScriptContent(bootstrapScriptContent)),
+      stringToChunk(
+        escapeBootstrapAndImportMapScriptContent(bootstrapScriptContent),
+      ),
       endInlineScript,
     );
   }
@@ -4342,6 +4364,12 @@ export function writePreamble(
   // Flush unblocked stylesheets by precedence
   resumableState.precedences.forEach(flushAllStylesInPreamble, destination);
 
+  const importMapChunks = renderState.importMapChunks;
+  for (i = 0; i < importMapChunks.length; i++) {
+    writeChunk(destination, importMapChunks[i]);
+  }
+  importMapChunks.length = 0;
+
   resumableState.bootstrapScripts.forEach(flushResourceInPreamble, destination);
 
   resumableState.scripts.forEach(flushResourceInPreamble, destination);
@@ -4415,6 +4443,11 @@ export function writeHoistables(
   // but we want to kick off preloading as soon as possible
   resumableState.precedences.forEach(preloadLateStyles, destination);
 
+  // We only hoist importmaps that are configured through createResponse and that will
+  // always flush in the preamble. Generally we don't expect people to render them as
+  // tags when using React but if you do they are going to be treated like regular inline
+  // scripts and flush after other hoistables which is problematic
+
   // bootstrap scripts should flush above script priority but these can only flush in the preamble
   // so we elide the code here for performance
 

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

@@ -41,6 +41,7 @@ export type RenderState = {
   headChunks: null | Array<Chunk | PrecomputedChunk>,
   charsetChunks: Array<Chunk | PrecomputedChunk>,
   preconnectChunks: Array<Chunk | PrecomputedChunk>,
+  importMapChunks: Array<Chunk | PrecomputedChunk>,
   preloadChunks: Array<Chunk | PrecomputedChunk>,
   hoistableChunks: Array<Chunk | PrecomputedChunk>,
   boundaryResources: ?BoundaryResources,
@@ -65,6 +66,7 @@ export function createRenderState(
     headChunks: renderState.headChunks,
     charsetChunks: renderState.charsetChunks,
     preconnectChunks: renderState.preconnectChunks,
+    importMapChunks: renderState.importMapChunks,
     preloadChunks: renderState.preloadChunks,
     hoistableChunks: renderState.hoistableChunks,
     boundaryResources: renderState.boundaryResources,

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

@@ -3623,6 +3623,33 @@ describe('ReactDOMFizzServer', () => {
     await waitForAll([]);
   });
 
+  it('takes an importMap option which emits an "importmap" script in the head', async () => {
+    const importMap = {
+      foo: './path/to/foo.js',
+    };
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <head>
+            <script async={true} src="foo" />
+          </head>
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
+        {
+          importMap,
+        },
+      ).pipe(writable);
+    });
+
+    expect(document.head.innerHTML).toBe(
+      '<script type="importmap">' +
+        JSON.stringify(importMap) +
+        '</script><script async="" src="foo"></script>',
+    );
+  });
+
   describe('error escaping', () => {
     it('escapes error hash, message, and component stack values in directly flushed errors (html escaping)', async () => {
       window.__outlet = {};
@@ -3949,7 +3976,7 @@ describe('ReactDOMFizzServer', () => {
     ]);
   });
 
-  describe('bootstrapScriptContent escaping', () => {
+  describe('bootstrapScriptContent and importMap escaping', () => {
     it('the "S" in "</?[Ss]cript" strings are replaced with unicode escaped lowercase s or S depending on case, preserving case sensitivity of nearby characters', async () => {
       window.__test_outlet = '';
       const stringWithScriptsInIt =
@@ -4005,6 +4032,24 @@ describe('ReactDOMFizzServer', () => {
       });
       expect(window.__test_outlet).toBe(1);
     });
+
+    it('escapes </[sS]cirpt> in importMaps', async () => {
+      window.__test_outlet_key = '';
+      window.__test_outlet_value = '';
+      const jsonWithScriptsInIt = {
+        "keypos</script><script>window.__test_outlet_key = 'pwned'</script><script>":
+          'value',
+        key: "valuepos</script><script>window.__test_outlet_value = 'pwned'</script><script>",
+      };
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<div />, {
+          importMap: jsonWithScriptsInIt,
+        });
+        pipe(writable);
+      });
+      expect(window.__test_outlet_key).toBe('');
+      expect(window.__test_outlet_value).toBe('');
+    });
   });
 
   // @gate enableFizzExternalRuntime

packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js

@@ -84,6 +84,10 @@ describe('ReactDOMFizzStatic', () => {
       if (node.nodeName === 'SCRIPT') {
         const script = document.createElement('script');
         script.textContent = node.textContent;
+        for (let i = 0; i < node.attributes.length; i++) {
+          const attribute = node.attributes[i];
+          script.setAttribute(attribute.name, attribute.value);
+        }
         fakeBody.removeChild(node);
         container.appendChild(script);
       } else {
@@ -98,7 +102,7 @@ describe('ReactDOMFizzStatic', () => {
     while (node) {
       if (node.nodeType === 1) {
         if (
-          node.tagName !== 'SCRIPT' &&
+          (node.tagName !== 'SCRIPT' || node.hasAttribute('type')) &&
           node.tagName !== 'TEMPLATE' &&
           node.tagName !== 'template' &&
           !node.hasAttribute('hidden') &&
@@ -237,4 +241,25 @@ describe('ReactDOMFizzStatic', () => {
 
     expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
   });
+
+  // @gate experimental
+  it('should support importMap option', async () => {
+    const importMap = {
+      foo: 'path/to/foo.js',
+    };
+    const result = await ReactDOMFizzStatic.prerenderToNodeStream(
+      <html>
+        <body>hello world</body>
+      </html>,
+      {importMap},
+    );
+
+    await act(async () => {
+      result.prelude.pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual([
+      <script type="importmap">{JSON.stringify(importMap)}</script>,
+      'hello world',
+    ]);
+  });
 });

packages/react-dom/src/server/ReactDOMFizzServerBrowser.js

@@ -38,6 +38,7 @@ type Options = {
   onError?: (error: mixed) => ?string,
   onPostpone?: (reason: string) => void,
   unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: {[string]: string},
 };
 
 type ResumeOptions = {
@@ -101,7 +102,11 @@ function renderToReadableStream(
     const request = createRequest(
       children,
       resumableState,
-      createRenderState(resumableState, options ? options.nonce : undefined),
+      createRenderState(
+        resumableState,
+        options ? options.nonce : undefined,
+        options ? options.importMap : undefined,
+      ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
       options ? options.progressiveChunkSize : undefined,
       options ? options.onError : undefined,
@@ -171,6 +176,7 @@ function resume(
       createRenderState(
         postponedState.resumableState,
         options ? options.nonce : undefined,
+        undefined, // importMap
       ),
       postponedState.rootFormatContext,
       postponedState.progressiveChunkSize,

packages/react-dom/src/server/ReactDOMFizzServerBun.js

@@ -37,6 +37,7 @@ type Options = {
   onError?: (error: mixed) => ?string,
   onPostpone?: (reason: string) => void,
   unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: {[string]: string},
 };
 
 // TODO: Move to sub-classing ReadableStream.
@@ -93,7 +94,11 @@ function renderToReadableStream(
     const request = createRequest(
       children,
       resumableState,
-      createRenderState(resumableState, options ? options.nonce : undefined),
+      createRenderState(
+        resumableState,
+        options ? options.nonce : undefined,
+        options ? options.importMap : undefined,
+      ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
       options ? options.progressiveChunkSize : undefined,
       options ? options.onError : undefined,

packages/react-dom/src/server/ReactDOMFizzServerEdge.js

@@ -38,6 +38,7 @@ type Options = {
   onError?: (error: mixed) => ?string,
   onPostpone?: (reason: string) => void,
   unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: {[string]: string},
 };
 
 type ResumeOptions = {
@@ -101,7 +102,11 @@ function renderToReadableStream(
     const request = createRequest(
       children,
       resumableState,
-      createRenderState(resumableState, options ? options.nonce : undefined),
+      createRenderState(
+        resumableState,
+        options ? options.nonce : undefined,
+        options ? options.importMap : undefined,
+      ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
       options ? options.progressiveChunkSize : undefined,
       options ? options.onError : undefined,
@@ -171,6 +176,7 @@ function resume(
       createRenderState(
         postponedState.resumableState,
         options ? options.nonce : undefined,
+        undefined, // importMap
       ),
       postponedState.rootFormatContext,
       postponedState.progressiveChunkSize,

packages/react-dom/src/server/ReactDOMFizzServerNode.js

@@ -51,6 +51,7 @@ type Options = {
   onError?: (error: mixed) => ?string,
   onPostpone?: (reason: string) => void,
   unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: {[string]: string},
 };
 
 type ResumeOptions = {
@@ -81,7 +82,11 @@ function createRequestImpl(children: ReactNodeList, options: void | Options) {
   return createRequest(
     children,
     resumableState,
-    createRenderState(resumableState, options ? options.nonce : undefined),
+    createRenderState(
+      resumableState,
+      options ? options.nonce : undefined,
+      options ? options.importMap : undefined,
+    ),
     createRootFormatContext(options ? options.namespaceURI : undefined),
     options ? options.progressiveChunkSize : undefined,
     options ? options.onError : undefined,
@@ -140,6 +145,7 @@ function resumeRequestImpl(
     createRenderState(
       postponedState.resumableState,
       options ? options.nonce : undefined,
+      undefined, // importMap
     ),
     postponedState.rootFormatContext,
     postponedState.progressiveChunkSize,

packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js

@@ -38,6 +38,7 @@ type Options = {
   onError?: (error: mixed) => ?string,
   onPostpone?: (reason: string) => void,
   unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: {[string]: string},
 };
 
 type StaticResult = {
@@ -81,7 +82,11 @@ function prerender(
     const request = createRequest(
       children,
       resources,
-      createRenderState(resources, undefined),
+      createRenderState(
+        resources,
+        undefined, // nonce
+        options ? options.importMap : undefined,
+      ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
       options ? options.progressiveChunkSize : undefined,
       options ? options.onError : undefined,

packages/react-dom/src/server/ReactDOMFizzStaticEdge.js

@@ -38,6 +38,7 @@ type Options = {
   onError?: (error: mixed) => ?string,
   onPostpone?: (reason: string) => void,
   unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: {[string]: string},
 };
 
 type StaticResult = {
@@ -81,7 +82,11 @@ function prerender(
     const request = createRequest(
       children,
       resources,
-      createRenderState(resources, undefined),
+      createRenderState(
+        resources,
+        undefined, // nonce
+        options ? options.importMap : undefined,
+      ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
       options ? options.progressiveChunkSize : undefined,
       options ? options.onError : undefined,