@mandujs/core 0.54.15 → 0.54.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mandujs/core",
-  "version": "0.54.15",
+  "version": "0.54.16",
   "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__/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,18 +95,31 @@ 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,
     };