@solidjs/router 0.16.0 → 0.17.0-next.0

package/README.md

@@ -64,7 +64,7 @@ npm add @solidjs/router
 Install `@solidjs/router`, then start your application by rendering the router component
 
 ```jsx
-import { render } from "solid-js/web";
+import { render } from "@solidjs/web";
 import { Router } from "@solidjs/router";
 
 render(() => <Router />, document.getElementById("app"));
@@ -79,7 +79,7 @@ Solid Router allows you to configure your routes using JSX:
 1. Add each route to a `<Router>` using the `Route` component, specifying a path and a component to render when the user navigates to that path.
 
 ```jsx
-import { render } from "solid-js/web";
+import { render } from "@solidjs/web";
 import { Router, Route } from "@solidjs/router";
 
 import Home from "./pages/Home";
@@ -101,7 +101,7 @@ render(
 This will always be there and won't update on page change. It is the ideal place to put top level navigation and Context Providers
 
 ```jsx
-import { render } from "solid-js/web";
+import { render } from "@solidjs/web";
 import { Router, Route } from "@solidjs/router";
 
 import Home from "./pages/Home";
@@ -130,7 +130,7 @@ render(
 We can create catch-all routes for pages not found at any nested level of the router. We use `*` and optionally the name of a parameter to retrieve the rest of the path.
 
 ```jsx
-import { render } from "solid-js/web";
+import { render } from "@solidjs/web";
 import { Router, Route } from "@solidjs/router";
 
 import Home from "./pages/Home";
@@ -162,7 +162,7 @@ This way, the `Users` and `Home` components will only be loaded if you're naviga
 
 ```jsx
 import { lazy } from "solid-js";
-import { render } from "solid-js/web";
+import { render } from "@solidjs/web";
 import { Router, Route } from "@solidjs/router";
 
 const Users = lazy(() => import("./pages/Users"));
@@ -192,7 +192,7 @@ Use an anchor tag that takes you to a route:
 
 ```jsx
 import { lazy } from "solid-js";
-import { render } from "solid-js/web";
+import { render } from "@solidjs/web";
 import { Router, Route } from "@solidjs/router";
 
 const Users = lazy(() => import("./pages/Users"));
@@ -226,7 +226,7 @@ If you don't know the path ahead of time, you might want to treat part of the pa
 
 ```jsx
 import { lazy } from "solid-js";
-import { render } from "solid-js/web";
+import { render } from "@solidjs/web";
 import { Router, Route } from "@solidjs/router";
 
 const Users = lazy(() => import("./pages/Users"));
@@ -265,7 +265,7 @@ This allows for more complex routing descriptions than just checking the presenc
 
 ```jsx
 import { lazy } from "solid-js";
-import { render } from "solid-js/web";
+import { render } from "@solidjs/web";
 import { Router, Route } from "@solidjs/router";
 import type { MatchFilters } from "@solidjs/router";
 
@@ -498,9 +498,10 @@ Inside your page component you:
 ```jsx
 // pages/users/[id].js
 import { getUser } from ... // the query function
+import { createMemo } from "solid-js";
 
 export default function User(props) {
-  const user = createAsync(() => getUser(props.params.id));
+  const user = createMemo(() => getUser(props.params.id));
   return <h1>{user().name}</h1>;
 }
 ```
@@ -518,35 +519,24 @@ You can revalidate the query using the `revalidate` method or you can set `reval
 
 `query` can be defined anywhere and then used inside your components with:
 
-### `createAsync`
+### Async reads in Solid 2
 
-This is light wrapper over `createResource` that aims to serve as stand-in for a future primitive we intend to bring to Solid core in 2.0. It is a simpler async primitive where the function tracks like `createMemo` and it expects a promise back that it turns into a Signal. Reading it before it is ready causes Suspense/Transitions to trigger.
+On this Solid 2 branch, `query()` results are meant to be consumed directly with Solid primitives like `createMemo` and `createProjection`.
 
 ```jsx
-const user = createAsync((currentValue) => getUser(params.id));
+const user = createMemo(() => getUser(params.id));
+return <h1>{user().name}</h1>;
 ```
 
-It also preserves `latest` field from `createResource`. Note that it will be removed in the future.
+For object-shaped data where you want a deeply reactive result, use `createProjection`.
 
 ```jsx
-const user = createAsync((currentValue) => getUser(params.id));
-return <h1>{user.latest.name}</h1>;
-```
-
-Using `query` in `createResource` directly won't work properly as the fetcher is not reactive and it won't invalidate properly.
-
-### `createAsyncStore`
-
-Similar to `createAsync` except it uses a deeply reactive store. Perfect for applying fine-grained changes to large model data that updates.
-It also supports `latest` field which will be removed in the future.
-
-```jsx
-const todos = createAsyncStore(() => getTodos());
+const todos = createProjection(() => getTodos(), []);
 ```
 
 ### `action`
 
-Actions are data mutations that can trigger invalidations and further routing. A list of prebuilt response helpers can be found below.
+Router `action()` is the router-aware mutation wrapper for Solid 2. It keeps form submission, redirects, and invalidation wired into the router while letting you compose optimistic UI with Solid's built-in primitives.
 
 ```jsx
 import { action, revalidate, redirect } from "@solidjs/router"
@@ -566,6 +556,29 @@ const myAction = action(async (data) => {
 
 Actions only work with post requests, so make sure to put `method="post"` on your form.
 
+For optimistic updates, use Solid's optimistic primitives for the rendered state and attach owner-scoped submit hooks to the router action:
+
+```jsx
+import { createOptimisticStore } from "solid-js";
+import { action, query } from "@solidjs/router";
+
+const getTodos = query(async () => fetchTodos(), "todos");
+const [todos, setTodos] = createOptimisticStore(() => getTodos(), []);
+
+const addTodo = action(async (todo) => {
+    await saveTodo(todo);
+    return { ok: true, todo };
+  }, "add-todo").onSubmit(todo => {
+    setTodos(items => {
+      items.push({ ...todo, pending: true });
+    });
+  });
+```
+
+`myAction.onSubmit(...)` registers a listener for that action in the current reactive owner. Multiple components can register hooks against the same action, and those hooks are automatically removed when their owner is disposed. `myAction.onSettled(...)` works the same way for observing completed submissions.
+
+The preferred pattern is for actions to return values and let the client interpret the result. Throwing errors is still supported, but `Submission.error` is mainly an escape hatch for that legacy style.
+
 Sometimes it might be easier to deal with typed data instead of `FormData` and adding additional hidden fields. For that reason Actions have a with method. That works similar to `bind` which applies the arguments in order.
 
 Picture an action that deletes Todo Item:
@@ -592,7 +605,7 @@ const deleteTodo = action(api.deleteTodo)
 </form>
 ```
 
-Actions also take a second argument which can be the name or an option object with `name` and `onComplete`. `name` is used to identify SSR actions that aren't server functions (see note below). `onComplete` allows you to configure behavior when `action`s complete. Keep in mind `onComplete` does not work when JavaScript is disabled.
+Actions also take a second argument which can be the name or an option object with `name`. `name` is used to identify SSR actions that aren't server functions (see note below).
 
 #### Notes on `<form>` implementation and SSR
 
@@ -614,24 +627,26 @@ submit(...args);
 
 The outside of a form context you can use custom data instead of formData, and these helpers preserve types. However, even when used with server functions (in projects like SolidStart) this requires client side javascript and is not Progressive Enhanceable like forms are.
 
-### `useSubmission`/`useSubmissions`
+### `useSubmissions`
 
-Are used to injecting the optimistic updates while actions are in flight. They either return a single Submission(latest) or all that match with an optional filter function.
+This returns settled submission records for an action. It is useful for reading completed results, clearing old submissions, retrying a prior submission, or replaying settled errors. It is not the optimistic state layer.
 
 ```jsx
 type Submission<T, U> = {
   readonly input: T;
   readonly result?: U;
-  readonly pending: boolean;
+  readonly error: any;
   readonly url: string;
   clear: () => void;
   retry: () => void;
 };
 
 const submissions = useSubmissions(action, (input) => filter(input));
-const submission = useSubmission(action, (input) => filter(input));
+const latestSubmission = submissions.at(-1);
 ```
 
+Use Solid's `createOptimistic` or `createOptimisticStore` for in-flight UI, and use submissions as the durable settled record layer.
+
 ### Response Helpers
 
 These are used to communicate router navigations from query/actions, and can include invalidation hints. Generally these are thrown to not interfere the with the types and make it clear that function ends execution at that point.
@@ -670,7 +685,7 @@ You don't have to use JSX to set up your routes; you can pass an array of route
 
 ```jsx
 import { lazy } from "solid-js";
-import { render } from "solid-js/web";
+import { render } from "@solidjs/web";
 import { Router } from "@solidjs/router";
 
 const routes = [
@@ -713,7 +728,7 @@ Also you can pass a single route definition object for a single route:
 
 ```jsx
 import { lazy } from "solid-js";
-import { render } from "solid-js/web";
+import { render } from "@solidjs/web";
 import { Router } from "@solidjs/router";
 
 const route = {
@@ -751,7 +766,7 @@ import { MemoryRouter } from "@solidjs/router";
 For SSR you can use the static router directly or the browser Router defaults to it on the server, just pass in the url.
 
 ```jsx
-import { isServer } from "solid-js/web";
+import { isServer } from "@solidjs/web";
 import { Router } from "@solidjs/router";
 
 <Router url={isServer ? req.url : ""} />;
@@ -884,13 +899,13 @@ return (
 
 ### useIsRouting
 
-Retrieves signal that indicates whether the route is currently in a Transition. Useful for showing stale/pending state when the route resolution is Suspended during concurrent rendering.
+Retrieves a signal that indicates whether the router is currently processing a navigation. Useful for showing pending navigation state while the next route and its data settle.
 
 ```js
 const isRouting = useIsRouting();
 
 return (
-  <div classList={{ "grey-out": isRouting() }}>
+  <div class={{ "grey-out": isRouting() }}>
     <MyAwesomeContent />
   </div>
 );
@@ -903,7 +918,7 @@ return (
 ```js
 const match = useMatch(() => props.href);
 
-return <div classList={{ active: Boolean(match()) }} />;
+return <div class={{ active: Boolean(match()) }} />;
 ```
 
 ### useCurrentMatches
@@ -958,60 +973,51 @@ useBeforeLeave((e: BeforeLeaveEventArgs) => {
 });
 ```
 
-## Migrations from 0.9.x
-
-v0.10.0 brings some big changes to support the future of routing including Islands/Partial Hydration hybrid solutions. Most notably there is no Context API available in non-hydrating parts of the application.
-
-The biggest changes are around removed APIs that need to be replaced.
-
-### `<Outlet>`, `<Routes>`, `useRoutes`
-
-This is no longer used and instead will use `props.children` passed from into the page components for outlets. This keeps the outlet directly passed from its page and avoids oddness of trying to use context across Islands boundaries. Nested `<Routes>` components inherently cause waterfalls and are `<Outlets>` themselves so they have the same concerns.
-
-Keep in mind no `<Routes>` means the `<Router>` API is different. The `<Router>` acts as the `<Routes>` component and its children can only be `<Route>` components. Your top-level layout should go in the root prop of the router [as shown above](#configure-your-routes)
+## Migration from 0.16.x
 
-## `element` prop removed from `Route`
+This branch is the Solid 2 migration. Most route configuration stays the same, but the data APIs and recommended async patterns have changed.
 
-Related without Outlet component it has to be passed in manually. At which point the `element` prop has less value. Removing the second way to define route components to reduce confusion and edge cases.
+### Async reads move to Solid 2 primitives
 
-### `data` functions & `useRouteData`
+`createAsync` and `createAsyncStore` are gone. Read query results with Solid 2 primitives like `createMemo`, `createProjection`, `createOptimistic`, and `createOptimisticStore`.
 
-These have been replaced by a preload mechanism. This allows link hover preloads (as the preload function can be run as much as wanted without worry about reactivity). It support deduping/query APIs which give more control over how things are cached. It also addresses TS issues with getting the right types in the Component without `typeof` checks.
+```jsx
+const user = createMemo(() => getUser(params.id));
+const [todos, setTodos] = createOptimisticStore(() => getTodos(), []);
+```
 
-That being said you can reproduce the old pattern largely by turning off preloads at the router level and then injecting your own Context:
+### `query()` stays the source of truth
 
-```js
-import { lazy } from "solid-js";
-import { Route } from "@solidjs/router";
+Continue using `query()` for cached reads and invalidation, but consume the results directly through Solid 2's async primitives instead of router-specific wrappers.
 
-const User = lazy(() => import("./pages/users/[id].js"));
+### `action()` lifecycle hooks changed
 
-// preload function
-function preloadUser({ params, location }) {
-  const [user] = createResource(() => params.id, fetchUser);
-  return user;
-}
+The action API is now centered around instance methods:
 
-// Pass it in the route definition
-<Router preload={false}>
-  <Route path="/users/:id" component={User} preload={preloadUser} />
-</Router>;
+```jsx
+const saveTodo = action(async (todo) => {
+  await api.saveTodo(todo);
+  return { ok: true, todo };
+}, "save-todo")
+  .onSubmit(todo => {
+    // optimistic write
+  })
+  .onSettled(submission => {
+    // observe settled result or retry state
+  });
 ```
 
-And then in your component taking the page props and putting them in a Context.
+- Use `onSubmit(...)` for owner-scoped optimistic/pre-submit work.
+- Use `onSettled(...)` for owner-scoped observation of completed submissions.
+- Use returned values for expected application-level results. Thrown errors are still captured on `Submission.error` when something fails unexpectedly.
 
-```js
-function User(props) {
-  <UserContext.Provider value={props.data}>
-    {/* my component content  */}
-  </UserContext.Provider>;
-}
+### `useSubmissions()` is the submission API
 
-// Somewhere else
-function UserDetails() {
-  const user = useContext(UserContext);
-  // render stuff
-}
+Submissions are now settled history, not in-flight mutation state. Read them through `useSubmissions()` and select the latest entry with `at(-1)` when needed.
+
+```jsx
+const submissions = useSubmissions(saveTodo);
+const latestSubmission = submissions.at(-1);
 ```
 
 ## SPAs in Deployed Environments

package/dist/components.jsx

@@ -1,16 +1,24 @@
-import { createMemo, mergeProps, splitProps } from "solid-js";
+import { createMemo, merge, omit } from "solid-js";
 import { useHref, useLocation, useNavigate, useResolvedPath } from "./routing.js";
 import { normalizePath } from "./utils.js";
+function toClassName(value) {
+    if (!value)
+        return "";
+    if (typeof value === "string" || typeof value === "number")
+        return String(value);
+    if (Array.isArray(value))
+        return value.map(toClassName).filter(Boolean).join(" ");
+    if (typeof value === "object") {
+        return Object.entries(value)
+            .filter(([, enabled]) => enabled)
+            .map(([name]) => name)
+            .join(" ");
+    }
+    return "";
+}
 export function A(props) {
-    props = mergeProps({ inactiveClass: "inactive", activeClass: "active" }, props);
-    const [, rest] = splitProps(props, [
-        "href",
-        "state",
-        "class",
-        "activeClass",
-        "inactiveClass",
-        "end"
-    ]);
+    props = merge({ inactiveClass: "inactive", activeClass: "active" }, props);
+    const rest = omit(props, "href", "state", "class", "activeClass", "inactiveClass", "end");
     const to = useResolvedPath(() => props.href);
     const href = useHref(to);
     const location = useLocation();
@@ -22,12 +30,10 @@ export function A(props) {
         const loc = decodeURI(normalizePath(location.pathname).toLowerCase());
         return [props.end ? path === loc : loc.startsWith(path + "/") || loc === path, path === loc];
     });
-    return (<a {...rest} href={href() || props.href} state={JSON.stringify(props.state)} classList={{
-            ...(props.class && { [props.class]: true }),
-            [props.inactiveClass]: !isActive()[0],
-            [props.activeClass]: isActive()[0],
-            ...rest.classList
-        }} link aria-current={isActive()[1] ? "page" : undefined}/>);
+    const className = createMemo(() => [toClassName(props.class), isActive()[0] ? props.activeClass : props.inactiveClass]
+        .filter(Boolean)
+        .join(" "));
+    return (<a {...rest} href={href() || props.href} state={JSON.stringify(props.state)} class={className()} link aria-current={isActive()[1] ? "page" : undefined}/>);
 }
 export function Navigate(props) {
     const navigate = useNavigate();

package/dist/data/action.d.ts

@@ -1,17 +1,19 @@
 import { JSX } from "solid-js";
-import type { Submission, SubmissionStub, NarrowResponse } from "../types.js";
+import type { Submission, NarrowResponse } from "../types.js";
 export type Action<T extends Array<any>, U, V = T> = (T extends [FormData | URLSearchParams] | [] ? JSX.SerializableAttributeValue : unknown) & ((...vars: T) => Promise<NarrowResponse<U>>) & {
     url: string;
     with<A extends any[], B extends any[]>(this: (this: any, ...args: [...A, ...B]) => Promise<NarrowResponse<U>>, ...args: A): Action<B, U, V>;
+    onSubmit(hook: (...args: V extends Array<any> ? V : T) => void): Action<T, U, V>;
+    onSettled(hook: (submission: Submission<V extends Array<any> ? V : T, NarrowResponse<U>>) => void): Action<T, U, V>;
 };
-export declare const actions: Map<string, Action<any, any, any>>;
-export declare function useSubmissions<T extends Array<any>, U, V>(fn: Action<T, U, V>, filter?: (input: V) => boolean): Submission<T, NarrowResponse<U>>[] & {
-    pending: boolean;
+type ActionFactory = {
+    <T extends Array<any>, U = void>(fn: (...args: T) => Promise<U>, name?: string): Action<T, U>;
+    <T extends Array<any>, U = void>(fn: (...args: T) => Promise<U>, options?: {
+        name?: string;
+    }): Action<T, U>;
 };
-export declare function useSubmission<T extends Array<any>, U, V>(fn: Action<T, U, V>, filter?: (input: V) => boolean): Submission<T, NarrowResponse<U>> | SubmissionStub;
+export declare const actions: Map<string, Action<any, any, any>>;
+export declare function useSubmissions<T extends Array<any>, U, V>(fn: Action<T, U, V>, filter?: (input: V) => boolean): Submission<V, NarrowResponse<U>>[];
 export declare function useAction<T extends Array<any>, U, V>(action: Action<T, U, V>): (...args: Parameters<Action<T, U, V>>) => Promise<NarrowResponse<U>>;
-export declare function action<T extends Array<any>, U = void>(fn: (...args: T) => Promise<U>, name?: string): Action<T, U>;
-export declare function action<T extends Array<any>, U = void>(fn: (...args: T) => Promise<U>, options?: {
-    name?: string;
-    onComplete?: (s: Submission<T, U>) => void;
-}): Action<T, U>;
+export declare const action: ActionFactory;
+export {};

package/dist/data/action.js

@@ -1,8 +1,11 @@
-import { $TRACK, createMemo, createSignal, onCleanup, getOwner } from "solid-js";
-import { isServer } from "solid-js/web";
+import { $TRACK, action as createSolidAction, createMemo, onCleanup, getOwner } from "solid-js";
+import { isServer } from "@solidjs/web";
 import { useRouter } from "../routing.js";
-import { mockBase } from "../utils.js";
+import { mockBase, setFunctionName } from "../utils.js";
 import { cacheKeyOp, hashKey, revalidate, query } from "./query.js";
+const submitHooksSymbol = Symbol("routerActionSubmitHooks");
+const settledHooksSymbol = Symbol("routerActionSettledHooks");
+const invokeSymbol = Symbol("routerActionInvoke");
 export const actions = /* #__PURE__ */ new Map();
 export function useSubmissions(fn, filter) {
     const router = useRouter();
@@ -11,8 +14,6 @@ export function useSubmissions(fn, filter) {
         get(_, property) {
             if (property === $TRACK)
                 return subs();
-            if (property === "pending")
-                return subs().some(sub => !sub.result);
             return subs()[property];
         },
         has(_, property) {
@@ -20,101 +21,105 @@ export function useSubmissions(fn, filter) {
         }
     });
 }
-export function useSubmission(fn, filter) {
-    const submissions = useSubmissions(fn, filter);
-    return new Proxy({}, {
-        get(_, property) {
-            if ((submissions.length === 0 && property === "clear") || property === "retry")
-                return () => { };
-            return submissions[submissions.length - 1]?.[property];
-        }
-    });
-}
 export function useAction(action) {
     const r = useRouter();
     return (...args) => action.apply({ r }, args);
 }
-export function action(fn, options = {}) {
-    function mutate(...variables) {
+function actionImpl(fn, options = {}) {
+    async function invoke(variables, current) {
         const router = this.r;
         const form = this.f;
-        const p = (router.singleFlight && fn.withOptions
+        const submitHooks = current[submitHooksSymbol];
+        const settledHooks = current[settledHooksSymbol];
+        const runMutation = () => (router.singleFlight && fn.withOptions
             ? fn.withOptions({ headers: { "X-Single-Flight": "true" } })
             : fn)(...variables);
-        const [result, setResult] = createSignal();
-        let submission;
-        function handler(error) {
-            return async (res) => {
-                const result = await handleResponse(res, error, router.navigatorFactory());
-                let retry = null;
-                o.onComplete?.({
-                    ...submission,
-                    result: result?.data,
-                    error: result?.error,
-                    pending: false,
-                    retry() {
-                        return retry = submission.retry();
-                    }
-                });
-                if (retry)
-                    return retry;
-                if (!result)
-                    return submission.clear();
-                setResult(result);
-                if (result.error && !form)
-                    throw result.error;
-                return result.data;
-            };
-        }
-        router.submissions[1](s => [
-            ...s,
-            (submission = {
-                input: variables,
-                url,
-                get result() {
-                    return result()?.data;
-                },
-                get error() {
-                    return result()?.error;
-                },
-                get pending() {
-                    return !result();
-                },
-                clear() {
-                    router.submissions[1](v => v.filter(i => i !== submission));
-                },
-                retry() {
-                    setResult(undefined);
-                    const p = fn(...variables);
-                    return p.then(handler(), handler(true));
+        const run = createSolidAction(async function* (context) {
+            context.optimistic?.();
+            try {
+                const value = await context.call();
+                yield;
+                return { error: false, value };
+            }
+            catch (error) {
+                yield;
+                return { error: true, value: error };
+            }
+        });
+        const settled = await settleActionResult(run({
+            call: runMutation,
+            optimistic: submitHooks.size
+                ? () => {
+                    for (const hook of submitHooks.values())
+                        hook(...variables);
                 }
-            })
-        ]);
-        return p.then(handler(), handler(true));
+                : undefined
+        }));
+        const response = await handleResponse(settled.value, settled.error, router.navigatorFactory());
+        if (!response)
+            return undefined;
+        let submission;
+        submission = {
+            input: variables,
+            url,
+            result: response.data,
+            error: response.error,
+            clear() {
+                router.submissions[1](entries => entries.filter(entry => entry !== submission));
+            },
+            retry() {
+                submission.clear();
+                return current[invokeSymbol].call({ r: router, f: form }, variables, current);
+            }
+        };
+        router.submissions[1](entries => [...entries, submission]);
+        for (const hook of settledHooks.values())
+            hook(submission);
+        if (response.error && !form)
+            throw response.error;
+        return response.data;
     }
     const o = typeof options === "string" ? { name: options } : options;
-    const url = fn.url ||
-        (o.name && `https://action/${o.name}`) ||
-        (!isServer ? `https://action/${hashString(fn.toString())}` : "");
-    mutate.base = url;
-    return toAction(mutate, url);
+    const name = o.name || (!isServer ? String(hashString(fn.toString())) : undefined);
+    const url = fn.url || (name && `https://action/${name}`) || "";
+    const wrapped = toAction(invoke, url);
+    if (name)
+        setFunctionName(wrapped, name);
+    return wrapped;
 }
-function toAction(fn, url) {
+export const action = actionImpl;
+function toAction(invoke, url, boundArgs = [], base = url, submitHooks = new Map(), settledHooks = new Map()) {
+    const fn = function (...args) {
+        return invoke.call(this, [...boundArgs, ...args], fn);
+    };
     fn.toString = () => {
         if (!url)
             throw new Error("Client Actions need explicit names if server rendered");
         return url;
     };
     fn.with = function (...args) {
-        const newFn = function (...passedArgs) {
-            return fn.call(this, ...args, ...passedArgs);
-        };
-        newFn.base = fn.base;
         const uri = new URL(url, mockBase);
         uri.searchParams.set("args", hashKey(args));
-        return toAction(newFn, (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search);
+        const next = toAction(invoke, (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search, [...boundArgs, ...args], base, submitHooks, settledHooks);
+        return next;
+    };
+    fn.onSubmit = function (hook) {
+        const id = Symbol("actionOnSubmitHook");
+        submitHooks.set(id, hook);
+        getOwner() && onCleanup(() => submitHooks.delete(id));
+        return this;
+    };
+    fn.onSettled = function (hook) {
+        const id = Symbol("actionOnSettledHook");
+        settledHooks.set(id, hook);
+        getOwner() && onCleanup(() => settledHooks.delete(id));
+        return this;
     };
     fn.url = url;
+    fn.base = base;
+    fn[submitHooksSymbol] = submitHooks;
+    fn[settledHooksSymbol] = settledHooks;
+    fn[invokeSymbol] = invoke;
     if (!isServer) {
         actions.set(url, fn);
         getOwner() && onCleanup(() => actions.delete(url));
@@ -122,6 +127,21 @@ function toAction(fn, url) {
     return fn;
 }
 const hashString = (s) => s.split("").reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0);
+async function settleActionResult(result) {
+    const value = result;
+    if (value && typeof value.then === "function") {
+        return result.then(value => value);
+    }
+    if (value && typeof value.next === "function") {
+        const iterator = value;
+        let next = await iterator.next();
+        while (!next.done) {
+            next = await iterator.next();
+        }
+        return next.value;
+    }
+    return result;
+}
 async function handleResponse(response, error, navigate) {
     let data;
     let custom;

package/dist/data/events.d.ts

@@ -1,2 +1,9 @@
 import type { RouterContext } from "../types.js";
-export declare function setupNativeEvents(preload?: boolean, explicitLinks?: boolean, actionBase?: string, transformUrl?: (url: string) => string): (router: RouterContext) => void;
+type NativeEventConfig = {
+    preload?: boolean;
+    explicitLinks?: boolean;
+    actionBase?: string;
+    transformUrl?: (url: string) => string;
+};
+export declare function setupNativeEvents({ preload, explicitLinks, actionBase, transformUrl }?: NativeEventConfig): (router: RouterContext) => void;
+export {};