toiljs 0.0.11 → 0.0.12

package/test/configure.test.ts

@@ -1,90 +1,94 @@
-import fs from 'node:fs/promises';
-import os from 'node:os';
-import path from 'node:path';
-
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-
-import { applyConfigure } from '../src/cli/configure';
-import type { StyleFeatures } from '../src/cli/features';
-
-const CSS: StyleFeatures = { preprocessor: 'css', tailwind: false };
-const SASS_TW: StyleFeatures = { preprocessor: 'sass', tailwind: true };
-
-const ENTRY = [
-    "import { routes, layout, notFound } from 'toiljs/routes';",
-    '',
-    "import './styles/main.css';",
-    '',
-    'Toil.mount(routes, layout, notFound);',
-    '',
-].join('\n');
-
-let dir: string;
-let clientDir: string;
-let pkgPath: string;
-
-async function readJson(p: string): Promise<{ devDependencies?: Record<string, string> }> {
-    return JSON.parse(await fs.readFile(p, 'utf8')) as { devDependencies?: Record<string, string> };
-}
-
-async function exists(p: string): Promise<boolean> {
-    try {
-        await fs.access(p);
-        return true;
-    } catch {
-        return false;
-    }
-}
-
-beforeEach(async () => {
-    dir = await fs.mkdtemp(path.join(os.tmpdir(), 'toil-cfg-'));
-    clientDir = path.join(dir, 'client');
-    pkgPath = path.join(dir, 'package.json');
-    await fs.mkdir(path.join(clientDir, 'styles'), { recursive: true });
-    await fs.writeFile(path.join(clientDir, 'toil.tsx'), ENTRY, 'utf8');
-    await fs.writeFile(path.join(clientDir, 'styles/main.css'), 'body { margin: 0; }\n', 'utf8');
-    await fs.writeFile(pkgPath, JSON.stringify({ devDependencies: { typescript: '^6' } }, null, 4), 'utf8');
-});
-
-afterEach(async () => {
-    await fs.rm(dir, { recursive: true, force: true });
-});
-
-describe('applyConfigure', () => {
-    it('adds Sass + Tailwind: renames stylesheet, adds entry + imports + deps', async () => {
-        const pkg = await readJson(pkgPath);
-        await applyConfigure(clientDir, pkgPath, pkg, CSS, SASS_TW);
-
-        expect(await exists(path.join(clientDir, 'styles/main.scss'))).toBe(true);
-        expect(await exists(path.join(clientDir, 'styles/main.css'))).toBe(false);
-        expect(await exists(path.join(clientDir, 'styles/tailwind.css'))).toBe(true);
-
-        const entry = await fs.readFile(path.join(clientDir, 'toil.tsx'), 'utf8');
-        expect(entry).toContain("import './styles/tailwind.css';");
-        expect(entry).toContain("import './styles/main.scss';");
-        expect(entry).not.toContain('main.css');
-        expect(entry).toContain('Toil.mount(routes, layout, notFound);');
-
-        const deps = (await readJson(pkgPath)).devDependencies ?? {};
-        expect(deps).toHaveProperty('sass');
-        expect(deps).toHaveProperty('tailwindcss');
-        expect(deps).toHaveProperty('@tailwindcss/vite');
-    });
-
-    it('removes everything cleanly when switching back to plain CSS', async () => {
-        const pkg = await readJson(pkgPath);
-        await applyConfigure(clientDir, pkgPath, pkg, CSS, SASS_TW);
-        const mid = await readJson(pkgPath);
-        await applyConfigure(clientDir, pkgPath, mid, SASS_TW, CSS);
-
-        expect(await exists(path.join(clientDir, 'styles/main.css'))).toBe(true);
-        expect(await exists(path.join(clientDir, 'styles/main.scss'))).toBe(false);
-        expect(await exists(path.join(clientDir, 'styles/tailwind.css'))).toBe(false);
-
-        const deps = (await readJson(pkgPath)).devDependencies ?? {};
-        expect(deps).not.toHaveProperty('sass');
-        expect(deps).not.toHaveProperty('tailwindcss');
-        expect(deps).not.toHaveProperty('@tailwindcss/vite');
-        expect(deps).toHaveProperty('typescript');
-    });
-});
+import fs from 'node:fs/promises';
+import os from 'node:os';
+import path from 'node:path';
+
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { applyConfigure } from '../src/cli/configure';
+import type { StyleFeatures } from '../src/cli/features';
+
+const CSS: StyleFeatures = { preprocessor: 'css', tailwind: false };
+const SASS_TW: StyleFeatures = { preprocessor: 'sass', tailwind: true };
+
+const ENTRY = [
+    "import { routes, layout, notFound } from 'toiljs/routes';",
+    '',
+    "import './styles/main.css';",
+    '',
+    'Toil.mount(routes, layout, notFound);',
+    '',
+].join('\n');
+
+let dir: string;
+let clientDir: string;
+let pkgPath: string;
+
+async function readJson(p: string): Promise<{ devDependencies?: Record<string, string> }> {
+    return JSON.parse(await fs.readFile(p, 'utf8')) as { devDependencies?: Record<string, string> };
+}
+
+async function exists(p: string): Promise<boolean> {
+    try {
+        await fs.access(p);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+beforeEach(async () => {
+    dir = await fs.mkdtemp(path.join(os.tmpdir(), 'toil-cfg-'));
+    clientDir = path.join(dir, 'client');
+    pkgPath = path.join(dir, 'package.json');
+    await fs.mkdir(path.join(clientDir, 'styles'), { recursive: true });
+    await fs.writeFile(path.join(clientDir, 'toil.tsx'), ENTRY, 'utf8');
+    await fs.writeFile(path.join(clientDir, 'styles/main.css'), 'body { margin: 0; }\n', 'utf8');
+    await fs.writeFile(
+        pkgPath,
+        JSON.stringify({ devDependencies: { typescript: '^6' } }, null, 4),
+        'utf8',
+    );
+});
+
+afterEach(async () => {
+    await fs.rm(dir, { recursive: true, force: true });
+});
+
+describe('applyConfigure', () => {
+    it('adds Sass + Tailwind: renames stylesheet, adds entry + imports + deps', async () => {
+        const pkg = await readJson(pkgPath);
+        await applyConfigure(clientDir, pkgPath, pkg, CSS, SASS_TW);
+
+        expect(await exists(path.join(clientDir, 'styles/main.scss'))).toBe(true);
+        expect(await exists(path.join(clientDir, 'styles/main.css'))).toBe(false);
+        expect(await exists(path.join(clientDir, 'styles/tailwind.css'))).toBe(true);
+
+        const entry = await fs.readFile(path.join(clientDir, 'toil.tsx'), 'utf8');
+        expect(entry).toContain("import './styles/tailwind.css';");
+        expect(entry).toContain("import './styles/main.scss';");
+        expect(entry).not.toContain('main.css');
+        expect(entry).toContain('Toil.mount(routes, layout, notFound);');
+
+        const deps = (await readJson(pkgPath)).devDependencies ?? {};
+        expect(deps).toHaveProperty('sass');
+        expect(deps).toHaveProperty('tailwindcss');
+        expect(deps).toHaveProperty('@tailwindcss/vite');
+    });
+
+    it('removes everything cleanly when switching back to plain CSS', async () => {
+        const pkg = await readJson(pkgPath);
+        await applyConfigure(clientDir, pkgPath, pkg, CSS, SASS_TW);
+        const mid = await readJson(pkgPath);
+        await applyConfigure(clientDir, pkgPath, mid, SASS_TW, CSS);
+
+        expect(await exists(path.join(clientDir, 'styles/main.css'))).toBe(true);
+        expect(await exists(path.join(clientDir, 'styles/main.scss'))).toBe(false);
+        expect(await exists(path.join(clientDir, 'styles/tailwind.css'))).toBe(false);
+
+        const deps = (await readJson(pkgPath)).devDependencies ?? {};
+        expect(deps).not.toHaveProperty('sass');
+        expect(deps).not.toHaveProperty('tailwindcss');
+        expect(deps).not.toHaveProperty('@tailwindcss/vite');
+        expect(deps).toHaveProperty('typescript');
+    });
+});

package/test/doctor.test.ts

@@ -0,0 +1,140 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+    checkBasePath,
+    checkDuplicatePatterns,
+    type CheckGroup,
+    checkMountSlots,
+    checkNode,
+    checkPeer,
+    checkRelativeAssets,
+    checkRootElement,
+    checkSeoUrl,
+    checkStyling,
+    findRelativeAssets,
+    satisfiesMin,
+    summarize,
+} from '../src/cli/diagnostics';
+
+describe('satisfiesMin', () => {
+    it('compares against a >= minimum, ignoring range prefixes', () => {
+        expect(satisfiesMin('25.8.0', '>=24.0.0')).toBe(true);
+        expect(satisfiesMin('20.0.0', '>=24.0.0')).toBe(false);
+        expect(satisfiesMin('^19.2.6', '>=18.0.0')).toBe(true); // declared caret range, compared by floor
+        expect(satisfiesMin('6.0.0', '>=6.0.0')).toBe(true);
+        expect(satisfiesMin('5.9.9', '>=6.0.0')).toBe(false);
+    });
+});
+
+describe('checkMountSlots', () => {
+    it('warns when mount() omits slots, passes when present', () => {
+        expect(checkMountSlots('Toil.mount(routes, layout, notFound, globalError);').status).toBe(
+            'warn',
+        );
+        expect(
+            checkMountSlots('Toil.mount(routes, layout, notFound, globalError, slots);').status,
+        ).toBe('pass');
+    });
+
+    it('warns when there is no entry or no mount() call', () => {
+        expect(checkMountSlots(null).status).toBe('warn');
+        expect(checkMountSlots('export const x = 1;').status).toBe('warn');
+    });
+});
+
+describe('findRelativeAssets / checkRelativeAssets', () => {
+    it('flags root-relative asset paths but not absolute, url, or expression refs', () => {
+        const issues = findRelativeAssets([
+            {
+                path: 'client/components/Header.tsx',
+                source: [
+                    '<img src="images/logo.svg" />', // broken: relative asset
+                    '<img src="/images/logo.svg" />', // ok: root-absolute
+                    '<img src="https://cdn/x.png" />', // ok: url
+                    '<img src={logo} />', // ok: expression (not a string literal)
+                    '<a href="/about">about</a>', // ok: no extension, route
+                ].join('\n'),
+            },
+        ]);
+        expect(issues).toHaveLength(1);
+        expect(issues[0]).toMatchObject({ line: 1, value: 'images/logo.svg' });
+        expect(checkRelativeAssets(issues).status).toBe('warn');
+        expect(checkRelativeAssets([]).status).toBe('pass');
+    });
+});
+
+describe('config + environment checks', () => {
+    it('checkBasePath: root or wrapped in slashes passes, otherwise warns', () => {
+        expect(checkBasePath('/').status).toBe('pass');
+        expect(checkBasePath('/app/').status).toBe('pass');
+        expect(checkBasePath('/app').status).toBe('warn');
+    });
+
+    it('checkSeoUrl: warns only when seo is configured without a url', () => {
+        expect(checkSeoUrl(false, false).status).toBe('pass');
+        expect(checkSeoUrl(true, true).status).toBe('pass');
+        expect(checkSeoUrl(true, false).status).toBe('warn');
+    });
+
+    it('checkNode / checkPeer reflect version satisfaction', () => {
+        expect(checkNode('25.0.0', '>=24.0.0').status).toBe('pass');
+        expect(checkNode('18.0.0', '>=24.0.0').status).toBe('fail');
+        expect(checkPeer('react', null, '>=18.0.0').status).toBe('fail');
+        expect(checkPeer('react', '^17.0.0', '>=18.0.0').status).toBe('warn');
+        expect(checkPeer('react', '^19.0.0', '>=18.0.0').status).toBe('pass');
+    });
+
+    it('checkDuplicatePatterns flags repeated route URLs', () => {
+        expect(checkDuplicatePatterns(['/', '/about', '/blog/:id']).status).toBe('pass');
+        expect(checkDuplicatePatterns(['/a', '/a']).status).toBe('warn');
+    });
+
+    it('checkRootElement requires an id="root" mount target', () => {
+        expect(checkRootElement('<div id="root"></div>').status).toBe('pass');
+        expect(checkRootElement('<div id="app"></div>').status).toBe('fail');
+        expect(checkRootElement(null).status).toBe('fail');
+    });
+
+    it('checkStyling fails when an imported preprocessor/Tailwind is not installed', () => {
+        expect(
+            checkStyling({
+                preprocessorImported: 'sass',
+                preprocessorInstalled: false,
+                tailwindImported: false,
+                tailwindInstalled: false,
+            }).status,
+        ).toBe('fail');
+        expect(
+            checkStyling({
+                preprocessorImported: 'sass',
+                preprocessorInstalled: true,
+                tailwindImported: true,
+                tailwindInstalled: false,
+            }).status,
+        ).toBe('fail');
+        expect(
+            checkStyling({
+                preprocessorImported: 'css',
+                preprocessorInstalled: true,
+                tailwindImported: false,
+                tailwindInstalled: false,
+            }).status,
+        ).toBe('pass');
+    });
+});
+
+describe('summarize', () => {
+    it('tallies pass/warn/fail across groups', () => {
+        const groups: CheckGroup[] = [
+            {
+                title: 'A',
+                checks: [
+                    { id: '1', label: 'x', status: 'pass' },
+                    { id: '2', label: 'y', status: 'warn' },
+                ],
+            },
+            { title: 'B', checks: [{ id: '3', label: 'z', status: 'fail' }] },
+        ];
+        expect(summarize(groups)).toEqual({ pass: 1, warn: 1, fail: 1 });
+    });
+});

package/test/dom/Image.test.tsx

@@ -1,46 +1,73 @@
-// @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('');
-    });
-});
+// @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

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