toiljs 0.0.12 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/build/cli/.tsbuildinfo +1 -1
- package/build/cli/index.js +2926 -191
- package/build/client/.tsbuildinfo +1 -1
- package/build/client/head/metadata.d.ts +3 -1
- package/build/client/head/metadata.js +8 -0
- package/build/client/index.d.ts +4 -4
- package/build/client/index.js +2 -2
- package/build/client/navigation/navigation.d.ts +2 -0
- package/build/client/navigation/navigation.js +9 -1
- package/build/client/routing/loader.d.ts +2 -0
- package/build/compiler/.tsbuildinfo +1 -1
- package/build/compiler/config.d.ts +2 -0
- package/build/compiler/config.js +1 -0
- package/build/compiler/generate.js +10 -1
- package/build/compiler/index.js +2 -0
- package/build/compiler/prerender.js +1 -0
- package/build/compiler/seo.d.ts +1 -1
- package/build/compiler/seo.js +3 -2
- package/build/compiler/ssg.d.ts +5 -0
- package/build/compiler/ssg.js +90 -0
- package/examples/basic/client/routes/search.tsx +61 -61
- package/package.json +4 -3
- package/src/client/head/metadata.ts +112 -94
- package/src/client/index.ts +89 -79
- package/src/client/navigation/navigation.ts +235 -215
- package/src/client/routing/loader.ts +10 -0
- package/src/client/search/search.ts +189 -189
- package/src/client/search/use-page-search.ts +73 -73
- package/src/compiler/config.ts +182 -173
- package/src/compiler/generate.ts +394 -378
- package/src/compiler/index.ts +3 -0
- package/src/compiler/pages.ts +2 -2
- package/src/compiler/prerender.ts +156 -152
- package/src/compiler/seo.ts +390 -381
- package/src/compiler/ssg.ts +126 -0
- package/test/dom/error-overlay.test.tsx +44 -44
- package/test/dom/router-loading.test.tsx +1 -1
- package/test/dom/use-metadata.test.tsx +58 -0
- package/test/seo.test.ts +164 -164
- package/test/ssg.test.ts +36 -0
package/src/compiler/index.ts
CHANGED
|
@@ -6,6 +6,7 @@ import { startBackend, type RunningBackend } from 'toiljs/backend';
|
|
|
6
6
|
|
|
7
7
|
import { loadConfig } from './config.js';
|
|
8
8
|
import { generate } from './generate.js';
|
|
9
|
+
import { prerenderStaticParams } from './ssg.js';
|
|
9
10
|
import { createViteConfig } from './vite.js';
|
|
10
11
|
|
|
11
12
|
export interface ToilCommandOptions {
|
|
@@ -28,6 +29,8 @@ export async function build(opts: ToilCommandOptions = {}): Promise<void> {
|
|
|
28
29
|
const cfg = await loadConfig(opts);
|
|
29
30
|
generate(cfg);
|
|
30
31
|
await viteBuild(await createViteConfig(cfg));
|
|
32
|
+
// SSG: bake per-URL HTML + sitemap for dynamic routes that opt in via `generateStaticParams`.
|
|
33
|
+
await prerenderStaticParams(cfg);
|
|
31
34
|
}
|
|
32
35
|
|
|
33
36
|
/**
|
package/src/compiler/pages.ts
CHANGED
|
@@ -22,7 +22,7 @@ export interface PageIndexEntry {
|
|
|
22
22
|
|
|
23
23
|
/**
|
|
24
24
|
* Loads the project's TypeScript synchronously (so {@link buildPageIndex} can run inside the sync
|
|
25
|
-
* `generate()`), or `null` if it isn't installed
|
|
25
|
+
* `generate()`), or `null` if it isn't installed, in which case pages are indexed by path only.
|
|
26
26
|
*/
|
|
27
27
|
function loadTypeScriptSync(root: string): Ts | null {
|
|
28
28
|
try {
|
|
@@ -41,7 +41,7 @@ function isDynamic(pattern: string): boolean {
|
|
|
41
41
|
|
|
42
42
|
/**
|
|
43
43
|
* Builds the searchable page index from the scanned routes: every main-tree page (slots and
|
|
44
|
-
* intercepting routes are excluded
|
|
44
|
+
* intercepting routes are excluded, they don't own a distinct URL) paired with its statically
|
|
45
45
|
* extracted `metadata`. A route may also `export const searchHints` (a static `title`/`description`/
|
|
46
46
|
* `keywords` object) to feed the index even when its real metadata is dynamic (`generateMetadata`);
|
|
47
47
|
* hints are merged over the static `metadata`, winning ties. Reads each route file once.
|
|
@@ -1,152 +1,156 @@
|
|
|
1
|
-
import { createRequire } from 'node:module';
|
|
2
|
-
import fs from 'node:fs';
|
|
3
|
-
import path from 'node:path';
|
|
4
|
-
import { pathToFileURL } from 'node:url';
|
|
5
|
-
|
|
6
|
-
import type * as TS from 'typescript';
|
|
7
|
-
import type { Plugin } from 'vite';
|
|
8
|
-
|
|
9
|
-
import { type ResolvedToilConfig } from './config.js';
|
|
10
|
-
import { scanRoutes } from './routes.js';
|
|
11
|
-
import { injectSeoHtml, routeSeo } from './seo.js';
|
|
12
|
-
|
|
13
|
-
type Ts = typeof TS;
|
|
14
|
-
|
|
15
|
-
/** Loads the project's TypeScript (used to read each route's static `metadata`), or `null` if absent. */
|
|
16
|
-
async function loadTypeScript(root: string): Promise<Ts | null> {
|
|
17
|
-
try {
|
|
18
|
-
const resolved = createRequire(path.join(root, 'package.json')).resolve('typescript');
|
|
19
|
-
const mod = (await import(pathToFileURL(resolved).href)) as { default?: Ts } & Ts;
|
|
20
|
-
return mod.default ?? mod;
|
|
21
|
-
} catch {
|
|
22
|
-
return null;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/** Marks an AST node that isn't a static literal (so its value can't be baked at build). */
|
|
27
|
-
const UNRESOLVED = Symbol('unresolved');
|
|
28
|
-
|
|
29
|
-
/** Statically evaluates a literal expression node to a JS value, or `UNRESOLVED` if it isn't one. */
|
|
30
|
-
function evalNode(ts: Ts, node: TS.Expression): unknown {
|
|
31
|
-
if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) return node.text;
|
|
32
|
-
if (ts.isNumericLiteral(node)) return Number(node.text);
|
|
33
|
-
if (node.kind === ts.SyntaxKind.TrueKeyword) return true;
|
|
34
|
-
if (node.kind === ts.SyntaxKind.FalseKeyword) return false;
|
|
35
|
-
if (node.kind === ts.SyntaxKind.NullKeyword) return null;
|
|
36
|
-
if (ts.isArrayLiteralExpression(node)) {
|
|
37
|
-
const out: unknown[] = [];
|
|
38
|
-
for (const el of node.elements) {
|
|
39
|
-
const value = evalNode(ts, el);
|
|
40
|
-
if (value === UNRESOLVED) return UNRESOLVED;
|
|
41
|
-
out.push(value);
|
|
42
|
-
}
|
|
43
|
-
return out;
|
|
44
|
-
}
|
|
45
|
-
if (ts.isObjectLiteralExpression(node)) return evalObject(ts, node);
|
|
46
|
-
return UNRESOLVED;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
/** Evaluates an object literal to a plain object, skipping any property that isn't a static literal. */
|
|
50
|
-
function evalObject(ts: Ts, node: TS.ObjectLiteralExpression): Record<string, unknown> {
|
|
51
|
-
const obj: Record<string, unknown> = {};
|
|
52
|
-
for (const prop of node.properties) {
|
|
53
|
-
if (!ts.isPropertyAssignment(prop)) continue;
|
|
54
|
-
const key = ts.isIdentifier(prop.name)
|
|
55
|
-
? prop.name.text
|
|
56
|
-
: ts.isStringLiteral(prop.name)
|
|
57
|
-
? prop.name.text
|
|
58
|
-
: null;
|
|
59
|
-
if (key === null) continue;
|
|
60
|
-
const value = evalNode(ts, prop.initializer);
|
|
61
|
-
if (value !== UNRESOLVED) obj[key] = value;
|
|
62
|
-
}
|
|
63
|
-
return obj;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* Extracts the named `export const <name> = { … }` object-literal exports from a route file in a
|
|
68
|
-
* single parse, returning the statically-evaluable subset of each (dynamic and computed values are
|
|
69
|
-
* skipped). Names that are absent or not object literals are omitted from the result.
|
|
70
|
-
*/
|
|
71
|
-
export function extractStaticExports(
|
|
72
|
-
ts: Ts,
|
|
73
|
-
filePath: string,
|
|
74
|
-
names: readonly string[],
|
|
75
|
-
): Record<string, Record<string, unknown>> {
|
|
76
|
-
let source: string;
|
|
77
|
-
try {
|
|
78
|
-
source = fs.readFileSync(filePath, 'utf8');
|
|
79
|
-
} catch {
|
|
80
|
-
return {};
|
|
81
|
-
}
|
|
82
|
-
const wanted = new Set(names);
|
|
83
|
-
const out: Record<string, Record<string, unknown>> = {};
|
|
84
|
-
const sf = ts.createSourceFile(
|
|
85
|
-
filePath,
|
|
86
|
-
source,
|
|
87
|
-
ts.ScriptTarget.Latest,
|
|
88
|
-
true,
|
|
89
|
-
ts.ScriptKind.TSX,
|
|
90
|
-
);
|
|
91
|
-
for (const stmt of sf.statements) {
|
|
92
|
-
if (!ts.isVariableStatement(stmt)) continue;
|
|
93
|
-
if (!stmt.modifiers?.some((m) => m.kind === ts.SyntaxKind.ExportKeyword)) continue;
|
|
94
|
-
for (const decl of stmt.declarationList.declarations) {
|
|
95
|
-
if (
|
|
96
|
-
ts.isIdentifier(decl.name) &&
|
|
97
|
-
wanted.has(decl.name.text) &&
|
|
98
|
-
!(decl.name.text in out) &&
|
|
99
|
-
decl.initializer &&
|
|
100
|
-
ts.isObjectLiteralExpression(decl.initializer)
|
|
101
|
-
) {
|
|
102
|
-
out[decl.name.text] = evalObject(ts, decl.initializer);
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
return out;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* Extracts a route's `export const metadata = { … }` if it's a static object literal, returning the
|
|
111
|
-
* statically-evaluable subset (dynamic `generateMetadata` and computed values are skipped). `null`
|
|
112
|
-
* when the file has no static metadata.
|
|
113
|
-
*/
|
|
114
|
-
export function extractStaticMetadata(ts: Ts, filePath: string): Record<string, unknown> | null {
|
|
115
|
-
return extractStaticExports(ts, filePath, ['metadata']).metadata ?? null;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
/**
|
|
119
|
-
* Build-only plugin that statically pre-renders per-route HTML for SEO. After the bundle is written,
|
|
120
|
-
* it takes the built shell (`index.html`), and for each static route bakes that route's
|
|
121
|
-
* `metadata` (merged over the site-wide `seo` defaults) into a `<route>/index.html` so a JS-less
|
|
122
|
-
* crawler hitting the route gets correct per-page tags. Dynamic (`generateMetadata`) and `:param`
|
|
123
|
-
* routes are skipped (no data at build) and fall back to the client-rendered shell.
|
|
124
|
-
*/
|
|
125
|
-
export function prerenderPlugin(cfg: ResolvedToilConfig): Plugin {
|
|
126
|
-
return {
|
|
127
|
-
name: 'toil:prerender-seo',
|
|
128
|
-
apply: 'build',
|
|
129
|
-
async closeBundle() {
|
|
130
|
-
if (!cfg.seo) return;
|
|
131
|
-
const outDir = path.resolve(cfg.root, cfg.outDir);
|
|
132
|
-
const shellPath = path.join(outDir, 'index.html');
|
|
133
|
-
if (!fs.existsSync(shellPath)) return;
|
|
134
|
-
const shell = fs.readFileSync(shellPath, 'utf8');
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
);
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
1
|
+
import { createRequire } from 'node:module';
|
|
2
|
+
import fs from 'node:fs';
|
|
3
|
+
import path from 'node:path';
|
|
4
|
+
import { pathToFileURL } from 'node:url';
|
|
5
|
+
|
|
6
|
+
import type * as TS from 'typescript';
|
|
7
|
+
import type { Plugin } from 'vite';
|
|
8
|
+
|
|
9
|
+
import { type ResolvedToilConfig } from './config.js';
|
|
10
|
+
import { scanRoutes } from './routes.js';
|
|
11
|
+
import { injectSeoHtml, routeSeo } from './seo.js';
|
|
12
|
+
|
|
13
|
+
type Ts = typeof TS;
|
|
14
|
+
|
|
15
|
+
/** Loads the project's TypeScript (used to read each route's static `metadata`), or `null` if absent. */
|
|
16
|
+
async function loadTypeScript(root: string): Promise<Ts | null> {
|
|
17
|
+
try {
|
|
18
|
+
const resolved = createRequire(path.join(root, 'package.json')).resolve('typescript');
|
|
19
|
+
const mod = (await import(pathToFileURL(resolved).href)) as { default?: Ts } & Ts;
|
|
20
|
+
return mod.default ?? mod;
|
|
21
|
+
} catch {
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/** Marks an AST node that isn't a static literal (so its value can't be baked at build). */
|
|
27
|
+
const UNRESOLVED = Symbol('unresolved');
|
|
28
|
+
|
|
29
|
+
/** Statically evaluates a literal expression node to a JS value, or `UNRESOLVED` if it isn't one. */
|
|
30
|
+
function evalNode(ts: Ts, node: TS.Expression): unknown {
|
|
31
|
+
if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) return node.text;
|
|
32
|
+
if (ts.isNumericLiteral(node)) return Number(node.text);
|
|
33
|
+
if (node.kind === ts.SyntaxKind.TrueKeyword) return true;
|
|
34
|
+
if (node.kind === ts.SyntaxKind.FalseKeyword) return false;
|
|
35
|
+
if (node.kind === ts.SyntaxKind.NullKeyword) return null;
|
|
36
|
+
if (ts.isArrayLiteralExpression(node)) {
|
|
37
|
+
const out: unknown[] = [];
|
|
38
|
+
for (const el of node.elements) {
|
|
39
|
+
const value = evalNode(ts, el);
|
|
40
|
+
if (value === UNRESOLVED) return UNRESOLVED;
|
|
41
|
+
out.push(value);
|
|
42
|
+
}
|
|
43
|
+
return out;
|
|
44
|
+
}
|
|
45
|
+
if (ts.isObjectLiteralExpression(node)) return evalObject(ts, node);
|
|
46
|
+
return UNRESOLVED;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/** Evaluates an object literal to a plain object, skipping any property that isn't a static literal. */
|
|
50
|
+
function evalObject(ts: Ts, node: TS.ObjectLiteralExpression): Record<string, unknown> {
|
|
51
|
+
const obj: Record<string, unknown> = {};
|
|
52
|
+
for (const prop of node.properties) {
|
|
53
|
+
if (!ts.isPropertyAssignment(prop)) continue;
|
|
54
|
+
const key = ts.isIdentifier(prop.name)
|
|
55
|
+
? prop.name.text
|
|
56
|
+
: ts.isStringLiteral(prop.name)
|
|
57
|
+
? prop.name.text
|
|
58
|
+
: null;
|
|
59
|
+
if (key === null) continue;
|
|
60
|
+
const value = evalNode(ts, prop.initializer);
|
|
61
|
+
if (value !== UNRESOLVED) obj[key] = value;
|
|
62
|
+
}
|
|
63
|
+
return obj;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* Extracts the named `export const <name> = { … }` object-literal exports from a route file in a
|
|
68
|
+
* single parse, returning the statically-evaluable subset of each (dynamic and computed values are
|
|
69
|
+
* skipped). Names that are absent or not object literals are omitted from the result.
|
|
70
|
+
*/
|
|
71
|
+
export function extractStaticExports(
|
|
72
|
+
ts: Ts,
|
|
73
|
+
filePath: string,
|
|
74
|
+
names: readonly string[],
|
|
75
|
+
): Record<string, Record<string, unknown>> {
|
|
76
|
+
let source: string;
|
|
77
|
+
try {
|
|
78
|
+
source = fs.readFileSync(filePath, 'utf8');
|
|
79
|
+
} catch {
|
|
80
|
+
return {};
|
|
81
|
+
}
|
|
82
|
+
const wanted = new Set(names);
|
|
83
|
+
const out: Record<string, Record<string, unknown>> = {};
|
|
84
|
+
const sf = ts.createSourceFile(
|
|
85
|
+
filePath,
|
|
86
|
+
source,
|
|
87
|
+
ts.ScriptTarget.Latest,
|
|
88
|
+
true,
|
|
89
|
+
ts.ScriptKind.TSX,
|
|
90
|
+
);
|
|
91
|
+
for (const stmt of sf.statements) {
|
|
92
|
+
if (!ts.isVariableStatement(stmt)) continue;
|
|
93
|
+
if (!stmt.modifiers?.some((m) => m.kind === ts.SyntaxKind.ExportKeyword)) continue;
|
|
94
|
+
for (const decl of stmt.declarationList.declarations) {
|
|
95
|
+
if (
|
|
96
|
+
ts.isIdentifier(decl.name) &&
|
|
97
|
+
wanted.has(decl.name.text) &&
|
|
98
|
+
!(decl.name.text in out) &&
|
|
99
|
+
decl.initializer &&
|
|
100
|
+
ts.isObjectLiteralExpression(decl.initializer)
|
|
101
|
+
) {
|
|
102
|
+
out[decl.name.text] = evalObject(ts, decl.initializer);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
return out;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Extracts a route's `export const metadata = { … }` if it's a static object literal, returning the
|
|
111
|
+
* statically-evaluable subset (dynamic `generateMetadata` and computed values are skipped). `null`
|
|
112
|
+
* when the file has no static metadata.
|
|
113
|
+
*/
|
|
114
|
+
export function extractStaticMetadata(ts: Ts, filePath: string): Record<string, unknown> | null {
|
|
115
|
+
return extractStaticExports(ts, filePath, ['metadata']).metadata ?? null;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* Build-only plugin that statically pre-renders per-route HTML for SEO. After the bundle is written,
|
|
120
|
+
* it takes the built shell (`index.html`), and for each static route bakes that route's
|
|
121
|
+
* `metadata` (merged over the site-wide `seo` defaults) into a `<route>/index.html` so a JS-less
|
|
122
|
+
* crawler hitting the route gets correct per-page tags. Dynamic (`generateMetadata`) and `:param`
|
|
123
|
+
* routes are skipped (no data at build) and fall back to the client-rendered shell.
|
|
124
|
+
*/
|
|
125
|
+
export function prerenderPlugin(cfg: ResolvedToilConfig): Plugin {
|
|
126
|
+
return {
|
|
127
|
+
name: 'toil:prerender-seo',
|
|
128
|
+
apply: 'build',
|
|
129
|
+
async closeBundle() {
|
|
130
|
+
if (!cfg.seo) return;
|
|
131
|
+
const outDir = path.resolve(cfg.root, cfg.outDir);
|
|
132
|
+
const shellPath = path.join(outDir, 'index.html');
|
|
133
|
+
if (!fs.existsSync(shellPath)) return;
|
|
134
|
+
const shell = fs.readFileSync(shellPath, 'utf8');
|
|
135
|
+
// Stash the clean built shell (asset tags, no per-route SEO yet) so the post-build SSG
|
|
136
|
+
// pass bakes dynamic routes from it rather than from this file once it's been overwritten
|
|
137
|
+
// with the `/` route's head (which would duplicate canonical/og tags).
|
|
138
|
+
fs.writeFileSync(path.join(cfg.toilDir, 'shell.html'), shell);
|
|
139
|
+
const ts = await loadTypeScript(cfg.root);
|
|
140
|
+
|
|
141
|
+
const routes = scanRoutes(cfg.routesAbsDir).filter(
|
|
142
|
+
(r) => r.slot === undefined && !r.intercept && !/[:*]/.test(r.pattern),
|
|
143
|
+
);
|
|
144
|
+
for (const route of routes) {
|
|
145
|
+
const metadata = ts ? extractStaticMetadata(ts, route.file) : null;
|
|
146
|
+
const html = injectSeoHtml(shell, routeSeo(cfg.seo, metadata, route.pattern));
|
|
147
|
+
const target =
|
|
148
|
+
route.pattern === '/'
|
|
149
|
+
? shellPath
|
|
150
|
+
: path.join(outDir, route.pattern.replace(/^\//, ''), 'index.html');
|
|
151
|
+
fs.mkdirSync(path.dirname(target), { recursive: true });
|
|
152
|
+
fs.writeFileSync(target, html);
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
};
|
|
156
|
+
}
|