@mandujs/core 0.54.32 → 0.55.0-beta.1

package/src/generator/templates.ts

@@ -1,4 +1,4 @@
-import { needsHydration, type RouteSpec } from "../spec/schema";
+import { needsHydration, type RouteSpec } from "../spec/schema";
 import { GENERATED_RELATIVE_PATHS } from "../paths";
 
 export function generateApiHandler(route: RouteSpec): string {
@@ -238,43 +238,43 @@ function computeSlotImportPath(slotModule: string, fromDir: string): string {
   return result;
 }
 
-export function generatePageComponent(route: RouteSpec): string {
-  // Island-First: clientModule이 있으면 Island render를 SSR에서 직접 사용
-  if (route.clientModule) {
-    return generatePageComponentWithIsland(route);
-  }
-
-  const hasCompilerOwnedBoundaries = (route.boundaries?.length ?? 0) > 0;
-
-  if (needsHydration(route) && !hasCompilerOwnedBoundaries) {
-    throw new Error(
-      `[${route.id}] Route has hydration strategy "${route.hydration?.strategy}" but no clientModule. ` +
-      "Refusing to generate a placeholder page because it would disagree with runtime hydration state.",
-    );
-  }
-
-  // slotModule이 있으면 PageHandler 형식으로 생성 (filling 포함)
-  if (route.slotModule) {
-    return generatePageHandlerWithSlot(route);
-  }
-
-  if (route.kind === "page" && route.componentModule) {
-    return generatePageComponentFromModule(route);
-  }
-
-  if (needsHydration(route)) {
-    throw new Error(
-      `[${route.id}] Route has hydration strategy "${route.hydration?.strategy}" and compiler-owned boundaries, ` +
-      "but no componentModule. Refusing to generate a placeholder page because it would disagree with runtime hydration state.",
-    );
-  }
-
-  const pageName = toPascalCase(route.id);
-
-  // Legacy fallback for malformed historical manifests that lack componentModule.
-  return `// Generated by Mandu - DO NOT EDIT DIRECTLY
-// Route ID: ${route.id}
-// Pattern: ${route.pattern}
+export function generatePageComponent(route: RouteSpec): string {
+  // Island-First: clientModule이 있으면 Island render를 SSR에서 직접 사용
+  if (route.clientModule) {
+    return generatePageComponentWithIsland(route);
+  }
+
+  const hasCompilerOwnedBoundaries = (route.boundaries?.length ?? 0) > 0;
+
+  if (needsHydration(route) && !hasCompilerOwnedBoundaries) {
+    throw new Error(
+      `[${route.id}] Route has hydration strategy "${route.hydration?.strategy}" but no clientModule. ` +
+      "Refusing to generate a placeholder page because it would disagree with runtime hydration state.",
+    );
+  }
+
+  // slotModule이 있으면 PageHandler 형식으로 생성 (filling 포함)
+  if (route.slotModule) {
+    return generatePageHandlerWithSlot(route);
+  }
+
+  if (route.kind === "page" && route.componentModule) {
+    return generatePageComponentFromModule(route);
+  }
+
+  if (needsHydration(route)) {
+    throw new Error(
+      `[${route.id}] Route has hydration strategy "${route.hydration?.strategy}" and compiler-owned boundaries, ` +
+      "but no componentModule. Refusing to generate a placeholder page because it would disagree with runtime hydration state.",
+    );
+  }
+
+  const pageName = toPascalCase(route.id);
+
+  // Legacy fallback for malformed historical manifests that lack componentModule.
+  return `// Generated by Mandu - DO NOT EDIT DIRECTLY
+// Route ID: ${route.id}
+// Pattern: ${route.pattern}
 
 import React from "react";
 
@@ -290,31 +290,31 @@ export default function ${pageName}Page({ params }: Props): React.ReactElement {
     React.createElement("p", null, "Pattern: ${route.pattern}")
   );
 }
-`;
-}
-
-export function generatePageComponentFromModule(route: RouteSpec): string {
-  const pageName = toPascalCase(route.id);
-  const pageImportPath = computeSlotImportPath(route.componentModule!, GENERATED_RELATIVE_PATHS.webRoutes);
-
-  return `// Generated by Mandu - DO NOT EDIT DIRECTLY
-// Route ID: ${route.id}
-// Pattern: ${route.pattern}
-// Page Module: ${route.componentModule}
-
-import React from "react";
-import pageModule from "${pageImportPath}";
-
-interface Props {
-  params: Record<string, string>;
-  loaderData?: unknown;
-}
-
-export default function ${pageName}Page(props: Props): React.ReactElement {
-  return React.createElement(pageModule as React.ComponentType<Props>, props);
-}
-`;
-}
+`;
+}
+
+export function generatePageComponentFromModule(route: RouteSpec): string {
+  const pageName = toPascalCase(route.id);
+  const pageImportPath = computeSlotImportPath(route.componentModule!, GENERATED_RELATIVE_PATHS.webRoutes);
+
+  return `// Generated by Mandu - DO NOT EDIT DIRECTLY
+// Route ID: ${route.id}
+// Pattern: ${route.pattern}
+// Page Module: ${route.componentModule}
+
+import React from "react";
+import pageModule from "${pageImportPath}";
+
+interface Props {
+  params: Record<string, string>;
+  loaderData?: unknown;
+}
+
+export default function ${pageName}Page(props: Props): React.ReactElement {
+  return React.createElement(pageModule as React.ComponentType<Props>, props);
+}
+`;
+}
 
 /**
  * Island-First Rendering: SSR이 island의 render 함수를 직접 사용
@@ -322,51 +322,51 @@ export default function ${pageName}Page(props: Props): React.ReactElement {
  * - SSR과 클라이언트가 동일한 렌더링 로직 사용 → 불일치 구조적 방지
  * - slotModule 유무에 따라 두 가지 변형 생성
  */
