toiljs 0.0.11 → 0.0.14

package/examples/basic/client/routes/index.tsx

@@ -1,96 +1,137 @@
-// The home page sets its own title with an absolute template (`%s`), so the tab reads exactly this
-// rather than being suffixed by the layout's "%s | ToilJS".
-export const metadata: Toil.Metadata = {
-    title: 'ToilJS, the modern React framework',
-    titleTemplate: '%s',
-    description: 'File-based routing, instant HMR, build-time SEO, and a WebAssembly backend. Zero config.',
-    openGraph: { title: 'ToilJS', type: 'website' },
-};
-
-const GitHubIcon = () => (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.604-3.369-1.341-3.369-1.341-.454-1.154-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.579.688.481C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
-    </svg>
-);
-
-const icons = {
-    hmr: (
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
-        </svg>
-    ),
-    routing: (
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
-        </svg>
-    ),
-    typescript: (
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-            <rect x="2" y="2" width="20" height="20" rx="3" fill="currentColor" />
-            <path d="M13.5 12H15.5V18H17V12H19V10.5H13.5V12Z" fill="var(--bg)" />
-            <path d="M11 10.5C9.07 10.5 7.5 12.07 7.5 14C7.5 15.45 8.38 16.69 9.65 17.23L7.5 18H11C12.93 18 14.5 16.43 14.5 14.5C14.5 13.26 13.86 12.17 12.9 11.55C12.42 11.22 11.73 10.5 11 10.5ZM11 12C12.1 12 13 12.9 13 14C13 15.1 12.1 16 11 16H9.72C9.28 15.57 9 14.81 9 14C9 12.9 9.9 12 11 12Z" fill="var(--bg)" />
-        </svg>
-    ),
-    builds: (
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
-            <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
-            <line x1="12" y1="22.08" x2="12" y2="12" />
-        </svg>
-    ),
-};
-
-const features = [
-    { icon: icons.hmr,        label: 'Instant HMR' },
-    { icon: icons.routing,    label: 'File Routing' },
-    { icon: icons.typescript, label: 'TypeScript' },
-    { icon: icons.builds,     label: 'Optimized Builds' },
-];
-
-export default function Home() {
-    return (
-        <section className="hero">
-            <div className="hero-logo">
-                <img src="/images/logo.svg" className="hero-logo-glow" alt="" aria-hidden="true" width={96} height={96} />
-                <Toil.Image
-                    src="/images/logo.svg"
-                    className="hero-logo-img"
-                    alt="ToilJS"
-                    width={96}
-                    height={96}
-                    priority
-                />
-            </div>
-
-            <h1 className="hero-title">ToilJS</h1>
-
-            <p className="hero-tagline">
-                Next-gen React.<br />
-                <span>Zero config.</span>
-            </p>
-
-            <p className="hero-desc">
-                File-based routing, blazing-fast HMR, and full TypeScript.
-                <br />All powered by Vite.
-            </p>
-
-            <ul className="features">
-                {features.map(f => (
-                    <li key={f.label} className="feature-badge">
-                        {f.icon}{f.label}
-                    </li>
-                ))}
-            </ul>
-
-            <div className="hero-cta">
-                <Toil.Link href="/get-started" className="btn btn-primary">
-                    Get Started
-                </Toil.Link>
-                <a className="btn btn-secondary" href="https://github.com/btc-vision/toiljs" target="_blank" rel="noopener noreferrer">
-                        <GitHubIcon />
-                        GitHub
-                    </a>
-            </div>
-        </section>
-    );
-}
+// The home page sets its own title with an absolute template (`%s`), so the tab reads exactly this
+// rather than being suffixed by the layout's "%s | ToilJS".
+export const metadata: Toil.Metadata = {
+    title: 'ToilJS, the modern React framework',
+    titleTemplate: '%s',
+    description: 'File-based routing, instant HMR, build-time SEO, and a WebAssembly backend. Zero config.',
+    openGraph: { title: 'ToilJS', type: 'website' }
+};
+
+const GitHubIcon = () => (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.604-3.369-1.341-3.369-1.341-.454-1.154-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.579.688.481C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
+    </svg>
+);
+
+const icons = {
+    hmr: (
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round">
+            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+        </svg>
+    ),
+    routing: (
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round">
+            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+        </svg>
+    ),
+    typescript: (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <rect x="2" y="2" width="20" height="20" rx="3" fill="currentColor" />
+            <path d="M13.5 12H15.5V18H17V12H19V10.5H13.5V12Z" fill="var(--bg)" />
+            <path
+                d="M11 10.5C9.07 10.5 7.5 12.07 7.5 14C7.5 15.45 8.38 16.69 9.65 17.23L7.5 18H11C12.93 18 14.5 16.43 14.5 14.5C14.5 13.26 13.86 12.17 12.9 11.55C12.42 11.22 11.73 10.5 11 10.5ZM11 12C12.1 12 13 12.9 13 14C13 15.1 12.1 16 11 16H9.72C9.28 15.57 9 14.81 9 14C9 12.9 9.9 12 11 12Z"
+                fill="var(--bg)"
+            />
+        </svg>
+    ),
+    builds: (
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round">
+            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+            <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+            <line x1="12" y1="22.08" x2="12" y2="12" />
+        </svg>
+    )
+};
+
+const features = [
+    { icon: icons.hmr, label: 'Instant HMR' },
+    { icon: icons.routing, label: 'File Routing' },
+    { icon: icons.typescript, label: 'TypeScript' },
+    { icon: icons.builds, label: 'Optimized Builds' }
+];
+
+export default function Home() {
+    return (
+        <section className="hero">
+            <div className="hero-logo">
+                <img
+                    src="/images/logo.svg"
+                    className="hero-logo-glow"
+                    alt=""
+                    aria-hidden="true"
+                    width={96}
+                    height={96}
+                />
+                <Toil.Image
+                    src="/images/logo.svg"
+                    className="hero-logo-img"
+                    alt="ToilJS"
+                    width={96}
+                    height={96}
+                    priority
+                />
+            </div>
+
+            <h1 className="hero-title">ToilJS</h1>
+
+            <p className="hero-tagline">
+                Next-gen React.
+                <br />
+                <span>Zero config.</span>
+            </p>
+
+            <p className="hero-desc">
+                File-based routing, blazing-fast HMR, and full TypeScript.
+                <br />
+                All powered by Vite.
+            </p>
+
+            <ul className="features">
+                {features.map((f) => (
+                    <li key={f.label} className="feature-badge">
+                        {f.icon}
+                        {f.label}
+                    </li>
+                ))}
+            </ul>
+
+            <div className="hero-cta">
+                <Toil.Link href="/get-started" className="btn btn-primary">
+                    Get Started
+                </Toil.Link>
+                <a
+                    className="btn btn-secondary"
+                    href="https://github.com/btc-vision/toiljs"
+                    target="_blank"
+                    rel="noopener noreferrer">
+                    <GitHubIcon />
+                    GitHub
+                </a>
+            </div>
+        </section>
+    );
+}

