@solidjs/router 0.15.4 → 0.16.0

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

@@ -0,0 +1,32 @@
+import { type ReconcileOptions } from "solid-js/store";
+/**
+ * As `createAsync` and `createAsyncStore` are wrappers for `createResource`,
+ * this type allows to support `latest` field for these primitives.
+ * It will be removed in the future.
+ */
+export type AccessorWithLatest<T> = {
+    (): T;
+    latest: T;
+};
+export declare function createAsync<T>(fn: (prev: T) => Promise<T>, options: {
+    name?: string;
+    initialValue: T;
+    deferStream?: boolean;
+}): AccessorWithLatest<T>;
+export declare function createAsync<T>(fn: (prev: T | undefined) => Promise<T>, options?: {
+    name?: string;
+    initialValue?: T;
+    deferStream?: boolean;
+}): AccessorWithLatest<T | undefined>;
+export declare function createAsyncStore<T>(fn: (prev: T) => Promise<T>, options: {
+    name?: string;
+    initialValue: T;
+    deferStream?: boolean;
+    reconcile?: ReconcileOptions;
+}): AccessorWithLatest<T>;
+export declare function createAsyncStore<T>(fn: (prev: T | undefined) => Promise<T>, options?: {
+    name?: string;
+    initialValue?: T;
+    deferStream?: boolean;
+    reconcile?: ReconcileOptions;
+}): AccessorWithLatest<T | undefined>;

package/dist/src/data/createAsync.js

@@ -0,0 +1,96 @@
+/**
+ * This is mock of the eventual Solid 2.0 primitive. It is not fully featured.
+ */
+import { createResource, sharedConfig, untrack, catchError } from "solid-js";
+import { createStore, reconcile, unwrap } from "solid-js/store";
+import { isServer } from "solid-js/web";
+import { setFunctionName } from "../utils.js";
+export function createAsync(fn, options) {
+    let resource;
+    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;
+        }
+    });
+    return resultAccessor;
+}
+export function createAsyncStore(fn, options = {}) {
+    let resource;
+    let prev = () => !resource || resource.state === "unresolved"
+        ? undefined
+        : unwrap(resource.latest);
+    [resource] = createResource(() => subFetch(fn, catchError(() => untrack(prev), () => undefined)), v => v, {
+        ...options,
+        storage: (init) => createDeepSignal(init, options.reconcile)
+    });
+    const resultAccessor = (() => resource());
+    Object.defineProperty(resultAccessor, "latest", {
+        get() {
+            return resource.latest;
+        }
+    });
+    return resultAccessor;
+}
+function createDeepSignal(value, options) {
+    const [store, setStore] = createStore({
+        value: structuredClone(value)
+    });
+    return [
+        () => store.value,
+        (v) => {
+            typeof v === "function" && (v = v());
+            setStore("value", reconcile(structuredClone(v), options));
+            return store.value;
+        }
+    ];
+}
+// mock promise while hydrating to prevent fetching
+class MockPromise {
+    static all() {
+        return new MockPromise();
+    }
+    static allSettled() {
+        return new MockPromise();
+    }
+    static any() {
+        return new MockPromise();
+    }
+    static race() {
+        return new MockPromise();
+    }
+    static reject() {
+        return new MockPromise();
+    }
+    static resolve() {
+        return new MockPromise();
+    }
+    catch() {
+        return new MockPromise();
+    }
+    then() {
+        return new MockPromise();
+    }
+    finally() {
+        return new MockPromise();
+    }
+}
+function subFetch(fn, prev) {
+    if (isServer || !sharedConfig.context)
+        return fn(prev);
+    const ogFetch = fetch;
+    const ogPromise = Promise;
+    try {
+        window.fetch = () => new MockPromise();
+        Promise = MockPromise;
+        return fn(prev);
+    }
+    finally {
+        window.fetch = ogFetch;
+        Promise = ogPromise;
+    }
+}

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

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

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

