@firtoz/router-toolkit 8.0.1 → 9.0.1

package/dist/chunk-XMGRKSHM.js

@@ -0,0 +1,183 @@
+import { useMemo, useRef, useCallback, useEffect } from 'react';
+import { href, useFetcher } from 'react-router';
+import { jsx } from 'react/jsx-runtime';
+
+// src/useDynamicSubmitter.tsx
+var SubmitterSupersededError = class extends Error {
+  constructor(message = "This submission was superseded by a newer submit before it completed.") {
+    super(message);
+    this.name = "SubmitterSupersededError";
+  }
+};
+var SubmitterUnmountedError = class extends Error {
+  constructor(message = "The submitter was unmounted before this submission completed.") {
+    super(message);
+    this.name = "SubmitterUnmountedError";
+  }
+};
+function dynamicSubmitterFetcherKey(resolvedHref, keySuffix) {
+  const base = `submitter-${resolvedHref}`;
+  if (keySuffix === void 0 || keySuffix === "") {
+    return base;
+  }
+  return `${base}::${encodeURIComponent(keySuffix)}`;
+}
+function isSubmitterOptions(x) {
+  if (x === null || typeof x !== "object") return false;
+  const keys = Object.keys(x);
+  if (keys.length === 0) return false;
+  return keys.every((k) => k === "keySuffix");
+}
+function parseUseDynamicSubmitterRestArgs(args) {
+  if (args.length === 0) {
+    return { hrefArgs: [], options: {} };
+  }
+  const last = args[args.length - 1];
+  if (args.length >= 2 && isSubmitterOptions(last)) {
+    return { hrefArgs: [...args.slice(0, -1)], options: last };
+  }
+  if (args.length === 1 && isSubmitterOptions(args[0])) {
+    return { hrefArgs: [], options: args[0] };
+  }
+  return { hrefArgs: [...args], options: {} };
+}
+var submitterKeyBuckets = /* @__PURE__ */ new Map();
+function getSubmitterKeyBucket(key) {
+  let b = submitterKeyBuckets.get(key);
+  if (!b) {
+    b = { submitGen: 0, pending: null };
+    submitterKeyBuckets.set(key, b);
+  }
+  return b;
+}
+var nextSubmitterOwnerId = 1;
+function allocateSubmitterOwnerId() {
+  return nextSubmitterOwnerId++;
+}
+function useDynamicSubmitter(path, ...rest) {
+  const { hrefArgs, options } = parseUseDynamicSubmitterRestArgs(rest);
+  const keySuffix = options.keySuffix;
+  const url = useMemo(() => {
+    return href(path, ...hrefArgs);
+  }, [path, keySuffix, ...hrefArgs]);
+  const fetcherKey = useMemo(
+    () => dynamicSubmitterFetcherKey(url, keySuffix),
+    [url, keySuffix]
+  );
+  const fetcher = useFetcher({
+    key: fetcherKey
+  });
+  const fetcherRef = useRef(fetcher);
+  fetcherRef.current = fetcher;
+  const ownerIdRef = useRef(allocateSubmitterOwnerId());
+  const prevStateRef = useRef(fetcher.state);
+  const beginSubmit = useCallback(
+    (runSubmit) => {
+      return new Promise((resolve, reject) => {
+        const bucket = getSubmitterKeyBucket(fetcherKey);
+        const prevPending = bucket.pending;
+        if (prevPending) {
+          prevPending.reject(new SubmitterSupersededError());
+        }
+        bucket.submitGen += 1;
+        const gen = bucket.submitGen;
+        bucket.pending = {
+          gen,
+          ownerId: ownerIdRef.current,
+          reject,
+          finishIdle: (data, error) => {
+            if (data !== void 0) {
+              resolve(data);
+            } else {
+              reject(error ?? new Error("Submission failed"));
+            }
+          }
+        };
+        runSubmit();
+      });
+    },
+    [fetcherKey]
+  );
+  useEffect(() => {
+    return () => {
+      const bucket = getSubmitterKeyBucket(fetcherKey);
+      const pending = bucket.pending;
+      if (pending && pending.ownerId === ownerIdRef.current) {
+        bucket.pending = null;
+        pending.reject(new SubmitterUnmountedError());
+      }
+    };
+  }, [fetcherKey]);
+  const fetcherError = fetcher.error;
+  useEffect(() => {
+    const prev = prevStateRef.current;
+    prevStateRef.current = fetcher.state;
+    const wasWorking = prev === "submitting" || prev === "loading";
+    if (!wasWorking || fetcher.state !== "idle") {
+      return;
+    }
+    const bucket = getSubmitterKeyBucket(fetcherKey);
+    const p = bucket.pending;
+    if (!p || p.gen !== bucket.submitGen) {
+      return;
+    }
+    bucket.pending = null;
+    p.finishIdle(fetcher.data, fetcherError);
+  }, [fetcherKey, fetcher.state, fetcher.data, fetcherError]);
+  const submit = useCallback(
+    (target, options2) => {
+      return beginSubmit(() => {
+        const f = fetcherRef.current;
+        void f.submit(target, {
+          ...options2,
+          method: options2?.method ?? "POST",
+          action: url,
+          encType: "multipart/form-data"
+        });
+      });
+    },
+    [beginSubmit, url]
+  );
+  const submitJson = useCallback(
+    (data, options2 = {}) => {
+      return beginSubmit(() => {
+        const f = fetcherRef.current;
+        void f.submit(
+          data,
+          {
+            ...options2,
+            method: options2.method ?? "POST",
+            action: url,
+            encType: "application/json"
+          }
+        );
+      });
+    },
+    [beginSubmit, url]
+  );
+  const fetcherFormRef = useRef(fetcher.Form);
+  fetcherFormRef.current = fetcher.Form;
+  const Form = useCallback(
+    ({ method = "POST", ...props }) => {
+      const OriginalForm = fetcherFormRef.current;
+      return /* @__PURE__ */ jsx(OriginalForm, { action: url, method, ...props });
+    },
+    [url]
+  );
+  return useMemo(
+    () => ({
+      submit,
+      submitJson,
+      Form,
+      fetcherKey
+    }),
+    [submit, submitJson, Form, fetcherKey]
+  );
+}
+function useDynamicSubmitterFetcher(submitter) {
+  return useFetcher({ key: submitter.fetcherKey });
+}
+
+export { SubmitterSupersededError, SubmitterUnmountedError, dynamicSubmitterFetcherKey, useDynamicSubmitter, useDynamicSubmitterFetcher };
+//# sourceMappingURL=chunk-XMGRKSHM.js.map
+//# sourceMappingURL=chunk-XMGRKSHM.js.map

