@mandujs/core 0.54.16 → 0.54.17

package/package.json

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

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/page-render-response.ts

@@ -125,11 +125,14 @@ async function resolveAndWrapInlineClientHydration(
     };
   }
 
-  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;
@@ -154,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 ==========