@mandujs/core 0.5.1 → 0.5.3

package/package.json

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

package/src/bundler/build.ts

@@ -28,6 +28,9 @@ function createEmptyManifest(env: "development" | "production"): BundleManifest
       runtime: "",
       vendor: "",
     },
+    importMap: {
+      imports: {},
+    },
   };
 }
 
@@ -201,18 +204,45 @@ export { islandRegistry, hydratedRoots };
 }
 
 /**
- * Vendor 번들 소스 생성 (React 등 공유 의존성)
+ * React shim 소스 생성 (import map용)
  */
-function generateVendorSource(): string {
+function generateReactShimSource(): string {
   return `
 /**
- * Mandu Vendor Bundle (Generated)
- * 공유 의존성
+ * Mandu React Shim (Generated)
+ * import map을 통해 bare specifier 해결
  */
+import * as React from 'react';
+export * from 'react';
+export default React;
+`;
+}
 
-export * as React from 'react';
-export * as ReactDOM from 'react-dom';
-export * as ReactDOMClient from 'react-dom/client';
+/**
+ * React DOM shim 소스 생성
+ */
+function generateReactDOMShimSource(): string {
+  return `
+/**
+ * Mandu React DOM Shim (Generated)
+ */
+import * as ReactDOM from 'react-dom';
+export * from 'react-dom';
+export default ReactDOM;
+`;
+}
+
+/**
+ * React DOM Client shim 소스 생성
+ */
+function generateReactDOMClientShimSource(): string {
+  return `
+/**
+ * Mandu React DOM Client Shim (Generated)
+ */
+import * as ReactDOMClient from 'react-dom/client';
+export * from 'react-dom/client';
+export default ReactDOMClient;
 `;
 }
 
@@ -292,57 +322,77 @@ async function buildRuntime(
 }
 
 /**
- * Vendor 번들 빌드
+ * Vendor shim 번들 빌드 결과
+ */
+interface VendorBuildResult {
+  success: boolean;
+  react: string;
+  reactDom: string;
+  reactDomClient: string;
+  errors: string[];
+}
+
+/**
+ * Vendor shim 번들 빌드
+ * React, ReactDOM, ReactDOMClient를 각각의 shim으로 빌드
  */
-async function buildVendor(
+async function buildVendorShims(
   outDir: string,
   options: BundlerOptions
-): Promise<{ success: boolean; outputPath: string; errors: string[] }> {
-  const vendorPath = path.join(outDir, "_vendor.src.js");
-  const outputName = "_vendor.js";
+): Promise<VendorBuildResult> {
+  const errors: string[] = [];
+  const results: Record<string, string> = {
+    react: "",
+    reactDom: "",
+    reactDomClient: "",
+  };
 
-  try {
-    // 벤더 소스 작성
-    await Bun.write(vendorPath, generateVendorSource());
+  const shims = [
+    { name: "_react", source: generateReactShimSource(), key: "react" },
+    { name: "_react-dom", source: generateReactDOMShimSource(), key: "reactDom" },
+    { name: "_react-dom-client", source: generateReactDOMClientShimSource(), key: "reactDomClient" },
+  ];
 
-    // 빌드
-    const result = await Bun.build({
-      entrypoints: [vendorPath],
-      outdir: outDir,
-      naming: outputName,
-      minify: options.minify ?? process.env.NODE_ENV === "production",
-      sourcemap: options.sourcemap ? "external" : "none",
-      target: "browser",
-      define: {
-        "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"),
-        ...options.define,
-      },
-    });
+  for (const shim of shims) {
+    const srcPath = path.join(outDir, `${shim.name}.src.js`);
+    const outputName = `${shim.name}.js`;
 
-    // 소스 파일 정리
-    await fs.unlink(vendorPath).catch(() => {});
-
-    if (!result.success) {
-      return {
-        success: false,
-        outputPath: "",
-        errors: result.logs.map((l) => l.message),
-      };
+    try {
+      await Bun.write(srcPath, shim.source);
+
+      const result = await Bun.build({
+        entrypoints: [srcPath],
+        outdir: outDir,
+        naming: outputName,
+        minify: options.minify ?? process.env.NODE_ENV === "production",
+        sourcemap: options.sourcemap ? "external" : "none",
+        target: "browser",
+        define: {
+          "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"),
+          ...options.define,
+        },
+      });
+
+      await fs.unlink(srcPath).catch(() => {});
+
+      if (!result.success) {
+        errors.push(`[${shim.name}] ${result.logs.map((l) => l.message).join(", ")}`);
+      } else {
+        results[shim.key] = `/.mandu/client/${outputName}`;
+      }
+    } catch (error) {
+      await fs.unlink(srcPath).catch(() => {});
+      errors.push(`[${shim.name}] ${String(error)}`);
     }
-
-    return {
-      success: true,
-      outputPath: `/.mandu/client/${outputName}`,
-      errors: [],
-    };
-  } catch (error) {
-    await fs.unlink(vendorPath).catch(() => {});
-    return {
-      success: false,
-      outputPath: "",
-      errors: [String(error)],
-    };
   }
+
+  return {
+    success: errors.length === 0,
+    react: results.react,
+    reactDom: results.reactDom,
+    reactDomClient: results.reactDomClient,
+    errors,
+  };
 }
 
 /**
@@ -411,7 +461,7 @@ function createBundleManifest(
   outputs: BundleOutput[],
   routes: RouteSpec[],
   runtimePath: string,
-  vendorPath: string,
+  vendorResult: VendorBuildResult,
   env: "development" | "production"
 ): BundleManifest {
   const bundles: BundleManifest["bundles"] = {};
@@ -422,7 +472,7 @@ function createBundleManifest(
 
     bundles[output.routeId] = {
       js: output.outputPath,
-      dependencies: ["_runtime", "_vendor"],
+      dependencies: ["_runtime", "_react"],
       priority: hydration?.priority || "visible",
     };
   }
@@ -434,7 +484,14 @@ function createBundleManifest(
     bundles,
     shared: {
       runtime: runtimePath,
-      vendor: vendorPath,
+      vendor: vendorResult.react, // primary vendor for backwards compatibility
+    },
+    importMap: {
+      imports: {
+        "react": vendorResult.react,
+        "react-dom": vendorResult.reactDom,
+        "react-dom/client": vendorResult.reactDomClient,
+      },
     },
   };
 }
@@ -523,10 +580,10 @@ export async function buildClientBundles(
     errors.push(...runtimeResult.errors.map((e) => `[Runtime] ${e}`));
   }
 
-  // 4. Vendor 번들 빌드
-  const vendorResult = await buildVendor(outDir, options);
+  // 4. Vendor shim 번들 빌드 (React, ReactDOM, ReactDOMClient)
+  const vendorResult = await buildVendorShims(outDir, options);
   if (!vendorResult.success) {
-    errors.push(...vendorResult.errors.map((e) => `[Vendor] ${e}`));
+    errors.push(...vendorResult.errors);
   }
 
   // 5. 각 Island 번들 빌드
@@ -544,7 +601,7 @@ export async function buildClientBundles(
     outputs,
     hydratedRoutes,
     runtimeResult.outputPath,
-    vendorResult.outputPath,
+    vendorResult,
     env
   );
 

package/src/bundler/types.ts

@@ -57,9 +57,13 @@ export interface BundleManifest {
   shared: {
     /** Hydration 런타임 */
     runtime: string;
-    /** 벤더 번들 (React 등) */
+    /** React 번들 경로 */
     vendor: string;
   };
+  /** Import map for bare specifiers (react, react-dom, etc.) */
+  importMap?: {
+    imports: Record<string, string>;
+  };
 }
 
 /**

package/src/client/index.ts

@@ -17,6 +17,7 @@
 // Island API
 export {
   island,
+  wrapComponent,
   useServerData,
   useHydrated,
   useIslandEvent,
@@ -25,6 +26,7 @@ export {
   type IslandMetadata,
   type CompiledIsland,
   type FetchOptions,
+  type WrapComponentOptions,
 } from "./island";
 
 // Runtime API
@@ -41,7 +43,7 @@ export {
 } from "./runtime";
 
 // Re-export as Mandu namespace for consistent API
-import { island } from "./island";
+import { island, wrapComponent } from "./island";
 import { hydrateIslands, initializeRuntime } from "./runtime";
 
 /**
@@ -54,6 +56,12 @@ export const Mandu = {
    */
   island,
 
