Try local react imports

This commit is contained in:
Benjamin Toby 2026-03-31 06:22:26 +01:00
parent d6985b3335
commit 68d88bce4a
9 changed files with 191 additions and 69 deletions

3
.gitignore vendored
View File

@ -180,4 +180,5 @@ __fixtures__
/public /public
/.data /.data
/.dump /.dump
/.vscode /.vscode
/source.md

View File

@ -1,11 +1,8 @@
import { Command } from "commander"; import { Command } from "commander";
import { log } from "../../utils/log"; import { log } from "../../utils/log";
import init from "../../functions/init"; import init from "../../functions/init";
// import rewritePagesModule from "../../utils/rewrite-pages-module";
import allPagesBunBundler from "../../functions/bundler/all-pages-bun-bundler";
import grabDirNames from "../../utils/grab-dir-names"; import grabDirNames from "../../utils/grab-dir-names";
import { rmSync } from "fs"; import { rmSync } from "fs";
import allPagesBundler from "../../functions/bundler/all-pages-bundler";
import allPagesESBuildContextBundler from "../../functions/bundler/all-pages-esbuild-context-bundler"; import allPagesESBuildContextBundler from "../../functions/bundler/all-pages-esbuild-context-bundler";
const { HYDRATION_DST_DIR, BUNX_CWD_PAGES_REWRITE_DIR } = grabDirNames(); const { HYDRATION_DST_DIR, BUNX_CWD_PAGES_REWRITE_DIR } = grabDirNames();

View File

