@mandujs/core 0.19.0 → 0.19.2

package/src/client/hooks.ts

@@ -3,17 +3,20 @@
  * React hooks for client-side routing
  */
 
-import { useState, useEffect, useCallback, useSyncExternalStore } from "react";
+import { useState, useEffect, useCallback, useMemo, useSyncExternalStore } from "react";
 import {
   subscribe,
   getRouterState,
   getCurrentRoute,
   getLoaderData,
+  getActionData,
   getNavigationState,
   navigate,
+  submitAction,
   type RouteInfo,
   type NavigationState,
   type NavigateOptions,
+  type ActionResult,
 } from "./router";
 
 /**
@@ -235,12 +238,18 @@ export function useRouter() {
 export function useMatch(pattern: string): boolean {
   const pathname = usePathname();
 
-  // 간단한 패턴 매칭 (파라미터 고려)
-  const regexStr = pattern
-    .replace(/:[a-zA-Z_][a-zA-Z0-9_]*/g, "[^/]+")
-    .replace(/\//g, "\\/");
+  const regex = useMemo(() => {
+    // 파라미터를 플레이스홀더로 치환 → 나머지 특수문자 이스케이프 → 플레이스홀더 복원
+    const PLACEHOLDER = "\x00PARAM\x00";
+    const withPlaceholders = pattern.replace(/:[a-zA-Z_][a-zA-Z0-9_]*/g, PLACEHOLDER);
+    const escaped = withPlaceholders.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const regexStr = escaped.replace(
+      new RegExp(PLACEHOLDER.replace(/\x00/g, "\\x00"), "g"),
+      "[^/]+"
+    );
+    return new RegExp(`^${regexStr}$`);
+  }, [pattern]);
 
-  const regex = new RegExp(`^${regexStr}$`);
   return regex.test(pathname);
 }
 
@@ -265,3 +274,93 @@ export function useGoForward(): () => void {
     }
   }, []);
 }
+
+/**
+ * Action 데이터 접근
+ * filling.action()의 결과 데이터
+ *
+ * @example
+ * ```tsx
+ * const actionData = useActionData<{ created: boolean }>();
+ * if (actionData?.created) { ... }
+ * ```
+ */
+export function useActionData<T = unknown>(): T | undefined {
+  const state = useRouterState();
+  return state.actionData as T | undefined;
+}
+
+/**
+ * Action 제출 함수
+ *
+ * @example
+ * ```tsx
+ * const submit = useSubmit();
+ * const handleCreate = () => submit("/api/todos", { title: "New" }, "create");
+ * ```
+ */
+export function useSubmit(): (
+  url: string,
+  data: FormData | Record<string, unknown>,
+  actionName?: string,
+  method?: string
+) => Promise<ActionResult> {
+  return useCallback(
+    (url: string, data: FormData | Record<string, unknown>, actionName = "default", method = "POST") => {
+      return submitAction(url, data, actionName, method);
+    },
+    []
+  );
+}
+
+/**
+ * Mandu 통합 상태 훅
+ * 라우트, 데이터, 네비게이션, 액션 상태를 하나의 객체로 제공
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   url, params, routeId,
+ *   loaderData, actionData,
+ *   navigation,
+ *   navigate, submit,
+ * } = useMandu();
+ * ```
+ */
+export function useMandu() {
+  const state = useRouterState();
+  const navigateFn = useNavigate();
+  const submitFn = useSubmit();
+
+  // URL은 라우터 상태가 실제로 바뀔 때만 재생성한다.
+  // query-only navigation도 반영되도록 상태 전체를 의존성으로 사용한다.
+  const url = useMemo(
+    () => typeof window !== "undefined" ? new URL(window.location.href) : null,
+    [state]
+  );
+
+  return {
+    /** 현재 URL (브라우저) */
+    url,
+    /** URL 파라미터 */
+    params: (state.currentRoute?.params ?? {}) as Record<string, string>,
+    /** 현재 라우트 ID */
+    routeId: state.currentRoute?.id ?? "",
+    /** 라우트 패턴 */
+    pattern: state.currentRoute?.pattern ?? "",
+    /** Loader 데이터 */
+    loaderData: state.loaderData,
+    /** 마지막 Action 결과 */
+    actionData: state.actionData,
+    /** 네비게이션 상태 */
+    navigation: state.navigation,
+    /** 네비게이션 중 여부 */
+    isNavigating: state.navigation.state === "loading",
+    /** Action 제출 중 여부 */
+    isSubmitting: state.navigation.state === "submitting",
+    /** 프로그래매틱 네비게이션 */
+    navigate: navigateFn,
+    /** Action 제출 */
+    submit: submitFn,
+  };
+}

