@mandujs/core 0.9.24 → 0.9.26

package/package.json

@@ -1,54 +1,54 @@
-{
-  "name": "@mandujs/core",
-  "version": "0.9.24",
-  "description": "Mandu Framework Core - Spec, Generator, Guard, Runtime",
-  "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
-  "exports": {
-    ".": "./src/index.ts",
-    "./client": "./src/client/index.ts",
-    "./*": "./src/*"
-  },
-  "files": [
-    "src/**/*"
-  ],
-  "scripts": {
-    "test": "bun test tests/streaming-ssr && bun test tests/hydration tests/typing src",
-    "test:hydration": "bun test tests/hydration",
-    "test:streaming": "bun test tests/streaming-ssr",
-    "test:watch": "bun test --watch"
-  },
-  "devDependencies": {
-    "@happy-dom/global-registrator": "^15.0.0"
-  },
-  "keywords": [
-    "mandu",
-    "framework",
-    "agent",
-    "ai",
-    "code-generation"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/konamgil/mandu.git",
-    "directory": "packages/core"
-  },
-  "author": "konamgil",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "engines": {
-    "bun": ">=1.0.0"
-  },
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "zod": ">=3.0.0"
-  },
-  "dependencies": {
-    "chokidar": "^5.0.0",
-    "ollama": "^0.6.3"
-  }
-}
+{
+  "name": "@mandujs/core",
+  "version": "0.9.26",
+  "description": "Mandu Framework Core - Spec, Generator, Guard, Runtime",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./client": "./src/client/index.ts",
+    "./*": "./src/*"
+  },
+  "files": [
+    "src/**/*"
+  ],
+  "scripts": {
+    "test": "bun test tests/streaming-ssr && bun test tests/hydration tests/typing src",
+    "test:hydration": "bun test tests/hydration",
+    "test:streaming": "bun test tests/streaming-ssr",
+    "test:watch": "bun test --watch"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^15.0.0"
+  },
+  "keywords": [
+    "mandu",
+    "framework",
+    "agent",
+    "ai",
+    "code-generation"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/konamgil/mandu.git",
+    "directory": "packages/core"
+  },
+  "author": "konamgil",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "bun": ">=1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "zod": ">=3.0.0"
+  },
+  "dependencies": {
+    "chokidar": "^5.0.0",
+    "ollama": "^0.6.3"
+  }
+}

package/src/bundler/build.ts

