@mandujs/core 0.54.18 → 0.54.20

package/src/bundler/build.ts

@@ -514,651 +514,15 @@ function formatShimBindings(names: readonly string[], indent = "  "): string {
   return names.map((name) => `${indent}${name},`).join("\n");
 }
 
-/**
- * Runtime 번들 소스 생성 (v0.8.0 재설계)
- *
- * 설계 원칙:
- * - 글로벌 레지스트리 없음 (Island가 스스로 등록 안함)
- * - Runtime이 Island를 dynamic import()로 로드
- * - HTML의 data-mandu-src 속성에서 번들 URL 읽기
- * - 실행 순서 문제 완전 해결
- */
-function generateRuntimeSource(): string {
-  return `
-/**
- * Mandu Hydration Runtime v0.9.0 (Generated)
- * Fresh-style dynamic import architecture
- * + Error Boundary & Loading fallback support
- */
-
-// React 정적 import (Island와 같은 인스턴스 공유)
-import React, { useState, useEffect, Component } from 'react';
-import { hydrateRoot, createRoot } from 'react-dom/client';
-
-// Hydrated roots 추적 (unmount용) - 전역 초기화
-window.__MANDU_ROOTS__ = window.__MANDU_ROOTS__ || new Map();
-const hydratedRoots = window.__MANDU_ROOTS__;
-const warnedBoundaryPropFallbacks = new Set();
-
-const TYPE_MARKERS = {
-  UNDEFINED: "\\u0000_",
-  DATE: "\\u0000D",
-  URL: "\\u0000U",
-  REGEXP: "\\u0000R",
-  MAP: "\\u0000M",
-  SET: "\\u0000S",
-  REF: "\\u0000$",
-  BIGINT: "\\u0000B",
-  SYMBOL: "\\u0000Y",
-  ERROR: "\\u0000E",
-};
-
-function deserializeManduProps(json) {
-  const ctx = { refs: [] };
-  return deserializeManduValue(JSON.parse(json), ctx);
-}
-
-function deserializeManduValue(value, ctx) {
-  if (value === null) return null;
-  if (typeof value === 'string') {
-    if (value === TYPE_MARKERS.UNDEFINED) return undefined;
-    if (value.startsWith("\\u0000\\u0000")) return value.slice(2);
-    if (value.startsWith(TYPE_MARKERS.DATE)) return new Date(value.slice(2));
-    if (value.startsWith(TYPE_MARKERS.URL)) return new URL(value.slice(2));
-    if (value.startsWith(TYPE_MARKERS.REGEXP)) {
-      const str = value.slice(2);
-      const match = str.match(/^\\/(.*)\\/([gimsuy]*)$/);
-      return match ? new RegExp(match[1], match[2]) : str;
-    }
-    if (value.startsWith(TYPE_MARKERS.BIGINT)) return BigInt(value.slice(2));
-    if (value.startsWith(TYPE_MARKERS.SYMBOL)) return Symbol(value.slice(2));
-    if (value.startsWith(TYPE_MARKERS.REF)) return ctx.refs[parseInt(value.slice(2), 10)];
-    return value;
-  }
-  if (typeof value === 'boolean' || typeof value === 'number') return value;
-  if (Array.isArray(value)) {
-    const marker = value[0];
-    if (marker === TYPE_MARKERS.ERROR) {
-      const error = new Error(value[2]);
-      error.name = value[1];
-      if (value[3]) error.stack = value[3];
-      ctx.refs.push(error);
-      return error;
-    }
-    if (marker === TYPE_MARKERS.MAP) {
-      const map = new Map();
-      ctx.refs.push(map);
-      for (let i = 1; i < value.length; i++) {
-        const entry = value[i];
-        map.set(deserializeManduValue(entry[0], ctx), deserializeManduValue(entry[1], ctx));
-      }
-      return map;
-    }
-    if (marker === TYPE_MARKERS.SET) {
-      const set = new Set();
-      ctx.refs.push(set);
-      for (let i = 1; i < value.length; i++) {
-        set.add(deserializeManduValue(value[i], ctx));
-      }
-      return set;
-    }
-    const arr = [];
-    ctx.refs.push(arr);
-    for (const item of value) arr.push(deserializeManduValue(item, ctx));
-    return arr;
-  }
-  if (typeof value === 'object') {
-    const obj = {};
-    ctx.refs.push(obj);
-    for (const [key, nested] of Object.entries(value)) {
-      obj[key] = deserializeManduValue(nested, ctx);
-    }
-    return obj;
-  }
-  return value;
-}
-
-// 서버 데이터
-function readManduData() {
-  if (window.__MANDU_DATA__) return window.__MANDU_DATA__;
-
-  const raw = window.__MANDU_DATA_RAW__ || document.getElementById('__MANDU_DATA__')?.textContent;
-  if (!raw) {
-    window.__MANDU_DATA__ = {};
-    return window.__MANDU_DATA__;
-  }
-
-  try {
-    window.__MANDU_DATA__ = deserializeManduProps(raw);
-  } catch (error) {
-    console.warn('[Mandu] Failed to parse server data:', error);
-    window.__MANDU_DATA__ = {};
-  }
-
-  return window.__MANDU_DATA__;
-}
-
-const getServerData = (id, element) => {
-  const data = readManduData();
-  if (data[id] && Object.prototype.hasOwnProperty.call(data[id], 'serverData')) {
-    return data[id].serverData;
-  }
-  const routeId = element?.getAttribute?.('data-mandu-route-id');
-  if (
-    routeId &&
-    data[routeId] &&
-    Object.prototype.hasOwnProperty.call(data[routeId], 'serverData')
-  ) {
-    return data[routeId].serverData;
-  }
-  return {};
-};
-
-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) {
-  const inlineProps = parsePropsScript(id);
-  if (inlineProps) return inlineProps;
-
-  const dataProps = readDataProps(element);
-  if (dataProps) return dataProps;
-
-  const boundaryId = element?.getAttribute?.('data-mandu-boundary-id');
-  if (boundaryId && !warnedBoundaryPropFallbacks.has(id)) {
-    warnedBoundaryPropFallbacks.add(id);
-    console.warn(
-      '[Mandu] Missing boundary-local props for transformed client boundary ' +
-      boundaryId +
-      '; falling back to route server data.'
-    );
-  }
-
-  return getServerData(id, element);
-}
-
-function resolveIslandExport(module, element) {
-  const exportName = element.getAttribute('data-mandu-client-export');
-  if (exportName) {
-    if (exportName === 'default' && module.default) return module.default;
-    if (exportName !== 'default' && module[exportName]) return module[exportName];
-    console.warn('[Mandu] Client boundary export "' + exportName + '" was not found; falling back to default export.');
-  }
-  return module.default;
-}
-
 /**
- * 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;
-}
-
-function resolveHydrationTarget(element) {
-  if (!(element instanceof HTMLElement)) {
-    return element;
-  }
-
-  if (getComputedStyle(element).display !== 'contents') {
-    return element;
-  }
-
-  const queue = Array.from(element.children);
-  while (queue.length > 0) {
-    const candidate = queue.shift();
-    if (candidate instanceof HTMLElement) {
-      return candidate;
-    }
-    if (candidate) {
-      queue.push(...candidate.children);
-    }
-  }
-
-  return element.parentElement || element;
-}
-
-function hasHydratableMarkup(element) {
-  for (const node of element.childNodes) {
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      return true;
-    }
-
-    if (node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim() !== '') {
-      return true;
-    }
-  }
-
-  return false;
-}
-
-function shouldHydrateCompiledIsland(element) {
-  return (
-    element.getAttribute('data-mandu-loading') !== 'true' &&
-    hasHydratableMarkup(element)
-  );
-}
-
-function createHydrationOptions(element, id, mode) {
-  return {
-    onRecoverableError(error) {
-      element.setAttribute('data-mandu-recoverable-error', 'true');
-      console.warn('[Mandu] Recoverable hydration error:', id, mode, error);
-      element.dispatchEvent(new CustomEvent('mandu:recoverable-hydration-error', {
-        bubbles: true,
-        detail: {
-          id,
-          mode,
-          error: error instanceof Error ? error.message : String(error),
-        },
-      }));
-    },
-  };
-}
-
-/**
- * Hydration 스케줄러
- */
-function priorityToHydrateStrategy(priority) {
-  return priority === 'immediate' ? 'load' : priority;
-}
-
-function scheduleHydration(element, src, strategy) {
-  if (!strategy) strategy = 'load';
-  if (strategy === 'immediate') strategy = 'load';
-
-  if (strategy.startsWith('media(') && strategy.endsWith(')')) {
-    const query = strategy.slice('media('.length, -1).trim();
-    if (!query || !window.matchMedia) {
-      loadAndHydrate(element, src);
-      return;
-    }
-    const mql = window.matchMedia(query);
-    if (mql.matches) {
-      loadAndHydrate(element, src);
-      return;
-    }
-    const onChange = (event) => {
-      if (!event.matches) return;
-      if (mql.removeEventListener) {
-        mql.removeEventListener('change', onChange);
-      } else if (mql.removeListener) {
-        mql.removeListener(onChange);
-      }
-      loadAndHydrate(element, src);
-    };
-    if (mql.addEventListener) {
-      mql.addEventListener('change', onChange);
-    } else if (mql.addListener) {
-      mql.addListener(onChange);
-    }
-    return;
-  }
-
-  switch (strategy) {
-    case 'load':
-    case 'immediate':
-      loadAndHydrate(element, src);
-      break;
-
-    case 'visible':
-      if ('IntersectionObserver' in window) {
-        const observer = new IntersectionObserver((entries) => {
-          if (entries[0].isIntersecting) {
-            observer.disconnect();
-            loadAndHydrate(element, src);
-          }
-        }, { rootMargin: '200px' });
-        const target = resolveHydrationTarget(element);
-        observer.observe(target);
-      } else {
-        loadAndHydrate(element, src);
-      }
-      break;
-
-    case 'idle':
-      if ('requestIdleCallback' in window) {
-        requestIdleCallback(() => loadAndHydrate(element, src));
-      } else {
-        setTimeout(() => loadAndHydrate(element, src), 200);
-      }
-      break;
-
-    case 'interaction': {
-      const target = resolveHydrationTarget(element);
-      const hydrate = () => {
-        target.removeEventListener('touchstart', hydrate);
-        target.removeEventListener('click', hydrate);
-        target.removeEventListener('keydown', hydrate);
-        loadAndHydrate(element, src);
-      };
-      target.addEventListener('touchstart', hydrate, { once: true, passive: true });
-      target.addEventListener('click', hydrate, { once: true });
-      target.addEventListener('keydown', hydrate, { once: true });
-      break;
-    }
-
-    default:
-      console.warn('[Mandu] Unknown hydrate strategy "' + strategy + '", falling back to load.');
-      loadAndHydrate(element, src);
-  }
-}
-
-/**
- * Island 로드 및 hydrate (핵심 함수)
- * Dynamic import로 Island 모듈 로드 후 렌더링
- * Error Boundary 및 Loading fallback 지원
- */
-async function loadAndHydrate(element, src) {
-  const id = element.getAttribute('data-mandu-island');
-  if (!id) {
-    return;
-  }
-
-  if (
-    hydratedRoots.has(id) ||
-    element.hasAttribute('data-mandu-hydrated') ||
-    element.getAttribute('data-mandu-hydrating') === 'true'
-  ) {
-    return;
-  }
-
-  element.setAttribute('data-mandu-hydrating', 'true');
-
-  try {
-    // Dynamic import - 이 시점에 Island 모듈 로드
-    const module = await import(src);
-    const island = resolveIslandExport(module, element);
-    const data = getIslandProps(id, element);
-
-    // Mandu Island (preferred)
-    if (island && island.__mandu_island === true) {
-      const { definition } = island;
-      const shouldHydrate = shouldHydrateCompiledIsland(element);
-      const renderMode = shouldHydrate ? 'hydrate' : 'mount';
-
-      // Island 컴포넌트 (Error Boundary + Loading 지원)
-      function IslandComponent({ initialReady }) {
-        const [isReady, setIsReady] = useState(initialReady);
-
-        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 root = shouldHydrate
-        ? hydrateRoot(
-            element,
-            React.createElement(IslandComponent, { initialReady: true }),
-            createHydrationOptions(element, id, renderMode)
-          )
-        : createRoot(element);
-
-      if (!shouldHydrate) {
-        root.render(React.createElement(IslandComponent, { initialReady: false }));
-      }
-
-      hydratedRoots.set(id, root);
-
-      // 완료 표시
-      element.setAttribute('data-mandu-render-mode', renderMode);
-      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, mode: renderMode }
-      }));
-
-      // Kitchen DevTools에 island 등록
-      if (window.__MANDU_DEVTOOLS_HOOK__) {
-        const hydrateTime = performance.now ? performance.now() : Date.now();
-        window.__MANDU_DEVTOOLS_HOOK__.emit({
-          type: 'island:register',
-          timestamp: Date.now(),
-          data: {
-            id,
-            name: id,
-            strategy: element.getAttribute('data-mandu-priority') || 'visible',
-            status: 'hydrated',
-            renderMode,
-            hydrateStartTime: hydrateTime - 10,
-            hydrateEndTime: hydrateTime,
-            propsSize: JSON.stringify(data).length,
-          },
-        });
-      }
-
-      console.log('[Mandu] Hydrated:', id, '(' + renderMode + ')');
-    }
-    // Plain React component fallback (e.g. "use client" pages)
-    else if (typeof island === 'function' || React.isValidElement(island)) {
-      console.warn('[Mandu] Plain component hydration:', id);
-      const shouldHydrate = hasHydratableMarkup(element);
-      const renderMode = shouldHydrate ? 'hydrate' : 'mount';
-
-      const root = shouldHydrate
-        ? (typeof island === 'function'
-            ? hydrateRoot(
-                element,
-                React.createElement(island, data),
-                createHydrationOptions(element, id, renderMode)
-              )
-            : hydrateRoot(element, island, createHydrationOptions(element, id, renderMode)))
-        : createRoot(element);
-
-      if (!shouldHydrate) {
-        root.render(typeof island === 'function' ? React.createElement(island, data) : island);
-      }
-
-      hydratedRoots.set(id, root);
-
-      // 완료 표시
-      element.setAttribute('data-mandu-render-mode', renderMode);
-      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, mode: renderMode }
-      }));
-
-      console.log('[Mandu] Plain component hydrated:', id, '(' + renderMode + ')');
-    }
-    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');
-
-    // 에러 이벤트 발송
-    element.dispatchEvent(new CustomEvent('mandu:hydration-error', {
-      bubbles: true,
-      detail: { id, error: error.message }
-    }));
-  } finally {
-    element.removeAttribute('data-mandu-hydrating');
-  }
-}
-
-/**
- * 모든 Island hydrate 시작
- */
-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');
-    const src = el.getAttribute('data-mandu-src');
-    const priority = el.getAttribute('data-mandu-priority') || '${HYDRATION.DEFAULT_PRIORITY}';
-    const hydrateStrategy = el.getAttribute('data-hydrate') || priorityToHydrateStrategy(priority);
-
-    if (!id || !src) {
-      console.warn('[Mandu] Island missing id or src:', el);
-      continue;
-    }
-
-    // 중복 ID 경고
-    if (seenIds.has(id)) {
-      console.warn('[Mandu] Duplicate island id detected:', id, '- skipping');
-      continue;
-    }
-    seenIds.add(id);
-
-    scheduleHydration(el, src, hydrateStrategy);
-  }
-}
-
-/**
- * Island unmount
+ * Runtime bundle entry point.
+ *
+ * The browser runtime lives in client/runtime-entry.ts so it is typechecked
+ * with the rest of core and imports the shared props deserializer directly.
  */
-function unmountIsland(id) {
-  const root = hydratedRoots.get(id);
-  if (root) {
-    root.unmount();
-    hydratedRoots.delete(id);
-    return true;
-  }
-  return false;
+function getRuntimeEntryPath(): string {
+  return path.resolve(import.meta.dir, "..", "client", "runtime-entry.ts");
 }
-
-// 자동 초기화
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', hydrateIslands);
-} else {
-  hydrateIslands();
-}
-
-// Export for external use
-export { hydrateIslands, unmountIsland, hydratedRoots };
-`;
-}
-
 /**
  * React shim 소스 생성 (import map용)
  * 주의: export *는 Bun bundler에서 제대로 작동하지 않으므로 명시적 export 필요
@@ -1759,21 +1123,17 @@ export default {
 /**
  * Runtime 번들 빌드
  */
