clo/sitegen
1
0
Fork 0
Code Issues 20 Pull requests Projects Releases Packages Wiki Activity Actions
sitegen/framework/lib/view.ts

96 lines
2.5 KiB
TypeScript
Raw Normal View History

format
2025-07-07 20:58:02 -07:00
export interface View {
chore: rework Clover Engine API, remove "SSR" term "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.
2025-08-02 19:22:07 -07:00
component: render.Component;
format
2025-07-07 20:58:02 -07:00
meta:
| meta.Meta
| ((props: { context?: hono.Context }) => Promise<meta.Meta> | meta.Meta);
chore: rework Clover Engine API, remove "SSR" term "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.
2025-08-02 19:22:07 -07:00
layout?: render.Component;
format
2025-07-07 20:58:02 -07:00
inlineCss: string;
scripts: Record<string, string>;
}
let views: Record<string, View> = null!;
let scripts: Record<string, string> = null!;
export async function renderView(
context: hono.Context,
id: string,
props: Record<string, unknown>,
) {
return context.html(await renderViewToString(id, { context, ...props }));
}
export async function renderViewToString(
id: string,
props: Record<string, unknown>,
) {
views ?? ({ views, scripts } = require("$views"));
// The view contains pre-bundled CSS and scripts, but keeps the scripts
// separate for run-time dynamic scripts. For example, the file viewer
// includes the canvas for the current page, but only the current page.
const {
component,
inlineCss,
layout,
meta: metadata,
}: View = UNWRAP(views[id], `Missing view ${id}`);
// -- metadata --
const renderedMetaPromise = Promise.resolve(
typeof metadata === "function" ? metadata(props) : metadata,
).then((m) => meta.renderMeta(m));
// -- html --
chore: rework Clover Engine API, remove "SSR" term "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.
2025-08-02 19:22:07 -07:00
let page: render.Element = render.element(component, props);
if (layout) page = render.element(layout, { children: page });
const {
text: body,
addon: { [sg.userData.key]: sitegen },
} = await render.async(page, { [sg.userData.key]: sg.initRender() });
format
2025-07-07 20:58:02 -07:00
// -- join document and send --
return wrapDocument({
body,
head: await renderedMetaPromise,
inlineCss,
scripts: joinScripts(
chore: rework Clover Engine API, remove "SSR" term "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.
2025-08-02 19:22:07 -07:00
Array.from(sitegen.scripts, (id) =>
UNWRAP(scripts[id], `Missing script ${id}`),
format
2025-07-07 20:58:02 -07:00
),
),
});
}
export function provideViewData(v: typeof views, s: typeof scripts) {
chore: rework Clover Engine API, remove "SSR" term "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.
2025-08-02 19:22:07 -07:00
(views = v), (scripts = s);
format
2025-07-07 20:58:02 -07:00
}
export function joinScripts(scriptSources: string[]) {
const { length } = scriptSources;
if (length === 0) return "";
if (length === 1) return scriptSources[0];
return scriptSources.map((source) => `{${source}}`).join(";");
}
export function wrapDocument({
body,
head,
inlineCss,
scripts,
}: {
head: string;
body: string;
inlineCss: string;
scripts: string;
}) {
return `<!doctype html><html lang=en><head>${head}${
inlineCss ? `<style>${inlineCss}</style>` : ""
}</head><body>${body}${
scripts ? `<script>${scripts}</script>` : ""
}</body></html>`;
}
import * as meta from "./meta.ts";
import type * as hono from "#hono";
chore: rework Clover Engine API, remove "SSR" term "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.
2025-08-02 19:22:07 -07:00
import * as render from "#engine/render";
format
2025-07-07 20:58:02 -07:00
import * as sg from "./sitegen.ts";
Reference in a new issue Copy permalink