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

Hydration bugfix

Browse Source
This commit is contained in:
Benjamin Toby 2026-04-08 08:08:27 +01:00
parent 6b7d29bc53
commit ab6fc3be26
8 changed files with 89 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/functions/bundler/grab-client-hydration-script.js vendored
View File

@ -44,7 +44,7 @@ export default async function grabClientHydrationScript({ page_local_path, }) {
txt += ` window.${ClientRootComponentWindowName}.render(component);\n`; txt += ` window.${ClientRootComponentWindowName}.render(component);\n`;
txt += `} else {\n`; txt += `} else {\n`;
txt += ` const root = hydrateRoot(document.getElementById("${ClientRootElementIDName}"), component, { onRecoverableError: () => {\n\n`; txt += ` const root = hydrateRoot(document.getElementById("${ClientRootElementIDName}"), component, { onRecoverableError: () => {\n\n`;
// txt += ` console.log(\`Hydration Error.\`)\n\n`; txt += ` console.log(\`Hydration Error.\`)\n\n`;
txt += ` } });\n\n`; txt += ` } });\n\n`;
txt += ` window.${ClientRootComponentWindowName} = root;\n`; txt += ` window.${ClientRootComponentWindowName} = root;\n`;
txt += ` window.__BUNEXT_RERENDER__ = (NewPage) => {\n`; txt += ` window.__BUNEXT_RERENDER__ = (NewPage) => {\n`;

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

@ -48,34 +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();
// const originalConsole = { Object.assign(console, 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, {
// onError(error: any) {
// if (error.message.includes('unique "key" prop')) return;
// originalConsole.error(error);
// },
// });
// const htmlBody = await new Response(stream).text();
// Object.assign(console, originalConsole);
html += htmlBody; html += htmlBody;
return html; return html;
} }

14
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) {
log.error(`Error Grabbing Page Component: ${error.message}`); const is404 = error instanceof NotFoundError ||
error?.name === "NotFoundError" ||
error?.status === 404;
if (!is404) {
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,
}); });
} }

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

@ -4,9 +4,6 @@ export default function grabPageReactComponentString({ file_path, root_file_path
try { try {
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 directly from the source page files. The generated TSX is
// bundled before execution, which keeps Root, Page, and any __root
// context consumers inside one module graph for SSR.
if (root_file_path) { if (root_file_path) {
tsx += `import Root from "${root_file_path}"\n`; tsx += `import Root from "${root_file_path}"\n`;
} }

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

@ -2,6 +2,7 @@ import isDevelopment from "../../../utils/is-development";
import * as esbuild from "esbuild"; import * as esbuild from "esbuild";
import grabDirNames from "../../../utils/grab-dir-names"; import grabDirNames from "../../../utils/grab-dir-names";
import path from "path"; 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();
@ -29,6 +30,7 @@ export default async function grabTsxStringModule({ tsx, }) {
}, },
jsx: "automatic", jsx: "automatic",
outfile: target_cache_file_path, outfile: target_cache_file_path,
plugins: [tailwindEsbuildPlugin],
}); });
Loader.registry.delete(target_cache_file_path); Loader.registry.delete(target_cache_file_path);
const mod = await import(`${target_cache_file_path}?t=${now}`); const mod = await import(`${target_cache_file_path}?t=${now}`);

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": {

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();
});
});

20
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) {
log.error(`Error Grabbing Page Component: ${error.message}`); const is404 =
error instanceof NotFoundError ||
error?.name === "NotFoundError" ||
error?.status === 404;
if (!is404) {
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,
}); });
} }