@@ -0,0 +1,196 @@
+import { createRoot } from "solid-js";
+import { vi } from "vitest";
+import { createAsync, createAsyncStore } from "./createAsync.js";
+vi.mock("solid-js", async () => {
+    const actual = await vi.importActual("solid-js");
+    return {
+        ...actual,
+        sharedConfig: { context: null }
+    };
+});
+let mockSharedConfig;
+describe("createAsync", () => {
+    beforeAll(async () => {
+        const { sharedConfig } = await import("solid-js");
+        mockSharedConfig = sharedConfig;
+    });
+    test("should create async resource with `initialValue`", async () => {
+        return createRoot(async () => {
+            const resource = createAsync(async (prev) => {
+                await new Promise(resolve => setTimeout(resolve, 10));
+                return prev ? prev + 1 : 1;
+            }, { initialValue: 0 });
+            expect(resource()).toBe(0);
+            expect(resource.latest).toBe(0);
+        });
+    });
+    test("should create async resource without `initialValue`", async () => {
+        return createRoot(async () => {
+            const resource = createAsync(async () => {
+                await new Promise(resolve => setTimeout(resolve, 10));
+                return "loaded data";
+            });
+            expect(resource()).toBeUndefined();
+            expect(resource.latest).toBeUndefined();
+            await new Promise(resolve => setTimeout(resolve, 20));
+            expect(resource()).toBe("loaded data");
+            expect(resource.latest).toBe("loaded data");
+        });
+    });
+    test("should update resource with new data", async () => {
+        return createRoot(async () => {
+            let counter = 0;
+            const resource = createAsync(async () => {
+                await new Promise(resolve => setTimeout(resolve, 10));
+                return ++counter;
+            });
+            await new Promise(resolve => setTimeout(resolve, 20));
+            expect(resource()).toBe(1);
+            // Trigger re-fetch - this would typically happen through some reactive source
+            // Since we can't easily trigger refetch in this test environment,
+            // we verify the structure is correct
+            expect(typeof resource).toBe("function");
+            expect(resource.latest).toBe(1);
+        });
+    });
+    test("should handle async errors", async () => {
+        return createRoot(async () => {
+            const resource = createAsync(async () => {
+                await new Promise(resolve => setTimeout(resolve, 10));
+                throw new Error("Async error");
+            });
+            await new Promise(resolve => setTimeout(resolve, 20));
+            /*
+             * @note Resource should handle the error gracefully
+             * The exact error handling depends on `createResource` implementation
+             */
+            expect(typeof resource).toBe("function");
+        });
+    });
+    test("should support `deferStream` option", () => {
+        return createRoot(() => {
+            const resource = createAsync(async () => "deferred data", { deferStream: true });
+            expect(typeof resource).toBe("function");
+            expect(resource.latest).toBeUndefined();
+        });
+    });
+    test("should support `name` option for debugging", () => {
+        return createRoot(() => {
+            const resource = createAsync(async () => "named resource", { name: "test-resource" });
+            expect(typeof resource).toBe("function");
+            expect(resource.name).toBe("test-resource");
+        });
+    });
+    test("should pass previous value to fetch function", async () => {
+        return createRoot(async () => {
+            let callCount = 0;
+            let lastPrev;
+            const resource = createAsync(async (prev) => {
+                lastPrev = prev;
+                return `call-${++callCount}-prev-${prev}`;
+            }, { initialValue: "initial" });
+            expect(resource()).toBe("initial");
+            await new Promise(resolve => setTimeout(resolve, 20));
+            expect(lastPrev).toBeUndefined();
+        });
+    });
+});
+describe("createAsyncStore", () => {
+    test("should create async store with `initialValue`", async () => {
+        return createRoot(async () => {
+            const store = createAsyncStore(async (prev) => {
+                await new Promise(resolve => setTimeout(resolve, 10));
+                return { count: prev?.count ? prev.count + 1 : 1, data: "test" };
+            }, { initialValue: { count: 0, data: "initial" } });
+            expect(store()).toEqual({ count: 0, data: "initial" });
+            expect(store.latest).toEqual({ count: 0, data: "initial" });
+        });
+    });
+    test("should create async store without `initialValue`", async () => {
+        return createRoot(async () => {
+            const store = createAsyncStore(async () => {
+                await new Promise(resolve => setTimeout(resolve, 10));
+                return { loaded: true, message: "success" };
+            });
+            expect(store()).toBeUndefined();
+            expect(store.latest).toBeUndefined();
+            await new Promise(resolve => setTimeout(resolve, 20));
+            expect(store()).toEqual({ loaded: true, message: "success" });
+            expect(store.latest).toEqual({ loaded: true, message: "success" });
+        });
+    });
+    test("should support `reconcile` options", () => {
+        return createRoot(() => {
+            const store = createAsyncStore(async () => ({ items: [1, 2, 3] }), {
+                reconcile: { key: "id" }
+            });
+            expect(typeof store).toBe("function");
+        });
+    });
+    test("should handle complex object updates", async () => {
+        return createRoot(async () => {
+            let updateCount = 0;
+            const store = createAsyncStore(async (prev) => {
+                await new Promise(resolve => setTimeout(resolve, 10));
+                return {
+                    ...prev,
+                    updateCount: ++updateCount,
+                    timestamp: Date.now(),
+                    nested: { value: `update-${updateCount}` }
+                };
+            }, { initialValue: { updateCount: 0, timestamp: 0, nested: { value: "initial" } } });
+            const initial = store();
+            expect(initial.updateCount).toBe(0);
+            expect(initial.nested.value).toBe("initial");
+        });
+    });
+    test("should support all `createAsync` options", () => {
+        return createRoot(() => {
+            const store = createAsyncStore(async () => ({ data: "test" }), {
+                name: "test-store",
+                deferStream: true,
+                reconcile: { merge: true }
+            });
+            expect(typeof store).toBe("function");
+        });
+    });
+});
+describe("MockPromise", () => {
+    test("should mock fetch during hydration", async () => {
+        mockSharedConfig.context = {};
+        return createRoot(async () => {
+            const originalFetch = window.fetch;
+            // Set up a fetch that should be mocked
+            window.fetch = () => {
+                return Promise.resolve(new Response("real fetch"));
+            };
+            const resource = createAsync(async () => {
+                const response = await fetch("/api/data");
+                return await response.text();
+            });
+            // During hydration, fetch should be mocked
+            expect(resource()).toBeUndefined();
+            window.fetch = originalFetch;
+            mockSharedConfig.context = null;
+        });
+    });
+    test("should allow real fetch outside hydration", async () => {
+        // Ensure we're not in hydration context
+        mockSharedConfig.context = null;
+        return createRoot(async () => {
+            let fetchCalled = false;
+            const originalFetch = window.fetch;
+            window.fetch = vi.fn().mockImplementation(() => {
+                fetchCalled = true;
+                return Promise.resolve(new Response("real data"));
+            });
+            createAsync(async () => {
+                const response = await fetch("/api/data");
+                return await response.text();
+            });
+            await new Promise(resolve => setTimeout(resolve, 20));
+            expect(fetchCalled).toBe(true);
+            window.fetch = originalFetch;
+        });
+    });
+});

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

