ESM implementation of module preinitialization

Author: gnoff

fixtures/flight-esm/.nvmrc

@@ -0,0 +1 @@
+v18

fixtures/flight-esm/server/global.js

@@ -10,6 +10,7 @@ const compress = require('compression');
 const chalk = require('chalk');
 const express = require('express');
 const http = require('http');
+const React = require('react');
 
 const {renderToPipeableStream} = require('react-dom/server');
 const {createFromNodeStream} = require('react-server-dom-esm/client');
@@ -62,20 +63,29 @@ app.all('/', async function (req, res, next) {
  if (req.accepts('text/html')) {
  try {
  const rscResponse = await promiseForData;
-
  const moduleBaseURL = '/src';
 
  // For HTML, we're a "client" emulator that runs the client code,
  // so we start by consuming the RSC payload. This needs the local file path
  // to load the source files from as well as the URL path for preloads.
- const root = await createFromNodeStream(
- rscResponse,
- moduleBasePath,
- moduleBaseURL
- );
+
+ let root;
+ let Root = () => {
+ if (root) {
+ return React.use(root);
+ }
+
+ return React.use(
+ (root = createFromNodeStream(
+ rscResponse,
+ moduleBasePath,
+ moduleBaseURL
+ ))
+ );
+ };
  // Render it into HTML by resolving the client components
  res.set('Content-type', 'text/html');
- const {pipe} = renderToPipeableStream(root, {
+ const {pipe} = renderToPipeableStream(React.createElement(Root), {
  // TODO: bootstrapModules inserts a preload before the importmap which causes
  // the import map to be invalid. We need to fix that in Float somehow.
  // bootstrapModules: ['/src/index.js'],
@@ -89,6 +99,7 @@ app.all('/', async function (req, res, next) {
  } else {
  try {
  const rscResponse = await promiseForData;
+
  // For other request, we pass-through the RSC payload.
  res.set('Content-type', 'text/x-component');
  rscResponse.on('data', data => {

fixtures/flight-esm/server/region.js

@@ -36,6 +36,9 @@ async function renderApp(res, returnValue) {
  // For client-invoked server actions we refresh the tree and return a return value.
  const payload = returnValue ? {returnValue, root} : root;
  const {pipe} = renderToPipeableStream(payload, moduleBasePath);
+ await new Promise(res => {
+ setTimeout(res, 1000);
+ });
  pipe(res);
 }
 

fixtures/flight/server/global.js

@@ -147,12 +147,17 @@ app.all('/', async function (req, res, next) {
  let root;
  let Root = () => {
  if (root) {
- return root;
+ return React.use(root);
  }
- root = createFromNodeStream(rscResponse, ssrBundleConfig.ssrManifest, {
- moduleLoading: ssrBundleConfig.moduleLoading,
- });
- return root;
+ return React.use(
+ (root = createFromNodeStream(
+ rscResponse,
+ ssrBundleConfig.ssrManifest,
+ {
+ moduleLoading: ssrBundleConfig.moduleLoading,
+ }
+ ))
+ );
  };
  // Render it into HTML by resolving the client components
  res.set('Content-type', 'text/html');

fixtures/flight/server/region.js

@@ -95,6 +95,9 @@ async function renderApp(res, returnValue) {
  // For client-invoked server actions we refresh the tree and return a return value.
  const payload = returnValue ? {returnValue, root} : root;
  const {pipe} = renderToPipeableStream(payload, moduleMap);
+ await new Promise(res => {
+ setTimeout(res, 1000);
+ });
  pipe(res);
 }
 

packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js

@@ -8,6 +8,7 @@
  */
 
 export * from 'react-client/src/ReactFlightClientConfigBrowser';
-export * from 'react-server-dom-esm/src/ReactFlightClientConfigESMBundler';
+export * from 'react-server-dom-esm/src/ReactFlightClientConfigBundlerESM';
+export * from 'react-server-dom-esm/src/ReactFlightClientConfigTargetESMBrowser';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = false;

packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-export * from 'react-client/src/ReactFlightClientConfigBrowser';
-export * from 'react-server-dom-esm/src/ReactFlightClientConfigESMBundler';
+export * from 'react-client/src/ReactFlightClientConfigNode';
+export * from 'react-server-dom-esm/src/ReactFlightClientConfigBundlerESM';
+export * from 'react-server-dom-esm/src/ReactFlightClientConfigTargetESMServer';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = true;

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

@@ -5228,6 +5228,7 @@ function preinit(href: string, options: PreinitOptions): void {
  }
  return;
  }
+ case 'module':
  case 'script': {
  const src = href;
  const key = getResourceKey(as, src);

packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js

@@ -64,7 +64,18 @@ export function dispatchHint(code: string, model: HintModel): void {
  }
 }
 
-export function preinitModulesForSSR(href: string, crossOrigin: ?string) {
+export function preinitModuleForSSR(href: string, crossOrigin: ?string) {
+ const dispatcher = ReactDOMCurrentDispatcher.current;
+ if (dispatcher) {
+ if (typeof crossOrigin === 'string') {
+ dispatcher.preinitModule(href, {crossOrigin});
+ } else {
+ dispatcher.preinitModule(href);
+ }
+ }
+}
+
+export function preinitScriptForSSR(href: string, crossOrigin: ?string) {
  const dispatcher = ReactDOMCurrentDispatcher.current;
  if (dispatcher) {
  if (typeof crossOrigin === 'string') {

packages/react-server-dom-esm/src/ReactFlightClientConfigESMBundler.js renamed to packages/react-server-dom-esm/src/ReactFlightClientConfigBundlerESM.js

@@ -12,13 +12,16 @@ import type {
  FulfilledThenable,
  RejectedThenable,
 } from 'shared/ReactTypes';
+import type {ModuleLoading} from 'react-client/src/ReactFlightClientConfig';
 
 export type SSRManifest = string; // Module root path
 
 export type ServerManifest = string; // Module root path
 
 export type ServerReferenceId = string;
 
+import {prepareDestinationForModuleImpl} from 'react-client/src/ReactFlightClientConfig';
+
 export opaque type ClientReferenceMetadata = [
  string, // module path
  string, // export name
@@ -30,6 +33,19 @@ export opaque type ClientReference<T> = {
  name: string,
 };
 
+// The reason this function needs to defined here in this file instead of just
+// being exported directly from the WebpackDestination... file is because the
+// ClientReferenceMetadata is opaque and we can't unwrap it there.
+// This should get inlined and we could also just implement an unwrapping function
+// though that risks it getting used in places it shouldn't be. This is unfortunate
+// but currently it seems to be the best option we have.
+export function prepareDestinationForModule(
+ moduleLoading: ModuleLoading,
+ metadata: ClientReferenceMetadata,
+) {
+ prepareDestinationForModuleImpl(moduleLoading, metadata[0]);
+}
+
 export function resolveClientReference<T>(
  bundlerConfig: SSRManifest,
  metadata: ClientReferenceMetadata,