toiljs 0.0.7 → 0.0.9

package/test/dom/action.test.tsx

@@ -0,0 +1,129 @@
+// @vitest-environment jsdom
+import { act, cleanup, fireEvent, render, renderHook, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useAction } from '../../src/client/routing/action';
+import { Form } from '../../src/client/components/Form';
+import { clearLoaderData, loaderKey, readRouteData } from '../../src/client/routing/loader';
+import type { RouteDef } from '../../src/client/types';
+
+afterEach(cleanup);
+beforeEach(() => {
+    clearLoaderData();
+});
+
+describe('useAction', () => {
+    it('goes idle → pending → success and returns the result', async () => {
+        const onSuccess = vi.fn();
+        const { result } = renderHook(() =>
+            useAction((n: number) => Promise.resolve(n * 2), { revalidate: false, onSuccess }),
+        );
+        expect(result.current.pending).toBe(false);
+
+        let returned: number | undefined;
+        await act(async () => {
+            returned = await result.current.run(3);
+        });
+        expect(returned).toBe(6);
+        expect(result.current.data).toBe(6);
+        expect(result.current.error).toBeUndefined();
+        expect(onSuccess).toHaveBeenCalledWith(6);
+    });
+
+    it('captures errors instead of rejecting, and calls onError', async () => {
+        const onError = vi.fn();
+        const { result } = renderHook(() =>
+            useAction(
+                () => {
+                    throw new Error('boom');
+                },
+                { revalidate: false, onError },
+            ),
+        );
+
+        let returned: unknown = 'sentinel';
+        await act(async () => {
+            returned = await result.current.run();
+        });
+        expect(returned).toBeUndefined();
+        expect((result.current.error as Error).message).toBe('boom');
+        expect(onError).toHaveBeenCalledOnce();
+    });
+
+    it('reset() returns to idle', async () => {
+        const { result } = renderHook(() => useAction(() => 'x', { revalidate: false }));
+        await act(async () => {
+            await result.current.run();
+        });
+        expect(result.current.data).toBe('x');
+        act(() => {
+            result.current.reset();
+        });
+        expect(result.current.data).toBeUndefined();
+        expect(result.current.pending).toBe(false);
+    });
+
+    it('revalidate: true invalidates cached loader data', async () => {
+        const route: RouteDef = {
+            pattern: '/x',
+            load: () => Promise.resolve({ default: () => null, loader: () => ({ n: 1 }), revalidate: false }),
+        };
+        const key = loaderKey('/x', '');
+        // Seed the cache (suspends once, then resolves).
+        try {
+            readRouteData(route, {}, key, 1);
+        } catch (thrown) {
+            await (thrown as Promise<void>);
+        }
+        // Cached now: a re-read returns synchronously (no throw).
+        expect(() => readRouteData(route, {}, key, 1)).not.toThrow();
+
+        const { result } = renderHook(() => useAction(() => 'done', { revalidate: true }));
+        await act(async () => {
+            await result.current.run();
+        });
+        // Cache was cleared → reading again suspends (throws a promise).
+        expect(() => readRouteData(route, {}, key, 1)).toThrow();
+    });
+});
+
+describe('Form', () => {
+    it('submits FormData (no reload) and exposes pending state', async () => {
+        let received: FormDataEntryValue | null = null;
+        const action = vi.fn((data: FormData) => {
+            received = data.get('title');
+        });
+        const { getByText, getByPlaceholderText } = render(
+            <Form action={action} revalidate={false}>
+                {({ pending }) => (
+                    <>
+                        <input name="title" placeholder="t" />
+                        <button type="submit">{pending ? 'Saving…' : 'Save'}</button>
+                    </>
+                )}
+            </Form>,
+        );
+        fireEvent.change(getByPlaceholderText('t'), { target: { value: 'Hello' } });
+        fireEvent.click(getByText('Save'));
+        await waitFor(() => {
+            expect(action).toHaveBeenCalledOnce();
+        });
+        expect(received).toBe('Hello');
+    });
+
+    it('resets fields after success when resetOnSuccess is set', async () => {
+        const { getByText, getByPlaceholderText } = render(
+            <Form action={() => undefined} revalidate={false} resetOnSuccess>
+                <input name="title" placeholder="t" defaultValue="" />
+                <button type="submit">Save</button>
+            </Form>,
+        );
+        const input = getByPlaceholderText('t') as HTMLInputElement;
+        fireEvent.change(input, { target: { value: 'typed' } });
+        expect(input.value).toBe('typed');
+        fireEvent.click(getByText('Save'));
+        await waitFor(() => {
+            expect(input.value).toBe('');
+        });
+    });
+});

