@firtoz/router-toolkit 8.0.1 → 9.0.0

package/README.md

@@ -106,9 +106,15 @@ export default function Dashboard() {
 
 ### 3. Forms with Actions
 
+`useDynamicSubmitter` returns a **stable** `{ submit, submitJson, Form, fetcherKey }` and does not expose `state` / `data`. Use `useDynamicSubmitterFetcher(submitter)` when you need reactive loading or action results in JSX (or `submitter.fetcherKey` with `useFetcher` for advanced cases).
+
 ```tsx
 // app/routes/create-user.tsx
-import { useDynamicSubmitter, type RoutePath } from '@firtoz/router-toolkit';
+import {
+  useDynamicSubmitter,
+  useDynamicSubmitterFetcher,
+  type RoutePath,
+} from '@firtoz/router-toolkit';
 
 export const route: RoutePath<"/create-user"> = "/create-user";
 
@@ -119,15 +125,17 @@ export async function action({ request }) {
 }
 
 export default function CreateUser() {
-  const submitter = useDynamicSubmitter<typeof import("./create-user")>("/create-user");
-  
+  const path = "/create-user" as const;
+  const submitter = useDynamicSubmitter<typeof import("./create-user")>(path);
+  const fetcher = useDynamicSubmitterFetcher(submitter);
+
   return (
     <submitter.Form method="post">
       <input name="name" placeholder="User name" required />
       <button type="submit">
-        {submitter.state === "submitting" ? "Creating..." : "Create"}
+        {fetcher.state === "submitting" ? "Creating..." : "Create"}
       </button>
-      {submitter.data?.success && <p>✅ User created!</p>}
+      {fetcher.data?.success && <p>✅ User created!</p>}
     </submitter.Form>
   );
 }
@@ -136,8 +144,8 @@ export default function CreateUser() {
 **Key Points:**
 - Export `route: RoutePath<"your-path">` in every route file
 - Use `useDynamicFetcher<typeof import("./route-file")>` for type-safe data fetching
-- Use `useDynamicSubmitter<typeof import("./route-file")>` for type-safe form submission
-- Full TypeScript inference for `fetcher.data` and `submitter.data`
+- Use `useDynamicSubmitter<typeof import("./route-file")>` for type-safe `submit` / `submitJson` / `Form`; use `useDynamicSubmitterFetcher(submitter)` for reactive `state` / `data` on the same submission (optional `keySuffix` when two submitters share one URL)
+- Await `submit` / `submitJson` for programmatic flows; full TypeScript inference on the resolved payload
 
 > **💡 Tip**: Start with `useDynamicFetcher` for data loading, then add `useDynamicSubmitter` for forms. The `useFetcherStateChanged` hook is great for notifications and side effects.
 
@@ -196,11 +204,15 @@ export default function UsersPage() {
 
 ### `useDynamicSubmitter`
 
-Type-safe form submission with Zod validation and enhanced submit functionality. Works seamlessly with route modules for full type inference.
+Type-safe `submit`, `submitJson`, and `Form` with a **stable** return object (`fetcherKey` included). Use `await submitJson(...)` (or `await submit(...)`) for action payloads; use `useDynamicSubmitterFetcher(submitter)` when you need `fetcher.state` / `fetcher.data` in the UI.
 
 ```tsx
 // app/routes/contact.tsx
-import { useDynamicSubmitter, type RoutePath } from '@firtoz/router-toolkit';
+import {
+  useDynamicSubmitter,
+  useDynamicSubmitterFetcher,
+  type RoutePath,
+} from '@firtoz/router-toolkit';
 import { z } from 'zod';
 import type { Route } from './+types/contact';
 
@@ -234,9 +246,11 @@ export async function action({ request }: Route.ActionArgs) {
   };
 }
 
