chloe caruso
a8d7efe9ec
"server side rendering" is a misleading term since it implies there is a server. that isn't neccecarily the case here, since it supports running in the browser. I think "clover engine" is cute, short for "clover html rendering engine". Instead of "server side rendering", it's just rendering. This commit makes things a lot more concise, such as `ssr.ssrAsync` being renamed to `render.async` to play nicely with namespaced imports. `getCurrentRender` and `setCurrentRender` are just `current` and `setCurrent`, and the addon interface has been redesigned to force symbols with a wrapping helper.
324 lines
10 KiB
TypeScript
324 lines
10 KiB
TypeScript
async function trackEsbuild(io: Io, metafile: esbuild.Metafile) {
|
|
await Promise.all(
|
|
Object.keys(metafile.inputs)
|
|
.filter((file) => !isIgnoredSource(file))
|
|
.map((file) => io.trackFile(file)),
|
|
);
|
|
}
|
|
|
|
// This file implements client-side bundling, mostly wrapping esbuild.
|
|
export async function bundleClientJavaScript(
|
|
io: Io,
|
|
{
|
|
clientRefs,
|
|
extraPublicScripts,
|
|
dev = false,
|
|
}: {
|
|
clientRefs: string[];
|
|
extraPublicScripts: string[];
|
|
dev: boolean;
|
|
},
|
|
) {
|
|
const entryPoints = [
|
|
...new Set(
|
|
[...clientRefs.map((x) => `src/${x}`), ...extraPublicScripts].map(toAbs),
|
|
),
|
|
];
|
|
if (entryPoints.length === 0) return {};
|
|
const invalidFiles = entryPoints.filter(
|
|
(file) => !file.match(/\.client\.[tj]sx?/),
|
|
);
|
|
if (invalidFiles.length > 0) {
|
|
const cwd = process.cwd();
|
|
throw new Error(
|
|
"All client-side scripts should be named like '.client.ts'. Exceptions: \n" +
|
|
invalidFiles.map((x) => path.join(cwd, x)).join("\n"),
|
|
);
|
|
}
|
|
|
|
const clientPlugins: esbuild.Plugin[] = [
|
|
projectRelativeResolution(),
|
|
markoViaBuildCache(),
|
|
];
|
|
|
|
const bundle = await esbuild
|
|
.build({
|
|
assetNames: "/asset/[hash]",
|
|
bundle: true,
|
|
chunkNames: "/js/c.[hash]",
|
|
entryNames: "/js/[name]",
|
|
entryPoints,
|
|
format: "esm",
|
|
jsx: "automatic",
|
|
jsxDev: dev,
|
|
jsxImportSource: "#engine",
|
|
logLevel: "silent",
|
|
metafile: true,
|
|
minify: !dev,
|
|
outdir: "out!",
|
|
plugins: clientPlugins,
|
|
write: false,
|
|
define: {
|
|
ASSERT: "console.assert",
|
|
MIME_INLINE_DATA: JSON.stringify(mime.rawEntriesText),
|
|
},
|
|
})
|
|
.catch((err: any) => {
|
|
err.message = `Client ${err.message}`;
|
|
throw err;
|
|
});
|
|
if (bundle.errors.length || bundle.warnings.length) {
|
|
throw new AggregateError(
|
|
bundle.errors.concat(bundle.warnings),
|
|
"JS bundle failed",
|
|
);
|
|
}
|
|
const publicScriptRoutes = extraPublicScripts.map(
|
|
(file) =>
|
|
"/js/" +
|
|
path
|
|
.relative(hot.projectSrc, file)
|
|
.replaceAll("\\", "/")
|
|
.replace(/\.client\.[tj]sx?/, ".js"),
|
|
);
|
|
const { metafile, outputFiles } = bundle;
|
|
const p = [];
|
|
p.push(trackEsbuild(io, metafile));
|
|
const scripts: Record<string, string> = {};
|
|
for (const file of outputFiles) {
|
|
const { text } = file;
|
|
let route = file.path.replace(/^.*!/, "").replaceAll("\\", "/");
|
|
const { inputs } = UNWRAP(metafile.outputs["out!" + route]);
|
|
const sources = Object.keys(inputs).filter((x) => !isIgnoredSource(x));
|
|
|
|
// Register non-chunks as script entries.
|
|
const chunk = route.startsWith("/js/c.");
|
|
if (!chunk) {
|
|
const key = hot.getScriptId(path.resolve(sources[sources.length - 1]));
|
|
route = "/js/" + key.replace(/\.client\.tsx?/, ".js");
|
|
scripts[key] = text;
|
|
}
|
|
// Register chunks and public scripts as assets.
|
|
if (chunk || publicScriptRoutes.includes(route)) {
|
|
p.push(io.writeAsset(route, text));
|
|
}
|
|
}
|
|
await Promise.all(p);
|
|
return scripts;
|
|
}
|
|
|
|
export type ServerPlatform = "node" | "passthru";
|
|
export interface ServerSideOptions {
|
|
entries: string[];
|
|
viewItems: sg.FileItem[];
|
|
viewRefs: incr.Ref<PreparedView>[];
|
|
styleMap: Map<string, incr.Ref<string>>;
|
|
scriptMap: incr.Ref<Record<string, string>>;
|
|
platform: ServerPlatform;
|
|
}
|
|
export async function bundleServerJavaScript({
|
|
viewItems,
|
|
viewRefs,
|
|
styleMap,
|
|
scriptMap: wScriptMap,
|
|
entries,
|
|
platform,
|
|
}: ServerSideOptions) {
|
|
const wViewSource = incr.work(async (_, viewItems: sg.FileItem[]) => {
|
|
const magicWord = "C_" + crypto.randomUUID().replaceAll("-", "_");
|
|
return {
|
|
magicWord,
|
|
file: [
|
|
...viewItems.map(
|
|
(view, i) => `import * as view${i} from ${JSON.stringify(view.file)}`,
|
|
),
|
|
`const styles = ${magicWord}[-2]`,
|
|
`export const scripts = ${magicWord}[-1]`,
|
|
"export const views = {",
|
|
...viewItems.map((view, i) =>
|
|
[
|
|
` ${JSON.stringify(view.id)}: {`,
|
|
` component: view${i}.default,`,
|
|
` meta: view${i}.meta,`,
|
|
` layout: view${i}.layout?.default ?? null,`,
|
|
` inlineCss: styles[${magicWord}[${i}]]`,
|
|
` },`,
|
|
].join("\n"),
|
|
),
|
|
"}",
|
|
].join("\n"),
|
|
};
|
|
}, viewItems);
|
|
|
|
const wBundles = entries.map(
|
|
(entry) =>
|
|
[
|
|
entry,
|
|
incr.work(async (io, entry) => {
|
|
const pkg = await io.readJson<{
|
|
dependencies: Record<string, string>;
|
|
}>("package.json");
|
|
|
|
let magicWord = null as string | null;
|
|
// -- plugins --
|
|
const serverPlugins: esbuild.Plugin[] = [
|
|
virtualFiles({
|
|
// only add dependency when imported.
|
|
$views: async () => {
|
|
const view = await io.readWork(wViewSource);
|
|
({ magicWord } = view);
|
|
return view.file;
|
|
},
|
|
}),
|
|
projectRelativeResolution(),
|
|
markoViaBuildCache(),
|
|
{
|
|
name: "replace client references",
|
|
setup(b) {
|
|
b.onLoad({ filter: /\.tsx?$/ }, async ({ path: file }) => ({
|
|
contents: hot.resolveClientRefs(
|
|
await fs.readFile(file, "utf-8"),
|
|
file,
|
|
).code,
|
|
loader: path.extname(file).slice(1) as esbuild.Loader,
|
|
}));
|
|
},
|
|
},
|
|
{
|
|
name: "mark css external",
|
|
setup(b) {
|
|
b.onResolve({ filter: /\.css$/ }, () => ({
|
|
path: ".",
|
|
namespace: "dropped",
|
|
}));
|
|
b.onLoad({ filter: /./, namespace: "dropped" }, () => ({
|
|
contents: "",
|
|
}));
|
|
},
|
|
},
|
|
];
|
|
|
|
const { metafile, outputFiles } = await esbuild.build({
|
|
bundle: true,
|
|
chunkNames: "c.[hash]",
|
|
entryNames: path.basename(entry, path.extname(entry)),
|
|
entryPoints: [
|
|
path.join(
|
|
import.meta.dirname,
|
|
"backend/entry-" + platform + ".ts",
|
|
),
|
|
],
|
|
platform: "node",
|
|
format: "esm",
|
|
minify: false,
|
|
outdir: "out!",
|
|
plugins: serverPlugins,
|
|
splitting: true,
|
|
logLevel: "silent",
|
|
write: false,
|
|
metafile: true,
|
|
jsx: "automatic",
|
|
jsxImportSource: "#engine",
|
|
jsxDev: false,
|
|
define: {
|
|
MIME_INLINE_DATA: JSON.stringify(mime.rawEntriesText),
|
|
"globalThis.CLOVER_SERVER_ENTRY": JSON.stringify(entry),
|
|
},
|
|
external: Object.keys(pkg.dependencies).filter(
|
|
(x) => !x.startsWith("@paperclover"),
|
|
),
|
|
});
|
|
await trackEsbuild(io, metafile);
|
|
|
|
let fileWithMagicWord: {
|
|
bytes: Buffer;
|
|
basename: string;
|
|
magicWord: string;
|
|
} | null = null;
|
|
for (const output of outputFiles) {
|
|
const basename = output.path.replace(/^.*?!(?:\/|\\)/, "");
|
|
const key = "out!/" + basename.replaceAll("\\", "/");
|
|
// If this contains the generated "$views" file, then
|
|
// mark this file as the one for replacement. Because
|
|
// `splitting` is `true`, esbuild will not emit this
|
|
// file in more than one chunk.
|
|
if (
|
|
magicWord &&
|
|
metafile.outputs[key].inputs["framework/lib/view.ts"]
|
|
) {
|
|
ASSERT(!fileWithMagicWord);
|
|
fileWithMagicWord = {
|
|
basename,
|
|
bytes: Buffer.from(output.contents),
|
|
magicWord,
|
|
};
|
|
} else {
|
|
io.writeFile(basename, Buffer.from(output.contents));
|
|
}
|
|
}
|
|
return fileWithMagicWord;
|
|
}, entry),
|
|
] as const,
|
|
);
|
|
|
|
const wProcessed = wBundles.map(async ([entry, wBundle]) => {
|
|
if (!(await wBundle)) return;
|
|
await incr.work(async (io) => {
|
|
// Only the reachable resources need to be read and inserted into the bundle.
|
|
// This is what Map<string, incr.Ref> is for
|
|
const { basename, bytes, magicWord } = UNWRAP(await io.readWork(wBundle));
|
|
const views = await Promise.all(viewRefs.map((ref) => io.readWork(ref)));
|
|
|
|
// Client JS
|
|
const scriptList = Object.entries(await io.readWork(wScriptMap));
|
|
const viewScriptsList = new Set(views.flatMap((view) => view.clientRefs));
|
|
const neededScripts = scriptList.filter(([k]) => viewScriptsList.has(k));
|
|
|
|
// CSS
|
|
const viewStyleKeys = views.map((view) => view.styleKey);
|
|
const viewCssBundles = await Promise.all(
|
|
viewStyleKeys.map((key) =>
|
|
io.readWork(UNWRAP(styleMap.get(key), "Style key: " + key)),
|
|
),
|
|
);
|
|
const styleList = Array.from(new Set(viewCssBundles));
|
|
|
|
// Replace the magic word
|
|
const text = bytes
|
|
.toString("utf-8")
|
|
.replace(new RegExp(magicWord + "\\[(-?\\d+)\\]", "gs"), (_, i) => {
|
|
i = Number(i);
|
|
// Inline the styling data
|
|
if (i === -2) {
|
|
return JSON.stringify(styleList.map((cssText) => cssText));
|
|
}
|
|
// Inline the script data
|
|
if (i === -1) {
|
|
return JSON.stringify(Object.fromEntries(neededScripts));
|
|
}
|
|
// Reference an index into `styleList`
|
|
return `${styleList.indexOf(viewCssBundles[i])}`;
|
|
});
|
|
|
|
io.writeFile(basename, text);
|
|
});
|
|
});
|
|
|
|
await Promise.all(wProcessed);
|
|
}
|
|
|
|
import * as esbuild from "esbuild";
|
|
import * as path from "node:path";
|
|
import process from "node:process";
|
|
import * as hot from "./hot.ts";
|
|
import {
|
|
isIgnoredSource,
|
|
markoViaBuildCache,
|
|
projectRelativeResolution,
|
|
virtualFiles,
|
|
} from "./esbuild-support.ts";
|
|
import { Io, toAbs } from "./incremental.ts";
|
|
import * as fs from "#sitegen/fs";
|
|
import * as mime from "#sitegen/mime";
|
|
import * as incr from "./incremental.ts";
|
|
import * as sg from "#sitegen";
|