@solidjs/router 0.15.4 → 0.16.0

package/dist/data/response.d.ts

@@ -1,4 +1,4 @@
-import type { RouterResponseInit, CustomResponse } from "../types";
+import type { RouterResponseInit, CustomResponse } from "../types.js";
 export declare function redirect(url: string, init?: number | RouterResponseInit): CustomResponse<never>;
 export declare function reload(init?: RouterResponseInit): CustomResponse<never>;
 export declare function json<T>(data: T, init?: RouterResponseInit): CustomResponse<T>;

package/dist/index.js

@@ -237,8 +237,18 @@ function expandOptionals(pattern) {
   }
   return expandOptionals(suffix).reduce((results, expansion) => [...results, ...prefixes.map(p => p + expansion)], []);
 }
+function setFunctionName(obj, value) {
+  Object.defineProperty(obj, "name", {
+    value,
+    writable: false,
+    configurable: false
+  });
+  return obj;
+}
 
 const MAX_REDIRECTS = 100;
+
+/** Consider this API opaque and internal. It is likely to change in the future. */
 const RouterContextObj = createContext();
 const RouteContextObj = createContext();
 const useRouter = () => invariant(useContext(RouterContextObj), "<A> and 'use' router primitives can be only used inside a Route.");
@@ -1323,8 +1333,10 @@ function action(fn, options = {}) {
   const o = typeof options === "string" ? {
     name: options
   } : options;
-  const url = fn.url || o.name && `https://action/${o.name}` || (!isServer ? `https://action/${hashString(fn.toString())}` : "");
+  const name = o.name || (!isServer ? String(hashString(fn.toString())) : undefined);
+  const url = fn.url || name && `https://action/${name}` || "";
   mutate.base = url;
+  if (name) setFunctionName(mutate, name);
   return toAction(mutate, url);
 }
 function toAction(fn, url) {
@@ -1386,7 +1398,12 @@ async function handleResponse(response, error, navigate) {
   } : undefined;
 }
 
-function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "/_server", transformUrl) {
+function setupNativeEvents({
+  preload = true,
+  explicitLinks = false,
+  actionBase = "/_server",
+  transformUrl
+} = {}) {
   return router => {
     const basePath = router.base.path();
     const navigateFromRoute = router.navigatorFactory(router.base);
@@ -1528,7 +1545,12 @@ function Router(props) {
         });
       }
     })),
