@mandujs/core 0.18.1 → 0.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mandujs/core",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "description": "Mandu Framework Core - Spec, Generator, Guard, Runtime",
   "type": "module",
   "main": "./src/index.ts",
@@ -44,14 +44,14 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "zod": ">=3.0.0"
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
     "chokidar": "^5.0.0",
     "fast-glob": "^3.3.2",
     "glob": "^13.0.0",
     "minimatch": "^10.1.1",
-    "ollama": "^0.6.3"
+    "ollama": "^0.6.3",
+    "zod": "^3.23.8"
   }
 }

package/src/bundler/build.ts

@@ -3,18 +3,18 @@
  * Bun.build 기반 클라이언트 번들 빌드
  */
 
-import type { RoutesManifest, RouteSpec } from "../spec/schema";
-import { needsHydration, getRouteHydration } from "../spec/schema";
-import type {
-  BundleResult,
-  BundleOutput,
-  BundleManifest,
-  BundleStats,
-  BundlerOptions,
-} from "./types";
-import { HYDRATION } from "../constants";
-import path from "path";
-import fs from "fs/promises";
+import type { RoutesManifest, RouteSpec } from "../spec/schema";
+import { needsHydration, getRouteHydration } from "../spec/schema";
+import type {
+  BundleResult,
+  BundleOutput,
+  BundleManifest,
+  BundleStats,
+  BundlerOptions,
+} from "./types";
+import { HYDRATION } from "../constants";
+import path from "path";
+import fs from "fs/promises";
 
 /**
  * 빈 매니페스트 생성
@@ -206,60 +206,84 @@ async function loadAndHydrate(element, src) {
     const module = await import(src);
     const island = module.default;
 
-    // Island 유효성 검사
-    if (!island || !island.__mandu_island) {
-      throw new Error('[Mandu] Invalid island module: ' + id);
-    }
+    // Mandu Island (preferred)
+    if (island && island.__mandu_island === true) {
+      const { definition } = island;
+      const data = getServerData(id);
+
+      // Island 컴포넌트 (Error Boundary + Loading 지원)
+      function IslandComponent() {
+        const [isReady, setIsReady] = useState(false);
+
+        useEffect(() => {
+          setIsReady(true);
+        }, []);
+
+        // setup 호출 및 render
+        const setupResult = definition.setup(data);
+        const content = definition.render(setupResult);
+
+        // Loading wrapper 적용
+        const wrappedContent = definition.loading
+          ? React.createElement(IslandLoadingWrapper, {
+              loading: definition.loading,
+              isReady,
+            }, content)
+          : content;
+
+        // Error Boundary 적용
+        return React.createElement(IslandErrorBoundary, {
+          islandId: id,
+          errorBoundary: definition.errorBoundary,
+        }, wrappedContent);
+      }
 
-    const { definition } = island;
-    const data = getServerData(id);
-
-    // Island 컴포넌트 (Error Boundary + Loading 지원)
-    function IslandComponent() {
-      const [isReady, setIsReady] = useState(false);
-
-      useEffect(() => {
-        setIsReady(true);
-      }, []);
-
-      // setup 호출 및 render
-      const setupResult = definition.setup(data);
-      const content = definition.render(setupResult);
-
-      // Loading wrapper 적용
-      const wrappedContent = definition.loading
-        ? React.createElement(IslandLoadingWrapper, {
-            loading: definition.loading,
-            isReady,
-          }, content)
-        : content;
-
-      // Error Boundary 적용
-      return React.createElement(IslandErrorBoundary, {
-        islandId: id,
-        errorBoundary: definition.errorBoundary,
-      }, wrappedContent);
-    }
+      // Hydrate (SSR DOM 재사용 + 이벤트 연결)
+      const root = hydrateRoot(element, React.createElement(IslandComponent));
+      hydratedRoots.set(id, root);
 
-    // Hydrate (SSR DOM 재사용 + 이벤트 연결)
-    const root = hydrateRoot(element, React.createElement(IslandComponent));
-    hydratedRoots.set(id, root);
+      // 완료 표시
+      element.setAttribute('data-mandu-hydrated', 'true');
+
+      // 성능 마커
+      if (performance.mark) {
+        performance.mark('mandu-hydrated-' + id);
+      }
 
-    // 완료 표시
-    element.setAttribute('data-mandu-hydrated', 'true');
+      // 이벤트 발송
+      element.dispatchEvent(new CustomEvent('mandu:hydrated', {
+        bubbles: true,
+        detail: { id, data }
+      }));
 
-    // 성능 마커
-    if (performance.mark) {
-      performance.mark('mandu-hydrated-' + id);
+      console.log('[Mandu] Hydrated:', id);
     }
+    // Plain React component fallback
+    else if (typeof island === 'function' || React.isValidElement(island)) {
+      console.warn('[Mandu] Plain component hydration:', id);
+      const data = getServerData(id);
+      const root = hydrateRoot(element, React.createElement(island, data));
+      hydratedRoots.set(id, root);
+
+      // 완료 표시
+      element.setAttribute('data-mandu-hydrated', 'true');
+
+      // 성능 마커
+      if (performance.mark) {
+        performance.mark('mandu-hydrated-' + id);
+      }
 
-    // 이벤트 발송
-    element.dispatchEvent(new CustomEvent('mandu:hydrated', {
-      bubbles: true,
-      detail: { id, data }
-    }));
+      // 이벤트 발송
+      element.dispatchEvent(new CustomEvent('mandu:hydrated', {
+        bubbles: true,
+        detail: { id, data }
+      }));
 
-    console.log('[Mandu] Hydrated:', id);
+      console.log('[Mandu] Plain component hydrated:', id);
+    }
+    else {
+      throw new Error('[Mandu] Invalid module: expected Mandu island or React component: ' + id);
+    }
   } catch (error) {
     console.error('[Mandu] Hydration failed for', id, error);
     element.setAttribute('data-mandu-error', 'true');
@@ -282,7 +306,7 @@ function hydrateIslands() {
   for (const el of islands) {
     const id = el.getAttribute('data-mandu-island');
     const src = el.getAttribute('data-mandu-src');
-    const priority = el.getAttribute('data-mandu-priority') || '${HYDRATION.DEFAULT_PRIORITY}';
+    const priority = el.getAttribute('data-mandu-priority') || '${HYDRATION.DEFAULT_PRIORITY}';
 
     if (!id || !src) {
       console.warn('[Mandu] Island missing id or src:', el);
@@ -379,6 +403,15 @@ import { jsxDEV } from 'react/jsx-dev-runtime';
 // React internals (ReactDOM이 내부적으로 접근 필요)
 const __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
+// React 19 client internals (Playwright headless 환경 호환성)
+const __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE =
+  React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE || {};
+
+// Null safety for Playwright headless browsers
+if (__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.S == null) {
+  __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.S = function() {};
+}
+
 // 전역 React 설정 (모든 모듈에서 동일 인스턴스 공유)
 if (typeof window !== 'undefined') {
   window.React = React;
@@ -418,12 +451,16 @@ export {
   PureComponent,
   Children,
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+  __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
   // JSX Runtime exports
   jsx,
   jsxs,
   jsxDEV,
 };
 
+// Version export (React 19 compatibility)
+export const version = React.version;
+
 // Default export
 export default React;
 `;
@@ -855,21 +892,21 @@ interface VendorBuildResult {
  * Vendor shim 번들 빌드
  * React, ReactDOM, ReactDOMClient를 각각의 shim으로 빌드
  */