@@ -58,20 +58,94 @@ function getHydratedRoutes(manifest: RoutesManifest): RouteSpec[] {
 function generateRuntimeSource(): string {
   return `
 /**
- * Mandu Hydration Runtime v0.8.0 (Generated)
+ * Mandu Hydration Runtime v0.9.0 (Generated)
  * Fresh-style dynamic import architecture
+ * + Error Boundary & Loading fallback support
  */
 
 // React 정적 import (Island와 같은 인스턴스 공유)
-import React from 'react';
+import React, { useState, useEffect, Component } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 
-// Hydrated roots 추적 (unmount용)
-const hydratedRoots = new Map();
+// Hydrated roots 추적 (unmount용) - 전역 초기화
+window.__MANDU_ROOTS__ = window.__MANDU_ROOTS__ || new Map();
+const hydratedRoots = window.__MANDU_ROOTS__;
 
 // 서버 데이터
 const getServerData = (id) => (window.__MANDU_DATA__ || {})[id]?.serverData || {};
 
+/**
+ * Error Boundary 컴포넌트 (Class Component)
+ * Island의 errorBoundary 옵션을 지원
+ */
+class IslandErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('[Mandu] Island error:', this.props.islandId, error, errorInfo);
+  }
+
+  reset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      // 커스텀 errorBoundary가 있으면 사용
+      if (this.props.errorBoundary) {
+        return this.props.errorBoundary(this.state.error, this.reset);
+      }
+      // 기본 에러 UI
+      return React.createElement('div', {
+        className: 'mandu-island-error',
+        style: {
+          padding: '16px',
+          background: '#fef2f2',
+          border: '1px solid #fecaca',
+          borderRadius: '8px',
+          color: '#dc2626',
+        }
+      }, [
+        React.createElement('strong', { key: 'title' }, '⚠️ 오류 발생'),
+        React.createElement('p', { key: 'msg', style: { margin: '8px 0', fontSize: '14px' } },
+          this.state.error?.message || '알 수 없는 오류'
+        ),
+        React.createElement('button', {
+          key: 'btn',
+          onClick: this.reset,
+          style: {
+            padding: '6px 12px',
+            background: '#dc2626',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          }
+        }, '다시 시도')
+      ]);
+    }
+    return this.props.children;
+  }
+}
+
+/**
+ * Loading Wrapper 컴포넌트
+ * Island의 loading 옵션을 지원
+ */
+function IslandLoadingWrapper({ children, loading, isReady }) {
+  if (!isReady && loading) {
+    return loading();
+  }
+  return children;
+}
+
 /**
  * Hydration 스케줄러
  */
@@ -121,6 +195,7 @@ function scheduleHydration(element, src, priority) {
 /**
  * Island 로드 및 hydrate (핵심 함수)
  * Dynamic import로 Island 모듈 로드 후 렌더링
+ * Error Boundary 및 Loading fallback 지원
  */
 async function loadAndHydrate(element, src) {
   const id = element.getAttribute('data-mandu-island');
@@ -138,10 +213,31 @@ async function loadAndHydrate(element, src) {
     const { definition } = island;
     const data = getServerData(id);
 
-    // Island 컴포넌트 (정적 import된 React 사용)
+    // Island 컴포넌트 (Error Boundary + Loading 지원)
     function IslandComponent() {
+      const [isReady, setIsReady] = useState(false);
+
+      useEffect(() => {
+        setIsReady(true);
+      }, []);
+
+      // setup 호출 및 render
       const setupResult = definition.setup(data);
-      return definition.render(setupResult);
+      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 재사용 + 이벤트 연결)
@@ -166,6 +262,12 @@ async function loadAndHydrate(element, src) {
   } catch (error) {
     console.error('[Mandu] Hydration failed for', id, error);
     element.setAttribute('data-mandu-error', 'true');
+
+    // 에러 이벤트 발송
+    element.dispatchEvent(new CustomEvent('mandu:hydration-error', {
+      bubbles: true,
+      detail: { id, error: error.message }
+    }));
   }
 }
 
@@ -174,6 +276,7 @@ async function loadAndHydrate(element, src) {
  */
 function hydrateIslands() {
   const islands = document.querySelectorAll('[data-mandu-island]');
+  const seenIds = new Set();
 
   for (const el of islands) {
     const id = el.getAttribute('data-mandu-island');
@@ -185,6 +288,13 @@ function hydrateIslands() {
       continue;
     }
 
+    // 중복 ID 경고
+    if (seenIds.has(id)) {
+      console.warn('[Mandu] Duplicate island id detected:', id, '- skipping');
+      continue;
+    }
+    seenIds.add(id);
+
     scheduleHydration(el, src, priority);
   }
 }
@@ -841,14 +951,15 @@ async function buildIsland(
     await Bun.write(entryPath, generateIslandEntry(route.id, clientModulePath));
 
     // 빌드
+    // splitting 옵션: true면 공통 코드를 별도 청크로 추출
     const result = await Bun.build({
       entrypoints: [entryPath],
       outdir: outDir,
-      naming: outputName,
+      naming: options.splitting ? "[name]-[hash].js" : outputName,
       minify: options.minify ?? process.env.NODE_ENV === "production",
       sourcemap: options.sourcemap ? "external" : "none",
       target: "browser",
-      splitting: false, // Island 단위로 이미 분리됨
+      splitting: options.splitting ?? false,
       external: ["react", "react-dom", "react-dom/client", ...(options.external || [])],
       define: {
         "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"),
@@ -864,15 +975,36 @@ async function buildIsland(
     }
 
     // 출력 파일 정보
-    const outputPath = path.join(outDir, outputName);
-    const outputFile = Bun.file(outputPath);
+    // splitting 활성화 시 Bun.build 결과에서 실제 출력 파일 찾기
+    let actualOutputPath: string;
+    let actualOutputName: string;
+
+    if (options.splitting && result.outputs.length > 0) {
+      // splitting 모드: 결과에서 엔트리 파일 찾기
+      const entryOutput = result.outputs.find(
+        (o) => o.kind === "entry-point" || o.path.includes(route.id)
+      );
+      if (entryOutput) {
+        actualOutputPath = entryOutput.path;
+        actualOutputName = path.basename(entryOutput.path);
+      } else {
+        actualOutputPath = result.outputs[0].path;
+        actualOutputName = path.basename(result.outputs[0].path);
+      }
+    } else {
+      // 일반 모드: 예상 경로 사용
+      actualOutputPath = path.join(outDir, outputName);
+      actualOutputName = outputName;
+    }
+
+    const outputFile = Bun.file(actualOutputPath);
     const content = await outputFile.text();
     const gzipped = Bun.gzipSync(Buffer.from(content));
 
     return {
       routeId: route.id,
       entrypoint: route.clientModule!,
-      outputPath: `/.mandu/client/${outputName}`,
+      outputPath: `/.mandu/client/${actualOutputName}`,
       size: outputFile.size,
       gzipSize: gzipped.length,
     };

package/src/bundler/dev.ts

@@ -89,12 +89,21 @@ export async function startDevBundler(options: DevBundlerOptions): Promise<DevBu
     // clientModule 매핑에서 routeId 찾기
     let routeId = clientModuleToRoute.get(normalizedPath);
 
-    // .client.ts 파일인 경우 파일명에서 routeId 추출
-    if (!routeId && changedFile.endsWith(".client.ts")) {
-      const basename = path.basename(changedFile, ".client.ts");
-      const route = manifest.routes.find((r) => r.id === basename);
-      if (route) {
-        routeId = route.id;
+    // .client.ts 또는 .client.tsx 파일인 경우 파일명에서 routeId 추출
+    if (!routeId) {
+      let basename: string | null = null;
+
+      if (changedFile.endsWith(".client.ts")) {
+        basename = path.basename(changedFile, ".client.ts");
+      } else if (changedFile.endsWith(".client.tsx")) {
+        basename = path.basename(changedFile, ".client.tsx");
+      }
+
+      if (basename) {
+        const route = manifest.routes.find((r) => r.id === basename);
+        if (route) {
+          routeId = route.id;
+        }
       }
     }
 

package/src/bundler/types.ts

@@ -103,4 +103,12 @@ export interface BundlerOptions {
   external?: string[];
   /** 환경 변수 주입 */
   define?: Record<string, string>;
+  /**
+   * 코드 스플리팅 활성화
+   * - true: Island들 간 공통 코드를 별도 청크로 추출 (캐시 효율 향상)
+   * - false: 각 Island가 독립 번들로 생성 (기본값)
+   *
+   * 주의: splitting=true인 경우 청크 파일 관리가 필요합니다.
+   */
+  splitting?: boolean;
 }

package/src/client/index.ts

@@ -33,11 +33,23 @@ export {
   useHydrated,
   useIslandEvent,
   fetchApi,
+  // Partials/Slots API
+  partial,
+  slot,
+  createPartialGroup,
   type IslandDefinition,
   type IslandMetadata,
   type CompiledIsland,
   type FetchOptions,
   type WrapComponentOptions,
+  type IslandEventHandle,
+  // Partials/Slots Types
+  type PartialConfig,
+  type PartialDefinition,
+  type CompiledPartial,
+  type SlotDefinition,
+  type CompiledSlot,
+  type PartialGroup,
 } from "./island";
 
 // Runtime API
@@ -96,7 +108,7 @@ export {
 } from "./serialize";
 
 // Re-export as Mandu namespace for consistent API
-import { island, wrapComponent } from "./island";
+import { island, wrapComponent, partial, slot, createPartialGroup } from "./island";
 import { navigate, prefetch, initializeRouter } from "./router";
 import { Link, NavLink } from "./Link";
 
@@ -147,4 +159,22 @@ export const ManduClient = {
    * @see NavLink
    */
   NavLink,
+
+  /**
+   * Create a partial island for granular hydration
+   * @see partial
+   */
+  partial,
+
+  /**
+   * Create a slot for server-rendered content with client hydration
+   * @see slot
+   */
+  slot,
+
+  /**
+   * Create a group of partials for coordinated hydration
+   * @see createPartialGroup
+   */
+  createPartialGroup,
 };