-    create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase, props.transformUrl),
+    create: setupNativeEvents({
+      preload: props.preload,
+      explicitLinks: props.explicitLinks,
+      actionBase: props.actionBase,
+      transformUrl: props.transformUrl
+    }),
     utils: {
       go: delta => window.history.go(delta),
       beforeLeave
@@ -1569,7 +1591,11 @@ function HashRouter(props) {
       saveCurrentDepth();
     },
     init: notify => bindEvent(window, "hashchange", notifyIfNotBlocked(notify, delta => !beforeLeave.confirm(delta && delta < 0 ? delta : getSource()))),
-    create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase),
+    create: setupNativeEvents({
+      preload: props.preload,
+      explicitLinks: props.explicitLinks,
+      actionBase: props.actionBase
+    }),
     utils: {
       go: delta => window.history.go(delta),
       renderPath: path => `#${path}`,
@@ -1631,7 +1657,11 @@ function MemoryRouter(props) {
     get: memoryHistory.get,
     set: memoryHistory.set,
     init: memoryHistory.listen,
-    create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase),
+    create: setupNativeEvents({
+      preload: props.preload,
+      explicitLinks: props.explicitLinks,
+      actionBase: props.actionBase
+    }),
     utils: {
       go: memoryHistory.go
     }
@@ -1715,6 +1745,7 @@ function createAsync(fn, options) {
   let prev = () => !resource || resource.state === "unresolved" ? undefined : resource.latest;
   [resource] = createResource(() => subFetch(fn, catchError(() => untrack(prev), () => undefined)), v => v, options);
   const resultAccessor = () => resource();
+  if (options?.name) setFunctionName(resultAccessor, options.name);
   Object.defineProperty(resultAccessor, "latest", {
     get() {
       return resource.latest;
@@ -1845,4 +1876,4 @@ function json(data, init = {}) {
   return response;
 }
 
-export { A, HashRouter, MemoryRouter, Navigate, Route, Router, StaticRouter, mergeSearchString as _mergeSearchString, action, cache, createAsync, createAsyncStore, createBeforeLeave, createMemoryHistory, createRouter, json, keepDepth, notifyIfNotBlocked, query, redirect, reload, revalidate, saveCurrentDepth, useAction, useBeforeLeave, useCurrentMatches, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, usePreloadRoute, useResolvedPath, useSearchParams, useSubmission, useSubmissions };
+export { A, HashRouter, MemoryRouter, Navigate, Route, Router, RouterContextObj as RouterContext, StaticRouter, mergeSearchString as _mergeSearchString, action, cache, createAsync, createAsyncStore, createBeforeLeave, createMemoryHistory, createRouter, json, keepDepth, notifyIfNotBlocked, query, redirect, reload, revalidate, saveCurrentDepth, useAction, useBeforeLeave, useCurrentMatches, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, usePreloadRoute, useResolvedPath, useSearchParams, useSubmission, useSubmissions };

package/dist/routers/HashRouter.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from "solid-js";
-import type { BaseRouterProps } from "./components.js";
+import type { BaseRouterProps } from "./components.jsx";
 export declare function hashParser(str: string): string;
 export type HashRouterProps = BaseRouterProps & {
     actionBase?: string;

package/dist/routers/createRouter.d.ts

@@ -1,4 +1,4 @@
-import type { LocationChange, RouterContext, RouterUtils } from "../types.ts";
+import type { LocationChange, RouterContext, RouterUtils } from "../types.js";
 export declare function createRouter(config: {
     get: () => string | LocationChange;
     set: (next: LocationChange) => void;

package/dist/src/components.d.ts

@@ -0,0 +1,31 @@
+import type { JSX } from "solid-js";
+import type { Location, Navigator } from "./types.js";
+declare module "solid-js" {
+    namespace JSX {
+        interface AnchorHTMLAttributes<T> {
+            state?: string;
+            noScroll?: boolean;
+            replace?: boolean;
+            preload?: boolean;
+            link?: boolean;
+        }
+    }
+}
+export interface AnchorProps extends Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, "state"> {
+    href: string;
+    replace?: boolean | undefined;
+    noScroll?: boolean | undefined;
+    state?: unknown | undefined;
+    inactiveClass?: string | undefined;
+    activeClass?: string | undefined;
+    end?: boolean | undefined;
+}
+export declare function A(props: AnchorProps): JSX.Element;
+export interface NavigateProps {
+    href: ((args: {
+        navigate: Navigator;
+        location: Location;
+    }) => string) | string;
+    state?: unknown;
+}
+export declare function Navigate(props: NavigateProps): null;

package/dist/src/components.jsx

@@ -0,0 +1,39 @@
+import { createMemo, mergeProps, splitProps } from "solid-js";
+import { useHref, useLocation, useNavigate, useResolvedPath } from "./routing.js";
+import { normalizePath } from "./utils.js";
+export function A(props) {
+    props = mergeProps({ inactiveClass: "inactive", activeClass: "active" }, props);
+    const [, rest] = splitProps(props, [
+        "href",
+        "state",
+        "class",
+        "activeClass",
+        "inactiveClass",
+        "end"
+    ]);
+    const to = useResolvedPath(() => props.href);
+    const href = useHref(to);
+    const location = useLocation();
+    const isActive = createMemo(() => {
+        const to_ = to();
+        if (to_ === undefined)
+            return [false, false];
+        const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
+        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}/>);
+}
+export function Navigate(props) {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const { href, state } = props;
+    const path = typeof href === "function" ? href({ navigate, location }) : href;
+    navigate(path, { replace: true, state });
+    return null;
+}

package/dist/src/data/action.d.ts

@@ -0,0 +1,17 @@
+import { JSX } from "solid-js";
+import type { Submission, SubmissionStub, 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>;
+};
+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;
+};
+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 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>;

package/dist/src/data/action.js

@@ -0,0 +1,163 @@
+import { $TRACK, createMemo, createSignal, onCleanup, getOwner } from "solid-js";
+import { isServer } from "solid-js/web";
+import { useRouter } from "../routing.js";
+import { mockBase, setFunctionName } from "../utils.js";
+import { cacheKeyOp, hashKey, revalidate, query } from "./query.js";
+export const actions = /* #__PURE__ */ new Map();
+export function useSubmissions(fn, filter) {
+    const router = useRouter();
+    const subs = createMemo(() => router.submissions[0]().filter(s => s.url === fn.base && (!filter || filter(s.input))));
+    return new Proxy([], {
+        get(_, property) {
+            if (property === $TRACK)
+                return subs();
+            if (property === "pending")
+                return subs().some(sub => !sub.result);
+            return subs()[property];
+        },
+        has(_, property) {
+            return property in subs();
+        }
+    });
+}
+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) {
+        const router = this.r;
+        const form = this.f;
+        const p = (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));
+                }
+            })
+        ]);
+        return p.then(handler(), handler(true));
+    }
+    const o = typeof options === "string" ? { name: options } : options;
+    const name = o.name || (!isServer ? String(hashString(fn.toString())) : undefined);
+    const url = fn.url || (name && `https://action/${name}`) || "";
+    mutate.base = url;
+    if (name)
+        setFunctionName(mutate, name);
+    return toAction(mutate, url);
+}
+function toAction(fn, url) {
+    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);
+    };
+    fn.url = url;
+    if (!isServer) {
+        actions.set(url, fn);
+        getOwner() && onCleanup(() => actions.delete(url));
+    }
+    return fn;
+}
+const hashString = (s) => s.split("").reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0);
+async function handleResponse(response, error, navigate) {
+    let data;
+    let custom;
+    let keys;
+    let flightKeys;
+    if (response instanceof Response) {
+        if (response.headers.has("X-Revalidate"))
+            keys = response.headers.get("X-Revalidate").split(",");
+        if (response.customBody) {
+            data = custom = await response.customBody();
+            if (response.headers.has("X-Single-Flight")) {
+                data = data._$value;
+                delete custom._$value;
+                flightKeys = Object.keys(custom);
+            }
+        }
+        if (response.headers.has("Location")) {
+            const locationUrl = response.headers.get("Location") || "/";
+            if (locationUrl.startsWith("http")) {
+                window.location.href = locationUrl;
+            }
+            else {
+                navigate(locationUrl);
+            }
+        }
+    }
+    else if (error)
+        return { error: response };
+    else
+        data = response;
+    // invalidate
+    cacheKeyOp(keys, entry => (entry[0] = 0));
+    // set cache
+    flightKeys && flightKeys.forEach(k => query.set(k, custom[k]));
+    // trigger revalidation
+    await revalidate(keys, false);
+    return data != null ? { data } : undefined;
+}

