Moduletrace/bunext
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Moduletrace:a84ac10b24b1e58b471984fff358a619a82cfa13
Branches Tags
Moduletrace:main
..
compare: Moduletrace:ab6fc3be266f2f0eff77132006b6fa127965ebed
Branches Tags
Moduletrace:main

2 Commits
a84ac10b24 ... ab6fc3be26

Author SHA1 Message Date
Benjamin Toby
ab6fc3be26 Hydration bugfix 2026-04-08 08:08:27 +01:00
Benjamin Toby
6b7d29bc53 Bugfix: hydration mismatch 2026-04-08 07:46:09 +01:00
13 changed files with 256 additions and 181 deletions
Show Stats Expand all files Collapse all files

4
dist/functions/server/watcher-esbuild-ctx.js vendored
View File

@ -10,8 +10,6 @@ export default async function watcherEsbuildCTX() {
recursive: true, recursive: true,
persistent: true, persistent: true,
}, async (event, filename) => { }, async (event, filename) => {
// log.info(`event: ${event}`);
// log.info(`filename: ${filename}`);
if (!filename) if (!filename)
return; return;
if (filename.match(/^\.\w+/)) { if (filename.match(/^\.\w+/)) {
@ -105,7 +103,7 @@ async function fullRebuild(params) {
watcherEsbuildCTX(); watcherEsbuildCTX();
} }
} }
function reloadWatcher(params) { function reloadWatcher() {
if (global.PAGES_SRC_WATCHER) { if (global.PAGES_SRC_WATCHER) {
global.PAGES_SRC_WATCHER.close(); global.PAGES_SRC_WATCHER.close();
watcherEsbuildCTX(); watcherEsbuildCTX();

22
dist/functions/server/web-pages/generate-web-html.js vendored
View File

@ -48,14 +48,34 @@ export default async function genWebHTML({ component, pageProps, bundledMap, mod
__html: page_hydration_script, __html: page_hydration_script,
}, "data-bunext-head": true })) : null] }), _jsx("body", { children: _jsx("div", { id: ClientRootElementIDName, suppressHydrationWarning: !dev, children: component }) })] })); }, "data-bunext-head": true })) : null] }), _jsx("body", { children: _jsx("div", { id: ClientRootElementIDName, suppressHydrationWarning: !dev, children: component }) })] }));
let html = `<!DOCTYPE html>\n`; let html = `<!DOCTYPE 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();
const originalConsole = {
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 = () => { };
const stream = await renderToReadableStream(final_component, { const stream = await renderToReadableStream(final_component, {
onError(error) { onError(error) {
if (error.message.includes('unique "key" prop')) if (error.message.includes('unique "key" prop'))
return; return;
console.error(error); originalConsole.error(error);
}, },
}); });
const htmlBody = await new Response(stream).text(); const htmlBody = await new Response(stream).text();
Object.assign(console, originalConsole);
html += htmlBody; html += htmlBody;
return html; return html;
} }

12
dist/functions/server/web-pages/grab-page-component.js vendored
View File

@ -5,6 +5,11 @@ import { log } from "../../../utils/log";
import grabPageModules from "./grab-page-modules"; import grabPageModules from "./grab-page-modules";
import grabPageCombinedServerRes from "./grab-page-combined-server-res"; import grabPageCombinedServerRes from "./grab-page-combined-server-res";
class NotFoundError extends Error { class NotFoundError extends Error {
status = 404;
constructor(message) {
super(message);
this.name = "NotFoundError";
}
} }
export default async function grabPageComponent({ req, file_path: passed_file_path, debug, return_server_res_only, }) { export default async function grabPageComponent({ req, file_path: passed_file_path, debug, return_server_res_only, }) {
const url = req?.url ? new URL(req.url) : undefined; const url = req?.url ? new URL(req.url) : undefined;
@ -69,11 +74,16 @@ export default async function grabPageComponent({ req, file_path: passed_file_pa
}; };
} }
catch (error) { catch (error) {
const is404 = error instanceof NotFoundError ||
error?.name === "NotFoundError" ||
error?.status === 404;
if (!is404) {
log.error(`Error Grabbing Page Component: ${error.message}`); log.error(`Error Grabbing Page Component: ${error.message}`);
}
return await grabPageErrorComponent({ return await grabPageErrorComponent({
error, error,
routeParams, routeParams,
is404: error instanceof NotFoundError, is404,
url, url,
}); });
} }

13
dist/functions/server/web-pages/grab-page-react-component-string.js vendored
View File

@ -1,22 +1,13 @@
import EJSON from "../../../utils/ejson"; import EJSON from "../../../utils/ejson";
import isDevelopment from "../../../utils/is-development";
import { log } from "../../../utils/log"; import { log } from "../../../utils/log";
export default function grabPageReactComponentString({ file_path, root_file_path, server_res, }) { export default function grabPageReactComponentString({ file_path, root_file_path, server_res, }) {
const now = Date.now();
const dev = isDevelopment();
try { try {
const import_suffix = dev ? `?t=${now}` : "";
let tsx = ``; let tsx = ``;
const server_res_json = JSON.stringify(EJSON.stringify(server_res || {}) ?? "{}"); const server_res_json = JSON.stringify(EJSON.stringify(server_res || {}) ?? "{}");
// Import Root from its original source path so that all sub-components
// that import __root (e.g. AppContext) resolve to the same module instance.
// Using the rewritten .bunext/pages/__root would create a separate
// createContext() call, breaking context for any sub-component that
// imports AppContext via a relative path to the source __root.
if (root_file_path) { if (root_file_path) {
tsx += `import Root from "${root_file_path}${import_suffix}"\n`; tsx += `import Root from "${root_file_path}"\n`;
} }
tsx += `import Page from "${file_path}${import_suffix}"\n`; tsx += `import Page from "${file_path}"\n`;
tsx += `export default function Main() {\n\n`; tsx += `export default function Main() {\n\n`;
tsx += `const props = JSON.parse(${server_res_json})\n\n`; tsx += `const props = JSON.parse(${server_res_json})\n\n`;
tsx += ` return (\n`; tsx += ` return (\n`;

93
dist/functions/server/web-pages/grab-tsx-string-module.js vendored
View File

@ -1,75 +1,38 @@
import isDevelopment from "../../../utils/is-development"; import isDevelopment from "../../../utils/is-development";
import { transform } from "esbuild"; import * as esbuild from "esbuild";
import grabDirNames from "../../../utils/grab-dir-names";
import path from "path";
import tailwindEsbuildPlugin from "./tailwind-esbuild-plugin";
export default async function grabTsxStringModule({ tsx, }) { export default async function grabTsxStringModule({ tsx, }) {
const dev = isDevelopment(); const dev = isDevelopment();
const now = Date.now(); const now = Date.now();
const final_tsx = dev ? tsx + `\n// v_${now}` : tsx; const { BUNX_CWD_MODULE_CACHE_DIR } = grabDirNames();
const result = await transform(final_tsx, { const target_cache_file_path = path.join(BUNX_CWD_MODULE_CACHE_DIR, `server-render-${now}.js`);
await esbuild.build({
stdin: {
contents: dev ? tsx + `\n// v_${now}` : tsx,
resolveDir: process.cwd(),
loader: "tsx", loader: "tsx",
},
bundle: true,
format: "esm", format: "esm",
jsx: "automatic", target: "es2020",
platform: "node",
external: [
"react",
"react-dom",
"react/jsx-runtime",
"react/jsx-dev-runtime",
],
minify: !dev, minify: !dev,
define: {
"process.env.NODE_ENV": JSON.stringify(dev ? "development" : "production"),
},
jsx: "automatic",
outfile: target_cache_file_path,
plugins: [tailwindEsbuildPlugin],
}); });
const blob = new Blob([result.code], { type: "text/javascript" }); Loader.registry.delete(target_cache_file_path);
const url = URL.createObjectURL(blob); const mod = await import(`${target_cache_file_path}?t=${now}`);
const mod = await import(url);
URL.revokeObjectURL(url);
return mod; return mod;
} }
// const trimmed_file_path = file_path
// .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 Bun.write(src_file_path, tsx);
// const build = await Bun.build({
// entrypoints: [src_file_path],
// format: "esm",
// target: "bun",
// // external: ["react", "react-dom"],
// minify: true,
// define: {
// "process.env.NODE_ENV": JSON.stringify(
// dev ? "development" : "production",
// ),
// },
// metafile: true,
// plugins: [tailwindcss, BunSkipNonBrowserPlugin],
// jsx: {
// runtime: "automatic",
// development: dev,
// },
// outdir: BUNX_CWD_MODULE_CACHE_DIR,
// });
// Loader.registry.delete(out_file_path);
// const module = await import(`${out_file_path}?t=${Date.now()}`);
// 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,
// });

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@moduletrace/bunext", "name": "@moduletrace/bunext",
"version": "1.0.57", "version": "1.0.58",
"main": "dist/index.js", "main": "dist/index.js",
"module": "index.ts", "module": "index.ts",
"dependencies": { "dependencies": {

75
src/__tests__/functions/server/grab-page-bundled-react-component.test.tsx Normal file
View File

@ -0,0 +1,75 @@
import { afterAll, afterEach, describe, expect, test } from "bun:test";
import fs from "fs";
import path from "path";
import { renderToString } from "react-dom/server";
import grabPageBundledReactComponent from "../../../../src/functions/server/web-pages/grab-page-bundled-react-component";
import grabDirNames from "../../../../src/utils/grab-dir-names";
const { BUNX_CWD_MODULE_CACHE_DIR, BUNX_TMP_DIR } = grabDirNames();
describe("grabPageBundledReactComponent", () => {
const fixtureDirs: string[] = [];
const originalConfig = global.CONFIG;
global.CONFIG = { development: true } as any;
afterEach(() => {
for (const fixtureDir of fixtureDirs.splice(0)) {
fs.rmSync(fixtureDir, { recursive: true, force: true });
}
global.CONFIG = { development: true } as any;
});
afterAll(() => {
global.CONFIG = originalConfig;
});
test("keeps __root context connected during SSR", async () => {
fs.mkdirSync(BUNX_CWD_MODULE_CACHE_DIR, { recursive: true });
fs.mkdirSync(BUNX_TMP_DIR, { recursive: true });
const fixtureDir = path.join(BUNX_TMP_DIR, `ssr-context-${Date.now()}`);
fixtureDirs.push(fixtureDir);
fs.mkdirSync(fixtureDir, { recursive: true });
const rootFilePath = path.join(fixtureDir, "__root.tsx");
const pageFilePath = path.join(fixtureDir, "page.tsx");
fs.writeFileSync(
rootFilePath,
`import { createContext } from "react";
export const AppContext = createContext("missing-context");
export default function Root({ children }: { children: React.ReactNode }) {
return (
<AppContext.Provider value="server-context">
{children}
</AppContext.Provider>
);
}
`,
);
fs.writeFileSync(
pageFilePath,
`import { useContext } from "react";
import { AppContext } from "./__root";
export default function Page() {
const value = useContext(AppContext);
return <div>{value}</div>;
}
`,
);
const result = await grabPageBundledReactComponent({
file_path: pageFilePath,
root_file_path: rootFilePath,
});
expect(result?.component).toBeDefined();
expect(renderToString(result!.component)).toContain("server-context");
});
});

35
src/__tests__/functions/server/grab-page-component.test.tsx Normal file
View File

@ -0,0 +1,35 @@
import { afterEach, describe, expect, mock, test } from "bun:test";
import path from "path";
mock.module("../../../../src/utils/log", () => ({
log: {
info: mock((msg: string) => {}),
error: mock((msg: string) => {}),
},
}));
import { log } from "../../../../src/utils/log";
import grabPageComponent from "../../../../src/functions/server/web-pages/grab-page-component";
describe("grabPageComponent", () => {
const originalRouter = global.ROUTER;
afterEach(() => {
global.ROUTER = originalRouter;
mock.restore();
});
test("does not log an error for expected 404 page lookups", async () => {
global.ROUTER = new Bun.FileSystemRouter({
style: "nextjs",
dir: path.resolve(__dirname, "../../../../test/e2e-fixture/src/pages"),
});
const res = await grabPageComponent({
req: new Request("http://localhost:3000/unknown-foo-bar123"),
});
expect(res.serverRes?.responseOptions?.status).toBe(404);
expect(log.error).not.toHaveBeenCalled();
});
});

5
src/functions/server/watcher-esbuild-ctx.ts
View File

@ -15,9 +15,6 @@ export default async function watcherEsbuildCTX() {
persistent: true, persistent: true,
}, },
async (event, filename) => { async (event, filename) => {
// log.info(`event: ${event}`);
// log.info(`filename: ${filename}`);
if (!filename) return; if (!filename) return;
if (filename.match(/^\.\w+/)) { if (filename.match(/^\.\w+/)) {
@ -138,7 +135,7 @@ async function fullRebuild(params?: { msg?: string }) {
} }
} }
function reloadWatcher(params?: { msg?: string }) { function reloadWatcher() {
if (global.PAGES_SRC_WATCHER) { if (global.PAGES_SRC_WATCHER) {
global.PAGES_SRC_WATCHER.close(); global.PAGES_SRC_WATCHER.close();
watcherEsbuildCTX(); watcherEsbuildCTX();

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

@ -143,15 +143,40 @@ export default async function genWebHTML({
let html = `<!DOCTYPE html>\n`; let html = `<!DOCTYPE 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();
const originalConsole = {
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 = () => {};
const stream = await renderToReadableStream(final_component, { const stream = await renderToReadableStream(final_component, {
onError(error: any) { onError(error: any) {
if (error.message.includes('unique "key" prop')) return; if (error.message.includes('unique "key" prop')) return;
console.error(error); originalConsole.error(error);
}, },
}); });
const htmlBody = await new Response(stream).text(); const htmlBody = await new Response(stream).text();
Object.assign(console, originalConsole);
html += htmlBody; html += htmlBody;
return html; return html;

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

@ -6,7 +6,14 @@ import { log } from "../../../utils/log";
import grabPageModules from "./grab-page-modules"; import grabPageModules from "./grab-page-modules";
import grabPageCombinedServerRes from "./grab-page-combined-server-res"; import grabPageCombinedServerRes from "./grab-page-combined-server-res";
class NotFoundError extends Error {} class NotFoundError extends Error {
status = 404;
constructor(message: string) {
super(message);
this.name = "NotFoundError";
}
}
type Params = { type Params = {
req?: Request; req?: Request;
@ -100,12 +107,19 @@ export default async function grabPageComponent({
root_module, root_module,
}; };
} catch (error: any) { } catch (error: any) {
const is404 =
error instanceof NotFoundError ||
error?.name === "NotFoundError" ||
error?.status === 404;
if (!is404) {
log.error(`Error Grabbing Page Component: ${error.message}`); log.error(`Error Grabbing Page Component: ${error.message}`);
}
return await grabPageErrorComponent({ return await grabPageErrorComponent({
error, error,
routeParams, routeParams,
is404: error instanceof NotFoundError, is404,
url, url,
}); });
} }

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

@ -1,5 +1,4 @@
import EJSON from "../../../utils/ejson"; import EJSON from "../../../utils/ejson";
import isDevelopment from "../../../utils/is-development";
import { log } from "../../../utils/log"; import { log } from "../../../utils/log";
type Params = { type Params = {
@ -13,28 +12,18 @@ export default function grabPageReactComponentString({
root_file_path, root_file_path,
server_res, server_res,
}: Params): string | undefined { }: Params): string | undefined {
const now = Date.now();
const dev = isDevelopment();
try { try {
const import_suffix = dev ? `?t=${now}` : "";
let tsx = ``; let tsx = ``;
const server_res_json = JSON.stringify( const server_res_json = JSON.stringify(
EJSON.stringify(server_res || {}) ?? "{}", EJSON.stringify(server_res || {}) ?? "{}",
); );
// Import Root from its original source path so that all sub-components
// that import __root (e.g. AppContext) resolve to the same module instance.
// Using the rewritten .bunext/pages/__root would create a separate
// createContext() call, breaking context for any sub-component that
// imports AppContext via a relative path to the source __root.
if (root_file_path) { if (root_file_path) {
tsx += `import Root from "${root_file_path}${import_suffix}"\n`; tsx += `import Root from "${root_file_path}"\n`;
} }
tsx += `import Page from "${file_path}${import_suffix}"\n`; tsx += `import Page from "${file_path}"\n`;
tsx += `export default function Main() {\n\n`; tsx += `export default function Main() {\n\n`;
tsx += `const props = JSON.parse(${server_res_json})\n\n`; tsx += `const props = JSON.parse(${server_res_json})\n\n`;
tsx += ` return (\n`; tsx += ` return (\n`;

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

@ -1,5 +1,8 @@
import isDevelopment from "../../../utils/is-development"; import isDevelopment from "../../../utils/is-development";
import { transform } from "esbuild"; import * as esbuild from "esbuild";
import grabDirNames from "../../../utils/grab-dir-names";
import path from "path";
import tailwindEsbuildPlugin from "./tailwind-esbuild-plugin";
type Params = { type Params = {
tsx: string; tsx: string;
@ -10,86 +13,41 @@ export default async function grabTsxStringModule<T extends any = any>({
}: Params): Promise<T> { }: Params): Promise<T> {
const dev = isDevelopment(); const dev = isDevelopment();
const now = Date.now(); const now = Date.now();
const { BUNX_CWD_MODULE_CACHE_DIR } = grabDirNames();
const target_cache_file_path = path.join(
BUNX_CWD_MODULE_CACHE_DIR,
`server-render-${now}.js`,
);
const final_tsx = dev ? tsx + `\n// v_${now}` : tsx; await esbuild.build({
stdin: {
const result = await transform(final_tsx, { contents: dev ? tsx + `\n// v_${now}` : tsx,
resolveDir: process.cwd(),
loader: "tsx", loader: "tsx",
},
bundle: true,
format: "esm", format: "esm",
jsx: "automatic", target: "es2020",
platform: "node",
external: [
"react",
"react-dom",
"react/jsx-runtime",
"react/jsx-dev-runtime",
],
minify: !dev, minify: !dev,
define: {
"process.env.NODE_ENV": JSON.stringify(
dev ? "development" : "production",
),
},
jsx: "automatic",
outfile: target_cache_file_path,
plugins: [tailwindEsbuildPlugin],
}); });
const blob = new Blob([result.code], { type: "text/javascript" }); Loader.registry.delete(target_cache_file_path);
const url = URL.createObjectURL(blob); const mod = await import(`${target_cache_file_path}?t=${now}`);
const mod = await import(url);
URL.revokeObjectURL(url);
return mod as T; return mod as T;
} }
// const trimmed_file_path = file_path
// .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 Bun.write(src_file_path, tsx);
// const build = await Bun.build({
// entrypoints: [src_file_path],
// format: "esm",
// target: "bun",
// // external: ["react", "react-dom"],
// minify: true,
// define: {
// "process.env.NODE_ENV": JSON.stringify(
// dev ? "development" : "production",
// ),
// },
// metafile: true,
// plugins: [tailwindcss, BunSkipNonBrowserPlugin],
// jsx: {
// runtime: "automatic",
// development: dev,
// },
// outdir: BUNX_CWD_MODULE_CACHE_DIR,
// });
// Loader.registry.delete(out_file_path);
// const module = await import(`${out_file_path}?t=${Date.now()}`);
// 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,
// });