-async function buildRuntime(
-  outDir: string,
-  options: BundlerOptions
-): Promise<{ success: boolean; outputPath: string; errors: string[] }> {
-  const runtimePath = path.join(outDir, "_runtime.src.js");
-  const outputName = "_runtime.js";
-
-  try {
-    // 런타임 소스 작성
-    await Bun.write(runtimePath, generateRuntimeSource());
-
-    // 빌드
-    const result = await safeBuild({
-      entrypoints: [runtimePath],
-      outdir: outDir,
+async function buildRuntime(
+  outDir: string,
+  options: BundlerOptions
+): Promise<{ success: boolean; outputPath: string; errors: string[] }> {
+  const runtimePath = getRuntimeEntryPath();
+  const outputName = "_runtime.js";
+
+  try {
+    const result = await safeBuild({
+      entrypoints: [runtimePath],
+      outdir: outDir,
       naming: outputName,
       minify: shouldMinify(options),
       sourcemap: options.sourcemap ? "external" : "none",
@@ -1784,29 +1144,24 @@ async function buildRuntime(
         "process.env.NODE_ENV": nodeEnvDefine(options),
         ...options.define,
       },
-    });
-
-    if (!result.success) {
-      // 실패 시 디버깅을 위해 소스 파일을 남겨둠 (_runtime.src.js)
-      const grouped = result.logs.map((l) => `  - ${l.message}`).join("\n");
-      return {
-        success: false,
-        outputPath: "",
-        errors: [`Runtime bundle build failed (source: ${runtimePath}):\n${grouped}\n  Hint: Check the import paths and TypeScript types. The source file has been kept for debugging.`],
-      };
-    }
-
-    // 성공 시에만 소스 파일 정리
-    await fs.unlink(runtimePath).catch(() => {});
-
-    return {
-      success: true,
-      outputPath: `/.mandu/client/${outputName}`,
-      errors: [],
-    };
-  } catch (error: unknown) {
-    // 예외 발생 시에도 디버깅을 위해 소스 파일을 남겨둠
-    const extra: string[] = [];
+    });
+
+    if (!result.success) {
+      const grouped = result.logs.map((l) => `  - ${l.message}`).join("\n");
+      return {
+        success: false,
+        outputPath: "",
+        errors: [`Runtime bundle build failed (source: ${runtimePath}):\n${grouped}\n  Hint: Check the import paths and TypeScript types.`],
+      };
+    }
+
+    return {
+      success: true,
+      outputPath: `/.mandu/client/${outputName}`,
+      errors: [],
+    };
+  } catch (error: unknown) {
+    const extra: string[] = [];
     const errObj = error as Record<string, unknown> | null;
     if (errObj && Array.isArray(errObj.errors)) {
       extra.push(...errObj.errors.map((e: unknown) => String((e as Record<string, unknown>)?.message || e)));