toiljs 0.0.116 → 0.0.118

package/test/dom/Image.test.tsx

@@ -1,144 +0,0 @@
-// @vitest-environment jsdom
-import { cleanup, fireEvent, render } from '@testing-library/react';
-import { afterEach, describe, expect, it } from 'vitest';
-
-import { Image } from '../../src/client/components/Image';
-
-afterEach(cleanup);
-
-describe('Image', () => {
-    it('lazy-loads and decodes async by default, with the given dimensions', () => {
-        const { getByAltText } = render(
-            <Image
-                src="/a.png"
-                alt="a"
-                width={200}
-                height={100}
-            />,
-        );
-        const img = getByAltText('a') as HTMLImageElement;
-        expect(img.getAttribute('src')).toBe('/a.png');
-        expect(img.getAttribute('loading')).toBe('lazy');
-        expect(img.getAttribute('decoding')).toBe('async');
-        expect(img.getAttribute('width')).toBe('200');
-        expect(img.getAttribute('height')).toBe('100');
-        expect(img.getAttribute('fetchpriority')).toBe('auto');
-        // width+height reserve space via an explicit aspect-ratio (survives responsive `width:100%`).
-        expect(img.style.aspectRatio).toBe('200 / 100');
-        expect(img.className).toBe('');
-    });
-
-    it('priority images load eagerly with high fetch priority', () => {
-        const { getByAltText } = render(
-            <Image
-                src="/hero.png"
-                alt="hero"
-                priority
-            />,
-        );
-        const img = getByAltText('hero') as HTMLImageElement;
-        expect(img.getAttribute('loading')).toBe('eager');
-        expect(img.getAttribute('fetchpriority')).toBe('high');
-    });
-
-    it('fill wraps the image in a box; the image lays out via a class, not inline styles', () => {
-        const { getByAltText } = render(
-            <Image
-                src="/bg.png"
-                alt="bg"
-                fill
-                objectFit="cover"
-            />,
-        );
-        const img = getByAltText('bg') as HTMLImageElement;
-        expect(img.hasAttribute('width')).toBe(false);
-        expect(img.hasAttribute('height')).toBe(false);
-        // The fill layout comes from a shipped, overridable CSS class, NOT inline positioning.
-        expect(img.classList.contains('toil-img-fill')).toBe(true);
-        expect(img.style.position).toBe('');
-        // objectFit is genuinely per-instance, so it stays inline.
-        expect(img.style.objectFit).toBe('cover');
-        // The image is wrapped in a <span> box the caller sizes, so it fills the box, not the page.
-        const box = img.parentElement as HTMLElement;
-        expect(box.tagName).toBe('SPAN');
-        expect(box.classList.contains('toil-img-fill-box')).toBe(true);
-    });
-
-    it('puts the caller className/size on the fill box, the fill class on the image', () => {
-        const { getByAltText } = render(
-            <Image
-                src="/bg.png"
-                alt="bg2"
-                fill
-                width={400}
-                height={300}
-                className="hero"
-            />,
-        );
-        const img = getByAltText('bg2') as HTMLImageElement;
-        const box = img.parentElement as HTMLElement;
-        // The caller's className + size land on the box (what they size); the image just fills it.
-        expect(box.classList.contains('hero')).toBe(true);
-        expect(box.classList.contains('toil-img-fill-box')).toBe(true);
-        expect(box.style.width).toBe('400px');
-        expect(box.style.height).toBe('300px');
-        expect(img.classList.contains('toil-img-fill')).toBe(true);
-        expect(img.getAttribute('style')).toBe(null);
-        expect(img.hasAttribute('width')).toBe(false);
-    });
-
-    it('shows a blur placeholder until the image loads', () => {
-        const { getByAltText } = render(
-            <Image
-                src="/p.png"
-                alt="p"
-                width={10}
-                height={10}
-                placeholder="blur"
-                blurDataURL="data:image/x"
-            />,
-        );
-        const img = getByAltText('p') as HTMLImageElement;
-        expect(img.classList.contains('toil-img-blur')).toBe(true);
-        expect(img.style.backgroundImage).toContain('data:image/x');
-        fireEvent.load(img);
-        expect(img.style.backgroundImage).toBe('');
-        expect(img.classList.contains('toil-img-blur')).toBe(false);
-    });
-
-    it('falls back to a skeleton shimmer when placeholder="blur" has no blurDataURL', () => {
-        const { getByAltText } = render(
-            <Image src="/s.png" alt="s" width={10} height={10} placeholder="blur" />,
-        );
-        const img = getByAltText('s') as HTMLImageElement;
-        // never a silent no-op: a neutral skeleton paints (not the blur class, no background image)
-        expect(img.classList.contains('toil-img-skeleton')).toBe(true);
-        expect(img.classList.contains('toil-img-blur')).toBe(false);
-        expect(img.style.backgroundImage).toBe('');
-        fireEvent.load(img);
-        expect(img.classList.contains('toil-img-skeleton')).toBe(false);
-    });
-
-    it('reserves space with an aspect-ratio derived from width+height', () => {
-        const { getByAltText } = render(<Image src="/a.png" alt="a" width={400} height={300} />);
-        const img = getByAltText('a') as HTMLImageElement;
-        expect(img.style.aspectRatio).toBe('400 / 300');
-        expect(img.getAttribute('width')).toBe('400');
-        expect(img.getAttribute('height')).toBe('300');
-    });
-
-    it('reads src/dimensions/blur from a ?toil import object', () => {
-        const { getByAltText } = render(
-            <Image
-                src={{ src: '/hero.webp', width: 40, height: 30, blurDataURL: 'data:image/blur' }}
-                alt="h"
-                placeholder="blur"
-            />,
-        );
-        const img = getByAltText('h') as HTMLImageElement;
-        expect(img.getAttribute('src')).toBe('/hero.webp');
-        expect(img.style.aspectRatio).toBe('40 / 30');
-        expect(img.classList.contains('toil-img-blur')).toBe(true);
-        expect(img.style.backgroundImage).toContain('data:image/blur');
-    });
-});

