@chidchanun/bcp 0.1.9 → 0.1.11

package/packages/client/src/form.tsx

@@ -0,0 +1,548 @@
+import {
+    createContext,
+    useContext,
+    useMemo,
+    useState,
+    type FormHTMLAttributes,
+    type ReactNode,
+} from "react";
+
+import {
+    navigate,
+    useRouter,
+} from "./router-v2.js";
+
+type FormSubmitEvent =
+    Parameters<
+        NonNullable<
+            FormHTMLAttributes<
+                HTMLFormElement
+            >["onSubmit"]
+        >
+    >[0];
+
+export type FormActionMethod =
+    | "post"
+    | "put"
+    | "patch"
+    | "delete";
+
+export interface FormStatus {
+    pending: boolean;
+    action: string | null;
+    method: FormActionMethod | null;
+    error: Error | null;
+}
+
+export interface FormProps
+    extends Omit<
+        FormHTMLAttributes<HTMLFormElement>,
+        "action" | "method"
+    > {
+    action: string;
+    method?: FormActionMethod;
+    refresh?: boolean;
+    replace?: boolean;
+    scroll?: boolean;
+    onActionData?: (
+        data: unknown
+    ) => void;
+    onActionError?: (
+        error: Error
+    ) => void;
+    children?: ReactNode;
+}
+
+interface FormRuntimeState {
+    status: FormStatus;
+    actionData: unknown;
+    hasActionData: boolean;
+}
+
+interface ActionDataPayload {
+    kind: "data";
+    data: unknown;
+}
+
+interface ActionRedirectPayload {
+    kind: "redirect";
+    redirect: {
+        location: string;
+        status: number;
+    };
+}
+
+interface ActionErrorPayload {
+    kind: "error";
+    error: {
+        message: string;
+    };
+}
+
+type ActionPayload =
+    | ActionDataPayload
+    | ActionRedirectPayload
+    | ActionErrorPayload;
+
+const ACTION_NAME_PATTERN =
+    /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+
+const FormRuntimeContext =
+    createContext<FormRuntimeState>({
+        status: {
+            pending: false,
+            action: null,
+            method: null,
+            error: null,
+        },
+        actionData:
+            undefined,
+        hasActionData:
+            false,
+    });
+
+export function Form({
+    action,
+    method = "post",
+    refresh = false,
+    replace = false,
+    scroll = true,
+    onActionData,
+    onActionError,
+    onSubmit,
+    children,
+    ...props
+}: FormProps) {
+    assertActionName(
+        action
+    );
+
+    const router =
+        useRouter();
+    const normalizedMethod =
+        normalizeMethod(
+            method
+        );
+    const [pending, setPending] =
+        useState(
+            false
+        );
+    const [error, setError] =
+        useState<Error | null>(
+            null
+        );
+    const [actionData, setActionData] =
+        useState<unknown>(
+            undefined
+        );
+    const [hasActionData, setHasActionData] =
+        useState(
+            false
+        );
+
+    const runtimeState =
+        useMemo<FormRuntimeState>(
+            () => ({
+                status: {
+                    pending,
+                    action,
+                    method:
+                        normalizedMethod,
+                    error,
+                },
+                actionData,
+                hasActionData,
+            }),
+            [
+                pending,
+                action,
+                normalizedMethod,
+                error,
+                actionData,
+                hasActionData,
+            ]
+        );
+
+    async function handleSubmit(
+        event: FormSubmitEvent
+    ) {
+        onSubmit?.(
+            event
+        );
+
+        if (
+            event.defaultPrevented ||
+            typeof window ===
+                "undefined"
+        ) {
+            return;
+        }
+
+        event.preventDefault();
+
+        const form =
+            event.currentTarget;
+        const data =
+            new FormData(
+                form
+            );
+        const targetPath =
+            `${window.location.pathname}${window.location.search}`;
+        const endpoint =
+            createActionEndpoint(
+                action,
+                normalizedMethod,
+                targetPath
+            );
+
+        setPending(
+            true
+        );
+        setError(
+            null
+        );
+        setHasActionData(
+            false
+        );
+
+        try {
+            const response =
+                await fetch(
+                    endpoint,
+                    {
+                        method:
+                            "POST",
+                        credentials:
+                            "same-origin",
+                        redirect:
+                            "manual",
+                        headers: {
+                            Accept:
+                                "application/json",
+                            "X-BCP-Action":
+                                "1",
+                            "X-BCP-Action-Target":
+                                targetPath,
+                        },
+                        body:
+                            data,
+                    }
+                );
+
+            if (
+                response.status ===
+                204
+            ) {
+                setActionData(
+                    null
+                );
+                setHasActionData(
+                    true
+                );
+                onActionData?.(
+                    null
+                );
+
+                if (refresh) {
+                    await router.refresh();
+                }
+                return;
+            }
+
+            const payload =
+                await readActionPayload(
+                    response
+                );
+
+            if (
+                payload.kind ===
+                "redirect"
+            ) {
+                await navigate(
+                    payload.redirect.location,
+                    {
+                        replace,
+                        scroll,
+                    }
+                );
+                return;
+            }
+
+            if (
+                payload.kind ===
+                "error"
+            ) {
+                throw new Error(
+                    payload.error.message
+                );
+            }
+
+            setActionData(
+                payload.data
+            );
+            setHasActionData(
+                true
+            );
+            onActionData?.(
+                payload.data
+            );
+
+            if (refresh) {
+                await router.refresh();
+            }
+        } catch (caught) {
+            const nextError =
+                caught instanceof Error
+                    ? caught
+                    : new Error(
+                        String(
+                            caught
+                        )
+                    );
+
+            setError(
+                nextError
+            );
+            onActionError?.(
+                nextError
+            );
+        } finally {
+            setPending(
+                false
+            );
+        }
+    }
+
+    const progressiveAction =
+        createActionEndpoint(
+            action,
+            normalizedMethod,
+            null
+        );
+
+    return (
+        <FormRuntimeContext.Provider
+            value={runtimeState}
+        >
+            <form
+                {...props}
+                action={progressiveAction}
+                method="post"
+                onSubmit={handleSubmit}
+            >
+                {children}
+            </form>
+        </FormRuntimeContext.Provider>
+    );
+}
+
+export function useFormStatus(): FormStatus {
+    return useContext(
+        FormRuntimeContext
+    ).status;
+}
+
+export function useActionData<
+    T = unknown
+>(): T | undefined {
+    const state =
+        useContext(
+            FormRuntimeContext
+        );
+
+    return state.hasActionData
+        ? state.actionData as T
+        : undefined;
+}
+
+export function useActionError(): Error | null {
+    return useContext(
+        FormRuntimeContext
+    ).status.error;
+}
+
+function createActionEndpoint(
+    action: string,
+    method: FormActionMethod,
+    targetPath: string | null
+): string {
+    const params =
+        new URLSearchParams({
+            name:
+                action,
+            method:
+                method.toUpperCase(),
+        });
+
+    if (targetPath) {
+        params.set(
+            "url",
+            targetPath
+        );
+    }
+
+    return `/_bcp/action?${params.toString()}`;
+}
+
+async function readActionPayload(
+    response: Response
+): Promise<ActionPayload> {
+    const contentType =
+        response.headers.get(
+            "content-type"
+        ) ??
+        "";
+
+    if (
+        !/^application\/json\b/i.test(
+            contentType
+        )
+    ) {
+        throw new Error(
+            `BCP Framework: form action returned unsupported HTTP ${response.status} ${contentType || "response"}. Return serializable data or redirect().`
+        );
+    }
+
+    let value:
+        unknown;
+
+    try {
+        value =
+            await response.json();
+    } catch {
+        throw new Error(
+            "BCP Framework: form action returned invalid JSON."
+        );
+    }
+
+    if (
+        !isActionPayload(
+            value
+        )
+    ) {
+        throw new Error(
+            "BCP Framework: form action returned an invalid action payload."
+        );
+    }
+
+    return value;
+}
+
+function isActionPayload(
+    value: unknown
+): value is ActionPayload {
+    if (
+        value === null ||
+        typeof value !==
+            "object"
+    ) {
+        return false;
+    }
+
+    const record =
+        value as Record<
+            string,
+            unknown
+        >;
+
+    if (
+        record.kind ===
+        "data"
+    ) {
+        return Object.prototype
+            .hasOwnProperty.call(
+                record,
+                "data"
+            );
+    }
+
+    if (
+        record.kind ===
+        "redirect"
+    ) {
+        const redirect =
+            record.redirect;
+
+        return (
+            redirect !== null &&
+            typeof redirect ===
+                "object" &&
+            typeof (
+                redirect as Record<
+                    string,
+                    unknown
+                >
+            ).location ===
+                "string" &&
+            typeof (
+                redirect as Record<
+                    string,
+                    unknown
+                >
+            ).status ===
+                "number"
+        );
+    }
+
+    if (
+        record.kind ===
+        "error"
+    ) {
+        const error =
+            record.error;
+
+        return (
+            error !== null &&
+            typeof error ===
+                "object" &&
+            typeof (
+                error as Record<
+                    string,
+                    unknown
+                >
+            ).message ===
+                "string"
+        );
+    }
+
+    return false;
+}
+
+function normalizeMethod(
+    method: FormActionMethod
+): FormActionMethod {
+    const value =
+        method.toLowerCase() as
+        FormActionMethod;
+
+    if (
+        value !== "post" &&
+        value !== "put" &&
+        value !== "patch" &&
+        value !== "delete"
+    ) {
+        throw new Error(
+            `BCP Framework: unsupported <Form> method "${String(method)}".`
+        );
+    }
+
+    return value;
+}
+
+function assertActionName(
+    action: string
+): void {
+    if (
+        !ACTION_NAME_PATTERN.test(
+            action
+        ) ||
+        action === "default" ||
+        action === "__proto__" ||
+        action === "prototype" ||
+        action === "constructor"
+    ) {
+        throw new Error(
+            `BCP Framework: invalid <Form> action name "${action}".`
+        );
+    }
+}

package/packages/client/src/index.tsx

@@ -12,12 +12,23 @@ export {
     type LinkProps,
 } from "./link.js";
 
+export {
+    Form,
+    useActionData,
+    useActionError,
+    useFormStatus,
+    type FormActionMethod,
+    type FormProps,
+    type FormStatus,
+} from "./form.js";
+
 export {
     useNavigation,
     type NavigationState,
 } from "./navigation-state.js";
 
 export {
+    useGuardData,
     useLoaderData,
 } from "./loader-data.js";