@rsc-kit/core 0.11.0 → 0.13.0

package/README.md

@@ -1,6 +1,6 @@
 # @rsc-kit/core
 
-The engine: a Vite plugin that discovers the route tree, and a host adapter that serves it.
+React Server Components as a Vite plugin: it discovers the route tree, renders it, and serves it. Nitro builds the server around it, so there is no server file to write.
 
 This is the library. Most people want [`rsc-kit`](https://www.npmjs.com/package/rsc-kit) (the command line) or `bun create rsc-kit@latest` (a new app).
 
@@ -38,19 +38,16 @@ is ~54 kB. The build refuses the combination rather than shipping a button that
 does nothing.
 
 **And the framework itself is small, because most of what ships is React.**
-Measured on the example app: 74.7 kB gzipped of JavaScript, of which this
-framework's own runtime is 17 kB — 7.3%. React, react-dom, the Flight client
-and the scheduler are 90%. Serving a page frozen at build time costs the
-server about 25 µs, because it renders nothing; the host adapter costs about
-9 µs per request. Both are handler time, not what a browser sees — the network
-dominates that.
+Measured on the example app: a typical route is 85 kB gzipped, of which
+**66 kB is React and react-dom** and this framework's own runtime is 6 kB.
+Client components are chunked per module, so a route only downloads the ones it
+renders — the three routes using TanStack Query are the only ones that pay for
+it. Serving a page frozen at build time costs the server about 25 µs, because
+it renders nothing.
 
 **It compiles to a single binary.** `bun build --compile` with the assets and
 frozen pages inside it.
 
-**And it is not only JavaScript.** The same engine drives a Laravel host over a
-socket, which is where this started.
-
 ## What you get
 
 - File-based routing with layouts, loading boundaries, parallel routes and
@@ -59,10 +56,18 @@ socket, which is where this started.
   stored, the part that needs the request is rendered per visit
 - Server actions, with an optional builder that gives you validation
   (any Standard Schema library — Zod, Valibot, ArkType) and middleware
+- API routes in `app/**/route.ts` — a real `Request` in, a real `Response` out,
+  frozen at build time when they read nothing from the request
+- Typed urls: `params`, `searchParams` and request bodies arrive parsed through
+  a schema you export beside the route
 - Typed routes: every build writes the routes it found, so a link to a page
   that does not exist stops compiling
 - `middleware.ts` that runs before every render below it, on every path
 - Request and response access — `headers()`, `cookies()`, `responseHeaders()`
+- Offline and installable: a generated service worker, a web manifest, icons
+  found by name, and a place to put your own push handlers
+- A build that explains itself — why each route is dynamic, what it ships, and
+  a report an `@rsc-kit/mcp` server can answer questions from
 
 ## Status
 

package/dist/js/Form.d.ts

@@ -1,18 +1,124 @@
 import type { Href } from "../routes.js";
 import { type FormHTMLAttributes, type ReactNode } from "react";
+import type { FormStore } from "./formStore";
 import type { StandardSchemaV1 } from "./standardSchema";
 type PrefetchStrategy = "hover" | "mount" | "none";
+/**
+ * What `field(name)` hands a control, spread straight onto it.
+ *
+ * The same four things react-hook-form's `<Controller>` gives, because it is
+ * the same job: a component with no native control behind it needs a value and
+ * a way to report a new one.
+ */
+interface FieldBinding<V> {
+    name: string;
+    value: V;
+    /**
+     * Either shape: a DOM event, or the value itself.
+     *
+     * A native input passes the event; a Radix select or a rich editor passes
+     * what was chosen. A binder understanding only one of them would work on
+     * half the controls anyone actually uses.
+     */
+    onChange: (next: V | {
+        target: {
+            value: V;
+        };
+    }) => void;
+    onBlur: () => void;
+}
+/**
+ * What is known about one field, separately from what is spread onto it.
+ *
+ * Two objects rather than one, which is react-hook-form's split and it is right
+ * for a mechanical reason: `touched` and `invalid` are not DOM attributes, so a
+ * single spreadable object would put them on the element and React would warn
+ * about every one.
+ */
+interface FieldState {
+    /** Whether it has been left at least once. */
+    touched: boolean;
+    /** Whether it currently has errors. */
+    invalid: boolean;
+    /** Its messages, ready for a `<FieldError>`. */
+    errors: string[];
+}
 interface FormRenderProps<T extends Record<string, unknown> = Record<string, unknown>> {
     pending: boolean;
     data: T;
-    errors: Record<string, string[]>;
+    /**
+     * Keyed by field name, so a typo is a type error rather than undefined.
+     *
+     * Partial because most fields have none, and nested paths join with dots —
+     * `errors['address.city']`, which is the key a Standard Schema issue for that
+     * field produces.
+     */
+    errors: Partial<Record<keyof T & string, string[]>> & Record<string, string[] | undefined>;
     error: (field: keyof T & string) => string | undefined;
     clearErrors: (...fields: (keyof T & string)[]) => void;
     reset: () => void;
+    /** Whether the last submit was accepted. */
+    succeeded: boolean;
+    /**
+     * The same thing, for two seconds.
+     *
+     * The "Saved ✓" that appears and fades. Worth having as state rather than a
+     * timer in every form that wants one, because the timer has to be cleared
+     * when the component goes away and that is the part people forget.
+     */
+    recentlySucceeded: boolean;
+    /**
+     * Bind one field so this component holds its value.
+     *
+     * Most fields need nothing: they are uncontrolled, the DOM holds the value,
+     * and it is read back as FormData on submit. Reach for this when the DOM
+     * cannot hold it for you — a control with no native element behind it, or a
+     * value you want to read as it is typed:
+     *
+     *     <Input {...field('title')} />
+     *     <span>{field('body').value.length}/100</span>
+     *
+     * A bound field is still an ordinary named input, so it arrives in FormData
+     * with everything else. Nothing merges; there is one source of truth.
+     */
+    field: <K extends keyof T & string>(name: K) => FieldBinding<T[K]>;
+    /**
+     * What is known about a field, for deciding how to show it.
+     *
+     *     const title = fieldState('title')
+     *
+     *     <Field data-invalid={title.invalid}>
+     *       <Input {...field('title')} aria-invalid={title.invalid} />
+     *       <FieldError errors={title.errors.map((message) => ({ message }))} />
+     *     </Field>
+     *
+     * `touched` is what separates "not filled in yet" from "filled in wrongly" —
+     * an error on a field nobody has visited is a form shouting before anyone
+     * has done anything.
+     */
+    fieldState: (name: string) => FieldState;
 }
 interface FormProps<T extends Record<string, unknown> = Record<string, unknown>> extends Omit<FormHTMLAttributes<HTMLFormElement>, "action" | "method" | "children" | "onSubmit" | "onError"> {
     action: Href | ((formData: FormData) => Promise<unknown>);
     method?: "get" | "post";
+    /**
+     * Starting values for fields bound with `field()`.
+     *
+     * Uncontrolled fields do not need this — they take React's own
+     * `defaultValue`, and the DOM keeps whatever is typed into them.
+     */
+    defaultValues?: Partial<T>;
+    /**
+     * A store created above this form, from `useFormStore()`.
+     *
+     * For the one case the context cannot reach: something that is not a
+     * descendant — a top bar showing unsaved changes, a sidebar preview — needs
+     * the values to exist above both of them. Create the store where they share
+     * an ancestor and hand it down.
+     *
+     * Without it the form makes its own, which is what almost every form wants.
+     */
+    store?: FormStore;
     prefetch?: PrefetchStrategy;
     cacheFor?: number;
     replace?: boolean;
@@ -43,11 +149,54 @@ interface FormProps<T extends Record<string, unknown> = Record<string, unknown>>
     onSubmit?: (formData: FormData) => void | false;
     children: ReactNode | ((form: FormRenderProps<T>) => ReactNode);
 }
+/**
+ * A value store created above the form rather than by it.
+ *
+ *     const store = useFormStore({ title: '' })
+ *
+ *     <TopBar store={store} />              // not inside the form
+ *     <Form action={save} store={store}>…</Form>
+ *
+ * For the one case the context cannot reach. `<Form>` makes its own otherwise,
+ * and almost every form should let it — this exists so that a component which
+ * is not a descendant can still read the values, which is the flexibility
+ * react-hook-form and TanStack Form get from `useForm()` being yours to call.
+ *
+ * Deliberately not reactive itself: creating the store does not subscribe to
+ * it, so the component holding it does not re-render on every keystroke and
+ * take the whole subtree with it. Read it with `useFormValues(store)`.
+ */
+export declare function useFormStore<T extends Record<string, unknown>>(initial?: Partial<T>): FormStore;
+/**
+ * One field, subscribed on its own.
+ *
+ * The same thing `field()` gives, from a component that re-renders when this
+ * field changes and at no other time. Reach for it when a form is large enough
+ * that re-rendering all of it per keystroke is real:
+ *
+ *     function Title() {
+ *       const { field, invalid, errors } = useField('title')
+ *
+ *       return <Input {...field} aria-invalid={invalid} />
+ *     }
+ *
+ * Which is react-hook-form's `<Controller>` without the render prop: the
+ * component you already had to write is the subscription boundary.
+ */
+export declare function useField(name: string, store?: FormStore): FieldBinding<string> & FieldState;
+/**
+ * Every bound value, from anywhere inside the form.
+ *
+ * For a summary, a preview, a count of what has changed — something that reads
+ * the form without being a field in it. Only values bound through `field()` or
+ * `useField` are here: an uncontrolled input's value belongs to the DOM, and
+ * this has no way to know it changed.
+ */
+export declare function useFormValues<T extends Record<string, unknown>>(store?: FormStore): Partial<T>;
 export declare function useFormStatus<T extends Record<string, unknown> = Record<string, unknown>>(): FormRenderProps<T>;
 /**
  * Also exported by name, and re-exported below, because both spellings are in
  * use: `import Form from` and `import { Form } from`.
  */
-export default function Form<T extends Record<string, unknown> = Record<string, unknown>>({ action, method: methodProp, prefetch, cacheFor, replace, preserveScroll, resetOnSuccess, schema, transform, optimistic, onSuccess, onError, onSubmit, children, ...rest }: FormProps<T>): import("react").JSX.Element;
+export default function Form<T extends Record<string, unknown> = Record<string, unknown>>({ action, method: methodProp, defaultValues, store: providedStore, prefetch, cacheFor, replace, preserveScroll, resetOnSuccess, schema, transform, optimistic, onSuccess, onError, onSubmit, children, ...rest }: FormProps<T>): import("react").JSX.Element;
 export { Form };
-export { useForm } from "./useForm";

package/dist/js/Form.js

@@ -1,7 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useRef, useState, useTransition, } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore, useTransition, } from "react";
 import { ServerValidationError, ServerDumpError } from "./errors";
