Moduletrace/bunext
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add more features. Customize HTML. Add server logic and other page module exports to __root

Browse Source
This commit is contained in:
tben
2026-03-23 19:14:56 +01:00
parent 67ed8749e2
commit 6f1db7c01f
15 changed files with 389 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/functions/server/web-pages/generate-web-html.tsx
+98 -53
View File
@@ -24,78 +24,123 @@ export default async function genWebHTML({
component,
pageProps,
bundledMap,
head: Head,
module,
meta,
routeParams,
debug,
root_module,
}: LivePageDistGenParams) {
const { ClientRootElementIDName, ClientWindowPagePropsName } =
grabContants();
const is_dev = isDevelopment();
if (debug) {
log.info("component", component);
}
const componentHTML = renderToString(component);
if (debug) {
log.info("componentHTML", componentHTML);
}
const headHTML = Head
? renderToString(<Head serverRes={pageProps} ctx={routeParams} />)
: "";
let html = `<!DOCTYPE html>\n`;
html += `<html>\n`;
html += ` <head>\n`;
html += ` <meta charset="utf-8" />\n`;
html += ` <meta name="viewport" content="width=device-width, initial-scale=1.0">\n`;
if (meta) {
html += ` ${grabWebMetaHTML({ meta })}\n`;
}
if (bundledMap?.css_path) {
html += ` <link rel="stylesheet" href="/${bundledMap.css_path}" />\n`;
}
const serializedProps = (EJSON.stringify(pageProps || {}) || "{}").replace(
/<\//g,
"<\\/",
);
html += ` <script>window.${ClientWindowPagePropsName} = ${serializedProps}</script>\n`;
if (bundledMap?.path) {
const dev = isDevelopment();
const devSuffix = dev ? "?dev" : "";
const importMap = JSON.stringify({
imports: {
react: `https://esm.sh/react@${_reactVersion}${devSuffix}`,
"react-dom": `https://esm.sh/react-dom@${_reactVersion}${devSuffix}`,
"react-dom/client": `https://esm.sh/react-dom@${_reactVersion}/client${devSuffix}`,
"react/jsx-runtime": `https://esm.sh/react@${_reactVersion}/jsx-runtime${devSuffix}`,
"react/jsx-dev-runtime": `https://esm.sh/react@${_reactVersion}/jsx-dev-runtime${devSuffix}`,
},
});
html += ` <script type="importmap">${importMap}</script>\n`;
html += ` <script src="/${bundledMap.path}" type="module" id="${AppData["BunextClientHydrationScriptID"]}" async></script>\n`;
}
const page_hydration_script = await grabWebPageHydrationScript();
const root_meta = root_module?.meta
? typeof root_module.meta == "function" && routeParams
? await root_module.meta({ ctx: routeParams, serverRes: pageProps })
: typeof root_module.meta == "function"
? undefined
: root_module.meta
: undefined;
const page_meta = module?.meta
? typeof module.meta == "function" && routeParams
? await module.meta({ ctx: routeParams, serverRes: pageProps })
: typeof module.meta == "function"
? undefined
: module.meta
: undefined;
if (isDevelopment()) {
html += `<script defer>\n${await grabWebPageHydrationScript()}\n</script>\n`;
}
const html_props = {
...module?.html_props,
...root_module?.html_props,
};
if (headHTML) {
html += ` ${headHTML}\n`;
}
const Head = module?.Head;
const RootHead = root_module?.Head;
html += ` </head>\n`;
html += ` <body>\n`;
html += ` <div id="${ClientRootElementIDName}">${componentHTML}</div>\n`;
html += ` </body>\n`;
html += `</html>\n`;
const dev = isDevelopment();
const devSuffix = dev ? "?dev" : "";
const importMap = JSON.stringify({
imports: {
react: `https://esm.sh/react@${_reactVersion}${devSuffix}`,
"react-dom": `https://esm.sh/react-dom@${_reactVersion}${devSuffix}`,
"react-dom/client": `https://esm.sh/react-dom@${_reactVersion}/client${devSuffix}`,
"react/jsx-runtime": `https://esm.sh/react@${_reactVersion}/jsx-runtime${devSuffix}`,
"react/jsx-dev-runtime": `https://esm.sh/react@${_reactVersion}/jsx-dev-runtime${devSuffix}`,
},
});
let final_component = (
<html {...html_props}>
<head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
{root_meta ? grabWebMetaHTML({ meta: root_meta }) : null}
{page_meta ? grabWebMetaHTML({ meta: page_meta }) : null}
{bundledMap?.css_path ? (
<link rel="stylesheet" href={`/${bundledMap.css_path}`} />
) : null}
<script
dangerouslySetInnerHTML={{
__html: `window.${ClientWindowPagePropsName} = ${serializedProps}`,
}}
/>
{bundledMap?.path ? (
<>
<script
type="importmap"
dangerouslySetInnerHTML={{
__html: importMap,
}}
fetchPriority="high"
/>
<script
src={`/${bundledMap.path}`}
type="module"
id={AppData["BunextClientHydrationScriptID"]}
defer
/>
</>
) : null}
{is_dev ? (
<script
defer
dangerouslySetInnerHTML={{
__html: page_hydration_script,
}}
/>
) : null}
{RootHead ? (
<RootHead serverRes={pageProps} ctx={routeParams} />
) : null}
{Head ? <Head serverRes={pageProps} ctx={routeParams} /> : null}
</head>
<body>
<div id={ClientRootElementIDName}>{component}</div>
</body>
</html>
);
let html = `<!DOCTYPE html>\n`;
html += renderToString(final_component);
return html;
}