toiljs 0.0.8 → 0.0.9

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

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

package/test/dom/slot.test.tsx

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

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

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

package/test/fonts.test.ts

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

package/test/metadata.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+
+import { resolveMetadata } from '../src/client/head/metadata';
+
+describe('resolveMetadata', () => {
+    it('expands convenience fields into meta/link tags', () => {
+        const head = resolveMetadata({
+            title: 'About',
+            titleTemplate: '%s · toiljs',
+            description: 'desc',
+            keywords: ['a', 'b'],
+            robots: 'noindex',
+            themeColor: '#000',
+            canonical: 'https://x.test/about',
+            openGraph: { title: 'OG', type: 'website', image: 'https://x.test/og.png' },
+        });
+
+        expect(head.title).toBe('About');
+        expect(head.titleTemplate).toBe('%s · toiljs');
+        const byName = (name: string) => head.meta?.find((m) => m.name === name)?.content;
+        const byProp = (property: string) => head.meta?.find((m) => m.property === property)?.content;
+        expect(byName('description')).toBe('desc');
+        expect(byName('keywords')).toBe('a, b');
+        expect(byName('robots')).toBe('noindex');
+        expect(byName('theme-color')).toBe('#000');
+        expect(byProp('og:title')).toBe('OG');
+        expect(byProp('og:type')).toBe('website');
+        expect(byProp('og:image')).toBe('https://x.test/og.png');
+        expect(head.link?.find((l) => l.rel === 'canonical')?.href).toBe('https://x.test/about');
+    });
+
+    it('passes through raw meta/link and omits unset fields', () => {
+        const head = resolveMetadata({
+            title: 'X',
+            meta: [{ name: 'author', content: 'me' }],
+            link: [{ rel: 'alternate', href: '/rss' }],
+        });
+        expect(head.meta).toEqual([{ name: 'author', content: 'me' }]);
+        expect(head.link).toEqual([{ rel: 'alternate', href: '/rss' }]);
+    });
+});

package/test/prerender.test.ts

@@ -0,0 +1,46 @@
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+import ts from 'typescript';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { extractStaticMetadata } from '../src/compiler/prerender';
+
+const written: string[] = [];
+function tmp(source: string): string {
+    const file = path.join(os.tmpdir(), `toil-prerender-${String(written.length)}-${process.pid}.tsx`);
+    fs.writeFileSync(file, source);
+    written.push(file);
+    return file;
+}
+afterEach(() => {
+    for (const f of written.splice(0)) fs.rmSync(f, { force: true });
+});
+
+describe('extractStaticMetadata', () => {
+    it('extracts a static metadata object literal (nested objects/arrays)', () => {
+        const file = tmp(
+            `export const metadata = { title: 'X', keywords: ['a', 'b'], openGraph: { type: 'website' } };\n` +
+                `export default function P() { return null; }\n`,
+        );
+        expect(extractStaticMetadata(ts, file)).toEqual({
+            title: 'X',
+            keywords: ['a', 'b'],
+            openGraph: { type: 'website' },
+        });
+    });
+
+    it('returns null when there is no static metadata export', () => {
+        expect(extractStaticMetadata(ts, tmp(`export default function P() { return null; }\n`))).toBeNull();
+        // generateMetadata (a function) is not a static object literal → not extracted.
+        expect(
+            extractStaticMetadata(ts, tmp(`export const generateMetadata = () => ({ title: 'X' });\n`)),
+        ).toBeNull();
+    });
+
+    it('skips computed/non-literal properties but keeps the static ones', () => {
+        const file = tmp(`const x = foo();\nexport const metadata = { title: 'X', dyn: x };\n`);
+        expect(extractStaticMetadata(ts, file)).toEqual({ title: 'X' });
+    });
+});