package/dist/chunk-XMGRKSHM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useDynamicSubmitter.tsx"],"names":["options"],"mappings":"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","file":"chunk-XMGRKSHM.js","sourcesContent":["/**\n * @fileoverview Type-safe dynamic form submission hook for React Router 7\n *\n * This module provides a hook that creates a type-safe fetcher for submitting forms\n * to dynamic routes with full TypeScript inference for the form schema and route params.\n *\n * **Awaiting results:** `submit` and `submitJson` return a `Promise` that resolves with the\n * action payload after the submission completes (fetcher leaves `submitting` / `loading` for\n * `idle`). The hook does **not** expose `data` or `state`—use the promise result (and local\n * React state) for outcomes and loading UX. For declarative UI tied to the same fetcher, use\n * {@link useDynamicSubmitterFetcher} (or {@link dynamicSubmitterFetcherKey} with `useFetcher`).\n * Use **one awaited submit at\n * a time** per hook instance; React Router’s\n * single fetcher replaces an in-flight request when you submit again. If you call `submit` or\n * `submitJson` again before the previous promise settles, the previous promise is **rejected**\n * with {@link SubmitterSupersededError}. That applies **per React Router fetcher key** (same\n * resolved URL and {@link UseDynamicSubmitterOptions.keySuffix}): two hook instances that share\n * the same key also supersede one another’s in-flight promise. Use distinct `keySuffix` values\n * when you need independent overlapping submissions to the same route. For many overlapping\n * operations, use `ConcurrentSubmitterProvider` / `useConcurrentSubmitter` instead.\n *\n * **Unmount:** If the component unmounts while a returned promise is still pending, that\n * promise is **rejected** with {@link SubmitterUnmountedError}.\n *\n * **Local `useState` vs {@link useDynamicSubmitterFetcher}:** For programmatic\n * `await submitter.submitJson`, a local pending flag and `try` / `finally` is often enough for\n * disabled buttons and matches the promise-first API. Use {@link useDynamicSubmitterFetcher} when\n * you want declarative `fetcher.state` / `fetcher.data` in JSX (especially with `submitter.Form`\n * or inline errors). The package README documents trade-offs in more detail.\n *\n * @example\n * ### Route Setup (`app/routes/admin.posts.$id.tsx`)\n *\n * First, set up your route with the required exports:\n *\n * ```typescript\n * import { z } from \"zod\";\n * import { formAction, type RoutePath } from \"@firtoz/router-toolkit\";\n * import { success, fail } from \"@firtoz/maybe-error\";\n *\n * // Export the route path for type inference\n * export const route: RoutePath<\"/admin/posts/:id\"> = \"/admin/posts/:id\";\n *\n * // Define the form schema\n * export const formSchema = z.object({\n *   title: z.string().min(1, \"Title is required\"),\n *   content: z.string().min(10, \"Content must be at least 10 characters\"),\n *   published: z.boolean().optional().default(false),\n * });\n *\n * // Create the action using formAction\n * export const action = formAction({\n *   schema: formSchema,\n *   handler: async ({ request, params }, formData) => {\n *     const postId = params.id;\n *     const updated = await db.posts.update({\n *       where: { id: postId },\n *       data: formData,\n *     });\n *     return success(updated);\n *   },\n * });\n * ```\n *\n * @example\n * ### Using the hook in a component\n *\n * ```tsx\n * import { useDynamicSubmitter } from \"@firtoz/router-toolkit\";\n *\n * function EditPostForm({ postId }: { postId: string }) {\n *   // Type-safe submitter with full inference\n *   const submitter = useDynamicSubmitter<typeof import(\"./admin.posts.$id\")>(\n *     \"/admin/posts/:id\",\n *     { id: postId }\n *   );\n *\n *   const [pending, setPending] = useState(false);\n *\n *   // Option 1: Submit as JSON (recommended for programmatic submissions)\n *   // Defaults to POST if no options provided\n *   const handleSubmitJson = async () => {\n *     setPending(true);\n *     try {\n *       const data = await submitter.submitJson({\n *         title: \"My Post\",\n *         content: \"Post content here\",\n *         published: true,\n *       });\n *       if (data.success) {\n *         console.log(\"Saved\");\n *       }\n *     } finally {\n *       setPending(false);\n *     }\n *   };\n *\n *   // Option 2: Submit with FormData or SubmitTarget\n *   const handleSubmit = async (formData: FormData) => {\n *     await submitter.submit(formData, { method: \"POST\" });\n *   };\n *\n *   // Option 3: Use the Form component (defaults to POST); pair with useDynamicSubmitterFetcher(submitter) if you need reactive state\n *   return (\n *     <submitter.Form>\n *       <input name=\"title\" />\n *       <textarea name=\"content\" />\n *       <button type=\"submit\" disabled={pending}>Save</button>\n *     </submitter.Form>\n *   );\n * }\n * ```\n */\n\n// biome-ignore lint/style/useImportType: We need to import React here.\nimport React, { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport {\n\ttype FetcherFormProps,\n\ttype HTMLFormMethod,\n\thref,\n\ttype SubmitOptions,\n\ttype SubmitTarget,\n\tuseFetcher,\n} from \"react-router\";\nimport type { z } from \"zod\";\nimport type { HrefArgs } from \"./types/HrefArgs\";\nimport type { RouteWithActionModule } from \"./types/RouteWithActionModule\";\n\n/**\n * Thrown when a new `submit` or `submitJson` runs before a prior returned promise has settled.\n * The new submission proceeds; catch this error if overlapping calls are expected.\n */\nexport class SubmitterSupersededError extends Error {\n\toverride readonly name = \"SubmitterSupersededError\";\n\tconstructor(\n\t\tmessage = \"This submission was superseded by a newer submit before it completed.\",\n\t) {\n\t\tsuper(message);\n\t}\n}\n\n/**\n * Thrown when the component that owns the submitter unmounts before a `submit` /\n * `submitJson` promise has settled.\n */\nexport class SubmitterUnmountedError extends Error {\n\toverride readonly name = \"SubmitterUnmountedError\";\n\tconstructor(\n\t\tmessage = \"The submitter was unmounted before this submission completed.\",\n\t) {\n\t\tsuper(message);\n\t}\n}\n\n/**\n * Action payload type on the fetcher (same shape React Router puts on `fetcher.data` after the action runs).\n * Includes `undefined` while idle or in flight—use {@link SubmitterSettledData} for the value after\n * `await submitter.submit` / `await submitter.submitJson`.\n */\nexport type DynamicSubmitterData<TInfo extends RouteWithActionModule> =\n\tReturnType<typeof useFetcher<TInfo[\"action\"]>>[\"data\"];\n\n/**\n * Payload type after a successful `await submitter.submit` / `await submitter.submitJson`.\n * Omits `undefined` from {@link DynamicSubmitterData}: the promise only resolves when `fetcher.data`\n * is defined (otherwise it rejects). Inner success values may still be void / optional `result` for\n * `MaybeError<undefined>` from `formAction` + `success()`.\n */\nexport type SubmitterSettledData<TInfo extends RouteWithActionModule> =\n\tNonNullable<DynamicSubmitterData<TInfo>>;\n\n/**\n * Options for {@link useDynamicSubmitter}.\n */\nexport type UseDynamicSubmitterOptions = {\n\t/**\n\t * Appended to the default fetcher key so multiple submitters can target the same resolved URL\n\t * without sharing React Router fetcher state. Omit to use the default key for that URL.\n\t */\n\tkeySuffix?: string;\n};\n\n/**\n * React Router `useFetcher` key used by {@link useDynamicSubmitter} for a resolved href.\n * Pass the same string as {@link UseDynamicSubmitterResult.fetcherKey} (or call with the same\n * `resolvedHref` and `keySuffix` as the submitter) so a parallel `useFetcher({ key })` observes\n * the same submission lifecycle.\n *\n * When `keySuffix` is set, it is encoded and joined with a fixed delimiter so arbitrary strings\n * are safe in the key.\n */\nexport function dynamicSubmitterFetcherKey(\n\tresolvedHref: string,\n\tkeySuffix?: string,\n): string {\n\tconst base = `submitter-${resolvedHref}`;\n\tif (keySuffix === undefined || keySuffix === \"\") {\n\t\treturn base;\n\t}\n\treturn `${base}::${encodeURIComponent(keySuffix)}`;\n}\n\nfunction isSubmitterOptions(x: unknown): x is UseDynamicSubmitterOptions {\n\tif (x === null || typeof x !== \"object\") return false;\n\tconst keys = Object.keys(x as object);\n\tif (keys.length === 0) return false;\n\treturn keys.every((k) => k === \"keySuffix\");\n}\n\nfunction parseUseDynamicSubmitterRestArgs(args: readonly unknown[]): {\n\threfArgs: unknown[];\n\toptions: UseDynamicSubmitterOptions;\n} {\n\tif (args.length === 0) {\n\t\treturn { hrefArgs: [], options: {} };\n\t}\n\tconst last = args[args.length - 1];\n\tif (args.length >= 2 && isSubmitterOptions(last)) {\n\t\treturn { hrefArgs: [...args.slice(0, -1)], options: last };\n\t}\n\tif (args.length === 1 && isSubmitterOptions(args[0])) {\n\t\treturn { hrefArgs: [], options: args[0] };\n\t}\n\treturn { hrefArgs: [...args], options: {} };\n}\n\ntype UseDynamicSubmitterRest<R extends RouteWithActionModule[\"route\"]> =\n\tHrefArgs<R> extends readonly []\n\t\t? [options?: UseDynamicSubmitterOptions]\n\t\t: [...hrefArgs: HrefArgs<R>, options?: UseDynamicSubmitterOptions];\n\ntype PendingAwait = {\n\tgen: number;\n\townerId: number;\n\treject: (reason: unknown) => void;\n\t/** Called when the shared fetcher reaches `idle` for this submission generation. */\n\tfinishIdle: (data: unknown, error: unknown | undefined) => void;\n};\n\ntype SubmitterKeyBucket = {\n\tsubmitGen: number;\n\tpending: PendingAwait | null;\n};\n\nconst submitterKeyBuckets = new Map<string, SubmitterKeyBucket>();\n\nfunction getSubmitterKeyBucket(key: string): SubmitterKeyBucket {\n\tlet b = submitterKeyBuckets.get(key);\n\tif (!b) {\n\t\tb = { submitGen: 0, pending: null };\n\t\tsubmitterKeyBuckets.set(key, b);\n\t}\n\treturn b;\n}\n\nlet nextSubmitterOwnerId = 1;\nfunction allocateSubmitterOwnerId(): number {\n\treturn nextSubmitterOwnerId++;\n}\n\n/**\n * Function type for submitting form data with a SubmitTarget.\n *\n * Accepts the form schema data combined with SubmitTarget (FormData, HTMLFormElement, etc.)\n * Use this when you have a FormData object or form element reference.\n *\n * @example\n * ```typescript\n * // With FormData\n * submitter.submit(formData, { method: \"POST\" });\n *\n * // With form element reference\n * submitter.submit(formRef.current, { method: \"POST\" });\n * ```\n */\ntype SubmitFunc<TModule extends RouteWithActionModule> = (\n\ttarget: z.infer<TModule[\"formSchema\"]> & SubmitTarget,\n\toptions: Omit<SubmitOptions, \"action\" | \"method\" | \"encType\"> & {\n\t\tmethod: Exclude<SubmitOptions[\"method\"], \"GET\">;\n\t},\n) => Promise<SubmitterSettledData<TModule>>;\n\n/**\n * Options for submitJson function.\n * Method defaults to \"POST\" if not specified.\n */\ntype SubmitJsonOptions = Omit<\n\tSubmitOptions,\n\t\"action\" | \"method\" | \"encType\"\n> & {\n\tmethod?: Exclude<SubmitOptions[\"method\"], \"GET\">;\n};\n\n/**\n * Function type for submitting form data as JSON.\n *\n * Accepts only the inferred form schema type (plain object).\n * Automatically serializes the data as JSON. This is the recommended\n * approach for programmatic form submissions.\n *\n * Options are optional and default to `{ method: \"POST\" }`.\n *\n * @example\n * ```typescript\n * // Submit a plain object - fully type-safe (defaults to POST)\n * await submitter.submitJson({\n *   email: \"user@example.com\",\n *   password: \"secret123\",\n *   rememberMe: true,\n * });\n *\n * // Or specify a different method\n * await submitter.submitJson(data, { method: \"PUT\" });\n * ```\n */\ntype SubmitJsonFunc<TModule extends RouteWithActionModule> = (\n\tdata: z.infer<TModule[\"formSchema\"]>,\n\toptions?: SubmitJsonOptions,\n) => Promise<SubmitterSettledData<TModule>>;\n\n/**\n * Form component type with pre-bound action URL.\n *\n * Renders a form element that automatically submits to the correct route.\n * Method defaults to \"POST\" if not specified.\n *\n * @example\n * ```typescript\n * // Defaults to POST\n * <submitter.Form>\n *   <input name=\"title\" />\n *   <button type=\"submit\">Submit</button>\n * </submitter.Form>\n *\n * // Or specify a different method\n * <submitter.Form method=\"PUT\">\n *   ...\n * </submitter.Form>\n * ```\n */\ntype SubmitForm = (\n\tprops: Omit<\n\t\tFetcherFormProps & React.RefAttributes<HTMLFormElement>,\n\t\t\"action\" | \"method\"\n\t> & {\n\t\tmethod?: Exclude<SubmitOptions[\"method\"], \"GET\">;\n\t},\n) => React.ReactElement;\n\n/**\n * Stable object returned by {@link useDynamicSubmitter}: `submit`, `submitJson`, `Form`, and\n * `fetcherKey`. The reference is memoized and does not change when the internal fetcher’s\n * `state` / `data` update.\n */\nexport type UseDynamicSubmitterResult<TInfo extends RouteWithActionModule> = {\n\tsubmit: SubmitFunc<TInfo>;\n\tsubmitJson: SubmitJsonFunc<TInfo>;\n\tForm: SubmitForm;\n\t/** Pass to {@link useDynamicSubmitterFetcher} or `useFetcher({ key })` for reactive `state` / `data`. */\n\tfetcherKey: string;\n};\n\n/**\n * Creates a type-safe fetcher for submitting forms to dynamic routes.\n *\n * This hook provides full TypeScript inference for:\n * - Route parameters (from the route path)\n * - Form data schema (from the route's formSchema export)\n * - Action response type (from the route's action export)\n *\n * @template TInfo - The route module type (use `typeof import(\"./route-file\")`)\n *\n * @param path - The route path (must match the route's `route` export)\n * @param rest - Route parameters (if any), then optional {@link UseDynamicSubmitterOptions}. For\n * static routes, you may pass only options as the second argument (e.g. `{ keySuffix: \"a\" }`).\n * Options are recognized only when the object contains exclusively the `keySuffix` key (do not use\n * a route param object whose only field is named `keySuffix` unless it is meant as options).\n *\n * @returns Stable `{ submit, submitJson, Form, fetcherKey }`. Await the promises for action results;\n * use {@link useDynamicSubmitterFetcher} or local state for reactive loading/data.\n *\n * @example\n * ### Basic usage with route parameters\n *\n * ```typescript\n * // In your route file (app/routes/users.$userId.settings.tsx):\n * export const route: RoutePath<\"/users/:userId/settings\"> = \"/users/:userId/settings\";\n * export const formSchema = z.object({\n *   displayName: z.string().min(2),\n *   email: z.string().email(),\n *   notifications: z.boolean().default(true),\n * });\n * export const action = formAction({ schema: formSchema, handler: ... });\n *\n * // In your component:\n * const submitter = useDynamicSubmitter<typeof import(\"./users.$userId.settings\")>(\n *   \"/users/:userId/settings\",\n *   { userId: \"123\" }\n * );\n *\n * const data = await submitter.submitJson({\n *   displayName: \"John Doe\",\n *   email: \"john@example.com\",\n *   notifications: true,\n * });\n *\n * if (data.success) {\n *   console.log(\"Settings updated!\");\n * }\n * ```\n */\nexport function useDynamicSubmitter<TInfo extends RouteWithActionModule>(\n\tpath: TInfo[\"route\"],\n\t...rest: UseDynamicSubmitterRest<TInfo[\"route\"]>\n): UseDynamicSubmitterResult<TInfo> {\n\tconst { hrefArgs, options } = parseUseDynamicSubmitterRestArgs(rest);\n\tconst keySuffix = options.keySuffix;\n\n\tconst url = useMemo(() => {\n\t\t// biome-ignore lint/suspicious/noExplicitAny: Intentional\n\t\treturn href(path, ...(hrefArgs as any));\n\t}, [path, keySuffix, ...(hrefArgs as unknown[])]);\n\n\tconst fetcherKey = useMemo(\n\t\t() => dynamicSubmitterFetcherKey(url, keySuffix),\n\t\t[url, keySuffix],\n\t);\n\n\tconst fetcher = useFetcher<TInfo[\"action\"]>({\n\t\tkey: fetcherKey,\n\t});\n\n\tconst fetcherRef = useRef(fetcher);\n\tfetcherRef.current = fetcher;\n\n\tconst ownerIdRef = useRef(allocateSubmitterOwnerId());\n\tconst prevStateRef = useRef(fetcher.state);\n\n\tconst beginSubmit = useCallback(\n\t\t(runSubmit: () => void) => {\n\t\t\treturn new Promise<SubmitterSettledData<TInfo>>((resolve, reject) => {\n\t\t\t\tconst bucket = getSubmitterKeyBucket(fetcherKey);\n\t\t\t\tconst prevPending = bucket.pending;\n\t\t\t\tif (prevPending) {\n\t\t\t\t\tprevPending.reject(new SubmitterSupersededError());\n\t\t\t\t}\n\t\t\t\tbucket.submitGen += 1;\n\t\t\t\tconst gen = bucket.submitGen;\n\t\t\t\tbucket.pending = {\n\t\t\t\t\tgen,\n\t\t\t\t\townerId: ownerIdRef.current,\n\t\t\t\t\treject,\n\t\t\t\t\tfinishIdle: (data, error) => {\n\t\t\t\t\t\tif (data !== undefined) {\n\t\t\t\t\t\t\tresolve(data as SubmitterSettledData<TInfo>);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\treject(error ?? new Error(\"Submission failed\"));\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t\trunSubmit();\n\t\t\t});\n\t\t},\n\t\t[fetcherKey],\n\t);\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tconst bucket = getSubmitterKeyBucket(fetcherKey);\n\t\t\tconst pending = bucket.pending;\n\t\t\tif (pending && pending.ownerId === ownerIdRef.current) {\n\t\t\t\tbucket.pending = null;\n\t\t\t\tpending.reject(new SubmitterUnmountedError());\n\t\t\t}\n\t\t};\n\t}, [fetcherKey]);\n\n\tconst fetcherError = (fetcher as { error?: unknown }).error;\n\n\tuseEffect(() => {\n\t\tconst prev = prevStateRef.current;\n\t\tprevStateRef.current = fetcher.state;\n\t\tconst wasWorking = prev === \"submitting\" || prev === \"loading\";\n\t\tif (!wasWorking || fetcher.state !== \"idle\") {\n\t\t\treturn;\n\t\t}\n\t\tconst bucket = getSubmitterKeyBucket(fetcherKey);\n\t\tconst p = bucket.pending;\n\t\tif (!p || p.gen !== bucket.submitGen) {\n\t\t\treturn;\n\t\t}\n\t\tbucket.pending = null;\n\t\tp.finishIdle(fetcher.data, fetcherError);\n\t}, [fetcherKey, fetcher.state, fetcher.data, fetcherError]);\n\n\tconst submit: SubmitFunc<TInfo> = useCallback(\n\t\t(target, options) => {\n\t\t\treturn beginSubmit(() => {\n\t\t\t\tconst f = fetcherRef.current;\n\t\t\t\tvoid f.submit(target, {\n\t\t\t\t\t...options,\n\t\t\t\t\tmethod: (options?.method ?? \"POST\") as HTMLFormMethod,\n\t\t\t\t\taction: url,\n\t\t\t\t\tencType: \"multipart/form-data\",\n\t\t\t\t} as Parameters<typeof f.submit>[1]);\n\t\t\t});\n\t\t},\n\t\t[beginSubmit, url],\n\t);\n\n\tconst submitJson: SubmitJsonFunc<TInfo> = useCallback(\n\t\t(data, options = {}) => {\n\t\t\treturn beginSubmit(() => {\n\t\t\t\tconst f = fetcherRef.current;\n\t\t\t\tvoid f.submit(\n\t\t\t\t\tdata as SubmitTarget,\n\t\t\t\t\t{\n\t\t\t\t\t\t...options,\n\t\t\t\t\t\tmethod: (options.method ?? \"POST\") as HTMLFormMethod,\n\t\t\t\t\t\taction: url,\n\t\t\t\t\t\tencType: \"application/json\",\n\t\t\t\t\t} as Parameters<typeof f.submit>[1],\n\t\t\t\t);\n\t\t\t});\n\t\t},\n\t\t[beginSubmit, url],\n\t);\n\n\tconst fetcherFormRef = useRef(fetcher.Form);\n\tfetcherFormRef.current = fetcher.Form;\n\n\tconst Form: SubmitForm = useCallback(\n\t\t({ method = \"POST\", ...props }) => {\n\t\t\tconst OriginalForm = fetcherFormRef.current;\n\t\t\treturn <OriginalForm action={url} method={method} {...props} />;\n\t\t},\n\t\t[url],\n\t);\n\n\treturn useMemo(\n\t\t() => ({\n\t\t\tsubmit,\n\t\t\tsubmitJson,\n\t\t\tForm,\n\t\t\tfetcherKey,\n\t\t}),\n\t\t[submit, submitJson, Form, fetcherKey],\n\t);\n}\n\n/**\n * React Router `useFetcher` bound to the same key as {@link useDynamicSubmitter}, so `state` /\n * `data` reflect the same submissions as `submitter.submit` / `submitter.Form`.\n *\n * Call at component top level next to `useDynamicSubmitter`.\n */\nexport function useDynamicSubmitterFetcher<TInfo extends RouteWithActionModule>(\n\tsubmitter: UseDynamicSubmitterResult<TInfo>,\n) {\n\treturn useFetcher<TInfo[\"action\"]>({ key: submitter.fetcherKey });\n}\n"]}

