Commit 521edec76fecc043e04bedcf0c00c0368fa9e96e | sitegen

framework/bundle.ts+199-165

...	@@ -1,27 +1,33 @@	...	@@ -1,27 +1,33 @@
1	async function trackEsbuild(io: Io, metafile: esbuild.Metafile) {	1	async function trackEsbuild(io: Io, metafile: esbuild.Metafile) {
2	await Promise.all(Object.keys(metafile.inputs)	2	await Promise.all(
3	.filter(file => !isIgnoredSource(file))	3	Object.keys(metafile.inputs)
4	.map(file => io.trackFile(file)));	4	.filter((file) => !isIgnoredSource(file))
		5	.map((file) => io.trackFile(file)),
		6	);
5	}	7	}
6		8
7	// This file implements client-side bundling, mostly wrapping esbuild.	9	// This file implements client-side bundling, mostly wrapping esbuild.
8	export async function bundleClientJavaScript(	10	export async function bundleClientJavaScript(
9	io: Io,	11	io: Io,
10	{ clientRefs, extraPublicScripts, dev = false }: {	12	{
		13	clientRefs,
		14	extraPublicScripts,
		15	dev = false,
		16	}: {
11	clientRefs: string[];	17	clientRefs: string[];
12	extraPublicScripts: string[];	18	extraPublicScripts: string[];
13	dev: boolean;	19	dev: boolean;
14	},	20	},
15	) {	21	) {
16	const entryPoints = [	22	const entryPoints = [
17	...new Set([	23	...new Set(
18	...clientRefs.map((x) => `src/${x}`),	24	[...clientRefs.map((x) => `src/${x}`), ...extraPublicScripts].map(toAbs),
19	...extraPublicScripts,	25	),
20	].map(toAbs)),
21	];	26	];
22	if (entryPoints.length === 0) return {};	27	if (entryPoints.length === 0) return {};
23	const invalidFiles = entryPoints	28	const invalidFiles = entryPoints.filter(
24	.filter((file) => !file.match(/\.client\.[tj]sx?/));	29	(file) => !file.match(/\.client\.[tj]sx?/),
		30	);
25	if (invalidFiles.length > 0) {	31	if (invalidFiles.length > 0) {
26	const cwd = process.cwd();	32	const cwd = process.cwd();
27	throw new Error(	33	throw new Error(
...	@@ -35,45 +41,48 @@ export async function bundleClientJavaScript(	...	@@ -35,45 +41,48 @@ export async function bundleClientJavaScript(
35	markoViaBuildCache(),	41	markoViaBuildCache(),
36	];	42	];
37		43
38	const bundle = await esbuild.build({	44	const bundle = await esbuild
39	assetNames: "/asset/[hash]",	45	.build({
40	bundle: true,	46	assetNames: "/asset/[hash]",
41	chunkNames: "/js/c.[hash]",	47	bundle: true,
42	entryNames: "/js/[name]",	48	chunkNames: "/js/c.[hash]",
43	entryPoints,	49	entryNames: "/js/[name]",
44	format: "esm",	50	entryPoints,
45	jsx: "automatic",	51	format: "esm",
46	jsxDev: dev,	52	jsx: "automatic",
47	jsxImportSource: "#ssr",	53	jsxDev: dev,
48	logLevel: "silent",	54	jsxImportSource: "#engine",
49	metafile: true,	55	logLevel: "silent",
50	minify: !dev,	56	metafile: true,
51	outdir: "out!",	57	minify: !dev,
52	plugins: clientPlugins,	58	outdir: "out!",
53	write: false,	59	plugins: clientPlugins,
54	define: {	60	write: false,
55	"ASSERT": "console.assert",	61	define: {
56	MIME_INLINE_DATA: JSON.stringify(mime.rawEntriesText),	62	ASSERT: "console.assert",
57	},	63	MIME_INLINE_DATA: JSON.stringify(mime.rawEntriesText),
58	}).catch((err: any) => {	64	},
59	err.message = `Client ${err.message}`;	65	})
60	throw err;	66	.catch((err: any) => {
61	});	67	err.message = `Client ${err.message}`;
		68	throw err;
		69	});
62	if (bundle.errors.length \|\| bundle.warnings.length) {	70	if (bundle.errors.length \|\| bundle.warnings.length) {
63	throw new AggregateError(	71	throw new AggregateError(
64	bundle.errors.concat(bundle.warnings),	72	bundle.errors.concat(bundle.warnings),
65	"JS bundle failed",	73	"JS bundle failed",
66	);	74	);
67	}	75	}
68	const publicScriptRoutes = extraPublicScripts.map((file) =>	76	const publicScriptRoutes = extraPublicScripts.map(
69	"/js/" +	77	(file) =>
70	path.relative(hot.projectSrc, file).replaceAll("\\", "/").replace(	78	"/js/" +
71	/\.client\.[tj]sx?/,	79	path
72	".js",	80	.relative(hot.projectSrc, file)
73	)	81	.replaceAll("\\", "/")
		82	.replace(/\.client\.[tj]sx?/, ".js"),
74	);	83	);
75	const { metafile, outputFiles } = bundle;	84	const { metafile, outputFiles } = bundle;
76	const p = []	85	const p = [];
77	p.push(trackEsbuild(io, metafile));	86	p.push(trackEsbuild(io, metafile));
78	const scripts: Record<string, string> = {};	87	const scripts: Record<string, string> = {};
79	for (const file of outputFiles) {	88	for (const file of outputFiles) {
...	@@ -100,156 +109,184 @@ export async function bundleClientJavaScript(	...	@@ -100,156 +109,184 @@ export async function bundleClientJavaScript(
100		109
101	export type ServerPlatform = "node" \| "passthru";	110	export type ServerPlatform = "node" \| "passthru";
102	export interface ServerSideOptions {	111	export interface ServerSideOptions {
103	entries: string[],	112	entries: string[];
104	viewItems: sg.FileItem[]	113	viewItems: sg.FileItem[];
105	viewRefs: incr.Ref<PreparedView>[],	114	viewRefs: incr.Ref<PreparedView>[];
106	styleMap: Map<string, incr.Ref<string>>;	115	styleMap: Map<string, incr.Ref<string>>;
107	scriptMap: incr.Ref<Record<string, string>>;	116	scriptMap: incr.Ref<Record<string, string>>;
108	platform: ServerPlatform,	117	platform: ServerPlatform;
109	}	118	}
110	export async function bundleServerJavaScript(	119	export async function bundleServerJavaScript({
111	{ viewItems, viewRefs, styleMap, scriptMap: wScriptMap, entries, platform }: ServerSideOptions	120	viewItems,
112	) {	121	viewRefs,
		122	styleMap,
		123	scriptMap: wScriptMap,
		124	entries,
		125	platform,
		126	}: ServerSideOptions) {
113	const wViewSource = incr.work(async (_, viewItems: sg.FileItem[]) => {	127	const wViewSource = incr.work(async (_, viewItems: sg.FileItem[]) => {
114	const magicWord = "C_" + crypto.randomUUID().replaceAll("-", "_");	128	const magicWord = "C_" + crypto.randomUUID().replaceAll("-", "_");
115	return {	129	return {
116	magicWord,	130	magicWord,
117	file: [	131	file: [
118	...viewItems.map((view, i) => `import * as view${i} from ${JSON.stringify(view.file)}`),	132	...viewItems.map(
		133	(view, i) => `import * as view${i} from ${JSON.stringify(view.file)}`,
		134	),
119	`const styles = ${magicWord}[-2]`,	135	`const styles = ${magicWord}[-2]`,
120	`export const scripts = ${magicWord}[-1]`,	136	`export const scripts = ${magicWord}[-1]`,
121	"export const views = {",	137	"export const views = {",
122	...viewItems.map((view, i) => [	138	...viewItems.map((view, i) =>
123	` ${JSON.stringify(view.id)}: {`,	139	[
124	` component: view${i}.default,`,	140	` ${JSON.stringify(view.id)}: {`,
125	` meta: view${i}.meta,`,	141	` component: view${i}.default,`,
126	` layout: view${i}.layout?.default ?? null,`,	142	` meta: view${i}.meta,`,
127	` inlineCss: styles[${magicWord}[${i}]]`,	143	` layout: view${i}.layout?.default ?? null,`,
128	` },`,	144	` inlineCss: styles[${magicWord}[${i}]]`,
129	].join("\n")),	145	` },`,
		146	].join("\n"),
		147	),
130	"}",	148	"}",
131	].join("\n")	149	].join("\n"),
132	};	150	};
133	}, viewItems)	151	}, viewItems);
134		152
135	const wBundles = entries.map(entry => [entry, incr.work(async (io, entry) => {	153	const wBundles = entries.map(
136	const pkg = await io.readJson<{ dependencies: Record<string, string>; }>("package.json");	154	(entry) =>
		155	[
		156	entry,
		157	incr.work(async (io, entry) => {
		158	const pkg = await io.readJson<{
		159	dependencies: Record<string, string>;
		160	}>("package.json");
137		161
138	let magicWord = null as string \| null;	162	let magicWord = null as string \| null;
139	// -- plugins --	163	// -- plugins --
140	const serverPlugins: esbuild.Plugin[] = [	164	const serverPlugins: esbuild.Plugin[] = [
141	virtualFiles({	165	virtualFiles({
142	// only add dependency when imported.	166	// only add dependency when imported.
143	"$views": async () => {	167	$views: async () => {
144	const view = await io.readWork(wViewSource);	168	const view = await io.readWork(wViewSource);
145	({ magicWord } = view);	169	({ magicWord } = view);
146	return view.file;	170	return view.file;
147	},	171	},
148	}),	172	}),
149	projectRelativeResolution(),	173	projectRelativeResolution(),
150	markoViaBuildCache(),	174	markoViaBuildCache(),
151	{	175	{
152	name: "replace client references",	176	name: "replace client references",
153	setup(b) {	177	setup(b) {
154	b.onLoad({ filter: /\.tsx?$/ }, async ({ path: file }) => ({	178	b.onLoad({ filter: /\.tsx?$/ }, async ({ path: file }) => ({
155	contents:	179	contents: hot.resolveClientRefs(
156	hot.resolveClientRefs(await fs.readFile(file, "utf-8"), file).code,	180	await fs.readFile(file, "utf-8"),
157	loader: path.extname(file).slice(1) as esbuild.Loader,	181	file,
158	}));	182	).code,
159	},	183	loader: path.extname(file).slice(1) as esbuild.Loader,
160	},	184	}));
161	{	185	},
162	name: "mark css external",	186	},
163	setup(b) {	187	{
164	b.onResolve(	188	name: "mark css external",
165	{ filter: /\.css$/ },	189	setup(b) {
166	() => ({ path: ".", namespace: "dropped" }),	190	b.onResolve({ filter: /\.css$/ }, () => ({
167	);	191	path: ".",
168	b.onLoad(	192	namespace: "dropped",
169	{ filter: /./, namespace: "dropped" },	193	}));
170	() => ({ contents: "" }),	194	b.onLoad({ filter: /./, namespace: "dropped" }, () => ({
171	);	195	contents: "",
172	},	196	}));
173	},	197	},
174	];	198	},
		199	];
175		200
176	const { metafile, outputFiles, errors, warnings } = await esbuild.build({	201	const { metafile, outputFiles } = await esbuild.build({
177	bundle: true,	202	bundle: true,
178	chunkNames: "c.[hash]",	203	chunkNames: "c.[hash]",
179	entryNames: path.basename(entry, path.extname(entry)),	204	entryNames: path.basename(entry, path.extname(entry)),
180	entryPoints: [	205	entryPoints: [
181	path.join(import.meta.dirname, "backend/entry-" + platform + ".ts"),	206	path.join(
182	],	207	import.meta.dirname,
183	platform: "node",	208	"backend/entry-" + platform + ".ts",
184	format: "esm",	209	),
185	minify: false,	210	],
186	outdir: "out!",	211	platform: "node",
187	plugins: serverPlugins,	212	format: "esm",
188	splitting: true,	213	minify: false,
189	logLevel: "silent",	214	outdir: "out!",
190	write: false,	215	plugins: serverPlugins,
191	metafile: true,	216	splitting: true,
192	jsx: "automatic",	217	logLevel: "silent",
193	jsxImportSource: "#ssr",	218	write: false,
194	jsxDev: false,	219	metafile: true,
195	define: {	220	jsx: "automatic",
196	MIME_INLINE_DATA: JSON.stringify(mime.rawEntriesText),	221	jsxImportSource: "#engine",
197	'globalThis.CLOVER_SERVER_ENTRY': JSON.stringify(entry),	222	jsxDev: false,
198	},	223	define: {
199	external: Object.keys(pkg.dependencies)	224	MIME_INLINE_DATA: JSON.stringify(mime.rawEntriesText),
200	.filter((x) => !x.startsWith("@paperclover")),	225	"globalThis.CLOVER_SERVER_ENTRY": JSON.stringify(entry),
201	});	226	},
202	await trackEsbuild(io, metafile)	227	external: Object.keys(pkg.dependencies).filter(
		228	(x) => !x.startsWith("@paperclover"),
		229	),
		230	});
		231	await trackEsbuild(io, metafile);
203		232
204	let fileWithMagicWord: {	233	let fileWithMagicWord: {
205	bytes: Buffer;	234	bytes: Buffer;
206	basename: string;	235	basename: string;
207	magicWord: string;	236	magicWord: string;
208	} \| null = null;	237	} \| null = null;
209	for (const output of outputFiles) {	238	for (const output of outputFiles) {
210	const basename = output.path.replace(/^.*?!(?:\/\|\\)/, "");	239	const basename = output.path.replace(/^.*?!(?:\/\|\\)/, "");
211	const key = "out!/" + basename.replaceAll("\\", "/");	240	const key = "out!/" + basename.replaceAll("\\", "/");
212	// If this contains the generated "$views" file, then	241	// If this contains the generated "$views" file, then
213	// mark this file as the one for replacement. Because	242	// mark this file as the one for replacement. Because
214	// `splitting` is `true`, esbuild will not emit this	243	// `splitting` is `true`, esbuild will not emit this
215	// file in more than one chunk.	244	// file in more than one chunk.
216	if (magicWord && metafile.outputs[key].inputs["framework/lib/view.ts"]) {	245	if (
217	ASSERT(!fileWithMagicWord);	246	magicWord &&
218	fileWithMagicWord = {	247	metafile.outputs[key].inputs["framework/lib/view.ts"]
219	basename,	248	) {
220	bytes: Buffer.from(output.contents),	249	ASSERT(!fileWithMagicWord);
221	magicWord,	250	fileWithMagicWord = {
222	};	251	basename,
223	} else {	252	bytes: Buffer.from(output.contents),
224	io.writeFile(basename, Buffer.from(output.contents))	253	magicWord,
225	}	254	};
226	}	255	} else {
227	return fileWithMagicWord;	256	io.writeFile(basename, Buffer.from(output.contents));
228	}, entry)] as const);	257	}
		258	}
		259	return fileWithMagicWord;
		260	}, entry),
		261	] as const,
		262	);
229		263
230	const wProcessed = wBundles.map(async([entry, wBundle]) => {	264	const wProcessed = wBundles.map(async ([entry, wBundle]) => {
231	if (!await wBundle) return;	265	if (!(await wBundle)) return;
232	await incr.work(async (io) => {	266	await incr.work(async (io) => {
233	// Only the reachable resources need to be read and inserted into the bundle.	267	// Only the reachable resources need to be read and inserted into the bundle.
234	// This is what Map<string, incr.Ref> is for	268	// This is what Map<string, incr.Ref> is for
235	const { basename, bytes, magicWord } = UNWRAP(await io.readWork(wBundle));	269	const { basename, bytes, magicWord } = UNWRAP(await io.readWork(wBundle));
236	const views = await Promise.all(viewRefs.map(ref => io.readWork(ref)));	270	const views = await Promise.all(viewRefs.map((ref) => io.readWork(ref)));
237		271
238	// Client JS	272	// Client JS
239	const scriptList = Object.entries(await io.readWork(wScriptMap));	273	const scriptList = Object.entries(await io.readWork(wScriptMap));
240	const viewScriptsList = new Set(views.flatMap(view => view.clientRefs));	274	const viewScriptsList = new Set(views.flatMap((view) => view.clientRefs));
241	const neededScripts = scriptList.filter(([k]) => viewScriptsList.has(k));	275	const neededScripts = scriptList.filter(([k]) => viewScriptsList.has(k));
242		276
243	// CSS	277	// CSS
244	const viewStyleKeys = views.map((view) => view.styleKey);	278	const viewStyleKeys = views.map((view) => view.styleKey);
245	const viewCssBundles = await Promise.all(	279	const viewCssBundles = await Promise.all(
246	viewStyleKeys.map((key) => io.readWork(UNWRAP(styleMap.get(key), "Style key: " + key))));	280	viewStyleKeys.map((key) =>
		281	io.readWork(UNWRAP(styleMap.get(key), "Style key: " + key)),
		282	),
		283	);
247	const styleList = Array.from(new Set(viewCssBundles));	284	const styleList = Array.from(new Set(viewCssBundles));
248		285
249	// Replace the magic word	286	// Replace the magic word
250	const text = bytes.toString("utf-8").replace(	287	const text = bytes
251	new RegExp(magicWord + "\\[(-?\\d+)\\]", "gs"),	288	.toString("utf-8")
252	(_, i) => {	289	.replace(new RegExp(magicWord + "\\[(-?\\d+)\\]", "gs"), (_, i) => {
253	i = Number(i);	290	i = Number(i);
254	// Inline the styling data	291	// Inline the styling data
255	if (i === -2) {	292	if (i === -2) {
...	@@ -261,17 +298,15 @@ export async function bundleServerJavaScript(	...	@@ -261,17 +298,15 @@ export async function bundleServerJavaScript(
261	}	298	}
262	// Reference an index into `styleList`	299	// Reference an index into `styleList`
263	return `${styleList.indexOf(viewCssBundles[i])}`;	300	return `${styleList.indexOf(viewCssBundles[i])}`;
264	},	301	});
265	);
266		302
267	io.writeFile(basename, text);	303	io.writeFile(basename, text);
268	});	304	});
269	})	305	});
270		306
271	await Promise.all(wProcessed);	307	await Promise.all(wProcessed);
272	}	308	}
273		309
274
275	import * as esbuild from "esbuild";	310	import * as esbuild from "esbuild";
276	import * as path from "node:path";	311	import * as path from "node:path";
277	import process from "node:process";	312	import process from "node:process";
...	@@ -282,9 +317,8 @@ import {	...	@@ -282,9 +317,8 @@ import {
282	projectRelativeResolution,	317	projectRelativeResolution,
283	virtualFiles,	318	virtualFiles,
284	} from "./esbuild-support.ts";	319	} from "./esbuild-support.ts";
285	import { Io, toAbs, toRel } from "./incremental.ts";	320	import { Io, toAbs } from "./incremental.ts";
286	import * as css from "./css.ts";
287	import * as fs from "#sitegen/fs";	321	import * as fs from "#sitegen/fs";
288	import * as mime from "#sitegen/mime";	322	import * as mime from "#sitegen/mime";
289	import * as incr from "./incremental.ts";	323	import * as incr from "./incremental.ts";
290	import * as sg from "#sitegen";import type { PreparedView } from "./generate2.ts";import { meta } from "@/file-viewer/pages/file.cotyledon_speedbump.tsx";	324	import * as sg from "#sitegen";

framework/engine/jsx-runtime.ts+14-14

...	@@ -1,37 +1,37 @@	...	@@ -1,37 +1,37 @@
1	export const Fragment = ({ children }: { children: engine.Node[] }) => children;	1	export const Fragment = ({ children }: { children: render.Node[] }) => children;
2		2
3	export function jsx(	3	export function jsx(
4	type: string \| engine.Component,	4	type: string \| render.Component,
5	props: Record<string, unknown>,	5	props: Record<string, unknown>,
6	): engine.Element {	6	): render.Element {
7	if (typeof type !== "function" && typeof type !== "string") {	7	if (typeof type !== "function" && typeof type !== "string") {
8	throw new Error("Invalid component type: " + engine.inspect(type));	8	throw new Error("Invalid component type: " + render.inspect(type));
9	}	9	}
10	return [engine.kElement, type, props];	10	return [render.kElement, type, props];
11	}	11	}
12		12
13	export function jsxDEV(	13	export function jsxDEV(
14	type: string \| engine.Component,	14	type: string \| render.Component,
15	props: Record<string, unknown>,	15	props: Record<string, unknown>,
16	// Unused with the clover engine	16	// Unused with the clover engine
17	_key: string,	17	_key: string,
18	// Unused with the clover engine	18	// Unused with the clover engine
19	_isStaticChildren: boolean,	19	_isStaticChildren: boolean,
20	source: engine.SrcLoc,	20	source: render.SrcLoc,
21	): engine.Element {	21	): render.Element {
22	const { fileName, lineNumber, columnNumber } = source;	22	const { fileName, lineNumber, columnNumber } = source;
23		23
24	// Assert the component type is valid to render.	24	// Assert the component type is valid to render.
25	if (typeof type !== "function" && typeof type !== "string") {	25	if (typeof type !== "function" && typeof type !== "string") {
26	throw new Error(	26	throw new Error(
27	`Invalid component type at ${fileName}:${lineNumber}:${columnNumber}: ` +	27	`Invalid component type at ${fileName}:${lineNumber}:${columnNumber}: ` +
28	engine.inspect(type) +	28	render.inspect(type) +
29	". Clover SSR element must be a function or string",	29	". Clover SSR element must be a function or string",
30	);	30	);
31	}	31	}
32		32
33	// Construct an `ssr.Element`	33	// Construct an `ssr.Element`
34	return [engine.kElement, type, props, "", source];	34	return [render.kElement, type, props, "", source];
35	}	35	}
36		36
37	// jsxs	37	// jsxs
...	@@ -45,10 +45,10 @@ declare global {	...	@@ -45,10 +45,10 @@ declare global {
45	interface ElementChildrenAttribute {	45	interface ElementChildrenAttribute {
46	children: Node;	46	children: Node;
47	}	47	}
48	type Element = engine.Element;	48	type Element = render.Element;
49	type ElementType = keyof IntrinsicElements \| engine.Component;	49	type ElementType = keyof IntrinsicElements \| render.Component;
50	type ElementClass = ReturnType<engine.Component>;	50	type ElementClass = ReturnType<render.Component>;
51	}	51	}
52	}	52	}
53		53
54	import * as engine from "./ssr.ts";	54	import * as render from "./render.ts";

framework/engine/marko-runtime.ts+27-36

 @@ -11,29 +11,22 @@ export const createTemplate = (
   templateId: string,
   renderer: ServerRenderer,
 ) => {
-  const { render } = marko.createTemplate(templateId, renderer);
+  const { render: renderFn } = marko.createTemplate(templateId, renderer);
   function wrap(props: Record<string, unknown>, n: number) {
     // Marko Custom Tags
     const cloverAsyncMarker = { isAsync: false };
-    let r: engine.Render | undefined = undefined;
+    const r = render.current;
-    try {
-      r = engine.getCurrentRender();
-    } catch {}
     // Support using Marko outside of Clover SSR
-    if (r) {
+    if (!r) return renderer(props, n);
-      engine.setCurrentRender(null);
+    const markoResult = renderFn.call(renderer, {
-      const markoResult = render.call(renderer, {
+      ...props,
-        ...props,
+      $global: { clover: r, cloverAsyncMarker },
-        $global: { clover: r, cloverAsyncMarker },
+    });
-      });
+    if (cloverAsyncMarker.isAsync) {
-      if (cloverAsyncMarker.isAsync) {
+      return markoResult.then(render.raw);
-        return markoResult.then(engine.html);
-      }
-      const rr = markoResult.toString();
-      return engine.html(rr);
-    } else {
-      return renderer(props, n);
     }
+    const rr = markoResult.toString();
+    return render.raw(rr);
   }
   wrap.render = render;
   wrap.unwrapped = renderer;
 @@ -56,20 +49,16 @@ export const dynamicTag = (
         tag = unwrapped;
         break clover;
       }
-      let r: engine.Render;
+      const r = render.current ?? (marko.$global().clover as render.State);
-      try {
-        r = engine.getCurrentRender();
-        if (!r) throw 0;
-      } catch {
-        r = marko.$global().clover as engine.Render;
-      }
       if (!r) throw new Error("No Clover Render Active");
-      const subRender = engine.initRender(r.async !== -1, r.addon);
+      const subRender = render.init(r.async !== -1, r.addon);
-      const resolved = engine.resolveNode(subRender, [
+      const resolved = render.resolveNode(
-        engine.kElement,
+        subRender,
-        tag,
+        render.element(
-        inputOrArgs,
+          tag as render.Component,
-      ]);
+          inputOrArgs as Record<any, any>,
+        ),
+      );
       if (subRender.async > 0) {
         const marker = marko.$global().cloverAsyncMarker as Async;
 @@ -79,7 +68,7 @@ export const dynamicTag = (
         const { resolve, reject, promise } = Promise.withResolvers<string>();
         subRender.asyncDone = () => {
           const rejections = subRender.rejections;
-          if (!rejections) return resolve(engine.renderNode(resolved));
+          if (!rejections) return resolve(render.stringifyNode(resolved));
           (r.rejections ??= []).push(...rejections);
           return reject(new Error("Render had errors"));
         };
 @@ -91,7 +80,7 @@ export const dynamicTag = (
           0,
         );
       } else {
-        marko.write(engine.renderNode(resolved));
+        marko.write(render.stringifyNode(resolved));
       }
       return;
     }
 @@ -124,13 +113,15 @@ export function escapeXML(input: unknown) {
   // creating `[object Object]` is universally useless to any end user.
   if (
     input == null ||
-    (typeof input === "object" && input &&
+    (typeof input === "object" &&
+      input &&
       // only block this if it's the default `toString`
       input.toString === Object.prototype.toString)
   ) {
     throw new Error(
       `Unexpected value in template placeholder: '` +
-        engine.inspect(input) + "'. " +
+        render.inspect(input) +
+        "'. " +
         `To emit a literal '${input}', use \${String(value)}`,
     );
   }
 @@ -141,7 +132,7 @@ interface Async {
   isAsync: boolean;
 }
-import * as engine from "./ssr.ts";
+import * as render from "#engine/render";
 import type { ServerRenderer } from "marko/html/template";
 import { type Accessor } from "marko/common/types";
 import * as marko from "#marko/html";

framework/engine/render.test.tsx created+41

...	@@ -0,0 +1,41 @@
1	import { test } from "node:test";
2	import * as render from "./render.ts";
3
4	test("sanity", (t) => t.assert.equal(render.sync("gm <3").text, "gm <3"));
5	test("simple tree", (t) =>
6	t.assert.equal(
7	render.sync(
8	<main class={["a", "b"]}>
9	<h1 style="background-color:red">hello world</h1>
10	<p>haha</p>
11	{1}\|{0}\|{true}\|{false}\|{null}\|{undefined}\|
12	</main>,
13	).text,
14	'<main class="a b"><h1 style=background-color:red>hello world</h1><p>haha</p>1\|0\|\|\|\|\|</main>',
15	));
16	test("unescaped/escaped html", (t) =>
17	t.assert.equal(
18	render.sync(
19	<div>
20	{render.raw("<fuck>")}
21	{"\"&'`<>"}
22	</div>,
23	).text,
24	"<div><fuck>"&'`<></div>",
25	));
26	test("clsx built-in", (t) =>
27	t.assert.equal(
28	render.sync(
29	<>
30	<a class="a" />
31	<b class={null} />
32	<c class={undefined} />
33	<d class={["a", "b", null]} />
34	<e class={{ a: true, b: false }} />
35	<e
36	class={[null, "x", { z: true }, [{ m: true }, null, { v: false }]]}
37	/>
38	</>,
39	).text,
40	'<a class=a></a><b></b><c></c><d class="a b"></d><e class=a></e><e class="x z m"></e>',
41	));

framework/engine/render.ts created+321

...	@@ -0,0 +1,321 @@
1	// Clover's Rendering Engine is the backbone of her website generator. It
2	// converts objects and components (functions returning 'Node') into HTML. The
3	// engine is simple and self-contained, with integrations for JSX and Marko
4	// (which can interop with each-other) are provided next to this file.
5	//
6	// Add-ons to the rendering engine can provide opaque data, And retrieve it
7	// within component calls with 'getAddonData'. For example, 'sitegen' uses this
8	// to track needed client scripts without introducing patches to the engine.
9	export let current: State \| null = null;
10	export function setCurrent(r: State \| null) {
11	current = r ?? null;
12	}
13
14	/* Convert a UI description into a string synchronously. */
15	export function sync<A extends Addons>(node: Node, addon: A = {} as A) {
16	const state = init(false, addon);
17	const resolved = resolveNode(state, node);
18	return { text: stringifyNode(resolved), addon };
19	}
20
21	/* Convert a UI description into a string asynchronously. */
22	export function async<A extends Addons>(node: Node, addon: A = {} as A) {
23	const state = init(true, addon);
24	const resolved = resolveNode(state, node);
25	if (state.async === 0) {
26	return Promise.resolve({ text: stringifyNode(resolved), addon });
27	}
28	const { resolve, reject, promise } = Promise.withResolvers<Result<A>>();
29	state.asyncDone = () => {
30	const rejections = state.rejections;
31	if (!rejections) return resolve({ text: stringifyNode(resolved), addon });
32	if (rejections.length === 1) return reject(rejections[0]);
33	return reject(new AggregateError(rejections));
34	};
35	return promise;
36	}
37
38	export type Addons = Record<symbol, unknown>;
39	export interface Result<A extends Addons = Addons> {
40	text: string;
41	addon: A;
42	}
43
44	export function userData<T>(def: () => T) {
45	const k: unique symbol = Symbol();
46	return {
47	key: k,
48	get: () => ((UNWRAP(current).addon[k] as T) ??= def() as T),
49	set: (value: T) => void (UNWRAP(current).addon[k] = value),
50	};
51	}
52
53	/** Inline HTML into a render without escaping it */
54	export function raw(node: ResolvedNode): Raw {
55	return [kRaw, node];
56	}
57	export function element(type: Element[1], props: Element[2] = {}): Element {
58	return [kElement, type, props];
59	}
60	export function resolvedElement(
61	type: ResolvedElement[1],
62	props: ResolvedElement[2],
63	children: ResolvedElement[3],
64	): ResolvedElement {
65	return [kElement, type, props, children];
66	}
67
68	export interface State {
69	/**
70	* Set to '-1' if rendering synchronously
71	* Number of async promises the render is waiting on.
72	*/
73	async: number \| -1;
74	asyncDone: null \| (() => void);
75	/** When components reject, those are logged here */
76	rejections: unknown[] \| null;
77	/** Add-ons to the rendering engine store state here */
78	addon: Addons;
79	}
80
81	export const kElement = Symbol("Element");
82	export const kRaw = Symbol("Raw");
83
84	/** Node represents a webpage that can be 'rendered' into HTML. */
85	export type Node =
86	\| number
87	\| string // Escape HTML
88	\| Node[] // Concat
89	\| Element // Stringify
90	\| Raw // Insert
91	\| Promise<Node> // Await
92	// Ignore
93	\| (undefined \| null \| boolean);
94	export type Element = [
95	tag: typeof kElement,
96	type: string \| Component,
97	props: Record<string, unknown>,
98	_?: "", // children
99	source?: SrcLoc,
100	];
101	export type Raw = [tag: typeof kRaw, html: ResolvedNode];
102	/** Components must return a value; 'undefined' is prohibited here
103	* to avoid functions that are missing a return statement. */
104	export type Component = (props: Record<any, any>) => Exclude<Node, undefined>;
105	/** Emitted by JSX runtime */
106	export interface SrcLoc {
107	fileName: string;
108	lineNumber: number;
109	columnNumber: number;
110	}
111
112	/**
113	* Resolution narrows the type 'Node' into 'ResolvedNode'. Async trees are
114	* marked in 'State'. This operation performs everything besides the final
115	* string concatenation. This function is agnostic across async/sync modes.
116	*/
117	export function resolveNode(r: State, node: unknown): ResolvedNode {
118	if (!node && node !== 0) return ""; // falsy, non numeric
119	if (typeof node !== "object") {
120	if (node === true) return ""; // booleans are ignored
121	if (typeof node === "string") return escapeHtml(node);
122	if (typeof node === "number") return String(node); // no escaping ever
123	throw new Error(`Cannot render ${inspect(node)} to HTML`);
124	}
125	if (node instanceof Promise) {
126	if (r.async === -1) {
127	throw new Error(`Asynchronous rendering is not supported here.`);
128	}
129	const placeholder: InsertionPoint = [null];
130	r.async += 1;
131	node
132	.then((result) => void (placeholder[0] = resolveNode(r, result)))
133	// Intentionally catching errors in `resolveNode`
134	.catch((e) => (r.rejections ??= []).push(e))
135	.finally(() => {
136	if (--r.async == 0) {
137	if (r.asyncDone == null) throw new Error("r.asyncDone == null");
138	r.asyncDone();
139	r.asyncDone = null;
140	}
141	});
142	// This lie is checked with an assertion in `renderNode`
143	return placeholder as [ResolvedNode];
144	}
145	if (!Array.isArray(node)) {
146	throw new Error(`Invalid node type: ${inspect(node)}`);
147	}
148	const type = node[0];
149	if (type === kElement) {
150	const { 1: tag, 2: props } = node;
151	if (typeof tag === "function") {
152	current = r;
153	try {
154	return resolveNode(r, tag(props));
155	} catch (e) {
156	const { 4: src } = node;
157	if (e && typeof e === "object") (e as { src?: string }).src = src;
158	throw e;
159	} finally {
160	current = null;
161	}
162	}
163	if (typeof tag !== "string") throw new Error("Unexpected " + inspect(type));
164	const children = props?.children;
165	if (children) return [kElement, tag, props, resolveNode(r, children)];
166	return node;
167	}
168	if (type === kRaw) return node[1];
169	return node.map((elem) => resolveNode(r, elem));
170	}
171
172	export type ResolvedNode =
173	\| ResolvedNode[] // Concat
174	\| ResolvedElement // Render
175	\| string; // Raw HTML
176	export type ResolvedElement = [
177	tag: typeof kElement,
178	type: string,
179	props: Record<string, unknown>,
180	children: ResolvedNode,
181	];
182	/**
183	* Async rendering is done by creating an array of one item,
184	* which is already a valid 'Node', but the element is written
185	* once the data is available. The 'Render' contains a count
186	* of how many async jobs are left.
187	*/
188	export type InsertionPoint = [null \| ResolvedNode];
189
190	/**
191	* Convert 'ResolvedNode' into HTML text. This operation happens after all
192	* async work is settled. The HTML is emitted as concisely as possible.
193	*/
194	export function stringifyNode(node: ResolvedNode): string {
195	if (typeof node === "string") return node;
196	ASSERT(node, "Unresolved Render Node");
197	const type = node[0];
198	if (type === kElement) {
199	return stringifyElement(node as ResolvedElement);
200	}
201	node = node as ResolvedNode[]; // TS cannot infer.
202	let out = type ? stringifyNode(type) : "";
203	let len = node.length;
204	for (let i = 1; i < len; i++) {
205	const elem = node[i];
206	if (elem) out += stringifyNode(elem);
207	}
208	return out;
209	}
210	function stringifyElement(element: ResolvedElement) {
211	const { 1: tag, 2: props, 3: children } = element;
212	let out = "<" + tag;
213	let needSpace = true;
214	for (const prop in props) {
215	const value = props[prop];
216	if (!value \|\| typeof value === "function") continue;
217	let attr;
218	switch (prop) {
219	default:
220	attr = `${prop}=${quoteIfNeeded(escapeHtml(String(value)))}`;
221	break;
222	case "className":
223	// Legacy React Compat
224	case "class":
225	attr = `class=${quoteIfNeeded(escapeHtml(clsx(value as ClsxInput)))}`;
226	break;
227	case "htmlFor":
228	throw new Error("Do not use the `htmlFor` attribute. Use `for`");
229	// Do not process these
230	case "children":
231	case "ref":
232	case "dangerouslySetInnerHTML":
233	case "key":
234	continue;
235	}
236	if (needSpace) (out += " "), (needSpace = !attr.endsWith('"'));
237	out += attr;
238	}
239	out += ">";
240	if (children) out += stringifyNode(children);
241	if (
242	tag !== "br" &&
243	tag !== "img" &&
244	tag !== "input" &&
245	tag !== "meta" &&
246	tag !== "link" &&
247	tag !== "hr"
248	) {
249	out += `</${tag}>`;
250	}
251	return out;
252	}
253	export function stringifyStyleAttribute(style: Record<string, string>) {
254	let out = ``;
255	for (const styleName in style) {
256	if (out) out += ";";
257	out += `${styleName.replace(/[A-Z]/g, "-$&").toLowerCase()}:${escapeHtml(
258	String(style[styleName]),
259	)}`;
260	}
261	return "style=" + quoteIfNeeded(out);
262	}
263	export function quoteIfNeeded(text: string) {
264	if (text.includes(" ")) return '"' + text + '"';
265	return text;
266	}
267
268	// -- utility functions --
269
270	export function init(allowAsync: boolean, addon: Addons): State {
271	return {
272	async: allowAsync ? 0 : -1,
273	rejections: null,
274	asyncDone: null,
275	addon,
276	};
277	}
278
279	export type ClsxInput = string \| Record<string, boolean \| null> \| ClsxInput[];
280	export function clsx(mix: ClsxInput) {
281	var k,
282	y,
283	str = "";
284	if (typeof mix === "string") {
285	return mix;
286	} else if (typeof mix === "object") {
287	if (Array.isArray(mix)) {
288	for (k = 0; k < mix.length; k++) {
289	if (mix[k] && (y = clsx(mix[k]))) {
290	str && (str += " ");
291	str += y;
292	}
293	}
294	} else {
295	for (k in mix) {
296	if (mix[k]) {
297	str && (str += " ");
298	str += k;
299	}
300	}
301	}
302	}
303	return str;
304	}
305
306	export const escapeHtml = (unsafeText: string) =>
307	String(unsafeText)
308	.replace(/&/g, "&")
309	.replace(/</g, "<")
310	.replace(/>/g, ">")
311	.replace(/"/g, """)
312	.replace(/'/g, "'")
313	.replace(/`/g, "`");
314
315	export function inspect(object: unknown) {
316	try {
317	return require("node:util").inspect(object);
318	} catch {
319	return typeof object;
320	}
321	}

framework/engine/ssr.test.tsx deleted-41

...	@@ -1,41 +0,0 @@
1	import { test } from "node:test";
2	import * as engine from "./ssr.ts";
3
4	test("sanity", (t) => t.assert.equal(engine.ssrSync("gm <3").text, "gm <3"));
5	test("simple tree", (t) =>
6	t.assert.equal(
7	engine.ssrSync(
8	<main class={["a", "b"]}>
9	<h1 style="background-color:red">hello world</h1>
10	<p>haha</p>
11	{1}\|
12	{0}\|
13	{true}\|
14	{false}\|
15	{null}\|
16	{undefined}\|
17	</main>,
18	).text,
19	'<main class="a b"><h1 style=background-color:red>hello world</h1><p>haha</p>1\|0\|\|\|\|\|</main>',
20	));
21	test("unescaped/escaped html", (t) =>
22	t.assert.equal(
23	engine.ssrSync(<div>{engine.html("<fuck>")}{"\"&'`<>"}</div>).text,
24	"<div><fuck>"&'`<></div>",
25	));
26	test("clsx built-in", (t) =>
27	t.assert.equal(
28	engine.ssrSync(
29	<>
30	<a class="a" />
31	<b class={null} />
32	<c class={undefined} />
33	<d class={["a", "b", null]} />
34	<e class={{ a: true, b: false }} />
35	<e
36	class={[null, "x", { z: true }, [{ m: true }, null, { v: false }]]}
37	/>
38	</>,
39	).text,
40	'<a class=a></a><b></b><c></c><d class="a b"></d><e class=a></e><e class="x z m"></e>',
41	));

framework/engine/ssr.ts deleted-306

...	@@ -1,306 +0,0 @@
1	// Clover's Rendering Engine is the backbone of her website generator. It
2	// converts objects and components (functions returning 'Node') into HTML. The
3	// engine is simple and self-contained, with integrations for JSX and Marko
4	// (which can interop with each-other) are provided next to this file.
5	//
6	// Add-ons to the rendering engine can provide opaque data, And retrieve it
7	// within component calls with 'getAddonData'. For example, 'sitegen' uses this
8	// to track needed client scripts without introducing patches to the engine.
9	export type Addons = Record<string \| symbol, unknown>;
10
11	export function ssrSync<A extends Addons>(node: Node, addon: A = {} as A) {
12	const r = initRender(false, addon);
13	const resolved = resolveNode(r, node);
14	return { text: renderNode(resolved), addon };
15	}
16	export { ssrSync as sync };
17
18	export function ssrAsync<A extends Addons>(node: Node, addon: A = {} as A) {
19	const r = initRender(true, addon);
20	const resolved = resolveNode(r, node);
21	if (r.async === 0) {
22	return Promise.resolve({ text: renderNode(resolved), addon });
23	}
24	const { resolve, reject, promise } = Promise.withResolvers<Result<A>>();
25	r.asyncDone = () => {
26	const rejections = r.rejections;
27	if (!rejections) return resolve({ text: renderNode(resolved), addon });
28	if (rejections.length === 1) return reject(rejections[0]);
29	return reject(new AggregateError(rejections));
30	};
31	return promise;
32	}
33	export { ssrAsync as async };
34
35	/** Inline HTML into a render without escaping it */
36	export function html(rawText: ResolvedNode): DirectHtml {
37	return [kDirectHtml, rawText];
38	}
39
40	interface Result<A extends Addons = Addons> {
41	text: string;
42	addon: A;
43	}
44
45	export interface Render {
46	/**
47	* Set to '-1' if rendering synchronously
48	* Number of async promises the render is waiting on.
49	*/
50	async: number \| -1;
51	asyncDone: null \| (() => void);
52	/** When components reject, those are logged here */
53	rejections: unknown[] \| null;
54	/** Add-ons to the rendering engine store state here */
55	addon: Addons;
56	}
57
58	export const kElement = Symbol("Element");
59	export const kDirectHtml = Symbol("DirectHtml");
60
61	/** Node represents a webpage that can be 'rendered' into HTML. */
62	export type Node =
63	\| number
64	\| string // Escape HTML
65	\| Node[] // Concat
66	\| Element // Render
67	\| DirectHtml // Insert
68	\| Promise<Node> // Await
69	// Ignore
70	\| undefined
71	\| null
72	\| boolean;
73	export type Element = [
74	tag: typeof kElement,
75	type: string \| Component,
76	props: Record<string, unknown>,
77	_?: "",
78	source?: SrcLoc,
79	];
80	export type DirectHtml = [tag: typeof kDirectHtml, html: ResolvedNode];
81	/**
82	* Components must return a value; 'undefined' is prohibited here
83	* to avoid functions that are missing a return statement.
84	*/
85	export type Component = (
86	props: Record<any, any>,
87	) => Exclude<Node, undefined>;
88	/** Emitted by JSX runtime */
89	export interface SrcLoc {
90	fileName: string;
91	lineNumber: number;
92	columnNumber: number;
93	}
94
95	/**
96	* Resolution narrows the type 'Node' into 'ResolvedNode'. Async trees are
97	* marked in the 'Render'. This operation performs everything besides the final
98	* string concatenation. This function is agnostic across async/sync modes.
99	*/
100	export function resolveNode(r: Render, node: unknown): ResolvedNode {
101	if (!node && node !== 0) return ""; // falsy, non numeric
102	if (typeof node !== "object") {
103	if (node === true) return ""; // booleans are ignored
104	if (typeof node === "string") return escapeHtml(node);
105	if (typeof node === "number") return String(node); // no escaping ever
106	throw new Error(`Cannot render ${inspect(node)} to HTML`);
107	}
108	if (node instanceof Promise) {
109	if (r.async === -1) {
110	throw new Error(`Asynchronous rendering is not supported here.`);
111	}
112	const placeholder: InsertionPoint = [null];
113	r.async += 1;
114	node
115	.then((result) => void (placeholder[0] = resolveNode(r, result)))
116	// Intentionally catching errors in `resolveNode`
117	.catch((e) => (r.rejections ??= []).push(e))
118	.finally(() => {
119	if (--r.async == 0) {
120	if (r.asyncDone == null) throw new Error("r.asyncDone == null");
121	r.asyncDone();
122	r.asyncDone = null;
123	}
124	});
125	// This lie is checked with an assertion in `renderNode`
126	return placeholder as [ResolvedNode];
127	}
128	if (!Array.isArray(node)) {
129	throw new Error(`Invalid node type: ${inspect(node)}`);
130	}
131	const type = node[0];
132	if (type === kElement) {
133	const { 1: tag, 2: props } = node;
134	if (typeof tag === "function") {
135	currentRender = r;
136	try {
137	return resolveNode(r, tag(props));
138	} catch (e) {
139	const { 4: src } = node;
140	if (e && typeof e === "object") (e as { src?: string }).src = src;
141	throw e;
142	} finally {
143	currentRender = null;
144	}
145	}
146	if (typeof tag !== "string") throw new Error("Unexpected " + inspect(type));
147	const children = props?.children;
148	if (children) return [kElement, tag, props, resolveNode(r, children)];
149	return node;
150	}
151	if (type === kDirectHtml) return node[1];
152	return node.map((elem) => resolveNode(r, elem));
153	}
154
155	export type ResolvedNode =
156	\| ResolvedNode[] // Concat
157	\| ResolvedElement // Render
158	\| string; // Direct HTML
159	export type ResolvedElement = [
160	tag: typeof kElement,
161	type: string,
162	props: Record<string, unknown>,
163	children: ResolvedNode,
164	];
165	/**
166	* Async rendering is done by creating an array of one item,
167	* which is already a valid 'Node', but the element is written
168	* once the data is available. The 'Render' contains a count
169	* of how many async jobs are left.
170	*/
171	export type InsertionPoint = [null \| ResolvedNode];
172
173	/**
174	* Convert 'ResolvedNode' into HTML text. This operation happens after all
175	* async work is settled. The HTML is emitted as concisely as possible.
176	*/
177	export function renderNode(node: ResolvedNode): string {
178	if (typeof node === "string") return node;
179	ASSERT(node, "Unresolved Render Node");
180	const type = node[0];
181	if (type === kElement) {
182	return renderElement(node as ResolvedElement);
183	}
184	node = node as ResolvedNode[]; // TS cannot infer.
185	let out = type ? renderNode(type) : "";
186	let len = node.length;
187	for (let i = 1; i < len; i++) {
188	const elem = node[i];
189	if (elem) out += renderNode(elem);
190	}
191	return out;
192	}
193	function renderElement(element: ResolvedElement) {
194	const { 1: tag, 2: props, 3: children } = element;
195	let out = "<" + tag;
196	let needSpace = true;
197	for (const prop in props) {
198	const value = props[prop];
199	if (!value \|\| typeof value === "function") continue;
200	let attr;
201	switch (prop) {
202	default:
203	attr = `${prop}=${quoteIfNeeded(escapeHtml(String(value)))}`;
204	break;
205	case "className":
206	// Legacy React Compat
207	case "class":
208	attr = `class=${quoteIfNeeded(escapeHtml(clsx(value as ClsxInput)))}`;
209	break;
210	case "htmlFor":
211	throw new Error("Do not use the `htmlFor` attribute. Use `for`");
212	// Do not process these
213	case "children":
214	case "ref":
215	case "dangerouslySetInnerHTML":
216	case "key":
217	continue;
218	}
219	if (needSpace) out += " ", needSpace = !attr.endsWith('"');
220	out += attr;
221	}
222	out += ">";
223	if (children) out += renderNode(children);
224	if (
225	tag !== "br" && tag !== "img" && tag !== "input" && tag !== "meta" &&
226	tag !== "link" && tag !== "hr"
227	) {
228	out += `</${tag}>`;
229	}
230	return out;
231	}
232	export function renderStyleAttribute(style: Record<string, string>) {
233	let out = ``;
234	for (const styleName in style) {
235	if (out) out += ";";
236	out += `${styleName.replace(/[A-Z]/g, "-$&").toLowerCase()}:${
237	escapeHtml(String(style[styleName]))
238	}`;
239	}
240	return "style=" + quoteIfNeeded(out);
241	}
242	export function quoteIfNeeded(text: string) {
243	if (text.includes(" ")) return '"' + text + '"';
244	return text;
245	}
246
247	// -- utility functions --
248
249	export function initRender(allowAsync: boolean, addon: Addons): Render {
250	return {
251	async: allowAsync ? 0 : -1,
252	rejections: null,
253	asyncDone: null,
254	addon,
255	};
256	}
257
258	let currentRender: Render \| null = null;
259	export function getCurrentRender() {
260	if (!currentRender) throw new Error("No Render Active");
261	return currentRender;
262	}
263	export function setCurrentRender(r?: Render \| null) {
264	currentRender = r ?? null;
265	}
266	export function getUserData<T>(namespace: PropertyKey, def: () => T): T {
267	return (getCurrentRender().addon[namespace] ??= def()) as T;
268	}
269
270	export function inspect(object: unknown) {
271	try {
272	return require("node:util").inspect(object);
273	} catch {
274	return typeof object;
275	}
276	}
277
278	export type ClsxInput = string \| Record<string, boolean \| null> \| ClsxInput[];
279	export function clsx(mix: ClsxInput) {
280	var k, y, str = "";
281	if (typeof mix === "string") {
282	return mix;
283	} else if (typeof mix === "object") {
284	if (Array.isArray(mix)) {
285	for (k = 0; k < mix.length; k++) {
286	if (mix[k] && (y = clsx(mix[k]))) {
287	str && (str += " ");
288	str += y;
289	}
290	}
291	} else {
292	for (k in mix) {
293	if (mix[k]) {
294	str && (str += " ");
295	str += k;
296	}
297	}
298	}
299	}
300	return str;
301	}
302
303	export const escapeHtml = (unsafeText: string) =>
304	String(unsafeText)
305	.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">")
306	.replace(/"/g, """).replace(/'/g, "'").replace(/`/g, "`");

framework/engine/suspense.ts+37-37

 @@ -7,46 +7,44 @@
 //
 // I would link to an article from Next.js or React, but their examples
 // are too verbose and not informative to what they actually do.
-const kState = Symbol("SuspenseState");
+const userData = render.userData<null | State>(() => null);
 interface SuspenseProps {
-  children: ssr.Node;
+  children: render.Node;
-  fallback?: ssr.Node;
+  fallback?: render.Node;
 }
 interface State {
   nested: boolean;
   nextId: number;
   completed: number;
-  pushChunk(name: string, node: ssr.ResolvedNode): void;
+  pushChunk(name: string, node: render.ResolvedNode): void;
 }
-export function Suspense({ children, fallback }: SuspenseProps): ssr.Node {
+export function Suspense({ children, fallback }: SuspenseProps): render.Node {
-  const state = ssr.getUserData<State>(kState, () => {
+  const state = userData.get();
-    throw new Error("Can only use <Suspense> with 'renderStreaming'");
+  if (!state) return children;
-  });
   if (state.nested) throw new Error("<Suspense> cannot be nested");
-  const parent = ssr.getCurrentRender()!;
+  const parent = UNWRAP(render.current);
-  const r = ssr.initRender(true, { [kState]: { nested: true } });
+  const r = render.initRender(true, { [userData.key]: { nested: true } });
-  const resolved = ssr.resolveNode(r, children);
+  const resolved = render.resolveNode(r, children);
-  if (r.async == 0) return ssr.html(resolved);
+  if (r.async == 0) return render.raw(resolved);
-  const name = "suspended_" + (++state.nextId);
+  const name = "suspended_" + ++state.nextId;
   state.nested = true;
-  const ip: [ssr.ResolvedNode] = [
+  const ip: [render.ResolvedNode] = [
-    [
+    render.resolvedElement(
-      ssr.kElement,
       "slot",
       { name },
-      fallback ? ssr.resolveNode(parent, fallback) : "",
+      fallback ? render.resolveNode(parent, fallback) : "",
-    ],
+    ),
   ];
   state.nested = false;
   r.asyncDone = () => {
     const rejections = r.rejections;
     if (rejections && rejections.length > 0) throw new Error("TODO");
-    state.pushChunk?.(name, ip[0] = resolved);
+    state.pushChunk?.(name, (ip[0] = resolved));
   };
-  return ssr.html(ip);
+  return render.raw(ip);
 }
 // TODO: add a User-Agent parameter, which is used to determine if a
 @@ -54,17 +52,14 @@ export function Suspense({ children, fallback }: SuspenseProps): ssr.Node {
 // - Before ~2024 needs to use a JS implementation.
 // - IE should probably bail out entirely.
 export async function* renderStreaming<
-  T extends ssr.Addons = Record<never, unknown>,
+  T extends render.Addons = Record<never, unknown>,
->(
+>(node: render.Node, addon: T = {} as T) {
-  node: ssr.Node,
-  addon: T = {} as T,
-) {
   const {
     text: begin,
-    addon: { [kState]: state, ...addonOutput },
+    addon: { [userData.key]: state, ...addonOutput },
-  } = await ssr.ssrAsync(node, {
+  } = await render.async(node, {
     ...addon,
-    [kState]: {
+    [userData.key]: {
       nested: false,
       nextId: 0,
       completed: 0,
 @@ -79,24 +74,29 @@ export async function* renderStreaming<
   let chunks: string[] = [];
   state.pushChunk = (slot, node) => {
     while (node.length === 1 && Array.isArray(node)) node = node[0];
-    if (node[0] === ssr.kElement) {
+    if (node[0] === render.kElement) {
-      (node as ssr.ResolvedElement)[2].slot = slot;
+      (node as render.ResolvedElement)[2].slot = slot;
     } else {
-      node = [ssr.kElement, "clover-suspense", {
+      node = [
-        style: "display:contents",
+        render.kElement,
-        slot,
+        "clover-suspense",
-      }, node];
+        {
+          style: "display:contents",
+          slot,
+        },
+        node,
+      ];
     }
-    chunks.push(ssr.renderNode(node));
+    chunks.push(render.stringifyNode(node));
     resolve?.();
   };
   yield `<template shadowrootmode=open>${begin}</template>`;
   do {
-    await new Promise<void>((done) => resolve = done);
+    await new Promise<void>((done) => (resolve = done));
     yield* chunks;
     chunks = [];
   } while (state.nextId < state.completed);
   return addonOutput as unknown as T;
 }
-import * as ssr from "./ssr.ts";
+import * as render from "./render.ts";

framework/generate.ts+51-78

 @@ -14,12 +14,8 @@ export async function main() {
 export async function generate() {
   // -- read config and discover files --
   const siteConfig = await incr.work(readManifest);
-  const {
+  const { staticFiles, scripts, views, pages } =
-    staticFiles,
+    await discoverAllFiles(siteConfig);
-    scripts,
-    views,
-    pages,
-  } = await discoverAllFiles(siteConfig);
   // TODO: make sure that `static` and `pages` does not overlap
 @@ -28,12 +24,15 @@ export async function generate() {
   // -- perform build-time rendering --
   const builtPages = pages.map((item) => incr.work(preparePage, item));
   const builtViews = views.map((item) => incr.work(prepareView, item));
-  const builtStaticFiles = Promise.all((staticFiles.map((item) =>
+  const builtStaticFiles = Promise.all(
-    incr.work(
+    staticFiles.map((item) =>
-      async (io, { id, file }) => void await io.writeAsset(id, await io.readFile(file)),
+      incr.work(
-      item,
+        async (io, { id, file }) =>
-    )
+          void (await io.writeAsset(id, await io.readFile(file))),
-  )));
+        item,
+      ),
+    ),
+  );
   const routes = await Promise.all([...builtViews, ...builtPages]);
   // -- page resources --
 @@ -47,23 +46,19 @@ export async function generate() {
   // -- backend --
   const builtBackend = bundle.bundleServerJavaScript({
     entries: siteConfig.backends,
-    platform: 'node',
+    platform: "node",
     styleMap,
     scriptMap,
     viewItems: views,
     viewRefs: builtViews,
-  })
+  });
   // -- assemble page assets --
   const pAssemblePages = builtPages.map((page) =>
-    assembleAndWritePage(page, styleMap, scriptMap)
+    assembleAndWritePage(page, styleMap, scriptMap),
   );
-  await Promise.all([
+  await Promise.all([builtBackend, builtStaticFiles, ...pAssemblePages]);
-    builtBackend,
-    builtStaticFiles,
-    ...pAssemblePages,
-  ]);
 }
 export async function readManifest(io: Io) {
 @@ -82,7 +77,7 @@ export async function discoverAllFiles(
   return (
     await Promise.all(
       siteConfig.siteSections.map(({ root: sectionRoot }) =>
-        incr.work(scanSiteSection, toAbs(sectionRoot))
+        incr.work(scanSiteSection, toAbs(sectionRoot)),
       ),
     )
   ).reduce((acc, next) => ({
 @@ -110,9 +105,10 @@ export async function scanSiteSection(io: Io, sectionRoot: string) {
   let scripts: FileItem[] = [];
   const sectionPath = (...sub: string[]) => path.join(sectionRoot, ...sub);
-  const rootPrefix = hot.projectSrc === sectionRoot
+  const rootPrefix =
-    ? ""
+    hot.projectSrc === sectionRoot
-    : path.relative(hot.projectSrc, sectionRoot) + "/";
+      ? ""
+      : path.relative(hot.projectSrc, sectionRoot) + "/";
   const kinds = [
     {
       dir: sectionPath("pages"),
 @@ -186,12 +182,8 @@ export async function preparePage(io: Io, item: sg.FileItem) {
     theme: pageTheme,
     layout,
   } = await io.import<any>(item.file);
-  if (!Page) {
+  if (!Page) throw new Error("Page is missing a 'default' export.");
-    throw new Error("Page is missing a 'default' export.");
+  if (!metadata) throw new Error("Page is missing 'meta' export with a title.");
-  }
-  if (!metadata) {
-    throw new Error("Page is missing 'meta' export with a title.");
-  }
   // -- css --
   if (layout?.theme) pageTheme = layout.theme;
 @@ -210,12 +202,12 @@ export async function preparePage(io: Io, item: sg.FileItem) {
   ).then((m) => meta.renderMeta(m));
   // -- html --
-  let page = [engine.kElement, Page, {}];
+  let page = render.element(Page);
   if (layout?.default) {
-    page = [engine.kElement, layout.default, { children: page }];
+    page = render.element(layout.default, { children: page });
   }
-  const bodyPromise = engine.ssrAsync(page, {
+  const bodyPromise = render.async(page, {
-    sitegen: sg.initRender(),
+    [sg.userData.key]: sg.initRender(),
   });
   const [{ text, addon }, renderedMeta] = await Promise.all([
 @@ -235,23 +227,16 @@ export async function preparePage(io: Io, item: sg.FileItem) {
     cssImports,
     theme: theme ?? null,
     styleKey,
-    clientRefs: Array.from(addon.sitegen.scripts),
+    clientRefs: Array.from(addon[sg.userData.key].scripts),
   };
 }
 export async function prepareView(io: Io, item: sg.FileItem) {
   const module = await io.import<any>(item.file);
-  if (!module.meta) {
+  if (!module.meta) throw new Error(`View is missing 'export const meta'`);
-    throw new Error(`${item.file} is missing 'export const meta'`);
+  if (!module.default) throw new Error(`View is missing a default export.`);
-  }
-  if (!module.default) {
-    throw new Error(`${item.file} is missing a default export.`);
-  }
   const pageTheme = module.layout?.theme ?? module.theme;
-  const theme: css.Theme = {
+  const theme: css.Theme = { ...css.defaultTheme, ...pageTheme };
-    ...css.defaultTheme,
-    ...pageTheme,
-  };
   const cssImports = Array.from(
     new Set([globalCssPath, ...hot.getCssImports(item.file)]),
     (file) => path.relative(hot.projectSrc, file),
 @@ -269,22 +254,14 @@ export async function prepareView(io: Io, item: sg.FileItem) {
 export type PreparedView = Awaited<ReturnType<typeof prepareView>>;
 export function prepareInlineCss(
-  items: Array<{
+  items: Array<{ styleKey: string; cssImports: string[]; theme: css.Theme }>,
-    styleKey: string;
-    cssImports: string[];
-    theme: css.Theme;
-  }>,
 ) {
   const map = new Map<string, incr.Ref<string>>();
   for (const { styleKey, cssImports, theme } of items) {
     if (map.has(styleKey)) continue;
     map.set(
       styleKey,
-      incr.work(css.bundleCssFiles, {
+      incr.work(css.bundleCssFiles, { cssImports, theme, dev: false }),
-        cssImports,
-        theme,
-        dev: false,
-      }),
     );
   }
   return map;
 @@ -297,29 +274,26 @@ export async function assembleAndWritePage(
   scriptWork: incr.Ref<Record<string, string>>,
 ) {
   const page = await pageWork;
-  return incr.work(
+  return incr.work(async (io, { id, html, meta, styleKey, clientRefs }) => {
-    async (io, { id, html, meta, styleKey, clientRefs }) => {
+    const inlineCss = await io.readWork(UNWRAP(styleMap.get(styleKey)));
-      const inlineCss = await io.readWork(UNWRAP(styleMap.get(styleKey)));
-      const scriptIds = clientRefs.map(hot.getScriptId);
+    const scriptIds = clientRefs.map(hot.getScriptId);
-      const scriptMap = await io.readWork(scriptWork);
+    const scriptMap = await io.readWork(scriptWork);
-      const scripts = scriptIds.map((ref) =>
+    const scripts = scriptIds
-        UNWRAP(scriptMap[ref], `Missing script ${ref}`)
+      .map((ref) => UNWRAP(scriptMap[ref], `Missing script ${ref}`))
-      )
+      .map((x) => `{${x}}`)
-        .map((x) => `{${x}}`).join("\n");
+      .join("\n");
-      const doc = wrapDocument({
+    const doc = wrapDocument({
-        body: html,
+      body: html,
-        head: meta,
+      head: meta,
-        inlineCss,
+      inlineCss,
-        scripts,
+      scripts,
-      });
+    });
-      await io.writeAsset(id, doc, {
+    await io.writeAsset(id, doc, {
-        "Content-Type": "text/html",
+      "Content-Type": "text/html",
-      });
+    });
-    },
+  }, page);
-    page,
-  );
 }
 import * as sg from "#sitegen";
 @@ -327,11 +301,10 @@ import * as incr from "./incremental.ts";
 import { Io } from "./incremental.ts";
 import * as bundle from "./bundle.ts";
 import * as css from "./css.ts";
-import * as engine from "./engine/ssr.ts";
+import * as render from "#engine/render";
 import * as hot from "./hot.ts";
 import * as fs from "#sitegen/fs";
 import type { FileItem } from "#sitegen";
 import * as path from "node:path";
 import * as meta from "#sitegen/meta";
-import { Spinner, withSpinner } from "@paperclover/console/Spinner";
 import { wrapDocument } from "./lib/view.ts";

framework/hot.ts+28-29

 @@ -19,7 +19,7 @@ export const load = createRequire(
 };
 export const { cache } = load;
-load<any>("source-map-support").install({hookRequire: true});
+load<any>("source-map-support").install({ hookRequire: true });
 // Register extensions by overwriting `require.extensions`
 const require = load;
 @@ -75,15 +75,15 @@ Module.prototype._compile = function (
         imports.push(file);
         (childModule.cloverImporters ??= []).push(this);
         if (cloverClientRefs && cloverClientRefs.length > 0) {
-          (this.cloverClientRefs ??= [])
+          (this.cloverClientRefs ??= []).push(...cloverClientRefs);
-            .push(...cloverClientRefs);
         }
       }
     }
     fileStats.set(filename, {
-      cssImportsRecursive: cssImportsMaybe.length > 0
+      cssImportsRecursive:
-        ? Array.from(new Set(cssImportsMaybe))
+        cssImportsMaybe.length > 0
-        : null,
+          ? Array.from(new Set(cssImportsMaybe))
+          : null,
       imports,
       lastModified: Math.floor(stat.mtimeMs),
     });
 @@ -100,7 +100,8 @@ Module._resolveFilename = (...args) => {
       return require.resolve(replacedPath, { paths: [projectSrc] });
     } catch (err: any) {
       if (
-        err.code === "MODULE_NOT_FOUND" && (err?.requireStack?.length ?? 0) <= 1
+        err.code === "MODULE_NOT_FOUND" &&
+        (err?.requireStack?.length ?? 0) <= 1
       ) {
         err.message.replace(replacedPath, args[0]);
       }
 @@ -138,45 +139,45 @@ export function loadEsbuildCode(
     src = code;
   }
   if (src.includes("import.meta")) {
-    src = `
+    src =
-      import.meta.url = ${JSON.stringify(pathToFileURL(filepath).toString())};
+      `
-      import.meta.dirname = ${JSON.stringify(path.dirname(filepath))};
+        import.meta.url = ${JSON.stringify(pathToFileURL(filepath).toString())};
-      import.meta.filename = ${JSON.stringify(filepath)};
+        import.meta.dirname = ${JSON.stringify(path.dirname(filepath))};
-    `.trim().replace(/[\n\s]/g, "") + src;
+        import.meta.filename = ${JSON.stringify(filepath)};
+      `
+        .trim()
+        .replace(/[\n\s]/g, "") + src;
   }
   src = esbuild.transformSync(src, {
     loader,
     format: "cjs",
     target: "esnext",
     jsx: "automatic",
-    jsxImportSource: "#ssr",
+    jsxImportSource: "#engine",
     jsxDev: true,
     sourcefile: filepath,
-    sourcemap: 'inline',
+    sourcemap: "inline",
   }).code;
   return module._compile(src, filepath, "commonjs");
 }
 export function resolveClientRef(sourcePath: string, ref: string) {
   const filePath = resolveFrom(sourcePath, ref);
-  if (
+  if (!filePath.endsWith(".client.ts") && !filePath.endsWith(".client.tsx")) {
-    !filePath.endsWith(".client.ts") &&
-    !filePath.endsWith(".client.tsx")
-  ) {
     throw new Error("addScript must be a .client.ts or .client.tsx");
   }
   return path.relative(projectSrc, filePath);
 }
-let lazyMarko: typeof import('./marko.ts') | null = null;
+let lazyMarko: typeof import("./marko.ts") | null = null;
 function loadMarko(module: NodeJS.Module, filepath: string) {
-  lazyMarko ??= require<typeof import('./marko.ts')>("./framework/marko.ts");
+  lazyMarko ??= require<typeof import("./marko.ts")>("./framework/marko.ts");
   lazyMarko.loadMarko(module, filepath);
 }
 function loadMdx(module: NodeJS.Module, filepath: string) {
   const input = fs.readFileSync(filepath);
-  const out = mdx.compileSync(input, { jsxImportSource: "#ssr" }).value;
+  const out = mdx.compileSync(input, { jsxImportSource: "#engine" }).value;
   const src = typeof out === "string" ? out : Buffer.from(out).toString("utf8");
   return loadEsbuildCode(module, filepath, src);
 }
 @@ -194,7 +195,7 @@ export function reloadRecursive(filepath: string) {
 }
 export function unload(filepath: string) {
-  lazyMarko?.markoCache.delete(filepath)
+  lazyMarko?.markoCache.delete(filepath);
   filepath = path.resolve(filepath);
   const module = cache[filepath];
   if (!module) return;
 @@ -291,8 +292,9 @@ export function resolveClientRefs(
 }
 export function getScriptId(file: string) {
-  return (path.isAbsolute(file) ? path.relative(projectSrc, file) : file)
+  return (
-    .replaceAll("\\", "/");
+    path.isAbsolute(file) ? path.relative(projectSrc, file) : file
+  ).replaceAll("\\", "/");
 }
 declare global {
 @@ -300,7 +302,7 @@ declare global {
     interface Module {
       cloverClientRefs?: string[];
       cloverSourceCode?: string;
-      cloverImporters?: Module[],
+      cloverImporters?: Module[];
       _compile(
         this: NodeJS.Module,
 @@ -312,10 +314,7 @@ declare global {
   }
 }
 declare module "node:module" {
-  export function _resolveFilename(
+  export function _resolveFilename(id: string, parent: NodeJS.Module): unknown;
-    id: string,
-    parent: NodeJS.Module,
-  ): unknown;
 }
 import * as fs from "#sitegen/fs";

framework/lib/assets.ts+9-19

 @@ -11,30 +11,22 @@ export async function reload() {
     fs.readFile(path.join(import.meta.dirname, "static.json"), "utf8"),
     fs.readFile(path.join(import.meta.dirname, "static.blob")),
   ]);
-  assets = {
+  return (assets = { map: JSON.parse(map), buf });
-    map: JSON.parse(map),
-    buf,
-  };
 }
-export async function reloadSync() {
+export function reloadSync() {
   const map = fs.readFileSync(
     path.join(import.meta.dirname, "static.json"),
     "utf8",
   );
   const buf = fs.readFileSync(path.join(import.meta.dirname, "static.blob"));
-  assets = {
+  return (assets = { map: JSON.parse(map), buf });
-    map: JSON.parse(map),
-    buf,
-  };
 }
 export async function middleware(c: Context, next: Next) {
   if (!assets) await reload();
   const asset = assets!.map[c.req.path];
-  if (asset) {
+  if (asset) return assetInner(c, asset, 200);
-    return assetInner(c, asset, 200);
-  }
   return next();
 }
 @@ -56,13 +48,11 @@ export async function serveAsset(
   id: StaticPageId,
   status: StatusCode,
 ) {
-  assets ?? await reload();
+  return assetInner(c, (assets ?? (await reload())).map[id], status);
-  return assetInner(c, assets!.map[id], status);
 }
 export function hasAsset(id: string) {
-  if (!assets) reloadSync();
+  return (assets ?? reloadSync()).map[id] !== undefined;
-  return assets!.map[id] !== undefined;
 }
 export function etagMatches(etag: string, ifNoneMatch: string) {
 @@ -78,13 +68,13 @@ function assetInner(c: Context, asset: BuiltAsset, status: StatusCode) {
   if (ifnonematch) {
     const etag = asset.headers.ETag;
     if (etagMatches(etag, ifnonematch)) {
-      return c.res = new Response(null, {
+      return (c.res = new Response(null, {
         status: 304,
         statusText: "Not Modified",
         headers: {
           ETag: etag,
         },
-      });
+      }));
     }
   }
   const acceptEncoding = c.req.header("Accept-Encoding") ?? "";
 @@ -105,7 +95,7 @@ function assetInner(c: Context, asset: BuiltAsset, status: StatusCode) {
   } else {
     body = subarrayAsset(asset.raw);
   }
-  return c.res = new Response(body, { headers, status });
+  return (c.res = new Response(body, { headers, status }));
 }
 process.on("message", (msg: any) => {

framework/lib/markdown.tsx+23-19

 @@ -5,21 +5,21 @@
  * via clover's SSR engine. This way, generation optimizations, async
  * components, and other features are gained for free here.
  */
-function parse(src: string, options: Partial<ParseOpts> = {}) {
+function parse(src: string, options: Partial<ParseOpts> = {}) {}
-}
 /* Render markdown content. Same function as 'parse', but JSX components
  * only take one argument and must start with a capital letter. */
-export function Markdown(
+export function Markdown({
-  { src, ...options }: { src: string } & Partial<ParseOpts>,
+  src,
-) {
+  ...options
+}: { src: string } & Partial<ParseOpts>) {
   return parse(src, options);
 }
 function parseInline(src: string, options: Partial<InlineOpts> = {}) {
   const { rules = inlineRules, links = new Map() } = options;
   const opts: InlineOpts = { rules, links };
-  const parts: engine.Node[] = [];
+  const parts: render.Node[] = [];
   const ruleList = Object.values(rules);
   parse: while (true) {
     for (const rule of ruleList) {
 @@ -96,7 +96,9 @@ export const inlineRules: Record<string, InlineRule> = {
       if (!splitText) return null;
       if (splitText.delim !== "]") return null;
       const { first: textSrc, rest: afterText } = splitText;
-      let href: string, title: string | null = null, rest: string;
+      let href: string,
+        title: string | null = null,
+        rest: string;
       if (afterText[0] === "(") {
         // Inline link
         const splitTarget = splitFirst(afterText.slice(1), /\)/);
 @@ -108,11 +110,12 @@ export const inlineRules: Record<string, InlineRule> = {
       } else if (afterText[0] === "[") {
         const splitTarget = splitFirst(afterText.slice(1), /]/);
         if (!splitTarget) return null;
-        const name = splitTarget.first.trim().length === 0
+        const name =
-          // Collapsed reference link
+          splitTarget.first.trim().length === 0
-          ? textSrc.trim()
+            ? // Collapsed reference link
-          // Full Reference Link
+              textSrc.trim()
-          : splitTarget.first.trim();
+            : // Full Reference Link
+              splitTarget.first.trim();
         const target = opts.links.get(name);
         if (!target) return null;
         ({ href, title } = target);
 @@ -149,7 +152,6 @@ export const inlineRules: Record<string, InlineRule> = {
     // 6.2 - emphasis and strong emphasis
     parse({ before, match, after, opts }) {
       // find out how long the delim sequence is
       // look for 'ends'
     },
   },
 @@ -164,14 +166,17 @@ export const inlineRules: Record<string, InlineRule> = {
 };
 function parseLinkTarget(src: string) {
-  let href: string, title: string | null = null;
+  let href: string,
+    title: string | null = null;
   href = src;
   return { href, title };
 }
 /* Find a delimiter while considering backslash escapes. */
 function splitFirst(text: string, match: RegExp) {
-  let first = "", delim: string, escaped: boolean;
+  let first = "",
+    delim: string,
+    escaped: boolean;
   do {
     const find = text.match(match);
     if (!find) return null;
 @@ -179,14 +184,13 @@ function splitFirst(text: string, match: RegExp) {
     const index = UNWRAP(find.index);
     let i = index - 1;
     escaped = false;
-    while (i >= 0 && text[i] === "\\") escaped = !escaped, i -= 1;
+    while (i >= 0 && text[i] === "\\") (escaped = !escaped), (i -= 1);
     first += text.slice(0, index - +escaped);
     text = text.slice(index + find[0].length);
   } while (escaped);
   return { first, delim, rest: text };
 }
-console.log(engine.ssrSync(parseInline("meow `bwaa` `` ` `` `` `z``")));
+console.log(render.sync(parseInline("meow `bwaa` `` ` `` `` `z``")));
-import * as engine from "#ssr";
+import * as render from "#engine/render";
-import type { ParseOptions } from "node:querystring";

framework/lib/meta.ts+1-1

...	@@ -21,4 +21,4 @@ export interface AlternateType {	...	@@ -21,4 +21,4 @@ export interface AlternateType {
21	export function renderMeta({ title }: Meta): string {	21	export function renderMeta({ title }: Meta): string {
22	return `<title>${esc(title)}</title>`;	22	return `<title>${esc(title)}</title>`;
23	}	23	}
24	import { escapeHtml as esc } from "../engine/ssr.ts";	24	import { escapeHtml as esc } from "#engine/render";

framework/lib/sitegen.ts+10-21

 @@ -9,36 +9,25 @@ export interface FileItem {
   id: string;
   file: string;
 }
+export interface Section {
+  root: string;
+}
+export const userData = render.userData<SitegenRender>(() => {
+  throw new Error("This function can only be used in a page (static or view)");
+});
 export interface SitegenRender {
   scripts: Set<string>;
 }
 export function initRender(): SitegenRender {
-  return {
+  return { scripts: new Set() };
-    scripts: new Set(),
-  };
-}
-export function getRender() {
-  return ssr.getUserData<SitegenRender>("sitegen", () => {
-    throw new Error(
-      "This function can only be used in a page (static or view)",
-    );
-  });
-}
-export function inRender() {
-  return "sitegen" in ssr.getCurrentRender();
 }
 /** Add a client-side script to the page. */
 export function addScript(id: ScriptId | { value: ScriptId }) {
-  getRender().scripts.add(typeof id === "string" ? id : id.value);
+  userData.get().scripts.add(typeof id === "string" ? id : id.value);
-}
-export interface Section {
-  root: string;
 }
-import * as ssr from "../engine/ssr.ts";
+import * as render from "#engine/render";

framework/lib/view.ts+12-17

 @@ -1,10 +1,9 @@
-// This import is generated by code 'bundle.ts'
 export interface View {
-  component: engine.Component;
+  component: render.Component;
   meta:
     | meta.Meta
     | ((props: { context?: hono.Context }) => Promise<meta.Meta> | meta.Meta);
-  layout?: engine.Component;
+  layout?: render.Component;
   inlineCss: string;
   scripts: Record<string, string>;
 }
 @@ -12,9 +11,6 @@ export interface View {
 let views: Record<string, View> = null!;
 let scripts: Record<string, string> = null!;
-// An older version of the Clover Engine supported streaming suspense
-// boundaries, but those were never used. Pages will wait until they
-// are fully rendered before sending.
 export async function renderView(
   context: hono.Context,
   id: string,
 @@ -44,11 +40,12 @@ export async function renderViewToString(
   ).then((m) => meta.renderMeta(m));
   // -- html --
-  let page: engine.Element = [engine.kElement, component, props];
+  let page: render.Element = render.element(component, props);
-  if (layout) page = [engine.kElement, layout, { children: page }];
+  if (layout) page = render.element(layout, { children: page });
-  const { text: body, addon: { sitegen } } = await engine.ssrAsync(page, {
+  const {
-    sitegen: sg.initRender(),
+    text: body,
-  });
+    addon: { [sg.userData.key]: sitegen },
+  } = await render.async(page, { [sg.userData.key]: sg.initRender() });
   // -- join document and send --
   return wrapDocument({
 @@ -56,17 +53,15 @@ export async function renderViewToString(
     head: await renderedMetaPromise,
     inlineCss,
     scripts: joinScripts(
-      Array.from(
+      Array.from(sitegen.scripts, (id) =>
-        sitegen.scripts,
+        UNWRAP(scripts[id], `Missing script ${id}`),
-        (id) => UNWRAP(scripts[id], `Missing script ${id}`),
       ),
     ),
   });
 }
 export function provideViewData(v: typeof views, s: typeof scripts) {
-  views = v;
+  (views = v), (scripts = s);
-  scripts = s;
 }
 export function joinScripts(scriptSources: string[]) {
 @@ -96,5 +91,5 @@ export function wrapDocument({
 import * as meta from "./meta.ts";
 import type * as hono from "#hono";
-import * as engine from "../engine/ssr.ts";
+import * as render from "#engine/render";
 import * as sg from "./sitegen.ts";

framework/marko.ts+13-14

 @@ -1,4 +1,3 @@
-console.log("MARKO");
 export interface MarkoCacheEntry {
   src: string;
   scannedClientRefs: string[];
 @@ -8,7 +7,6 @@ export const markoCache = new Map<string, MarkoCacheEntry>();
 export function loadMarko(module: NodeJS.Module, filepath: string) {
   let cache = markoCache.get(filepath);
-  console.log({ filepath, has: !!cache })
   if (!cache) {
     let src = fs.readFileSync(filepath, "utf8");
     // A non-standard thing here is Clover Sitegen implements
 @@ -16,21 +14,22 @@ export function loadMarko(module: NodeJS.Module, filepath: string) {
     // bare client import statements to it's own usage.
     const scannedClientRefs = new Set<string>();
     if (src.match(/^\s*client\s+import\s+["']/m)) {
-      src = src.replace(
+      src =
-        /^\s*client\s+import\s+("[^"]+"|'[^']+')[^\n]+/m,
+        src.replace(
-        (_, src) => {
+          /^\s*client\s+import\s+("[^"]+"|'[^']+')[^\n]+/m,
-          const ref = JSON.parse(`"${src.slice(1, -1)}"`);
+          (_, src) => {
-          const resolved = hot.resolveClientRef(filepath, ref);
+            const ref = JSON.parse(`"${src.slice(1, -1)}"`);
-          scannedClientRefs.add(resolved);
+            const resolved = hot.resolveClientRef(filepath, ref);
-          return `<CloverScriptInclude=${
+            scannedClientRefs.add(resolved);
-            JSON.stringify(hot.getScriptId(resolved))
+            return `<CloverScriptInclude=${JSON.stringify(
-          } />`;
+              hot.getScriptId(resolved),
-        },
+            )} />`;
-      ) + '\nimport { addScript as CloverScriptInclude } from "#sitegen";\n';
+          },
+        ) + '\nimport { addScript as CloverScriptInclude } from "#sitegen";\n';
     }
     src = marko.compileSync(src, filepath).code;
-    src = src.replace("marko/debug/html", "#ssr/marko");
+    src = src.replace("marko/debug/html", "#engine/marko-runtime");
     cache = { src, scannedClientRefs: Array.from(scannedClientRefs) };
     markoCache.set(filepath, cache);
   }

package.json+2-4

 @@ -28,10 +28,8 @@
     "#debug": "./framework/debug.safe.ts",
     "#sitegen": "./framework/lib/sitegen.ts",
     "#sitegen/*": "./framework/lib/*.ts",
-    "#ssr": "./framework/engine/ssr.ts",
+    "#engine/jsx-dev-runtime": "./framework/engine/jsx-runtime.ts",
-    "#ssr/jsx-dev-runtime": "./framework/engine/jsx-runtime.ts",
+    "#engine/*": "./framework/engine/*.ts",
-    "#ssr/jsx-runtime": "./framework/engine/jsx-runtime.ts",
-    "#ssr/marko": "./framework/engine/marko-runtime.ts",
     "#marko/html": {
       "types": "marko/html",
       "production": "marko/production",

readme.md+2-10

 @@ -3,7 +3,7 @@
 this repository contains clover's "sitegen" framework, which is a set of tools
 that assist building websites. these tools power <https://paperclover.net>.
-- **HTML "Server Side Rendering") engine written from scratch.** (~500 lines)
+- **HTML ("Server Side Rendering") engine written from scratch.** (~500 lines)
   - A more practical JSX runtime (`class` instead of `className`, built-in
     `clsx`, `html()` helper over `dangerouslySetInnerHTML` prop, etc).
   - Integration with [Marko] for concisely written components.
 @@ -57,19 +57,11 @@ my development machine, for example, is Dell Inspiron 7348 with Core i7
     # production generation
     node run generate
-    node .clover/out/server
+    node .clover/o/backend
     # "development" watch mode
     node run watch
-<!-- `repl.js` will open a read-eval-print-loop where plugin state is cached (on my -->
-<!-- 2014 dev laptop, startup time is 600-1000ms). every file in `framework` and -->
-<!-- `src` besides `hot.ts` can be edited and quickly re-run. for example, to run -->
-<!-- `framework/generate.ts`, you can type "generate" into the shell. since -->
-<!-- top-level await is not supported (plugins are built on `require` as Node has -->
-<!-- poor module support), CLIs can include a `main` function, which is executed -->
-<!-- when the REPL runs it. -->
 for unix systems, the provided `flake.nix` can be used with `nix develop` to
 open a shell with all needed system dependencies.

src/file-viewer/backend.tsx+14-12

 @@ -125,10 +125,11 @@ app.get("/file/*", async (c, next) => {
   let encoding = decideEncoding(c.req.header("Accept-Encoding"));
-  let sizeHeader = encoding === "raw"
+  let sizeHeader =
-    ? expectedSize
+    encoding === "raw"
-    // Size cannot be known because of compression modes
+      ? expectedSize
-    : undefined;
+      : // Size cannot be known because of compression modes
+        undefined;
   // Etag
   {
 @@ -294,9 +295,10 @@ function handleRanges(
 ): Response {
   // TODO: multiple ranges
   const rangeSize = ranges.reduce((a, b) => a + (b[1] - b[0] + 1), 0);
-  const rangeBody = streamOrBuffer instanceof ReadableStream
+  const rangeBody =
-    ? applySingleRangeToStream(streamOrBuffer, ranges)
+    streamOrBuffer instanceof ReadableStream
-    : applyRangesToBuffer(streamOrBuffer, ranges, rangeSize);
+      ? applySingleRangeToStream(streamOrBuffer, ranges)
+      : applyRangesToBuffer(streamOrBuffer, ranges, rangeSize);
   return new Response(rangeBody, {
     status: 206,
     headers: {
 @@ -380,9 +382,9 @@ function getPartialPage(c: Context, rawFilePath: string) {
     if (!checkCotyledonCookie(c)) {
       let root = Speedbump();
       // Remove the root element, it's created client side!
-      root = root[2].children as ssr.Element;
+      root = root[2].children as render.Element;
-      const html = ssr.ssrSync(root).text;
+      const html = render.sync(root).text;
       c.header("X-Cotyledon", "true");
       return c.html(html);
     }
 @@ -408,15 +410,15 @@ function getPartialPage(c: Context, rawFilePath: string) {
     hasCotyledonCookie: rawFilePath === "" && checkCotyledonCookie(c),
   });
   // Remove the root element, it's created client side!
-  root = root[2].children as ssr.Element;
+  root = root[2].children as render.Element;
-  const html = ssr.ssrSync(root).text;
+  const html = render.sync(root).text;
   return c.html(html);
 }
 import { type Context, Hono } from "hono";
-import * as ssr from "#ssr";
+import * as render from "#engine/render";
 import { etagMatches, hasAsset, serveAsset } from "#sitegen/assets";
 import { renderView } from "#sitegen/view";
 import { contentTypeFor } from "#sitegen/mime";

src/file-viewer/format.ts+25-36

 @@ -100,22 +100,21 @@ export function highlightLinksInTextView(
     // Case 1: https:// or http:// URLs
     if (match.startsWith("http")) {
       if (match.includes(findDomain)) {
-        return `<a href="${
+        return `<a href="${match
-          match
+          .replace(/https?:\/\/paperclover\.net\/+/, "/")
-            .replace(/https?:\/\/paperclover\.net\/+/, "/")
+          .replace(/\/\/+/g, "/")}">${match}</a>`;
-            .replace(/\/\/+/g, "/")
-        }">${match}</a>`;
       }
-      return `<a href="${
+      return `<a href="${match.replace(
-        match.replace(/\/\/+/g, "/")
+        /\/\/+/g,
-      }" target="_blank" rel="noopener noreferrer">${match}</a>`;
+        "/",
+      )}" target="_blank" rel="noopener noreferrer">${match}</a>`;
     }
     // Case 2: domain URLs without protocol
     if (match.startsWith(findDomain)) {
-      return `<a href="${
+      return `<a href="${match
-        match.replace(findDomain + "/", "/").replace(/\/\/+/g, "/")
+        .replace(findDomain + "/", "/")
-      }">${match}</a>`;
+        .replace(/\/\/+/g, "/")}">${match}</a>`;
     }
     // Case 3: /file/ URLs
 @@ -146,7 +145,7 @@ export function highlightLinksInTextView(
   // Match sibling file names (only if they're not already part of a link)
   if (siblingFiles.length > 0) {
     const escapedBasenames = siblingFiles.map((f) =>
-      f.basename.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+      f.basename.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"),
     );
     const pattern = new RegExp(`\\b(${escapedBasenames.join("|")})\\b`, "g");
     const parts = processedText.split(/(<[^>]*>)/);
 @@ -156,9 +155,9 @@ export function highlightLinksInTextView(
         parts[i] = parts[i].replace(pattern, (match: string) => {
           const file = siblingLookup[match];
           if (file) {
-            return `<a href="/file/${
+            return `<a href="/file/${file.path
-              file.path.replace(/^\//, "").replace(/\/\/+/g, "/")
+              .replace(/^\//, "")
-            }">${match}</a>`;
+              .replace(/\/\/+/g, "/")}">${match}</a>`;
           }
           return match;
         });
 @@ -241,11 +240,9 @@ export function highlightConvo(text: string) {
   return paras
     .map(({ speaker, lines }) => {
-      return `<div class="s-${speaker}">${
+      return `<div class="s-${speaker}">${lines
-        lines
+        .map((line) => `<div class="line">${line}</div>`)
-          .map((line) => `<div class="line">${line}</div>`)
+        .join("\n")}</div>`;
-          .join("\n")
-      }</div>`;
     })
     .join("\n");
 }
 @@ -267,22 +264,14 @@ const unknownDateWithKnownYear = new Date("1970-02-20");
 export function formatDate(dateTime: Date) {
   return dateTime < unknownDateWithKnownYear
-    ? (
+    ? dateTime < unknownDate
-      dateTime < unknownDate
+      ? "??.??.??"
-        ? (
+      : `xx.xx.${21 + Math.floor(dateTime.getTime() / 86400000)}`
-          "??.??.??"
+    : `${(dateTime.getMonth() + 1).toString().padStart(2, "0")}.${dateTime
-        )
+        .getDate()
-        : `xx.xx.${21 + Math.floor(dateTime.getTime() / 86400000)}`
+        .toString()
-    )
+        .padStart(2, "0")}.${dateTime.getFullYear().toString().slice(2)}`;
-    : (
-      `${(dateTime.getMonth() + 1).toString().padStart(2, "0")}.${
-        dateTime
-          .getDate()
-          .toString()
-          .padStart(2, "0")
-      }.${dateTime.getFullYear().toString().slice(2)}`
-    );
 }
 import type { MediaFile } from "@/file-viewer/models/MediaFile.ts";
-import { escapeHtml } from "#ssr";
+import { escapeHtml } from "#engine/render";

src/file-viewer/highlight.ts+3-3

src/q+a/clover-markdown.tsx+23-11

 @@ -104,13 +104,15 @@ questionRules.insertBefore("paragraph", {
         assert(x.startsWith("q: "));
         return x.slice(3);
       });
-    const content = lines.map((line, i) => {
+    const content = lines
-      const parsed = parseInline(parse, line, state);
+      .map((line, i) => {
-      if (i < lines.length - 1) {
+        const parsed = parseInline(parse, line, state);
-        parsed.push({ type: "br" });
+        if (i < lines.length - 1) {
-      }
+          parsed.push({ type: "br" });
-      return parsed;
+        }
-    }).flat();
+        return parsed;
+      })
+      .flat();
     return {
       content,
     };
 @@ -140,7 +142,13 @@ function BasicNode(node: ASTNode, children: any) {
 function ListRenderer(node: ASTNode, children: any[]) {
   const T = node.ordered ? "ol" : "ul";
-  return <T>{children.map((child) => <li>{child}</li>)}</T>;
+  return (
+    <T>
+      {children.map((child) => (
+        <li>{child}</li>
+      ))}
+    </T>
+  );
 }
 function MarkdownLink(node: ASTNode, children: any[]) {
 @@ -174,7 +182,11 @@ function ArtifactRef(node: ASTNode) {
   if (!url) {
     return <span>{title}</span>;
   }
-  return <a class={`custom artifact artifact-${type}`} href={url}>{title}</a>;
+  return (
+    <a class={`custom artifact artifact-${type}`} href={url}>
+      {title}
+    </a>
+  );
 }
 const br = <br />;
 @@ -202,7 +214,7 @@ const ssrFunctions: any = {
   // Custom Elements
   question: BasicNode,
-  html: (node: any) => ssr.html(node.data),
+  html: (node: any) => render.raw(node.data),
   mentionQuestion: QuestionRef,
   mentionArtifact: ArtifactRef,
 };
 @@ -247,4 +259,4 @@ import {
   parseCaptureInline,
   parseInline,
 } from "./simple-markdown.ts";
-import * as ssr from "#ssr";
+import * as render from "#engine/render";

src/q+a/scripts/editor.client.tsx+5-5

...	@@ -1,6 +1,6 @@	...	@@ -1,6 +1,6 @@
1	import { EditorState } from "@codemirror/state";	1	import { EditorState } from "@codemirror/state";
2	import { basicSetup, EditorView } from "codemirror";	2	import { basicSetup, EditorView } from "codemirror";
3	import { ssrSync } from "#ssr";	3	import * as render from "#engine/render";
4	import type { ScriptPayload } from "@/q+a/views/editor.marko";	4	import type { ScriptPayload } from "@/q+a/views/editor.marko";
5	import QuestionRender from "@/q+a/tags/question.marko";	5	import QuestionRender from "@/q+a/tags/question.marko";
6		6
...	@@ -11,7 +11,7 @@ const main = document.getElementById("edit-grid")! as HTMLDivElement;	...	@@ -11,7 +11,7 @@ const main = document.getElementById("edit-grid")! as HTMLDivElement;
11	const preview = document.getElementById("preview")! as HTMLDivElement;	11	const preview = document.getElementById("preview")! as HTMLDivElement;
12		12
13	function updatePreview(text: string) {	13	function updatePreview(text: string) {
14	preview.innerHTML = ssrSync(	14	preview.innerHTML = render.sync(
15	<QuestionRender	15	<QuestionRender
16	question={{	16	question={{
17	id: payload.id,	17	id: payload.id,
...	@@ -96,9 +96,9 @@ function wrapAction(cb: () => Promise<void>) {	...	@@ -96,9 +96,9 @@ function wrapAction(cb: () => Promise<void>) {
96	return async () => {	96	return async () => {
97	main.style.opacity = "0.5";	97	main.style.opacity = "0.5";
98	main.style.pointerEvents = "none";	98	main.style.pointerEvents = "none";
99	const inputs = main.querySelectorAll("button,select,input") as NodeListOf<	99	const inputs = main.querySelectorAll(
100	HTMLButtonElement	100	"button,select,input",
101	>;	101	) as NodeListOf<HTMLButtonElement>;
102	inputs.forEach((b) => {	102	inputs.forEach((b) => {
103	b.disabled = true;	103	b.disabled = true;
104	});	104	});

tsconfig.json+1-1

...	@@ -4,7 +4,7 @@	...	@@ -4,7 +4,7 @@
4	"baseUrl": ".",	4	"baseUrl": ".",
5	"incremental": true,	5	"incremental": true,
6	"jsx": "react-jsxdev",	6	"jsx": "react-jsxdev",
7	"jsxImportSource": "#ssr",	7	"jsxImportSource": "#engine",
8	"lib": ["dom", "esnext", "esnext.iterator"],	8	"lib": ["dom", "esnext", "esnext.iterator"],
9	"module": "nodenext",	9	"module": "nodenext",
10	"noEmit": true,	10	"noEmit": true,

author	clover caruso <git@paperclover.net> 2025-08-02 22:22:07-04:00
committer	clover caruso <git@paperclover.net> 2025-10-14 02:40:46-07:00
log	521edec76fecc043e04bedcf0c00c0368fa9e96e
tree	696d510a0b649bb832b98862e784c8b5b56f74e9
parent	630def77dd3df902c021bd8cc05db17578d21eda
signature	Commit is signed but in an unrecognized format.

...	@@ -113,7 +113,7 @@ function highlightLines({	...	@@ -113,7 +113,7 @@ function highlightLines({
113	const str = lines[i].slice(token.startIndex, token.endIndex);	113	const str = lines[i].slice(token.startIndex, token.endIndex);
114	if (str.trim().length === 0) {	114	if (str.trim().length === 0) {
115	// Emit but do not consider scope changes	115	// Emit but do not consider scope changes
116	html += ssr.escapeHtml(str);	116	html += render.escapeHtml(str);
117	continue;	117	continue;
118	}	118	}
119		119
...	@@ -122,7 +122,7 @@ function highlightLines({	...	@@ -122,7 +122,7 @@ function highlightLines({
122	if (lastHtmlStyle) html += "</span>";	122	if (lastHtmlStyle) html += "</span>";
123	if (style) html += `<span class='${style}'>`;	123	if (style) html += `<span class='${style}'>`;
124	}	124	}
125	html += ssr.escapeHtml(str);	125	html += render.escapeHtml(str);
126	lastHtmlStyle = style;	126	lastHtmlStyle = style;
127	}	127	}
128	html += "\n";	128	html += "\n";
...	@@ -197,4 +197,4 @@ import * as fs from "#sitegen/fs";	...	@@ -197,4 +197,4 @@ import * as fs from "#sitegen/fs";
197	import * as path from "node:path";	197	import * as path from "node:path";
198	import * as oniguruma from "vscode-oniguruma";	198	import * as oniguruma from "vscode-oniguruma";
199	import * as textmate from "vscode-textmate";	199	import * as textmate from "vscode-textmate";
200	import * as ssr from "#ssr";	200	import * as render from "#engine/render";

chore: rework Clover Engine API, remove "SSR" term