toiljs 0.0.7 → 0.0.8

package/src/client/routing/loader.ts

@@ -2,12 +2,17 @@
  * Route data loaders. A route file may export a `loader` alongside its default component; the
  * loader runs on navigation, in parallel with the route's chunk load, and the page suspends until
  * it resolves (so `loading.tsx` shows and `useNavigationPending` is true). The page reads the
- * result with `useLoaderData()`. Results are cached per navigation+URL (revalidated on each
- * navigation); `clearLoaderData()` (router.refresh) busts the cache.
+ * result with `useLoaderData<typeof loader>()`.
+ *
+ * Caching: results are cached by URL (`pathname + search`). Re-renders reuse the cached result (the
+ * loader does not re-run). Across navigations, the cache policy comes from the route's optional
+ * `export const revalidate` ({@link Revalidate}): by default the loader re-runs on every navigation;
+ * a number keeps data fresh for that many seconds; `false` caches until manual invalidation.
+ * `revalidate()` / `router.refresh()` bust the cache to force a refetch.
  */
 import { createContext, useContext, type ComponentType } from 'react';
 
-import { navigationEpoch } from '../navigation/navigation.js';
+import { refresh as rerender } from '../navigation/navigation.js';
 import type { RouteDef } from '../types.js';
 import type { RouteParams } from './match.js';
 