package/test/dom/error-overlay.test.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment jsdom
+import { act, cleanup, fireEvent, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import {
+    DevErrorBoundary,
+    DevErrorOverlay,
+    initDevErrorOverlay,
+} from '../../src/client/dev/error-overlay';
+
+afterEach(cleanup);
+
+function Boom(): never {
+    throw new Error('render boom');
+}
+
+describe('dev error overlay', () => {
+    it('surfaces an uncaught render error', () => {
+        // React logs caught boundary errors to console.error — silence it for a clean test run.
+        const spy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+        const { getByRole } = render(
+            <>
+                <DevErrorBoundary>
+                    <Boom />
+                </DevErrorBoundary>
+                <DevErrorOverlay />
+            </>,
+        );
+        expect(getByRole('alert').textContent).toContain('render boom');
+        spy.mockRestore();
+    });
+
+    it('surfaces an unhandled window error and dismisses it', async () => {
+        initDevErrorOverlay();
+        const { findByRole, queryByRole, getByText } = render(<DevErrorOverlay />);
+        act(() => {
+            window.dispatchEvent(new ErrorEvent('error', { error: new Error('async boom') }));
+        });
+        const alert = await findByRole('alert');
+        expect(alert.textContent).toContain('async boom');
+        fireEvent.click(getByText('Dismiss'));
+        expect(queryByRole('alert')).toBeNull();
+    });
+});

package/test/dom/loader.test.tsx

@@ -0,0 +1,121 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, expectTypeOf, it, vi } from 'vitest';
+
+import {
+    clearLoaderData,
+    invalidateLoaderData,
+    loaderKey,
+    readRouteData,
+    type LoaderData,
+} from '../../src/client/routing/loader';
+import type { Revalidate } from '../../src/client/routing/loader';
+import type { RouteDef } from '../../src/client/types';
+
+/** Reads route data, awaiting the suspending promise once if it's pending. */
+async function read(route: RouteDef, key: string, epoch: number): Promise<unknown> {
+    try {
+        return readRouteData(route, {}, key, epoch).data;
+    } catch (thrown) {
+        if (thrown instanceof Promise) {
+            await thrown;
+            return readRouteData(route, {}, key, epoch).data;
+        }
+        throw thrown;
+    }
+}
+
+/** A route whose `load()` count tells us how many times the loader actually ran. */
+function makeRoute(revalidate?: Revalidate): { route: RouteDef; loads: () => number } {
+    let loads = 0;
+    const route: RouteDef = {
+        pattern: '/x',
+        load: () => {
+            loads += 1;
+            return Promise.resolve({
+                default: () => null,
+                loader: () => ({ n: loads }),
+                revalidate,
+            });
+        },
+    };
+    return { route, loads: () => loads };
+}
+
+beforeEach(() => {
+    clearLoaderData();
+});
+afterEach(() => {
+    vi.useRealTimers();
+});
+
+describe('loader caching', () => {
+    it('reuses cached data on re-read within the same navigation (loader runs once)', async () => {
+        const { route, loads } = makeRoute();
+        const key = loaderKey('/x', '');
+        await read(route, key, 1);
+        await read(route, key, 1);
+        expect(loads()).toBe(1);
+    });
+
+    it('a route with no loader stays cached across navigations (never re-suspends)', async () => {
+        let loads = 0;
+        const route: RouteDef = {
+            pattern: '/p',
+            load: () => {
+                loads += 1;
+                return Promise.resolve({ default: () => null });
+            },
+        };
+        const key = loaderKey('/p', '');
+        await read(route, key, 1);
+        await read(route, key, 2);
+        await read(route, key, 3);
+        expect(loads).toBe(1);
+    });
+
+    it('refetches on a new navigation under the default policy', async () => {
+        const { route, loads } = makeRoute();
+        const key = loaderKey('/x', '');
+        await read(route, key, 1);
+        await read(route, key, 2);
+        expect(loads()).toBe(2);
+    });
+
+    it('revalidate=false caches across navigations', async () => {
+        const { route, loads } = makeRoute(false);
+        const key = loaderKey('/x', '');
+        await read(route, key, 1);
+        await read(route, key, 2);
+        expect(loads()).toBe(1);
+    });
+
+    it('numeric revalidate caches until the staleTime elapses', async () => {
+        vi.useFakeTimers();
+        const { route, loads } = makeRoute(1); // 1 second
+        const key = loaderKey('/x', '');
+        await read(route, key, 1);
+        await read(route, key, 2); // still fresh
+        expect(loads()).toBe(1);
+        vi.advanceTimersByTime(1500); // now stale
+        await read(route, key, 3);
+        expect(loads()).toBe(2);
+    });
+
+    it('invalidateLoaderData(href) forces a refetch of that route', async () => {
+        const { route, loads } = makeRoute(false);
+        const key = loaderKey('/x', '');
+        await read(route, key, 1);
+        invalidateLoaderData('/x');
+        await read(route, key, 1);
+        expect(loads()).toBe(2);
+    });
+});
+
+describe('useLoaderData type inference', () => {
+    it('LoaderData<typeof loader> resolves to the loader return type', () => {
+        const loader = async () => Promise.resolve({ a: 1, b: 'x' as string | null });
+        expectTypeOf<LoaderData<typeof loader>>().toEqualTypeOf<{ a: number; b: string | null }>();
+        // An explicit type still passes straight through.
+        expectTypeOf<LoaderData<{ id: number }>>().toEqualTypeOf<{ id: number }>();
+    });
+});