+  /**
+   * Wrap existing React component as island
+   * @see wrapComponent
+   */
+  wrapComponent,
+
   /**
    * Hydrate all islands on the page
    * @see hydrateIslands

package/src/client/island.ts

@@ -166,6 +166,65 @@ export function useIslandEvent<T = unknown>(
   };
 }
 
+/**
+ * 기존 React 컴포넌트를 Island로 래핑
+ *
+ * @example
+ * ```typescript
+ * // 기존 React 컴포넌트
+ * import DatePicker from 'react-datepicker';
+ *
+ * // Island로 래핑 (serverData가 그대로 props로 전달됨)
+ * export default Mandu.wrapComponent(DatePicker);
+ *
+ * // 또는 props 변환이 필요한 경우
+ * export default Mandu.wrapComponent(DatePicker, {
+ *   transformProps: (serverData) => ({
+ *     selected: new Date(serverData.selectedDate),
+ *     onChange: (date) => console.log(date),
+ *   })
+ * });
+ * ```
+ */
+export interface WrapComponentOptions<TServerData, TProps> {
+  /** 서버 데이터를 컴포넌트 props로 변환 */
+  transformProps?: (serverData: TServerData) => TProps;
+  /** 에러 시 표시할 UI */
+  errorBoundary?: (error: Error, reset: () => void) => ReactNode;
+  /** 로딩 중 표시할 UI */
+  loading?: () => ReactNode;
+}
+
+export function wrapComponent<TProps extends Record<string, any>>(
+  Component: React.ComponentType<TProps>,
+  options?: WrapComponentOptions<TProps, TProps>
+): CompiledIsland<TProps, TProps>;
+
+export function wrapComponent<TServerData, TProps>(
+  Component: React.ComponentType<TProps>,
+  options: WrapComponentOptions<TServerData, TProps> & { transformProps: (serverData: TServerData) => TProps }
+): CompiledIsland<TServerData, TProps>;
+
+export function wrapComponent<TServerData, TProps>(
+  Component: React.ComponentType<TProps>,
+  options?: WrapComponentOptions<TServerData, TProps>
+): CompiledIsland<TServerData, TProps> {
+  const { transformProps, errorBoundary, loading } = options || {};
+
+  return island({
+    setup: (serverData: TServerData) => {
+      return transformProps ? transformProps(serverData) : (serverData as unknown as TProps);
+    },
+    render: (props: TProps) => {
+      // React.createElement를 사용하여 Component 렌더링
+      const React = require("react");
+      return React.createElement(Component, props);
+    },
+    errorBoundary,
+    loading,
+  });
+}
+
 /**
  * API 호출 헬퍼
  */