+import { buildFormData } from "./formEncoding";
+import { createFormStore } from "./formStore";
 import { validateWith } from "./standardSchema";
 /**
  * What an action built with createActionClient answers with.
@@ -27,16 +29,188 @@ const FormStatusContext = createContext({
     error: () => undefined,
     clearErrors: () => { },
     reset: () => { },
+    succeeded: false,
+    recentlySucceeded: false,
+    // Outside a Form there is nothing holding a value, so a binding that reported
+    // one would be lying. Name only, which is the part that is still true.
+    field: ((name) => ({
+        name,
+        value: "",
+        onChange: () => { },
+        onBlur: () => { },
+    })),
+    fieldState: () => ({ touched: false, invalid: false, errors: [] }),
 });
+/**
+ * The store, on its own context.
+ *
+ * Separate from the status context because that one holds a fresh object every
+ * render, so anything reading it re-renders with the form. The store is stable
+ * for the life of the form, which is what lets a subscriber below it re-render
+ * alone.
+ */
+const FormStoreContext = createContext(null);
+/**
+ * A value store created above the form rather than by it.
+ *
+ *     const store = useFormStore({ title: '' })
+ *
+ *     <TopBar store={store} />              // not inside the form
+ *     <Form action={save} store={store}>…</Form>
+ *
+ * For the one case the context cannot reach. `<Form>` makes its own otherwise,
+ * and almost every form should let it — this exists so that a component which
+ * is not a descendant can still read the values, which is the flexibility
+ * react-hook-form and TanStack Form get from `useForm()` being yours to call.
+ *
+ * Deliberately not reactive itself: creating the store does not subscribe to
+ * it, so the component holding it does not re-render on every keystroke and
+ * take the whole subtree with it. Read it with `useFormValues(store)`.
+ */
+export function useFormStore(initial = {}) {
+    const ref = useRef(null);
+    ref.current ??= createFormStore({ ...initial });
+    return ref.current;
+}
+/**
+ * One field, subscribed on its own.
+ *
+ * The same thing `field()` gives, from a component that re-renders when this
+ * field changes and at no other time. Reach for it when a form is large enough
+ * that re-rendering all of it per keystroke is real:
+ *
+ *     function Title() {
+ *       const { field, invalid, errors } = useField('title')
+ *
+ *       return <Input {...field} aria-invalid={invalid} />
+ *     }
+ *
+ * Which is react-hook-form's `<Controller>` without the render prop: the
+ * component you already had to write is the subscription boundary.
+ */
+export function useField(name, store) {
+    const ctx = useContext(FormStoreContext);
+    const status = useContext(FormStatusContext);
+    if (!ctx && !store) {
+        throw new Error("useField() was called outside a <Form>. It reads that form's values, so there has to be one above it.");
+    }
+    const source = store ?? ctx.store;
+    const touch = ctx?.touch;
+    const value = useSyncExternalStore(source.subscribe, () => (source.get(name) ?? ""), () => "");
+    const errors = status.errors[name] ?? [];
+    return {
+        name,
+        value,
+        onChange: (next) => {
+            source.set(name, typeof next === "object" && next !== null && "target" in next
+                ? next.target.value
+                : next);
+        },
+        onBlur: () => void touch?.(name),
+        touched: status.fieldState(name).touched,
+        invalid: errors.length > 0,
+        errors,
+    };
+}
+/**
+ * Every bound value, from anywhere inside the form.
+ *
+ * For a summary, a preview, a count of what has changed — something that reads
+ * the form without being a field in it. Only values bound through `field()` or
+ * `useField` are here: an uncontrolled input's value belongs to the DOM, and
+ * this has no way to know it changed.
+ */
+export function useFormValues(store) {
+    const ctx = useContext(FormStoreContext);
+    if (!ctx && !store) {
+        throw new Error("useFormValues() was called outside a <Form>. It reads that form's values, so there has to be one above it.");
+    }
+    const source = store ?? ctx.store;
+    return useSyncExternalStore(source.subscribe, () => source.all(), () => ({}));
+}
 export function useFormStatus() {
     return useContext(FormStatusContext);
 }