-export function generatePageComponentWithIsland(route: RouteSpec): string {
-  const pageName = toPascalCase(route.id);
-  const clientImportPath = computeSlotImportPath(route.clientModule!, GENERATED_RELATIVE_PATHS.webRoutes);
-  const pageImportPath = route.kind === "page" && route.componentModule
-    ? computeSlotImportPath(route.componentModule, GENERATED_RELATIVE_PATHS.webRoutes)
-    : null;
-  const pageModuleComment = route.kind === "page" && route.componentModule
-    ? `// Page Module: ${route.componentModule}\n`
-    : "";
-  const shouldImportPageModule = !!pageImportPath &&
-    normalizeRouteModulePath(route.componentModule) !== normalizeRouteModulePath(route.clientModule);
-  const pageImport = shouldImportPageModule ? `import pageModule from "${pageImportPath}";\n` : "";
-  const pageRenderTarget = shouldImportPageModule ? "pageModule" : "islandModule";
-  const renderHelper = generateClientBackedPageRenderHelper(pageRenderTarget, route.id);
-
-  // clientModule + slotModule → PageRegistration 형식
-  if (route.slotModule) {
-    const slotImportPath = computeSlotImportPath(route.slotModule!, GENERATED_RELATIVE_PATHS.webRoutes);
+export function generatePageComponentWithIsland(route: RouteSpec): string {
+  const pageName = toPascalCase(route.id);
+  const clientImportPath = computeSlotImportPath(route.clientModule!, GENERATED_RELATIVE_PATHS.webRoutes);
+  const pageImportPath = route.kind === "page" && route.componentModule
+    ? computeSlotImportPath(route.componentModule, GENERATED_RELATIVE_PATHS.webRoutes)
+    : null;
+  const pageModuleComment = route.kind === "page" && route.componentModule
+    ? `// Page Module: ${route.componentModule}\n`
+    : "";
+  const shouldImportPageModule = !!pageImportPath &&
+    normalizeRouteModulePath(route.componentModule) !== normalizeRouteModulePath(route.clientModule);
+  const pageImport = shouldImportPageModule ? `import pageModule from "${pageImportPath}";\n` : "";
+  const pageRenderTarget = shouldImportPageModule ? "pageModule" : "islandModule";
+  const renderHelper = generateClientBackedPageRenderHelper(pageRenderTarget, route.id);
+
+  // clientModule + slotModule → PageRegistration 형식
+  if (route.slotModule) {
+    const slotImportPath = computeSlotImportPath(route.slotModule!, GENERATED_RELATIVE_PATHS.webRoutes);
 
     return `// Generated by Mandu - DO NOT EDIT DIRECTLY
 // Island-First Rendering + Slot Module
 // Route ID: ${route.id}
-// Pattern: ${route.pattern}
-// Client Module: ${route.clientModule}
-// Slot Module: ${route.slotModule}
-${pageModuleComment}
-
-import React from "react";
-import filling from "${slotImportPath}";
-import islandModule from "${clientImportPath}";
-${pageImport}
-
-interface Props {
-  params: Record<string, string>;
-  loaderData?: unknown;
-}
-
-${renderHelper}
-
-function ${pageName}Page({ params, loaderData }: Props): React.ReactElement {
-  const serverData = (loaderData || {}) as Record<string, unknown>;
-  return renderClientBackedPage({ params, loaderData }, serverData);
-}
-
-// PageRegistration 형식으로 export (server.ts의 registerPageHandler용)
+// Pattern: ${route.pattern}
+// Client Module: ${route.clientModule}
+// Slot Module: ${route.slotModule}
+${pageModuleComment}
+
+import React from "react";
+import filling from "${slotImportPath}";
+import islandModule from "${clientImportPath}";
+${pageImport}
+
+interface Props {
+  params: Record<string, string>;
+  loaderData?: unknown;
+}
+
+${renderHelper}
+
+function ${pageName}Page({ params, loaderData }: Props): React.ReactElement {
+  const serverData = (loaderData || {}) as Record<string, unknown>;
+  return renderClientBackedPage({ params, loaderData }, serverData);
+}
+
+// PageRegistration 형식으로 export (server.ts의 registerPageHandler용)
 export default {
   component: ${pageName}Page,
   filling: filling,
@@ -377,124 +377,124 @@ export default {
   // clientModule만 (slotModule 없음) → default export 컴포넌트
   return `// Generated by Mandu - DO NOT EDIT DIRECTLY
 // Island-First Rendering: SSR이 island render 직접 사용
-// Route ID: ${route.id}
-// Pattern: ${route.pattern}
-// Client Module: ${route.clientModule}
-${pageModuleComment}
-
-import React from "react";
-import islandModule from "${clientImportPath}";
-${pageImport}
-
-interface Props {
-  params: Record<string, string>;
-  loaderData?: unknown;
-}
-
-${renderHelper}
-
-export default function ${pageName}Page({ params, loaderData }: Props): React.ReactElement {
-  const serverData = (loaderData || {}) as Record<string, unknown>;
-  return renderClientBackedPage({ params, loaderData }, serverData);
-}
-`;
-}
+// Route ID: ${route.id}
+// Pattern: ${route.pattern}
+// Client Module: ${route.clientModule}
+${pageModuleComment}
+
+import React from "react";
+import islandModule from "${clientImportPath}";
+${pageImport}
+
+interface Props {
+  params: Record<string, string>;
+  loaderData?: unknown;
+}
+
+${renderHelper}
+
+export default function ${pageName}Page({ params, loaderData }: Props): React.ReactElement {
+  const serverData = (loaderData || {}) as Record<string, unknown>;
+  return renderClientBackedPage({ params, loaderData }, serverData);
+}
+`;
+}
 
 /**
  * slotModule이 있는 Page Route용 Handler 생성
  * - component와 filling을 함께 export
  * - server.ts에서 filling.executeLoader() 호출 가능
  */
-export function generatePageHandlerWithSlot(route: RouteSpec): string {
-  const pageName = toPascalCase(route.id);
-  const slotImportPath = computeSlotImportPath(route.slotModule!, GENERATED_RELATIVE_PATHS.serverRoutes);
-  const pageImportPath = route.kind === "page" && route.componentModule
-    ? computeSlotImportPath(route.componentModule, GENERATED_RELATIVE_PATHS.serverRoutes)
-    : null;
-  const pageImport = pageImportPath ? `import pageModule from "${pageImportPath}";\n` : "";
-  const pageRender = pageImportPath
-    ? `  return React.createElement(pageModule as React.ComponentType<Props>, { params, loaderData });`
-    : `  return React.createElement("div", null,
-    React.createElement("h1", null, "${pageName} Page"),
-    React.createElement("p", null, "Route ID: ${route.id}"),
-    React.createElement("p", null, "Pattern: ${route.pattern}"),
-    loaderData ? React.createElement("pre", null, JSON.stringify(loaderData, null, 2)) : null
-  );`;
-
-  return `// Generated by Mandu - DO NOT EDIT DIRECTLY
-// Route ID: ${route.id}
-// Pattern: ${route.pattern}
-// Slot Module: ${route.slotModule}
-
-import React from "react";
-import filling from "${slotImportPath}";
-${pageImport}
-
-interface Props {
-  params: Record<string, string>;
-  loaderData?: unknown;
-}
-
-function ${pageName}Page({ params, loaderData }: Props): React.ReactElement {
-${pageRender}
-}
-
-// PageRegistration 형식으로 export (server.ts의 registerPageHandler용)
+export function generatePageHandlerWithSlot(route: RouteSpec): string {
+  const pageName = toPascalCase(route.id);
+  const slotImportPath = computeSlotImportPath(route.slotModule!, GENERATED_RELATIVE_PATHS.serverRoutes);
+  const pageImportPath = route.kind === "page" && route.componentModule
+    ? computeSlotImportPath(route.componentModule, GENERATED_RELATIVE_PATHS.serverRoutes)
+    : null;
+  const pageImport = pageImportPath ? `import pageModule from "${pageImportPath}";\n` : "";
+  const pageRender = pageImportPath
+    ? `  return React.createElement(pageModule as React.ComponentType<Props>, { params, loaderData });`
+    : `  return React.createElement("div", null,
+    React.createElement("h1", null, "${pageName} Page"),
+    React.createElement("p", null, "Route ID: ${route.id}"),
+    React.createElement("p", null, "Pattern: ${route.pattern}"),
+    loaderData ? React.createElement("pre", null, JSON.stringify(loaderData, null, 2)) : null
+  );`;
+
+  return `// Generated by Mandu - DO NOT EDIT DIRECTLY
+// Route ID: ${route.id}
+// Pattern: ${route.pattern}
+// Slot Module: ${route.slotModule}
+
+import React from "react";
+import filling from "${slotImportPath}";
+${pageImport}
+
+interface Props {
+  params: Record<string, string>;
+  loaderData?: unknown;
+}
+
+function ${pageName}Page({ params, loaderData }: Props): React.ReactElement {
+${pageRender}
+}
+
+// PageRegistration 형식으로 export (server.ts의 registerPageHandler용)
 export default {
   component: ${pageName}Page,
   filling: filling,
 };
-`;
-}
-
-function generateClientBackedPageRenderHelper(pageRenderTarget: string, routeId: string): string {
-  return `type ManduIslandModule = {
-  __mandu_island: true;
-  definition: {
-    setup: (serverData: Record<string, unknown>) => unknown;
-    render: (props: unknown) => React.ReactNode;
-  };
-};
-
-function isManduIslandModule(value: unknown): value is ManduIslandModule {
-  const candidate = value as Partial<ManduIslandModule> | null;
-  return !!(
-    candidate &&
-    typeof candidate === "object" &&
-    candidate.__mandu_island === true &&
-    typeof candidate.definition?.setup === "function" &&
-    typeof candidate.definition?.render === "function"
-  );
-}
-
-function renderClientBackedPage(props: Props, serverData: Record<string, unknown>): React.ReactElement {
-  if (isManduIslandModule(islandModule)) {
-    const setupResult = islandModule.definition.setup(serverData);
-    return islandModule.definition.render(setupResult) as React.ReactElement;
-  }
-
-  if (typeof ${pageRenderTarget} === "function") {
-    return React.createElement(${pageRenderTarget} as React.ComponentType<Props>, props);
-  }
-
-  if (typeof islandModule === "function") {
-    return React.createElement(islandModule as React.ComponentType<Record<string, unknown>>, serverData);
-  }
-
-  if (React.isValidElement(${pageRenderTarget})) {
-    return ${pageRenderTarget} as React.ReactElement;
-  }
-
-  if (React.isValidElement(islandModule)) {
-    return islandModule as React.ReactElement;
-  }
-
-  throw new Error("[Mandu] Route ${routeId} clientModule must export a Mandu island or React component.");
-}`;
-}
-
-/**
- * Convert string to PascalCase (handles kebab-case, snake_case)
+`;
+}
+
+function generateClientBackedPageRenderHelper(pageRenderTarget: string, routeId: string): string {
+  return `type ManduIslandModule = {
+  __mandu_island: true;
+  definition: {
+    setup: (serverData: Record<string, unknown>) => unknown;
+    render: (props: unknown) => React.ReactNode;
+  };
+};
+
+function isManduIslandModule(value: unknown): value is ManduIslandModule {
+  const candidate = value as Partial<ManduIslandModule> | null;
+  return !!(
+    candidate &&
+    typeof candidate === "object" &&
+    candidate.__mandu_island === true &&
+    typeof candidate.definition?.setup === "function" &&
+    typeof candidate.definition?.render === "function"
+  );
+}
+
+function renderClientBackedPage(props: Props, serverData: Record<string, unknown>): React.ReactElement {
+  if (isManduIslandModule(islandModule)) {
+    const setupResult = islandModule.definition.setup(serverData);
+    return islandModule.definition.render(setupResult) as React.ReactElement;
+  }
+
+  if (typeof ${pageRenderTarget} === "function") {
+    return React.createElement(${pageRenderTarget} as React.ComponentType<Props>, props);
+  }
+
+  if (typeof islandModule === "function") {
+    return React.createElement(islandModule as React.ComponentType<Record<string, unknown>>, serverData);
+  }
+
+  if (React.isValidElement(${pageRenderTarget})) {
+    return ${pageRenderTarget} as React.ReactElement;
+  }
+
+  if (React.isValidElement(islandModule)) {
+    return islandModule as React.ReactElement;
+  }
+
+  throw new Error("[Mandu] Route ${routeId} clientModule must export a Mandu island or React component.");
+}`;
+}
+
+/**
+ * Convert string to PascalCase (handles kebab-case, snake_case)
  * "todo-page" → "TodoPage"
  * "user_profile" → "UserProfile"
  */
@@ -505,10 +505,10 @@ function toPascalCase(str: string): string {
     .join("");
 }
 
-function pathDirname(filePath: string): string {
-  return filePath.replace(/\\/g, "/").split("/").slice(0, -1).join("/");
-}
-
-function normalizeRouteModulePath(filePath: string | undefined): string {
-  return (filePath ?? "").replace(/\\/g, "/").replace(/^\.\//, "");
-}
+function pathDirname(filePath: string): string {
+  return filePath.replace(/\\/g, "/").split("/").slice(0, -1).join("/");
+}
+
+function normalizeRouteModulePath(filePath: string | undefined): string {
+  return (filePath ?? "").replace(/\\/g, "/").replace(/^\.\//, "");
+}