@mandujs/core 0.18.8 → 0.18.10

package/package.json

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

package/src/bundler/build.ts

@@ -744,6 +744,73 @@ if (document.readyState === 'loading') {
 `;
 }
 
+/**
+ * DevTools 번들 빌드 (개발 모드 전용)
+ * devtools/init.ts를 브라우저용 번들로 컴파일하여 _devtools.js 생성
+ */
+async function buildDevtoolsBundle(
+  outDir: string,
+  options: BundlerOptions
+): Promise<{ success: boolean; outputPath: string; errors: string[] }> {
+  const srcPath = path.join(outDir, "_devtools.src.js");
+  const outputName = "_devtools.js";
+
+  // devtools/init.ts의 절대 경로 (build.ts → ../devtools/init.ts)
+  const devtoolsInitPath = path.resolve(
+    import.meta.dir, '..', 'devtools', 'init.ts'
+  ).replace(/\\/g, '/');
+
+  const source = `
+import { initManduKitchen } from "${devtoolsInitPath}";
+if (typeof window !== 'undefined') {
+  window.__MANDU_DEV_TOOLS__ = true;
+  initManduKitchen({ position: 'bottom-right' });
+}
+`;
+
+  try {
+    await Bun.write(srcPath, source);
+
+    const result = await Bun.build({
+      entrypoints: [srcPath],
+      outdir: outDir,
+      naming: outputName,
+      minify: false, // dev only
+      sourcemap: options.sourcemap ? "external" : "none",
+      target: "browser",
+      // React를 인라인 번들링 (import map 없이도 독립 동작)
+      // DevTools는 Shadow DOM 격리 → 앱 React와 충돌 없음
+      define: {
+        "process.env.NODE_ENV": JSON.stringify("development"),
+        ...options.define,
+      },
+    });
+
+    await fs.unlink(srcPath).catch(() => {});
+
+    if (!result.success) {
+      return {
+        success: false,
+        outputPath: "",
+        errors: result.logs.map((l) => l.message),
+      };
+    }
+
+    return {
+      success: true,
+      outputPath: `/.mandu/client/${outputName}`,
+      errors: [],
+    };
+  } catch (error) {
+    await fs.unlink(srcPath).catch(() => {});
+    return {
+      success: false,
+      outputPath: "",
+      errors: [String(error)],
+    };
+  }
+}
+
 /**
  * Router 런타임 번들 빌드
  */
@@ -1185,6 +1252,15 @@ export async function buildClientBundles(
   // Hydration 라우트가 없어도 빈 매니페스트를 저장해야 함
   // (이전 빌드의 stale 매니페스트 참조 방지)
   if (hydratedRoutes.length === 0) {
+    // Dev 모드에서는 DevTools 번들 빌드 (island 없어도 동작해야 함)
+    const isDev = env === "development";
+    if (isDev) {
+      const devtoolsResult = await buildDevtoolsBundle(outDir, options);
+      if (!devtoolsResult.success) {
+        console.warn("[Mandu] DevTools bundle build failed:", devtoolsResult.errors.join(", "));
+      }
+    }
+
     const emptyManifest = createEmptyManifest(env);
     await fs.writeFile(
       path.join(rootDir, ".mandu/manifest.json"),
@@ -1251,22 +1327,34 @@ export async function buildClientBundles(
     return { success: errors.length === 0, outputs, errors, manifest: existingManifest, stats };
   }
 
-  // 3-4. Runtime, Router, Vendor 번들 병렬 빌드 (서로 독립적)
-  const [runtimeResult, routerResult, vendorResult] = await Promise.all([
+  // 3-4. Runtime, Router, Vendor, DevTools 번들 병렬 빌드 (서로 독립적)
+  const buildPromises: Promise<any>[] = [
     buildRuntime(outDir, options),
     buildRouterRuntime(outDir, options),
     buildVendorShims(outDir, options),
-  ]);
+  ];
+
+  // DevTools 번들은 dev 모드에서만 빌드
+  const isDev = env === "development";
+  if (isDev) {
+    buildPromises.push(buildDevtoolsBundle(outDir, options));
+  }
+
+  const [runtimeResult, routerResult, vendorResult, devtoolsResult] = await Promise.all(buildPromises);
 
   if (!runtimeResult.success) {
-    errors.push(...runtimeResult.errors.map((e) => `[Runtime] ${e}`));
+    errors.push(...runtimeResult.errors.map((e: string) => `[Runtime] ${e}`));
   }
   if (!routerResult.success) {
-    errors.push(...routerResult.errors.map((e) => `[Router] ${e}`));
+    errors.push(...routerResult.errors.map((e: string) => `[Router] ${e}`));
   }
   if (!vendorResult.success) {
     errors.push(...vendorResult.errors);
   }
+  if (devtoolsResult && !devtoolsResult.success) {
+    // DevTools 빌드 실패는 경고만 (개발 중단시키지 않음)
+    console.warn("[Mandu] DevTools bundle build failed:", devtoolsResult.errors.join(", "));
+  }
 
   // 5. 각 Island 번들 빌드
   for (const route of hydratedRoutes) {

package/src/client/router.ts

@@ -410,13 +410,6 @@ export function initializeRouter(): void {
   // 링크 클릭 이벤트 위임
   document.addEventListener("click", handleLinkClick);
 
-  // DevTools 자동 초기화 (개발 모드에서 SSR이 __MANDU_DEV_TOOLS__를 주입한 경우)
-  if ((window as any).__MANDU_DEV_TOOLS__) {
-    import("../devtools/init").then(({ initManduKitchen }) => {
-      initManduKitchen({ position: "bottom-right" });
-    }).catch(() => {});
-  }
-
   console.log("[Mandu Router] Initialized");
 }
 

package/src/runtime/ssr.ts

@@ -238,10 +238,10 @@ export function renderToHTML(element: ReactElement, options: SSROptions = {}): s
     hmrScript = generateHMRScript(hmrPort);
   }
 
-  // DevTools 부트스트랩 스크립트 (개발 모드)
+  // DevTools 번들 로드 (개발 모드)
   let devtoolsScript = "";
   if (isDev) {
-    devtoolsScript = generateDevtoolsBootstrapScript();
+    devtoolsScript = generateDevtoolsScript();
   }
 
   return `<!doctype html>
@@ -372,15 +372,11 @@ function generateHMRScript(port: number): string {
 }
 
 /**
- * DevTools 부트스트랩 스크립트 생성 (개발 모드 전용)
+ * DevTools 번들 로드 스크립트 생성 (개발 모드 전용)
+ * _devtools.js 번들이 자체적으로 initManduKitchen()을 호출
  */
-function generateDevtoolsBootstrapScript(): string {
-  return `<script>
-(function() {
-  if (typeof window === 'undefined') return;
-  window.__MANDU_DEV_TOOLS__ = true;
-})();
-</script>`;
+function generateDevtoolsScript(): string {
+  return `<script type="module" src="/.mandu/client/_devtools.js"></script>`;
 }
 
 export function createHTMLResponse(html: string, status: number = 200): Response {

package/src/runtime/streaming-ssr.ts

@@ -530,6 +530,11 @@ function generateHTMLTailContent(options: StreamingSSROptions): string {
     scripts.push(generateHMRScript(hmrPort));
   }
 
+  // 10. DevTools 번들 로드 (개발 모드)
+  if (isDev) {
+    scripts.push(`<script type="module" src="/.mandu/client/_devtools.js"></script>`);
+  }
+
   // Island wrapper 닫기 (hydration이 필요한 경우)
   const needsHydration = hydration && hydration.strategy !== "none" && routeId && bundleManifest;
   const islandCloseTag = needsHydration ? "</div>" : "";