@solidjs/router 0.15.4 → 0.16.0

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

@@ -0,0 +1,567 @@
+import { createRoot } from "solid-js";
+import { vi } from "vitest";
+import { setupNativeEvents } from "./events.js";
+import { createMockRouter } from "../../test/helpers.js";
+vi.mock("../src/data/action.js", () => ({
+    actions: new Map()
+}));
+import { actions } from "./action.js";
+vi.mock("../src/utils.js", () => ({
+    mockBase: "https://action"
+}));
+class MockNode {
+    nodeName;
+    namespaceURI;
+    hasAttribute;
+    getAttribute;
+    href;
+    target;
+    constructor(tagName, attributes = {}) {
+        this.nodeName = tagName.toUpperCase();
+        this.namespaceURI = tagName === "a" && attributes.svg ? "http://www.w3.org/2000/svg" : null;
+        this.hasAttribute = (name) => name in attributes;
+        this.getAttribute = (name) => attributes[name] || null;
+        this.href = attributes.href || "";
+        this.target = attributes.target || "";
+        if (tagName === "a" && attributes.svg) {
+            this.href = { baseVal: attributes.href || "" };
+            this.target = { baseVal: attributes.target || "" };
+        }
+    }
+}
+global.Node = MockNode;
+const createMockElement = (tagName, attributes = {}) => {
+    return new MockNode(tagName, attributes);
+};
+const createMockEvent = (type, target, options = {}) => {
+    return {
+        type,
+        target,
+        defaultPrevented: false,
+        button: options.button || 0,
+        metaKey: options.metaKey || false,
+        altKey: options.altKey || false,
+        ctrlKey: options.ctrlKey || false,
+        shiftKey: options.shiftKey || false,
+        submitter: options.submitter || null,
+        preventDefault: vi.fn(),
+        composedPath: () => options.path || [target]
+    };
+};
+describe("setupNativeEvents", () => {
+    let mockRouter;
+    let addEventListener;
+    let removeEventListener;
+    let mockWindow;
+    let originalDocument;
+    let originalWindow;
+    beforeEach(() => {
+        mockRouter = createMockRouter();
+        addEventListener = vi.fn();
+        removeEventListener = vi.fn();
+        actions.clear();
+        originalDocument = global.document;
+        global.document = {
+            addEventListener,
+            removeEventListener,
+            baseURI: "https://example.com/"
+        };
+        originalWindow = global.window;
+        mockWindow = {
+            location: { origin: "https://example.com" }
+        };
+        global.window = mockWindow;
+        global.URL = class MockURL {
+            origin;
+            pathname;
+            search;
+            hash;
+            constructor(url, base) {
+                const fullUrl = base ? new URL(url, base).href : url;
+                const parsed = new URL(fullUrl);
+                this.origin = parsed.origin;
+                this.pathname = parsed.pathname;
+                this.search = parsed.search;
+                this.hash = parsed.hash;
+            }
+        };
+    });
+    afterEach(() => {
+        global.document = originalDocument;
+        global.window = originalWindow;
+        vi.clearAllMocks();
+    });
+    test("should set up default event listeners", () => {
+        return createRoot(() => {
+            setupNativeEvents()(mockRouter);
+            expect(addEventListener).toHaveBeenCalledWith("click", expect.any(Function));
+            expect(addEventListener).toHaveBeenCalledWith("submit", expect.any(Function));
+            expect(addEventListener).toHaveBeenCalledWith("mousemove", expect.any(Function), {
+                passive: true
+            });
+            expect(addEventListener).toHaveBeenCalledWith("focusin", expect.any(Function), {
+                passive: true
+            });
+            expect(addEventListener).toHaveBeenCalledWith("touchstart", expect.any(Function), {
+                passive: true
+            });
+        });
+    });
+    test("should skip preload listeners when preload disabled", () => {
+        return createRoot(() => {
+            setupNativeEvents({ preload: false })(mockRouter);
+            expect(addEventListener).toHaveBeenCalledWith("click", expect.any(Function));
+            expect(addEventListener).toHaveBeenCalledWith("submit", expect.any(Function));
+            expect(addEventListener).not.toHaveBeenCalledWith("mousemove", expect.any(Function), {
+                passive: true
+            });
+            expect(addEventListener).not.toHaveBeenCalledWith("focusin", expect.any(Function), {
+                passive: true
+            });
+            expect(addEventListener).not.toHaveBeenCalledWith("touchstart", expect.any(Function), {
+                passive: true
+            });
+        });
+    });
+    test("should clean up event listeners on cleanup", () => {
+        return createRoot(dispose => {
+            setupNativeEvents()(mockRouter);
+            dispose();
+            expect(removeEventListener).toHaveBeenCalledWith("click", expect.any(Function));
+            expect(removeEventListener).toHaveBeenCalledWith("submit", expect.any(Function));
+            expect(removeEventListener).toHaveBeenCalledWith("mousemove", expect.any(Function));
+            expect(removeEventListener).toHaveBeenCalledWith("focusin", expect.any(Function));
+            expect(removeEventListener).toHaveBeenCalledWith("touchstart", expect.any(Function));
+        });
+    });
+});
+describe("anchor link handling", () => {
+    let mockRouter;
+    let clickHandler;
+    let originalDocument;
+    let originalWindow;
+    beforeEach(() => {
+        mockRouter = createMockRouter();
+        originalDocument = global.document;
+        global.document = {
+            addEventListener: (type, handler) => {
+                if (type === "click")
+                    clickHandler = handler;
+            },
+            removeEventListener: vi.fn(),
+            baseURI: "https://example.com/"
+        };
+        originalWindow = global.window;
+        global.window = {
+            location: { origin: "https://example.com" }
+        };
+        global.URL = class MockURL {
+            origin;
+            pathname;
+            search;
+            hash;
+            constructor(url) {
+                if (url.startsWith("/")) {
+                    this.origin = "https://example.com";
+                    this.pathname = url;
+                    this.search = "";
+                    this.hash = "";
+                }
+                else if (url.startsWith("https://example.com")) {
+                    this.origin = "https://example.com";
+                    this.pathname = url.replace("https://example.com", "") || "/";
+                    this.search = "";
+                    this.hash = "";
+                }
+                else {
+                    this.origin = "https://other.com";
+                    this.pathname = "/";
+                    this.search = "";
+                    this.hash = "";
+                }
+            }
+        };
+    });
+    afterEach(() => {
+        global.document = originalDocument;
+        global.window = originalWindow;
+    });
+    test("should handle internal link clicks", () => {
+        return createRoot(() => {
+            const navigateFromRoute = vi.fn();
+            mockRouter.navigatorFactory = () => navigateFromRoute;
+            setupNativeEvents()(mockRouter);
+            const link = createMockElement("a", { href: "/test-page" });
+            const event = createMockEvent("click", link, { path: [link] });
+            clickHandler(event);
+            expect(event.preventDefault).toHaveBeenCalled();
+            expect(navigateFromRoute).toHaveBeenCalledWith("/test-page", {
+                resolve: false,
+                replace: false,
+                scroll: true,
+                state: undefined
+            });
+        });
+    });
+    test("should ignore external link clicks", () => {
+        return createRoot(() => {
+            setupNativeEvents()(mockRouter);
+            const link = createMockElement("a", { href: "https://external.com/page" });
+            const event = createMockEvent("click", link, { path: [link] });
+            clickHandler(event);
+            expect(event.preventDefault).not.toHaveBeenCalled();
+        });
+    });
+    test("should ignore clicks with modifier keys", () => {
+        return createRoot(() => {
+            setupNativeEvents()(mockRouter);
+            const link = createMockElement("a", { href: "/test-page" });
+            const event = createMockEvent("click", link, {
+                path: [link],
+                metaKey: true
+            });
+            clickHandler(event);
+            expect(event.preventDefault).not.toHaveBeenCalled();
+        });
+    });
+    /**
+     * @todo ?
+     */
+    test("should ignore non-zero button clicks", () => {
+        return createRoot(() => {
+            setupNativeEvents()(mockRouter);
+            const link = createMockElement("a", { href: "/test-page" });
+            const event = createMockEvent("click", link, {
+                path: [link],
+                button: 1
+            });
+            clickHandler(event);
+            expect(event.preventDefault).not.toHaveBeenCalled();
+        });
+    });
+    test("should handle replace attribute", () => {
+        return createRoot(() => {
+            const navigateFromRoute = vi.fn();
+            mockRouter.navigatorFactory = () => navigateFromRoute;
+            setupNativeEvents()(mockRouter);
+            const link = createMockElement("a", { href: "/test-page", replace: "true" });
+            const event = createMockEvent("click", link, { path: [link] });
+            clickHandler(event);
+            expect(navigateFromRoute).toHaveBeenCalledWith("/test-page", {
+                resolve: false,
+                replace: true,
+                scroll: true,
+                state: undefined
+            });
+        });
+    });
+    test("should handle noscroll attribute", () => {
+        return createRoot(() => {
+            const navigateFromRoute = vi.fn();
+            mockRouter.navigatorFactory = () => navigateFromRoute;
+            setupNativeEvents()(mockRouter);
+            const link = createMockElement("a", { href: "/test-page", noscroll: "true" });
+            const event = createMockEvent("click", link, { path: [link] });
+            clickHandler(event);
+            expect(navigateFromRoute).toHaveBeenCalledWith("/test-page", {
+                resolve: false,
+                replace: false,
+                scroll: false,
+                state: undefined
+            });
+        });
+    });
+    test("should handle state attribute", () => {
+        return createRoot(() => {
+            const navigateFromRoute = vi.fn();
+            mockRouter.navigatorFactory = () => navigateFromRoute;
+            setupNativeEvents()(mockRouter);
+            const stateData = '{"key":"value"}';
+            const link = createMockElement("a", { href: "/test-page", state: stateData });
+            const event = createMockEvent("click", link, { path: [link] });
+            clickHandler(event);
+            expect(navigateFromRoute).toHaveBeenCalledWith("/test-page", {
+                resolve: false,
+                replace: false,
+                scroll: true,
+                state: { key: "value" }
+            });
+        });
+    });
+    /**
+     * @todo ?
+     */
+    test("should handle SVG links", () => {
+        return createRoot(() => {
+            const navigateFromRoute = vi.fn();
+            mockRouter.navigatorFactory = () => navigateFromRoute;
+            setupNativeEvents()(mockRouter);
+            const link = createMockElement("a", { href: "/test-page", svg: "true" });
+            const event = createMockEvent("click", link, { path: [link] });
+            clickHandler(event);
+            expect(event.preventDefault).toHaveBeenCalled();
+            expect(navigateFromRoute).toHaveBeenCalledWith("/test-page", {
+                resolve: false,
+                replace: false,
+                scroll: true,
+                state: undefined
+            });
+        });
+    });
+    test("should ignore links with download attribute", () => {
+        return createRoot(() => {
+            setupNativeEvents()(mockRouter);
+            const link = createMockElement("a", { href: "/test-page", download: "file.pdf" });
+            const event = createMockEvent("click", link, { path: [link] });
+            clickHandler(event);
+            expect(event.preventDefault).not.toHaveBeenCalled();
+        });
+    });
+    test("should ignore links with external rel", () => {
+        return createRoot(() => {
+            setupNativeEvents()(mockRouter);
+            const link = createMockElement("a", { href: "/test-page", rel: "external" });
+            const event = createMockEvent("click", link, { path: [link] });
+            clickHandler(event);
+            expect(event.preventDefault).not.toHaveBeenCalled();
+        });
+    });
+    test("should ignore links with target", () => {
+        return createRoot(() => {
+            setupNativeEvents()(mockRouter);
+            const link = createMockElement("a", { href: "/test-page", target: "_blank" });
+            const event = createMockEvent("click", link, { path: [link] });
+            clickHandler(event);
+            expect(event.preventDefault).not.toHaveBeenCalled();
+        });
+    });
+    /**
+     * @todo ?
+     */
+    test("should require `link` attribute when `explicitLinks` enabled", () => {
+        return createRoot(() => {
+            // Reset with explicitLinks enabled
+            setupNativeEvents({ preload: true, explicitLinks: true })(mockRouter);
+            const link = createMockElement("a", { href: "/test-page" });
+            const event = createMockEvent("click", link, { path: [link] });
+            clickHandler(event);
+            expect(event.preventDefault).not.toHaveBeenCalled();
+        });
+    });
+    test("should handle links with `link` attribute when `explicitLinks` enabled", () => {
+        return createRoot(() => {
+            const navigateFromRoute = vi.fn();
+            mockRouter.navigatorFactory = () => navigateFromRoute;
+            // Reset with explicitLinks enabled
+            setupNativeEvents({ preload: true, explicitLinks: true })(mockRouter);
+            const link = createMockElement("a", { href: "/test-page", link: "true" });
+            const event = createMockEvent("click", link, { path: [link] });
+            clickHandler(event);
+            expect(event.preventDefault).toHaveBeenCalled();
+            expect(navigateFromRoute).toHaveBeenCalled();
+        });
+    });
+});
+describe("form submit handling", () => {
+    let mockRouter;
+    let submitHandler;
+    let originalDocument;
+    let disposeEvents;
+    beforeEach(() => {
+        mockRouter = createMockRouter();
+        actions.clear();
+        originalDocument = global.document;
+        global.document = {
+            addEventListener: (type, handler) => {
+                if (type === "submit")
+                    submitHandler = handler;
+            },
+            removeEventListener: vi.fn()
+        };
+        global.URL = class MockURL {
+            pathname;
+            search;
+            constructor(url, base) {
+                this.pathname = url.startsWith("/") ? url : "/action";
+                this.search = "";
+            }
+        };
+        disposeEvents = createRoot(dispose => {
+            setupNativeEvents()(mockRouter);
+            return dispose;
+        });
+    });
+    afterEach(() => {
+        disposeEvents?.();
+        global.document = originalDocument;
+    });
+    test("handle action form submission", () => {
+        return createRoot(() => {
+            const mockActionFn = vi.fn();
+            const mockAction = {
+                url: "https://action/test-action",
+                with: vi.fn(),
+                call: mockActionFn
+            };
+            actions.set("https://action/test-action", mockAction);
+            const form = {
+                getAttribute: (name) => (name === "action" ? "https://action/test-action" : null),
+                method: "POST",
+                enctype: "application/x-www-form-urlencoded"
+            };
+            const event = {
+                defaultPrevented: false,
+                target: form,
+                submitter: null,
+                preventDefault: vi.fn()
+            };
+            // Mock FormData and URLSearchParams
+            global.FormData = vi.fn(() => ({}));
+            global.URLSearchParams = vi.fn(() => ({}));
+            submitHandler(event);
+            expect(event.preventDefault).toHaveBeenCalled();
+            expect(mockActionFn).toHaveBeenCalledWith({ r: mockRouter, f: form }, {});
+        });
+    });
+    /**
+     * @todo ?
+     */
+    test("handle multipart form data", () => {
+        return createRoot(() => {
+            const mockActionFn = vi.fn();
+            const mockAction = {
+                url: "https://action/test-action",
+                with: vi.fn(),
+                call: mockActionFn
+            };
+            actions.set("https://action/test-action", mockAction);
+            const form = {
+                getAttribute: (name) => (name === "action" ? "https://action/test-action" : null),
+                method: "POST",
+                enctype: "multipart/form-data"
+            };
+            const event = {
+                defaultPrevented: false,
+                target: form,
+                submitter: null,
+                preventDefault: vi.fn()
+            };
+            const mockFormData = {};
+            global.FormData = vi.fn(() => mockFormData);
+            submitHandler(event);
+            expect(event.preventDefault).toHaveBeenCalled();
+            expect(mockActionFn).toHaveBeenCalledWith({ r: mockRouter, f: form }, mockFormData);
+        });
+    });
+    test("Throw when using a `GET` action", () => {
+        return createRoot(() => {
+            const form = {
+                getAttribute: () => "https://action/test-action",
+                method: "GET"
+            };
+            const event = {
+                defaultPrevented: false,
+                target: form,
+                submitter: null,
+                preventDefault: vi.fn()
+            };
+            expect(() => submitHandler(event)).toThrow("Only POST forms are supported for Actions");
+        });
+    });
+    test("Throw when using a `PATCH` action", () => {
+        return createRoot(() => {
+            const form = {
+                getAttribute: () => "https://action/test-action",
+                method: "PATCH"
+            };
+            const event = {
+                defaultPrevented: false,
+                target: form,
+                submitter: null,
+                preventDefault: vi.fn()
+            };
+            expect(() => submitHandler(event)).toThrow("Only POST forms are supported for Actions");
+        });
+    });
+    test("Throw when using a `DELETE` action", () => {
+        return createRoot(() => {
+            const form = {
+                getAttribute: () => "https://action/test-action",
+                method: "DELETE"
+            };
+            const event = {
+                defaultPrevented: false,
+                target: form,
+                submitter: null,
+                preventDefault: vi.fn()
+            };
+            expect(() => submitHandler(event)).toThrow("Only POST forms are supported for Actions");
+        });
+    });
+    test("ignore forms without action handlers", () => {
+        return createRoot(() => {
+            const form = {
+                getAttribute: () => "https://action/unknown-action",
+                method: "POST"
+            };
+            const event = {
+                defaultPrevented: false,
+                target: form,
+                submitter: null,
+                preventDefault: vi.fn()
+            };
+            submitHandler(event);
+            expect(event.preventDefault).not.toHaveBeenCalled();
+        });
+    });
+    test("handle submitter formaction", () => {
+        return createRoot(() => {
+            const mockActionFn = vi.fn();
+            const mockAction = {
+                url: "https://action/submitter-action",
+                with: vi.fn(),
+                call: mockActionFn
+            };
+            actions.set("https://action/submitter-action", mockAction);
+            const form = {
+                getAttribute: () => "https://action/form-action",
+                method: "POST"
+            };
+            const submitter = {
+                hasAttribute: (name) => name === "formaction",
+                getAttribute: (name) => name === "formaction" ? "https://action/submitter-action" : null
+            };
+            const event = {
+                defaultPrevented: false,
+                target: form,
+                submitter,
+                preventDefault: vi.fn()
+            };
+            global.FormData = vi.fn(() => ({}));
+            global.URLSearchParams = vi.fn(() => ({}));
+            submitHandler(event);
+            expect(event.preventDefault).toHaveBeenCalled();
+            expect(mockActionFn).toHaveBeenCalled();
+        });
+    });
+    /**
+     * @todo ?
+     */
+    test("ignore forms with different action base", () => {
+        return createRoot(() => {
+            mockRouter.parsePath = path => path;
+            const form = {
+                getAttribute: () => "/different-base/action",
+                method: "POST"
+            };
+            const event = {
+                defaultPrevented: false,
+                target: form,
+                submitter: null,
+                preventDefault: vi.fn()
+            };
+            submitHandler(event);
+            expect(event.preventDefault).not.toHaveBeenCalled();
+        });
+    });
+});

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