@ -33,9 +33,11 @@ declare global {
var ROOT_FILE_UPDATED: boolean; var ROOT_FILE_UPDATED: boolean;
var SKIPPED_BROWSER_MODULES: Set<string>; var SKIPPED_BROWSER_MODULES: Set<string>;
var BUNDLER_CTX: BuildContext | undefined; var BUNDLER_CTX: BuildContext | undefined;
var DIR_NAMES: ReturnType<typeof grabDirNames>;
} }
const { PAGES_DIR } = grabDirNames(); const dirNames = grabDirNames();
const { PAGES_DIR } = dirNames;
export default async function bunextInit() { export default async function bunextInit() {
global.HMR_CONTROLLERS = []; global.HMR_CONTROLLERS = [];
@ -43,6 +45,7 @@ export default async function bunextInit() {
global.BUNDLER_REBUILDS = 0; global.BUNDLER_REBUILDS = 0;
global.PAGE_FILES = []; global.PAGE_FILES = [];
global.SKIPPED_BROWSER_MODULES = new Set<string>(); global.SKIPPED_BROWSER_MODULES = new Set<string>();
global.DIR_NAMES = dirNames;
await init(); await init();
log.banner(); log.banner();

View File

@ -48,7 +48,7 @@ export default async function bunextRequestHandler({
if (url.pathname === "/__hmr" && is_dev) { if (url.pathname === "/__hmr" && is_dev) {
response = await handleHmr({ req }); response = await handleHmr({ req });
} else if (url.pathname.startsWith("/.bunext/public/pages")) { } else if (url.pathname.startsWith("/.bunext")) {
response = await handleBunextPublicAssets({ req }); response = await handleBunextPublicAssets({ req });
} else if (url.pathname.startsWith("/api/")) { } else if (url.pathname.startsWith("/api/")) {
response = await handleRoutes({ req }); response = await handleRoutes({ req });

View File

@ -2,6 +2,7 @@ import grabDirNames from "../../utils/grab-dir-names";
import path from "path"; import path from "path";
import isDevelopment from "../../utils/is-development"; import isDevelopment from "../../utils/is-development";
import { existsSync } from "fs"; import { existsSync } from "fs";
import { readFileResponse } from "./handle-public";
const { HYDRATION_DST_DIR } = grabDirNames(); const { HYDRATION_DST_DIR } = grabDirNames();
@ -13,6 +14,45 @@ export default async function ({ req }: Params): Promise<Response> {
try { try {
const is_dev = isDevelopment(); const is_dev = isDevelopment();
const url = new URL(req.url); const url = new URL(req.url);
// switch (url.pathname) {
// case "/.bunext/react":
// return readFileResponse({
// file_path: is_dev
// ? global.DIR_NAMES.REACT_DEVELOPMENT_MODULE
// : global.DIR_NAMES.REACT_PRODUCTION_MODULE,
// });
// case "/.bunext/react-dom":
// return readFileResponse({
// file_path: is_dev
// ? global.DIR_NAMES.REACT_DOM_DEVELOPMENT_MODULE
// : global.DIR_NAMES.REACT_DOM_PRODUCTION_MODULE,
// });
// case "/.bunext/react-dom-client":
// return readFileResponse({
// file_path: is_dev
// ? global.DIR_NAMES.REACT_DOM_CLIENT_DEVELOPMENT_MODULE
// : global.DIR_NAMES.REACT_DOM_CLIENT_PRODUCTION_MODULE,
// });
// case "/.bunext/react-jsx-runtime":
// return readFileResponse({
// file_path: is_dev
// ? global.DIR_NAMES.REACT_JSX_RUNTIME_DEVELOPMENT_MODULE
// : global.DIR_NAMES.REACT_JSX_RUNTIME_PRODUCTION_MODULE,
// });
// case "/.bunext/react-jsx-dev-runtime":
// return readFileResponse({
// file_path: is_dev
// ? global.DIR_NAMES
// .REACT_JSX_DEVELOPMENT_RUNTIME_DEVELOPMENT_MODULE
// : global.DIR_NAMES
// .REACT_JSX_DEVELOPMENT_RUNTIME_PRODUCTION_MODULE,
// });
// default:
// break;
// }
const file_path = path.join( const file_path = path.join(
HYDRATION_DST_DIR, HYDRATION_DST_DIR,
url.pathname.replace(/\/\.bunext\/public\/pages\//, ""), url.pathname.replace(/\/\.bunext\/public\/pages\//, ""),
@ -22,14 +62,7 @@ export default async function ({ req }: Params): Promise<Response> {
return new Response("Forbidden", { status: 403 }); return new Response("Forbidden", { status: 403 });
} }
if (!existsSync(file_path)) { return readFileResponse({ file_path });
return new Response(`File Doesn't Exist`, {
status: 404,
});
}
const file = Bun.file(file_path);
return new Response(file);
} catch (error) { } catch (error) {
return new Response(`File Not Found`, { return new Response(`File Not Found`, {
status: 404, status: 404,

View File

@ -23,20 +23,24 @@ export default async function ({ req }: Params): Promise<Response> {
return new Response("Forbidden", { status: 403 }); return new Response("Forbidden", { status: 403 });
} }
if (!existsSync(file_path)) { return readFileResponse({ file_path });
return new Response(`Public File Doesn't Exist`, {
status: 404,
});
}
const file = Bun.file(file_path);
let res_opts: ResponseInit = {};
return new Response(file, res_opts);
} catch (error) { } catch (error) {
return new Response(`Public File Not Found`, { return new Response(`Public File Not Found`, {
status: 404, status: 404,
}); });
} }
} }
export function readFileResponse({ file_path }: { file_path: string }) {
if (!existsSync(file_path)) {
return new Response(`Public File Doesn't Exist`, {
status: 404,
});
}
const file = Bun.file(file_path);
// let res_opts: ResponseInit = {};
return new Response(file);
}

View File

@ -1,4 +1,4 @@
import { renderToString } from "react-dom/server"; import { renderToReadableStream, renderToString } from "react-dom/server";
import grabContants from "../../../utils/grab-constants"; import grabContants from "../../../utils/grab-constants";
import EJSON from "../../../utils/ejson"; import EJSON from "../../../utils/ejson";
import type { LivePageDistGenParams } from "../../../types"; import type { LivePageDistGenParams } from "../../../types";
@ -10,6 +10,9 @@ import { AppData } from "../../../data/app-data";
import { readFileSync } from "fs"; import { readFileSync } from "fs";
import path from "path"; import path from "path";
import _ from "lodash"; import _ from "lodash";
import grabDirNames from "../../../utils/grab-dir-names";
const {} = grabDirNames();
let _reactVersion = "19"; let _reactVersion = "19";
try { try {
@ -70,6 +73,15 @@ export default async function genWebHTML({
const dev = isDevelopment(); const dev = isDevelopment();
const devSuffix = dev ? "?dev" : ""; const devSuffix = dev ? "?dev" : "";
// const browser_imports: Record<string, string> = {
// react: `/.bunext/react`,
// "react-dom": `/.bunext/react-dom`,
// "react-dom/client": `/.bunext/react-dom-client`,
// "react/jsx-runtime": `/.bunext/react-jsx-runtime`,
// "react/jsx-dev-runtime": `/.bunext/react-jsx-dev-runtime`,
// };
const browser_imports: Record<string, string> = { const browser_imports: Record<string, string> = {
react: `https://esm.sh/react@${_reactVersion}`, react: `https://esm.sh/react@${_reactVersion}`,
"react-dom": `https://esm.sh/react-dom@${_reactVersion}`, "react-dom": `https://esm.sh/react-dom@${_reactVersion}`,
@ -110,15 +122,10 @@ export default async function genWebHTML({
}} }}
/> />
{/* {global.SKIPPED_BROWSER_MODULES ? ( {RootHead ? (
<script <RootHead serverRes={pageProps} ctx={routeParams} />
type="importmap" ) : null}
dangerouslySetInnerHTML={{ {Head ? <Head serverRes={pageProps} ctx={routeParams} /> : null}
__html: importMap,
}}
fetchPriority="high"
/>
) : null} */}
{bundledMap?.path ? ( {bundledMap?.path ? (
<> <>
@ -146,11 +153,6 @@ export default async function genWebHTML({
}} }}
/> />
) : null} ) : null}
{RootHead ? (
<RootHead serverRes={pageProps} ctx={routeParams} />
) : null}
{Head ? <Head serverRes={pageProps} ctx={routeParams} /> : null}
</head> </head>
<body> <body>
<div <div
@ -165,21 +167,21 @@ export default async function genWebHTML({
let html = `<!DOCTYPE html>\n`; let html = `<!DOCTYPE html>\n`;
// const stream = await renderToReadableStream(final_component, { const stream = await renderToReadableStream(final_component, {
// onError(error: any) { onError(error: any) {
// // This is where you "omit" or handle the errors // This is where you "omit" or handle the errors
// // You can log it silently or ignore it // You can log it silently or ignore it
// if (error.message.includes('unique "key" prop')) return; if (error.message.includes('unique "key" prop')) return;
// console.error(error); console.error(error);
// }, },
// }); });
// // 2. Convert the Web Stream to a String (Bun-optimized) // 2. Convert the Web Stream to a String (Bun-optimized)
// const htmlBody = await new Response(stream).text(); const htmlBody = await new Response(stream).text();
// html += htmlBody; html += htmlBody;
html += renderToString(final_component); // html += renderToString(final_component);
return html; return html;
} }

View File

@ -196,23 +196,27 @@ export type BunextPageModuleMeta = {
robots?: string; robots?: string;
canonical?: string; canonical?: string;
themeColor?: string; themeColor?: string;
og?: { og?: BunextPageModuleMetaOG;
title?: string; twitter?: BunextPageModuleMetaTwitter;
description?: string; };
image?: string;
url?: string; export type BunextPageModuleMetaOG = {
type?: string; title?: string;
siteName?: string; description?: string;
locale?: string; image?: string;
}; url?: string;
twitter?: { type?: string;
card?: "summary" | "summary_large_image" | "app" | "player"; siteName?: string;
title?: string; locale?: string;
description?: string; };
image?: string;
site?: string; export type BunextPageModuleMetaTwitter = {
creator?: string; card?: "summary" | "summary_large_image" | "app" | "player";
}; title?: string;
description?: string;
image?: string;
site?: string;
creator?: string;
}; };
export type BunextPageServerFn< export type BunextPageServerFn<

View File

@ -45,6 +45,71 @@ export default function grabDirNames() {
`${BUNX_ROOT_404_FILE_NAME}.tsx`, `${BUNX_ROOT_404_FILE_NAME}.tsx`,
); );
// const NODE_MODULES_DIR = path.resolve(
// existsSync(path.join(BUNX_ROOT_DIR, "source.md"))
// ? BUNX_ROOT_DIR
// : ROOT_DIR,
// "node_modules",
// );
// const REACT_MODULE_DIR = path.join(NODE_MODULES_DIR, "react");
// const REACT_DOM_MODULE_DIR = path.join(NODE_MODULES_DIR, "react-dom");
// const REACT_PRODUCTION_MODULE = path.join(
// REACT_MODULE_DIR,
// "cjs",
// "react.production.js",
// );
// const REACT_DEVELOPMENT_MODULE = path.join(
// REACT_MODULE_DIR,
// "cjs",
// "react.development.js",
// );
// const REACT_JSX_RUNTIME_PRODUCTION_MODULE = path.join(
// REACT_MODULE_DIR,
// "cjs",
// "react-jsx-runtime.production.js",
// );
// const REACT_JSX_RUNTIME_DEVELOPMENT_MODULE = path.join(
// REACT_MODULE_DIR,
// "cjs",
// "react-jsx-runtime.development.js",
// );
// const REACT_JSX_DEVELOPMENT_RUNTIME_PRODUCTION_MODULE = path.join(
// REACT_MODULE_DIR,
// "cjs",
// "react-jsx-dev-runtime.production.js",
// );
// const REACT_JSX_DEVELOPMENT_RUNTIME_DEVELOPMENT_MODULE = path.join(
// REACT_MODULE_DIR,
// "cjs",
// "react-jsx-dev-runtime.development.js",
// );
// const REACT_DOM_PRODUCTION_MODULE = path.join(
// REACT_DOM_MODULE_DIR,
// "cjs",
// "react-dom.production.js",
// );
// const REACT_DOM_DEVELOPMENT_MODULE = path.join(
// REACT_DOM_MODULE_DIR,
// "cjs",
// "react-dom.development.js",
// );
// const REACT_DOM_CLIENT_PRODUCTION_MODULE = path.join(
// REACT_DOM_MODULE_DIR,
// "cjs",
// "react-dom-client.production.js",
// );
// const REACT_DOM_CLIENT_DEVELOPMENT_MODULE = path.join(
// REACT_DOM_MODULE_DIR,
// "cjs",
// "react-dom-client.development.js",
// );
return { return {
ROOT_DIR, ROOT_DIR,
SRC_DIR, SRC_DIR,
@ -68,5 +133,18 @@ export default function grabDirNames() {
BUNX_CWD_MODULE_CACHE_DIR, BUNX_CWD_MODULE_CACHE_DIR,
BUNX_CWD_PAGES_REWRITE_DIR, BUNX_CWD_PAGES_REWRITE_DIR,
HYDRATION_DST_DIR_MAP_JSON_FILE_NAME, HYDRATION_DST_DIR_MAP_JSON_FILE_NAME,
// NODE_MODULES_DIR,
// REACT_MODULE_DIR,
// REACT_DOM_MODULE_DIR,
// REACT_PRODUCTION_MODULE,
// REACT_DEVELOPMENT_MODULE,
// REACT_JSX_RUNTIME_PRODUCTION_MODULE,
// REACT_JSX_RUNTIME_DEVELOPMENT_MODULE,
// REACT_JSX_DEVELOPMENT_RUNTIME_PRODUCTION_MODULE,
// REACT_JSX_DEVELOPMENT_RUNTIME_DEVELOPMENT_MODULE,
// REACT_DOM_PRODUCTION_MODULE,
// REACT_DOM_DEVELOPMENT_MODULE,
// REACT_DOM_CLIENT_PRODUCTION_MODULE,
// REACT_DOM_CLIENT_DEVELOPMENT_MODULE,
}; };
} }