package/test/dom/Link.test.tsx

@@ -1,67 +0,0 @@
-// @vitest-environment jsdom
-import { cleanup, fireEvent, render } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-
-import { Link } from '../../src/client/navigation/Link';
-
-afterEach(cleanup);
-beforeEach(() => {
-    window.history.replaceState({}, '', '/');
-});
-
-describe('Link', () => {
-    it('intercepts a plain internal click (client nav, default prevented)', () => {
-        const { getByText } = render(<Link href="/about">go</Link>);
-        const prevented = !fireEvent.click(getByText('go'));
-        expect(prevented).toBe(true);
-        expect(window.location.pathname).toBe('/about');
-    });
-
-    it('does not intercept external links', () => {
-        const { getByText } = render(<Link href="https://example.com">ext</Link>);
-        const notPrevented = fireEvent.click(getByText('ext'));
-        expect(notPrevented).toBe(true);
-        expect(window.location.pathname).toBe('/');
-    });
-
-    it('does not intercept modified (cmd/ctrl) clicks', () => {
-        const { getByText } = render(<Link href="/about">go</Link>);
-        const notPrevented = fireEvent.click(getByText('go'), { metaKey: true });
-        expect(notPrevented).toBe(true);
-        expect(window.location.pathname).toBe('/');
-    });
-
-    it('ignores a click when href is missing (data-driven href to a page that does not exist)', () => {
-        // A runtime-undefined href (e.g. `routeMap[missingKey]`) used to throw on `href.startsWith`
-        // inside the click handler. React reports a handler throw as an uncaught *window* error (what
-        // the dev overlay surfaces), not a synchronous throw, so assert no such error fires. The anchor
-        // is inert now: the click is left to the browser, the page stays put.
-        const errors: string[] = [];
-        const onError = (e: ErrorEvent): void => {
-            errors.push(e.message || String(e.error));
-        };
-        window.addEventListener('error', onError);
-        try {
-            const { getByText } = render(<Link href={undefined as unknown as string as never}>x</Link>);
-            fireEvent.click(getByText('x'));
-        } finally {
-            window.removeEventListener('error', onError);
-        }
-        expect(errors).toEqual([]);
-        expect(window.location.pathname).toBe('/');
-    });
-
-    it('forwards anchor attributes (rel, target)', () => {
-        const { getByText } = render(
-            <Link
-                href="https://x.com"
-                target="_blank"
-                rel="noopener noreferrer">
-                x
-            </Link>,
-        );
-        const a = getByText('x') as HTMLAnchorElement;
-        expect(a.getAttribute('rel')).toBe('noopener noreferrer');
-        expect(a.target).toBe('_blank');
-    });
-});

package/test/dom/NavLink.test.tsx

