Moduletrace/bunext
1
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:
Benjamin Toby 2026-03-23 19:14:56 +01:00
parent 67ed8749e2
commit 6f1db7c01f
15 changed files with 389 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/functions/bundler/all-pages-bun-bundler.ts
View File

@ -124,7 +124,10 @@ export default async function allPagesBunBundler(params?: Params) {
}
if (artifacts?.[0]) {
await recordArtifacts({ artifacts });
await recordArtifacts({
artifacts,
page_file_paths,
});
}
const elapsed = (performance.now() - buildStart).toFixed(0);

19
src/functions/bundler/grab-client-hydration-script.tsx
View File

@ -4,6 +4,7 @@ import grabDirNames from "../../utils/grab-dir-names";
import AppNames from "../../utils/grab-app-names";
import grabConstants from "../../utils/grab-constants";
import pagePathTransform from "../../utils/page-path-transform";
import grabRootFilePath from "../server/web-pages/grab-root-file-path";
const { PAGES_DIR } = grabDirNames();
@ -20,25 +21,23 @@ export default async function grabClientHydrationScript({
ClientWindowPagePropsName,
} = grabConstants();
const { root_file_path } = grabRootFilePath();
const target_path = pagePathTransform({ page_path: page_local_path });
const root_component_path = path.join(
PAGES_DIR,
`${AppNames["RootPagesComponentName"]}.tsx`,
);
const does_root_exist = existsSync(root_component_path);
const target_root_path = root_file_path
? pagePathTransform({ page_path: root_file_path })
: undefined;
let txt = ``;
txt += `import { hydrateRoot } from "react-dom/client";\n`;
if (does_root_exist) {
txt += `import Root from "${root_component_path}";\n`;
if (target_root_path) {
txt += `import Root from "${target_root_path}";\n`;
}
txt += `import Page from "${target_path}";\n\n`;
txt += `const pageProps = window.${ClientWindowPagePropsName} || {};\n`;
if (does_root_exist) {
if (target_root_path) {
txt += `const component = <Root suppressHydrationWarning={true} {...pageProps}><Page {...pageProps} /></Root>\n`;
} else {
txt += `const component = <Page suppressHydrationWarning={true} {...pageProps} />\n`;

9
src/functions/bundler/record-artifacts.ts
View File

@ -1,13 +1,18 @@
import grabDirNames from "../../utils/grab-dir-names";
import type { BundlerCTXMap } from "../../types";
import _ from "lodash";
const { HYDRATION_DST_DIR_MAP_JSON_FILE } = grabDirNames();
type Params = {
artifacts: BundlerCTXMap[];
page_file_paths?: string[];
};
export default async function recordArtifacts({ artifacts }: Params) {
export default async function recordArtifacts({
artifacts,
page_file_paths,
}: Params) {
const artifacts_map: { [k: string]: BundlerCTXMap } = {};
for (const artifact of artifacts) {
@ -17,7 +22,7 @@ export default async function recordArtifacts({ artifacts }: Params) {
}
if (global.BUNDLER_CTX_MAP) {
global.BUNDLER_CTX_MAP = artifacts_map;
global.BUNDLER_CTX_MAP = _.merge(global.BUNDLER_CTX_MAP, artifacts_map);
}
await Bun.write(

4
src/functions/server/watcher.ts
View File

@ -86,9 +86,7 @@ async function fullRebuild(params?: { msg?: string }) {
(hmr) => hmr.target_map?.local_path,
).filter((f) => typeof f == "string");
await rewritePagesModule({
page_file_path: target_file_paths,
});
await rewritePagesModule();
if (msg) {
log.watch(msg);

129
src/functions/server/web-pages/generate-web-html.tsx
View File

@ -24,50 +24,49 @@ 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 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 devSuffix = dev ? "?dev" : "";
const importMap = JSON.stringify({
@ -79,23 +78,69 @@ export default async function genWebHTML({
"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`;
}
if (isDevelopment()) {
html += `<script defer>\n${await grabWebPageHydrationScript()}\n</script>\n`;
}
let final_component = (
<html {...html_props}>
<head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
if (headHTML) {
html += ` ${headHTML}\n`;
}
{root_meta ? grabWebMetaHTML({ meta: root_meta }) : null}
{page_meta ? grabWebMetaHTML({ meta: page_meta }) : null}
html += ` </head>\n`;
html += ` <body>\n`;
html += ` <div id="${ClientRootElementIDName}">${componentHTML}</div>\n`;
html += ` </body>\n`;
html += `</html>\n`;
{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;
}

6
src/functions/server/web-pages/generate-web-page-response-from-component-return.tsx
View File

@ -8,21 +8,19 @@ export default async function generateWebPageResponseFromComponentReturn({
component,
module,
bundledMap,
head,
meta,
routeParams,
serverRes,
debug,
root_module,
}: GrabPageComponentRes) {
const html = await genWebHTML({
component,
pageProps: serverRes,
bundledMap,
module,
meta,
head,
routeParams,
debug,
root_module,
});
if (debug) {

71
src/functions/server/web-pages/grab-page-component.tsx
View File

@ -1,8 +1,8 @@
import type { FC } from "react";
import grabRouteParams from "../../../utils/grab-route-params";
import type {
BunextPageModule,
BunextPageModuleServerReturn,
BunextRootModule,
BunxRouteParams,
GrabPageComponentRes,
} from "../../../types";
@ -11,6 +11,7 @@ import grabPageBundledReactComponent from "./grab-page-bundled-react-component";
import _ from "lodash";
import { log } from "../../../utils/log";
import grabRootFilePath from "./grab-root-file-path";
import grabPageServerRes from "./grab-page-server-res";
class NotFoundError extends Error {}
@ -65,6 +66,7 @@ export default async function grabPageComponent({
const bundledMap = global.BUNDLER_CTX_MAP?.[file_path];
if (!bundledMap?.path) {
console.log(global.BUNDLER_CTX_MAP);
const errMsg = `No Bundled File Path for this request path!`;
log.error(errMsg);
throw new Error(errMsg);
@ -77,52 +79,36 @@ export default async function grabPageComponent({
const { root_file_path } = grabRootFilePath();
const module: BunextPageModule = await import(`${file_path}?t=${now}`);
const root_module: BunextRootModule | undefined = root_file_path
? await import(`${root_file_path}?t=${now}`)
: undefined;
if (debug) {
log.info(`module:`, module);
}
const serverRes: BunextPageModuleServerReturn = await (async () => {
const default_props: BunextPageModuleServerReturn = {
url: {
...(_.pick<URL, keyof URL>(url!, [
"host",
"hostname",
"pathname",
"origin",
"port",
"search",
"searchParams",
"hash",
"href",
"password",
"protocol",
"username",
]) as any),
},
const rootServerRes: BunextPageModuleServerReturn | undefined =
root_module?.server
? await grabPageServerRes({
module: root_module,
url,
query: match?.query,
};
routeParams,
})
: undefined;
try {
if (routeParams) {
const serverData = await module["server"]?.({
...routeParams,
query: { ...routeParams.query, ...match?.query },
});
return {
...serverData,
...default_props,
};
if (debug) {
log.info(`rootServerRes:`, rootServerRes);
}
return {
...default_props,
};
} catch (error) {
return {
...default_props,
};
}
})();
const serverRes: BunextPageModuleServerReturn = await grabPageServerRes(
{
module,
url,
query: match?.query,
routeParams,
},
);
if (debug) {
log.info(`serverRes:`, serverRes);
@ -143,8 +129,6 @@ export default async function grabPageComponent({
log.info(`meta:`, meta);
}
const Head = module.Head as FC<any>;
const { component } =
(await grabPageBundledReactComponent({
file_path,
@ -162,12 +146,11 @@ export default async function grabPageComponent({
return {
component,
serverRes,
serverRes: _.merge(rootServerRes || {}, serverRes),
routeParams,
module,
bundledMap,
meta,
head: Head,
root_module,
};
} catch (error: any) {
log.error(`Error Grabbing Page Component: ${error.message}`);

10
src/functions/server/web-pages/grab-page-react-component-string.tsx
View File

@ -14,21 +14,25 @@ export default function grabPageReactComponentString({
}: Params): string | undefined {
try {
const target_path = pagePathTransform({ page_path: file_path });
const target_root_path = root_file_path
? pagePathTransform({ page_path: root_file_path })
: undefined;
let tsx = ``;
const server_res_json = JSON.stringify(
EJSON.stringify(server_res || {}) ?? "{}",
);
if (root_file_path) {
tsx += `import Root from "${root_file_path}"\n`;
if (target_root_path) {
tsx += `import Root from "${target_root_path}"\n`;
}
tsx += `import Page from "${target_path}"\n`;
tsx += `export default function Main() {\n\n`;
tsx += `const props = JSON.parse(${server_res_json})\n\n`;
tsx += ` return (\n`;
if (root_file_path) {
if (target_root_path) {
tsx += ` <Root suppressHydrationWarning={true} {...props}><Page {...props} /></Root>\n`;
} else {
tsx += ` <Page suppressHydrationWarning={true} {...props} />\n`;

63
src/functions/server/web-pages/grab-page-server-res.tsx Normal file
View File

@ -0,0 +1,63 @@
import type {
BunextPageModule,
BunextPageModuleServerReturn,
BunxRouteParams,
GrabPageComponentRes,
} from "../../../types";
import _ from "lodash";
type Params = {
url?: URL;
module: BunextPageModule;
query?: Record<string, string>;
routeParams?: BunxRouteParams;
};
export default async function grabPageServerRes({
url,
query,
routeParams,
module,
}: Params): Promise<BunextPageModuleServerReturn> {
const default_props: BunextPageModuleServerReturn = {
url: url
? {
...(_.pick<URL, keyof URL>(url, [
"host",
"hostname",
"pathname",
"origin",
"port",
"search",
"searchParams",
"hash",
"href",
"password",
"protocol",
"username",
]) as any),
}
: null,
query,
};
try {
if (routeParams) {
const serverData = await module["server"]?.({
...routeParams,
query: { ...routeParams.query, ...query },
});
return {
...serverData,
...default_props,
};
}
return {
...default_props,
};
} catch (error) {
return {
...default_props,
};
}
}

56
src/functions/server/web-pages/grab-tsx-string-module.tsx
View File

@ -1,8 +1,7 @@
import isDevelopment from "../../../utils/is-development";
import * as esbuild from "esbuild";
import tailwindcss from "bun-plugin-tailwind";
import grabDirNames from "../../../utils/grab-dir-names";
import path from "path";
import tailwindEsbuildPlugin from "./tailwind-esbuild-plugin";
type Params = {
tsx: string;
@ -20,21 +19,22 @@ export default async function grabTsxStringModule<T extends any = any>({
.replace(/.*\/src\/pages\//, "")
.replace(/\.tsx$/, "");
const src_file_path = path.join(
BUNX_CWD_MODULE_CACHE_DIR,
`${trimmed_file_path}.tsx`,
);
const out_file_path = path.join(
BUNX_CWD_MODULE_CACHE_DIR,
`${trimmed_file_path}.js`,
);
await esbuild.build({
stdin: {
contents: tsx,
resolveDir: process.cwd(),
loader: "tsx",
},
bundle: true,
await Bun.write(src_file_path, tsx);
await Bun.build({
entrypoints: [src_file_path],
format: "esm",
target: "es2020",
platform: "node",
target: "bun",
external: ["react", "react-dom"],
minify: true,
define: {
@ -43,10 +43,12 @@ export default async function grabTsxStringModule<T extends any = any>({
),
},
metafile: true,
plugins: [tailwindEsbuildPlugin],
jsx: "automatic",
write: true,
outfile: out_file_path,
plugins: [tailwindcss],
jsx: {
runtime: "automatic",
development: dev,
},
outdir: BUNX_CWD_MODULE_CACHE_DIR,
});
Loader.registry.delete(out_file_path);
@ -54,3 +56,27 @@ export default async function grabTsxStringModule<T extends any = any>({
return module as T;
}
// await esbuild.build({
// stdin: {
// contents: tsx,
// resolveDir: process.cwd(),
// loader: "tsx",
// },
// bundle: true,
// format: "esm",
// target: "es2020",
// platform: "node",
// external: ["react", "react-dom"],
// minify: true,
// define: {
// "process.env.NODE_ENV": JSON.stringify(
// dev ? "development" : "production",
// ),
// },
// metafile: true,
// plugins: [tailwindEsbuildPlugin],
// jsx: "automatic",
// write: true,
// outfile: out_file_path,
// });

77
src/functions/server/web-pages/grab-web-meta-html.ts
View File

@ -1,77 +0,0 @@
import { escape } from "lodash";
import type { BunextPageModuleMeta } from "../../../types";
type Params = {
meta: BunextPageModuleMeta;
};
export default function grabWebMetaHTML({ meta }: Params) {
let html = ``;
if (meta.title) {
html += ` <title>${escape(meta.title)}</title>\n`;
}
if (meta.description) {
html += ` <meta name="description" content="${escape(meta.description)}" />\n`;
}
if (meta.keywords) {
const keywords = Array.isArray(meta.keywords)
? meta.keywords.join(", ")
: meta.keywords;
html += ` <meta name="keywords" content="${escape(keywords)}" />\n`;
}
if (meta.author) {
html += ` <meta name="author" content="${escape(meta.author)}" />\n`;
}
if (meta.robots) {
html += ` <meta name="robots" content="${escape(meta.robots)}" />\n`;
}
if (meta.canonical) {
html += ` <link rel="canonical" href="${escape(meta.canonical)}" />\n`;
}
if (meta.themeColor) {
html += ` <meta name="theme-color" content="${escape(meta.themeColor)}" />\n`;
}
if (meta.og) {
const { og } = meta;
if (og.title)
html += ` <meta property="og:title" content="${escape(og.title)}" />\n`;
if (og.description)
html += ` <meta property="og:description" content="${escape(og.description)}" />\n`;
if (og.image)
html += ` <meta property="og:image" content="${escape(og.image)}" />\n`;
if (og.url)
html += ` <meta property="og:url" content="${escape(og.url)}" />\n`;
if (og.type)
html += ` <meta property="og:type" content="${escape(og.type)}" />\n`;
if (og.siteName)
html += ` <meta property="og:site_name" content="${escape(og.siteName)}" />\n`;
if (og.locale)
html += ` <meta property="og:locale" content="${escape(og.locale)}" />\n`;
}
if (meta.twitter) {
const { twitter } = meta;
if (twitter.card)
html += ` <meta name="twitter:card" content="${escape(twitter.card)}" />\n`;
if (twitter.title)
html += ` <meta name="twitter:title" content="${escape(twitter.title)}" />\n`;
if (twitter.description)
html += ` <meta name="twitter:description" content="${escape(twitter.description)}" />\n`;
if (twitter.image)
html += ` <meta name="twitter:image" content="${escape(twitter.image)}" />\n`;
if (twitter.site)
html += ` <meta name="twitter:site" content="${escape(twitter.site)}" />\n`;
if (twitter.creator)
html += ` <meta name="twitter:creator" content="${escape(twitter.creator)}" />\n`;
}
return html;
}

76
src/functions/server/web-pages/grab-web-meta-html.tsx Normal file
View File

@ -0,0 +1,76 @@
import type { BunextPageModuleMeta } from "../../../types";
type Params = {
meta: BunextPageModuleMeta;
};
export default function grabWebMetaHTML({ meta }: Params) {
const keywords = meta.keywords
? Array.isArray(meta.keywords)
? meta.keywords.join(", ")
: meta.keywords
: undefined;
return (
<>
{meta.title && <title>{meta.title}</title>}
{meta.description && (
<meta name="description" content={meta.description} />
)}
{keywords && <meta name="keywords" content={keywords} />}
{meta.author && <meta name="author" content={meta.author} />}
{meta.robots && <meta name="robots" content={meta.robots} />}
{meta.canonical && (
<link rel="canonical" href={meta.canonical} />
)}
{meta.themeColor && (
<meta name="theme-color" content={meta.themeColor} />
)}
{meta.og?.title && (
<meta property="og:title" content={meta.og.title} />
)}
{meta.og?.description && (
<meta
property="og:description"
content={meta.og.description}
/>
)}
{meta.og?.image && (
<meta property="og:image" content={meta.og.image} />
)}
{meta.og?.url && (
<meta property="og:url" content={meta.og.url} />
)}
{meta.og?.type && (
<meta property="og:type" content={meta.og.type} />
)}
{meta.og?.siteName && (
<meta property="og:site_name" content={meta.og.siteName} />
)}
{meta.og?.locale && (
<meta property="og:locale" content={meta.og.locale} />
)}
{meta.twitter?.card && (
<meta name="twitter:card" content={meta.twitter.card} />
)}
{meta.twitter?.title && (
<meta name="twitter:title" content={meta.twitter.title} />
)}
{meta.twitter?.description && (
<meta
name="twitter:description"
content={meta.twitter.description}
/>
)}
{meta.twitter?.image && (
<meta name="twitter:image" content={meta.twitter.image} />
)}
{meta.twitter?.site && (
<meta name="twitter:site" content={meta.twitter.site} />
)}
{meta.twitter?.creator && (
<meta name="twitter:creator" content={meta.twitter.creator} />
)}
</>
);
}

13
src/presets/components/head.tsx Normal file
View File

@ -0,0 +1,13 @@
import type {
DetailedHTMLProps,
HTMLAttributes,
PropsWithChildren,
} from "react";
type Props = PropsWithChildren<
DetailedHTMLProps<HTMLAttributes<HTMLHeadElement>, HTMLHeadElement>
>;
export default function Head({ children, ...props }: Props) {
return <head {...props}>{children}</head>;
}

23
src/types/index.ts
View File

@ -1,5 +1,12 @@
import type { MatchedRoute, Server, WebSocketHandler } from "bun";
import type { FC, JSX, PropsWithChildren, ReactNode } from "react";
import type {
DetailedHTMLProps,
FC,
HtmlHTMLAttributes,
JSX,
PropsWithChildren,
ReactNode,
} from "react";
export type ServerProps = {
params: Record<string, string>;
@ -145,11 +152,10 @@ export type PageDistGenParams = {
export type LivePageDistGenParams = {
component: ReactNode;
head?: FC<BunextPageHeadFCProps>;
pageProps?: any;
module?: BunextPageModule;
root_module?: BunextRootModule;
bundledMap?: BundlerCTXMap;
meta?: BunextPageModuleMeta;
routeParams?: BunxRouteParams;
debug?: boolean;
};
@ -165,8 +171,14 @@ export type BunextPageModule = {
meta?: BunextPageModuleMeta | BunextPageModuleMetaFn;
Head?: FC<BunextPageHeadFCProps>;
config?: BunextRouteConfig;
html_props?: BunextHTMLProps;
};
export type BunextHTMLProps = DetailedHTMLProps<
HtmlHTMLAttributes<HTMLHtmlElement>,
HTMLHtmlElement
>;
export type BunextPageModuleMetaFn = (params: {
ctx: BunxRouteParams;
serverRes?: BunextPageModuleServerReturn;
@ -253,11 +265,12 @@ export type GrabPageComponentRes = {
routeParams?: BunxRouteParams;
bundledMap?: BundlerCTXMap;
module: BunextPageModule;
meta?: BunextPageModuleMeta;
head?: FC<BunextPageHeadFCProps>;
root_module?: BunextRootModule;
debug?: boolean;
};
export type BunextRootModule = BunextPageModule;
export type GrabPageReactBundledComponentRes = {
component: JSX.Element;
server_res?: BunextPageModuleServerReturn;

18
src/utils/rewrite-pages-module.ts
View File

@ -1,6 +1,8 @@
import grabAllPages from "./grab-all-pages";
import pagePathTransform from "./page-path-transform";
import stripServerSideLogic from "../functions/bundler/strip-server-side-logic";
import grabRootFilePath from "../functions/server/web-pages/grab-root-file-path";
import { existsSync } from "fs";
type Params = {
page_file_path?: string | string[];
@ -21,12 +23,19 @@ export default async function rewritePagesModule(params?: Params) {
for (let i = 0; i < target_pages.length; i++) {
const page_path = target_pages[i];
const dst_path = pagePathTransform({ page_path });
if (page_path.match(/__root\.tsx?/)) {
continue;
await transformFile(page_path);
}
const { root_file_path } = grabRootFilePath();
if (root_file_path && existsSync(root_file_path)) {
await transformFile(root_file_path);
}
}
async function transformFile(page_path: string) {
const dst_path = pagePathTransform({ page_path });
const origin_page_content = await Bun.file(page_path).text();
const dst_page_content = stripServerSideLogic({
txt_code: origin_page_content,
@ -37,4 +46,3 @@ export default async function rewritePagesModule(params?: Params) {
createPath: true,
});
}
}