package/test/dom/revalidate.test.tsx

@@ -0,0 +1,38 @@
+// @vitest-environment jsdom
+import { act, cleanup, render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { Router } from '../../src/client/routing/Router';
+import { clearLoaderData, revalidate, useLoaderData } from '../../src/client/routing/loader';
+import type { RouteDef } from '../../src/client/types';
+
+afterEach(cleanup);
+beforeEach(() => {
+    clearLoaderData();
+    window.history.replaceState({}, '', '/');
+});
+
+describe('revalidate refetches', () => {
+    it('re-runs the loader and updates the rendered data', async () => {
+        let n = 0;
+        function Page(): React.ReactNode {
+            const value = useLoaderData<number>();
+            return <p>val:{String(value)}</p>;
+        }
+        const routes: RouteDef[] = [
+            {
+                pattern: '/',
+                load: () => Promise.resolve({ default: Page, loader: () => (n += 1) }),
+                // matches the example: this route has a loading.tsx (keyed boundary + transition).
+                loading: () => Promise.resolve({ default: () => <p>loading</p> }),
+            },
+        ];
+        const { findByText } = render(<Router routes={routes} />);
+        await findByText('val:1');
+
+        act(() => {
+            revalidate();
+        });
+        await findByText('val:2');
+    });
+});

package/test/dom/route-head.test.tsx

@@ -0,0 +1,34 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest';
+
+import { setRouteHead, useHead } from '../../src/client/head/head';
+import { resolveMetadata } from '../../src/client/head/metadata';
+import { cleanup, render } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+    cleanup();
+    setRouteHead(null);
+});
+
+const desc = (): string | null =>
+    document.head.querySelector('meta[name="description"]')?.getAttribute('content') ?? null;
+
+describe('route head (metadata baseline)', () => {
+    it('applies a resolved metadata head to the document', () => {
+        setRouteHead(resolveMetadata({ title: 'About', description: 'about page' }));
+        expect(document.title).toBe('About');
+        expect(desc()).toBe('about page');
+    });
+
+    it('is the lowest priority — component useHead overrides it', () => {
+        setRouteHead(resolveMetadata({ title: 'Base', description: 'base' }));
+        function Page() {
+            useHead({ title: 'Override', meta: [{ name: 'description', content: 'override' }] });
+            return null;
+        }
+        render(<Page />);
+        expect(document.title).toBe('Override');
+        expect(desc()).toBe('override');
+    });
+});