package/src/filling/context.ts

@@ -5,12 +5,211 @@
 
 import type { ZodSchema } from "zod";
 
+// ========== Cookie Types ==========
+
+export interface CookieOptions {
+  /** 쿠키 만료 시간 (Date 객체 또는 문자열) */
+  expires?: Date | string;
+  /** 쿠키 유효 기간 (초) */
+  maxAge?: number;
+  /** 쿠키 도메인 */
+  domain?: string;
+  /** 쿠키 경로 */
+  path?: string;
+  /** HTTPS에서만 전송 */
+  secure?: boolean;
+  /** JavaScript에서 접근 불가 */
+  httpOnly?: boolean;
+  /** Same-Site 정책 */
+  sameSite?: "strict" | "lax" | "none";
+  /** 파티션 키 (CHIPS) */
+  partitioned?: boolean;
+}
+
+/**
+ * Cookie Manager - 쿠키 읽기/쓰기 관리
+ */
+export class CookieManager {
+  private requestCookies: Map<string, string>;
+  private responseCookies: Map<string, { value: string; options: CookieOptions }>;
+  private deletedCookies: Set<string>;
+
+  constructor(request: Request) {
+    this.requestCookies = this.parseRequestCookies(request);
+    this.responseCookies = new Map();
+    this.deletedCookies = new Set();
+  }
+
+  private parseRequestCookies(request: Request): Map<string, string> {
+    const cookies = new Map<string, string>();
+    const cookieHeader = request.headers.get("cookie");
+
+    if (cookieHeader) {
+      const pairs = cookieHeader.split(";");
+      for (const pair of pairs) {
+        const [name, ...rest] = pair.trim().split("=");
+        if (name) {
+          cookies.set(name, decodeURIComponent(rest.join("=")));
+        }
+      }
+    }
+
+    return cookies;
+  }
+
+  /**
+   * 쿠키 값 읽기
+   * @example
+   * const session = ctx.cookies.get('session');
+   */
+  get(name: string): string | undefined {
+    return this.requestCookies.get(name);
+  }
+
+  /**
+   * 쿠키 존재 여부 확인
+   */
+  has(name: string): boolean {
+    return this.requestCookies.has(name);
+  }
+
+  /**
+   * 모든 쿠키 가져오기
+   */
+  getAll(): Record<string, string> {
+    return Object.fromEntries(this.requestCookies);
+  }
+
+  /**
+   * 쿠키 설정
+   * @example
+   * ctx.cookies.set('session', 'abc123', { httpOnly: true, maxAge: 3600 });
+   */
+  set(name: string, value: string, options: CookieOptions = {}): void {
+    this.responseCookies.set(name, { value, options });
+    this.deletedCookies.delete(name);
+  }
+
+  /**
+   * 쿠키 삭제
+   * @example
+   * ctx.cookies.delete('session');
+   */
+  delete(name: string, options: Pick<CookieOptions, "domain" | "path"> = {}): void {
+    this.responseCookies.delete(name);
+    this.deletedCookies.add(name);
+    // 삭제용 쿠키 설정 (maxAge=0)
+    this.responseCookies.set(name, {
+      value: "",
+      options: {
+        ...options,
+        maxAge: 0,
+        expires: new Date(0),
+      },
+    });
+  }
+
+  /**
+   * Set-Cookie 헤더 값들 생성
+   */
+  getSetCookieHeaders(): string[] {
+    const headers: string[] = [];
+
+    for (const [name, { value, options }] of this.responseCookies) {
+      headers.push(this.serializeCookie(name, value, options));
+    }
+
+    return headers;
+  }
+
+  /**
+   * 쿠키를 Set-Cookie 헤더 형식으로 직렬화
+   */
+  private serializeCookie(name: string, value: string, options: CookieOptions): string {
+    const parts: string[] = [`${encodeURIComponent(name)}=${encodeURIComponent(value)}`];
+
+    if (options.maxAge !== undefined) {
+      parts.push(`Max-Age=${options.maxAge}`);
+    }
+
+    if (options.expires) {
+      const expires =
+        options.expires instanceof Date
+          ? options.expires.toUTCString()
+          : options.expires;
+      parts.push(`Expires=${expires}`);
+    }
+
+    if (options.domain) {
+      parts.push(`Domain=${options.domain}`);
+    }
+
+    if (options.path) {
+      parts.push(`Path=${options.path}`);
+    } else {
+      parts.push("Path=/"); // 기본값
+    }
+
+    if (options.secure) {
+      parts.push("Secure");
+    }
+
+    if (options.httpOnly) {
+      parts.push("HttpOnly");
+    }
+
+    if (options.sameSite) {
+      parts.push(`SameSite=${options.sameSite.charAt(0).toUpperCase() + options.sameSite.slice(1)}`);
+    }
+
+    if (options.partitioned) {
+      parts.push("Partitioned");
+    }
+
+    return parts.join("; ");
+  }
+
+  /**
+   * Response에 Set-Cookie 헤더들 적용
+   */
+  applyToResponse(response: Response): Response {
+    const setCookieHeaders = this.getSetCookieHeaders();
+
+    if (setCookieHeaders.length === 0) {
+      return response;
+    }
+
+    // Headers를 복사하여 수정
+    const newHeaders = new Headers(response.headers);
+
+    for (const setCookie of setCookieHeaders) {
+      newHeaders.append("Set-Cookie", setCookie);
+    }
+
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers: newHeaders,
+    });
+  }
+
+  /**
+   * 응답에 적용할 쿠키가 있는지 확인
+   */
+  hasPendingCookies(): boolean {
+    return this.responseCookies.size > 0;
+  }
+}
+
+// ========== ManduContext ==========
+
 export class ManduContext {
   private store: Map<string, unknown> = new Map();
   private _params: Record<string, string>;
   private _query: Record<string, string>;
   private _shouldContinue: boolean = true;
   private _response: Response | null = null;
+  private _cookies: CookieManager;
 
   constructor(
     public readonly request: Request,
@@ -18,6 +217,7 @@ export class ManduContext {
   ) {
     this._params = params;
     this._query = this.parseQuery();
+    this._cookies = new CookieManager(request);
   }
 
   private parseQuery(): Record<string, string> {
@@ -58,6 +258,22 @@ export class ManduContext {
     return this.request.url;
   }
 
+  /**
+   * Cookie Manager
+   * @example
+   * // 쿠키 읽기
+   * const session = ctx.cookies.get('session');
+   *
+   * // 쿠키 설정
+   * ctx.cookies.set('session', 'abc123', { httpOnly: true, maxAge: 3600 });
+   *
+   * // 쿠키 삭제
+   * ctx.cookies.delete('session');
+   */
+  get cookies(): CookieManager {
+    return this._cookies;
+  }
+
   /**
    * Parse request body with optional Zod validation
    * @example
@@ -95,6 +311,16 @@ export class ManduContext {
   // 🥟 Response 보내기
   // ============================================
 
+  /**
+   * Response에 쿠키 헤더 적용 (내부 사용)
+   */
+  private withCookies(response: Response): Response {
+    if (this._cookies.hasPendingCookies()) {
+      return this._cookies.applyToResponse(response);
+    }
+    return response;
+  }
+
   /** 200 OK */
   ok<T>(data: T): Response {
     return this.json(data, 200);
@@ -107,7 +333,7 @@ export class ManduContext {
 
   /** 204 No Content */
   noContent(): Response {
-    return new Response(null, { status: 204 });
+    return this.withCookies(new Response(null, { status: 204 }));
   }
 
   /** 400 Bad Request */
@@ -137,28 +363,32 @@ export class ManduContext {
 
   /** Custom JSON response */
   json<T>(data: T, status: number = 200): Response {
-    return Response.json(data, { status });
+    const response = Response.json(data, { status });
+    return this.withCookies(response);
   }
 
   /** Custom text response */
   text(data: string, status: number = 200): Response {
-    return new Response(data, {
+    const response = new Response(data, {
       status,
       headers: { "Content-Type": "text/plain" },
     });
+    return this.withCookies(response);
   }
 
   /** Custom HTML response */
   html(data: string, status: number = 200): Response {
-    return new Response(data, {
+    const response = new Response(data, {
       status,
       headers: { "Content-Type": "text/html" },
     });
+    return this.withCookies(response);
   }
 
   /** Redirect response */
   redirect(url: string, status: 301 | 302 | 307 | 308 = 302): Response {
-    return Response.redirect(url, status);
+    const response = Response.redirect(url, status);
+    return this.withCookies(response);
   }
 
   // ============================================

package/src/filling/index.ts

@@ -2,6 +2,7 @@
  * Mandu Filling Module - 만두소 🥟
  */
 
-export { ManduContext, NEXT_SYMBOL, ValidationError } from "./context";
+export { ManduContext, NEXT_SYMBOL, ValidationError, CookieManager } from "./context";
+export type { CookieOptions } from "./context";
 export { ManduFilling, Mandu } from "./filling";
 export type { Handler, Guard, HttpMethod } from "./filling";