Bugfix. Extract react imports from main bundler to vendor static files
This commit is contained in:
@@ -1,10 +1,9 @@
|
||||
import grabDirNames from "../../utils/grab-dir-names";
|
||||
import path from "path";
|
||||
import isDevelopment from "../../utils/is-development";
|
||||
import { existsSync } from "fs";
|
||||
import { readFileResponse } from "./handle-public";
|
||||
|
||||
const { HYDRATION_DST_DIR } = grabDirNames();
|
||||
const { BUNEXT_PUBLIC_DIR } = grabDirNames();
|
||||
|
||||
type Params = {
|
||||
req: Request;
|
||||
@@ -15,54 +14,21 @@ export default async function ({ req }: Params): Promise<Response> {
|
||||
const is_dev = isDevelopment();
|
||||
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(
|
||||
HYDRATION_DST_DIR,
|
||||
url.pathname.replace(/\/\.bunext\/public\/pages\//, ""),
|
||||
BUNEXT_PUBLIC_DIR,
|
||||
url.pathname.replace(/\/\.bunext\/public\//, ""),
|
||||
);
|
||||
|
||||
if (!file_path.startsWith(HYDRATION_DST_DIR + path.sep)) {
|
||||
if (!file_path.startsWith(BUNEXT_PUBLIC_DIR + path.sep)) {
|
||||
return new Response("Forbidden", { status: 403 });
|
||||
}
|
||||
|
||||
return readFileResponse({ file_path });
|
||||
return readFileResponse({
|
||||
file_path,
|
||||
cache: url.pathname.includes("/vendor/")
|
||||
? { duration: 3600 }
|
||||
: undefined,
|
||||
});
|
||||
} catch (error) {
|
||||
return new Response(`File Not Found`, {
|
||||
status: 404,
|
||||
|
||||
@@ -31,7 +31,14 @@ export default async function ({ req }: Params): Promise<Response> {
|
||||
}
|
||||
}
|
||||
|
||||
export function readFileResponse({ file_path }: { file_path: string }) {
|
||||
type FileResponse = {
|
||||
file_path: string;
|
||||
cache?: {
|
||||
duration?: "infinite" | number;
|
||||
};
|
||||
};
|
||||
|
||||
export function readFileResponse({ file_path, cache }: FileResponse) {
|
||||
if (!existsSync(file_path)) {
|
||||
return new Response(`Public File Doesn't Exist`, {
|
||||
status: 404,
|
||||
@@ -40,7 +47,15 @@ export function readFileResponse({ file_path }: { file_path: string }) {
|
||||
|
||||
const file = Bun.file(file_path);
|
||||
|
||||
// let res_opts: ResponseInit = {};
|
||||
const headers = new Headers();
|
||||
|
||||
return new Response(file);
|
||||
if (cache?.duration == "infinite" || (cache && !cache.duration)) {
|
||||
headers.set("Cache-Control", "public, max-age=31536000, immutable");
|
||||
} else if (cache?.duration) {
|
||||
headers.set("Cache-Control", `public, max-age=${cache.duration}`);
|
||||
}
|
||||
|
||||
return new Response(file, {
|
||||
headers,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -6,23 +6,11 @@ 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 { readFileSync } from "fs";
|
||||
import path from "path";
|
||||
import _ from "lodash";
|
||||
import grabDirNames from "../../../utils/grab-dir-names";
|
||||
|
||||
const { ROOT_DIR } = grabDirNames();
|
||||
|
||||
let _reactVersion = "19";
|
||||
try {
|
||||
_reactVersion = JSON.parse(
|
||||
readFileSync(
|
||||
path.join(process.cwd(), "node_modules/react/package.json"),
|
||||
"utf-8",
|
||||
),
|
||||
).version;
|
||||
} catch {}
|
||||
|
||||
export default async function genWebHTML({
|
||||
component,
|
||||
pageProps,
|
||||
@@ -75,32 +63,6 @@ export default async function genWebHTML({
|
||||
const RootHead = root_module?.Head;
|
||||
|
||||
const dev = isDevelopment();
|
||||
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> = {
|
||||
// react: `https://esm.sh/react@${_reactVersion}`,
|
||||
// "react-dom": `https://esm.sh/react-dom@${_reactVersion}`,
|
||||
// "react-dom/client": `https://esm.sh/react-dom@${_reactVersion}/client`,
|
||||
// "react/jsx-runtime": `https://esm.sh/react@${_reactVersion}/jsx-runtime`,
|
||||
// "react/jsx-dev-runtime": `https://esm.sh/react@${_reactVersion}/jsx-dev-runtime`,
|
||||
// };
|
||||
|
||||
// if (dev) {
|
||||
// browser_imports["react/jsx-dev-runtime"] =
|
||||
// `https://esm.sh/react@${_reactVersion}/jsx-dev-runtime`;
|
||||
// }
|
||||
|
||||
// const importMap = JSON.stringify({
|
||||
// imports: browser_imports,
|
||||
// });
|
||||
|
||||
const final_meta = _.merge(root_meta, page_meta);
|
||||
|
||||
@@ -116,8 +78,6 @@ export default async function genWebHTML({
|
||||
|
||||
{final_meta ? grabWebMetaHTML({ meta: final_meta }) : null}
|
||||
|
||||
{/* <link rel="preconnect" href="https://esm.sh" /> */}
|
||||
|
||||
{bundledMap?.css_path ? (
|
||||
<link
|
||||
rel="stylesheet"
|
||||
@@ -140,14 +100,16 @@ export default async function genWebHTML({
|
||||
|
||||
{bundledMap?.path ? (
|
||||
<>
|
||||
{/* <script
|
||||
<script
|
||||
type="importmap"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: importMap,
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify(
|
||||
global.REACT_IMPORTS_MAP,
|
||||
),
|
||||
}}
|
||||
defer
|
||||
data-bunext-head
|
||||
/> */}
|
||||
/>
|
||||
<script
|
||||
src={`/${bundledMap.path}`}
|
||||
type="module"
|
||||
@@ -183,19 +145,14 @@ export default async function genWebHTML({
|
||||
|
||||
const stream = await renderToReadableStream(final_component, {
|
||||
onError(error: any) {
|
||||
// This is where you "omit" or handle the errors
|
||||
// You can log it silently or ignore it
|
||||
if (error.message.includes('unique "key" prop')) return;
|
||||
console.error(error);
|
||||
},
|
||||
});
|
||||
|
||||
// 2. Convert the Web Stream to a String (Bun-optimized)
|
||||
const htmlBody = await new Response(stream).text();
|
||||
|
||||
html += htmlBody;
|
||||
|
||||
// html += renderToString(final_component);
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@ export default async function grabFilePathModule<T extends any = any>({
|
||||
format: "esm",
|
||||
target: "es2020",
|
||||
platform: "node",
|
||||
external: ["react", "react-dom"],
|
||||
// external: ["react", "react-dom"],
|
||||
minify: true,
|
||||
define: {
|
||||
"process.env.NODE_ENV": JSON.stringify(
|
||||
|
||||
@@ -94,6 +94,17 @@ export default async function (params?: Params) {
|
||||
script += ` oldCSSLink.remove();\n`;
|
||||
script += ` }\n`;
|
||||
|
||||
// script += ` const newScriptPath = \`/\${data.target_map.path}?t=\${Date.now()}\`;\n\n`;
|
||||
// script += ` try {\n`;
|
||||
// script += ` const mod = await import(newScriptPath);\n`;
|
||||
// script += ` if (typeof mod.default === "function" || typeof window.__BUNEXT_RERENDER__ === "function") {\n`;
|
||||
// script += ` window.__BUNEXT_RERENDER__?.();\n`;
|
||||
// script += ` }\n`;
|
||||
// script += ` } catch (importErr) {\n`;
|
||||
// script += ` console.error("HMR import failed, reloading:", importErr.message);\n`;
|
||||
// script += ` window.location.reload();\n`;
|
||||
// script += ` }\n`;
|
||||
|
||||
script += ` const newScriptPath = \`/\${data.target_map.path}?t=\${Date.now()}\`;\n\n`;
|
||||
script += ` const oldScript = document.getElementById("${AppData["BunextClientHydrationScriptID"]}");\n`;
|
||||
script += ` if (oldScript) {\n`;
|
||||
@@ -108,6 +119,7 @@ export default async function (params?: Params) {
|
||||
// script += ` }\n`;
|
||||
// script += ` console.log("newScript", newScript);\n`;
|
||||
script += ` document.head.appendChild(newScript);\n\n`;
|
||||
|
||||
script += ` } catch (err) {\n`;
|
||||
script += ` console.error("HMR update failed, falling back to reload:", err.message);\n`;
|
||||
script += ` window.location.reload();\n`;
|
||||
|
||||
Reference in New Issue
Block a user