+/**
+ * The pieces of a field name: `items[0].name` is items, 0, name.
+ *
+ * Both spellings, because both are in use and a form should not care which one
+ * a person reached for: `items[0].name` and `items[0][name]` are the same
+ * field. A trailing `[]` is a piece of its own — see below.
+ */
+function pathOf(name) {
+    return name
+        .replace(/\[(\w*)\]/g, ".$1")
+        .split(".")
+        .filter((piece, index, all) => piece !== "" || index === all.length - 1);
+}
+/** Whether a piece names an array index rather than a property. */
+const isIndex = (piece) => /^\d+$/.test(piece);
+/**
+ * Put one value at one path, making the containers it passes through.
+ *
+ * Whether a container is an array or an object is decided by the NEXT piece, so
+ * `items[0].name` makes an array holding an object without being told which is
+ * which.
+ */
+function place(root, path, value) {
+    let node = root;
+    for (let i = 0; i < path.length - 1; i++) {
+        const key = path[i];
+        const container = node;
+        if (container[key] === undefined || typeof container[key] !== "object") {
+            // An index makes an array, and so does the empty piece a trailing `[]`
+            // leaves — `tags[]` has to reach an array to be pushed into, and building
+            // an object there is how this first went wrong.
+            const next = path[i + 1];
+            container[key] = isIndex(next) || next === "" ? [] : {};
+        }
+        node = container[key];
+    }
+    const last = path[path.length - 1];
+    // The empty piece a trailing `[]` leaves: push rather than assign, so
+    // `tags[]` twice is two entries rather than one overwriting the other.
+    if (last === "")
+        node.push(value);
+    else
+        node[last] = value;
+}
+/**
+ * A FormData as the object a schema expects.
+ *
+ * Four things beyond copying entries across, and each of them was a bug or a
+ * gap someone would meet on their first non-trivial form:
+ *
+ * A repeated name is an array. Three checkboxes sharing a name, a multiple
+ * select, a list of tags — this used to keep the LAST one and drop the rest
+ * silently, so a schema validated an object the person had not submitted.
+ *
+ * A name ending in `[]` is always an array, even with one value selected.
+ * Otherwise a list of checkboxes is a string when one is ticked and an array
+ * when two are, and no schema can describe both. It is also what `useForm`
+ * writes when it serialises an array, so the two round-trip.
+ *
+ * Nested names nest. `address.city` and `items[0].name` build the object they
+ * describe, which is the shape the schema was written against — and the shape
+ * whose validation errors come back keyed the same way, because Standard
+ * Schema issue paths are joined with dots too.
+ *
+ * Files are kept. They were dropped for being non-strings, which meant a schema
+ * checking an upload was handed undefined and refused a file that was there.
+ */
 function formDataToObject(formData) {
     const obj = {};
-    for (const [key, value] of formData.entries()) {
-        if (typeof value === "string") {
-            obj[key] = value;
+    for (const name of new Set(formData.keys())) {
+        const all = formData.getAll(name);
+        const path = pathOf(name);
+        // A plain name used more than once is the array case, and it has no
+        // brackets to say so — `tags` twice is `['a', 'b']`.
+        if (path.length === 1 && path[0] !== "" && all.length > 1) {
+            obj[path[0]] = all;
+            continue;
         }
+        for (const value of all)
+            place(obj, path, value);
     }
     return obj;
 }
@@ -44,10 +218,61 @@ function formDataToObject(formData) {
  * Also exported by name, and re-exported below, because both spellings are in
  * use: `import Form from` and `import { Form } from`.
  */
-export default function Form({ action, method: methodProp, prefetch = "hover", cacheFor, replace = false, preserveScroll = false, resetOnSuccess = true, schema, transform, optimistic, onSuccess, onError, onSubmit, children, ...rest }) {
+export default function Form({ action, method: methodProp, defaultValues, store: providedStore, prefetch = "hover", cacheFor, replace = false, preserveScroll = false, resetOnSuccess = true, schema, transform, optimistic, onSuccess, onError, onSubmit, children, ...rest }) {
     const isGetForm = typeof action === "string";
     const method = methodProp ?? (isGetForm ? "get" : "post");
     const [errors, setErrors] = useState({});
+    const [touched, setTouched] = useState({});
+    /**
+     * Mark a field visited, and check it.
+     *
+     * Checking on blur rather than on every keystroke, because an error that
+     * appears while someone is halfway through typing an email address is a form
+     * arguing with them. Leaving the field is the moment they have finished
+     * saying what they meant.
+     *
+     * The whole object is validated and only this field's issues are kept: a
+     * Standard Schema has no notion of one field, and filtering by path is the
+     * honest way to ask it about one. Everything else's errors are left as they
+     * were, so blurring an empty field does not light up the rest of the form.
+     */
+    const touch = useCallback(async (name) => {
+        setTouched((prev) => (prev[name] ? prev : { ...prev, [name]: true }));
+        if (!schema || !formRef.current)
+            return;
+        const invalid = await validateWith(schema, formDataToObject(new FormData(formRef.current)));
+        setErrors((prev) => {
+            const next = { ...prev };
+            if (invalid?.[name])
+                next[name] = invalid[name];
+            else
+                delete next[name];
+            return next;
+        });
+    }, [schema]);
+    const [succeeded, setSucceeded] = useState(false);
+    const [recentlySucceeded, setRecentlySucceeded] = useState(false);
+    const recentTimer = useRef(undefined);
+    // Cleared on unmount: a timer that fires into a component that has gone is
+    // the warning nobody reads and the leak nobody finds.
+    useEffect(() => () => clearTimeout(recentTimer.current), []);
+    // Only the fields someone bound. Everything else is the DOM's.
+    //
+    // A store rather than state, so a component using `useField` can re-render
+    // for one field while this one does not. See formStore.ts.
+    const storeRef = useRef(null);
+    storeRef.current ??= createFormStore({ ...defaultValues });
+    const store = providedStore ?? storeRef.current;
+    // Which names the render prop read through `field()`. A change to one of
+    // those has to re-render this component, because that is where the value is
+    // being displayed; a change to anything else does not, which is what lets a
+    // `useField` child stand on its own.
+    const readHere = useRef(new Set());
+    const [, bump] = useState(0);
+    useEffect(() => store.subscribe((name) => {
+        if (name === "" || readHere.current.has(name))
+            bump((n) => n + 1);
+    }), [store]);
     const [currentData, setCurrentData] = useState({});
     const [isPending, startTransition] = useTransition();
     const formRef = useRef(null);
@@ -123,29 +348,13 @@ export default function Form({ action, method: methodProp, prefetch = "hover", c
             return;
         }
         const serverAction = action;
-        // Apply transform — rebuild FormData from transformed values
+        // Rebuilt rather than edited: transform returns the values to send, so
+        // whatever was in the form and is not in the result should not go.
         if (transform) {
-            const transformed = transform(data);
-            for (const key of [...formData.keys()]) {
+            for (const key of [...formData.keys()])
                 formData.delete(key);
-            }
-            for (const [key, val] of Object.entries(transformed)) {
-                if (val === null || val === undefined)
-                    continue;
-                if (val instanceof File) {
-                    formData.append(key, val);
-                }
-                else if (typeof val === "boolean") {
-                    formData.append(key, val ? "1" : "0");
-                }
-                else if (Array.isArray(val)) {
-                    for (const item of val) {
-                        formData.append(`${key}[]`, String(item));
-                    }
-                }
-                else {
-                    formData.append(key, String(val));
-                }
+            for (const [key, value] of buildFormData(transform(data))) {
+                formData.append(key, value);
             }
         }
         setErrors({});
@@ -176,9 +385,14 @@ export default function Form({ action, method: methodProp, prefetch = "hover", c
                 }
                 if (resetOnSuccess) {
                     formRef.current?.reset();
+                    setTouched({});
                     setCurrentData({});
                 }
                 setErrors({});
+                setSucceeded(true);
+                setRecentlySucceeded(true);
+                clearTimeout(recentTimer.current);
+                recentTimer.current = setTimeout(() => setRecentlySucceeded(false), 2_000);
                 onSuccess?.(result);
             }
             catch (err) {
@@ -204,15 +418,66 @@ export default function Form({ action, method: methodProp, prefetch = "hover", c
             }
         });
     }, [action, isGetForm, method, replace, preserveScroll, resetOnSuccess, schema, transform, optimistic, onSubmit, onSuccess, onError]);
+    const field = useCallback((name) => {
+        // Recorded during render, deliberately: this is how the form knows which
+        // values it is the one displaying. Idempotent, so a double render in
+        // development records the same name twice and means the same thing.
+        readHere.current.add(name);
+        return {
+            name,
+            value: (store.get(name) ?? ""),
+            onChange: (next) => {
+                const value = typeof next === "object" && next !== null && "target" in next
+                    ? next.target.value
+                    : next;
+                store.set(name, value);
+            },
+            onBlur: () => void touch(name),
+        };
+    }, [store, touch]);
+    const fieldState = useCallback((name) => ({
+        touched: touched[name] === true,
+        invalid: (errors[name]?.length ?? 0) > 0,
+        errors: errors[name] ?? [],
+    }), [touched, errors]);
+    // Stable, so a subscriber below does not re-render because this one did.
+    const storeContext = useMemo(() => ({ store, touch }), [store, touch]);
     const formStatus = {
         pending: isPending,
         data: currentData,
-        errors,
+        succeeded,
+        recentlySucceeded,
+        field,
+        fieldState,
+        errors: errors,
         error,
         clearErrors,
         reset: resetForm,
     };
-    return (_jsx(FormStatusContext.Provider, { value: formStatus, children: _jsx("form", { ref: formRef, onSubmit: handleSubmit, onMouseEnter: prefetch === "hover" ? doPrefetch : undefined, "data-pending": isPending ? "" : undefined, ...rest, children: typeof children === "function" ? children(formStatus) : children }) }));
+    return (_jsx(FormStoreContext.Provider, { value: storeContext, children: _jsx(FormStatusContext.Provider, { value: formStatus, children: _jsx("form", { ref: formRef, 
+                // On the element as well as in the handler, which is what makes this
+                // work before hydration. React emits a form a browser can submit on its
+                // own for a server action, and an ordinary action/method pair for a
+                // url — so a submit that happens before the javascript arrives still
+                // reaches the server.
+                //
+                // The two do not fight: handleSubmit calls preventDefault() first, and
+                // React does not run a form action when the submit event was cancelled.
+                // So the enhanced path wins whenever there is one, and the native path
+                // is what is left when there is not.
+                action: action, 
+                // Only for a url. React sets the method itself for a server action, and
+                // passing one alongside is what it warns about.
+                method: isGetForm ? method : undefined, onSubmit: handleSubmit, 
+                // On the form, not only on the bound fields. `focusout` bubbles where
+                // `blur` does not, so React's onBlur here sees every control that was
+                // left — including the uncontrolled ones, which are most of them and
+                // would otherwise never be marked touched at all.
+                onBlur: (event) => {
+                    const name = event.target.name;
+                    if (name)
+                        void touch(name);
+                }, onMouseEnter: prefetch === "hover" ? doPrefetch : undefined, "data-pending": isPending ? "" : undefined, ...rest, children: typeof children === "function" ? children(formStatus) : children }) }) }));
 }
 // Also by name, because both spellings are in use: `import Form` and
 // `import { Form }`. This was a re-export of "./Form" — from inside Form.tsx,
@@ -221,5 +486,4 @@ export default function Form({ action, method: methodProp, prefetch = "hover", c
 // FormComponent.tsx that a case-insensitive filesystem would not let be called
 // Form.ts. There is one file now, and it can just export what it declares.
 export { Form };
-export { useForm } from "./useForm";
 //# sourceMappingURL=Form.js.map