import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; import grabContants from "../../../utils/grab-constants"; import serializeForScript from "../../../utils/serialize-for-script"; import isDevelopment from "../../../utils/is-development"; import grabWebPageHydrationScript from "./grab-web-page-hydration-script"; import grabWebMetaHTML from "./grab-web-meta-html"; import { log } from "../../../utils/log"; import { AppData } from "../../../data/app-data"; import _ from "lodash"; import grabDirNames from "../../../utils/grab-dir-names"; import { NoSEORobotsValue } from "../../../utils/disable-seo"; const { ROOT_DIR } = grabDirNames(); export default async function genWebHTML({ component: Main, pageProps, bundledMap, module, routeParams, debug, root_module, }) { const { ClientRootElementIDName, ClientWindowPagePropsName } = grabContants(); const { renderToReadableStream } = await import(`${ROOT_DIR}/node_modules/react-dom/server.js`); const is_dev = isDevelopment(); if (debug) { log.info("component", Main); } if (!Main) { throw new Error(`Main Component not found!`); } let serializedProps = "{}"; try { serializedProps = serializeForScript(pageProps || {}); } catch (error) { } 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; const html_props = { ...module?.html_props, ...root_module?.html_props, }; const Head = module?.Head; const RootHead = root_module?.Head; const dev = isDevelopment(); const final_meta = global.BUNEXT_CONFIG.disable_seo ? { ..._.merge(root_meta, page_meta), robots: NoSEORobotsValue } : _.merge(root_meta, page_meta); const public_envs = Object.fromEntries(Object.entries(process.env).filter(([k]) => k.startsWith("BUNEXT_PUBLIC_"))); const client_process = { env: { NODE_ENV: dev ? "development" : "production", ...public_envs, ...global.BUNEXT_CONFIG.public_envs, }, }; let final_component = (_jsxs("html", { ...html_props, children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8", "data-bunext-head": true }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0", "data-bunext-head": true }), final_meta ? grabWebMetaHTML({ meta: final_meta }) : null, bundledMap?.css_path ? (_jsx("link", { rel: "stylesheet", href: `/${bundledMap.css_path}`, "data-bunext-head": true })) : null, _jsx("script", { dangerouslySetInnerHTML: { __html: `window.${ClientWindowPagePropsName} = ${serializedProps};\nwindow.process = ${serializeForScript(client_process)}`, }, "data-bunext-head": true }), RootHead ? (_jsx(RootHead, { serverRes: pageProps, ctx: routeParams })) : null, Head ? _jsx(Head, { serverRes: pageProps, ctx: routeParams }) : null, bundledMap?.path ? (_jsxs(_Fragment, { children: [_jsx("script", { type: "importmap", dangerouslySetInnerHTML: { __html: serializeForScript(global.BUNEXT_REACT_IMPORTS_MAP), }, defer: true, "data-bunext-head": true }), _jsx("script", { src: `/${bundledMap.path}`, type: "module", id: AppData["BunextClientHydrationScriptID"], defer: true, "data-bunext-head": true })] })) : null, is_dev ? (_jsx("script", { defer: true, dangerouslySetInnerHTML: { __html: page_hydration_script, }, "data-bunext-head": true })) : null] }), _jsx("body", { children: _jsx("div", { id: ClientRootElementIDName, suppressHydrationWarning: !dev, children: _jsx(Main, { ...pageProps }) }) })] })); let html = `\n`; // const stream = await renderToReadableStream(final_component, { // onError(error: any) { // if (error.message.includes('unique "key" prop')) return; // console.error(error); // }, // }); // const htmlBody = await new Response(stream).text(); silenceConsole(); let htmlBody; let render_error; let has_render_error = false; try { const stream = await renderToReadableStream(final_component, { onError(error) { if (error?.message?.includes('unique "key" prop')) return; if (!has_render_error) { has_render_error = true; render_error = error; } original_console.error(error); }, }); htmlBody = await new Response(stream).text(); } finally { restoreConsole(); } // A component crash during SSR must surface as a proper error (handled // upstream as a 500 page). React only reports these to `onError`; without // rethrowing, the user gets a 200 with broken/blank markup. if (has_render_error) { throw render_error; } html += htmlBody; return html; } let original_console = console; let silenced_renders = 0; /** * Renders can overlap (each one awaits the stream), so the console is * swapped only by the first active render and restored by the last one. * Otherwise a render could save another render's no-ops as the "original" * console and silence the server for good. */ function silenceConsole() { if (silenced_renders++ > 0) return; original_console = { log: console.log, warn: console.warn, error: console.error, info: console.info, debug: console.debug, }; console.log = () => { }; console.warn = () => { }; console.error = () => { }; console.info = () => { }; console.debug = () => { }; } function restoreConsole() { if (--silenced_renders > 0) return; silenced_renders = 0; Object.assign(console, original_console); }