package/dist/formAction.d.ts

@@ -56,13 +56,26 @@ import { z } from 'zod';
  * @example
  * ### Using with useDynamicSubmitter
  *
- * The route above can be used with `useDynamicSubmitter` for type-safe form submissions:
+ * The route above can be used with `useDynamicSubmitter` for type-safe form submissions.
+ * The hook exposes {@link UseDynamicSubmitterResult.fetcherKey} (built with
+ * {@link dynamicSubmitterFetcherKey}) so a parallel `useFetcher` stays aligned; prefer
+ * {@link useDynamicSubmitterFetcher} instead of hand-rolling the key.
+ *
+ * The **optional** {@link useDynamicSubmitterFetcher} below is only for declarative UI that reads
+ * `fetcher.state` / `fetcher.data` in render (same submission as `submitter`). For promise-first
+ * flows, omit it and use `await submitter.submitJson(...)` plus local `useState` for pending.
+ * Use {@link UseDynamicSubmitterOptions.keySuffix} when two submitters target the same URL and
+ * must not share fetcher state.
  *
  * ```tsx
- * import { useDynamicSubmitter } from "@firtoz/router-toolkit";
+ * import {
+ *   useDynamicSubmitter,
+ *   useDynamicSubmitterFetcher,
+ * } from "@firtoz/router-toolkit";
  *
  * function LoginForm() {
  *   const submitter = useDynamicSubmitter<typeof import("./auth.login")>("/auth/login");
+ *   const fetcher = useDynamicSubmitterFetcher(submitter);
  *
  *   // Option 1: Submit as JSON (defaults to POST)
  *   const handleLoginJson = async () => {
@@ -73,7 +86,7 @@ import { z } from 'zod';
  *     });
  *   };
  *
- *   // Option 2: Use the Form component (defaults to POST)
+ *   // Option 2: Form + useDynamicSubmitterFetcher for reactive state/data
  *   return (
  *     <submitter.Form>
  *       <input name="email" type="email" placeholder="Email" />
@@ -81,16 +94,16 @@ import { z } from 'zod';
  *       <label>
  *         <input name="rememberMe" type="checkbox" /> Remember me
  *       </label>
- *       <button disabled={submitter.state !== "idle"}>
- *         {submitter.state === "submitting" ? "Logging in..." : "Login"}
+ *       <button type="submit" disabled={fetcher.state === "submitting"}>
+ *         {fetcher.state === "submitting" ? "Logging in..." : "Login"}
  *       </button>
  *
- *       {submitter.data && !submitter.data.success && (
+ *       {fetcher.data && !fetcher.data.success && (
  *         <div className="error">
- *           {submitter.data.error.type === "validation"
+ *           {fetcher.data.error.type === "validation"
  *             ? "Please check your inputs"
- *             : submitter.data.error.type === "handler"
- *               ? submitter.data.error.error // "Invalid email or password"
+ *             : fetcher.data.error.type === "handler"
+ *               ? fetcher.data.error.error
  *               : "An unexpected error occurred"}
  *         </div>
  *       )}
@@ -143,21 +156,21 @@ import { z } from 'zod';
  *
  * ```tsx
  * import { useDynamicFetcher, useDynamicSubmitter } from "@firtoz/router-toolkit";