package/dist/src/data/action.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/data/action.spec.js

@@ -0,0 +1,297 @@
+import { createRoot } from "solid-js";
+import { vi } from "vitest";
+import { action, useAction, useSubmission, useSubmissions, actions } from "./action.js";
+import { createMockRouter } from "../../test/helpers.js";
+vi.mock("../src/utils.js", () => ({
+    mockBase: "https://action"
+}));
+let mockRouterContext;
+vi.mock("../routing.js", () => ({
+    useRouter: () => mockRouterContext,
+    createRouterContext: () => createMockRouter(),
+    RouterContextObj: {},
+    RouteContextObj: {},
+    useRoute: () => mockRouterContext.base,
+    useResolvedPath: () => "/",
+    useHref: () => "/",
+    useNavigate: () => vi.fn(),
+    useLocation: () => mockRouterContext.location,
+    useRouteData: () => undefined,
+    useMatch: () => null,
+    useParams: () => ({}),
+    useSearchParams: () => [{}, vi.fn()],
+    useIsRouting: () => false,
+    usePreloadRoute: () => vi.fn(),
+    useBeforeLeave: () => vi.fn()
+}));
+describe("action", () => {
+    beforeEach(() => {
+        actions.clear();
+        mockRouterContext = createMockRouter();
+    });
+    test("should create an action function with `url` property", () => {
+        const testAction = action(async (data) => {
+            return `processed: ${data}`;
+        }, "test-action");
+        expect(typeof testAction).toBe("function");
+        expect(testAction.url).toBe("https://action/test-action");
+    });
+    test("should create action with auto-generated hash when no `name` provided", () => {
+        const testFn = async (data) => `result: ${data}`;
+        const testAction = action(testFn);
+        expect(testAction.url).toMatch(/^https:\/\/action\/-?\d+$/);
+        expect(testAction.name).toMatch(/^-?\d+$/);
+    });
+    test("should use it as `name` when `options` are provided as a string", () => {
+        const testFn = async (data) => `result: ${data}`;
+        const testAction = action(testFn, "test-action");
+        expect(testAction.url).toMatch("https://action/test-action");
+        expect(testAction.name).toBe("test-action");
+    });
+    test("should use `name` when provided in object options", () => {
+        const testFn = async (data) => `result: ${data}`;
+        const testAction = action(testFn, { name: "test-action" });
+        expect(testAction.url).toMatch("https://action/test-action");
+        expect(testAction.name).toBe("test-action");
+    });
+    test("should register action in actions map", () => {
+        const testAction = action(async () => "result", "register-test");
+        expect(actions.has(testAction.url)).toBe(true);
+        expect(actions.get(testAction.url)).toBe(testAction);
+    });
+    test("should support `.with` method for currying arguments", () => {
+        const baseAction = action(async (prefix, data) => {
+            return `${prefix}: ${data}`;
+        }, "with-test");
+        const curriedAction = baseAction.with("PREFIX");
+        expect(typeof curriedAction).toBe("function");
+        expect(curriedAction.url).toMatch(/with-test\?args=/);
+    });
+    test("should execute action and create submission", async () => {
+        return createRoot(async () => {
+            const testAction = action(async (data) => {
+                return `processed: ${data}`;
+            }, "execute-test");
+            const boundAction = useAction(testAction);
+            const promise = boundAction("test-data");
+            const submissions = mockRouterContext.submissions[0]();
+            expect(submissions).toHaveLength(1);
+            expect(submissions[0].input).toEqual(["test-data"]);
+            expect(submissions[0].pending).toBe(true);
+            const result = await promise;
+            expect(result).toBe("processed: test-data");
+        });
+    });
+    test("should handle action errors", async () => {
+        return createRoot(async () => {
+            const errorAction = action(async () => {
+                throw new Error("Test error");
+            }, "error-test");
+            const boundAction = useAction(errorAction);
+            try {
+                await boundAction();
+            }
+            catch (error) {
+                expect(error.message).toBe("Test error");
+            }
+            const submissions = mockRouterContext.submissions[0]();
+            expect(submissions[0].error.message).toBe("Test error");
+        });
+    });
+    test("should support `onComplete` callback", async () => {
+        return createRoot(async () => {
+            const onComplete = vi.fn();
+            const testAction = action(async (data) => `result: ${data}`, {
+                name: "callback-test",
+                onComplete
+            });
+            const boundAction = useAction(testAction);
+            await boundAction("test");
+            expect(onComplete).toHaveBeenCalledWith(expect.objectContaining({
+                result: "result: test",
+                error: undefined,
+                pending: false
+            }));
+        });
+    });
+});
+describe("useSubmissions", () => {
+    beforeEach(() => {
+        mockRouterContext = createMockRouter();
+    });
+    test("should return submissions for specific action", () => {
+        return createRoot(() => {
+            const testAction = action(async () => "result", "submissions-test");
+            mockRouterContext.submissions[1](submissions => [
+                ...submissions,
+                {
+                    input: ["data1"],
+                    url: testAction.url,
+                    result: "result1",
+                    error: undefined,
+                    pending: false,
+                    clear: vi.fn(),
+                    retry: vi.fn()
+                },
+                {
+                    input: ["data2"],
+                    url: testAction.url,
+                    result: undefined,
+                    error: undefined,
+                    pending: true,
+                    clear: vi.fn(),
+                    retry: vi.fn()
+                }
+            ]);
+            const submissions = useSubmissions(testAction);
+            expect(submissions).toHaveLength(2);
+            expect(submissions[0].input).toEqual(["data1"]);
+            expect(submissions[1].input).toEqual(["data2"]);
+            expect(submissions.pending).toBe(true);
+        });
+    });
+    test("should filter submissions when filter function provided", () => {
+        return createRoot(() => {
+            const testAction = action(async (data) => data, "filter-test");
+            mockRouterContext.submissions[1](submissions => [
+                ...submissions,
+                {
+                    input: ["keep"],
+                    url: testAction.url,
+                    result: "result1",
+                    error: undefined,
+                    pending: false,
+                    clear: vi.fn(),
+                    retry: vi.fn()
+                },
+                {
+                    input: ["skip"],
+                    url: testAction.url,
+                    result: "result2",
+                    error: undefined,
+                    pending: false,
+                    clear: vi.fn(),
+                    retry: vi.fn()
+                }
+            ]);
+            const submissions = useSubmissions(testAction, input => input[0] === "keep");
+            expect(submissions).toHaveLength(1);
+            expect(submissions[0].input).toEqual(["keep"]);
+        });
+    });
+    test("should return pending false when no pending submissions", () => {
+        return createRoot(() => {
+            const testAction = action(async () => "result", "no-pending-test");
+            mockRouterContext.submissions[1](submissions => [
+                ...submissions,
+                {
+                    input: ["data"],
+                    url: testAction.url,
+                    result: "result",
+                    error: undefined,
+                    pending: false,
+                    clear: vi.fn(),
+                    retry: vi.fn()
+                }
+            ]);
+            const submissions = useSubmissions(testAction);
+            expect(submissions.pending).toBe(false);
+        });
+    });
+});
+describe("useSubmission", () => {
+    beforeEach(() => {
+        mockRouterContext = createMockRouter();
+    });
+    test("should return latest submission for action", () => {
+        return createRoot(() => {
+            const testAction = action(async () => "result", "latest-test");
+            mockRouterContext.submissions[1](submissions => [
+                ...submissions,
+                {
+                    input: ["data1"],
+                    url: testAction.url,
+                    result: "result1",
+                    error: undefined,
+                    pending: false,
+                    clear: vi.fn(),
+                    retry: vi.fn()
+                },
+                {
+                    input: ["data2"],
+                    url: testAction.url,
+                    result: "result2",
+                    error: undefined,
+                    pending: false,
+                    clear: vi.fn(),
+                    retry: vi.fn()
+                }
+            ]);
+            const submission = useSubmission(testAction);
+            expect(submission.input).toEqual(["data2"]);
+            expect(submission.result).toBe("result2");
+        });
+    });
+    test("should return stub when no submissions exist", () => {
+        return createRoot(() => {
+            const testAction = action(async () => "result", "stub-test");
+            const submission = useSubmission(testAction);
+            expect(submission.clear).toBeDefined();
+            expect(submission.retry).toBeDefined();
+            expect(typeof submission.clear).toBe("function");
+            expect(typeof submission.retry).toBe("function");
+        });
+    });
+    test("should filter submissions when filter function provided", () => {
+        return createRoot(() => {
+            const testAction = action(async (data) => data, "filter-submission-test");
+            mockRouterContext.submissions[1](submissions => [
+                ...submissions,
+                {
+                    input: ["skip"],
+                    url: testAction.url,
+                    result: "result1",
+                    error: undefined,
+                    pending: false,
+                    clear: vi.fn(),
+                    retry: vi.fn()
+                },
+                {
+                    input: ["keep"],
+                    url: testAction.url,
+                    result: "result2",
+                    error: undefined,
+                    pending: false,
+                    clear: vi.fn(),
+                    retry: vi.fn()
+                }
+            ]);
+            const submission = useSubmission(testAction, input => input[0] === "keep");
+            expect(submission.input).toEqual(["keep"]);
+            expect(submission.result).toBe("result2");
+        });
+    });
+});
+describe("useAction", () => {
+    beforeEach(() => {
+        mockRouterContext = createMockRouter();
+    });
+    test("should return bound action function", () => {
+        return createRoot(() => {
+            const testAction = action(async (data) => `result: ${data}`, "bound-test");
+            const boundAction = useAction(testAction);
+            expect(typeof boundAction).toBe("function");
+        });
+    });
+    test("should execute action through useAction", async () => {
+        return createRoot(async () => {
+            const testAction = action(async (data) => {
+                await new Promise(resolve => setTimeout(resolve, 1));
+                return `result: ${data}`;
+            }, "context-test");
+            const boundAction = useAction(testAction);
+            const result = await boundAction("test-data");
+            expect(result).toBe("result: test-data");
+        });
+    });
+});