@mandujs/core 0.54.15 → 0.54.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mandujs/core",
-  "version": "0.54.15",
+  "version": "0.54.17",
   "description": "Mandu Framework Core - Spec, Generator, Guard, Runtime",
   "type": "module",
   "main": "./src/index.ts",

package/src/bundler/build.test.ts

@@ -207,6 +207,8 @@ describe("buildClientBundles vendor shims", () => {
     const runtimeSource = await readFile(path.join(rootDir, ".mandu", "client", "_runtime.js"), "utf-8");
     expect(runtimeSource).toContain("function readManduData");
     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("new Date");
     expect(runtimeSource).toContain("new Map");

package/src/bundler/build.ts

@@ -624,10 +624,48 @@ function readManduData() {
   return window.__MANDU_DATA__;
 }
 
-const getServerData = (id) => readManduData()[id]?.serverData || {};
-
-/**
- * Error Boundary 컴포넌트 (Class Component)
+const getServerData = (id) => readManduData()[id]?.serverData || {};
+
+function findPropsScript(id) {
+  const scripts = document.querySelectorAll('script[data-mandu-props]');
+  for (const script of scripts) {
+    if (script.getAttribute('data-mandu-props') === id) {
+      return script;
+    }
+  }
+  return null;
+}
+
+function parsePropsScript(id) {
+  const script = findPropsScript(id);
+  if (!script || !script.textContent) return null;
+  try {
+    return deserializeManduProps(script.textContent);
+  } catch (error) {
+    console.warn('[Mandu] Failed to parse data-mandu-props for island ' + id + ':', error);
+    return null;
+  }
+}
+
+function readDataProps(element) {
+  const propsEl = element.hasAttribute('data-props')
+    ? element
+    : element.querySelector('[data-props]');
+  if (!propsEl) return null;
+  try {
+    return deserializeManduProps(propsEl.getAttribute('data-props') || '{}');
+  } catch (error) {
+    console.warn('[Mandu] Failed to parse data-props fallback:', error);
+    return null;
+  }
+}
+
+function getIslandProps(id, element) {
+  return parsePropsScript(id) || readDataProps(element) || getServerData(id);
+}
+
+/**
+ * Error Boundary 컴포넌트 (Class Component)
  * Island의 errorBoundary 옵션을 지원
  */
 class IslandErrorBoundary extends Component {
@@ -872,23 +910,7 @@ async function loadAndHydrate(element, src) {
     // Dynamic import - 이 시점에 Island 모듈 로드
     const module = await import(src);
     const island = module.default;
-    let data = getServerData(id);
-
-    // Fallback: read data-props from the island root or a child element if
-    // __MANDU_DATA__ is empty. Inline partials put their serialized props on
-    // the root marker itself.
-    if (!data || Object.keys(data).length === 0) {
-      const propsEl = element.hasAttribute('data-props')
-        ? element
-        : element.querySelector('[data-props]');
-      if (propsEl) {
-        try {
-          data = deserializeManduProps(propsEl.getAttribute('data-props') || '{}');
-        } catch (e) {
-          console.warn('[Mandu] Failed to parse data-props fallback:', e);
-        }
-      }
-    }
+    const data = getIslandProps(id, element);
 
     // Mandu Island (preferred)
     if (island && island.__mandu_island === true) {
@@ -1582,6 +1604,7 @@ function generateIslandEntry(routeId: string, clientModulePath: string, exportNa
  * Mandu Island: ${commentRouteId} (Generated)
  * Pure export - no side effects
  */
+import React from "react";
 import * as islandModule from ${importSpecifier};
 
 const candidateExportNames = ${JSON.stringify(candidates)};
@@ -1600,7 +1623,13 @@ function resolveIslandExport(mod) {
 }
 
 const island = resolveIslandExport(islandModule);
-export default island;
+const exportedIsland = island && island.__mandu_island === true
+  ? island
+  : function ManduGeneratedIsland(props) {
+      return React.createElement(island, props || {});
+    };
+
+export default exportedIsland;
 `;
 }
 

package/src/runtime/__tests__/inline-client-hydration.test.ts

@@ -0,0 +1,134 @@
+import { afterEach, describe, expect, it } from "bun:test";
+import { mkdir, rm, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+import React from "react";
+import type { BundleManifest } from "../../bundler/types";
+import type { RoutesManifest } from "../../spec/schema";
+import {
+  createServerRegistry,
+  startServer,
+  type ManduServer,
+} from "../server";
+
+const TEST_ROOT = path.resolve(process.cwd(), ".tmp-test-artifacts", "inline-client-hydration");
+
+function hydratedManifest(routeId: string): BundleManifest {
+  return {
+    version: 1,
+    buildTime: "2026-05-23T00:00:00.000Z",
+    env: "production",
+    bundles: {
+      [routeId]: {
+        js: `/.mandu/client/${routeId}.island.js`,
+        dependencies: ["_runtime", "_react"],
+        priority: "visible",
+      },
+    },
+    shared: {
+      runtime: "/.mandu/client/_runtime.js",
+      vendor: "/.mandu/client/_react.js",
+      router: "/.mandu/client/_router.js",
+    },
+  };
+}
+
+async function resetTestRoot(): Promise<void> {
+  await rm(TEST_ROOT, { recursive: true, force: true });
+  await mkdir(TEST_ROOT, { recursive: true });
+}
+
+afterEach(async () => {
+  await rm(TEST_ROOT, { recursive: true, force: true });
+});
+
+describe("startServer inline client hydration", () => {
+  it("captures component props through sync server pages and inferred named client exports", async () => {
+    await resetTestRoot();
+
+    const routeId = "pledges-$id";
+    const clientModule = "src/client/widgets/comments-section/CommentsSection.client.tsx";
+    const clientPath = path.join(TEST_ROOT, clientModule);
+    await mkdir(path.dirname(clientPath), { recursive: true });
+    await writeFile(
+      clientPath,
+      `
+import React from "react";
+
+export function CommentsSection({ pledgeId, initialComments }) {
+  return React.createElement(
+    "section",
+    { "data-pledge-id": pledgeId },
+    initialComments.map((comment) =>
+      React.createElement("p", { key: comment.id }, comment.body)
+    )
+  );
+}
+`,
+      "utf-8",
+    );
+
+    const imported = await import(`${pathToFileURL(clientPath).href}?t=${Date.now()}`);
+    const CommentsSection = imported.CommentsSection as React.ComponentType<{
+      pledgeId: string;
+      initialComments: Array<{ id: string; body: string }>;
+    }>;
+
+    function PledgePage(): React.ReactElement {
+      return React.createElement(
+        "main",
+        null,
+        React.createElement(CommentsSection, {
+          pledgeId: "pledge-1",
+          initialComments: [{ id: "c1", body: "serialized comment" }],
+        }),
+      );
+    }
+
+    const registry = createServerRegistry();
+    registry.registerRouteComponent(routeId, PledgePage);
+
+    const manifest: RoutesManifest = {
+      version: 1,
+      routes: [
+        {
+          id: routeId,
+          kind: "page",
+          pattern: "/pledges/:id",
+          module: "app/pledges/[id]/page.tsx",
+          componentModule: "app/pledges/[id]/page.tsx",
+          clientModule,
+          hydration: { strategy: "island", priority: "visible", preload: false },
+        },
+      ],
+    };
+
+    let server: ManduServer | undefined;
+    try {
+      server = startServer(manifest, {
+        port: 0,
+        registry,
+        rootDir: TEST_ROOT,
+        bundleManifest: hydratedManifest(routeId),
+        transitions: false,
+        prefetch: false,
+        spa: false,
+        devtools: false,
+        silent: true,
+      });
+
+      const response = await fetch(`http://127.0.0.1:${server.server.port}/pledges/pledge-1`);
+      const html = await response.text();
+
+      expect(response.status).toBe(200);
+      expect(html).toContain('data-mandu-island="pledges-$id--0"');
+      expect(html).toContain('type="application/json" data-mandu-props="pledges-$id--0"');
+      expect(html).toContain('"pledgeId":"pledge-1"');
+      expect(html).toContain('"initialComments"');
+      expect(html).toContain("serialized comment");
+      expect(html).not.toContain('data-mandu-island="pledges-$id"');
+    } finally {
+      server?.stop();
+    }
+  });
+});

package/src/runtime/__tests__/page-render-response.test.ts

@@ -181,7 +181,9 @@ describe("runtime page render response orchestration", () => {
     const html = await response.text();
     expect(html).toContain('data-mandu-island="candidates-$id--0"');
     expect(html).toContain('data-mandu-src="/.mandu/client/candidates-$id.island.js"');
+    expect(html).toContain('type="application/json" data-mandu-props="candidates-$id--0"');
     expect(html).toContain(""pledges"");
+    expect(html).toContain('"pledges"');
     expect(html).toContain("Public transit");
     expect(html).not.toContain('data-mandu-island="candidates-$id"');
   });

package/src/runtime/page-render-response.ts

@@ -4,6 +4,7 @@ import type { HydrationConfig } from "../spec/schema";
 import type { CookieManager } from "../filling/context";
 import { renderSSR, renderStreamingResponse, resolveAsyncElement } from "./ssr";
 import { serializeProps } from "../client/serialize";
+import { escapeJsonForInlineScript } from "./escape";
 
 export interface InlineClientHydrationTarget {
   routeId: string;
@@ -94,28 +95,44 @@ async function resolveAndWrapInlineClientHydration(
 
   if (type === target.component) {
     const id = `${target.routeId}--${counter.value++}`;
+    const props = element.props ?? {};
+    const serializedProps = serializeProps(props);
     return {
       node: React.createElement(
-        "div",
-        {
-          "data-mandu-island": id,
-          "data-mandu-src": target.src,
-          "data-mandu-priority": target.priority,
-          "data-hydrate": priorityToHydrate(target.priority),
-          "data-props": serializeProps(element.props ?? {}),
-          style: { display: "contents" },
-        },
-        element,
+        React.Fragment,
+        null,
+        React.createElement(
+          "div",
+          {
+            "data-mandu-island": id,
+            "data-mandu-src": target.src,
+            "data-mandu-priority": target.priority,
+            "data-hydrate": priorityToHydrate(target.priority),
+            "data-props": serializedProps,
+            style: { display: "contents" },
+          },
+          element,
+        ),
+        React.createElement("script", {
+          type: "application/json",
+          "data-mandu-props": id,
+          dangerouslySetInnerHTML: {
+            __html: escapeJsonForInlineScript(serializedProps),
+          },
+        }),
       ),
       didWrap: true,
     };
   }
 
-  if (typeof type === "function" && isAsyncFunctionComponent(type)) {
-    const rendered = await (type as (props: Record<string, unknown>) => React.ReactNode | Promise<React.ReactNode>)(
+  if (typeof type === "function" && !isClassComponent(type)) {
+    const rendered = await renderFunctionComponentForInlineHydration(
+      type,
       element.props ?? {},
     );
-    return resolveAndWrapInlineClientHydration(rendered, target, counter);
+    if (rendered.ok) {
+      return resolveAndWrapInlineClientHydration(rendered.node, target, counter);
+    }
   }
 
   const props = element.props;
@@ -140,6 +157,42 @@ function isAsyncFunctionComponent(type: Function): boolean {
     (type as { constructor?: { name?: string } }).constructor?.name === "AsyncFunction";
 }
 
+function isClassComponent(type: Function): boolean {
+  return !!type.prototype?.isReactComponent;
+}
+
+async function renderFunctionComponentForInlineHydration(
+  type: Function,
+  props: Record<string, unknown>,
+): Promise<{ ok: true; node: React.ReactNode } | { ok: false }> {
+  const render = type as (props: Record<string, unknown>) => React.ReactNode | Promise<React.ReactNode>;
+  if (isAsyncFunctionComponent(type)) {
+    return { ok: true, node: await render(props) };
+  }
+
+  if (functionComponentLooksHookDependent(type)) {
+    return { ok: false };
+  }
+
+  try {
+    return { ok: true, node: await render(props) };
+  } catch {
+    return { ok: false };
+  }
+}
+
+function functionComponentLooksHookDependent(type: Function): boolean {
+  let source = "";
+  try {
+    source = Function.prototype.toString.call(type);
+  } catch {
+    return true;
+  }
+
+  return /\bReact\.use[A-Za-z0-9_$]*\s*\(/.test(source) ||
+    /\buse[A-Z][A-Za-z0-9_$]*\s*\(/.test(source);
+}
+
 function priorityToHydrate(priority: InlineClientHydrationTarget["priority"]): string {
   return priority === "immediate" ? "load" : priority;
 }

package/src/runtime/server.ts

@@ -1124,16 +1124,13 @@ async function resolveInlineClientHydrationTarget(
   rootDir: string,
   src: string,
 ): Promise<InlineClientHydrationTarget | undefined> {
-  if (!route.clientModule || !route.clientExportName || !src) {
+  if (!route.clientModule || !src) {
     return undefined;
   }
 
   try {
     const module = await import(path.join(rootDir, route.clientModule));
-    const exportName = route.clientExportName;
-    const component = exportName === "default"
-      ? module.default
-      : module[exportName] ?? module.default;
+    const component = resolveInlineClientHydrationComponent(module, route);
 
     if (!component) return undefined;
 
@@ -1152,6 +1149,46 @@ async function resolveInlineClientHydrationTarget(
   }
 }
 
+function resolveInlineClientHydrationComponent(
+  module: Record<string, unknown>,
+  route: { id: string; clientModule?: string; clientExportName?: string },
+): unknown {
+  if (module.default) return module.default;
+
+  const candidates = [
+    route.clientExportName && route.clientExportName !== "default" ? route.clientExportName : undefined,
+    inferInlineClientExportNameFromPath(route.clientModule),
+    inferInlineClientExportNameFromRouteId(route.id),
+  ].filter((candidate, index, values): candidate is string =>
+    !!candidate && values.indexOf(candidate) === index
+  );
+
+  for (const candidate of candidates) {
+    if (module[candidate]) return module[candidate];
+  }
+
+  const runtimeExports = Object.keys(module).filter((name) => name !== "__esModule");
+  return runtimeExports.length === 1 ? module[runtimeExports[0]] : undefined;
+}
+
+function inferInlineClientExportNameFromPath(clientModulePath: string | undefined): string | undefined {
+  if (!clientModulePath) return undefined;
+  const basename = path.basename(clientModulePath).replace(/\.[cm]?[jt]sx?$/, "");
+  const withoutClientSuffix = basename.replace(/\.(client|island)$/, "");
+  return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(withoutClientSuffix)
+    ? withoutClientSuffix
+    : undefined;
+}
+
+function inferInlineClientExportNameFromRouteId(routeId: string): string | undefined {
+  const pascal = routeId
+    .split(/[^A-Za-z0-9]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("");
+  return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(pascal) ? pascal : undefined;
+}
+
 const INTERNAL_CACHE_ENDPOINT = "/_mandu/cache";
 
 // ========== Request Handler ==========