@mandujs/core 0.5.1 → 0.5.3

package/src/runtime/server.ts

@@ -4,6 +4,7 @@ import type { BundleManifest } from "../bundler/types";
 import { Router } from "./router";
 import { renderSSR } from "./ssr";
 import React from "react";
+import path from "path";
 import {
   formatErrorResponse,
   createNotFoundResponse,
@@ -11,16 +12,86 @@ import {
   createPageLoadErrorResponse,
   createSSRErrorResponse,
 } from "../error";
+import {
+  type CorsOptions,
+  isPreflightRequest,
+  handlePreflightRequest,
+  applyCorsToResponse,
+  isCorsRequest,
+} from "./cors";
+
+// ========== MIME Types ==========
+const MIME_TYPES: Record<string, string> = {
+  // JavaScript
+  ".js": "application/javascript",
+  ".mjs": "application/javascript",
+  ".ts": "application/typescript",
+  // CSS
+  ".css": "text/css",
+  // HTML
+  ".html": "text/html",
+  ".htm": "text/html",
+  // JSON
+  ".json": "application/json",
+  // Images
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+  ".ico": "image/x-icon",
+  ".webp": "image/webp",
+  ".avif": "image/avif",
+  // Fonts
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".ttf": "font/ttf",
+  ".otf": "font/otf",
+  ".eot": "application/vnd.ms-fontobject",
+  // Documents
+  ".pdf": "application/pdf",
+  ".txt": "text/plain",
+  ".xml": "application/xml",
+  // Media
+  ".mp3": "audio/mpeg",
+  ".mp4": "video/mp4",
+  ".webm": "video/webm",
+  ".ogg": "audio/ogg",
+  // Archives
+  ".zip": "application/zip",
+  ".gz": "application/gzip",
+  // WebAssembly
+  ".wasm": "application/wasm",
+  // Source maps
+  ".map": "application/json",
+};
 
+function getMimeType(filePath: string): string {
+  const ext = path.extname(filePath).toLowerCase();
+  return MIME_TYPES[ext] || "application/octet-stream";
+}
+
+// ========== Server Options ==========
 export interface ServerOptions {
   port?: number;
   hostname?: string;
+  /** 프로젝트 루트 디렉토리 */
+  rootDir?: string;
   /** 개발 모드 여부 */
   isDev?: boolean;
   /** HMR 포트 (개발 모드에서 사용) */
   hmrPort?: number;
   /** 번들 매니페스트 (Island hydration용) */
   bundleManifest?: BundleManifest;
+  /** Public 디렉토리 경로 (기본: 'public') */
+  publicDir?: string;
+  /**
+   * CORS 설정
+   * - true: 모든 Origin 허용
+   * - false: CORS 비활성화 (기본값)
+   * - CorsOptions: 세부 설정
+   */
+  cors?: boolean | CorsOptions;
 }
 
 export interface ManduServer {
@@ -47,8 +118,20 @@ const pageLoaders: Map<string, PageLoader> = new Map();
 const routeComponents: Map<string, RouteComponent> = new Map();
 let createAppFn: CreateAppFn | null = null;
 
-// Dev mode settings (module-level for handleRequest access)
-let devModeSettings: { isDev: boolean; hmrPort?: number; bundleManifest?: BundleManifest } = { isDev: false };
+// Server settings (module-level for handleRequest access)
+let serverSettings: {
+  isDev: boolean;
+  hmrPort?: number;
+  bundleManifest?: BundleManifest;
+  rootDir: string;
+  publicDir: string;
+  cors?: CorsOptions | false;
+} = {
+  isDev: false,
+  rootDir: process.cwd(),
+  publicDir: "public",
+  cors: false,
+};
 
 export function registerApiHandler(routeId: string, handler: ApiHandler): void {
   apiHandlers.set(routeId, handler);
@@ -80,10 +163,99 @@ function defaultCreateApp(context: AppContext): React.ReactElement {
   return React.createElement(Component, { params: context.params });
 }
 
+// ========== Static File Serving ==========
+
+/**
+ * 정적 파일 서빙
+ * - /.mandu/client/* : 클라이언트 번들 (Island hydration)
+ * - /public/* : 정적 에셋 (이미지, CSS 등)
+ * - /favicon.ico : 파비콘
+ */
+async function serveStaticFile(pathname: string): Promise<Response | null> {
+  let filePath: string | null = null;
+  let isBundleFile = false;
+
+  // 1. 클라이언트 번들 파일 (/.mandu/client/*)
+  if (pathname.startsWith("/.mandu/client/")) {
+    filePath = path.join(serverSettings.rootDir, pathname);
+    isBundleFile = true;
+  }
+  // 2. Public 폴더 파일 (/public/* 또는 직접 접근)
+  else if (pathname.startsWith("/public/")) {
+    filePath = path.join(serverSettings.rootDir, pathname);
+  }
+  // 3. Public 폴더의 루트 파일 (favicon.ico, robots.txt 등)
+  else if (
+    pathname === "/favicon.ico" ||
+    pathname === "/robots.txt" ||
+    pathname === "/sitemap.xml" ||
+    pathname === "/manifest.json"
+  ) {
+    filePath = path.join(serverSettings.rootDir, serverSettings.publicDir, pathname);
+  }
+
+  if (!filePath) {
+    return null; // 정적 파일이 아님
+  }
+
+  try {
+    const file = Bun.file(filePath);
+    const exists = await file.exists();
+
+    if (!exists) {
+      return null; // 파일 없음 - 라우트 매칭으로 넘김
+    }
+
+    const mimeType = getMimeType(filePath);
+
+    // Cache-Control 헤더 설정
+    let cacheControl: string;
+    if (serverSettings.isDev) {
+      // 개발 모드: 캐시 없음
+      cacheControl = "no-cache, no-store, must-revalidate";
+    } else if (isBundleFile) {
+      // 프로덕션 번들: 1년 캐시 (파일명에 해시 포함 가정)
+      cacheControl = "public, max-age=31536000, immutable";
+    } else {
+      // 프로덕션 일반 정적 파일: 1일 캐시
+      cacheControl = "public, max-age=86400";
+    }
+
+    return new Response(file, {
+      headers: {
+        "Content-Type": mimeType,
+        "Cache-Control": cacheControl,
+      },
+    });
+  } catch {
+    return null; // 파일 읽기 실패 - 라우트 매칭으로 넘김
+  }
+}
+
+// ========== Request Handler ==========
+
 async function handleRequest(req: Request, router: Router): Promise<Response> {
   const url = new URL(req.url);
   const pathname = url.pathname;
 
+  // 0. CORS Preflight 요청 처리
+  if (serverSettings.cors && isPreflightRequest(req)) {
+    const corsOptions = serverSettings.cors === true ? {} : serverSettings.cors;
+    return handlePreflightRequest(req, corsOptions);
+  }
+
+  // 1. 정적 파일 서빙 시도 (최우선)
+  const staticResponse = await serveStaticFile(pathname);
+  if (staticResponse) {
+    // 정적 파일에도 CORS 헤더 적용
+    if (serverSettings.cors && isCorsRequest(req)) {
+      const corsOptions = serverSettings.cors === true ? {} : serverSettings.cors;
+      return applyCorsToResponse(staticResponse, req, corsOptions);
+    }
+    return staticResponse;
+  }
+
+  // 2. 라우트 매칭
   const match = router.match(pathname);
 
   if (!match) {
@@ -138,11 +310,11 @@ async function handleRequest(req: Request, router: Router): Promise<Response> {
 
       return renderSSR(app, {
         title: `${route.id} - Mandu`,
-        isDev: devModeSettings.isDev,
-        hmrPort: devModeSettings.hmrPort,
+        isDev: serverSettings.isDev,
+        hmrPort: serverSettings.hmrPort,
         routeId: route.id,
         hydration: route.hydration,
-        bundleManifest: devModeSettings.bundleManifest,
+        bundleManifest: serverSettings.bundleManifest,
       });
     } catch (err) {
       const ssrError = createSSRErrorResponse(
@@ -175,18 +347,51 @@ async function handleRequest(req: Request, router: Router): Promise<Response> {
   }, { status: 500 });
 }
 
+// ========== Server Startup ==========
+
 export function startServer(manifest: RoutesManifest, options: ServerOptions = {}): ManduServer {
-  const { port = 3000, hostname = "localhost", isDev = false, hmrPort, bundleManifest } = options;
+  const {
+    port = 3000,
+    hostname = "localhost",
+    rootDir = process.cwd(),
+    isDev = false,
+    hmrPort,
+    bundleManifest,
+    publicDir = "public",
+    cors = false,
+  } = options;
+
+  // CORS 옵션 파싱
+  const corsOptions: CorsOptions | false = cors === true ? {} : cors;
 
-  // Dev mode settings 저장
-  devModeSettings = { isDev, hmrPort, bundleManifest };
+  // Server settings 저장
+  serverSettings = {
+    isDev,
+    hmrPort,
+    bundleManifest,
+    rootDir,
+    publicDir,
+    cors: corsOptions,
+  };
 
   const router = new Router(manifest.routes);
 
+  // Fetch handler with CORS support
+  const fetchHandler = async (req: Request): Promise<Response> => {
+    const response = await handleRequest(req, router);
+
+    // API 라우트 응답에 CORS 헤더 적용
+    if (corsOptions && isCorsRequest(req)) {
+      return applyCorsToResponse(response, req, corsOptions);
+    }
+
+    return response;
+  };
+
   const server = Bun.serve({
     port,
     hostname,
-    fetch: (req) => handleRequest(req, router),
+    fetch: fetchHandler,
   });
 
   if (isDev) {
@@ -194,6 +399,10 @@ export function startServer(manifest: RoutesManifest, options: ServerOptions = {
     if (hmrPort) {
       console.log(`🔥 HMR enabled on port ${hmrPort + 1}`);
     }
+    console.log(`📂 Static files: /${publicDir}/, /.mandu/client/`);
+    if (corsOptions) {
+      console.log(`🌐 CORS enabled`);
+    }
   } else {
     console.log(`🥟 Mandu server running at http://${hostname}:${port}`);
   }

package/src/runtime/ssr.ts

@@ -39,6 +39,18 @@ function serializeServerData(data: Record<string, unknown>): string {
 <script>window.__MANDU_DATA__ = JSON.parse(document.getElementById('__MANDU_DATA__').textContent);</script>`;
 }
 
+/**
+ * Import map 생성 (bare specifier 해결용)
+ */
+function generateImportMap(manifest: BundleManifest): string {
+  if (!manifest.importMap || Object.keys(manifest.importMap.imports).length === 0) {
+    return "";
+  }
+
+  const importMapJson = JSON.stringify(manifest.importMap, null, 2);
+  return `<script type="importmap">${importMapJson}</script>`;
+}
+
 /**
  * Hydration 스크립트 태그 생성
  */
@@ -48,16 +60,17 @@ function generateHydrationScripts(
 ): string {
   const scripts: string[] = [];
 
+  // Import map 먼저 (반드시 module scripts 전에 위치해야 함)
+  const importMap = generateImportMap(manifest);
+  if (importMap) {
+    scripts.push(importMap);
+  }
+
   // Runtime 로드
   if (manifest.shared.runtime) {
     scripts.push(`<script type="module" src="${manifest.shared.runtime}"></script>`);
   }
 
-  // Vendor 로드
-  if (manifest.shared.vendor) {
-    scripts.push(`<script type="module" src="${manifest.shared.vendor}"></script>`);
-  }
-
   // Island 번들 로드
   const bundle = manifest.bundles[routeId];
   if (bundle) {