package/test/dom/router-loading.test.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment jsdom
+import { act, cleanup, render, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { navigate } from '../../src/client/navigation/navigation';
+import { Router } from '../../src/client/routing/Router';
+import type { RouteDef } from '../../src/client/types';
+
+afterEach(cleanup);
+beforeEach(() => {
+    window.history.replaceState({}, '', '/');
+});
+
+const routes: RouteDef[] = [
+    {
+        pattern: '/',
+        load: () => Promise.resolve({ default: () => <div>HOME</div> }),
+    },
+    {
+        // Page chunk never resolves, so the route stays suspended — exercising the fallback path.
+        pattern: '/slow',
+        load: () => new Promise<{ default: () => null }>(() => undefined),
+        loading: () => Promise.resolve({ default: () => <div>LOADING</div> }),
+    },
+];
+
+describe('Router loading fallback', () => {
+    it("shows the route's loading.tsx immediately when navigating to a suspending route", async () => {
+        const { findByText, queryByText } = render(<Router routes={routes} />);
+        await findByText('HOME');
+
+        // A route with a `loading.tsx` keys its Suspense boundary per URL, so even though navigation
+        // runs in a transition the fallback appears immediately (it isn't suppressed / frozen).
+        act(() => {
+            navigate('/slow');
+        });
+
+        await waitFor(() => {
+            expect(queryByText('LOADING')).not.toBeNull();
+        });
+        // The keyed boundary remounts for the new route, so the previous page is gone (not frozen).
+        expect(queryByText('HOME')).toBeNull();
+    });
+});

package/test/dom/slot.test.tsx

@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+import { act, cleanup, render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import type { ReactNode } from 'react';
+
+import { Slot } from '../../src/client/components/Slot';
+import { navigate } from '../../src/client/navigation/navigation';
+import { Router } from '../../src/client/routing/Router';
+import { clearLoaderData } from '../../src/client/routing/loader';
+import { SlotContext } from '../../src/client/routing/slot-context';
+import type { RouteDef } from '../../src/client/types';
+
+const layoutWithModal = () =>
+    Promise.resolve({
+        default: ({ children }: { children?: ReactNode }) => (
+            <div>
+                {children}
+                <Slot name="modal" />
+            </div>
+        ),
+    });
+
+afterEach(cleanup);
+beforeEach(() => {
+    clearLoaderData();
+    window.history.replaceState({}, '', '/');
+});
+
+describe('Slot', () => {
+    it('renders the named slot element from context, or the fallback', () => {
+        const { getByText, queryByText } = render(
+            <SlotContext.Provider value={{ modal: <span>MODAL</span> }}>
+                <Slot name="modal" />
+                <Slot name="missing" fallback={<span>FB</span>} />
+            </SlotContext.Provider>,
+        );
+        expect(getByText('MODAL')).toBeTruthy();
+        expect(getByText('FB')).toBeTruthy();
+        expect(queryByText('missing')).toBeNull();
+    });
+});
+
+describe('Router parallel slots', () => {
+    const routes: RouteDef[] = [
+        { pattern: '/', load: () => Promise.resolve({ default: () => <main>PAGE</main> }) },
+    ];
+    // A layout that renders the page plus the "modal" slot.
+    const layout = () =>
+        Promise.resolve({
+            default: ({ children }: { children?: ReactNode }) => (
+                <div>
+                    {children}
+                    <Slot name="modal" />
+                </div>
+            ),
+        });
+    const slots: Record<string, RouteDef[]> = {
+        modal: [{ pattern: '/', load: () => Promise.resolve({ default: () => <aside>SLOT</aside> }) }],
+    };
+
+    it('renders the main route and a matching slot together', async () => {
+        const { findByText } = render(<Router routes={routes} layout={layout} slots={slots} />);
+        // Both the page and the parallel slot render for the same URL.
+        await findByText('PAGE');
+        await findByText('SLOT');
+    });
+});
+
+describe('intercepting routes', () => {
+    const routes: RouteDef[] = [
+        { pattern: '/photo/:id', load: () => Promise.resolve({ default: () => <main>PHOTO PAGE</main> }) },
+        { pattern: '/', load: () => Promise.resolve({ default: () => <main>FEED</main> }) },
+    ];
+    const slots: Record<string, RouteDef[]> = {
+        modal: [
+            {
+                pattern: '/photo/:id',
+                intercept: true,
+                load: () => Promise.resolve({ default: () => <aside>PHOTO MODAL</aside> }),
+            },
+        ],
+    };
+
+    // This test must run before any navigation so it observes a "hard" load (soft-nav state is false).
+    it('shows the full page on a hard load (no interception)', async () => {
+        window.history.replaceState({}, '', '/photo/1');
+        const { findByText, queryByText } = render(
+            <Router routes={routes} layout={layoutWithModal} slots={slots} />,
+        );
+        await findByText('PHOTO PAGE');
+        expect(queryByText('PHOTO MODAL')).toBeNull();
+    });
+
+    it('intercepts on soft navigation: modal overlays, previous page stays', async () => {
+        window.history.replaceState({}, '', '/');
+        const { findByText, queryByText } = render(
+            <Router routes={routes} layout={layoutWithModal} slots={slots} />,
+        );
+        await findByText('FEED');
+        act(() => {
+            navigate('/photo/1');
+        });
+        // The intercepting slot route shows the modal…
+        await findByText('PHOTO MODAL');
+        // …while the main view keeps the previous page (the backdrop), not the full photo page.
+        expect(queryByText('FEED')).not.toBeNull();
+        expect(queryByText('PHOTO PAGE')).toBeNull();
+    });
+});

package/test/dom/view-transitions.test.tsx

@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { navigate, setViewTransitions } from '../../src/client/navigation/navigation';
+
+interface VTDoc {
+    startViewTransition?: (cb: () => void) => unknown;
+}
+const doc = document as Document & VTDoc;
+
+afterEach(() => {
+    setViewTransitions(false);
+    delete doc.startViewTransition;
+    vi.restoreAllMocks();
+    window.history.replaceState({}, '', '/');
+});
+
+describe('view transitions', () => {
+    function stubReducedMotion(matches: boolean): void {
+        window.matchMedia = vi.fn().mockReturnValue({ matches }) as unknown as typeof window.matchMedia;
+    }
+
+    it('wraps navigation in startViewTransition when enabled and supported', () => {
+        const vt = vi.fn((cb: () => void) => {
+            cb();
+        });
+        doc.startViewTransition = vt;
+        stubReducedMotion(false);
+        setViewTransitions(true);
+        navigate('/a');
+        expect(vt).toHaveBeenCalledOnce();
+    });
+
+    it('skips the view transition under prefers-reduced-motion', () => {
+        const vt = vi.fn();
+        doc.startViewTransition = vt;
+        stubReducedMotion(true);
+        setViewTransitions(true);
+        navigate('/b');
+        expect(vt).not.toHaveBeenCalled();
+    });
+
+    it('does not use view transitions when disabled', () => {
+        const vt = vi.fn();
+        doc.startViewTransition = vt;
+        stubReducedMotion(false);
+        setViewTransitions(false);
+        navigate('/c');
+        expect(vt).not.toHaveBeenCalled();
+    });
+});

package/test/features.test.ts

@@ -1,11 +1,13 @@
 import { describe, expect, it } from 'vitest';
 
 import {
+    defaultConfigSource,
     detectPreprocessor,
     detectTailwind,
     packageDiff,
     preprocessorForExt,
     requiredPackages,
+    setConfigImages,
     setStyleImports,
     styleEntry,
     styleImportLines,
@@ -109,3 +111,32 @@ describe('detect from dependencies', () => {
         expect(detectTailwind({ react: '^19' })).toBe(false);
     });
 });
+
+describe('setConfigImages / defaultConfigSource', () => {
+    it('flips an existing images flag', () => {
+        const src = 'export default defineConfig({\n    client: {\n        images: true,\n    },\n});\n';
+        expect(setConfigImages(src, false)).toContain('images: false');
+        expect(setConfigImages(src, false)).not.toContain('images: true');
+    });
+
+    it('adds images to an existing client block', () => {
+        const out = setConfigImages('export default defineConfig({ client: { base: "/" } });', false);
+        expect(out).toContain('images: false');
+        expect(out).toContain('base: "/"');
+    });
+
+    it('adds a client block to a bare config', () => {
+        const out = setConfigImages('export default defineConfig({});', false);
+        expect(out).toContain('client: { images: false }');
+    });
+
+    it('returns null when the shape is unrecognized', () => {
+        expect(setConfigImages('const x = 1;', false)).toBeNull();
+    });
+
+    it('round-trips through defaultConfigSource', () => {
+        const src = defaultConfigSource(false);
+        expect(src).toContain('images: false');
+        expect(setConfigImages(src, true)).toContain('images: true');
+    });
+});

package/test/fonts.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+
+import { fontPreloadTags } from '../src/compiler/fonts';
+
+describe('fontPreloadTags', () => {
+    it('builds a crossorigin preload link per font, skipping non-fonts', () => {
+        const tags = fontPreloadTags(['fonts/a-abc.woff2', 'assets/x-1.js', 'fonts/b.ttf'], '/');
+        expect(tags).toHaveLength(2);
+        expect(tags[0]).toEqual({
+            tag: 'link',
+            attrs: {
+                rel: 'preload',
+                as: 'font',
+                type: 'font/woff2',
+                href: '/fonts/a-abc.woff2',
+                crossorigin: '',
+            },
+            injectTo: 'head',
+        });
+        expect(tags[1].attrs?.type).toBe('font/ttf');
+    });
+
+    it('respects a non-root base path', () => {
+        expect(fontPreloadTags(['fonts/a.woff2'], '/app/')[0].attrs?.href).toBe('/app/fonts/a.woff2');
+    });
+});