-async function buildVendorShims(
-  outDir: string,
-  options: BundlerOptions
-): Promise<VendorBuildResult> {
-  const errors: string[] = [];
-  type VendorShimKey = "react" | "reactDom" | "reactDomClient" | "jsxRuntime" | "jsxDevRuntime";
-  const results: Record<VendorShimKey, string> = {
-    react: "",
-    reactDom: "",
-    reactDomClient: "",
-    jsxRuntime: "",
-    jsxDevRuntime: "",
-  };
-
-  const shims: Array<{ name: string; source: string; key: VendorShimKey }> = [
+async function buildVendorShims(
+  outDir: string,
+  options: BundlerOptions
+): Promise<VendorBuildResult> {
+  const errors: string[] = [];
+  type VendorShimKey = "react" | "reactDom" | "reactDomClient" | "jsxRuntime" | "jsxDevRuntime";
+  const results: Record<VendorShimKey, string> = {
+    react: "",
+    reactDom: "",
+    reactDomClient: "",
+    jsxRuntime: "",
+    jsxDevRuntime: "",
+  };
+
+  const shims: Array<{ name: string; source: string; key: VendorShimKey }> = [
     { name: "_react", source: generateReactShimSource(), key: "react" },
     { name: "_react-dom", source: generateReactDOMShimSource(), key: "reactDom" },
     { name: "_react-dom-client", source: generateReactDOMClientShimSource(), key: "reactDomClient" },
@@ -877,68 +914,68 @@ async function buildVendorShims(
     { name: "_jsx-dev-runtime", source: generateJsxDevRuntimeShimSource(), key: "jsxDevRuntime" },
   ];
 
-  const buildShim = async (
-    shim: { name: string; source: string; key: VendorShimKey }
-  ): Promise<{ key: VendorShimKey; outputPath?: string; error?: string }> => {
-    const srcPath = path.join(outDir, `${shim.name}.src.js`);
-    const outputName = `${shim.name}.js`;
-
-    try {
-      await Bun.write(srcPath, shim.source);
-
-      // _react.js는 external 없이 React 전체를 번들링
-      // _react-dom*, jsx-runtime은 react를 external로 처리하여 동일한 React 인스턴스 공유
-      let shimExternal: string[] = [];
-      if (shim.name === "_react-dom" || shim.name === "_react-dom-client") {
-        shimExternal = ["react"];
-      } else if (shim.name === "_jsx-runtime" || shim.name === "_jsx-dev-runtime") {
-        shimExternal = ["react"];
-      }
-
-      const result = await Bun.build({
-        entrypoints: [srcPath],
-        outdir: outDir,
-        naming: outputName,
-        minify: options.minify ?? process.env.NODE_ENV === "production",
-        sourcemap: options.sourcemap ? "external" : "none",
-        target: "browser",
-        external: shimExternal,
-        define: {
-          "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"),
-          ...options.define,
-        },
-      });
-
-      await fs.unlink(srcPath).catch(() => {});
-
-      if (!result.success) {
-        return {
-          key: shim.key,
-          error: `[${shim.name}] ${result.logs.map((l) => l.message).join(", ")}`,
-        };
-      }
-
-      return {
-        key: shim.key,
-        outputPath: `/.mandu/client/${outputName}`,
-      };
-    } catch (error) {
-      await fs.unlink(srcPath).catch(() => {});
-      return {
-        key: shim.key,
-        error: `[${shim.name}] ${String(error)}`,
-      };
-    }
-  };
-
-  const buildResults = await Promise.all(shims.map((shim) => buildShim(shim)));
-  for (const result of buildResults) {
-    if (result.error) {
-      errors.push(result.error);
-    } else if (result.outputPath) {
-      results[result.key] = result.outputPath;
-    }
-  }
+  const buildShim = async (
+    shim: { name: string; source: string; key: VendorShimKey }
+  ): Promise<{ key: VendorShimKey; outputPath?: string; error?: string }> => {
+    const srcPath = path.join(outDir, `${shim.name}.src.js`);
+    const outputName = `${shim.name}.js`;
+
+    try {
+      await Bun.write(srcPath, shim.source);
+
+      // _react.js는 external 없이 React 전체를 번들링
+      // _react-dom*, jsx-runtime은 react를 external로 처리하여 동일한 React 인스턴스 공유
+      let shimExternal: string[] = [];
+      if (shim.name === "_react-dom" || shim.name === "_react-dom-client") {
+        shimExternal = ["react"];
+      } else if (shim.name === "_jsx-runtime" || shim.name === "_jsx-dev-runtime") {
+        shimExternal = ["react"];
+      }
+
+      const result = await Bun.build({
+        entrypoints: [srcPath],
+        outdir: outDir,
+        naming: outputName,
+        minify: options.minify ?? process.env.NODE_ENV === "production",
+        sourcemap: options.sourcemap ? "external" : "none",
+        target: "browser",
+        external: shimExternal,
+        define: {
+          "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"),
+          ...options.define,
+        },
+      });
+
+      await fs.unlink(srcPath).catch(() => {});
+
+      if (!result.success) {
+        return {
+          key: shim.key,
+          error: `[${shim.name}] ${result.logs.map((l) => l.message).join(", ")}`,
+        };
+      }
+
+      return {
+        key: shim.key,
+        outputPath: `/.mandu/client/${outputName}`,
+      };
+    } catch (error) {
+      await fs.unlink(srcPath).catch(() => {});
+      return {
+        key: shim.key,
+        error: `[${shim.name}] ${String(error)}`,
+      };
+    }
+  };
+
+  const buildResults = await Promise.all(shims.map((shim) => buildShim(shim)));
+  for (const result of buildResults) {
+    if (result.error) {
+      errors.push(result.error);
+    } else if (result.outputPath) {
+      results[result.key] = result.outputPath;
+    }
+  }
 
   return {
     success: errors.length === 0,
@@ -1052,7 +1089,7 @@ function createBundleManifest(
     bundles[output.routeId] = {
       js: output.outputPath,
       dependencies: ["_runtime", "_react"],
-      priority: hydration?.priority || HYDRATION.DEFAULT_PRIORITY,
+      priority: hydration?.priority || HYDRATION.DEFAULT_PRIORITY,
     };
   }