package/src/client/index.ts

@@ -1,10 +1,10 @@
 /**
- * Mandu Client Module 🏝️
- * 클라이언트 사이드 hydration 및 라우팅을 위한 API
+ * Mandu Client Module
+ * Client-side hydration and routing API
  *
  * @example
  * ```typescript
- * // Island 컴포넌트
+ * // Island component
  * import { Mandu } from "@mandujs/core/client";
  *
  * export default Mandu.island<TodosData>({
@@ -15,7 +15,7 @@
  *
  * @example
  * ```typescript
- * // Client-side 라우팅
+ * // Client-side routing
  * import { Link, useRouter } from "@mandujs/core/client";
  *
  * function Nav() {
@@ -63,6 +63,15 @@ export {
   type HydrationPriority,
 } from "./runtime";
 
+// SSE / ReadableStream API (microtask-starvation-safe)
+export {
+  useSSE,
+  readStreamWithYield,
+  type UseSSEOptions,
+  type UseSSEReturn,
+  type ReadStreamOptions,
+} from "./use-sse";
+
 // Client-side Router API
 export {
   navigate,
@@ -71,18 +80,35 @@ export {
   getRouterState,
   getCurrentRoute,
   getLoaderData,
+  getActionData,
   getNavigationState,
   initializeRouter,
   cleanupRouter,
+  submitAction,
+  setShouldRevalidate,
   type RouteInfo,
   type NavigationState,
   type RouterState,
   type NavigateOptions,
+  type ActionResult,
+  type ShouldRevalidateFunction,
 } from "./router";
 
 // Link Components
 export { Link, NavLink, type LinkProps, type NavLinkProps } from "./Link";
 
+// Form Component (Progressive Enhancement)
+export { Form, type FormProps, type FormState } from "./Form";
+
+// RPC Client
+export { createClient, RpcError, type RpcMethods, type RpcRequestOptions, type RpcClientOptions } from "./rpc";
+
+// useFetch Composable
+export { useFetch, type UseFetchOptions, type UseFetchReturn } from "./use-fetch";
+
+// Head Management
+export { useHead, useSeoMeta, resetSSRHead, getSSRHeadTags, type HeadConfig, type SeoMetaConfig } from "./use-head";
+
 // Stable interaction components
 export { ManduButton, ManduModalTrigger } from "./interaction";
 
@@ -100,9 +126,12 @@ export {
   useGoBack,
   useGoForward,
   useRouterState,
+  useActionData,
+  useSubmit,
+  useMandu,
 } from "./hooks";
 
-// Props Serialization (Fresh 스타일)
+// Props Serialization (Fresh style)
 export {
   serializeProps,
   deserializeProps,
@@ -118,7 +147,7 @@ import { Link, NavLink } from "./Link";
 
 /**
  * Mandu Client namespace
- * v0.8.0: Hydration은 자동으로 처리됨 (generateRuntimeSource에서 생성)
+ * v0.8.0: Hydration is handled automatically (generateRuntimeSource)
  * Note: Use `ManduClient` to avoid conflict with other Mandu exports
  */
 export const ManduClient = {