-// 4. Use the hook with typeof import for full type inference
+// 4. Submitter + matching fetcher for reactive UI
 export default function ContactForm() {
-  const submitter = useDynamicSubmitter<typeof import("./contact")>("/contact");
+  const path = "/contact" as const;
+  const submitter = useDynamicSubmitter<typeof import("./contact")>(path);
+  const fetcher = useDynamicSubmitterFetcher(submitter);
 
   return (
     <div>
@@ -263,18 +277,18 @@ export default function ContactForm() {
         
         <button
           type="submit"
-          disabled={submitter.state === "submitting"}
+          disabled={fetcher.state === "submitting"}
         >
-          {submitter.state === "submitting" ? "Submitting..." : "Submit"}
+          {fetcher.state === "submitting" ? "Submitting..." : "Submit"}
         </button>
       </submitter.Form>
 
-      {submitter.data && (
+      {fetcher.data && (
         <div>
-          {submitter.data.success ? (
-            <p>✅ {submitter.data.message}</p>
+          {fetcher.data.success ? (
+            <p>✅ {fetcher.data.message}</p>
           ) : (
-            <p>❌ {submitter.data.message}</p>
+            <p>❌ {fetcher.data.message}</p>
           )}
         </div>
       )}
@@ -283,6 +297,22 @@ export default function ContactForm() {
 }
 ```
 
+#### Local `useState` vs `useDynamicSubmitterFetcher`
+
+Both are valid; pick based on how you want loading and action feedback to show up.
+
+**Local state around `await` (e.g. `saving` + `try` / `finally`)**
+
+- **Pros:** Matches the promise-first API; no extra hook; the pending flag tracks exactly your async handler (including extra `await`s in the same function); easy to reason about when you reload data after save (e.g. `useDynamicFetcher.load()`).
+- **Cons:** You must remember `finally` (or equivalent); one flag is awkward if several overlapping operations need distinct UX; you do not get declarative `fetcher.data` for the action unless you store the awaited value yourself.
+
+**`useDynamicSubmitterFetcher(submitter)`**
+
+- **Pros:** Declarative `fetcher.state` / `fetcher.data` / `fetcher.error` in JSX—good for `<submitter.Form>`, inline validation or handler errors, and staying aligned with React Router’s fetcher lifecycle on `submitter.fetcherKey`.
+- **Cons:** Second `useFetcher` subscription; UI follows RR’s state machine, not only “my handler,” unless you isolate keys with `keySuffix` when two widgets share one URL.
+
+**Rule of thumb:** Use **local pending state** when the flow is “run this async function, disable until it finishes.” Use **`useDynamicSubmitterFetcher`** when you want **reactive** fetcher fields in render without mirroring them into state.
+
 ### `ConcurrentSubmitterProvider` + `useConcurrentSubmitter`
 
 Run multiple submissions in parallel via the framework fetcher; each is tracked in `operations` with `submittedData` (for optimistic UI) and `data` when done. Wrap your app (or subtree) with `ConcurrentSubmitterProvider`, then use `useConcurrentSubmitter<TInfo>()` for typed `submitJson` / `submitFormData` with path and args per call.
@@ -345,7 +375,12 @@ Track changes in fetcher state and react to them. Perfect for triggering side ef
 
 ```tsx
 // app/routes/notification-form.tsx
-import { useDynamicSubmitter, useFetcherStateChanged, type RoutePath } from '@firtoz/router-toolkit';
+import {
+  useDynamicSubmitter,
+  useDynamicSubmitterFetcher,
+  useFetcherStateChanged,
+  type RoutePath,
+} from '@firtoz/router-toolkit';
 import { useState } from 'react';
 import { z } from 'zod';
 import type { Route } from './+types/notification-form';
@@ -373,17 +408,19 @@ export async function action({ request }: Route.ActionArgs) {
 }
 
 export default function NotificationForm() {
-  const submitter = useDynamicSubmitter<typeof import("./notification-form")>("/notification-form");
+  const path = "/notification-form" as const;
+  const submitter = useDynamicSubmitter<typeof import("./notification-form")>(path);
+  const fetcher = useDynamicSubmitterFetcher(submitter);
   const [notifications, setNotifications] = useState<string[]>([]);
 
-  // Track fetcher state changes for side effects
-  useFetcherStateChanged(submitter, (lastState, newState) => {
+  // Track fetcher state changes for side effects (pass the parallel fetcher, not submitter)
+  useFetcherStateChanged(fetcher, (lastState, newState) => {
     console.log(`Fetcher state changed from ${lastState} to ${newState}`);
     
     // Show success notification when form submission completes
     if (newState === 'idle' && lastState === 'submitting') {
-      if (submitter.data?.success) {
-        setNotifications(prev => [...prev, `✅ ${submitter.data.message}`]);
+      if (fetcher.data?.success) {
+        setNotifications(prev => [...prev, `✅ ${fetcher.data.message}`]);
       } else {
         setNotifications(prev => [...prev, `❌ Submission failed`]);
       }
@@ -421,12 +458,12 @@ export default function NotificationForm() {
         
         <button 
           type="submit" 
-          disabled={submitter.state === 'submitting'}
+          disabled={fetcher.state === 'submitting'}
         >
-          {submitter.state === 'submitting' ? 'Sending...' : 'Send Notification'}
+          {fetcher.state === 'submitting' ? 'Sending...' : 'Send Notification'}
         </button>
         
-        <p>Current state: <strong>{submitter.state}</strong></p>
+        <p>Current state: <strong>{fetcher.state}</strong></p>
       </submitter.Form>
 
       {/* Show notifications triggered by state changes */}
@@ -520,18 +557,23 @@ The `formAction` utility works seamlessly with `useDynamicSubmitter` when you ex
 
 ```tsx
 // app/routes/register.tsx (component)
-import { useDynamicSubmitter } from "@firtoz/router-toolkit";
+import {
+  useDynamicSubmitter,
+  useDynamicSubmitterFetcher,
+} from "@firtoz/router-toolkit";
 
 export default function Register() {
-  const submitter = useDynamicSubmitter<typeof import("./register")>("/register");
+  const path = "/register" as const;
+  const submitter = useDynamicSubmitter<typeof import("./register")>(path);
+  const fetcher = useDynamicSubmitterFetcher(submitter);
 
   return (
     <submitter.Form method="post">
       <input name="email" type="email" required />
       <input name="password" type="password" required />
       <input name="confirmPassword" type="password" required />
-      <button type="submit" disabled={submitter.state === "submitting"}>
-        {submitter.state === "submitting" ? "Registering..." : "Register"}
+      <button type="submit" disabled={fetcher.state === "submitting"}>
+        {fetcher.state === "submitting" ? "Registering..." : "Register"}
       </button>
     </submitter.Form>
   );
@@ -540,26 +582,25 @@ export default function Register() {
 
 #### Error Handling
 
-The `formAction` utility returns structured errors that you can handle in your components:
+The `formAction` utility returns structured errors. Inspect `fetcher.data` from `useDynamicSubmitterFetcher(submitter)`, or `await submitter.submitJson(...)` in an async handler:
 
 ```tsx
 export default function Register() {
-  const submitter = useDynamicSubmitter<typeof import("./register")>("/register");
+  const path = "/register" as const;
+  const submitter = useDynamicSubmitter<typeof import("./register")>(path);
+  const fetcher = useDynamicSubmitterFetcher(submitter);
+
+  if (fetcher.data && !fetcher.data.success) {
+    const error = fetcher.data.error;
 
-  if (submitter.data && !submitter.data.success) {
-    const error = submitter.data.error;
-    
     switch (error.type) {
       case "validation":
-        // Handle Zod validation errors
         console.log("Validation errors:", error.error);
         break;
       case "handler":
-        // Handle business logic errors
         console.log("Handler error:", error.error);
         break;
       case "unknown":
-        // Handle unexpected errors
         console.log("Unknown error occurred");
         break;
     }
@@ -843,7 +884,11 @@ export default function LoaderTest() {
 
 ```tsx
 // app/routes/action-test.tsx
-import { useDynamicSubmitter, type RoutePath } from '@firtoz/router-toolkit';
+import {
+  useDynamicSubmitter,
+  useDynamicSubmitterFetcher,
+  type RoutePath,
+} from '@firtoz/router-toolkit';
 import { z } from 'zod';
 import type { Route } from './+types/action-test';
 
@@ -887,7 +932,9 @@ export async function action({ request }: Route.ActionArgs): Promise<ActionData>
 }
 
 export default function ActionTest() {
-  const submitter = useDynamicSubmitter<typeof import("./action-test")>("/action-test");
+  const path = "/action-test" as const;
+  const submitter = useDynamicSubmitter<typeof import("./action-test")>(path);
+  const fetcher = useDynamicSubmitterFetcher(submitter);
 
   return (
     <div className="p-6">
@@ -923,27 +970,27 @@ export default function ActionTest() {
 
         <button
           type="submit"
-          disabled={submitter.state === "submitting"}
+          disabled={fetcher.state === "submitting"}
           className="bg-green-500 text-white px-4 py-2 rounded disabled:opacity-50"
         >
-          {submitter.state === "submitting" ? "Submitting..." : "Submit"}
+          {fetcher.state === "submitting" ? "Submitting..." : "Submit"}
         </button>
       </submitter.Form>
 
-      {submitter.data && (
+      {fetcher.data && (
         <div className="mt-6">
           <h2 className="text-lg font-semibold mb-2">Action Result:</h2>
           <pre className="bg-gray-200 p-3 rounded text-sm text-gray-800">
-            {JSON.stringify(submitter.data, null, 2)}
+            {JSON.stringify(fetcher.data, null, 2)}
           </pre>
 
-          {submitter.data.success ? (
+          {fetcher.data.success ? (
             <div className="mt-4 p-3 bg-green-100 rounded">
-              <p className="text-green-800">✅ {submitter.data.message}</p>
+              <p className="text-green-800">✅ {fetcher.data.message}</p>
             </div>
           ) : (
             <div className="mt-4 p-3 bg-red-100 rounded">
-              <p className="text-red-800">❌ {submitter.data.message}</p>
+              <p className="text-red-800">❌ {fetcher.data.message}</p>
             </div>
           )}
         </div>
@@ -958,8 +1005,8 @@ export default function ActionTest() {
 ```tsx
 // app/routes/combined-test.tsx
 import {
-  useDynamicFetcher,
   useDynamicSubmitter,
+  useDynamicSubmitterFetcher,
   type RoutePath,
 } from '@firtoz/router-toolkit';
 import { useLoaderData } from 'react-router';
@@ -1033,8 +1080,9 @@ export async function action({ request }: Route.ActionArgs): Promise<ActionData>
 
 export default function CombinedTest() {
   const loaderData = useLoaderData<LoaderData>();
-  const fetcher = useDynamicFetcher<typeof import("./combined-test")>("/combined-test");
-  const submitter = useDynamicSubmitter<typeof import("./combined-test")>("/combined-test");
+  const path = "/combined-test" as const;
+  const submitter = useDynamicSubmitter<typeof import("./combined-test")>(path);
+  const actionFetcher = useDynamicSubmitterFetcher(submitter);
 
   return (
     <div className="p-6">
@@ -1087,10 +1135,10 @@ export default function CombinedTest() {
 
             <button
               type="submit"
-              disabled={submitter.state === "submitting"}
+              disabled={actionFetcher.state === "submitting"}
               className="bg-purple-500 text-white px-4 py-2 rounded disabled:opacity-50"
             >
-              {submitter.state === "submitting" ? "Updating..." : "Update User"}
+              {actionFetcher.state === "submitting" ? "Updating..." : "Update User"}
             </button>
           </submitter.Form>
         </div>
@@ -1100,21 +1148,21 @@ export default function CombinedTest() {
       <div className="mt-6">
         <h2 className="text-lg font-semibold mb-2">Action Status:</h2>
         <pre className="bg-gray-200 p-3 rounded text-sm text-gray-800">
-          {JSON.stringify({ state: submitter.state }, null, 2)}
+          {JSON.stringify({ state: actionFetcher.state }, null, 2)}
         </pre>
       </div>
 
-      {submitter.data && (
+      {actionFetcher.data && (
         <div className="mt-6">
           <h2 className="text-lg font-semibold mb-2">Action Result:</h2>
           <pre className="bg-gray-200 p-3 rounded text-sm text-gray-800">
-            {JSON.stringify(submitter.data, null, 2)}
+            {JSON.stringify(actionFetcher.data, null, 2)}
           </pre>
 
-          {submitter.data.success ? (
+          {actionFetcher.data.success ? (
             <div className="mt-4 p-3 bg-green-100 rounded">
-              <p className="text-green-800">✅ {submitter.data.message}</p>
-              {submitter.data.updatedUser && (
+              <p className="text-green-800">✅ {actionFetcher.data.message}</p>
+              {actionFetcher.data.updatedUser && (
                 <p className="text-sm text-green-700 mt-1">
                   Tip: Reload the page to see if data persists (it won't in this demo)
                 </p>
@@ -1122,7 +1170,7 @@ export default function CombinedTest() {
             </div>
           ) : (
             <div className="mt-4 p-3 bg-red-100 rounded">
-              <p className="text-red-800">❌ {submitter.data.message}</p>
+              <p className="text-red-800">❌ {actionFetcher.data.message}</p>
             </div>
           )}
         </div>
@@ -1134,12 +1182,12 @@ export default function CombinedTest() {
 
 ## MaybeError Utility
 
-The router-toolkit includes the `@firtoz/maybe-error` package, which provides type-safe error handling utilities using discriminated unions. This is perfect for handling operations that may fail in your route loaders and actions.
+`@firtoz/maybe-error` is a **dependency** of router-toolkit (it is installed with this package), but it is **not** re-exported from `@firtoz/router-toolkit`. Import `success`, `fail`, `MaybeError`, `exhaustiveGuard`, and related symbols **from `@firtoz/maybe-error`** so your imports match runtime and dependency boundaries stay clear.
 
 ### Basic Usage
 
 ```tsx
-import { success, fail, type MaybeError } from '@firtoz/router-toolkit';
+import { success, fail, type MaybeError } from '@firtoz/maybe-error';
 
 // Define a function that may fail
 function divide(a: number, b: number): MaybeError<number> {
@@ -1162,7 +1210,8 @@ if (result.success) {
 
 ```tsx
 // app/routes/user-profile.tsx
-import { success, fail, type MaybeError, type RoutePath } from '@firtoz/router-toolkit';
+import { success, fail, type MaybeError } from '@firtoz/maybe-error';
+import { type RoutePath } from '@firtoz/router-toolkit';
 import type { Route } from './+types/user-profile';
 
 interface User {
@@ -1230,7 +1279,12 @@ export default function UserProfile() {
 
 ```tsx
 // app/routes/create-user.tsx
-import { success, fail, type MaybeError, useDynamicSubmitter, type RoutePath } from '@firtoz/router-toolkit';
+import { success, fail, type MaybeError } from '@firtoz/maybe-error';
+import {
+  useDynamicSubmitter,
+  useDynamicSubmitterFetcher,
+  type RoutePath,
+} from '@firtoz/router-toolkit';
 import { z } from 'zod';
 import type { Route } from './+types/create-user';
 
@@ -1280,7 +1334,9 @@ export async function action({ request }: Route.ActionArgs): Promise<MaybeError<
 }
 
 export default function CreateUser() {
-  const submitter = useDynamicSubmitter<typeof import("./create-user")>("/create-user");
+  const path = "/create-user" as const;
+  const submitter = useDynamicSubmitter<typeof import("./create-user")>(path);
+  const fetcher = useDynamicSubmitterFetcher(submitter);
 
   return (
     <div>
@@ -1297,24 +1353,24 @@ export default function CreateUser() {
           <input id="email" name="email" type="email" required />
         </div>
         
-        <button type="submit" disabled={submitter.state === "submitting"}>
-          {submitter.state === "submitting" ? "Creating..." : "Create User"}
+        <button type="submit" disabled={fetcher.state === "submitting"}>
+          {fetcher.state === "submitting" ? "Creating..." : "Create User"}
         </button>
       </submitter.Form>
 
-      {submitter.data && (
+      {fetcher.data && (
         <div>
-          {submitter.data.success ? (
+          {fetcher.data.success ? (
             <div className="success">
               <h3>User Created!</h3>
-              <p>Name: {submitter.data.result.name}</p>
-              <p>Email: {submitter.data.result.email}</p>
+              <p>Name: {fetcher.data.result.name}</p>
+              <p>Email: {fetcher.data.result.email}</p>
             </div>
           ) : (
             <div className="errors">
               <h3>Validation Errors:</h3>
               <ul>
-                {submitter.data.error.map((error, index) => (
+                {fetcher.data.error.map((error, index) => (
                   <li key={index}>
                     <strong>{error.field}:</strong> {error.message}
                   </li>

package/dist/chunk-2WSA75KM.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-2WSA75KM.js.map
+//# sourceMappingURL=chunk-2WSA75KM.js.map