one
Version:
One is a new React Framework that makes Vite serve both native and web.
230 lines (221 loc) • 8.57 kB
JavaScript
import { join } from "node:path";
import FSExtra from "fs-extra";
import * as constants from "../constants";
import { getLoaderPath, getPreloadPath, getPreloadCSSPath } from "../utils/cleanUrl";
import { isResponse } from "../utils/isResponse";
import { toAbsolute } from "../utils/toAbsolute";
import { replaceLoader } from "../vite/replaceLoader";
const { readFile, outputFile } = FSExtra;
function urlPathToFilePath(urlPath) {
const parts = urlPath.replace(/^\//, "").split("/");
return join(...parts);
}
async function buildPage(serverEntry, path, relativeId, params, foundRoute, clientManifestEntry, staticDir, clientDir, builtMiddlewares, serverJsPath, preloads, allCSS, routePreloads, allCSSContents, criticalPreloads, deferredPreloads, useAfterLCP, useAfterLCPAggressive) {
const render = await getRender(serverEntry), htmlPath = `${path.endsWith("/") ? `${removeTrailingSlash(path)}/index` : path}.html`, clientJsPath = join("dist/client", clientManifestEntry.file), htmlOutPath = toAbsolute(join(staticDir, htmlPath)), preloadPath = getPreloadPath(path), cssPreloadPath = getPreloadCSSPath(path);
let loaderPath = "", loaderData = {};
try {
const routeImports = [], routeRegistrations = [];
let routeIndex = 0;
for (const [routeKey, bundlePath] of Object.entries(routePreloads)) {
const varName = `_r${routeIndex++}`;
routeImports.push(`import * as ${varName} from "${bundlePath}"`), routeRegistrations.push(`registerPreloadedRoute("${routeKey}", ${varName})`);
}
const registrationCalls = routeRegistrations.map(
(call) => call.replace("registerPreloadedRoute(", "window.__oneRegisterPreloadedRoute(")
), preloadContent = [
// import all route modules
...routeImports,
// static imports for cache warming (original behavior)
...preloads.map((preload) => `import "${preload}"`),
// register all route modules using window global
...registrationCalls
].join(`
`);
await FSExtra.writeFile(join(clientDir, urlPathToFilePath(preloadPath)), preloadContent);
const uniqueCSS = [...new Set(allCSS)], cssPreloadContent = `
const CSS_TIMEOUT = 1000
const cssUrls = ${JSON.stringify(uniqueCSS)}
// Global cache for loaded CSS - avoids DOM queries and tracks across navigations
const loaded = (window.__oneLoadedCSS ||= new Set())
// Prefetch CSS without applying - called on link hover
export function prefetchCSS() {
cssUrls.forEach(href => {
if (loaded.has(href)) return
if (document.querySelector(\`link[href="\${href}"]\`)) return
const link = document.createElement('link')
link.rel = 'prefetch'
link.as = 'style'
link.href = href
document.head.appendChild(link)
})
}
// Inject CSS to apply styles - called on actual navigation
export function injectCSS() {
return Promise.all(cssUrls.map(href => {
// Skip if already loaded
if (loaded.has(href)) return Promise.resolve()
// Remove any prefetch link for this href
const prefetchLink = document.querySelector(\`link[rel="prefetch"][href="\${href}"]\`)
if (prefetchLink) prefetchLink.remove()
// Skip if stylesheet already exists in DOM
if (document.querySelector(\`link[rel="stylesheet"][href="\${href}"]\`)) {
loaded.add(href)
return Promise.resolve()
}
return new Promise(resolve => {
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = href
const timeoutId = setTimeout(() => {
console.warn('[one] CSS load timeout:', href)
loaded.add(href)
resolve()
}, CSS_TIMEOUT)
link.onload = link.onerror = () => {
clearTimeout(timeoutId)
loaded.add(href)
resolve()
}
document.head.appendChild(link)
})
}))
}
// For backwards compatibility, also prefetch on import
prefetchCSS()
`;
await FSExtra.writeFile(join(clientDir, urlPathToFilePath(cssPreloadPath)), cssPreloadContent);
const exported = await import(toAbsolute(serverJsPath));
if (exported.loader) {
try {
loaderData = await exported.loader?.({ path, params }) ?? null;
} catch (err) {
if (!isResponse(err))
throw err;
}
const code = await readFile(clientJsPath, "utf-8"), withLoader = (
// super dirty to quickly make ssr loaders work until we have better
`
if (typeof document === 'undefined') globalThis.document = {}
` + replaceLoader({
code,
loaderData
})
), loaderPartialPath = join(clientDir, urlPathToFilePath(getLoaderPath(path)));
await outputFile(loaderPartialPath, withLoader), loaderPath = getLoaderPath(path);
}
if (foundRoute.type !== "ssr") {
const loaderProps = { path, params };
if (globalThis.__vxrnresetState?.(), foundRoute.type === "ssg") {
let html = await render({
path,
preloads: criticalPreloads || preloads,
deferredPreloads: useAfterLCPAggressive ? [] : deferredPreloads,
loaderProps,
loaderData,
css: allCSS,
cssContents: allCSSContents,
mode: "ssg",
routePreloads
});
useAfterLCP && (html = applyAfterLCPScriptLoad(html, preloads)), await outputFile(htmlOutPath, html);
} else if (foundRoute.type === "spa") {
const cssOutput = allCSSContents ? allCSSContents.filter(Boolean).map((content) => ` <style>${content}</style>`).join(`
`) : allCSS.map((file) => ` <link rel="stylesheet" href=${file} />`).join(`
`), criticalScripts = (criticalPreloads || preloads).map((preload) => ` <script type="module" src="${preload}"></script>`).join(`
`), deferredLinks = (deferredPreloads || []).map((preload) => ` <link rel="modulepreload" fetchPriority="low" href="${preload}"/>`).join(`
`);
await outputFile(
htmlOutPath,
`<html><head>
${constants.getSpaHeaderElements({ serverContext: { loaderProps, loaderData } })}
${criticalScripts}
${deferredLinks}
${cssOutput}
</head></html>`
);
}
}
} catch (err) {
const errMsg = err instanceof Error ? `${err.message}
${err.stack}` : `${err}`;
console.error(
`Error building static page at ${path} with id ${relativeId}:
${errMsg}
loaderData:
${JSON.stringify(loaderData || null, null, 2)}
params:
${JSON.stringify(params || null, null, 2)}`
), console.error(err), process.exit(1);
}
const middlewares = (foundRoute.middlewares || []).map((x) => builtMiddlewares[x.contextKey]), cleanPath = path === "/" ? path : removeTrailingSlash(path);
return {
type: foundRoute.type,
css: allCSS,
cssContents: allCSSContents,
routeFile: foundRoute.file,
middlewares,
cleanPath,
preloadPath,
cssPreloadPath,
loaderPath,
clientJsPath,
serverJsPath,
htmlPath,
loaderData,
params,
path,
preloads,
criticalPreloads,
deferredPreloads
};
}
async function getRender(serverEntry) {
let render = null;
try {
const serverImport = await import(serverEntry);
render = serverImport.default.render || // for an unknown reason this is necessary
serverImport.default.default?.render, typeof render != "function" && (console.error("\u274C Error: didn't find render function in entry", serverImport), process.exit(1));
} catch (err) {
console.error("\u274C Error importing the root entry:"), console.error(` This error happened in the built file: ${serverEntry}`), console.error(err.stack), process.exit(1);
}
return render;
}
function removeTrailingSlash(path) {
return path.endsWith("/") ? path.slice(0, path.length - 1) : path;
}
function applyAfterLCPScriptLoad(html, preloads) {
html = html.replace(/<script\s+type="module"[^>]*async[^>]*><\/script>/gi, "");
const loaderScript = `
<script>
(function() {
var scripts = ${JSON.stringify(preloads)};
function loadScripts() {
scripts.forEach(function(src) {
var script = document.createElement('script');
script.type = 'module';
script.src = src;
document.head.appendChild(script);
});
}
function waitIdle(n) {
if (n <= 0) {
requestAnimationFrame(function() {
requestAnimationFrame(loadScripts);
});
return;
}
setTimeout(function() {
setTimeout(function() {
waitIdle(n - 1);
}, 0);
}, 0);
}
waitIdle(5);
})();
</script>`;
return html = html.replace("</head>", `${loaderScript}</head>`), html;
}
export {
buildPage
};
//# sourceMappingURL=buildPage.js.map