@mandujs/core 0.54.29 → 0.54.31

package/package.json

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

package/src/bundler/__tests__/jsx-runtime-shim.test.ts

@@ -18,6 +18,7 @@ import { describe, expect, test } from "bun:test";
 import { mkdtemp, rm, writeFile } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import path from "node:path";
+import { pathToFileURL } from "node:url";
 import {
   _testOnly_generateJsxDevRuntimeShimSource,
   _testOnly_generateJsxRuntimeShimSource,
@@ -32,10 +33,9 @@ describe("JSX runtime shim sources (issues #322 / #323)", () => {
     // the import statement, not comment mentions of the path.)
     expect(source).not.toMatch(/from\s*['"]react\/jsx-dev-runtime['"]/);
 
-    // Correct: jsxDEV + Fragment come from bare 'react' (→ _react.js).
-    expect(source).toMatch(
-      /import\s*\{\s*jsxDEV\s*,\s*Fragment\s*\}\s*from\s*['"]react['"]/,
-    );
+    // Correct: jsxDEV (+ jsx/jsxs fallback inputs) come from bare 'react'
+    // (→ _react.js). Import includes jsxDEV and resolves from "react".
+    expect(source).toMatch(/import\s*\{[^}]*\bjsxDEV\b[^}]*\}\s*from\s*['"]react['"]/);
 
     // Shim still re-exports what the import map expects.
     expect(source).toContain("export { jsxDEV, Fragment }");
@@ -83,4 +83,58 @@ describe("JSX runtime shim sources (issues #322 / #323)", () => {
       await rm(dir, { recursive: true, force: true });
     }
   });
+
+  // #323 re-regression (0.54.30): a SOURCE/static check passed but at RUNTIME
+  // `_react.js`'s jsxDEV was `undefined` (jsxDEV is a React dev-only export;
+  // a production-built _react.js drops it while keeping jsx/jsxs). The shim
+  // re-exported that undefined → "jsxDEV is not a function". Guard the VALUE:
+  // build the dev shim against a `react` stub whose jsxDEV is undefined (the
+  // exact failing condition) and assert the shim still exposes a callable
+  // jsxDEV via its jsx/jsxs fallback.
+  test("dev shim exposes a callable jsxDEV even when react.jsxDEV is undefined (runtime value)", async () => {
+    const dir = await mkdtemp(path.join(tmpdir(), "mandu-jsx-shim-rt-"));
+    try {
+      // Stub for bare 'react' = a production-built _react.js: jsx/jsxs are real
+      // functions, jsxDEV is missing.
+      const reactStub = path.join(dir, "react-stub.js");
+      await writeFile(
+        reactStub,
+        [
+          "export const jsx = (type) => ({ type, runtime: 'jsx' });",
+          "export const jsxs = (type) => ({ type, runtime: 'jsxs' });",
+          "export const Fragment = Symbol.for('react.fragment');",
+          "export const jsxDEV = undefined;",
+        ].join("\n"),
+        "utf-8",
+      );
+
+      // Generate the real shim source, but resolve its bare `react` import to
+      // the stub so we can drive the undefined-jsxDEV condition.
+      const shimSource = _testOnly_generateJsxDevRuntimeShimSource().replace(
+        /from\s*['"]react['"]/g,
+        `from ${JSON.stringify(reactStub.replace(/\\/g, "/"))}`,
+      );
+      const shimSrc = path.join(dir, "_jsx-dev-runtime.src.js");
+      await writeFile(shimSrc, shimSource, "utf-8");
+
+      const result = await Bun.build({
+        entrypoints: [shimSrc],
+        target: "browser",
+        define: { "process.env.NODE_ENV": JSON.stringify("production") },
+      });
+      expect(result.success).toBe(true);
+
+      const outPath = path.join(dir, "_jsx-dev-runtime.built.js");
+      await writeFile(outPath, await result.outputs[0]!.text(), "utf-8");
+      const mod = await import(`${pathToFileURL(outPath).href}?t=${Date.now()}`);
+
+      // The whole point of #323's re-regression: jsxDEV must be CALLABLE.
+      expect(typeof mod.jsxDEV).toBe("function");
+      // Fallback routes static-children to jsxs, otherwise jsx.
+      expect(mod.jsxDEV("div", {}, undefined, false).runtime).toBe("jsx");
+      expect(mod.jsxDEV("div", {}, undefined, true).runtime).toBe("jsxs");
+    } finally {
+      await rm(dir, { recursive: true, force: true });
+    }
+  });
 });

package/src/bundler/build.test.ts

@@ -362,6 +362,40 @@ describe("buildClientBundles vendor shims", () => {
     expect((globalThis as typeof globalThis & { __MANDU_TEST_DEFAULT_PROPS__?: unknown }).__MANDU_TEST_DEFAULT_PROPS__).toBeUndefined();
   });
 
+  test("surfaces an island hydration failure to the DevTools hook (#324)", async () => {
+    const modulePath = path.join(rootDir, ".mandu", "client", "runtime-failing-boundary.js");
+    // A module that throws at import time → loadAndHydrate's catch runs.
+    await writeFile(modulePath, `throw new Error("boom at import");`, "utf-8");
+
+    const emitted: Array<{ type?: string; data?: { message?: string; islandId?: string } }> = [];
+    (window as unknown as { __MANDU_DEVTOOLS_HOOK__?: { emit: (e: unknown) => void } }).__MANDU_DEVTOOLS_HOOK__ = {
+      emit: (e: unknown) => {
+        emitted.push(e as { type?: string });
+      },
+    };
+
+    document.body.innerHTML = `
+      <div
+        data-mandu-island="failing--0"
+        data-mandu-src="${pathToFileURL(modulePath).href}?t=${Date.now()}"
+        data-hydrate="load"
+      ></div>
+    `;
+    (window as typeof window & { __MANDU_ROOTS__?: Map<string, unknown> }).__MANDU_ROOTS__ = new Map();
+
+    try {
+      const runtime = await evaluateGeneratedHydrationRuntime();
+      runtime.hydrateIslands();
+
+      await waitForRuntimeAssertion(() => emitted.some((e) => e.type === "error"));
+      const errorEvent = emitted.find((e) => e.type === "error");
+      expect(errorEvent?.data?.islandId).toBe("failing--0");
+      expect(errorEvent?.data?.message).toContain("boom at import");
+    } finally {
+      delete (window as unknown as { __MANDU_DEVTOOLS_HOOK__?: unknown }).__MANDU_DEVTOOLS_HOOK__;
+    }
+  });
+
   test("runtime hydrates default client boundary from boundary-local props", async () => {
     const modulePath = path.join(rootDir, ".mandu", "client", "runtime-default-boundary.js");
     await writeFile(

package/src/bundler/build.ts

@@ -660,12 +660,24 @@ function generateJsxDevRuntimeShimSource(): string {
  * Development JSX 변환용
  *
  * #323: import map의 'react/jsx-dev-runtime'이 다시 이 셰임을 가리키므로
- * 'react/jsx-dev-runtime'에서 import하면 순환 self-import가 되어 jsxDEV가
- * undefined가 된다. 대신 'react'(→ _react.js, external 없이 react 전체를
- * 인라인하며 jsxDEV/Fragment를 re-export하는 vendor 번들)에서 가져와
- * 순환을 끊는다.
+ * 'react/jsx-dev-runtime'에서 import하면 순환 self-import가 된다. 대신
+ * 'react'(→ _react.js, react 전체를 인라인하는 vendor 번들)에서 가져온다.
+ *
+ * #323 재발(0.54.30): jsxDEV는 React의 **dev 전용** export다. _react.js가
+ * production NODE_ENV로 번들되면 'react/jsx-dev-runtime'이 production 변형으로
+ * 해소되어 jsxDEV 값이 undefined가 된다(jsx/jsxs는 둘 다 존재). 그 결과 dev
+ * island가 'jsxDEV is not a function'으로 전멸했다. _react.js가 어떤 NODE_ENV로
+ * 빌드되든 안전하도록, jsxDEV가 함수가 아니면 jsx/jsxs로 폴백한다(dev 경고만
+ * 잃고 렌더는 정상). isStaticChildren일 때는 jsxs로 라우팅한다.
  */
-import { jsxDEV, Fragment } from 'react';
+import { jsx, jsxs, jsxDEV as __manduReactJsxDEV, Fragment } from 'react';
+
+const jsxDEV =
+  typeof __manduReactJsxDEV === 'function'
+    ? __manduReactJsxDEV
+    : function jsxDEV(type, config, key, isStaticChildren) {
+        return (isStaticChildren ? jsxs : jsx)(type, config, key);
+      };
 
 // Named exports
 export { jsxDEV, Fragment };

package/src/client/runtime-entry.ts

@@ -160,6 +160,7 @@ class IslandErrorBoundary extends Component<IslandErrorBoundaryProps, IslandErro
 
   componentDidCatch(error: Error, errorInfo: unknown): void {
     console.error("[Mandu] Island error:", this.props.islandId, error, errorInfo);
+    emitIslandHydrationError(this.props.islandId, error);
   }
 
   reset = (): void => {
@@ -371,6 +372,35 @@ function isManduIslandExport(value: unknown): value is ManduIslandExport {
     "definition" in value;
 }
 
+// #324: surface island hydration/render failures to the in-page DevTools so
+// its health badge and Issues counter reflect them instead of staying
+// "HEALTHY". Render-time errors are swallowed by IslandErrorBoundary and never
+// reach the global error listener, so we emit them to the devtools hook here.
+function emitIslandHydrationError(islandId: string, error: unknown): void {
+  const devtoolsHook = (window as Window & {
+    __MANDU_DEVTOOLS_HOOK__?: RuntimeDevtoolsHook;
+  }).__MANDU_DEVTOOLS_HOOK__;
+  if (!devtoolsHook) return;
+  try {
+    devtoolsHook.emit({
+      type: "error",
+      timestamp: Date.now(),
+      data: {
+        id: "island-" + islandId + "-" + Date.now(),
+        type: "runtime",
+        severity: "error",
+        message: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+        timestamp: Date.now(),
+        url: location.href,
+        islandId,
+      },
+    });
+  } catch {
+    // DevTools must never break hydration.
+  }
+}
+
 async function loadAndHydrate(element: HTMLElement, src: string): Promise<void> {
   const id = element.getAttribute("data-mandu-island");
   if (!id) {
@@ -490,6 +520,7 @@ async function loadAndHydrate(element: HTMLElement, src: string): Promise<void>
   } catch (error) {
     console.error("[Mandu] Hydration failed for", islandId, error);
     element.setAttribute("data-mandu-error", "true");
+    emitIslandHydrationError(islandId, error);
 
     element.dispatchEvent(new CustomEvent("mandu:hydration-error", {
       bubbles: true,