@@ -1,37 +0,0 @@
-// @vitest-environment jsdom
-import { cleanup, render } from '@testing-library/react';
-import { afterEach, describe, expect, it } from 'vitest';
-
-import { NavLink } from '../../src/client/navigation/NavLink';
-
-afterEach(cleanup);
-
-describe('NavLink', () => {
-    it('adds the active class + aria-current on the current route', () => {
-        window.history.replaceState({}, '', '/about');
-        const { getByText } = render(<NavLink href="/about">about</NavLink>);
-        const a = getByText('about') as HTMLAnchorElement;
-        expect(a.className).toContain('active');
-        expect(a.getAttribute('aria-current')).toBe('page');
-    });
-
-    it('is not active on a different route', () => {
-        window.history.replaceState({}, '', '/home');
-        const { getByText } = render(<NavLink href="/about">about</NavLink>);
-        const a = getByText('about') as HTMLAnchorElement;
-        expect(a.className).not.toContain('active');
-        expect(a.getAttribute('aria-current')).toBeNull();
-    });
-
-    it('supports a function className', () => {
-        window.history.replaceState({}, '', '/about');
-        const { getByText } = render(
-            <NavLink
-                href="/about"
-                className={({ isActive }) => (isActive ? 'on' : 'off')}>
-                about
-            </NavLink>,
-        );
-        expect((getByText('about') as HTMLAnchorElement).className).toBe('on');
-    });
-});

package/test/dom/Script.test.tsx

@@ -1,48 +0,0 @@
-// @vitest-environment jsdom
-import { cleanup, render } from '@testing-library/react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import { Script } from '../../src/client/components/Script';
-
-afterEach(cleanup);
-
-const scriptsFor = (key: string): HTMLScriptElement[] =>
-    Array.from(document.querySelectorAll<HTMLScriptElement>(`script[data-toil-script="${key}"]`));
-
-describe('Script', () => {
-    it('injects an async external script on mount (afterInteractive)', () => {
-        render(<Script src="https://cdn.example.com/a.js" />);
-        const els = scriptsFor('https://cdn.example.com/a.js');
-        expect(els).toHaveLength(1);
-        expect(els[0].async).toBe(true);
-    });
-
-    it('dedups: the same src is only injected once across instances', () => {
-        const src = 'https://cdn.example.com/dedup.js';
-        render(
-            <>
-                <Script src={src} />
-                <Script src={src} />
-            </>,
-        );
-        expect(scriptsFor(src)).toHaveLength(1);
-    });
-
-    it('injects an inline script body and fires onLoad + onReady', () => {
-        const onLoad = vi.fn();
-        const onReady = vi.fn();
-        render(
-            <Script
-                id="inline-1"
-                onLoad={onLoad}
-                onReady={onReady}>
-                {'window.__toilTest = 1;'}
-            </Script>,
-        );
-        const els = scriptsFor('inline-1');
-        expect(els).toHaveLength(1);
-        expect(els[0].textContent).toBe('window.__toilTest = 1;');
-        expect(onLoad).toHaveBeenCalledOnce();
-        expect(onReady).toHaveBeenCalledOnce();
-    });
-});

package/test/dom/action.test.tsx

@@ -1,146 +0,0 @@
-// @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

@@ -1,44 +0,0 @@
-// @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

@@ -1,121 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, expectTypeOf, it, vi } from 'vitest';
-
-import type { Revalidate } from '../../src/client/routing/loader';
-import {
-    clearLoaderData,
-    invalidateLoaderData,
-    type LoaderData,
-    loaderKey,
-    readRouteData,
-} 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/navigation.test.ts

@@ -1,59 +0,0 @@
-// @vitest-environment jsdom
-import { beforeEach, describe, expect, it } from 'vitest';
-
-import {
-    back,
-    isNavigationPending,
-    navigate,
-    navigationEpoch,
-    settleNavigation,
-    subscribeLocation,
-} from '../../src/client/navigation/navigation';
-
-beforeEach(() => {
-    window.history.replaceState({}, '', '/');
-});
-
-describe('navigate', () => {
-    it('updates the location and notifies subscribers', () => {
-        let calls = 0;
-        const off = subscribeLocation(() => {
-            calls += 1;
-        });
-        navigate('/about');
-        expect(window.location.pathname).toBe('/about');
-        expect(calls).toBe(1);
-        off();
-    });
-
-    it('replace updates the location too', () => {
-        navigate('/replaced', { replace: true });
-        expect(window.location.pathname).toBe('/replaced');
-    });
-
-    it('increments the navigation epoch', () => {
-        const before = navigationEpoch();
-        navigate('/a');
-        expect(navigationEpoch()).toBe(before + 1);
-    });
-
-    it('is pending after navigate, settled after settleNavigation', () => {
-        navigate('/pending');
-        expect(isNavigationPending()).toBe(true);
-        settleNavigation();
-        expect(isNavigationPending()).toBe(false);
-    });
-
-    it('back() triggers a notification', () => {
-        navigate('/one');
-        navigate('/two');
-        let popped = 0;
-        const off = subscribeLocation(() => {
-            popped += 1;
-        });
-        back();
-        // jsdom fires popstate synchronously for history.back within the same task.
-        expect(popped).toBeGreaterThanOrEqual(0);
-        off();
-    });
-});