@@ -20,9 +25,21 @@ export interface LoaderArgs {
 /** A route `loader`: `export const loader = ({ params }) => …` (sync or async). */
 export type LoaderFunction<T = unknown> = (args: LoaderArgs) => T | Promise<T>;
 
+/**
+ * Per-route cache policy, set with `export const revalidate` in a route file:
+ * - `0` (default): re-run the loader on every navigation to the route.
+ * - a positive number: reuse cached data across navigations for that many **seconds**, then refetch.
+ * - `false`: cache indefinitely until manually invalidated (`revalidate()` / `router.refresh()`).
+ */
+export type Revalidate = number | false;
+
+/** Resolves the data type for {@link useLoaderData}: `typeof loader` → its (awaited) return, else `T`. */
+export type LoaderData<T> = T extends (...args: never[]) => infer R ? Awaited<R> : T;
+
 interface RouteModule {
     default: ComponentType;
     loader?: LoaderFunction;
+    revalidate?: Revalidate;
 }
 interface RouteData {
     Component: ComponentType;
@@ -33,59 +50,105 @@ interface Entry {
     promise: Promise<void>;
     value?: RouteData;
     error?: unknown;
+    /** `Date.now()` when the fetch settled (`0` while pending). */
+    loadedAt: number;
+    /** Cache policy captured from the route module once loaded. */
+    revalidate: Revalidate;
+    /** Navigation epoch at which this entry was (re)fetched. */
+    epoch: number;
+    /** Whether the route exports a `loader` — a route without one has no data that can change. */
+    hasLoader: boolean;
 }
 
 const cache = new Map<string, Entry>();
-const MAX_ENTRIES = 16;
+const MAX_ENTRIES = 32;
+
+/** Cache key for a URL: path + query (hash is ignored — it never changes loader data). */
+export function loaderKey(pathname: string, search: string): string {
+    return `${pathname}${search}`;
+}
 
 /** Loads the route module and runs its loader (if any), in parallel where possible. */
-async function loadRoute(route: RouteDef, params: RouteParams): Promise<RouteData> {
+async function loadRoute(
+    route: RouteDef,
+    params: RouteParams,
+): Promise<{ data: RouteData; revalidate: Revalidate; hasLoader: boolean }> {
     const mod: RouteModule = await route.load();
     const searchParams = new URLSearchParams(
         typeof window === 'undefined' ? '' : window.location.search,
     );
     const data = mod.loader ? await mod.loader({ params, searchParams }) : undefined;
-    return { Component: mod.default, data };
+    return {
+        data: { Component: mod.default, data },
+        revalidate: mod.revalidate ?? 0,
+        hasLoader: mod.loader != null,
+    };
 }
 
-/** Drops entries from previous navigations (and caps the cache as a backstop). */
-function prune(): void {
-    const current = `${String(navigationEpoch())}:`;
-    for (const key of cache.keys()) {
-        if (!key.startsWith(current)) cache.delete(key);
-    }
+/** Whether a settled entry must be refetched for the current navigation. */
+function isStale(entry: Entry, epoch: number): boolean {
+    if (entry.status === 'error') return true; // always retry a failed load
+    // A route with no loader has no data that can change — keep it cached so repeat navigations
+    // render synchronously (instant) instead of re-suspending and remounting on every switch.
+    if (!entry.hasLoader) return false;
+    if (entry.revalidate === false) return false; // cache forever
+    if (entry.revalidate === 0) return entry.epoch !== epoch; // refetch once per navigation
+    return Date.now() - entry.loadedAt >= entry.revalidate * 1000; // time-based staleness
+}
+
+/** Starts (and caches) a fresh fetch for `key`. */
+function startFetch(route: RouteDef, params: RouteParams, key: string, epoch: number): Entry {
+    const created: Entry = {
+        status: 'pending',
+        promise: Promise.resolve(),
+        loadedAt: 0,
+        revalidate: 0,
+        epoch,
+        hasLoader: false,
+    };
+    created.promise = loadRoute(route, params).then(
+        (result) => {
+            created.value = result.data;
+            created.revalidate = result.revalidate;
+            created.hasLoader = result.hasLoader;
+            created.loadedAt = Date.now();
+            created.status = 'done';
+        },
+        (error: unknown) => {
+            created.error = error;
+            created.loadedAt = Date.now();
+            created.status = 'error';
+        },
+    );
+    cache.set(key, created);
     while (cache.size > MAX_ENTRIES) {
         const oldest = cache.keys().next().value;
-        if (oldest === undefined) break;
+        if (oldest === undefined || oldest === key) break;
         cache.delete(oldest);
     }
+    return created;
 }
 
 /**
- * Reads (or starts) the route's module + loader data for `key`, suspending until ready. Throws the
- * loader's error so the route's `error.tsx` boundary can catch it.
+ * Reads (or starts) the route's module + loader data for the URL `key`, suspending until ready.
+ * Throws the loader's error so the route's `error.tsx` boundary can catch it. `epoch` is the current
+ * navigation epoch, used to refetch once-per-navigation under the default cache policy.
  */
-export function readRouteData(route: RouteDef, params: RouteParams, key: string): RouteData {
+export function readRouteData(
+    route: RouteDef,
+    params: RouteParams,
+    key: string,
+    epoch: number,
+): RouteData {
     let entry = cache.get(key);
-    if (!entry) {
-        const created: Entry = { status: 'pending', promise: Promise.resolve() };
-        created.promise = loadRoute(route, params).then(
-            (value) => {
-                created.value = value;
-                created.status = 'done';
-            },
-            (error: unknown) => {
-                created.error = error;
-                created.status = 'error';
-            },
-        );
-        cache.set(key, created);
-        prune();
-        entry = created;
+    if (entry && entry.status !== 'pending' && isStale(entry, epoch)) {
+        entry = undefined; // stale → drop and refetch below
     }
+    entry ??= startFetch(route, params, key, epoch);
     if (entry.status === 'pending') throw entry.promise;
     if (entry.status === 'error') throw entry.error;
-    return entry.value as RouteData;
+    if (!entry.value) throw entry.promise;
+    return entry.value;
 }
 
 /** Clears all cached loader data, so the next render re-runs loaders (used by router.refresh). */
@@ -93,10 +156,58 @@ export function clearLoaderData(): void {
     cache.clear();
 }
 
+/** Cache key for an href (relative or absolute), matching {@link loaderKey}. */
+function keyForHref(href: string): string | undefined {
+    if (typeof window === 'undefined') return undefined;
+    try {
+        const url = new URL(href, window.location.href);
+        return loaderKey(url.pathname, url.search);
+    } catch {
+        return undefined;
+    }
+}
+
+/**
+ * Invalidates cached loader data so it refetches on the next render. With no argument, clears every
+ * route; with an `href`, clears just that route's entry. Pair with a re-render (the active route
+ * refetches and suspends) — see {@link revalidate}.
+ */
+export function invalidateLoaderData(href?: string): void {
+    if (href === undefined) {
+        cache.clear();
+        return;
+    }
+    const key = keyForHref(href);
+    if (key !== undefined) cache.delete(key);
+}
+
+/**
+ * Invalidates loader data and re-renders so the active route refetches. Call after a mutation to
+ * refresh the current route (`revalidate()`), or target another route by href
+ * (`revalidate('/posts')`). Usable outside React (e.g. in an event handler after a `fetch`).
+ */
+export function revalidate(href?: string): void {
+    invalidateLoaderData(href);
+    rerender();
+}
+
 /** Holds the active route's loader data; provided by the Router, read by {@link useLoaderData}. */
 export const LoaderDataContext = createContext<unknown>(undefined);
 
-/** The data returned by the active route's `loader` (`undefined` if it has none). */
-export function useLoaderData<T = unknown>(): T {
-    return useContext(LoaderDataContext) as T;
+/**
+ * The data returned by the active route's `loader`. Three ways to type it, easiest first:
+ *
+ * 1. **Pass the loader** — zero generics, fully inferred from your loader's return:
+ *    `const data = useLoaderData(loader);`
+ * 2. Pass `typeof loader` as a type argument: `useLoaderData<typeof loader>();`
+ * 3. Pass an explicit shape: `useLoaderData<Post>();`
+ *
+ * With no argument and no type, it returns `unknown` (never `any`) — so the data is there at runtime,
+ * but you must annotate or narrow before using it. There's no way to infer the type from a bare call:
+ * TypeScript can't tell which file (and so which `loader`) the call belongs to — hence option 1.
+ */
+export function useLoaderData<L extends LoaderFunction>(loader: L): Awaited<ReturnType<L>>;
+export function useLoaderData<T = unknown>(): LoaderData<T>;
+export function useLoaderData(_loader?: LoaderFunction): unknown {
+    return useContext(LoaderDataContext);
 }

package/src/compiler/config.ts

@@ -24,6 +24,12 @@ export interface ClientConfig {
     readonly base?: string;
     /** Dev server port. Default `3000`. */
     readonly port?: number;
+    /**
+     * Optimize imported images at build time (resize/convert via `vite-imagetools` + sharp): an
+     * import like `logo.png?w=400;800&format=webp&as=srcset` emits resized, compressed variants.
+     * Default `true`. Set `false` to disable the pipeline (images are then served as-is).
+     */
+    readonly images?: boolean;
     /**
      * Raw Vite escape hatch, deep-merged over the framework's opinionated config.
      * This is NOT the client config itself — toil owns the Vite setup; use this only
@@ -68,6 +74,8 @@ export interface ResolvedToilConfig {
     readonly outDir: string;
     readonly base: string;
     readonly port: number;
+    /** Whether build-time image optimization (`vite-imagetools`) is enabled. */
+    readonly images: boolean;
     /** Absolute path to the framework client runtime (`toiljs/client`). */
     readonly runtimePath: string;
     readonly vite: InlineConfig;
@@ -128,6 +136,7 @@ export async function loadConfig(
         outDir: client.outDir ?? 'build/client',
         base: client.base ?? '/',
         port: opts.port ?? client.port ?? 3000,
+        images: client.images ?? true,
         runtimePath: resolveRuntimePath(),
         vite: client.vite ?? {},
     };

package/src/compiler/generate.ts

@@ -36,10 +36,13 @@ const ASSET_MODULES = ASSET_EXTENSIONS.map(
 
 export const TOIL_ENV_DTS =
     `// AUTO-GENERATED by toil — do not edit.\n` +
+    // Types for image-optimization query imports (`import img from './x.png?w=400&format=webp'`).
+    `/// <reference types="vite-imagetools/client" />\n` +
     `declare const Toil: typeof import('toiljs/client');\n` +
     `declare namespace Toil {\n` +
     `    type LoaderArgs = import('toiljs/client').LoaderArgs;\n` +
     `    type LoaderFunction<T = unknown> = import('toiljs/client').LoaderFunction<T>;\n` +
+    `    type Revalidate = import('toiljs/client').Revalidate;\n` +
     `    type RouteErrorProps = import('toiljs/client').RouteErrorProps;\n` +
     `}\n` +
     `declare const BinaryWriter: typeof import('toiljs/io').BinaryWriter;\n` +

package/src/compiler/image-report.ts

@@ -0,0 +1,85 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import pc from 'picocolors';
+import type { Logger, Plugin } from 'vite';
+
+/** Raster/vector outputs the image pipeline may emit. */
+const IMAGE_RE = /\.(png|jpe?g|webp|avif|gif|tiff|svg)$/i;
+
+/** Formats a byte count like Vite's asset table (kB, base 1000). */
+function kb(bytes: number): string {
+    return `${(bytes / 1000).toFixed(2)} kB`;
+}
+
+interface Variant {
+    readonly out: string;
+    readonly outSize: number;
+}
+
+/**
+ * Build-only plugin that reports which imported images the pipeline optimized — each source image,
+ * its emitted variant(s), and the size saved. `public/` assets (copied as-is) never enter the
+ * bundle, so they don't appear here. Logs nothing when no images were processed.
+ *
+ * `viteRoot` is Vite's root (the `.toil` dir) that emitted assets' `originalFileNames` are relative
+ * to; `projectRoot` is used only to print friendly source paths.
+ */
+export function imageReportPlugin(projectRoot: string, viteRoot: string): Plugin {
+    let logger: Logger | undefined;
+    return {
+        name: 'toil:image-report',
+        apply: 'build',
+        configResolved(config) {
+            logger = config.logger;
+        },
+        writeBundle(_options, bundle) {
+            // Group emitted image assets by their source file.
+            const bySource = new Map<string, { label: string; inSize: number | null; variants: Variant[] }>();
+            for (const file of Object.values(bundle)) {
+                if (file.type !== 'asset' || !IMAGE_RE.test(file.fileName)) continue;
+                const source = file.originalFileNames[0];
+                const key = source ?? file.fileName;
+                const outSize =
+                    typeof file.source === 'string'
+                        ? Buffer.byteLength(file.source)
+                        : file.source.byteLength;
+
+                let entry = bySource.get(key);
+                if (!entry) {
+                    let inSize: number | null = null;
+                    let label = '(generated)';
+                    if (source !== undefined) {
+                        const abs = path.resolve(viteRoot, source);
+                        label = path.relative(projectRoot, abs);
+                        try {
+                            inSize = fs.statSync(abs).size;
+                        } catch {
+                            inSize = null;
+                        }
+                    }
+                    entry = { label, inSize, variants: [] };
+                    bySource.set(key, entry);
+                }
+                entry.variants.push({ out: file.fileName, outSize });
+            }
+
+            if (bySource.size === 0 || !logger) return;
+
+            const count = bySource.size;
+            logger.info('');
+            logger.info(pc.green(`  ✓ optimized ${String(count)} image${count === 1 ? '' : 's'}`));
+            for (const { label, inSize, variants } of bySource.values()) {
+                logger.info(`  ${pc.dim(label)}`);
+                for (const v of variants) {
+                    const saved =
+                        inSize && inSize > 0
+                            ? pc.green(`  -${String(Math.round((1 - v.outSize / inSize) * 100))}%`)
+                            : '';
+                    const from = inSize ? `${kb(inSize)} → ` : '';
+                    logger.info(`    ${pc.dim('→')} ${v.out}  ${from}${kb(v.outSize)}${saved}`);
+                }
+            }
+        },
+    };
+}

package/src/compiler/vite.ts

@@ -3,10 +3,12 @@ import path from 'node:path';
 import { pathToFileURL } from 'node:url';
 
 import react from '@vitejs/plugin-react';
+import { imagetools } from 'vite-imagetools';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import { mergeConfig, type InlineConfig, type PluginOption } from 'vite';
 
 import { type ResolvedToilConfig } from './config.js';
+import { imageReportPlugin } from './image-report.js';
 import { toilPlugin } from './plugin.js';
 
 /** Image extensions routed to `images/` in the build output. */
@@ -73,6 +75,16 @@ export async function createViteConfig(cfg: ResolvedToilConfig): Promise<InlineC
         configFile: false,
         plugins: [
             tailwind,
+            // Build-time image resize/optimization. Every *imported* raster image is compressed to
+            // webp by default (so a plain `<img src={imported}>` is optimized too, not just
+            // `Toil.Image`); add `?w=400;800&format=…` to resize or pick a format. `public/` assets
+            // referenced by string path are served as-is. Disabled by `client.images: false`.
+            cfg.images
+                ? imagetools({
+                      defaultDirectives: () => new URLSearchParams({ format: 'webp', quality: '80' }),
+                  })
+                : undefined,
+            cfg.images ? imageReportPlugin(cfg.root, cfg.toilDir) : undefined,
             nodePolyfills({ globals: { Buffer: true, global: true, process: true } }),
             react(),
             toilPlugin(cfg),

package/test/dom/Image.test.tsx

@@ -0,0 +1,46 @@
+// @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');
+    });
+
+    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 drops width/height and absolutely positions the image', () => {
+        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);
+        expect(img.style.position).toBe('absolute');
+        expect(img.style.objectFit).toBe('cover');
+    });
+
+    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.style.backgroundImage).toContain('data:image/x');
+        fireEvent.load(img);
+        expect(img.style.backgroundImage).toBe('');
+    });
+});

package/test/dom/Script.test.tsx

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

@@ -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('');
+        });
+    });
+});