toiljs 0.0.10 → 0.0.11

package/src/compiler/generate.ts

@@ -47,6 +47,8 @@ export const TOIL_ENV_DTS =
     `    type Metadata = import('toiljs/client').Metadata;\n` +
     `    type GenerateMetadata<T = unknown> = import('toiljs/client').GenerateMetadata<T>;\n` +
     `    type RouteErrorProps = import('toiljs/client').RouteErrorProps;\n` +
+    `    type Href = import('toiljs/client').Href;\n` +
+    `    type RoutePath = import('toiljs/client').RoutePath;\n` +
     `}\n` +
     `declare const BinaryWriter: typeof import('toiljs/io').BinaryWriter;\n` +
     `declare const BinaryReader: typeof import('toiljs/io').BinaryReader;\n` +
@@ -175,15 +177,22 @@ function findSpecialChain(
     includeClientRoot: boolean,
 ): string[] {
     const chain: string[] = [];
-    if (includeClientRoot) {
+    const relDir = path.dirname(path.relative(cfg.routesAbsDir, routeFile));
+    const segments = relDir === '.' ? [] : relDir.split(path.sep);
+    // A parallel-slot route (one under an `@slot` segment) is rendered INTO a parent layout's
+    // `<Slot>`. Its own layout/template chain must therefore start at the `@slot` directory, not the
+    // routes root: the parent segments' layouts already wrap the slot, so re-including them here
+    // would nest the slot inside itself and recurse. For non-slot routes this is the full chain.
+    const slotIdx = segments.findIndex((s) => s.startsWith('@'));
+    const startAt = slotIdx < 0 ? 0 : slotIdx + 1;
+    if (includeClientRoot && slotIdx < 0) {
         const root = specialIn(cfg.clientAbsDir, base);
         if (root) chain.push(root);
     }
-    const relDir = path.dirname(path.relative(cfg.routesAbsDir, routeFile));
-    const segments = relDir === '.' ? [] : relDir.split(path.sep);
     let dir = cfg.routesAbsDir;
     for (let i = 0; i <= segments.length; i++) {
         if (i > 0) dir = path.join(dir, segments[i - 1]);
+        if (i < startAt) continue;
         const found = specialIn(dir, base);
         if (found) chain.push(found);
     }

package/src/compiler/vite.ts

@@ -13,6 +13,20 @@ import { imageReportPlugin } from './image-report.js';
 import { toilPlugin } from './plugin.js';
 import { prerenderPlugin } from './prerender.js';
 
+// `vite-plugin-node-polyfills` rewrites react/react-dom to import its `vite-plugin-node-polyfills/
+// shims/*` modules. When a consumer links toiljs by symlink (`file:`/workspace), that package lives
+// only in toiljs's own node_modules, so resolving those bare specifiers from the consumer root
+// fails ("Failed to resolve import vite-plugin-node-polyfills/shims/process"). Alias them to
+// absolute paths resolved from toiljs's location so the build works however toiljs was installed.
+const polyfillPkgRoot = path.dirname(
+    path.dirname(createRequire(import.meta.url).resolve('vite-plugin-node-polyfills')),
+);
+const polyfillShimAliases: Record<string, string> = {
+    'vite-plugin-node-polyfills/shims/buffer': path.join(polyfillPkgRoot, 'shims/buffer/dist/index.js'),
+    'vite-plugin-node-polyfills/shims/global': path.join(polyfillPkgRoot, 'shims/global/dist/index.js'),
+    'vite-plugin-node-polyfills/shims/process': path.join(polyfillPkgRoot, 'shims/process/dist/index.js'),
+};
+
 /** Image extensions routed to `images/` in the build output. */
 const IMAGE_EXT = /^(png|jpe?g|svg|gif|tiff|bmp|ico|webp|avif)$/i;
 /** Font extensions routed to `fonts/`. */
@@ -98,6 +112,7 @@ export async function createViteConfig(cfg: ResolvedToilConfig): Promise<InlineC
             alias: {
                 'toiljs/client': cfg.runtimePath,
                 'toiljs/routes': path.join(cfg.toilDir, 'routes.ts'),
+                ...polyfillShimAliases,
             },
             dedupe: ['react', 'react-dom'],
         },

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

@@ -42,4 +42,38 @@ describe('route head (metadata baseline)', () => {
         setRouteHead(resolveMetadata({ title: 'About' }));
         expect(document.title).toBe('About · toiljs');
     });
+
+    // Regression for the "metadata title doesn't update" report: a real layout (title + template)
+    // plus a route's full `metadata` (the exact shape users write) must land on the route's title,
+    // wrapped by the layout template, with the route's og:title applied too.
+    it('applies a full route metadata over a layout title + template', () => {
+        function LayoutDefaults() {
+            useHead({ titleTemplate: '%s | ToilJS', title: 'ToilJS' });
+            return null;
+        }
+        render(<LayoutDefaults />);
+        setRouteHead(
+            resolveMetadata({
+                title: 'useReducer | React Hooks',
+                description: 'Manage complex state with a reducer.',
+                openGraph: { title: 'useReducer | React Hooks', type: 'website' },
+            }),
+        );
+        expect(document.title).toBe('useReducer | React Hooks | ToilJS');
+        expect(
+            document.head.querySelector('meta[property="og:title"]')?.getAttribute('content'),
+        ).toBe('useReducer | React Hooks');
+    });
+
+    // A route can opt out of the layout's template by setting its own `titleTemplate: '%s'`, so the
+    // tab reads exactly the route title with no site suffix.
+    it("lets a route override the layout template with its own '%s'", () => {
+        function LayoutDefaults() {
+            useHead({ titleTemplate: '%s | ToilJS', title: 'ToilJS' });
+            return null;
+        }
+        render(<LayoutDefaults />);
+        setRouteHead(resolveMetadata({ title: 'useReducer | React Hooks', titleTemplate: '%s' }));
+        expect(document.title).toBe('useReducer | React Hooks');
+    });
 });