package/test/routes.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { matchRoute } from '../src/client/routing/match';
-import { filePathToRoute } from '../src/compiler/routes';
+import { filePathToRoute, interceptTarget } from '../src/compiler/routes';
 
 describe('filePathToRoute', () => {
     it('maps index, static, nested, and dynamic files to patterns', () => {
@@ -20,6 +20,25 @@ describe('filePathToRoute', () => {
         expect(filePathToRoute('(shop)/index.tsx')).toBe('/');
         expect(filePathToRoute('(a)/(b)/deep.tsx')).toBe('/deep');
     });
+
+    it('strips parallel-slot (@slot) segments from the URL', () => {
+        expect(filePathToRoute('@modal/photo/[id].tsx')).toBe('/photo/:id');
+        expect(filePathToRoute('@sidebar/index.tsx')).toBe('/');
+        expect(filePathToRoute('dashboard/@chart/views.tsx')).toBe('/dashboard/views');
+    });
+});
+
+describe('interceptTarget', () => {
+    it('resolves (.)/(..)/(...) marker targets', () => {
+        expect(interceptTarget('@modal/(.)photo/[id].tsx')).toBe('/photo/:id');
+        expect(interceptTarget('feed/@modal/(..)photo/[id].tsx')).toBe('/photo/:id');
+        expect(interceptTarget('a/b/@m/(...)login.tsx')).toBe('/login');
+    });
+
+    it('returns null for routes with no interception marker', () => {
+        expect(interceptTarget('photo/[id].tsx')).toBeNull();
+        expect(interceptTarget('@modal/settings.tsx')).toBeNull();
+    });
 });
 
 describe('matchRoute', () => {

package/test/seo.test.ts

@@ -0,0 +1,142 @@
+import { describe, expect, it } from 'vitest';
+
+import type { ScannedRoute } from '../src/compiler/routes';
+import { injectSeoHtml, llmsTxt, robotsTxt, routeSeo, seoHeadTags, sitemapXml } from '../src/compiler/seo';
+
+const routes: ScannedRoute[] = [
+    { file: 'a', pattern: '/' },
+    { file: 'b', pattern: '/about' },
+    { file: 'c', pattern: '/blog/:id' }, // dynamic — excluded from sitemap
+    { file: 'd', pattern: '/photo/:id', slot: 'modal', intercept: true }, // slot/intercept — excluded
+];
+
+describe('seoHeadTags', () => {
+    it('bakes description, OG, canonical, preconnect, and JSON-LD', () => {
+        const html = seoHeadTags({
+            url: 'https://x.test',
+            title: 'Home',
+            description: 'desc',
+            openGraph: { type: 'website', image: 'https://x.test/og.png' },
+            preconnect: ['https://cdn.test'],
+            jsonLd: { '@context': 'https://schema.org', '@type': 'WebSite' },
+        });
+        expect(html).toContain('<meta name="description" content="desc" />');
+        expect(html).toContain('<meta property="og:title" content="Home" />');
+        expect(html).toContain('<meta property="og:image" content="https://x.test/og.png" />');
+        expect(html).toContain('<link rel="canonical" href="https://x.test" />');
+        expect(html).toContain('<link rel="preconnect" href="https://cdn.test" />');
+        expect(html).toContain('application/ld+json');
+        expect(html).toContain('"@type":"WebSite"');
+    });
+
+    it('escapes attribute values', () => {
+        expect(seoHeadTags({ description: 'a "b" <c>' })).toContain('content="a &quot;b&quot; &lt;c&gt;"');
+    });
+
+    it('renders a full Twitter card + OG image dimensions + fb:app_id', () => {
+        const html = seoHeadTags({
+            title: 'Home',
+            description: 'd',
+            openGraph: { image: 'https://x.test/og.png', imageAlt: 'alt', imageWidth: 1200, imageHeight: 630 },
+            twitter: { site: '@x' },
+            facebook: { appId: '123' },
+        });
+        expect(html).toContain('<meta name="twitter:card" content="summary_large_image" />');
+        expect(html).toContain('<meta name="twitter:site" content="@x" />');
+        expect(html).toContain('<meta name="twitter:title" content="Home" />');
+        expect(html).toContain('<meta name="twitter:image" content="https://x.test/og.png" />');
+        expect(html).toContain('<meta property="og:image:width" content="1200" />');
+        expect(html).toContain('<meta property="og:image:alt" content="alt" />');
+        expect(html).toContain('<meta property="fb:app_id" content="123" />');
+    });
+
+    it('neutralizes </script> in JSON-LD (no script breakout)', () => {
+        const html = seoHeadTags({ jsonLd: { x: '</script><img src=x onerror=alert(1)>' } });
+        expect(html).not.toContain('</script><img');
+        expect(html).toContain('\\u003c/script');
+    });
+});
+
+describe('routeSeo', () => {
+    it("overlays a route's metadata over the site defaults and points URLs at the route", () => {
+        const site = { url: 'https://x.test', title: 'Site', description: 'site desc' };
+        const out = routeSeo(site, { title: 'About', description: 'about desc' }, '/about');
+        expect(out.title).toBe('About');
+        expect(out.description).toBe('about desc');
+        expect(out.url).toBe('https://x.test/about');
+    });
+
+    it('falls back to the site defaults when a route has no metadata', () => {
+        const site = { url: 'https://x.test', title: 'Site' };
+        expect(routeSeo(site, null, '/x')).toMatchObject({ title: 'Site', url: 'https://x.test/x' });
+    });
+});
+
+describe('injectSeoHtml', () => {
+    it('replaces the title + description and inserts the rest before </head>', () => {
+        const shell = '<!doctype html><html><head><title>old</title><meta name="description" content="" /></head><body></body></html>';
+        const out = injectSeoHtml(shell, { title: 'New', description: 'fresh', url: 'https://x.test' });
+        expect(out).toContain('<title>New</title>');
+        expect(out).not.toContain('<title>old</title>');
+        expect(out.match(/name="description"/g)).toHaveLength(1);
+        expect(out).toContain('content="fresh"');
+        expect(out).toContain('<link rel="canonical" href="https://x.test" />');
+    });
+});
+
+describe('robotsTxt', () => {
+    it('allows all + lists AI crawlers + links the sitemap by default', () => {
+        const txt = robotsTxt({ url: 'https://x.test' });
+        expect(txt).toContain('User-agent: *');
+        expect(txt).toContain('Allow: /');
+        expect(txt).toContain('User-agent: GPTBot');
+        expect(txt).toContain('User-agent: ClaudeBot');
+        expect(txt).toContain('Sitemap: https://x.test/sitemap.xml');
+    });
+
+    it('disallows AI crawlers when ai: "disallow"', () => {
+        const txt = robotsTxt({ url: 'https://x.test', robots: { ai: 'disallow' } });
+        expect(txt).toMatch(/User-agent: GPTBot\nDisallow: \//);
+    });
+
+    it('is empty when robots: false', () => {
+        expect(robotsTxt({ robots: false })).toBe('');
+    });
+});
+
+describe('sitemapXml', () => {
+    it('lists only static routes, absolute', () => {
+        const xml = sitemapXml({ url: 'https://x.test' }, routes);
+        expect(xml).toContain('<loc>https://x.test</loc>');
+        expect(xml).toContain('<loc>https://x.test/about</loc>');
+        expect(xml).not.toContain(':id');
+        expect(xml).not.toContain('/photo');
+    });
+
+    it('is empty without a base url', () => {
+        expect(sitemapXml({}, routes)).toBe('');
+    });
+});
+
+describe('llmsTxt', () => {
+    it('renders title, summary, instructions, and pages', () => {
+        const txt = llmsTxt(
+            {
+                url: 'https://x.test',
+                title: 'My Site',
+                description: 'a site',
+                llms: { instructions: 'Be nice.' },
+            },
+            routes,
+        );
+        expect(txt).toContain('# My Site');
+        expect(txt).toContain('> a site');
+        expect(txt).toContain('Be nice.');
+        expect(txt).toContain('[Home](https://x.test)');
+        expect(txt).toContain('[/about](https://x.test/about)');
+    });
+
+    it('is empty when llms: false', () => {
+        expect(llmsTxt({ llms: false }, routes)).toBe('');
+    });
+});