- * import { useEffect } from "react";
+ * import { useEffect, useState } from "react";
  *
  * function PostEditor({ postId }: { postId: string }) {
- *   // Fetch post data
  *   const fetcher = useDynamicFetcher<typeof import("./admin.posts.$id")>(
  *     "/admin/posts/:id",
  *     { id: postId }
  *   );
  *
- *   // Submit updates
  *   const submitter = useDynamicSubmitter<typeof import("./admin.posts.$id")>(
  *     "/admin/posts/:id",
  *     { id: postId }
  *   );
  *
+ *   const [saving, setSaving] = useState(false);
+ *
  *   useEffect(() => {
  *     fetcher.load();
  *   }, [fetcher.load]);
@@ -169,15 +182,28 @@ import { z } from 'zod';
  *   const post = fetcher.data?.post;
  *
  *   return (
- *     <submitter.Form method="PUT">
+ *     <submitter.Form
+ *       method="PUT"
+ *       onSubmit={async (e) => {
+ *         e.preventDefault();
+ *         setSaving(true);
+ *         try {
+ *           const fd = new FormData(e.currentTarget);
+ *           await submitter.submit(fd, { method: "PUT" });
+ *           fetcher.load();
+ *         } finally {
+ *           setSaving(false);
+ *         }
+ *       }}
+ *     >
  *       <input name="title" defaultValue={post?.title} />
  *       <textarea name="content" defaultValue={post?.content} />
  *       <label>
  *         <input name="published" type="checkbox" defaultChecked={post?.published} />
  *         Published
  *       </label>
- *       <button disabled={submitter.state !== "idle"}>
- *         {submitter.state === "submitting" ? "Saving..." : "Save"}
+ *       <button type="submit" disabled={saving}>
+ *         {saving ? "Saving..." : "Save"}
  *       </button>
  *     </submitter.Form>
  *   );

package/dist/formAction.js

@@ -1,3 +1,3 @@
-export { formAction } from './chunk-5MOCOBGV.js';
+export { formAction } from './chunk-UF5QHE5K.js';
 //# sourceMappingURL=formAction.js.map
 //# sourceMappingURL=formAction.js.map

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 export { ConcurrentSubmitterContext, ConcurrentSubmitterProvider, FormDataSubmittedData, Operation, OperationStatus, SubmitFormDataOptions, SubmitJsonOptions, SubmitJsonResult } from './ConcurrentSubmitterProvider.js';
 export { FormActionConfig, FormActionError, formAction } from './formAction.js';
-export * from '@firtoz/maybe-error';
 export { Func } from './types/Func.js';
 export { HrefArgs } from './types/HrefArgs.js';
 export { RegisterPages } from './types/RegisterPages.js';
@@ -10,9 +9,10 @@ export { RouteWithLoaderModule } from './types/RouteWithLoaderModule.js';
 export { useCachedFetch } from './useCachedFetch.js';
 export { UseConcurrentSubmitterReturn, useConcurrentSubmitter } from './useConcurrentSubmitter.js';
 export { useDynamicFetcher } from './useDynamicFetcher.js';
-export { useDynamicSubmitter } from './useDynamicSubmitter.js';
+export { DynamicSubmitterData, SubmitterSettledData, SubmitterSupersededError, SubmitterUnmountedError, UseDynamicSubmitterOptions, UseDynamicSubmitterResult, dynamicSubmitterFetcherKey, useDynamicSubmitter, useDynamicSubmitterFetcher } from './useDynamicSubmitter.js';
 export { useFetcherStateChanged } from './useFetcherStateChanged.js';
 import 'react/jsx-runtime';
 import 'react';
+import '@firtoz/maybe-error';
 import 'react-router';
 import 'zod';

package/dist/index.js

@@ -1,12 +1,12 @@
-import './chunk-2RLEUOSR.js';
+import './chunk-SBJFTOWW.js';
 import './chunk-2W5QFQTE.js';
 export { useCachedFetch } from './chunk-OQGTU34H.js';
 export { useConcurrentSubmitter } from './chunk-QZDEBX3D.js';
-export { useDynamicFetcher } from './chunk-HX57TC2S.js';
-export { useDynamicSubmitter } from './chunk-JJN6GBJL.js';
+export { useDynamicFetcher } from './chunk-F4324Q33.js';
+export { SubmitterSupersededError, SubmitterUnmountedError, dynamicSubmitterFetcherKey, useDynamicSubmitter, useDynamicSubmitterFetcher } from './chunk-XMGRKSHM.js';
 export { useFetcherStateChanged } from './chunk-W5R7YYHR.js';
 export { ConcurrentSubmitterContext, ConcurrentSubmitterProvider } from './chunk-ZC6U3MIB.js';
-export { formAction } from './chunk-5MOCOBGV.js';
+export { formAction } from './chunk-UF5QHE5K.js';
 import './chunk-YYJDSKJG.js';
 import './chunk-ZMRGBYFH.js';
 import './chunk-MKH4ZP5U.js';

package/dist/types/index.d.ts

@@ -1,4 +1,3 @@
-export * from '@firtoz/maybe-error';
 export { Func } from './Func.js';
 export { HrefArgs } from './HrefArgs.js';
 export { RegisterPages } from './RegisterPages.js';

package/dist/types/index.js

@@ -1,4 +1,4 @@
-import '../chunk-2RLEUOSR.js';
+import '../chunk-SBJFTOWW.js';
 import '../chunk-2W5QFQTE.js';
 import '../chunk-YYJDSKJG.js';
 import '../chunk-ZMRGBYFH.js';

package/dist/useDynamicFetcher.d.ts

@@ -103,28 +103,33 @@ import './types/Func.js';
  *
  * ```tsx
  * import { useDynamicFetcher, useDynamicSubmitter } from "@firtoz/router-toolkit";
+ * import { useEffect, useState } from "react";
  *
  * function PostEditor({ postId }: { postId: string }) {
- *   // Fetch post data
  *   const fetcher = useDynamicFetcher<typeof import("./api.posts.$postId")>(
  *     "/api/posts/:postId",
  *     { postId }
  *   );
  *
- *   // Submit updates
  *   const submitter = useDynamicSubmitter<typeof import("./api.posts.$postId")>(
  *     "/api/posts/:postId",
  *     { postId }
  *   );
  *
+ *   const [saving, setSaving] = useState(false);
+ *
  *   useEffect(() => {
  *     fetcher.load();
  *   }, [fetcher.load]);
  *
  *   const handleSave = async (title: string, content: string) => {
- *     await submitter.submitJson({ title, content }, { method: "PUT" });
- *     // Reload after save
- *     fetcher.load();
+ *     setSaving(true);
+ *     try {
+ *       await submitter.submitJson({ title, content }, { method: "PUT" });
+ *       fetcher.load();
+ *     } finally {
+ *       setSaving(false);
+ *     }
  *   };
  *
  *   if (!fetcher.data) return <div>Loading...</div>;
@@ -133,17 +138,22 @@ import './types/Func.js';
  *     <form onSubmit={(e) => {
  *       e.preventDefault();
  *       const form = new FormData(e.currentTarget);
- *       handleSave(form.get("title") as string, form.get("content") as string);
+ *       void handleSave(form.get("title") as string, form.get("content") as string);
  *     }}>
  *       <input name="title" defaultValue={fetcher.data.post.title} />
  *       <textarea name="content" defaultValue={fetcher.data.post.content} />
- *       <button disabled={submitter.state !== "idle"}>
- *         {submitter.state === "submitting" ? "Saving..." : "Save"}
+ *       <button type="submit" disabled={saving}>
+ *         {saving ? "Saving..." : "Save"}
  *       </button>
  *     </form>
  *   );
  * }
  * ```
+ *
+ * **Submitter UX:** Local `saving` around `await submitter.submitJson` fits a promise-first save +
+ * reload flow. For declarative `fetcher.state` / `fetcher.data` in JSX (e.g. with `submitter.Form`),
+ * use {@link useDynamicSubmitterFetcher} instead. The package README documents trade-offs under
+ * **useDynamicSubmitter** (heading “Local useState vs useDynamicSubmitterFetcher”).
  */
 
 /**

package/dist/useDynamicFetcher.js

@@ -1,3 +1,3 @@
-export { useDynamicFetcher } from './chunk-HX57TC2S.js';
+export { useDynamicFetcher } from './chunk-F4324Q33.js';
 //# sourceMappingURL=useDynamicFetcher.js.map
 //# sourceMappingURL=useDynamicFetcher.js.map