toiljs 0.0.54 → 0.0.56

package/src/client/dev/devtools.tsx

@@ -7,7 +7,7 @@
  * It stays decoupled from the Router (it computes the current match itself via `matchRoute`) so it
  * renders even when the app tree has crashed.
  */
-import { useEffect, useState, useSyncExternalStore, type ReactNode } from 'react';
+import { type ReactNode, useEffect, useState, useSyncExternalStore } from 'react';
 
 import { type DevError, getErrorLog, subscribeErrors } from './error-overlay.js';
 import {
@@ -21,10 +21,10 @@ import {
 import {
     clearLoaderData,
     inspectLoaderCache,
+    type LoaderCacheSnapshot,
     loaderKey,
     revalidate,
     subscribeLoaderCache,
-    type LoaderCacheSnapshot,
 } from '../routing/loader.js';
 import { matchRoute } from '../routing/match.js';
 import { getPages } from '../search/search.js';
@@ -52,10 +52,22 @@ function ToilLogo({ size = 16 }: { size?: number }): ReactNode {
                     x2="467.12"
                     y2="467.12"
                     gradientUnits="userSpaceOnUse">
-                    <stop offset="0" stopColor="#6990ff" />
-                    <stop offset=".28" stopColor="#521be0" />
-                    <stop offset=".66" stopColor="#6900f4" />
-                    <stop offset="1" stopColor="#7f00f6" />
+                    <stop
+                        offset="0"
+                        stopColor="#6990ff"
+                    />
+                    <stop
+                        offset=".28"
+                        stopColor="#521be0"
+                    />
+                    <stop
+                        offset=".66"
+                        stopColor="#6900f4"
+                    />
+                    <stop
+                        offset="1"
+                        stopColor="#7f00f6"
+                    />
                 </linearGradient>
                 <linearGradient
                     id="toilDtB"
@@ -64,12 +76,28 @@ function ToilLogo({ size = 16 }: { size?: number }): ReactNode {
                     x2="149.99"
                     y2="0"
                     gradientUnits="userSpaceOnUse">
-                    <stop offset=".15" stopColor="#6990ff" stopOpacity=".6" />
-                    <stop offset=".55" stopColor="#531ae1" />
+                    <stop
+                        offset=".15"
+                        stopColor="#6990ff"
+                        stopOpacity=".6"
+                    />
+                    <stop
+                        offset=".55"
+                        stopColor="#531ae1"
+                    />
                 </linearGradient>
             </defs>
-            <rect width="500" height="500" rx="130" ry="130" fill="url(#toilDtA)" />
-            <path d="M299.98,0L0,355.49v-225.49C0,58.2,58.2,0,130,0h169.98Z" fill="url(#toilDtB)" />
+            <rect
+                width="500"
+                height="500"
+                rx="130"
+                ry="130"
+                fill="url(#toilDtA)"
+            />
+            <path
+                d="M299.98,0L0,355.49v-225.49C0,58.2,58.2,0,130,0h169.98Z"
+                fill="url(#toilDtB)"
+            />
             <path
                 d="M106.17,111.11h285.24c9.9,0,16.7,9.96,13.09,19.18l-17.98,45.96c-2.11,5.39-7.31,8.94-13.09,8.94h-74.65c-7.76,0-14.06,6.29-14.06,14.06v214.94c0,7.76-6.29,14.06-14.06,14.06h-45.96c-7.76,0-14.06-6.29-14.06-14.06v-217.25c0-7.76-6.29-14.06-14.06-14.06h-73.66c-5.82,0-11.04-3.59-13.12-9.02l-16.76-43.64c-3.54-9.21,3.26-19.1,13.12-19.1Z"
                 fill="#fff"
@@ -194,7 +222,10 @@ function safeJson(value: unknown): string {
 }
 
 /** Reads the current document head's meta + link tags (live). */
-function readHead(): { metas: { name: string; content: string }[]; links: { rel: string; href: string }[] } {
+function readHead(): {
+    metas: { name: string; content: string }[];
+    links: { rel: string; href: string }[];
+} {
     const metas: { name: string; content: string }[] = [];
     const links: { rel: string; href: string }[] = [];
     if (typeof document === 'undefined') return { metas, links };
@@ -346,7 +377,9 @@ function RouteTab({
             <Row k="slots">{activeSlots.length ? activeSlots.join(', ') : 'none'}</Row>
             <Row k="navigating">{pending ? 'yes' : 'no'}</Row>
 
-            <p className="toil-dt-sec" style={{ marginTop: 12 }}>
+            <p
+                className="toil-dt-sec"
+                style={{ marginTop: 12 }}>
                 Routes ({routes.length})
             </p>
             {routes.map((r) => {
@@ -474,7 +507,9 @@ function HeadTab(): ReactNode {
         <div className="toil-dt-body">
             <Row k="title">{title || '(none)'}</Row>
 
-            <p className="toil-dt-sec" style={{ marginTop: 10 }}>
+            <p
+                className="toil-dt-sec"
+                style={{ marginTop: 10 }}>
                 OpenGraph preview
             </p>
             <div className="toil-dt-og">
@@ -491,23 +526,41 @@ function HeadTab(): ReactNode {
                 </div>
             </div>
 
-            <p className="toil-dt-sec" style={{ marginTop: 10 }}>
+            <p
+                className="toil-dt-sec"
+                style={{ marginTop: 10 }}>
                 SEO checklist
             </p>
-            <Check ok={Boolean(title)} label="Has a title" />
-            <Check ok={meta('description') !== undefined} label="Has a meta description" />
-            <Check ok={og.image !== undefined} label="Has an og:image" />
-            <Check ok={links.some((l) => l.rel === 'canonical')} label="Has a canonical link" />
+            <Check
+                ok={Boolean(title)}
+                label="Has a title"
+            />
+            <Check
+                ok={meta('description') !== undefined}
+                label="Has a meta description"
+            />
+            <Check
+                ok={og.image !== undefined}
+                label="Has an og:image"
+            />
+            <Check
+                ok={links.some((l) => l.rel === 'canonical')}
+                label="Has a canonical link"
+            />
             <Check
                 ok={pages.length === 0 || described === pages.length}
                 label={`Pages with a description: ${String(described)}/${String(pages.length)}`}
             />
 
-            <p className="toil-dt-sec" style={{ marginTop: 10 }}>
+            <p
+                className="toil-dt-sec"
+                style={{ marginTop: 10 }}>
                 Meta ({metas.length})
             </p>
             {metas.map((m, i) => (
-                <Row k={m.name} key={`${m.name}:${String(i)}`}>
+                <Row
+                    k={m.name}
+                    key={`${m.name}:${String(i)}`}>
                     {m.content}
                 </Row>
             ))}
@@ -546,7 +599,8 @@ function BuildTab({ info }: { info: DevInfo | null }): ReactNode {
 
 function ErrorsTab(): ReactNode {
     const errors = useErrors();
-    if (errors.length === 0) return <p className="toil-dt-empty toil-dt-body">No errors captured.</p>;
+    if (errors.length === 0)
+        return <p className="toil-dt-empty toil-dt-body">No errors captured.</p>;
     return (
         <div className="toil-dt-body">
             {[...errors].reverse().map((e, i) => (
@@ -974,45 +1028,58 @@ export function DevToolbar({
 
     return (
         <>
-        <div className={`toil-dt ${p.side}`}>
-            <div className="toil-dt-panel">
-                <div className="toil-dt-head">
-                    <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                        <ToilLogo size={14} />
-                        <span className="toil-dt-logo">toiljs</span> devtools
-                        <span className={`toil-dt-dot ${dotClass}`} />
-                    </span>
-                    <button
-                        className="toil-dt-x"
-                        onClick={() => {
-                            setPrefs({ open: false });
-                        }}>
-                        ✕
-                    </button>
-                </div>
-                <div className="toil-dt-tabs">
-                    {TABS.map((t) => (
+            <div className={`toil-dt ${p.side}`}>
+                <div className="toil-dt-panel">
+                    <div className="toil-dt-head">
+                        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                            <ToilLogo size={14} />
+                            <span className="toil-dt-logo">toiljs</span> devtools
+                            <span className={`toil-dt-dot ${dotClass}`} />
+                        </span>
                         <button
-                            key={t.id}
-                            className={`toil-dt-tab ${p.tab === t.id ? 'active' : ''}`}
+                            className="toil-dt-x"
                             onClick={() => {
-                                setPrefs({ tab: t.id });
+                                setPrefs({ open: false });
                             }}>
-                            {t.label}
-                            {t.id === 'errors' && errors.length > 0 ? ` (${String(errors.length)})` : ''}
+                            ✕
                         </button>
-                    ))}
+                    </div>
+                    <div className="toil-dt-tabs">
+                        {TABS.map((t) => (
+                            <button
+                                key={t.id}
+                                className={`toil-dt-tab ${p.tab === t.id ? 'active' : ''}`}
+                                onClick={() => {
+                                    setPrefs({ tab: t.id });
+                                }}>
+                                {t.label}
+                                {t.id === 'errors' && errors.length > 0
+                                    ? ` (${String(errors.length)})`
+                                    : ''}
+                            </button>
+                        ))}
+                    </div>
+                    {p.tab === 'route' && (
+                        <RouteTab
+                            routes={routes}
+                            slots={slots}
+                            info={info}
+                        />
+                    )}
+                    {p.tab === 'data' && <DataTab />}
+                    {p.tab === 'head' && <HeadTab />}
+                    {p.tab === 'build' && <BuildTab info={info} />}
+                    {p.tab === 'errors' && <ErrorsTab />}
+                    {p.tab === 'ai' && (
+                        <AiTab
+                            info={info}
+                            routes={routes}
+                        />
+                    )}
+                    {p.tab === 'prefs' && <PrefsTab />}
                 </div>
-                {p.tab === 'route' && <RouteTab routes={routes} slots={slots} info={info} />}
-                {p.tab === 'data' && <DataTab />}
-                {p.tab === 'head' && <HeadTab />}
-                {p.tab === 'build' && <BuildTab info={info} />}
-                {p.tab === 'errors' && <ErrorsTab />}
-                {p.tab === 'ai' && <AiTab info={info} routes={routes} />}
-                {p.tab === 'prefs' && <PrefsTab />}
             </div>
-        </div>
-        {pal}
+            {pal}
         </>
     );
 }

package/src/client/dev/error-overlay.tsx

@@ -4,7 +4,13 @@
  * plus `window` `error` / `unhandledrejection` events. Shows the message, stack, and (for render
  * errors) the React component stack, with Dismiss / Reload. Inert in production builds.
  */
-import { Component, type CSSProperties, type ErrorInfo, type ReactNode, useSyncExternalStore, } from 'react';
+import {
+    Component,
+    type CSSProperties,
+    type ErrorInfo,
+    type ReactNode,
+    useSyncExternalStore,
+} from 'react';
 
 /** A captured dev error. */
 export interface DevError {

package/src/client/head/metadata.ts

@@ -4,7 +4,7 @@
  * data); the compiler-driven loader resolves it to a {@link HeadSpec} that the router applies as the
  * route's baseline head (component-level `useHead`/`<Head>` still compose on top and can override).
  */
-import { useHead, type HeadSpec, type LinkTag, type MetaTag } from './head.js';
+import { type HeadSpec, type LinkTag, type MetaTag, useHead } from './head.js';
 import type { RouteParams } from '../routing/match.js';
 
 /** OpenGraph fields, expanded to `og:*` meta tags. */

package/src/client/index.ts

@@ -10,7 +10,13 @@
 
 export { mount } from './routing/mount.js';
 export { Router } from './routing/Router.js';
-export { Auth, register as authRegister, login as authLogin, buildLoginMessage, LOGIN_CONTEXT } from './auth.js';
+export {
+    Auth,
+    register as authRegister,
+    login as authLogin,
+    buildLoginMessage,
+    LOGIN_CONTEXT,
+} from './auth.js';
 export type { KdfParams, AuthOptions } from './auth.js';
 export { Link } from './navigation/Link.js';
 export type { LinkProps } from './navigation/Link.js';
@@ -36,7 +42,12 @@ export {
     useNavigationPending,
 } from './routing/hooks.js';
 export type { RouterInstance } from './routing/hooks.js';
-export { useLoaderData, revalidate, invalidateLoaderData, LoaderDataContext } from './routing/loader.js';
+export {
+    useLoaderData,
+    revalidate,
+    invalidateLoaderData,
+    LoaderDataContext,
+} from './routing/loader.js';
 export type {
     LoaderArgs,
     LoaderFunction,

package/src/client/routing/Router.tsx

@@ -1,4 +1,4 @@
-import { createElement, Suspense, useLayoutEffect, type ReactNode } from 'react';
+import { createElement, type ReactNode, Suspense, useLayoutEffect } from 'react';
 
 import { ErrorBoundary } from './error-boundary.js';
 import { useLocation } from './hooks.js';
@@ -9,7 +9,7 @@ import {
     resolveLayout,
     resolveNotFound,
 } from './lazy.js';
-import { loaderKey, LoaderDataContext, readRouteData } from './loader.js';
+import { LoaderDataContext, loaderKey, readRouteData } from './loader.js';
 import { matchRoute, type RouteParams } from './match.js';
 import { useRouteHead } from '../head/head.js';
 import { ParamsContext } from './params-context.js';

package/src/client/routing/error-boundary.tsx

@@ -1,4 +1,4 @@
-import { Component, Suspense, type ComponentType, type ReactNode } from 'react';
+import { Component, type ComponentType, type ReactNode, Suspense } from 'react';
 
 import type { RouteErrorProps } from '../types.js';
 

package/src/client/routing/loader.ts

@@ -10,10 +10,10 @@
  * 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 { type ComponentType, createContext, useContext } from 'react';
 
 import type { HeadSpec } from '../head/head.js';
-import { resolveMetadata, type GenerateMetadata, type Metadata } from '../head/metadata.js';
+import { type GenerateMetadata, type Metadata, resolveMetadata } from '../head/metadata.js';
 import { navigationEpoch, refresh as rerender } from '../navigation/navigation.js';
 import type { RouteDef } from '../types.js';
 import type { RouteParams } from './match.js';

package/src/client/routing/mount.tsx

@@ -1,11 +1,7 @@
 import { createRoot, hydrateRoot } from 'react-dom/client';
 
 import { DevToolbar } from '../dev/devtools.js';
-import {
-    DevErrorBoundary,
-    DevErrorOverlay,
-    initDevErrorOverlay,
-} from '../dev/error-overlay.js';
+import { DevErrorBoundary, DevErrorOverlay, initDevErrorOverlay } from '../dev/error-overlay.js';
 import { initNavigation } from '../navigation/navigation.js';
 import { startPrefetcher } from '../navigation/prefetch.js';
 import { hydrateLoaderData } from './loader.js';
@@ -73,7 +69,10 @@ export function mount(
             <>
                 <DevErrorBoundary>{app}</DevErrorBoundary>
                 <DevErrorOverlay />
-                <DevToolbar routes={routes} slots={slots} />
+                <DevToolbar
+                    routes={routes}
+                    slots={slots}
+                />
             </>,
         );
     } else if (isSsrDocument()) {

package/src/compiler/docs.ts

@@ -346,7 +346,7 @@ export const TOIL_DOCS: Record<string, string> = {
         '  an `<Island>`. A route that cannot render this way is skipped at build (with a warning) and',
         '  simply falls back to normal client rendering.',
         '- Hole values are HTML-escaped exactly as React escapes them, so hydration is byte-for-byte',
-        '  clean. Keep a repeat row\'s structure the same across items (only the leaf hole values vary).',
+        "  clean. Keep a repeat row's structure the same across items (only the leaf hole values vary).",
         '- Build output for an SSR route lands in `build/client/_ssr/` (the template + its manifest)',
         '  alongside the generated `Slot` module; routes without `ssr = true` are unaffected.',
     ]),

package/src/compiler/email-preview.ts

@@ -13,7 +13,7 @@ import path from 'node:path';
 import type { ViteDevServer } from 'vite';
 
 import type { ResolvedToilConfig } from './config.js';
-import { renderEmailFile, toPascal, type RenderedEmail } from './emails.js';
+import { type RenderedEmail, renderEmailFile, toPascal } from './emails.js';
 
 /** One discoverable email: its generated `Emails.<name>` and its absolute file. */
 export interface EmailListItem {

package/src/compiler/generate.ts

@@ -4,7 +4,7 @@ import path from 'node:path';
 import { type ResolvedToilConfig } from './config.js';
 import { writeDocs } from './docs.js';
 import { buildPageIndex, pagesModuleSource } from './pages.js';
-import { scanRoutes, type ScannedRoute } from './routes.js';
+import { type ScannedRoute, scanRoutes } from './routes.js';
 import { llmsTxt, robotsTxt, sitemapXml } from './seo.js';
 
 /**

package/src/compiler/seo.ts

@@ -407,9 +407,7 @@ export function llmsTxt(
             const title = escapeMarkdownInline(page.title);
             const url = escapeMarkdownUrl(page.url);
             const desc =
-                page.description !== undefined
-                    ? `: ${escapeMarkdownInline(page.description)}`
-                    : '';
+                page.description !== undefined ? `: ${escapeMarkdownInline(page.description)}` : '';
             out.push(`- [${title}](${url})${desc}`);
         }
     }

package/src/compiler/ssg.ts

@@ -16,7 +16,7 @@ import { createServer } from 'vite';
 import { type ResolvedToilConfig } from './config.js';
 import { extractStaticMetadata, loadTypeScript } from './prerender.js';
 import { scanRoutes } from './routes.js';
-import { injectSeoHtml, joinUrl, llmsTxt, routeSeo, sitemapXml, type LlmsPage } from './seo.js';
+import { injectSeoHtml, joinUrl, type LlmsPage, llmsTxt, routeSeo, sitemapXml } from './seo.js';
 import { createViteConfig } from './vite.js';
 
 /** Reads a string field off a metadata record, or undefined. */
@@ -91,7 +91,9 @@ export async function prerenderStaticParams(cfg: ResolvedToilConfig): Promise<st
             try {
                 mod = (await server.ssrLoadModule(route.file)) as RouteModule;
             } catch (err) {
-                warn(`skipped ${route.pattern} (${err instanceof Error ? err.message : String(err)})`);
+                warn(
+                    `skipped ${route.pattern} (${err instanceof Error ? err.message : String(err)})`,
+                );
                 continue;
             }
             if (typeof mod.generateStaticParams !== 'function') continue;
@@ -116,12 +118,16 @@ export async function prerenderStaticParams(cfg: ResolvedToilConfig): Promise<st
                             typeof mod.loader === 'function'
                                 ? await mod.loader({ params, searchParams })
                                 : undefined;
-                        metadata = asMetadata(await mod.generateMetadata({ params, searchParams, data }));
+                        metadata = asMetadata(
+                            await mod.generateMetadata({ params, searchParams, data }),
+                        );
                     } else if (mod.metadata) {
                         metadata = asMetadata(mod.metadata);
                     }
                 } catch (err) {
-                    warn(`metadata failed for ${url} (${err instanceof Error ? err.message : String(err)})`);
+                    warn(
+                        `metadata failed for ${url} (${err instanceof Error ? err.message : String(err)})`,
+                    );
                 }
                 const html = injectSeoHtml(shell, routeSeo(cfg.seo, metadata, url));
                 fs.mkdirSync(path.dirname(target), { recursive: true });

package/src/compiler/template-build.ts

@@ -19,12 +19,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 
-import {
-    createElement,
-    type ComponentType,
-    type Context,
-    type ReactNode,
-} from 'react';
+import { type ComponentType, type Context, createElement, type ReactNode } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { createServer } from 'vite';
 
@@ -36,8 +31,8 @@ import {
     assignSlotIds,
     coherenceHash,
     encodeSlots,
-    extractFromHtml,
     type Extracted,
+    extractFromHtml,
 } from './template.js';
 import { createViteConfig } from './vite.js';
 

package/src/compiler/template.ts

@@ -249,10 +249,7 @@ export function reactEscapeHtml(s: string): string {
  * any tooling that needs to materialise a full page from a template + values).
  * `values` maps a byte offset to the bytes inserted there (offsets may repeat
  * is not allowed; pass them in `slots` order). */
-export function spliceTemplate(
-    tmpl: Buffer,
-    inserts: { offset: number; value: Buffer }[],
-): Buffer {
+export function spliceTemplate(tmpl: Buffer, inserts: { offset: number; value: Buffer }[]): Buffer {
     const parts: Buffer[] = [];
     let prev = 0;
     for (const ins of inserts) {

package/src/compiler/vite.ts

@@ -7,7 +7,7 @@ import pc from 'picocolors';
 import react from '@vitejs/plugin-react';
 import { imagetools } from 'vite-imagetools';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
-import { createLogger, mergeConfig, type InlineConfig, type Logger, type PluginOption } from 'vite';
+import { createLogger, type InlineConfig, type Logger, mergeConfig, type PluginOption } from 'vite';
 
 import { type ResolvedToilConfig } from './config.js';
 import { fontPreloadPlugin } from './fonts.js';