@mandujs/core 0.54.17 → 0.54.19

package/src/bundler/build.test.ts

@@ -2,6 +2,11 @@ import { afterAll, beforeAll, describe, expect, test } from "bun:test";
 import { mkdtemp, mkdir, readFile, rm, writeFile } from "fs/promises";
 import path from "path";
 import { pathToFileURL } from "url";
+import { serializeProps } from "../client/serialize";
+import { toMatchSnapshot } from "../testing/snapshot";
+import { setupHappyDom } from "../../tests/setup";
+
+setupHappyDom();
 
 // 모든 테스트가 하나의 빌드 결과를 공유 — 병렬 Bun.build 충돌 방지
 let rootDir: string;
@@ -13,10 +18,78 @@ async function mkRepoTempDir(prefix: string): Promise<string> {
   return mkdtemp(path.join(repoTempRoot, prefix));
 }
 
-async function importBuiltModule(relativePath: string): Promise<Record<string, unknown>> {
-  const fileUrl = pathToFileURL(path.join(rootDir, relativePath)).href;
-  return import(`${fileUrl}?t=${Date.now()}`);
-}
+async function importBuiltModule(relativePath: string): Promise<Record<string, unknown>> {
+  const fileUrl = pathToFileURL(path.join(rootDir, relativePath)).href;
+  return import(`${fileUrl}?t=${Date.now()}`);
+}
+
+async function evaluateGeneratedHydrationRuntime(): Promise<{ hydrateIslands: () => void }> {
+  const sourcePath = path.join(rootDir, ".mandu", "client", "_runtime.src.js");
+  const bundledPath = path.join(rootDir, ".mandu", "client", "_runtime.js");
+  const runtimeSource = await readFile(await Bun.file(sourcePath).exists() ? sourcePath : bundledPath, "utf-8");
+  const instrumented = runtimeSource
+    .replace(
+      /import\s+React,\s*\{[^}]*\}\s+from\s+['"]react['"];?/,
+      "const React = globalThis.__MANDU_TEST_REACT__; const { useState, useEffect, Component } = React;",
+    )
+    .replace(
+      /import\s+\{[^}]*\}\s+from\s+['"]react-dom\/client['"];?/,
+      "const { hydrateRoot, createRoot } = globalThis.__MANDU_TEST_REACT_DOM_CLIENT__;",
+    )
+    .replace(
+      /export\s*\{[^}]*\};?/g,
+      "globalThis.__MANDU_TEST_RUNTIME__ = { hydrateIslands, unmountIsland, hydratedRoots };",
+    );
+
+  const reactStub = {
+    Component: class {},
+    createElement(type: unknown, props: Record<string, unknown> | null, ...children: unknown[]) {
+      if (
+        typeof type === "function" &&
+        !(typeof type === "function" && "prototype" in type && (type as { prototype?: { render?: unknown } }).prototype?.render)
+      ) {
+        return (type as (props: Record<string, unknown>) => unknown)({
+          ...(props ?? {}),
+          children: children.length <= 1 ? children[0] : children,
+        });
+      }
+      return { type, props: props ?? {}, children };
+    },
+    isValidElement(value: unknown) {
+      return !!value && typeof value === "object" && "type" in value;
+    },
+    useEffect(effect: () => void) {
+      effect();
+    },
+    useState<T>(initial: T) {
+      return [initial, () => {}] as const;
+    },
+  };
+  const rootStub = {
+    render() {},
+    unmount() {},
+  };
+  Object.assign(globalThis, {
+    __MANDU_TEST_REACT__: reactStub,
+    __MANDU_TEST_REACT_DOM_CLIENT__: {
+      createRoot: () => rootStub,
+      hydrateRoot: () => rootStub,
+    },
+  });
+
+  new Function(instrumented)();
+  return (globalThis as typeof globalThis & {
+    __MANDU_TEST_RUNTIME__: { hydrateIslands: () => void };
+  }).__MANDU_TEST_RUNTIME__;
+}
+
+async function waitForRuntimeAssertion(assertion: () => boolean): Promise<void> {
+  for (let attempt = 0; attempt < 25; attempt++) {
+    if (assertion()) return;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  }
+  expect(assertion()).toBe(true);
+}
 
 /**
  * Run `buildClientBundles` in an isolated `bun` subprocess.
@@ -34,7 +107,31 @@ async function runBuildInSubprocess(root: string, mode?: string): Promise<{
   success: boolean;
   errors: string[];
   manifest?: {
+    routes?: Array<{
+      id?: string;
+      module?: string;
+      componentModule?: string;
+      boundaries?: Array<{
+        id?: string;
+        routeId?: string;
+        module?: string;
+        importSpecifier?: string;
+        exportName?: string;
+        localName?: string;
+        hydrate?: string;
+        ordinal?: number;
+        propsSource?: string;
+        propsKeys?: string[];
+        hasSpreadProps?: boolean;
+        source?: {
+          file?: string;
+          line?: number;
+          column?: number;
+        };
+      }>;
+    }>;
     bundles?: Record<string, { js?: string }>;
+    boundaries?: Record<string, { js?: string; route?: string; module?: string; exportName?: string; hydrate?: string }>;
   } | null;
 }> {
   const runner = path.join(
@@ -127,7 +224,7 @@ afterAll(async () => {
 // is now sidestepped by running `buildClientBundles` in a spawned `bun`
 // subprocess via `__tests__/build-runner.ts`. In-process retry does not
 // recover from that one; a fresh module graph does.
-describe("buildClientBundles vendor shims", () => {
+describe("buildClientBundles vendor shims", () => {
   test("build succeeds", () => {
     if (!result.success) {
       console.error("[build.test] errors:", result.errors);
@@ -209,11 +306,174 @@ describe("buildClientBundles vendor shims", () => {
     expect(runtimeSource).toContain("document.getElementById(\"__MANDU_DATA__\")");
     expect(runtimeSource).toContain("function parsePropsScript");
     expect(runtimeSource).toContain("data-mandu-props");
-    expect(runtimeSource).toContain("deserializeManduProps");
+    expect(runtimeSource).toContain("Missing boundary-local props for transformed client boundary");
+    expect(runtimeSource).toContain("warnedBoundaryPropFallbacks");
+    expect(runtimeSource).toContain("deserializeProps");
     expect(runtimeSource).toContain("new Date");
     expect(runtimeSource).toContain("new Map");
   });
-
+
+  test("runtime hydrates named client boundary from boundary-local props before route data", async () => {
+    const modulePath = path.join(rootDir, ".mandu", "client", "runtime-named-boundary.js");
+    await writeFile(
+      modulePath,
+      `
+        export default function WrongDefault(props) {
+          globalThis.__MANDU_TEST_DEFAULT_PROPS__ = props;
+          return null;
+        }
+        export function NamedBoundary(props) {
+          globalThis.__MANDU_TEST_NAMED_PROPS__ = props;
+          return null;
+        }
+      `,
+      "utf-8",
+    );
+    Object.assign(globalThis, {
+      __MANDU_TEST_NAMED_PROPS__: undefined,
+      __MANDU_TEST_DEFAULT_PROPS__: undefined,
+    });
+    document.body.innerHTML = `
+      <div
+        data-mandu-island="named--0"
+        data-mandu-boundary-id="named--0"
+        data-mandu-route-id="named-route"
+        data-mandu-client-export="NamedBoundary"
+        data-mandu-src="${pathToFileURL(modulePath).href}?t=${Date.now()}"
+        data-hydrate="load"
+      ></div>
+      <script type="application/json" data-mandu-props="named--0">${serializeProps({ label: "boundary-local" })}</script>
+    `;
+    (window as typeof window & { __MANDU_DATA__?: unknown; __MANDU_ROOTS__?: Map<string, unknown> }).__MANDU_DATA__ = {
+      "named-route": { serverData: { label: "route-data" } },
+    };
+    (window as typeof window & { __MANDU_ROOTS__?: Map<string, unknown> }).__MANDU_ROOTS__ = new Map();
+
+    const runtime = await evaluateGeneratedHydrationRuntime();
+    runtime.hydrateIslands();
+
+    await waitForRuntimeAssertion(() =>
+      (globalThis as typeof globalThis & { __MANDU_TEST_NAMED_PROPS__?: { label?: string } }).__MANDU_TEST_NAMED_PROPS__?.label === "boundary-local"
+    );
+    expect((globalThis as typeof globalThis & { __MANDU_TEST_DEFAULT_PROPS__?: unknown }).__MANDU_TEST_DEFAULT_PROPS__).toBeUndefined();
+  });
+
+  test("runtime hydrates default client boundary from boundary-local props", async () => {
+    const modulePath = path.join(rootDir, ".mandu", "client", "runtime-default-boundary.js");
+    await writeFile(
+      modulePath,
+      `
+        export default function DefaultBoundary(props) {
+          globalThis.__MANDU_TEST_DEFAULT_BOUNDARY_PROPS__ = props;
+          return null;
+        }
+      `,
+      "utf-8",
+    );
+    Object.assign(globalThis, {
+      __MANDU_TEST_DEFAULT_BOUNDARY_PROPS__: undefined,
+    });
+    document.body.innerHTML = `
+      <div
+        data-mandu-island="default--0"
+        data-mandu-boundary-id="default--0"
+        data-mandu-route-id="default-route"
+        data-mandu-client-export="default"
+        data-mandu-src="${pathToFileURL(modulePath).href}?t=${Date.now()}"
+        data-hydrate="load"
+      ></div>
+      <script type="application/json" data-mandu-props="default--0">${serializeProps({ label: "default-boundary" })}</script>
+    `;
+    (window as typeof window & { __MANDU_DATA__?: unknown; __MANDU_ROOTS__?: Map<string, unknown> }).__MANDU_DATA__ = {};
+    (window as typeof window & { __MANDU_ROOTS__?: Map<string, unknown> }).__MANDU_ROOTS__ = new Map();
+
+    const runtime = await evaluateGeneratedHydrationRuntime();
+    runtime.hydrateIslands();
+
+    await waitForRuntimeAssertion(() =>
+      (globalThis as typeof globalThis & { __MANDU_TEST_DEFAULT_BOUNDARY_PROPS__?: { label?: string } }).__MANDU_TEST_DEFAULT_BOUNDARY_PROPS__?.label === "default-boundary"
+    );
+  });
+
+  test("runtime keeps explicit island API data-props fallback working", async () => {
+    const modulePath = path.join(rootDir, ".mandu", "client", "runtime-explicit-island.js");
+    await writeFile(
+      modulePath,
+      `
+        export default {
+          __mandu_island: true,
+          definition: {
+            setup(data) {
+              globalThis.__MANDU_TEST_EXPLICIT_ISLAND_DATA__ = data;
+              return data;
+            },
+            render() {
+              return null;
+            }
+          }
+        };
+      `,
+      "utf-8",
+    );
+    Object.assign(globalThis, {
+      __MANDU_TEST_EXPLICIT_ISLAND_DATA__: undefined,
+    });
+    document.body.innerHTML = `
+      <div
+        data-mandu-island="explicit-island"
+        data-mandu-src="${pathToFileURL(modulePath).href}?t=${Date.now()}"
+        data-props="${serializeProps({ label: "data-props" }).replace(/"/g, "&quot;")}"
+        data-hydrate="load"
+      ></div>
+    `;
+    (window as typeof window & { __MANDU_DATA__?: unknown; __MANDU_ROOTS__?: Map<string, unknown> }).__MANDU_DATA__ = {};
+    (window as typeof window & { __MANDU_ROOTS__?: Map<string, unknown> }).__MANDU_ROOTS__ = new Map();
+
+    const runtime = await evaluateGeneratedHydrationRuntime();
+    runtime.hydrateIslands();
+
+    await waitForRuntimeAssertion(() =>
+      (globalThis as typeof globalThis & { __MANDU_TEST_EXPLICIT_ISLAND_DATA__?: { label?: string } }).__MANDU_TEST_EXPLICIT_ISLAND_DATA__?.label === "data-props"
+    );
+  });
+
+  test("runtime falls back to route-level server data when boundary-local props are absent", async () => {
+    const modulePath = path.join(rootDir, ".mandu", "client", "runtime-route-data-fallback.js");
+    await writeFile(
+      modulePath,
+      `
+        export default function RouteFallbackBoundary(props) {
+          globalThis.__MANDU_TEST_ROUTE_DATA_FALLBACK_PROPS__ = props;
+          return null;
+        }
+      `,
+      "utf-8",
+    );
+    Object.assign(globalThis, {
+      __MANDU_TEST_ROUTE_DATA_FALLBACK_PROPS__: undefined,
+    });
+    document.body.innerHTML = `
+      <div
+        data-mandu-island="route-fallback--0"
+        data-mandu-boundary-id="route-fallback--0"
+        data-mandu-route-id="route-fallback"
+        data-mandu-src="${pathToFileURL(modulePath).href}?t=${Date.now()}"
+        data-hydrate="load"
+      ></div>
+    `;
+    (window as typeof window & { __MANDU_DATA__?: unknown; __MANDU_ROOTS__?: Map<string, unknown> }).__MANDU_DATA__ = {
+      "route-fallback": { serverData: { label: "route-level" } },
+    };
+    (window as typeof window & { __MANDU_ROOTS__?: Map<string, unknown> }).__MANDU_ROOTS__ = new Map();
+
+    const runtime = await evaluateGeneratedHydrationRuntime();
+    runtime.hydrateIslands();
+
+    await waitForRuntimeAssertion(() =>
+      (globalThis as typeof globalThis & { __MANDU_TEST_ROUTE_DATA_FALLBACK_PROPS__?: { label?: string } }).__MANDU_TEST_ROUTE_DATA_FALLBACK_PROPS__?.label === "route-level"
+    );
+  });
+
   test("does not bundle a server page when stale manifest marks page.tsx as clientModule", async () => {
     const staleRoot = await mkRepoTempDir("stale-client-module-");
     try {
@@ -404,5 +664,214 @@ describe("buildClientBundles vendor shims", () => {
     } finally {
       await rm(missingRoot, { recursive: true, force: true });
     }
-  });
-});
+  });
+});
+
+describe("buildClientBundles client boundaries", () => {
+  async function createBoundaryFixture(prefix: string): Promise<string> {
+    const boundaryRoot = await mkRepoTempDir(prefix);
+    await mkdir(path.join(boundaryRoot, "app", "boundary"), { recursive: true });
+    await mkdir(path.join(boundaryRoot, "src", "client"), { recursive: true });
+    await writeFile(
+      path.join(boundaryRoot, "package.json"),
+      JSON.stringify({ name: "mandu-boundary-test", type: "module" }, null, 2),
+      "utf-8",
+    );
+    await writeFile(
+      path.join(boundaryRoot, "app", "boundary", "page.tsx"),
+      "export default function Page() { return null; }\n",
+      "utf-8",
+    );
+    await writeFile(
+      path.join(boundaryRoot, "src", "client", "BoundaryWidget.client.tsx"),
+      `
+        import React from "react";
+
+        export default function WrongDefault({ label }) {
+          return React.createElement("p", null, "default:" + label);
+        }
+
+        export function BoundaryWidget({ label }) {
+          return React.createElement("button", null, "named:" + label);
+        }
+      `,
+      "utf-8",
+    );
+    return boundaryRoot;
+  }
+
+  test("emits boundary bundle manifest entries", async () => {
+    const boundaryRoot = await createBoundaryFixture("bundler-boundary-");
+    try {
+      const boundaryResult = await runBuildInSubprocess(boundaryRoot, "client-boundary");
+
+      if (!boundaryResult.success) {
+        console.error("[build.test boundary] errors:", boundaryResult.errors);
+      }
+      expect(boundaryResult.success).toBe(true);
+      expect(boundaryResult.manifest?.boundaries?.["boundary-demo--0"]).toMatchObject({
+        route: "boundary-demo",
+        module: "src/client/BoundaryWidget.client.tsx",
+        exportName: "BoundaryWidget",
+        hydrate: "visible",
+      });
+      expect(boundaryResult.manifest?.boundaries?.["boundary-demo--0"]?.js).toMatch(
+        /^\/\.mandu\/client\/boundary-demo--0\.boundary\.js$/,
+      );
+      expect(boundaryResult.manifest?.bundles?.["boundary-demo"]).toBeUndefined();
+
+      const refreshGlobal = globalThis as typeof globalThis & {
+        $RefreshReg$?: unknown;
+        $RefreshSig$?: unknown;
+      };
+      refreshGlobal.$RefreshReg$ = () => {};
+      refreshGlobal.$RefreshSig$ = () => (type: unknown) => type;
+      try {
+        const boundaryBundle = await import(
+          `${pathToFileURL(path.join(boundaryRoot, ".mandu", "client", "boundary-demo--0.boundary.js")).href}?t=${Date.now()}`
+        );
+        const React = await import("react");
+        const { renderToStaticMarkup } = await import("react-dom/server");
+
+        expect(typeof boundaryBundle.default).toBe("function");
+        expect(typeof boundaryBundle.BoundaryWidget).toBe("function");
+        expect(renderToStaticMarkup(React.createElement(boundaryBundle.default, { label: "ok" }))).toContain("named:ok");
+        expect(renderToStaticMarkup(React.createElement(boundaryBundle.BoundaryWidget, { label: "ok" }))).toContain("named:ok");
+      } finally {
+        delete refreshGlobal.$RefreshReg$;
+        delete refreshGlobal.$RefreshSig$;
+      }
+    } finally {
+      await rm(boundaryRoot, { recursive: true, force: true });
+    }
+  });
+
+  test("snapshots route and bundle boundary metadata", async () => {
+    const boundaryRoot = await createBoundaryFixture("bundler-boundary-snapshot-");
+    try {
+      const boundaryResult = await runBuildInSubprocess(boundaryRoot, "client-boundary");
+      expect(boundaryResult.success).toBe(true);
+
+      toMatchSnapshot(
+        {
+          routes: boundaryResult.manifest?.routes?.map((route) => ({
+            id: route.id,
+            module: route.module,
+            componentModule: route.componentModule,
+            boundaries: route.boundaries,
+          })),
+          bundleBoundaries: boundaryResult.manifest?.boundaries,
+        },
+        {
+          testFile: path.join(import.meta.dir, "build.test.ts"),
+          name: "client boundary manifest metadata",
+        },
+      );
+    } finally {
+      await rm(boundaryRoot, { recursive: true, force: true });
+    }
+  });
+
+  test("updates boundary manifest entries in target-route builds", async () => {
+    const boundaryRoot = await createBoundaryFixture("bundler-boundary-target-");
+    try {
+      const boundaryResult = await runBuildInSubprocess(boundaryRoot, "client-boundary-target");
+      expect(boundaryResult.success).toBe(true);
+      expect(boundaryResult.manifest?.boundaries?.["boundary-demo--0"]?.js).toBe(
+        "/.mandu/client/boundary-demo--0.boundary.js",
+      );
+    } finally {
+      await rm(boundaryRoot, { recursive: true, force: true });
+    }
+  });
+
+  test("fails before manifest generation when boundary ids are duplicated", async () => {
+    const boundaryRoot = await createBoundaryFixture("bundler-boundary-duplicate-");
+    try {
+      const boundaryResult = await runBuildInSubprocess(boundaryRoot, "client-boundary-duplicate-id");
+
+      expect(boundaryResult.success).toBe(false);
+      expect(boundaryResult.errors.join("\n")).toContain("MANDU_BOUNDARY_DUPLICATE_ID");
+      expect(boundaryResult.errors.join("\n")).toContain("boundary-demo--0");
+    } finally {
+      await rm(boundaryRoot, { recursive: true, force: true });
+    }
+  });
+
+  test("updates boundary manifest entries when framework bundles are skipped", async () => {
+    const boundaryRoot = await createBoundaryFixture("bundler-boundary-skip-");
+    try {
+      const boundaryResult = await runBuildInSubprocess(boundaryRoot, "client-boundary-skip-framework");
+      expect(boundaryResult.success).toBe(true);
+      expect(boundaryResult.manifest?.boundaries?.["boundary-demo--0"]?.js).toBe(
+        "/.mandu/client/boundary-demo--0.boundary.js",
+      );
+    } finally {
+      await rm(boundaryRoot, { recursive: true, force: true });
+    }
+  });
+
+  test("builds manifest-generated boundaries from route-owned server wrappers", async () => {
+    const boundaryRoot = await mkRepoTempDir("bundler-boundary-generated-wrapper-");
+    try {
+      await mkdir(path.join(boundaryRoot, "app", "account", "components"), { recursive: true });
+      await writeFile(
+        path.join(boundaryRoot, "package.json"),
+        JSON.stringify({ name: "mandu-boundary-generated-wrapper-test", type: "module" }, null, 2),
+        "utf-8",
+      );
+      await writeFile(
+        path.join(boundaryRoot, "app", "account", "page.tsx"),
+        `
+          import { AccountShell } from "./components/AccountShell";
+
+          export default function Page() {
+            return <main><AccountShell name="Ada" /></main>;
+          }
+        `,
+        "utf-8",
+      );
+      await writeFile(
+        path.join(boundaryRoot, "app", "account", "components", "AccountShell.tsx"),
+        `
+          import { AccountCard } from "./AccountCard.client";
+
+          export function AccountShell({ name }) {
+            return <AccountCard name={name} />;
+          }
+        `,
+        "utf-8",
+      );
+      await writeFile(
+        path.join(boundaryRoot, "app", "account", "components", "AccountCard.client.tsx"),
+        `
+          import React from "react";
+          export function AccountCard({ name }) {
+            return React.createElement("button", null, name);
+          }
+        `,
+        "utf-8",
+      );
+
+      const boundaryResult = await runBuildInSubprocess(boundaryRoot, "client-boundary-generated-transitive");
+
+      if (!boundaryResult.success) {
+        console.error("[build.test generated boundary] errors:", boundaryResult.errors);
+      }
+      expect(boundaryResult.success).toBe(true);
+      expect(boundaryResult.manifest?.boundaries?.["account--0"]).toMatchObject({
+        route: "account",
+        module: "app/account/components/AccountCard.client.tsx",
+        exportName: "AccountCard",
+        hydrate: "visible",
+      });
+      expect(boundaryResult.manifest?.boundaries?.["account--0"]?.js).toBe(
+        "/.mandu/client/account--0.boundary.js",
+      );
+      expect(boundaryResult.manifest?.bundles?.account).toBeUndefined();
+      expect(await Bun.file(path.join(boundaryRoot, ".mandu", "client", "account--0.boundary.js")).exists()).toBe(true);
+    } finally {
+      await rm(boundaryRoot, { recursive: true, force: true });
+    }
+  });
+});