@@ -0,0 +1,4 @@
+export { createAsync, createAsyncStore, type AccessorWithLatest } from "./createAsync.js";
+export { action, useSubmission, useSubmissions, useAction, type Action } from "./action.js";
+export { query, revalidate, cache, type CachedFunction } from "./query.js";
+export { redirect, reload, json } from "./response.js";

package/dist/src/data/index.js

@@ -0,0 +1,4 @@
+export { createAsync, createAsyncStore } from "./createAsync.js";
+export { action, useSubmission, useSubmissions, useAction } from "./action.js";
+export { query, revalidate, cache } from "./query.js";
+export { redirect, reload, json } from "./response.js";

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

@@ -0,0 +1,23 @@
+import type { CacheEntry, NarrowResponse } from "../types.js";
+/**
+ * Revalidates the given cache entry/entries.
+ */
+export declare function revalidate(key?: string | string[] | void, force?: boolean): Promise<void>;
+export declare function cacheKeyOp(key: string | string[] | void, fn: (cacheEntry: CacheEntry) => void): void;
+export type CachedFunction<T extends (...args: any) => any> = T extends (...args: infer A) => infer R ? ([] extends {
+    [K in keyof A]-?: A[K];
+} ? (...args: never[]) => R extends Promise<infer P> ? Promise<NarrowResponse<P>> : NarrowResponse<R> : (...args: A) => R extends Promise<infer P> ? Promise<NarrowResponse<P>> : NarrowResponse<R>) & {
+    keyFor: (...args: A) => string;
+    key: string;
+} : never;
+export declare function query<T extends (...args: any) => any>(fn: T, name: string): CachedFunction<T>;
+export declare namespace query {
+    export var get: (key: string) => any;
+    export var set: <T>(key: string, value: T extends Promise<any> ? never : T) => void;
+    var _a: (key: string) => boolean;
+    export var clear: () => void;
+    export { _a as delete };
+}
+/** @deprecated use query instead */
+export declare const cache: typeof query;
+export declare function hashKey<T extends Array<any>>(args: T): string;