@@ -0,0 +1,9 @@
+import type { RouterContext } from "../types.js";
+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 {};

package/dist/src/data/events.js

@@ -0,0 +1,123 @@
+import { delegateEvents } from "solid-js/web";
+import { onCleanup } from "solid-js";
+import { actions } from "./action.js";
+import { mockBase } from "../utils.js";
+export function setupNativeEvents({ preload = true, explicitLinks = false, actionBase = "/_server", transformUrl } = {}) {
+    return (router) => {
+        const basePath = router.base.path();
+        const navigateFromRoute = router.navigatorFactory(router.base);
+        let preloadTimeout;
+        let lastElement;
+        function isSvg(el) {
+            return el.namespaceURI === "http://www.w3.org/2000/svg";
+        }
+        function handleAnchor(evt) {
+            if (evt.defaultPrevented ||
+                evt.button !== 0 ||
+                evt.metaKey ||
+                evt.altKey ||
+                evt.ctrlKey ||
+                evt.shiftKey)
+                return;
+            const a = evt
+                .composedPath()
+                .find(el => el instanceof Node && el.nodeName.toUpperCase() === "A");
+            if (!a || (explicitLinks && !a.hasAttribute("link")))
+                return;
+            const svg = isSvg(a);
+            const href = svg ? a.href.baseVal : a.href;
+            const target = svg ? a.target.baseVal : a.target;
+            if (target || (!href && !a.hasAttribute("state")))
+                return;
+            const rel = (a.getAttribute("rel") || "").split(/\s+/);
+            if (a.hasAttribute("download") || (rel && rel.includes("external")))
+                return;
+            const url = svg ? new URL(href, document.baseURI) : new URL(href);
+            if (url.origin !== window.location.origin ||
+                (basePath && url.pathname && !url.pathname.toLowerCase().startsWith(basePath.toLowerCase())))
+                return;
+            return [a, url];
+        }
+        function handleAnchorClick(evt) {
+            const res = handleAnchor(evt);
+            if (!res)
+                return;
+            const [a, url] = res;
+            const to = router.parsePath(url.pathname + url.search + url.hash);
+            const state = a.getAttribute("state");
+            evt.preventDefault();
+            navigateFromRoute(to, {
+                resolve: false,
+                replace: a.hasAttribute("replace"),
+                scroll: !a.hasAttribute("noscroll"),
+                state: state ? JSON.parse(state) : undefined
+            });
+        }
+        function handleAnchorPreload(evt) {
+            const res = handleAnchor(evt);
+            if (!res)
+                return;
+            const [a, url] = res;
+            transformUrl && (url.pathname = transformUrl(url.pathname));
+            router.preloadRoute(url, a.getAttribute("preload") !== "false");
+        }
+        function handleAnchorMove(evt) {
+            clearTimeout(preloadTimeout);
+            const res = handleAnchor(evt);
+            if (!res)
+                return (lastElement = null);
+            const [a, url] = res;
+            if (lastElement === a)
+                return;
+            transformUrl && (url.pathname = transformUrl(url.pathname));
+            preloadTimeout = setTimeout(() => {
+                router.preloadRoute(url, a.getAttribute("preload") !== "false");
+                lastElement = a;
+            }, 20);
+        }
+        function handleFormSubmit(evt) {
+            if (evt.defaultPrevented)
+                return;
+            let actionRef = evt.submitter && evt.submitter.hasAttribute("formaction")
+                ? evt.submitter.getAttribute("formaction")
+                : evt.target.getAttribute("action");
+            if (!actionRef)
+                return;
+            if (!actionRef.startsWith("https://action/")) {
+                // normalize server actions
+                const url = new URL(actionRef, mockBase);
+                actionRef = router.parsePath(url.pathname + url.search);
+                if (!actionRef.startsWith(actionBase))
+                    return;
+            }
+            if (evt.target.method.toUpperCase() !== "POST")
+                throw new Error("Only POST forms are supported for Actions");
+            const handler = actions.get(actionRef);
+            if (handler) {
+                evt.preventDefault();
+                const data = new FormData(evt.target, evt.submitter);
+                handler.call({ r: router, f: evt.target }, evt.target.enctype === "multipart/form-data"
+                    ? data
+                    : new URLSearchParams(data));
+            }
+        }
+        // ensure delegated event run first
+        delegateEvents(["click", "submit"]);
+        document.addEventListener("click", handleAnchorClick);
+        if (preload) {
+            document.addEventListener("mousemove", handleAnchorMove, { passive: true });
+            document.addEventListener("focusin", handleAnchorPreload, { passive: true });
+            document.addEventListener("touchstart", handleAnchorPreload, { passive: true });
+        }
+        document.addEventListener("submit", handleFormSubmit);
+        onCleanup(() => {
+            document.removeEventListener("click", handleAnchorClick);
+            if (preload) {
+                document.removeEventListener("mousemove", handleAnchorMove);
+                document.removeEventListener("focusin", handleAnchorPreload);
+                document.removeEventListener("touchstart", handleAnchorPreload);
+            }
+            document.removeEventListener("submit", handleFormSubmit);
+        });
+    };
+}

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

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