package/test/slot-layouts.test.ts

@@ -0,0 +1,69 @@
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { loadConfig } from '../src/compiler/config';
+import { generate } from '../src/compiler/generate';
+
+const roots: string[] = [];
+function project(files: Record<string, string>): string {
+    const root = fs.mkdtempSync(path.join(os.tmpdir(), 'toil-gen-'));
+    roots.push(root);
+    for (const [rel, content] of Object.entries(files)) {
+        const abs = path.join(root, rel);
+        fs.mkdirSync(path.dirname(abs), { recursive: true });
+        fs.writeFileSync(abs, content);
+    }
+    return root;
+}
+afterEach(() => {
+    for (const r of roots.splice(0)) fs.rmSync(r, { recursive: true, force: true });
+});
+
+const COMP = `export default function C() { return null; }\n`;
+const LAYOUT = `export default function L({ children }) { return children; }\n`;
+const HTML = `<!doctype html><html><head></head><body><div id="root"></div></body></html>\n`;
+
+describe('generate: parallel-slot layout chains', () => {
+    it('keeps the parent layout on the full-page route but drops it from the @slot route', async () => {
+        const root = project({
+            'client/public/index.html': HTML,
+            'client/routes/gallery/layout.tsx': LAYOUT,
+            'client/routes/gallery/index.tsx': COMP,
+            'client/routes/gallery/photo/[id].tsx': COMP,
+            'client/routes/gallery/@modal/(.)photo/[id].tsx': COMP,
+        });
+        const cfg = await loadConfig({ root });
+        generate(cfg);
+        const lines = fs.readFileSync(path.join(cfg.toilDir, 'routes.ts'), 'utf8').split('\n');
+
+        // The normal full-page route is wrapped by gallery/layout.
+        const mainLine = lines.find((l) => l.includes('photo/[id]') && !l.includes('@modal'));
+        expect(mainLine).toMatch(/gallery\/layout/);
+
+        // The intercepting @modal slot route is rendered INTO gallery/layout's <Slot>, so it must not
+        // re-include that layout (doing so recurses, the slot rendering itself forever).
+        const slotLine = lines.find((l) => l.includes('@modal'));
+        expect(slotLine).toContain('intercept: true');
+        expect(slotLine).toMatch(/layouts: \[\]/);
+        expect(slotLine).not.toMatch(/gallery\/layout/);
+    });
+
+    it('still applies a layout placed inside the @slot subtree', async () => {
+        const root = project({
+            'client/public/index.html': HTML,
+            'client/routes/gallery/layout.tsx': LAYOUT,
+            'client/routes/gallery/@modal/layout.tsx': LAYOUT,
+            'client/routes/gallery/@modal/(.)photo/[id].tsx': COMP,
+        });
+        const cfg = await loadConfig({ root });
+        generate(cfg);
+        const lines = fs.readFileSync(path.join(cfg.toilDir, 'routes.ts'), 'utf8').split('\n');
+        const slotLine = lines.find((l) => l.includes('@modal/(.)photo'));
+        // The slot's own layout (inside @modal) applies; the parent gallery layout does not.
+        expect(slotLine).toMatch(/@modal\/layout/);
+        expect(slotLine).not.toMatch(/gallery\/layout/);
+    });
+});