@mandujs/core 0.54.13 → 0.54.15

package/src/bundler/build.ts

@@ -522,25 +522,103 @@ function generateRuntimeSource(): string {
 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__;
-
-// 서버 데이터
-function readManduData() {
-  if (window.__MANDU_DATA__) return window.__MANDU_DATA__;
+// Hydrated roots 추적 (unmount용) - 전역 초기화
+window.__MANDU_ROOTS__ = window.__MANDU_ROOTS__ || new Map();
+const hydratedRoots = window.__MANDU_ROOTS__;
+
+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__ = JSON.parse(raw);
-  } catch (error) {
-    console.warn('[Mandu] Failed to parse server data:', error);
-    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__;
@@ -681,26 +759,62 @@ function createHydrationOptions(element, id, mode) {
   };
 }
 
-/**
- * Hydration 스케줄러
- */
-function scheduleHydration(element, src, priority) {
-  switch (priority) {
-    case 'immediate':
-      loadAndHydrate(element, src);
-      break;
+/**
+ * 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: '50px' });
-        const target = resolveHydrationTarget(element);
-        observer.observe(target);
-      } else {
+          if (entries[0].isIntersecting) {
+            observer.disconnect();
+            loadAndHydrate(element, src);
+          }
+        }, { rootMargin: '200px' });
+        const target = resolveHydrationTarget(element);
+        observer.observe(target);
+      } else {
         loadAndHydrate(element, src);
       }
       break;
@@ -712,26 +826,26 @@ function scheduleHydration(element, src, priority) {
         setTimeout(() => loadAndHydrate(element, src), 200);
       }
       break;
-
-    case 'interaction': {
-      const target = resolveHydrationTarget(element);
-      const hydrate = () => {
-        target.removeEventListener('mouseenter', hydrate);
-        target.removeEventListener('focusin', hydrate);
-        target.removeEventListener('touchstart', hydrate);
-        target.removeEventListener('pointerdown', hydrate);
-        target.removeEventListener('keydown', hydrate);
-        loadAndHydrate(element, src);
-      };
-      target.addEventListener('mouseenter', hydrate, { once: true, passive: true });
-      target.addEventListener('focusin', hydrate, { once: true });
-      target.addEventListener('touchstart', hydrate, { once: true, passive: true });
-      target.addEventListener('pointerdown', hydrate, { once: true, passive: true });
-      target.addEventListener('keydown', hydrate, { once: true });
-      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 (핵심 함수)
@@ -767,12 +881,12 @@ async function loadAndHydrate(element, src) {
       const propsEl = element.hasAttribute('data-props')
         ? element
         : element.querySelector('[data-props]');
-      if (propsEl) {
-        try {
-          data = JSON.parse(propsEl.getAttribute('data-props'));
-        } catch (e) {
-          console.warn('[Mandu] Failed to parse data-props fallback:', e);
-        }
+      if (propsEl) {
+        try {
+          data = deserializeManduProps(propsEl.getAttribute('data-props') || '{}');
+        } catch (e) {
+          console.warn('[Mandu] Failed to parse data-props fallback:', e);
+        }
       }
     }
 
@@ -916,12 +1030,13 @@ function hydrateIslands() {
   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}';
-
-    if (!id || !src) {
-      console.warn('[Mandu] Island missing id or src:', el);
+    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;
     }
 
@@ -929,12 +1044,12 @@ function hydrateIslands() {
     if (seenIds.has(id)) {
       console.warn('[Mandu] Duplicate island id detected:', id, '- skipping');
       continue;
-    }
-    seenIds.add(id);
-
-    scheduleHydration(el, src, priority);
-  }
-}
+    }
+    seenIds.add(id);
+
+    scheduleHydration(el, src, hydrateStrategy);
+  }
+}
 
 /**
  * Island unmount
@@ -1168,39 +1283,44 @@ function patternCacheSet(key, value) {
   patternCache.set(key, value);
 }
 
-function compilePattern(pattern) {
-  var cached = patternCacheGet(pattern);
-  if (cached) return cached;
-
-  const paramNames = [];
-  let paramIndex = 0;
-  const paramMatches = [];
-
-  const withPlaceholders = pattern.replace(/:([a-zA-Z_][a-zA-Z0-9_]*)/g, (_, name) => {
-    paramMatches.push(name);
-    return '%%PARAM%%';
-  });
-
-  const escaped = withPlaceholders.replace(/[.*+?^\${}()|[\\]\\\\]/g, '\\\\$&');
-  const regexStr = escaped.replace(/%%PARAM%%/g, () => {
-    paramNames.push(paramMatches[paramIndex++]);
-    return '([^/]+)';
-  });
-
-  const compiled = { regex: new RegExp('^' + regexStr + '$'), paramNames };
-  patternCacheSet(pattern, compiled);
-  return compiled;
-}
+function compilePattern(pattern) {
+  var cached = patternCacheGet(pattern);
+  if (cached) return cached;
+
+  const paramNames = [];
+  const normalized = pattern === '/' ? '/' : pattern.replace(/\\/+$/, '') || '/';
+  const segments = normalized.split('/').filter(Boolean);
+  const regexStr = segments.length === 0
+    ? '/'
+    : segments.map((segment) => {
+        if (segment === '*') return '/.+';
+        const wildcardMatch = segment.match(/^:([a-zA-Z_][a-zA-Z0-9_]*)\\*(\\?)?$/);
+        if (wildcardMatch) {
+          paramNames.push(wildcardMatch[1]);
+          return wildcardMatch[2] === '?' ? '(?:/(.*))?' : '/(.+)';
+        }
+        const paramMatch = segment.match(/^:([a-zA-Z_][a-zA-Z0-9_]*)$/);
+        if (paramMatch) {
+          paramNames.push(paramMatch[1]);
+          return '/([^/]+)';
+        }
+        return '/' + segment.replace(/[.*+?^\${}()|[\\]\\\\]/g, '\\\\$&');
+      }).join('');
+
+  const compiled = { regex: new RegExp('^' + regexStr + '$'), paramNames };
+  patternCacheSet(pattern, compiled);
+  return compiled;
+}
 
 function extractParams(pattern, pathname) {
   const compiled = compilePattern(pattern);
   const match = pathname.match(compiled.regex);
   if (!match) return {};
-
-  const params = {};
-  compiled.paramNames.forEach((name, i) => { params[name] = match[i + 1]; });
-  return params;
-}
+
+  const params = {};
+  compiled.paramNames.forEach((name, i) => { params[name] = match[i + 1] || ''; });
+  return params;
+}
 
 function notifyListeners() {
   const state = getGlobalState();
@@ -1929,25 +2049,34 @@ async function buildVendorShims(
   };
 }
 
-function vendorShimFailureHint(shimName: string): string {
-  if (shimName.includes("react-refresh")) {
-    return "Hint: install the optional dev peer dependency with `bun add -d react-refresh`.";
-  }
-  return "Hint: check the import paths and ensure the vendor package is installed.";
-}
-
-/**
- * 단일 Island 번들 빌드
- */
+function vendorShimFailureHint(shimName: string): string {
+  if (shimName.includes("react-refresh")) {
+    return "Hint: install the optional dev peer dependency with `bun add -d react-refresh`.";
+  }
+  return "Hint: check the import paths and ensure the vendor package is installed.";
+}
+
+function routeIdToAssetStem(routeId: string): string {
+  const safe = routeId.replace(/[<>:"/\\|?*\x00-\x1F]/g, (ch) =>
+    `_${ch.codePointAt(0)!.toString(16)}_`
+  );
+  return safe.replace(/[. ]+$/g, "") || "route";
+}
+
+/**
+ * 단일 Island 번들 빌드
+ */
 async function buildIsland(
   route: RouteSpec,
   rootDir: string,
   outDir: string,
   options: BundlerOptions
-): Promise<BundleOutput> {
-  const clientModulePath = path.join(rootDir, route.clientModule!);
-  const entryPath = path.join(outDir, `_entry_${route.id}.js`);
-  const outputName = `${route.id}.island.js`;
+): Promise<BundleOutput> {
+  const clientModulePath = path.join(rootDir, route.clientModule!);
+  const assetStem = routeIdToAssetStem(route.id);
+  const entryStem = `_entry_${assetStem}`;
+  const entryPath = path.join(outDir, `${entryStem}.js`);
+  const outputName = `${assetStem}.island.js`;
 
   // Phase 7.1 B-1/B-4: wire native Fast Refresh transform + Mandu's
   // boundary injection plugin. Dev-only; prod bundles remain clean.
@@ -1988,11 +2117,11 @@ async function buildIsland(
     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 (options.splitting && result.outputs.length > 0) {
+      // splitting 모드: 결과에서 엔트리 파일 찾기
+      const entryOutput = result.outputs.find(
+        (o) => o.kind === "entry-point" || o.path.includes(entryStem) || o.path.includes(assetStem)
+      );
       if (entryOutput) {
         actualOutputPath = entryOutput.path;
         actualOutputName = path.basename(entryOutput.path);

package/src/client/router.ts

@@ -165,39 +165,42 @@ const patternCache = new LRUCache<string, CompiledPattern>(LIMITS.ROUTER_PATTERN
 // because `registerCacheSize` replaces any prior reporter under the same key.
 registerCacheSize("patternCache", () => patternCache.size);
 
-/**
- * 패턴을 정규식으로 컴파일
- */
-function compilePattern(pattern: string): CompiledPattern {
-  const cached = patternCache.get(pattern);
-  if (cached) return cached;
-
-  const paramNames: string[] = [];
-  const PARAM_PLACEHOLDER = "\x00PARAM\x00";
-  const paramMatches: string[] = [];
-
-  const withPlaceholders = pattern.replace(
-    /:([a-zA-Z_][a-zA-Z0-9_]*)/g,
-    (_, paramName) => {
-      paramMatches.push(paramName);
-      return PARAM_PLACEHOLDER;
-    }
-  );
-
-  const escaped = withPlaceholders.replace(/[.*+?^${}()|[\]\\\/]/g, "\\$&");
-
-  let paramIndex = 0;
-  const regexStr = escaped.replace(
-    new RegExp(PARAM_PLACEHOLDER.replace(/\x00/g, "\\x00"), "g"),
-    () => {
-      paramNames.push(paramMatches[paramIndex++]);
-      return "([^/]+)";
-    }
-  );
-
-  const compiled = {
-    regex: new RegExp(`^${regexStr}$`),
-    paramNames,
+/**
+ * 패턴을 정규식으로 컴파일
+ */
+function compilePattern(pattern: string): CompiledPattern {
+  const cached = patternCache.get(pattern);
+  if (cached) return cached;
+
+  const paramNames: string[] = [];
+  const normalized = pattern === "/" ? "/" : pattern.replace(/\/+$/, "") || "/";
+  const segments = normalized.split("/").filter(Boolean);
+
+  const regexStr = segments.length === 0
+    ? "/"
+    : segments.map((segment) => {
+        if (segment === "*") {
+          return "/.+";
+        }
+
+        const wildcardMatch = segment.match(/^:([a-zA-Z_][a-zA-Z0-9_]*)\*(\?)?$/);
+        if (wildcardMatch) {
+          paramNames.push(wildcardMatch[1]);
+          return wildcardMatch[2] === "?" ? "(?:/(.*))?" : "/(.+)";
+        }
+
+        const paramMatch = segment.match(/^:([a-zA-Z_][a-zA-Z0-9_]*)$/);
+        if (paramMatch) {
+          paramNames.push(paramMatch[1]);
+          return "/([^/]+)";
+        }
+
+        return `/${escapePatternSegment(segment)}`;
+      }).join("");
+
+  const compiled = {
+    regex: new RegExp(`^${regexStr}$`),
+    paramNames,
   };
 
   patternCache.set(pattern, compiled);
@@ -216,13 +219,17 @@ function extractParamsFromPath(
 
   if (!match) return {};
 
-  const params: Record<string, string> = {};
-  compiled.paramNames.forEach((name, index) => {
-    params[name] = match[index + 1];
-  });
-
-  return params;
-}
+  const params: Record<string, string> = {};
+  compiled.paramNames.forEach((name, index) => {
+    params[name] = match[index + 1] ?? "";
+  });
+
+  return params;
+}
+
+function escapePatternSegment(segment: string): string {
+  return segment.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
 
 // ========== Navigation ==========
 

package/src/router/client-entry.test.ts

@@ -1,14 +1,21 @@
-import { describe, expect, it } from "bun:test";
-import { mkdir, mkdtemp, rm, writeFile } from "fs/promises";
-import path from "path";
+import { describe, expect, it } from "bun:test";
+import { mkdir, mkdtemp, rm, writeFile } from "fs/promises";
+import path from "path";
 import {
   findClientComponentImports,
   findRouteLevelClientComponentImport,
   findRouteLevelClientComponentImports,
   resolveRouteLevelClientEntryPath,
-} from "./client-entry";
-
-describe("findClientComponentImports", () => {
+} from "./client-entry";
+
+const repoTempRoot = path.resolve(import.meta.dir, "../../../..", ".tmp-test-artifacts");
+
+async function mkRepoTempDir(prefix: string): Promise<string> {
+  await mkdir(repoTempRoot, { recursive: true });
+  return mkdtemp(path.join(repoTempRoot, prefix));
+}
+
+describe("findClientComponentImports", () => {
   it("detects named .client imports for diagnostics", () => {
     const imports = findClientComponentImports(`
       import { LoginForm, SubmitButton as Button } from "@/client/widgets/login-form/LoginForm.client";
@@ -192,8 +199,8 @@ describe("findClientComponentImports", () => {
     expect(routeClient).toBeNull();
   });
 
-  it("resolves a route-level client entry by reading a use client target without .client in the path", async () => {
-    const rootDir = await mkdtemp(path.join(import.meta.dir, ".tmp-client-entry-"));
+  it("resolves a route-level client entry by reading a use client target without .client in the path", async () => {
+    const rootDir = await mkRepoTempDir("client-entry-");
     try {
       await mkdir(path.join(rootDir, "app", "pledges", "new"), { recursive: true });
       await mkdir(path.join(rootDir, "src", "client", "widgets", "pledge-form"), { recursive: true });

package/src/router/client-entry.ts

@@ -216,21 +216,28 @@ export async function resolveRouteLevelClientEntry(
   return null;
 }
 
-export async function shouldPreserveExistingClientModule(
-  route: RouteSpec,
-  clientModule: string,
-  rootDir: string,
-): Promise<boolean> {
-  if (!isRouteLevelClientEntrySpecifier(clientModule)) return false;
-  const source = await readRouteModule(rootDir, clientModule);
-  if (source === null) return false;
-  if (hasUseServerDirective(source)) return false;
-  if (clientModuleIsRouteComponent(route, clientModule)) {
-    if (hasUseClientDirective(source)) return true;
-    return await routeComponentHasResolvableClientEntry(rootDir, clientModule, source);
-  }
-  return true;
-}
+export async function shouldPreserveExistingClientModule(
+  route: RouteSpec,
+  clientModule: string,
+  rootDir: string,
+): Promise<boolean> {
+  if (!isRouteLevelClientEntrySpecifier(clientModule)) return false;
+  const source = await readRouteModule(rootDir, clientModule);
+  if (source === null) return false;
+  if (hasUseServerDirective(source)) return false;
+  if (clientModuleIsRouteComponent(route, clientModule)) {
+    if (hasUseClientDirective(source)) return true;
+    return await routeComponentHasResolvableClientEntry(rootDir, clientModule, source);
+  }
+
+  if (route.kind !== "page" || !route.componentModule) return false;
+
+  const routeSource = await readRouteModule(rootDir, route.componentModule);
+  if (routeSource === null) return false;
+
+  const currentEntry = await resolveRouteLevelClientEntry(rootDir, route.componentModule, routeSource);
+  return normalizeRouteModulePath(currentEntry?.modulePath) === normalizeRouteModulePath(clientModule);
+}
 
 function resolveImportBasePath(rootDir: string, importerModule: string, specifier: string): string | null {
   const normalized = specifier.replace(/\\/g, "/");