,
+ [key: string]: any,
+};
+
+/**
+ * A client module should behave as a client boundary
+ * if it is imported by the server before encountering
+ * another boundary in the process.
+ * This traverses the module graph upwards to find non client
+ * components that import the `originalMod`.
+ *
+ * The `accModInfo` represents the exported members from the
+ * `originalMod` but renamed accordingly to all the intermediate/facade
+ * files in the import chain from the `originalMod` to every parent importer.
+ */
+function isDirectImportInServer(
+ originalMod: ViteModule,
+ currentMod: ViteModule,
+ accModInfo: ?{file: string, exports: string[]},
+) {
+ // TODO: this should use recursion in any module that exports
+ // the original one, not only in full facade files.
+ if (!currentMod || (currentMod.meta || {}).isFacade) {
+ if (!accModInfo && originalMod.meta && originalMod.meta.namedExports) {
+ // First iteration in the recursion, initialize the
+ // acumulator with data from the original module.
+ accModInfo = {
+ file: originalMod.file,
+ exports: originalMod.meta.namedExports,
+ };
+ }
+
+ if (currentMod && accModInfo) {
+ // Update accumulator in subsequent iterations with
+ // whatever the current module is re-exporting.
+
+ const lastModExports = accModInfo.exports;
+ const lastModImports = currentMod.meta.imports.filter(
+ importMeta =>
+ importMeta.action === 'export' && importMeta.from === accModInfo.file,
+ );
+
+ accModInfo = {file: currentMod.file, exports: []};
+ lastModImports.forEach(mod => {
+ mod.variables.forEach(([name, alias]) => {
+ if (name === '*' && !alias) {
+ accModInfo.exports.push(...lastModExports);
+ } else {
+ accModInfo.exports.push(alias || name);
+ }
+ });
+ });
+ }
+
+ return Array.from((currentMod || originalMod).importers || []).some(
+ importer =>
+ // eslint-disable-next-line no-unused-vars
+ isDirectImportInServer(originalMod, importer, accModInfo),
+ );
+ }
+
+ // Not enough information: safer to assume it is
+ // imported in server to create a new boundary.
+ if (!currentMod.meta || !originalMod.meta) return true;
+
+ // If current module is a client component, stop checking
+ // parents since this can be the actual boundary.
+ if (isClientComponent(currentMod.file)) return false;
+
+ // If current module is not a client component, assume
+ // it is a server component on a shared component
+ // that will be imported in the server to be safe.
+ // However, due to the lack of tree-shaking in the dev module graph,
+ // we need to manually make sure this module is importing something from
+ // the original module before marking it as client boundary.
+ return currentMod.meta.imports.some(
+ imp =>
+ imp.from === accModInfo.file &&
+ (imp.variables || []).some(([name]) => accModInfo.exports.includes(name)),
+ );
+}
+
+const RESOLVE_EXTENSIONS = [
+ '',
+ '.js',
+ '.ts',
+ '.jsx',
+ '.tsx',
+ '/index',
+ '/index.js',
+ '/index.ts',
+ '/index.jsx',
+ '/index.tsx',
+];
+
+// Resolve relative paths and aliases. Examples:
+// - import {XYZ} from '~/components' => import {XYZ} from '/src/components/index.ts'
+// - import {XYZ} from '/src/component.client' => import {XYZ} from '/src/component.client.jsx'`
+function resolveModPath(modPath: string, dirname: string) {
+ const extensions = /\.[jt]sx?$/.test(modPath) ? [''] : RESOLVE_EXTENSIONS;
+
+ for (let i = 0; i < extensions.length; i++) {
+ const extension = extensions[i];
+
+ try {
+ const absolutePath = modPath.startsWith('.')
+ ? normalizePath(path.resolve(dirname, modPath))
+ : modPath;
+
+ return normalizePath(require.resolve(absolutePath + extension));
+ } catch (error) {
+ // Do not throw, this is likely a virtual module or another exception
+ }
+ }
+}
+
+function augmentModuleGraph(
+ moduleGraph: any,
+ id: string,
+ code: string,
+ root: string,
+ resolveAlias: any,
+) {
+ const currentModule = moduleGraph.getModuleById(id);
+ if (!currentModule) return;
+
+ const [source] = id.split('?');
+ const dirname = normalizePath(path.dirname(source));
+ const [rawImports, namedExports, isFacade] = parse(code);
+
+ // This is currently not used but it should be considered
+ // to improve the crawling in `isDirectImportInServer`.
+ const imports = [];
+ rawImports.forEach(
+ ({
+ s: startMod,
+ e: endMod,
+ d: dynamicImportIndex,
+ ss: startStatement,
+ se: endStatement,
+ }) => {
+ if (dynamicImportIndex !== -1) return; // Skip dynamic imports for now
+
+ const rawModPath = code.slice(startMod, endMod);
+ let modPath = rawModPath.split('?')[0];
+
+ if (resolveAlias) {
+ const resolvedAliasPath = resolveAlias(modPath, 'rsc_importer', {});
+ if (resolvedAliasPath && resolvedAliasPath.id) {
+ modPath = resolvedAliasPath.id;
+ }
+ }
+
+ if (modPath && modPath.startsWith('/src/')) {
+ // Vite default alias
+ modPath = normalizePath(path.join(root, modPath));
+ }
+
+ const resolvedPath = resolveModPath(modPath, dirname);
+ if (!resolvedPath) return; // Virtual modules or other exceptions
+
+ const [action, variables = ''] = code
+ .slice(startStatement, endStatement)
+ .split(/\s+(from\s+)?['"]/m)[0]
+ .split(/\s+(.+)/m);
+
+ imports.push({
+ action, // 'import' or 'export'
+ variables: variables // [['originalName', 'alias']]
+ .trim()
+ .replace(/^[^{*]/, 'default as $&')
+ .replace(/[{}]/gm, '')
+ .trim()
+ .split(/\s*,\s*/m)
+ .filter(Boolean)
+ .map(s => s.split(/\s+as\s+/m)),
+ from: resolvedPath, // '/absolute/path'
+ originalFrom: rawModPath, // './path' or '3plib/subpath'
+ });
+ },
+ );
+
+ if (!currentModule.meta) {
+ currentModule.meta = {};
+ }
+
+ Object.assign(currentModule.meta, {
+ isFacade,
+ namedExports,
+ imports,
+ ssr: true,
+ });
+}
diff --git a/packages/react-server-dom-vite/src/ViteImportMeta.js b/packages/react-server-dom-vite/src/ViteImportMeta.js
new file mode 100644
index 0000000000000..6fc277f8dbe65
--- /dev/null
+++ b/packages/react-server-dom-vite/src/ViteImportMeta.js
@@ -0,0 +1,2 @@
+export const META_HOT = import.meta.hot;
+export const META_ENV_DEV = import.meta.env.DEV;
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
new file mode 100644
index 0000000000000..f10d7f014160e
--- /dev/null
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOM-test.js
@@ -0,0 +1,589 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+jest.mock('../ViteImportMeta', () => {
+ return {META_HOT: null, META_ENV_DEV: true};
+});
+
+// Polyfills for test environment
+global.ReadableStream = require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextDecoder = require('util').TextDecoder;
+
+// Don't wait before processing work on the server.
+// TODO: we can replace this with FlightServer.act().
+global.setImmediate = cb => cb();
+
+let viteModuleIdx = 0;
+let viteModules = {};
+
+let act;
+let Stream;
+let React;
+let ReactDOMClient;
+let ReactServerDOMWriter;
+let ReactServerDOMReader;
+let ClientProxy;
+let Suspense;
+
+describe('ReactFlightDOM', () => {
+ beforeEach(() => {
+ jest.resetModules();
+ act = require('jest-react').act;
+ Stream = require('stream');
+ React = require('react');
+ ReactDOMClient = require('react-dom/client');
+ ReactServerDOMWriter = require('react-server-dom-vite/writer.node.server');
+ ReactServerDOMReader = require('react-server-dom-vite');
+ ClientProxy = require('react-server-dom-vite/esm/react-server-dom-vite-client-proxy');
+ Suspense = React.Suspense;
+
+ // Reset modules
+ viteModules = global.allClientComponents;
+ Object.keys(viteModules).forEach(key => delete viteModules[key]);
+ });
+
+ function getTestStream() {
+ const writable = new Stream.PassThrough();
+ const readable = new ReadableStream({
+ start(controller) {
+ writable.on('data', chunk => {
+ controller.enqueue(chunk);
+ });
+ writable.on('end', () => {
+ controller.close();
+ });
+ },
+ });
+ return {
+ readable,
+ writable,
+ };
+ }
+
+ function moduleReference(moduleExport) {
+ const idx = String(viteModuleIdx++);
+ viteModules[idx] = () =>
+ Promise.resolve({
+ default: moduleExport,
+ });
+
+ return ClientProxy.wrapInClientProxy({
+ value: moduleExport,
+ id: idx,
+ name: moduleExport.name || 'MyComponent',
+ isDefault: true,
+ });
+ }
+
+ async function waitForSuspense(fn) {
+ while (true) {
+ try {
+ return fn();
+ } catch (promise) {
+ if (typeof promise.then === 'function') {
+ await promise;
+ } else {
+ throw promise;
+ }
+ }
+ }
+ }
+
+ const theInfinitePromise = new Promise(() => {});
+ function InfiniteSuspend() {
+ throw theInfinitePromise;
+ }
+
+ it('should resolve HTML using Node streams', async () => {
+ function Text({children}) {
+ return {children} ;
+ }
+ function HTML() {
+ return (
+
+ hello
+ world
+
+ );
+ }
+
+ function App() {
+ const model = {
+ html: ,
+ };
+ return model;
+ }
+
+ const {writable, readable} = getTestStream();
+ const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
+ hello
+ world
+
+ ),
+ });
+ });
+ });
+
+ it('should resolve the root', async () => {
+ // Model
+ function Text({children}) {
+ return {children} ;
+ }
+ function HTML() {
+ return (
+
+ hello
+ world
+
+ );
+ }
+ function RootModel() {
+ return {
+ html: ,
+ };
+ }
+
+ // View
+ function Message({response}) {
+ return {response.readRoot().html} ;
+ }
+ function App({response}) {
+ return (
+ Loading...}>
+
+ );
+ }
+
+ const {writable, readable} = getTestStream();
+ const {pipe} = ReactServerDOMWriter.renderToPipeableStream({response.readRoot().text}
;
+ }
+ function App({response}) {
+ return (
+ Loading...}>
+
+ );
+ }
+
+ const {writable, readable} = getTestStream();
+ const {pipe} = ReactServerDOMWriter.renderToPipeableStream($1
');
+ });
+
+ it('should not get confused by @', async () => {
+ // Model
+ function RootModel() {
+ return {text: '@div'};
+ }
+
+ // View
+ function Message({response}) {
+ return {response.readRoot().text}
;
+ }
+ function App({response}) {
+ return (
+ Loading...}>
+
+ );
+ }
+
+ const {writable, readable} = getTestStream();
+ const {pipe} = ReactServerDOMWriter.renderToPipeableStream(@div
');
+ });
+
+ it('should progressively reveal server components', async () => {
+ let reportedErrors = [];
+ // Client Components
+
+ class ErrorBoundary extends React.Component {
+ state = {hasError: false, error: null};
+ static getDerivedStateFromError(error) {
+ return {
+ hasError: true,
+ error,
+ };
+ }
+ render() {
+ if (this.state.hasError) {
+ return this.props.fallback(this.state.error);
+ }
+ return this.props.children;
+ }
+ }
+
+ function MyErrorBoundary({children}) {
+ return (
+ {e.message}
}>
+ {children}
+
+ );
+ }
+
+ // Model
+ function Text({children}) {
+ return children;
+ }
+
+ function makeDelayedText() {
+ let error, _resolve, _reject;
+ let promise = new Promise((resolve, reject) => {
+ _resolve = () => {
+ promise = null;
+ resolve();
+ };
+ _reject = e => {
+ error = e;
+ promise = null;
+ reject(e);
+ };
+ });
+ function DelayedText({children}, data) {
+ if (promise) {
+ throw promise;
+ }
+ if (error) {
+ throw error;
+ }
+ return {children} ;
+ }
+ return [DelayedText, _resolve, _reject];
+ }
+
+ const [Friends, resolveFriends] = makeDelayedText();
+ const [Name, resolveName] = makeDelayedText();
+ const [Posts, resolvePosts] = makeDelayedText();
+ const [Photos, resolvePhotos] = makeDelayedText();
+ const [Games, , rejectGames] = makeDelayedText();
+
+ // View
+ function ProfileDetails({avatar}) {
+ return (
+
+ :name:
+ {avatar}
+
+ );
+ }
+ function ProfileSidebar({friends}) {
+ return (
+
+ );
+ }
+ function ProfilePosts({posts}) {
+ return {posts}
;
+ }
+ function ProfileGames({games}) {
+ return {games}
;
+ }
+
+ const MyErrorBoundaryClient = moduleReference(MyErrorBoundary);
+
+ function ProfileContent() {
+ return (
+ <>
+ :avatar:} />
+ (loading sidebar)}>
+ :friends:} />
+
+ (loading posts)}>
+ :posts:} />
+
+
+ (loading games)}>
+ :games:} />
+
+
+
+ );
+ }
+
+ const model = {
+ rootContent: (loading)}>
+ ,
+ );
+ });
+ expect(container.innerHTML).toBe('(loading)
');
+
+ // This isn't enough to show anything.
+ await act(async () => {
+ resolveFriends();
+ });
+ expect(container.innerHTML).toBe('(loading)
');
+
+ // We can now show the details. Sidebar and posts are still loading.
+ await act(async () => {
+ resolveName();
+ });
+ // Advance time enough to trigger a nested fallback.
+ jest.advanceTimersByTime(500);
+ expect(container.innerHTML).toBe(
+ ':name::avatar:
' +
+ '(loading sidebar)
' +
+ '(loading posts)
' +
+ '(loading games)
',
+ );
+
+ expect(reportedErrors).toEqual([]);
+
+ const theError = new Error('Game over');
+ // Let's *fail* loading games.
+ await act(async () => {
+ rejectGames(theError);
+ });
+ expect(container.innerHTML).toBe(
+ ':name::avatar:
' +
+ '(loading sidebar)
' +
+ '(loading posts)
' +
+ 'Game over
', // TODO: should not have message in prod.
+ );
+
+ expect(reportedErrors).toEqual([theError]);
+ reportedErrors = [];
+
+ // We can now show the sidebar.
+ await act(async () => {
+ resolvePhotos();
+ });
+ expect(container.innerHTML).toBe(
+ ':name::avatar:
' +
+ ':photos::friends:
' +
+ '(loading posts)
' +
+ 'Game over
', // TODO: should not have message in prod.
+ );
+
+ // Show everything.
+ await act(async () => {
+ resolvePosts();
+ });
+ expect(container.innerHTML).toBe(
+ ':name::avatar:
' +
+ ':photos::friends:
' +
+ ':posts:
' +
+ 'Game over
', // TODO: should not have message in prod.
+ );
+
+ expect(reportedErrors).toEqual([]);
+ });
+
+ it('should preserve state of client components on refetch', async () => {
+ // Client
+
+ function Page({response}) {
+ return response.readRoot();
+ }
+
+ function Input() {
+ return
+
+ );
+ }
+
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+
+ const stream1 = getTestStream();
+ const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
+ (loading)}>
+ ,
+ );
+ });
+ expect(container.children.length).toBe(1);
+ expect(container.children[0].tagName).toBe('DIV');
+ expect(container.children[0].style.color).toBe('red');
+
+ // Change the DOM state for both inputs.
+ const inputA = container.children[0].children[0];
+ expect(inputA.tagName).toBe('INPUT');
+ inputA.value = 'hello';
+ const inputB = container.children[0].children[1];
+ expect(inputB.tagName).toBe('INPUT');
+ inputB.value = 'goodbye';
+
+ const stream2 = getTestStream();
+ const {pipe: pipe2} = ReactServerDOMWriter.renderToPipeableStream(
+ (loading)}>
+ ,
+ );
+ });
+ expect(container.children.length).toBe(1);
+ expect(container.children[0].tagName).toBe('DIV');
+ expect(container.children[0].style.color).toBe('blue');
+
+ // Verify we didn't destroy the DOM for either input.
+ expect(inputA === container.children[0].children[0]).toBe(true);
+ expect(inputA.tagName).toBe('INPUT');
+ expect(inputA.value).toBe('hello');
+ expect(inputB === container.children[0].children[1]).toBe(true);
+ expect(inputB.tagName).toBe('INPUT');
+ expect(inputB.value).toBe('goodbye');
+ });
+
+ it('should be able to complete after aborting and throw the reason client-side', async () => {
+ const reportedErrors = [];
+
+ class ErrorBoundary extends React.Component {
+ state = {hasError: false, error: null};
+ static getDerivedStateFromError(error) {
+ return {
+ hasError: true,
+ error,
+ };
+ }
+ render() {
+ if (this.state.hasError) {
+ return this.props.fallback(this.state.error);
+ }
+ return this.props.children;
+ }
+ }
+
+ const {writable, readable} = getTestStream();
+ const {pipe, abort} = ReactServerDOMWriter.renderToPipeableStream(
+
+
,
+ {
+ onError(x) {
+ reportedErrors.push(x);
+ },
+ },
+ );
+ pipe(writable);
+ const response = ReactServerDOMReader.createFromReadableStream(readable);
+
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+
+ function App({res}) {
+ return res.readRoot();
+ }
+
+ await act(async () => {
+ root.render(
+ {e.message}
}>
+ (loading)}>
+
+ ,
+ );
+ });
+ expect(container.innerHTML).toBe('(loading)
');
+
+ await act(async () => {
+ abort('for reasons');
+ });
+ expect(container.innerHTML).toBe('Error: for reasons
');
+
+ expect(reportedErrors).toEqual(['for reasons']);
+ });
+});
diff --git a/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
new file mode 100644
index 0000000000000..43962c44a88b8
--- /dev/null
+++ b/packages/react-server-dom-vite/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -0,0 +1,519 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+jest.mock('../ViteImportMeta', () => {
+ return {META_HOT: null, META_ENV_DEV: true};
+});
+
+// Polyfills for test environment
+global.ReadableStream = require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+global.TextDecoder = require('util').TextDecoder;
+
+let viteModuleIdx = 0;
+let viteModules = {};
+
+let act;
+let React;
+let ReactDOMClient;
+let ReactServerDOMWriter;
+let ReactServerDOMReader;
+let ClientProxy;
+let Suspense;
+
+describe('ReactFlightDOMBrowser', () => {
+ beforeEach(() => {
+ jest.resetModules();
+ viteModules = {};
+ act = require('jest-react').act;
+ React = require('react');
+ ReactDOMClient = require('react-dom/client');
+ ReactServerDOMWriter = require('react-server-dom-vite/writer.browser.server');
+ ReactServerDOMReader = require('react-server-dom-vite');
+ ClientProxy = require('react-server-dom-vite/esm/react-server-dom-vite-client-proxy');
+ Suspense = React.Suspense;
+
+ // Reset modules
+ viteModules = global.allClientComponents;
+ Object.keys(viteModules).forEach(key => delete viteModules[key]);
+ });
+
+ function moduleReference(moduleExport) {
+ const idx = String(viteModuleIdx++);
+ viteModules[idx] = () =>
+ Promise.resolve({
+ default: moduleExport,
+ });
+
+ return ClientProxy.wrapInClientProxy({
+ value: moduleExport,
+ id: idx,
+ name: moduleExport.name || 'MyComponent',
+ isDefault: true,
+ });
+ }
+
+ async function waitForSuspense(fn) {
+ while (true) {
+ try {
+ return fn();
+ } catch (promise) {
+ if (typeof promise.then === 'function') {
+ await promise;
+ } else {
+ throw promise;
+ }
+ }
+ }
+ }
+
+ function makeDelayedText(Model) {
+ let error, _resolve, _reject;
+ let promise = new Promise((resolve, reject) => {
+ _resolve = () => {
+ promise = null;
+ resolve();
+ };
+ _reject = e => {
+ error = e;
+ promise = null;
+ reject(e);
+ };
+ });
+ function DelayedText({children}, data) {
+ if (promise) {
+ throw promise;
+ }
+ if (error) {
+ throw error;
+ }
+ return {children} ;
+ }
+ return [DelayedText, _resolve, _reject];
+ }
+
+ it('should resolve HTML using W3C streams', async () => {
+ function Text({children}) {
+ return {children} ;
+ }
+ function HTML() {
+ return (
+
+ hello
+ world
+
+ );
+ }
+
+ function App() {
+ const model = {
+ html: ,
+ };
+ return model;
+ }
+
+ const stream = ReactServerDOMWriter.renderToReadableStream(
+ hello
+ world
+
+ ),
+ });
+ });
+ });
+
+ it('should resolve HTML using W3C streams', async () => {
+ function Text({children}) {
+ return {children} ;
+ }
+ function HTML() {
+ return (
+
+ hello
+ world
+
+ );
+ }
+
+ function App() {
+ const model = {
+ html: ,
+ };
+ return model;
+ }
+
+ const stream = ReactServerDOMWriter.renderToReadableStream(