generator-white-label 5.0.0 → 8.0.0

package/scripts/build.ts

@@ -1,20 +1,16 @@
 /** Values injected into page templates and the generated config file. */
-export interface BuildConfig {cdn: string; production: boolean; service: string; version: string; www: string}
+export interface BuildConfig {cdn: string; production: boolean; siteUrl: string; version: string; www: string}
+import {execFile} from 'node:child_process';
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import {fileURLToPath} from 'node:url';
+import {promisify} from 'node:util';
+import {fileURLToPath, pathToFileURL} from 'node:url';
 import {build as buildJavaScript} from 'esbuild';
-import Handlebars from 'handlebars';
-import * as sass from 'sass';
 
+const execFileAsync = promisify(execFile);
 const defaultProjectRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..');
 
-/**
- * Read deployment flags and reject version strings that contain path separators.
- * @param argumentsList - Command-line arguments excluding the Node executable and script.
- * @returns Deployment configuration with defaults for omitted flags.
- * @throws When input does not satisfy the documented contract.
- */
+/** Read deployment flags and reject unsafe or invalid deployment values. */
 export function parseArguments(argumentsList: string[]): BuildConfig {
     const values = Object.fromEntries(argumentsList.map((argument) => {
         const [key, ...value] = argument.replace(/^--/, '').split('=');
@@ -24,20 +20,25 @@ export function parseArguments(argumentsList: string[]): BuildConfig {
     if (!/^[A-Za-z0-9._-]+$/.test(version)) {
         throw new Error('Version may contain only letters, numbers, dots, underscores, and hyphens');
     }
+    const siteUrl = (values['site-url'] || 'http://localhost:8080').replace(/\/$/, '');
+    if (!URL.canParse(siteUrl) || (values.production === 'true' && !siteUrl.startsWith('https://'))) {
+        throw new Error('Production builds require an absolute HTTPS --site-url');
+    }
     return {
         cdn: values.cdn || '/',
         production: values.production === 'true',
-        service: values.service || '/service-endpoint',
+        siteUrl,
         version,
         www: values.www || '/'
     };
 }
 
-/**
- * Recursively collect files below a directory, propagating filesystem failures.
- * @param directory - Directory to traverse recursively.
- * @returns A promise resolving to all descendant file paths.
- */
+/** Return the local Tailwind executable name for the current platform. */
+export function tailwindExecutable(platform: NodeJS.Platform = process.platform) {
+    return platform === 'win32' ? 'tailwindcss.cmd' : 'tailwindcss';
+}
+
+/** Recursively collect files below a directory, propagating filesystem failures. */
 async function filesUnder(directory: string): Promise<string[]> {
     const entries = await fs.readdir(directory, {withFileTypes: true});
     const files = await Promise.all(entries.map(async (entry) => {
@@ -47,85 +48,59 @@ async function filesUnder(directory: string): Promise<string[]> {
     return files.flat();
 }
 
-/**
- * Register partials and render pages using global, page-specific, and deployment data.
- * @param config - Validated deployment or database configuration.
- * @param outputRoot - Destination for rendered pages.
- * @param projectRoot - Project containing app sources and installed dependencies.
- * @returns A promise resolving after all pages have been written.
- */
-async function renderMarkup(config: BuildConfig, outputRoot: string, projectRoot: string) {
-    const markupRoot = path.join(projectRoot, 'app/assets/markup');
-    for (const partialPath of await filesUnder(markupRoot)) {
-        if (/\.(hbs|handlebars)$/.test(partialPath)) {
-            const name = path.relative(markupRoot, partialPath).replace(/\\/g, '/').replace(/\.(hbs|handlebars)$/, '');
-            Handlebars.registerPartial(name, await fs.readFile(partialPath, 'utf8'));
-        }
-    }
+interface PageModule {
+    default(data: Record<string, unknown>): {toString(): string} | string;
+}
 
+/** Render compiled TypeScript or TSX pages using global, page-specific, and deployment data. */
+async function renderMarkup(config: BuildConfig, outputRoot: string, projectRoot: string) {
     const globalData = JSON.parse(await fs.readFile(
         path.join(projectRoot, 'app/assets/data/view/global.json'), 'utf8'
-    ));
-    const pages = (await filesUnder(path.join(projectRoot, 'app')))
-        .filter((file) => file.endsWith('.hbs') && !file.includes(`${path.sep}assets${path.sep}`));
+    )) as Record<string, unknown>;
+    const appRoot = path.join(projectRoot, 'app');
+    const pages = (await filesUnder(appRoot))
+        .filter((file) => /\.tsx?$/.test(file) && !file.includes(`${path.sep}assets${path.sep}`));
 
     await Promise.all(pages.map(async (page) => {
-        const relative = path.relative(path.join(projectRoot, 'app'), page);
+        const relative = path.relative(appRoot, page);
         const pageDataPath = path.join(
-            projectRoot, 'app/assets/data/view', relative.replace(/\.hbs$/, '.json')
+            projectRoot, 'app/assets/data/view', relative.replace(/\.tsx?$/, '.json')
         );
-        let pageData = {};
+        let pageData: Record<string, unknown> = {};
         try {
-            pageData = JSON.parse(await fs.readFile(pageDataPath, 'utf8'));
+            pageData = JSON.parse(await fs.readFile(pageDataPath, 'utf8')) as Record<string, unknown>;
         } catch (error) {
             if (!(error instanceof Error && 'code' in error && error.code === 'ENOENT')) {
                 throw error;
             }
         }
-        const template = Handlebars.compile(await fs.readFile(page, 'utf8'));
-        const destination = path.join(outputRoot, relative.replace(/\.hbs$/, '.html'));
+        const compiledPage = path.join(projectRoot, 'dist/app', relative.replace(/\.tsx?$/, '.js'));
+        const module = await import(pathToFileURL(compiledPage).href) as PageModule;
+        if (typeof module.default !== 'function') {
+            throw new TypeError(`Page module ${relative} must export a default render function`);
+        }
+        const markup = module.default({...globalData, ...pageData, ...config});
+        const destination = path.join(outputRoot, relative.replace(/\.tsx?$/, '.html'));
         await fs.mkdir(path.dirname(destination), {recursive: true});
-        await fs.writeFile(destination, template({...globalData, ...pageData, ...config}));
+        await fs.writeFile(destination, `<!DOCTYPE html>\n${String(markup)}\n`);
     }));
 }
 
-/**
- * Compile project Sass and include the full published Bootstrap stylesheet.
- * @param outputAssets - Destination for compiled asset directories.
- * @param production - Enable compressed output and omit development source maps.
- * @param projectRoot - Project containing app sources and installed dependencies.
- * @returns A promise resolving after all stylesheets have been written.
- */
+/** Compile Tailwind and project CSS into the deploy directory. */
 async function compileStyles(outputAssets: string, production: boolean, projectRoot: string) {
     const styleRoot = path.join(projectRoot, 'app/assets/style');
-    await Promise.all(['global', 'print', 'toolkit'].map(async (name) => {
-        const result = sass.compile(path.join(styleRoot, `${name}.scss`), {
-            loadPaths: [path.join(projectRoot, 'node_modules')],
-            style: production ? 'compressed' : 'expanded'
-        });
-        const destination = path.join(outputAssets, 'style', `${name}.css`);
-        await fs.mkdir(path.dirname(destination), {recursive: true});
-        // Bootstrap publishes compiled CSS, so consuming it avoids recompiling third-party
-        // Sass and keeps dependency deprecation warnings out of project builds.
-        const bootstrapSource = name === 'global'
-            ? (await fs.readFile(
-                path.join(projectRoot, 'node_modules/bootstrap/dist/css/bootstrap.css'), 'utf8'
-            )).replace(/\/\*# sourceMappingURL=bootstrap\.css\.map \*\//, '')
-            : '';
-        const bootstrapCss = production && bootstrapSource
-            ? sass.compileString(bootstrapSource, {style: 'compressed', syntax: 'css'}).css
-            : bootstrapSource;
-        await fs.writeFile(destination, `${bootstrapCss}${bootstrapCss ? '\n' : ''}${result.css}`);
-    }));
+    await fs.mkdir(path.join(outputAssets, 'style'), {recursive: true});
+    const destination = path.join(outputAssets, 'style/global.css');
+    const argumentsList = [
+        '-i', path.join(styleRoot, 'global.css'),
+        '-o', destination
+    ];
+    if (production) {argumentsList.push('--minify');}
+    await execFileAsync(tailwindExecutable(), argumentsList, {cwd: projectRoot});
+    await fs.copyFile(path.join(styleRoot, 'print.css'), path.join(outputAssets, 'style/print.css'));
 }
 
-/**
- * Bundle TypeScript entry points for browsers, excluding declaration-only files.
- * @param outputAssets - Destination for compiled asset directories.
- * @param production - Enable compressed output and omit development source maps.
- * @param projectRoot - Project containing app sources and installed dependencies.
- * @returns A promise resolving after all script bundles have been written.
- */
+/** Bundle TypeScript entry points for browsers, excluding declaration-only files. */
 async function compileScripts(outputAssets: string, production: boolean, projectRoot: string) {
     const scriptRoot = path.join(projectRoot, 'app/assets/script');
     const entries = (await fs.readdir(scriptRoot, {withFileTypes: true}))
@@ -146,28 +121,22 @@ async function compileScripts(outputAssets: string, production: boolean, project
     await fs.writeFile(path.join(outputAssets, 'script/global.compiled.js'), '');
 }
 
-/**
- * Replace the project deployment directory with compiled pages, scripts, styles, and static assets.
- * @param config - Validated deployment or database configuration.
- * @param projectRoot - Project containing app sources and installed dependencies.
- * @returns A promise resolving after the deployment directory has been rebuilt.
- */
+/** Replace the deployment directory with compiled pages, scripts, styles, and static assets. */
 export async function build(config = parseArguments(process.argv.slice(2)), projectRoot = defaultProjectRoot) {
     const outputRoot = path.join(projectRoot, '_deploy');
     const outputAssets = path.join(outputRoot, 'release', config.version, 'assets');
     await fs.rm(outputRoot, {recursive: true, force: true});
     await fs.mkdir(outputAssets, {recursive: true});
 
-    await Promise.all([
-        fs.cp(path.join(projectRoot, 'app/assets/data'), path.join(outputAssets, 'data'), {recursive: true}),
-        fs.cp(path.join(projectRoot, 'app/assets/font'), path.join(outputAssets, 'font'), {recursive: true}),
-        fs.cp(path.join(projectRoot, 'app/assets/image'), path.join(outputAssets, 'image'), {recursive: true})
-    ]);
+    await fs.cp(path.join(projectRoot, 'app/assets/data'), path.join(outputAssets, 'data'), {recursive: true});
     await fs.writeFile(path.join(outputAssets, 'data/config.json'), JSON.stringify(config));
     await renderMarkup(config, outputRoot, projectRoot);
     await compileStyles(outputAssets, config.production, projectRoot);
     await compileScripts(outputAssets, config.production, projectRoot);
-    await fs.copyFile(path.join(projectRoot, 'app/robots.txt'), path.join(outputRoot, 'robots.txt'));
+    const robots = `User-agent: *\nAllow: /\nSitemap: ${config.siteUrl}/sitemap.xml\n`;
+    await fs.writeFile(path.join(outputRoot, 'robots.txt'), robots);
+    const sitemap = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>${config.siteUrl}/</loc></url></urlset>\n`;
+    await fs.writeFile(path.join(outputRoot, 'sitemap.xml'), sitemap);
 }
 
 if (path.resolve(process.argv[1] || '') === fileURLToPath(import.meta.url)) {

package/server/handler.ts

@@ -0,0 +1,75 @@
+import Mediator from 'white-label-mediator';
+import {Model} from 'white-label-model';
+import Router from 'white-label-router';
+import View from 'white-label-view/server';
+
+type ServerState = {
+    status: number;
+    title: string;
+    message: string;
+};
+
+function escapeHtml(value: string) {
+    return value
+        .replaceAll('&', '&')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#39;');
+}
+
+/**
+ * Provider-neutral serverless example using the Web Request/Response contract.
+ *
+ * Keep mutable White Label instances request-scoped. Cloud adapters should only
+ * translate their provider event into a Request and translate the Response back.
+ */
+export async function handleRequest(request: Request): Promise<Response> {
+    const url = new URL(request.url);
+    const mediator = new Mediator();
+    const model = new Model({
+        status: 404,
+        title: 'Not found',
+        message: `No route for ${url.pathname}.`
+    });
+    const router = new Router();
+    const view = new View({
+        model,
+        template(data) {
+            const state = data as ServerState;
+            return `<main><h1>${escapeHtml(state.title)}</h1><p>${escapeHtml(state.message)}</p></main>`;
+        }
+    });
+
+    router.mediator = mediator;
+    router.routes = {
+        '/health': () => model.update({
+            status: 200,
+            title: 'Healthy',
+            message: 'Serverless request handled.'
+        }),
+        '/hello': (_scope, location) => {
+            const name = String(location.data.query.name ?? 'world');
+            return model.update({
+                status: 200,
+                title: 'Hello',
+                message: `Hello ${name}.`
+            });
+        },
+        defaultRoute: () => true
+    };
+
+    try {
+        router.navigate(`${url.pathname}${url.search}`);
+        view.initialize();
+        return new Response(`<!doctype html>${view.toString()}`, {
+            status: model.get().status,
+            headers: {'content-type': 'text/html; charset=utf-8'}
+        });
+    } finally {
+        view.destroy();
+        router.destroy();
+        mediator.destroy();
+        model.destroy();
+    }
+}

package/template-test/site.test.js

@@ -0,0 +1,233 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {execFileSync} from 'node:child_process';
+import {readFile} from 'node:fs/promises';
+import axe from 'axe-core';
+import {build as buildBundle} from 'esbuild';
+import {HtmlValidate} from 'html-validate';
+import {JSDOM} from 'jsdom';
+
+const applicationMarkup = `<!doctype html><html><body><main><div data-task-example><section data-task-app><form data-task-form><input name="task"></form><nav><a href="/?tasks=all#example" data-task-filter="all" data-pushstate aria-current="page"></a><a href="/?tasks=active#example" data-task-filter="active" data-pushstate aria-current="false"></a><a href="/?tasks=completed#example" data-task-filter="completed" data-pushstate aria-current="false"></a></nav><ul><li><input type="checkbox" data-task-toggle data-task-id="1"></li><li><input type="checkbox" data-task-toggle data-task-id="2"></li></ul></section><p data-task-status role="status" aria-live="polite" aria-atomic="true"></p></div></main></body></html>`;
+
+/** Install one JSDOM window as the browser globals consumed by the packages. */
+function installBrowser(markup = applicationMarkup) {
+    const dom = new JSDOM(markup, {url: 'https://example.com/', pretendToBeVisual: true, runScripts: 'dangerously'});
+    globalThis.window = dom.window;
+    globalThis.document = dom.window.document;
+    globalThis.DOMParser = dom.window.DOMParser;
+    globalThis.Element = dom.window.Element;
+    globalThis.Node = dom.window.Node;
+    return dom;
+}
+
+async function withoutBrowserGlobals(callback) {
+    const previous = {
+        window: globalThis.window,
+        document: globalThis.document,
+        DOMParser: globalThis.DOMParser,
+        Element: globalThis.Element,
+        Node: globalThis.Node
+    };
+    delete globalThis.window;
+    delete globalThis.document;
+    delete globalThis.DOMParser;
+    delete globalThis.Element;
+    delete globalThis.Node;
+    try {
+        return await callback();
+    } finally {
+        Object.assign(globalThis, previous);
+    }
+}
+
+function relativeLuminance(hex) {
+    const channels = hex.slice(1).match(/.{2}/g).map(value => Number.parseInt(value, 16) / 255);
+    const [red, green, blue] = channels.map(value => value <= .04045 ? value / 12.92 : ((value + .055) / 1.055) ** 2.4);
+    return .2126 * red + .7152 * green + .0722 * blue;
+}
+
+function contrastRatio(foreground, background) {
+    const first = relativeLuminance(foreground);
+    const second = relativeLuminance(background);
+    return (Math.max(first, second) + .05) / (Math.min(first, second) + .05);
+}
+
+async function assertAccessible(name, html) {
+    const validator = new HtmlValidate({extends: ['html-validate:recommended']});
+    const validation = await validator.validateString(html);
+    assert.equal(validation.valid, true, `${name}: ${validation.results.flatMap(result => result.messages).map(message => message.message).join('\n')}`);
+    const dom = new JSDOM(html, {runScripts: 'dangerously', url: 'https://example.com/'});
+    dom.window.eval(axe.source);
+    const results = await dom.window.axe.run(dom.window.document, {runOnly: {type: 'tag', values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa']}});
+    dom.window.close();
+    assert.equal(results.violations.length, 0, `${name}: ${results.violations.map(violation => violation.id).join(', ')}`);
+}
+
+const bootDom = installBrowser();
+const {initializeTaskApplication, normalizeTaskFilter} = await import('../dist/app/assets/script/index.js');
+
+test('production output is valid, accessible static HTML', async () => {
+    const [html, notFound] = await Promise.all(['index.html', '404.html'].map(file => readFile(`_deploy/${file}`, 'utf8')));
+    await assertAccessible('index', html);
+    await assertAccessible('404', notFound);
+
+    const dom = new JSDOM(html);
+    const root = dom.window.document;
+    assert.equal(root.querySelector('.skip-link').getAttribute('href'), '#main');
+    assert.equal(root.querySelector('main#main').getAttribute('tabindex'), '-1');
+    assert.equal(root.querySelector('[data-task-status]').getAttribute('role'), 'status');
+    assert.equal(root.querySelector('[data-task-status]').getAttribute('aria-live'), 'polite');
+    assert.equal(root.querySelector('[data-task-status]').getAttribute('aria-atomic'), 'true');
+    assert.equal(root.querySelector('[data-task-app] [data-task-status]'), null);
+    assert.equal(root.querySelector('[data-task-filter][aria-current="page"]').dataset.taskFilter, 'all');
+    assert.ok([...root.querySelectorAll('[data-task-filter]')].every(link => link instanceof dom.window.HTMLAnchorElement && link.hasAttribute('href')));
+    assert.ok(root.querySelector('[data-task-form] label[for="task-title"]'));
+
+    const codeBlocks = [...root.querySelectorAll('pre > code')];
+    assert.ok(codeBlocks.length > 0);
+    assert.ok(codeBlocks.every(code => code.firstChild === code.firstElementChild && code.lastChild === code.lastElementChild));
+    dom.window.close();
+});
+
+test('production output is crawlable and supplies complete SEO signals', async () => {
+    const [html, robots, sitemap] = await Promise.all(['index.html', 'robots.txt', 'sitemap.xml'].map(file => readFile(`_deploy/${file}`, 'utf8')));
+    const dom = new JSDOM(html);
+    const root = dom.window.document;
+    assert.equal(root.querySelector('link[rel="canonical"]').href, 'https://example.com/');
+    assert.match(root.querySelector('meta[name="robots"]').content, /^index,follow/);
+    assert.ok(root.querySelector('title').textContent.length > 20);
+    assert.ok(root.querySelector('meta[name="description"]').content.length > 50);
+    assert.equal(JSON.parse(root.querySelector('script[type="application/ld+json"]').textContent)['@type'], 'WebPage');
+    assert.ok([...root.querySelectorAll('a')].every(link => link.hasAttribute('href')));
+    assert.match(robots, /User-agent: \*\nAllow: \//);
+    assert.match(robots, /Sitemap: https:\/\/example\.com\/sitemap\.xml/);
+    assert.match(sitemap, /<loc>https:\/\/example\.com\/<\/loc>/);
+    assert.doesNotMatch(html, /service-endpoint|white-label-service|<%|{{/);
+    dom.window.close();
+});
+
+test('all client packages cooperate through the task application without losing focus', async () => {
+    const dom = installBrowser();
+    const application = initializeTaskApplication(dom.window.document);
+    const input = dom.window.document.querySelector('[name="task"]');
+    input.value = 'Verify generated app';
+    dom.window.document.querySelector('[data-task-form]').dispatchEvent(new dom.window.Event('submit', {bubbles: true, cancelable: true}));
+    assert.equal(application.model.get().tasks.length, 3);
+    assert.equal(dom.window.document.activeElement.getAttribute('name'), 'task');
+    assert.match(dom.window.document.querySelector('[data-task-status]').textContent, /Showing 3 tasks for the all filter/);
+
+    const toggle = dom.window.document.querySelector('[data-task-id="2"]');
+    toggle.focus();
+    toggle.dispatchEvent(new dom.window.Event('change', {bubbles: true}));
+    assert.equal(application.model.get().tasks[1].complete, true);
+    assert.equal(dom.window.document.activeElement.dataset.taskId, '2');
+
+    const activeFilter = dom.window.document.querySelector('[data-task-filter="active"]');
+    activeFilter.focus();
+    activeFilter.dispatchEvent(new dom.window.MouseEvent('click', {bubbles: true, button: 0}));
+    await Promise.resolve();
+    assert.equal(application.model.get().filter, 'active');
+    assert.match(dom.window.document.querySelector('[data-task-status]').textContent, /Showing 1 task/);
+    assert.equal(dom.window.location.search, '?tasks=active');
+    assert.equal(dom.window.document.activeElement.dataset.taskFilter, 'active');
+
+    const completedFilter = dom.window.document.querySelector('[data-task-filter="completed"]');
+    completedFilter.focus();
+    completedFilter.dispatchEvent(new dom.window.MouseEvent('click', {bubbles: true, button: 0}));
+    await Promise.resolve();
+    assert.equal(application.model.get().filter, 'completed');
+    assert.match(dom.window.document.querySelector('[data-task-status]').textContent, /Showing 2 tasks/);
+    assert.equal(dom.window.document.activeElement.dataset.taskFilter, 'completed');
+
+    assert.equal(normalizeTaskFilter('nope'), 'all');
+    application.destroy();
+    assert.equal(application.mediator.listenerCount('task:add'), 0);
+});
+
+test('serverless handler keeps warm and concurrent requests isolated', async () => {
+    await withoutBrowserGlobals(async () => {
+        const {handleRequest} = await import('../dist/server/handler.js');
+        const first = await handleRequest(new Request('https://example.com/hello?name=Ada'));
+        const second = await handleRequest(new Request('https://example.com/hello?name=Grace'));
+        assert.equal(first.status, 200);
+        assert.equal(second.status, 200);
+        assert.match(await first.text(), /Hello Ada\./);
+        assert.match(await second.text(), /Hello Grace\./);
+
+        const [alan, katherine] = await Promise.all([
+            handleRequest(new Request('https://example.com/hello?name=Alan')),
+            handleRequest(new Request('https://example.com/hello?name=Katherine'))
+        ]);
+        const [alanHtml, katherineHtml] = await Promise.all([alan.text(), katherine.text()]);
+        assert.match(alanHtml, /Hello Alan\./);
+        assert.doesNotMatch(alanHtml, /Katherine/);
+        assert.match(katherineHtml, /Hello Katherine\./);
+        assert.doesNotMatch(katherineHtml, /Alan/);
+
+        const escaped = await handleRequest(new Request('https://example.com/hello?name=%3Cstrong%3EAda%3C%2Fstrong%3E'));
+        assert.match(await escaped.text(), /Hello &lt;strong&gt;Ada&lt;\/strong&gt;\./);
+        const missing = await handleRequest(new Request('https://example.com/missing'));
+        assert.equal(missing.status, 404);
+    });
+});
+
+test('serverless composition bundles for Web-standard runtimes within the size budget', async () => {
+    const result = await buildBundle({
+        stdin: {
+            contents: `
+                import Mediator from 'white-label-mediator';
+                import {Model} from 'white-label-model';
+                import Router from 'white-label-router';
+                import View from 'white-label-view/server';
+                const mediator = new Mediator();
+                const model = new Model({ok: true});
+                const router = new Router();
+                const view = new View({model, template: data => '<p>' + String(data.ok) + '</p>'});
+                router.mediator = mediator;
+                export {mediator, model, router, view};
+            `,
+            loader: 'ts',
+            resolveDir: process.cwd(),
+            sourcefile: 'serverless-portability-smoke.ts'
+        },
+        bundle: true,
+        format: 'esm',
+        logLevel: 'silent',
+        minify: true,
+        platform: 'browser',
+        target: 'es2022',
+        treeShaking: true,
+        write: false
+    });
+    const bundle = result.outputFiles[0].text;
+    const bytes = Buffer.byteLength(bundle);
+    assert.ok(bytes <= 100_000, `serverless runtime bundle grew to ${bytes} bytes (100000 byte budget)`);
+    assert.doesNotMatch(bundle, /(?:from|require\()["']node:/);
+});
+
+test('fresh serverless handler import stays within the cold-start budget', () => {
+    const script = "const start=performance.now(); await import('./dist/server/handler.js'); console.log(performance.now()-start);";
+    const elapsed = Number(execFileSync(process.execPath, ['--input-type=module', '-e', script], {encoding: 'utf8'}).trim());
+    assert.ok(Number.isFinite(elapsed));
+    assert.ok(elapsed <= 750, `serverless handler import took ${elapsed.toFixed(1)}ms (750ms budget)`);
+});
+
+test('starter code syntax colors remain grayscale and meet AA contrast', async () => {
+    const styles = await readFile('app/assets/style/global.css', 'utf8');
+    const codeColors = [...styles.matchAll(/\.(?:code-block__number|code-syntax-(?:keyword|type|value|muted))\s*\{[^}]*color:\s*(#[0-9a-f]{6})/gi)]
+        .map(match => match[1].toLowerCase());
+    assert.equal(codeColors.length, 5);
+    for (const color of codeColors) {
+        assert.match(color, /^#([0-9a-f]{2})\1\1$/i);
+        assert.ok(contrastRatio(color, '#f4f4f4') >= 4.5, `${color} must meet 4.5:1 against the code background`);
+    }
+});
+
+test.after(() => {
+    bootDom.window.close();
+    delete globalThis.window;
+    delete globalThis.document;
+    delete globalThis.DOMParser;
+    delete globalThis.Element;
+    delete globalThis.Node;
+});

package/tsconfig.site.json

@@ -10,17 +10,18 @@
     "inlineSources": true,
     "outDir": "dist",
     "rootDir": ".",
-    "jsx": "react-jsx",
     "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "white-label-view",
     "types": [
-      "node",
-      "react"
+      "node"
     ],
     "noEmitOnError": true
   },
   "include": [
     "scripts/**/*.ts",
-    "app/assets/script/**/*.ts",
-    "app/assets/script/**/*.tsx"
+    "server/**/*.ts",
+    "app/**/*.ts",
+    "app/**/*.tsx"
   ]
 }

package/tsconfig.site.no-jsx.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "esModuleInterop": true,
+    "declaration": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "outDir": "dist",
+    "rootDir": ".",
+    "resolveJsonModule": true,
+    "types": [
+      "node"
+    ],
+    "noEmitOnError": true
+  },
+  "include": [
+    "scripts/**/*.ts",
+    "server/**/*.ts",
+    "app/**/*.ts"
+  ]
+}

package/app/404.hbs

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html id="error-404" lang="en-US" dir="ltr">
-    {{> element/head}}
-    <body itemscope itemtype="http://schema.org/WebPage">
-        <div id="wrapper">
-            <main id="main" tabindex="-1" class="container">
-                <p>Sorry, but the page you were trying to view does not exist.</p>
-            </main>
-        </div>
-        {{#if scripts.global}}
-        {{> element/script script=scripts.global}}
-        {{/if}}
-        {{#if scripts.section}}
-        {{> element/script script=scripts.section}}
-        {{/if}}
-        {{#if scripts.page}}
-        {{> element/script script=scripts.page}}
-        {{/if}}
-    </body>
-</html>