@ecopages/react 0.2.0-alpha.5 → 0.2.0-alpha.50

package/src/services/react-runtime-bundle.service.js

@@ -1,205 +1,128 @@
-import fs from "node:fs";
-import path from "node:path";
-import { createRequire } from "node:module";
-import { AssetFactory } from "@ecopages/core/services/asset-processing-service";
+import { createRuntimeSpecifierAliasPlugin } from "@ecopages/core/build/runtime-specifier-alias-plugin";
+import {
+  buildBrowserRuntimeAssetUrl,
+  createBrowserRuntimeModuleAsset,
+  createBrowserRuntimeScriptAsset
+} from "@ecopages/core/services/asset-processing-service";
+import { createReactDomRuntimeInteropPlugin } from "../utils/react-dom-runtime-interop-plugin.js";
+import { buildReactRuntimeAliasMap } from "../utils/react-runtime-alias-map.js";
 class ReactRuntimeBundleService {
+  config;
   constructor(config) {
     this.config = config;
   }
-  getRuntimeImports() {
+  setRootDir(rootDir) {
+    this.config.rootDir = rootDir;
+  }
+  get isDevelopment() {
+    return process.env.NODE_ENV === "development";
+  }
+  getCurrentRuntimeMode() {
+    return this.isDevelopment ? "development" : "production";
+  }
+  createRuntimeDefines(mode) {
+    const nodeEnv = JSON.stringify(mode);
+    return {
+      "process.env.NODE_ENV": nodeEnv,
+      "import.meta.env.NODE_ENV": nodeEnv
+    };
+  }
+  getReactVendorFileName(mode) {
+    return mode === "development" ? "react.development.js" : "react.js";
+  }
+  getReactDomVendorFileName(mode) {
+    return mode === "development" ? "react-dom.development.js" : "react-dom.js";
+  }
+  getRouterVendorFileName(mode) {
+    if (!this.config.routerAdapter) {
+      return "";
+    }
+    return mode === "development" ? `${this.config.routerAdapter.bundle.outputName}.development.js` : `${this.config.routerAdapter.bundle.outputName}.js`;
+  }
+  getRuntimeImports(mode = this.getCurrentRuntimeMode()) {
+    const reactVendorFileName = this.getReactVendorFileName(mode);
+    const reactDomVendorFileName = this.getReactDomVendorFileName(mode);
     const runtimeImports = {
-      react: this.buildImportMapSourceUrl("react.js"),
-      reactDomClient: this.buildImportMapSourceUrl("react-dom.js"),
-      reactJsxRuntime: this.buildImportMapSourceUrl("react.js"),
-      reactJsxDevRuntime: this.buildImportMapSourceUrl("react.js"),
-      reactDom: this.buildImportMapSourceUrl("react-dom.js")
+      react: buildBrowserRuntimeAssetUrl(reactVendorFileName),
+      reactDomClient: buildBrowserRuntimeAssetUrl(reactDomVendorFileName),
+      reactJsxRuntime: buildBrowserRuntimeAssetUrl(reactVendorFileName),
+      reactJsxDevRuntime: buildBrowserRuntimeAssetUrl(reactVendorFileName),
+      reactDom: buildBrowserRuntimeAssetUrl(reactDomVendorFileName)
     };
     if (this.config.routerAdapter) {
-      runtimeImports.router = this.buildImportMapSourceUrl(`${this.config.routerAdapter.bundle.outputName}.js`);
+      runtimeImports.router = buildBrowserRuntimeAssetUrl(this.getRouterVendorFileName(mode));
     }
     return runtimeImports;
   }
-  getSpecifierMap() {
-    const runtimeImports = this.getRuntimeImports();
-    const map = {
-      react: runtimeImports.react,
-      "react/jsx-runtime": runtimeImports.reactJsxRuntime,
-      "react/jsx-dev-runtime": runtimeImports.reactJsxDevRuntime,
-      "react-dom": runtimeImports.reactDom,
-      "react-dom/client": runtimeImports.reactDomClient
-    };
-    if (this.config.routerAdapter && runtimeImports.router) {
-      map[this.config.routerAdapter.importMapKey] = runtimeImports.router;
-    }
-    return map;
+  getRuntimeAliasMap(mode = this.getCurrentRuntimeMode()) {
+    return buildReactRuntimeAliasMap(this.getRuntimeImports(mode));
   }
   getDependencies() {
-    const runtimeAttrs = { type: "module", defer: "" };
-    const runtimeImports = this.getRuntimeImports();
-    const reactRuntimeAliasPlugin = this.createRuntimeSpecifierAliasPlugin({
-      react: runtimeImports.react
-    });
-    const reactDomRuntimeInteropPlugin = this.createReactDomRuntimeInteropPlugin();
-    const reactEntry = this.createRuntimeEntry(
-      [
-        { specifier: "react", defaultExport: true },
-        { specifier: "react/jsx-runtime" },
-        { specifier: "react/jsx-dev-runtime" }
-      ],
-      "react-entry.mjs"
-    );
-    const reactDomEntry = this.createRuntimeEntry(
-      [{ specifier: "react-dom", defaultExport: true }, { specifier: "react-dom/client" }],
-      "react-dom-entry.mjs"
-    );
-    const dependencies = [
-      AssetFactory.createNodeModuleScript({
-        position: "head",
-        importPath: reactEntry,
-        name: "react",
-        excludeFromHtml: true,
-        bundleOptions: { naming: "react.js" },
-        attributes: runtimeAttrs
-      }),
-      AssetFactory.createNodeModuleScript({
-        position: "head",
-        importPath: reactDomEntry,
-        name: "react-dom",
-        excludeFromHtml: true,
-        bundleOptions: {
-          naming: "react-dom.js",
-          plugins: [reactRuntimeAliasPlugin, reactDomRuntimeInteropPlugin]
+    const reactDomRuntimeInteropPlugin = createReactDomRuntimeInteropPlugin();
+    const dependencies = [];
+    for (const mode of ["production", "development"]) {
+      const reactRuntimeAliasPlugin = createRuntimeSpecifierAliasPlugin(
+        {
+          react: buildBrowserRuntimeAssetUrl(this.getReactVendorFileName(mode))
         },
-        attributes: runtimeAttrs
-      })
-    ];
-    if (this.config.routerAdapter) {
-      const runtimeAliasPlugin = this.createRuntimeAliasPlugin();
-      const mappedSpecifiers = new Set(Object.keys(this.getSpecifierMap()));
-      const unresolvedExternals = this.config.routerAdapter.bundle.externals.filter(
-        (external) => !mappedSpecifiers.has(external)
+        { name: `react-plugin-runtime-specifier-alias-${mode}` }
       );
+      const reactDomBundlePlugins = [reactRuntimeAliasPlugin, reactDomRuntimeInteropPlugin].filter(
+        (plugin) => plugin !== null
+      );
+      const runtimeAliasPlugin = this.createRuntimeAliasPlugin(mode);
+      const mappedSpecifiers = new Set(Object.keys(this.getRuntimeAliasMap(mode)));
       dependencies.push(
-        AssetFactory.createNodeModuleScript({
-          position: "head",
-          importPath: this.config.routerAdapter.bundle.importPath,
-          name: this.config.routerAdapter.bundle.outputName,
-          excludeFromHtml: true,
+        createBrowserRuntimeModuleAsset({
+          modules: [
+            { specifier: "react", defaultExport: true },
+            { specifier: "react/jsx-runtime" },
+            { specifier: "react/jsx-dev-runtime" }
+          ],
+          name: "react",
+          fileName: this.getReactVendorFileName(mode),
+          cacheDirName: `ecopages-react-runtime-${mode}`,
+          rootDir: this.config.rootDir,
           bundleOptions: {
-            naming: `${this.config.routerAdapter.bundle.outputName}.js`,
-            external: unresolvedExternals,
-            plugins: [runtimeAliasPlugin]
-          },
-          attributes: runtimeAttrs
-        })
-      );
-    }
-    return dependencies;
-  }
-  createRuntimeAliasPlugin() {
-    const specifierMap = this.getSpecifierMap();
-    const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    const filter = new RegExp(
-      `^(${Object.keys(specifierMap).map((key) => escapeRegExp(key)).join("|")})$`
-    );
-    return {
-      name: "react-plugin-runtime-alias",
-      setup(build) {
-        build.onResolve({ filter }, (args) => {
-          const mappedPath = specifierMap[args.path];
-          if (!mappedPath) {
-            return void 0;
+            define: this.createRuntimeDefines(mode)
           }
-          return {
-            path: mappedPath,
-            external: true
-          };
-        });
-      }
-    };
-  }
-  buildImportMapSourceUrl(fileName) {
-    return `/${AssetFactory.RESOLVED_ASSETS_VENDORS_DIR}/${fileName}`;
-  }
-  createRuntimeSpecifierAliasPlugin(specifierMap, external = true) {
-    const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    const filter = new RegExp(
-      `^(${Object.keys(specifierMap).map((key) => escapeRegExp(key)).join("|")})$`
-    );
-    return {
-      name: "react-plugin-runtime-specifier-alias",
-      setup(build) {
-        build.onResolve({ filter }, (args) => {
-          const mappedPath = specifierMap[args.path];
-          if (!mappedPath) {
-            return void 0;
-          }
-          return {
-            path: mappedPath,
-            external
-          };
-        });
-      }
-    };
-  }
-  createReactDomRuntimeInteropPlugin() {
-    const reactDomFileFilter = /[\\/]react-dom[\\/].*\.js$/;
-    const reactRequirePattern = /\brequire\((['"])react\1\)/g;
-    return {
-      name: "react-dom-runtime-interop",
-      setup(build) {
-        build.onLoad({ filter: reactDomFileFilter }, (args) => {
-          const content = fs.readFileSync(args.path, "utf-8");
-          if (!reactRequirePattern.test(content)) {
-            return void 0;
+        }),
+        createBrowserRuntimeModuleAsset({
+          modules: [{ specifier: "react-dom", defaultExport: true }, { specifier: "react-dom/client" }],
+          name: "react-dom",
+          fileName: this.getReactDomVendorFileName(mode),
+          cacheDirName: `ecopages-react-runtime-${mode}`,
+          rootDir: this.config.rootDir,
+          bundleOptions: {
+            define: this.createRuntimeDefines(mode),
+            plugins: reactDomBundlePlugins
           }
-          reactRequirePattern.lastIndex = 0;
-          const rewritten = content.replace(reactRequirePattern, "__ecopages_react_runtime");
-          return {
-            contents: `import * as __ecopages_react_runtime from 'react';
-${rewritten}`,
-            loader: "js",
-            resolveDir: path.dirname(args.path)
-          };
-        });
-      }
-    };
-  }
-  getRuntimeArtifactsDir() {
-    const tmpDir = path.join(process.cwd(), "node_modules", ".cache", "ecopages-react-runtime");
-    fs.mkdirSync(tmpDir, { recursive: true });
-    return tmpDir;
-  }
-  createRuntimeEntry(modules, fileName) {
-    const tmpDir = this.getRuntimeArtifactsDir();
-    const requireFromRoot = createRequire(path.join(process.cwd(), "package.json"));
-    const seenExports = /* @__PURE__ */ new Set();
-    const statements = [];
-    for (const module of modules) {
-      if (module.defaultExport) {
-        statements.push(`import __ecopages_default_export__ from '${module.specifier}';`);
-        statements.push("export default __ecopages_default_export__;");
-      }
-      const exportNames = this.getModuleExportNames(module.specifier, requireFromRoot).filter(
-        (name) => !seenExports.has(name)
+        })
       );
-      if (exportNames.length > 0) {
-        statements.push(`export { ${exportNames.join(", ")} } from '${module.specifier}';`);
-        for (const exportName of exportNames) {
-          seenExports.add(exportName);
-        }
+      if (this.config.routerAdapter) {
+        const unresolvedExternals = this.config.routerAdapter.bundle.externals.filter(
+          (external) => !mappedSpecifiers.has(external)
+        );
+        dependencies.push(
+          createBrowserRuntimeScriptAsset({
+            importPath: this.config.routerAdapter.bundle.importPath,
+            name: this.config.routerAdapter.bundle.outputName,
+            fileName: this.getRouterVendorFileName(mode),
+            bundleOptions: {
+              define: this.createRuntimeDefines(mode),
+              external: unresolvedExternals,
+              plugins: [runtimeAliasPlugin]
+            }
+          })
+        );
       }
     }
-    const filePath = path.join(tmpDir, fileName);
-    fs.writeFileSync(filePath, statements.join("\n"), "utf-8");
-    return filePath;
-  }
-  getModuleExportNames(specifier, requireFromRoot) {
-    const moduleExports = requireFromRoot(specifier);
-    return Object.keys(moduleExports).filter((name) => name !== "__esModule" && name !== "default").filter((name) => this.isValidExportName(name)).sort();
+    return dependencies;
   }
-  isValidExportName(name) {
-    return /^[$A-Z_a-z][$\w]*$/.test(name);
+  createRuntimeAliasPlugin(mode = this.getCurrentRuntimeMode()) {
+    return createRuntimeSpecifierAliasPlugin(this.getRuntimeAliasMap(mode), {
+      name: `react-plugin-runtime-alias-${mode}`
+    });
   }
 }
 export {

package/src/utils/client-graph-boundary-plugin.d.ts

@@ -14,7 +14,7 @@
  * Additionally, this plugin provides a build-time transform that statically resolves and
  * inlines `fs.readFileSync(path.resolve(...))` calls to prevent server/client data mismatches.
  */
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import type { EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
 /**
  * Configuration options for the Client Graph Boundary esbuild plugin.
  *

package/src/utils/client-graph-boundary-plugin.js

@@ -1,8 +1,16 @@
 import { existsSync, readFileSync } from "node:fs";
 import { dirname, extname, resolve } from "node:path";
 import { parseSync } from "oxc-parser";
-import { analyzeReachability } from "./reachability-analyzer";
+import { analyzeReachability } from "./reachability-analyzer.js";
 const SOURCE_FILE_FILTER = /\.(tsx?|jsx?)$/;
+const SERVER_ONLY_ECO_PAGE_OPTION_KEYS = /* @__PURE__ */ new Set([
+  "cache",
+  "middleware",
+  "requires",
+  "metadata",
+  "staticProps",
+  "staticPaths"
+]);
 function isBareSpecifier(specifier) {
   if (specifier.startsWith(".")) return false;
   if (specifier.startsWith("/")) return false;
@@ -86,6 +94,62 @@ function parserLanguageForFile(filename) {
   if (extension === ".jsx") return "jsx";
   return "js";
 }
+function getObjectPropertyKeyName(node) {
+  if (!node) return void 0;
+  if (node.type === "Identifier") return node.name;
+  if (node.type === "StringLiteral" || node.type === "Literal") {
+    return typeof node.value === "string" ? node.value : void 0;
+  }
+  return void 0;
+}
+function stripServerOnlyEcoPageOptions(source, program) {
+  const edits = [];
+  function walk(node) {
+    if (!node || typeof node !== "object") return;
+    if (Array.isArray(node)) {
+      for (const child of node) walk(child);
+      return;
+    }
+    if (node.type === "CallExpression" && node.callee?.type === "MemberExpression" && node.callee.object?.type === "Identifier" && node.callee.object.name === "eco" && node.callee.property?.type === "Identifier" && node.callee.property.name === "page" && node.arguments?.[0]?.type === "ObjectExpression") {
+      const objectExpression = node.arguments[0];
+      const keptProperties = [];
+      let removedProperty = false;
+      for (const property of objectExpression.properties ?? []) {
+        if (property?.type === "Property") {
+          const keyName = getObjectPropertyKeyName(property.key);
+          if (keyName && SERVER_ONLY_ECO_PAGE_OPTION_KEYS.has(keyName)) {
+            removedProperty = true;
+            continue;
+          }
+        }
+        keptProperties.push(source.slice(property.start, property.end));
+      }
+      if (removedProperty) {
+        const replacement = keptProperties.length > 0 ? `{ ${keptProperties.join(", ")} }` : "{}";
+        edits.push({
+          start: objectExpression.start,
+          end: objectExpression.end,
+          replacement
+        });
+      }
+    }
+    for (const key in node) {
+      if (key !== "type" && key !== "start" && key !== "end") {
+        walk(node[key]);
+      }
+    }
+  }
+  walk(program);
+  if (edits.length === 0) {
+    return { transformed: source, modified: false };
+  }
+  edits.sort((a, b) => b.start - a.start);
+  let transformed = source;
+  for (const edit of edits) {
+    transformed = transformed.slice(0, edit.start) + edit.replacement + transformed.slice(edit.end);
+  }
+  return { transformed, modified: true };
+}
 function normalizeRequestedExportsKey(pathname) {
   let normalized = pathname.replace(/\\/g, "/");
   normalized = normalized.replace(/\.(tsx?|jsx?)$/i, "");
@@ -341,13 +405,26 @@ function transformModuleImports(source, filename, globallyAllowed, requestedExpo
   }
   walkImports(program);
   if (edits.length === 0) {
-    return { transformed: source, modified: false };
+    return stripServerOnlyEcoPageOptions(source, program);
   }
   edits.sort((a, b) => b.start - a.start);
   let transformed = source;
   for (const edit of edits) {
     transformed = transformed.slice(0, edit.start) + edit.replacement + transformed.slice(edit.end);
   }
+  let reparsedResult;
+  try {
+    reparsedResult = parseSync(filename, transformed, {
+      sourceType: "module",
+      lang: parserLanguageForFile(filename)
+    });
+  } catch {
+    return { transformed, modified: true };
+  }
+  const strippedPageOptions = stripServerOnlyEcoPageOptions(transformed, reparsedResult.program);
+  if (strippedPageOptions.modified) {
+    return strippedPageOptions;
+  }
   return { transformed, modified: true };
 }
 function createClientGraphBoundaryPlugin(options) {
@@ -407,7 +484,7 @@ function createClientGraphBoundaryPlugin(options) {
         }
         if (!modified) return void 0;
         const ext = extname(args.path).slice(1);
-        return { contents: transformed, loader: ext };
+        return { contents: transformed, loader: ext, resolveDir: dirname(args.path) };
       });
     }
   };

package/src/utils/component-config-traversal.d.ts

@@ -0,0 +1,36 @@
+import type { EcoComponent, EcoComponentConfig } from '@ecopages/core';
+/**
+ * Walks a component config tree once, including nested layout configs and
+ * dependency component configs.
+ *
+ * The shared React integration code performs several different analyses over the
+ * same config graph. Centralizing the traversal keeps cycle handling and graph
+ * shape assumptions in one place instead of repeating them in the renderer and
+ * services.
+ */
+export declare function walkConfigTree(config: EcoComponentConfig | undefined, visitor: (config: EcoComponentConfig) => void, visited?: Set<EcoComponentConfig>): void;
+/**
+ * Walks a forest of root component configs using one shared visited set.
+ *
+ * This is useful when a page contributes multiple config roots, such as a page
+ * config plus a resolved layout config, and duplicate nested nodes should still
+ * be processed only once.
+ */
+export declare function walkConfigForest(configs: Iterable<EcoComponentConfig | undefined>, visitor: (config: EcoComponentConfig) => void): void;
+/**
+ * Collects values from a config tree while preserving the shared traversal and
+ * cycle protection behavior used across the React integration.
+ */
+export declare function collectFromConfigTree<T>(config: EcoComponentConfig | undefined, collector: (config: EcoComponentConfig) => T[]): T[];
+/**
+ * Collects values from multiple config roots with one shared visited set.
+ */
+export declare function collectFromConfigForest<T>(configs: Iterable<EcoComponentConfig | undefined>, collector: (config: EcoComponentConfig) => T[]): T[];
+/**
+ * Returns true when any node in the config tree matches the predicate.
+ */
+export declare function someInConfigTree(config: EcoComponentConfig | undefined, predicate: (config: EcoComponentConfig) => boolean): boolean;
+/**
+ * Reads config roots from partial components while tolerating undefined config.
+ */
+export declare function getComponentConfigs(components: Partial<EcoComponent>[]): Array<EcoComponentConfig | undefined>;

package/src/utils/component-config-traversal.js

@@ -0,0 +1,54 @@
+function walkConfigTree(config, visitor, visited = /* @__PURE__ */ new Set()) {
+  if (!config || visited.has(config)) {
+    return;
+  }
+  visited.add(config);
+  visitor(config);
+  if (config.layout?.config) {
+    walkConfigTree(config.layout.config, visitor, visited);
+  }
+  for (const component of config.dependencies?.components ?? []) {
+    walkConfigTree(component.config, visitor, visited);
+  }
+}
+function walkConfigForest(configs, visitor) {
+  const visited = /* @__PURE__ */ new Set();
+  for (const config of configs) {
+    walkConfigTree(config, visitor, visited);
+  }
+}
+function collectFromConfigTree(config, collector) {
+  const values = [];
+  walkConfigTree(config, (node) => {
+    values.push(...collector(node));
+  });
+  return values;
+}
+function collectFromConfigForest(configs, collector) {
+  const values = [];
+  walkConfigForest(configs, (node) => {
+    values.push(...collector(node));
+  });
+  return values;
+}
+function someInConfigTree(config, predicate) {
+  let matched = false;
+  walkConfigTree(config, (node) => {
+    if (matched) {
+      return;
+    }
+    matched = predicate(node);
+  });
+  return matched;
+}
+function getComponentConfigs(components) {
+  return components.map((component) => component.config);
+}
+export {
+  collectFromConfigForest,
+  collectFromConfigTree,
+  getComponentConfigs,
+  someInConfigTree,
+  walkConfigForest,
+  walkConfigTree
+};

package/src/utils/declared-modules.d.ts

@@ -29,7 +29,7 @@ export declare function normalizeDeclaredModuleSources(modules?: string[]): stri
  * Recursively walks a component config tree (including layouts and nested
  * `dependencies.components`) to collect all declared module sources.
  */
-export declare function collectDeclaredModulesInConfig(config: EcoComponentConfig | undefined, visited?: Set<EcoComponentConfig>): string[];
+export declare function collectDeclaredModulesInConfig(config: EcoComponentConfig | undefined): string[];
 /**
  * Collects declared module sources from an already imported page module.
  */

package/src/utils/declared-modules.js

@@ -1,3 +1,4 @@
+import { collectFromConfigTree } from "./component-config-traversal.js";
 function parseDeclaredModuleSource(value) {
   const source = value.trim();
   if (source.length === 0) return void 0;
@@ -16,21 +17,8 @@ function normalizeDeclaredModuleSources(modules) {
   }
   return Array.from(seen);
 }
-function collectDeclaredModulesInConfig(config, visited = /* @__PURE__ */ new Set()) {
-  if (!config || visited.has(config)) {
-    return [];
-  }
-  visited.add(config);
-  const declarations = normalizeDeclaredModuleSources(config.dependencies?.modules);
-  if (config.layout?.config) {
-    declarations.push(...collectDeclaredModulesInConfig(config.layout.config, visited));
-  }
-  for (const component of config.dependencies?.components ?? []) {
-    if (component.config) {
-      declarations.push(...collectDeclaredModulesInConfig(component.config, visited));
-    }
-  }
-  return declarations;
+function collectDeclaredModulesInConfig(config) {
+  return collectFromConfigTree(config, (node) => normalizeDeclaredModuleSources(node.dependencies?.modules));
 }
 function collectPageDeclaredModulesFromModule(pageModule) {
   const declarations = [
@@ -41,7 +29,10 @@ function collectPageDeclaredModulesFromModule(pageModule) {
 }
 async function collectPageDeclaredModules(pagePath) {
   try {
-    const pageModule = await import(pagePath);
+    const pageModule = await import(
+      /* @vite-ignore */
+      pagePath
+    );
     return collectPageDeclaredModulesFromModule(pageModule);
   } catch {
     return [];

package/src/utils/dynamic.test.browser.d.ts

@@ -0,0 +1 @@
+export {};

package/src/utils/dynamic.test.browser.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { dynamic } from "./dynamic.js";
+function createDeferredImport() {
+  let resolve;
+  const promise = new Promise((innerResolve) => {
+    resolve = innerResolve;
+  });
+  return {
+    promise,
+    resolve
+  };
+}
+describe("dynamic", () => {
+  afterEach(() => {
+    cleanup();
+  });
+  it("returns a browser lazy component that resolves through Suspense", async () => {
+    const deferredImport = createDeferredImport();
+    const DynamicComponent = dynamic(() => deferredImport.promise);
+    render(
+      /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("span", { children: "Loading dynamic component" }), children: /* @__PURE__ */ jsx(DynamicComponent, {}) })
+    );
+    expect(screen.getByText("Loading dynamic component")).toBeTruthy();
+    deferredImport.resolve({
+      default: () => /* @__PURE__ */ jsx("span", { children: "Dynamic content" })
+    });
+    expect(await screen.findByText("Dynamic content")).toBeTruthy();
+    expect(screen.queryByText("Loading dynamic component")).toBeNull();
+  });
+});