toiljs 0.0.10 → 0.0.12

package/test/dom/slot.test.tsx

@@ -1,109 +1,131 @@
-// @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();
-    });
-});
+// @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

@@ -1,51 +1,53 @@
-// @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();
-    });
-});
+// @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/features.test.ts

@@ -1,142 +1,149 @@
-import { describe, expect, it } from 'vitest';
-
-import {
-    defaultConfigSource,
-    detectPreprocessor,
-    detectTailwind,
-    packageDiff,
-    preprocessorForExt,
-    requiredPackages,
-    setConfigImages,
-    setStyleImports,
-    styleEntry,
-    styleImportLines,
-    type StyleFeatures,
-} from '../src/cli/features';
-
-const CSS: StyleFeatures = { preprocessor: 'css', tailwind: false };
-const SASS_TW: StyleFeatures = { preprocessor: 'sass', tailwind: true };
-
-describe('styleEntry / preprocessorForExt', () => {
-    it('maps preprocessors to stylesheet paths', () => {
-        expect(styleEntry('css')).toBe('styles/main.css');
-        expect(styleEntry('sass')).toBe('styles/main.scss');
-        expect(styleEntry('less')).toBe('styles/main.less');
-        expect(styleEntry('stylus')).toBe('styles/main.styl');
-    });
-
-    it('reverses extensions back to preprocessors', () => {
-        expect(preprocessorForExt('scss')).toBe('sass');
-        expect(preprocessorForExt('.sass')).toBe('sass');
-        expect(preprocessorForExt('less')).toBe('less');
-        expect(preprocessorForExt('styl')).toBe('stylus');
-        expect(preprocessorForExt('css')).toBe('css');
-        expect(preprocessorForExt('txt')).toBeNull();
-    });
-});
-
-describe('requiredPackages / packageDiff', () => {
-    it('lists packages for a feature set', () => {
-        expect(requiredPackages(CSS)).toEqual([]);
-        expect(requiredPackages({ preprocessor: 'sass', tailwind: false })).toEqual(['sass']);
-        expect(requiredPackages({ preprocessor: 'css', tailwind: true })).toEqual([
-            'tailwindcss',
-            '@tailwindcss/vite',
-        ]);
-    });
-
-    it('diffs add/remove between two setups', () => {
-        expect(packageDiff(CSS, SASS_TW)).toEqual({
-            add: ['sass', 'tailwindcss', '@tailwindcss/vite'],
-            remove: [],
-        });
-        expect(packageDiff(SASS_TW, CSS)).toEqual({
-            add: [],
-            remove: ['sass', 'tailwindcss', '@tailwindcss/vite'],
-        });
-        expect(packageDiff({ preprocessor: 'sass', tailwind: false }, { preprocessor: 'less', tailwind: false })).toEqual(
-            { add: ['less'], remove: ['sass'] },
-        );
-    });
-});
-
-describe('styleImportLines / setStyleImports', () => {
-    it('orders Tailwind before the main stylesheet', () => {
-        expect(styleImportLines(CSS)).toEqual(["import './styles/main.css';"]);
-        expect(styleImportLines(SASS_TW)).toEqual([
-            "import './styles/tailwind.css';",
-            "import './styles/main.scss';",
-        ]);
-    });
-
-    it('rewrites the app entry imports, preserving the rest', () => {
-        const src = [
-            "import { routes, layout, notFound } from 'toiljs/routes';",
-            '',
-            "import './styles/main.css';",
-            '',
-            'Toil.mount(routes, layout, notFound);',
-            '',
-        ].join('\n');
-
-        const out = setStyleImports(src, SASS_TW);
-        expect(out).toContain("import './styles/tailwind.css';");
-        expect(out).toContain("import './styles/main.scss';");
-        expect(out).not.toContain("import './styles/main.css';");
-        expect(out).toContain("from 'toiljs/routes'");
-        expect(out).toContain('Toil.mount(routes, layout, notFound);');
-    });
-
-    it('round-trips back to plain CSS (drops Tailwind import)', () => {
-        const src = [
-            "import { routes, layout, notFound } from 'toiljs/routes';",
-            "import './styles/tailwind.css';",
-            "import './styles/main.scss';",
-            'Toil.mount(routes, layout, notFound);',
-        ].join('\n');
-
-        const out = setStyleImports(src, CSS);
-        expect(out).toContain("import './styles/main.css';");
-        expect(out).not.toContain('tailwind.css');
-        expect(out).not.toContain('main.scss');
-    });
-});
-
-describe('detect from dependencies', () => {
-    it('finds the active preprocessor and Tailwind', () => {
-        expect(detectPreprocessor({ sass: '^1' })).toBe('sass');
-        expect(detectPreprocessor({ less: '^4' })).toBe('less');
-        expect(detectPreprocessor({})).toBe('css');
-        expect(detectTailwind({ '@tailwindcss/vite': '^4' })).toBe(true);
-        expect(detectTailwind({ react: '^19' })).toBe(false);
-    });
-});
-
-describe('setConfigImages / defaultConfigSource', () => {
-    it('flips an existing images flag', () => {
-        const src = 'export default defineConfig({\n    client: {\n        images: true,\n    },\n});\n';
-        expect(setConfigImages(src, false)).toContain('images: false');
-        expect(setConfigImages(src, false)).not.toContain('images: true');
-    });
-
-    it('adds images to an existing client block', () => {
-        const out = setConfigImages('export default defineConfig({ client: { base: "/" } });', false);
-        expect(out).toContain('images: false');
-        expect(out).toContain('base: "/"');
-    });
-
-    it('adds a client block to a bare config', () => {
-        const out = setConfigImages('export default defineConfig({});', false);
-        expect(out).toContain('client: { images: false }');
-    });
-
-    it('returns null when the shape is unrecognized', () => {
-        expect(setConfigImages('const x = 1;', false)).toBeNull();
-    });
-
-    it('round-trips through defaultConfigSource', () => {
-        const src = defaultConfigSource(false);
-        expect(src).toContain('images: false');
-        expect(setConfigImages(src, true)).toContain('images: true');
-    });
-});
+import { describe, expect, it } from 'vitest';
+
+import {
+    defaultConfigSource,
+    detectPreprocessor,
+    detectTailwind,
+    packageDiff,
+    preprocessorForExt,
+    requiredPackages,
+    setConfigImages,
+    setStyleImports,
+    styleEntry,
+    type StyleFeatures,
+    styleImportLines,
+} from '../src/cli/features';
+
+const CSS: StyleFeatures = { preprocessor: 'css', tailwind: false };
+const SASS_TW: StyleFeatures = { preprocessor: 'sass', tailwind: true };
+
+describe('styleEntry / preprocessorForExt', () => {
+    it('maps preprocessors to stylesheet paths', () => {
+        expect(styleEntry('css')).toBe('styles/main.css');
+        expect(styleEntry('sass')).toBe('styles/main.scss');
+        expect(styleEntry('less')).toBe('styles/main.less');
+        expect(styleEntry('stylus')).toBe('styles/main.styl');
+    });
+
+    it('reverses extensions back to preprocessors', () => {
+        expect(preprocessorForExt('scss')).toBe('sass');
+        expect(preprocessorForExt('.sass')).toBe('sass');
+        expect(preprocessorForExt('less')).toBe('less');
+        expect(preprocessorForExt('styl')).toBe('stylus');
+        expect(preprocessorForExt('css')).toBe('css');
+        expect(preprocessorForExt('txt')).toBeNull();
+    });
+});
+
+describe('requiredPackages / packageDiff', () => {
+    it('lists packages for a feature set', () => {
+        expect(requiredPackages(CSS)).toEqual([]);
+        expect(requiredPackages({ preprocessor: 'sass', tailwind: false })).toEqual(['sass']);
+        expect(requiredPackages({ preprocessor: 'css', tailwind: true })).toEqual([
+            'tailwindcss',
+            '@tailwindcss/vite',
+        ]);
+    });
+
+    it('diffs add/remove between two setups', () => {
+        expect(packageDiff(CSS, SASS_TW)).toEqual({
+            add: ['sass', 'tailwindcss', '@tailwindcss/vite'],
+            remove: [],
+        });
+        expect(packageDiff(SASS_TW, CSS)).toEqual({
+            add: [],
+            remove: ['sass', 'tailwindcss', '@tailwindcss/vite'],
+        });
+        expect(
+            packageDiff(
+                { preprocessor: 'sass', tailwind: false },
+                { preprocessor: 'less', tailwind: false },
+            ),
+        ).toEqual({ add: ['less'], remove: ['sass'] });
+    });
+});
+
+describe('styleImportLines / setStyleImports', () => {
+    it('orders Tailwind before the main stylesheet', () => {
+        expect(styleImportLines(CSS)).toEqual(["import './styles/main.css';"]);
+        expect(styleImportLines(SASS_TW)).toEqual([
+            "import './styles/tailwind.css';",
+            "import './styles/main.scss';",
+        ]);
+    });
+
+    it('rewrites the app entry imports, preserving the rest', () => {
+        const src = [
+            "import { routes, layout, notFound } from 'toiljs/routes';",
+            '',
+            "import './styles/main.css';",
+            '',
+            'Toil.mount(routes, layout, notFound);',
+            '',
+        ].join('\n');
+
+        const out = setStyleImports(src, SASS_TW);
+        expect(out).toContain("import './styles/tailwind.css';");
+        expect(out).toContain("import './styles/main.scss';");
+        expect(out).not.toContain("import './styles/main.css';");
+        expect(out).toContain("from 'toiljs/routes'");
+        expect(out).toContain('Toil.mount(routes, layout, notFound);');
+    });
+
+    it('round-trips back to plain CSS (drops Tailwind import)', () => {
+        const src = [
+            "import { routes, layout, notFound } from 'toiljs/routes';",
+            "import './styles/tailwind.css';",
+            "import './styles/main.scss';",
+            'Toil.mount(routes, layout, notFound);',
+        ].join('\n');
+
+        const out = setStyleImports(src, CSS);
+        expect(out).toContain("import './styles/main.css';");
+        expect(out).not.toContain('tailwind.css');
+        expect(out).not.toContain('main.scss');
+    });
+});
+
+describe('detect from dependencies', () => {
+    it('finds the active preprocessor and Tailwind', () => {
+        expect(detectPreprocessor({ sass: '^1' })).toBe('sass');
+        expect(detectPreprocessor({ less: '^4' })).toBe('less');
+        expect(detectPreprocessor({})).toBe('css');
+        expect(detectTailwind({ '@tailwindcss/vite': '^4' })).toBe(true);
+        expect(detectTailwind({ react: '^19' })).toBe(false);
+    });
+});
+
+describe('setConfigImages / defaultConfigSource', () => {
+    it('flips an existing images flag', () => {
+        const src =
+            'export default defineConfig({\n    client: {\n        images: true,\n    },\n});\n';
+        expect(setConfigImages(src, false)).toContain('images: false');
+        expect(setConfigImages(src, false)).not.toContain('images: true');
+    });
+
+    it('adds images to an existing client block', () => {
+        const out = setConfigImages(
+            'export default defineConfig({ client: { base: "/" } });',
+            false,
+        );
+        expect(out).toContain('images: false');
+        expect(out).toContain('base: "/"');
+    });
+
+    it('adds a client block to a bare config', () => {
+        const out = setConfigImages('export default defineConfig({});', false);
+        expect(out).toContain('client: { images: false }');
+    });
+
+    it('returns null when the shape is unrecognized', () => {
+        expect(setConfigImages('const x = 1;', false)).toBeNull();
+    });
+
+    it('round-trips through defaultConfigSource', () => {
+        const src = defaultConfigSource(false);
+        expect(src).toContain('images: false');
+        expect(setConfigImages(src, true)).toContain('images: true');
+    });
+});