@mandujs/core 0.8.1 → 0.8.2

package/src/bundler/dev.ts

@@ -40,7 +40,6 @@ export interface DevBundler {
  */
 export async function startDevBundler(options: DevBundlerOptions): Promise<DevBundler> {
   const { rootDir, manifest, onRebuild, onError } = options;
-  const slotsDir = path.join(rootDir, "spec", "slots");
 
   // 초기 빌드
   console.log("🔨 Initial client bundle build...");
@@ -55,69 +54,116 @@ export async function startDevBundler(options: DevBundlerOptions): Promise<DevBu
     console.error("⚠️  Initial build had errors:", initialBuild.errors);
   }
 
-  // 파일 감시 설정
-  let watcher: fs.FSWatcher | null = null;
-  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  // clientModule 경로에서 routeId 매핑 생성
+  const clientModuleToRoute = new Map<string, string>();
+  const watchDirs = new Set<string>();
 
+  for (const route of manifest.routes) {
+    if (route.clientModule) {
+      const absPath = path.resolve(rootDir, route.clientModule);
+      const normalizedPath = absPath.replace(/\\/g, "/");
+      clientModuleToRoute.set(normalizedPath, route.id);
+
+      // 감시할 디렉토리 추가
+      const dir = path.dirname(absPath);
+      watchDirs.add(dir);
+    }
+  }
+
+  // spec/slots 디렉토리도 추가
+  const slotsDir = path.join(rootDir, "spec", "slots");
   try {
     await fs.promises.access(slotsDir);
+    watchDirs.add(slotsDir);
+  } catch {
+    // slots 디렉토리 없으면 무시
+  }
 
-    watcher = fs.watch(slotsDir, { recursive: true }, async (event, filename) => {
-      if (!filename) return;
+  // 파일 감시 설정
+  const watchers: fs.FSWatcher[] = [];
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
-      // .client.ts 파일만 감시
-      if (!filename.endsWith(".client.ts")) return;
+  const handleFileChange = async (changedFile: string) => {
+    const normalizedPath = changedFile.replace(/\\/g, "/");
 
-      // Debounce - 연속 변경 무시
-      if (debounceTimer) {
-        clearTimeout(debounceTimer);
+    // 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;
       }
+    }
 
-      debounceTimer = setTimeout(async () => {
-        const routeId = filename.replace(".client.ts", "").replace(/\\/g, "/").split("/").pop();
-        if (!routeId) return;
+    if (!routeId) return;
 
-        const route = manifest.routes.find((r) => r.id === routeId);
-        if (!route || !route.clientModule) return;
+    const route = manifest.routes.find((r) => r.id === routeId);
+    if (!route || !route.clientModule) return;
 
-        console.log(`\n🔄 Rebuilding: ${routeId}`);
-        const startTime = performance.now();
+    console.log(`\n🔄 Rebuilding: ${routeId}`);
+    const startTime = performance.now();
 
-        try {
-          const result = await buildClientBundles(manifest, rootDir, {
-            minify: false,
-            sourcemap: true,
-          });
-
-          const buildTime = performance.now() - startTime;
-
-          if (result.success) {
-            console.log(`✅ Rebuilt in ${buildTime.toFixed(0)}ms`);
-            onRebuild?.({
-              routeId,
-              success: true,
-              buildTime,
-            });
-          } else {
-            console.error(`❌ Build failed:`, result.errors);
-            onRebuild?.({
-              routeId,
-              success: false,
-              buildTime,
-              error: result.errors.join(", "),
-            });
-          }
-        } catch (error) {
-          const err = error instanceof Error ? error : new Error(String(error));
-          console.error(`❌ Build error:`, err.message);
-          onError?.(err, routeId);
+    try {
+      const result = await buildClientBundles(manifest, rootDir, {
+        minify: false,
+        sourcemap: true,
+      });
+
+      const buildTime = performance.now() - startTime;
+
+      if (result.success) {
+        console.log(`✅ Rebuilt in ${buildTime.toFixed(0)}ms`);
+        onRebuild?.({
+          routeId,
+          success: true,
+          buildTime,
+        });
+      } else {
+        console.error(`❌ Build failed:`, result.errors);
+        onRebuild?.({
+          routeId,
+          success: false,
+          buildTime,
+          error: result.errors.join(", "),
+        });
+      }
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      console.error(`❌ Build error:`, err.message);
+      onError?.(err, routeId);
+    }
+  };
+
+  // 각 디렉토리에 watcher 설정
+  for (const dir of watchDirs) {
+    try {
+      const watcher = fs.watch(dir, { recursive: true }, async (event, filename) => {
+        if (!filename) return;
+
+        // TypeScript/TSX 파일만 감시
+        if (!filename.endsWith(".ts") && !filename.endsWith(".tsx")) return;
+
+        const fullPath = path.join(dir, filename);
+
+        // Debounce - 연속 변경 무시
+        if (debounceTimer) {
+          clearTimeout(debounceTimer);
         }
-      }, 100); // 100ms debounce
-    });
 
-    console.log("👀 Watching for client slot changes...");
-  } catch {
-    console.warn(`⚠️  Slots directory not found: ${slotsDir}`);
+        debounceTimer = setTimeout(() => handleFileChange(fullPath), 100);
+      });
+
+      watchers.push(watcher);
+    } catch {
+      console.warn(`⚠️  Cannot watch directory: ${dir}`);
+    }
+  }
+
+  if (watchers.length > 0) {
+    console.log(`👀 Watching ${watchers.length} directories for changes...`);
   }
 
   return {
@@ -126,7 +172,7 @@ export async function startDevBundler(options: DevBundlerOptions): Promise<DevBu
       if (debounceTimer) {
         clearTimeout(debounceTimer);
       }
-      if (watcher) {
+      for (const watcher of watchers) {
         watcher.close();
       }
     },

package/src/client/Link.tsx

@@ -1,209 +1,209 @@
-/**
- * Mandu Link Component 🔗
- * Client-side 네비게이션을 위한 Link 컴포넌트
- */
-
-import React, {
-  type AnchorHTMLAttributes,
-  type MouseEvent,
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-} from "react";
-import { navigate, prefetch } from "./router";
-
-export interface LinkProps
-  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
-  /** 이동할 URL */
-  href: string;
-  /** history.replaceState 사용 여부 */
-  replace?: boolean;
-  /** 마우스 hover 시 prefetch 여부 */
-  prefetch?: boolean;
-  /** 스크롤 위치 복원 여부 (기본: true) */
-  scroll?: boolean;
-  /** 자식 요소 */
-  children?: ReactNode;
-}
-
-/**
- * Client-side 네비게이션 Link 컴포넌트
- *
- * @example
- * ```tsx
- * import { Link } from "@mandujs/core/client";
- *
- * // 기본 사용
- * <Link href="/about">About</Link>
- *
- * // Prefetch 활성화
- * <Link href="/users" prefetch>Users</Link>
- *
- * // Replace 모드 (뒤로가기 히스토리 없음)
- * <Link href="/login" replace>Login</Link>
- * ```
- */
-export function Link({
-  href,
-  replace = false,
-  prefetch: shouldPrefetch = false,
-  scroll = true,
-  children,
-  onClick,
-  onMouseEnter,
-  onFocus,
-  ...rest
-}: LinkProps): React.ReactElement {
-  const prefetchedRef = useRef(false);
-
-  // 클릭 핸들러
-  const handleClick = useCallback(
-    (event: MouseEvent<HTMLAnchorElement>) => {
-      // 사용자 정의 onClick 먼저 실행
-      onClick?.(event);
-
-      // 기본 동작 방지 조건
-      if (
-        event.defaultPrevented ||
-        event.button !== 0 ||
-        event.metaKey ||
-        event.altKey ||
-        event.ctrlKey ||
-        event.shiftKey
-      ) {
-        return;
-      }
-
-      // 외부 링크 체크
-      try {
-        const url = new URL(href, window.location.origin);
-        if (url.origin !== window.location.origin) {
-          return; // 외부 링크는 기본 동작
-        }
-      } catch {
-        return;
-      }
-
-      // Client-side 네비게이션
-      event.preventDefault();
-      navigate(href, { replace, scroll });
-    },
-    [href, replace, scroll, onClick]
-  );
-
-  // Prefetch 실행
-  const doPrefetch = useCallback(() => {
-    if (!shouldPrefetch || prefetchedRef.current) return;
-
-    try {
-      const url = new URL(href, window.location.origin);
-      if (url.origin === window.location.origin) {
-        prefetch(href);
-        prefetchedRef.current = true;
-      }
-    } catch {
-      // 무시
-    }
-  }, [href, shouldPrefetch]);
-
-  // 마우스 hover 핸들러
-  const handleMouseEnter = useCallback(
-    (event: MouseEvent<HTMLAnchorElement>) => {
-      onMouseEnter?.(event);
-      doPrefetch();
-    },
-    [onMouseEnter, doPrefetch]
-  );
-
-  // 포커스 핸들러 (키보드 네비게이션)
-  const handleFocus = useCallback(
-    (event: React.FocusEvent<HTMLAnchorElement>) => {
-      onFocus?.(event);
-      doPrefetch();
-    },
-    [onFocus, doPrefetch]
-  );
-
-  // Viewport 진입 시 prefetch (IntersectionObserver)
-  useEffect(() => {
-    if (!shouldPrefetch || typeof IntersectionObserver === "undefined") {
-      return;
-    }
-
-    // ref가 없으면 무시 (SSR)
-    return;
-  }, [shouldPrefetch]);
-
-  return (
-    <a
-      href={href}
-      onClick={handleClick}
-      onMouseEnter={handleMouseEnter}
-      onFocus={handleFocus}
-      data-mandu-link=""
-      {...rest}
-    >
-      {children}
-    </a>
-  );
-}
-
-/**
- * NavLink - 현재 경로와 일치할 때 활성 스타일 적용
- *
- * @example
- * ```tsx
- * import { NavLink } from "@mandujs/core/client";
- *
- * <NavLink
- *   href="/about"
- *   className={({ isActive }) => isActive ? "active" : ""}
- * >
- *   About
- * </NavLink>
- * ```
- */
-export interface NavLinkProps extends Omit<LinkProps, "className" | "style"> {
-  /** 활성 상태에 따른 className */
-  className?: string | ((props: { isActive: boolean }) => string);
-  /** 활성 상태에 따른 style */
-  style?:
-    | React.CSSProperties
-    | ((props: { isActive: boolean }) => React.CSSProperties);
-  /** 정확히 일치해야 활성화 (기본: false) */
-  exact?: boolean;
-}
-
-export function NavLink({
-  href,
-  className,
-  style,
-  exact = false,
-  ...rest
-}: NavLinkProps): React.ReactElement {
-  // 현재 경로와 비교
-  const isActive =
-    typeof window !== "undefined"
-      ? exact
-        ? window.location.pathname === href
-        : window.location.pathname.startsWith(href)
-      : false;
-
-  const resolvedClassName =
-    typeof className === "function" ? className({ isActive }) : className;
-
-  const resolvedStyle =
-    typeof style === "function" ? style({ isActive }) : style;
-
-  return (
-    <Link
-      href={href}
-      className={resolvedClassName}
-      style={resolvedStyle}
-      {...rest}
-    />
-  );
-}
-
-export default Link;
+/**
+ * Mandu Link Component 🔗
+ * Client-side 네비게이션을 위한 Link 컴포넌트
+ */
+
+import React, {
+  type AnchorHTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import { navigate, prefetch } from "./router";
+
+export interface LinkProps
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+  /** 이동할 URL */
+  href: string;
+  /** history.replaceState 사용 여부 */
+  replace?: boolean;
+  /** 마우스 hover 시 prefetch 여부 */
+  prefetch?: boolean;
+  /** 스크롤 위치 복원 여부 (기본: true) */
+  scroll?: boolean;
+  /** 자식 요소 */
+  children?: ReactNode;
+}
+
+/**
+ * Client-side 네비게이션 Link 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * import { Link } from "@mandujs/core/client";
+ *
+ * // 기본 사용
+ * <Link href="/about">About</Link>
+ *
+ * // Prefetch 활성화
+ * <Link href="/users" prefetch>Users</Link>
+ *
+ * // Replace 모드 (뒤로가기 히스토리 없음)
+ * <Link href="/login" replace>Login</Link>
+ * ```
+ */
+export function Link({
+  href,
+  replace = false,
+  prefetch: shouldPrefetch = false,
+  scroll = true,
+  children,
+  onClick,
+  onMouseEnter,
+  onFocus,
+  ...rest
+}: LinkProps): React.ReactElement {
+  const prefetchedRef = useRef(false);
+
+  // 클릭 핸들러
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      // 사용자 정의 onClick 먼저 실행
+      onClick?.(event);
+
+      // 기본 동작 방지 조건
+      if (
+        event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.shiftKey
+      ) {
+        return;
+      }
+
+      // 외부 링크 체크
+      try {
+        const url = new URL(href, window.location.origin);
+        if (url.origin !== window.location.origin) {
+          return; // 외부 링크는 기본 동작
+        }
+      } catch {
+        return;
+      }
+
+      // Client-side 네비게이션
+      event.preventDefault();
+      navigate(href, { replace, scroll });
+    },
+    [href, replace, scroll, onClick]
+  );
+
+  // Prefetch 실행
+  const doPrefetch = useCallback(() => {
+    if (!shouldPrefetch || prefetchedRef.current) return;
+
+    try {
+      const url = new URL(href, window.location.origin);
+      if (url.origin === window.location.origin) {
+        prefetch(href);
+        prefetchedRef.current = true;
+      }
+    } catch {
+      // 무시
+    }
+  }, [href, shouldPrefetch]);
+
+  // 마우스 hover 핸들러
+  const handleMouseEnter = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      onMouseEnter?.(event);
+      doPrefetch();
+    },
+    [onMouseEnter, doPrefetch]
+  );
+
+  // 포커스 핸들러 (키보드 네비게이션)
+  const handleFocus = useCallback(
+    (event: React.FocusEvent<HTMLAnchorElement>) => {
+      onFocus?.(event);
+      doPrefetch();
+    },
+    [onFocus, doPrefetch]
+  );
+
+  // Viewport 진입 시 prefetch (IntersectionObserver)
+  useEffect(() => {
+    if (!shouldPrefetch || typeof IntersectionObserver === "undefined") {
+      return;
+    }
+
+    // ref가 없으면 무시 (SSR)
+    return;
+  }, [shouldPrefetch]);
+
+  return (
+    <a
+      href={href}
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onFocus={handleFocus}
+      data-mandu-link=""
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+}
+
+/**
+ * NavLink - 현재 경로와 일치할 때 활성 스타일 적용
+ *
+ * @example
+ * ```tsx
+ * import { NavLink } from "@mandujs/core/client";
+ *
+ * <NavLink
+ *   href="/about"
+ *   className={({ isActive }) => isActive ? "active" : ""}
+ * >
+ *   About
+ * </NavLink>
+ * ```
+ */
+export interface NavLinkProps extends Omit<LinkProps, "className" | "style"> {
+  /** 활성 상태에 따른 className */
+  className?: string | ((props: { isActive: boolean }) => string);
+  /** 활성 상태에 따른 style */
+  style?:
+    | React.CSSProperties
+    | ((props: { isActive: boolean }) => React.CSSProperties);
+  /** 정확히 일치해야 활성화 (기본: false) */
+  exact?: boolean;
+}
+
+export function NavLink({
+  href,
+  className,
+  style,
+  exact = false,
+  ...rest
+}: NavLinkProps): React.ReactElement {
+  // 현재 경로와 비교
+  const isActive =
+    typeof window !== "undefined"
+      ? exact
+        ? window.location.pathname === href
+        : window.location.pathname.startsWith(href)
+      : false;
+
+  const resolvedClassName =
+    typeof className === "function" ? className({ isActive }) : className;
+
+  const resolvedStyle =
+    typeof style === "function" ? style({ isActive }) : style;
+
+  return (
+    <Link
+      href={href}
+      className={resolvedClassName}
+      style={resolvedStyle}
+      {...rest}
+    />
+  );
+}
+
+export default Link;