package/examples/basic/client/routes/loader-demo/index.tsx

@@ -1,52 +1,59 @@
-async function wait(ms: number): Promise<void> {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-export const loader = async ({ searchParams }: Toil.LoaderArgs) => {
-    await wait(2000);
-    return { loadedAt: new Date().toISOString(), q: searchParams.get('q') };
-};
-
-// Cache this route's data for 10s: revisiting within 10s is instant (no 2s wait); after that it
-// refetches on navigation. Use `false` to cache forever, or omit for the default (refetch every nav).
-export const revalidate: Toil.Revalidate = 10;
-
-// Dynamic metadata derived from the loader's data (vs the static `metadata` export on /about).
-export const generateMetadata: Toil.GenerateMetadata<Awaited<ReturnType<typeof loader>>> = ({
-    data,
-}) => ({ title: `Loader demo, loaded ${data.loadedAt}` });
-
-export default function LoaderDemo() {
-    // Pass the loader to infer the data type from its return, no generics, no restating the shape.
-    const data = Toil.useLoaderData(loader);
-    const router = Toil.useRouter();
-    return (
-        <main>
-            <h1>Loader demo</h1>
-            <p>
-                Data loaded before render (no <code>useEffect</code>): <code>{data.loadedAt}</code>
-                {data.q !== null ? `, q=${data.q}` : ''}
-            </p>
-            <p>
-                <button type="button" onClick={() => { router.revalidate(); }}>
-                    Revalidate (refetch)
-                </button>
-            </p>
-            {/* The write half: an action runs on submit, then revalidates this route's loader so
-                `loadedAt` above updates, read, write, revalidate, no manual refetch. */}
-            <Toil.Form
-                action={async (form) => { await wait(500); console.log('saved', form.get('note')); }}
-                revalidate>
-                {({ pending }) => (
-                    <>
-                        <input name="note" placeholder="Leave a note" disabled={pending} />
-                        <button type="submit" disabled={pending}>
-                            {pending ? 'Saving' : 'Save & revalidate'}
-                        </button>
-                    </>
-                )}
-            </Toil.Form>
-            <Toil.Link href="/">Back home</Toil.Link>
-        </main>
-    );
-}
+async function wait(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export const loader = async ({ searchParams }: Toil.LoaderArgs) => {
+    await wait(2000);
+    return { loadedAt: new Date().toISOString(), q: searchParams.get('q') };
+};
+
+// Cache this route's data for 10s: revisiting within 10s is instant (no 2s wait); after that it
+// refetches on navigation. Use `false` to cache forever, or omit for the default (refetch every nav).
+export const revalidate: Toil.Revalidate = 10;
+
+// Dynamic metadata derived from the loader's data (vs the static `metadata` export on /about).
+export const generateMetadata: Toil.GenerateMetadata<Awaited<ReturnType<typeof loader>>> = ({ data }) => ({
+    title: `Loader demo, loaded ${data.loadedAt}`
+});
+
+export default function LoaderDemo() {
+    // Pass the loader to infer the data type from its return, no generics, no restating the shape.
+    const data = Toil.useLoaderData(loader);
+    const router = Toil.useRouter();
+    return (
+        <main>
+            <h1>Loader demo</h1>
+            <p>
+                Data loaded before render (no <code>useEffect</code>): <code>{data.loadedAt}</code>
+                {data.q !== null ? `, q=${data.q}` : ''}
+            </p>
+            <p>
+                <button
+                    type="button"
+                    onClick={() => {
+                        router.revalidate();
+                    }}>
+                    Revalidate (refetch)
+                </button>
+            </p>
+            {/* The write half: an action runs on submit, then revalidates this route's loader so
+                `loadedAt` above updates, read, write, revalidate, no manual refetch. */}
+            <Toil.Form
+                action={async (form) => {
+                    await wait(500);
+                    console.log('saved', form.get('note'));
+                }}
+                revalidate>
+                {({ pending }) => (
+                    <>
+                        <input name="note" placeholder="Leave a note" disabled={pending} />
+                        <button type="submit" disabled={pending}>
+                            {pending ? 'Saving' : 'Save & revalidate'}
+                        </button>
+                    </>
+                )}
+            </Toil.Form>
+            <Toil.Link href="/">Back home</Toil.Link>
+        </main>
+    );
+}

package/examples/basic/client/routes/search.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+
+export const metadata: Toil.Metadata = {
+    title: 'Search',
+    description: 'Search every page by its metadata and jump straight to it.',
+    keywords: ['search', 'find', 'pages', 'metadata']
+};
+
+// A tiny site-wide search box. `usePageSearch` queries the compiler-built index of every page's
+// metadata (title/description/keywords/OpenGraph + static `searchHints` on dynamic routes), returns
+// ranked matches with their route `path`, and `goTo` navigates to whichever one you pick.
+export default function Search() {
+    const [query, setQuery] = useState('');
+    const { results, pages, goTo } = Toil.usePageSearch(query, { includeDynamic: true });
+
+    return (
+        <main>
+            <h1>Search</h1>
+            <p>
+                Type to search across the metadata of all {pages.length} pages, title, description, keywords, and
+                OpenGraph. Indexed at build by <code>client/routes/*</code>.
+            </p>
+
+            <input
+                type="search"
+                value={query}
+                onChange={(e) => {
+                    setQuery(e.target.value);
+                }}
+                placeholder="Search pages… (try “blog”, “features”, “started”)"
+                aria-label="Search pages"
+                autoFocus
+                style={{ width: '100%', padding: '0.6rem 0.8rem', fontSize: '1rem' }}
+            />
+
+            {query.trim() !== '' && (
+                <ul style={{ listStyle: 'none', padding: 0, marginTop: '1rem' }}>
+                    {results.length === 0 && <li>No pages match “{query}”.</li>}
+                    {results.map((r) => (
+                        <li key={r.page.path} style={{ marginBottom: '0.75rem' }}>
+                            <button
+                                type="button"
+                                onClick={() => {
+                                    goTo(r);
+                                }}
+                                disabled={r.page.dynamic}
+                                title={r.page.dynamic ? 'Dynamic route, needs params to open' : undefined}
+                                style={{ textAlign: 'left', cursor: r.page.dynamic ? 'default' : 'pointer' }}>
+                                <strong>{r.page.metadata.title ?? r.page.path}</strong> <code>{r.page.path}</code>
+                                {r.page.metadata.description !== undefined && <div>{r.page.metadata.description}</div>}
+                                <small>
+                                    score {r.score.toFixed(1)} · matched {r.matches.join(', ')}
+                                </small>
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </main>
+    );
+}

package/examples/basic/client/routes/test.tsx

@@ -1,8 +1,7 @@
-export default function TestPage() {
-    return (
-        <div className="test-page">
-            <img src="/images/test_image.webp" alt="Test" className="test-page-image" />
-        </div>
-    );
-}
-
+export default function TestPage() {
+    return (
+        <div className="test-page">
+            <img src="/images/test_image.webp" alt="Test" className="test-page-image" />
+        </div>
+    );
+}