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

Compare commits

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

No commits in common. "ab6fc3be266f2f0eff77132006b6fa127965ebed" and "a84ac10b24b1e58b471984fff358a619a82cfa13" have entirely different histories.
ab6fc3be26 ... a84ac10b24

13 changed files with 181 additions and 256 deletions
Show Stats Expand all files Collapse all files

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

@ -10,6 +10,8 @@ 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+/)) {
@ -103,7 +105,7 @@ async function fullRebuild(params) {
watcherEsbuildCTX(); watcherEsbuildCTX();
} }
} }
function reloadWatcher() { function reloadWatcher(params) {
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,34 +48,14 @@ 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;
originalConsole.error(error); console.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;
} }

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

@ -5,11 +5,6 @@ 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;
@ -74,16 +69,11 @@ export default async function grabPageComponent({ req, file_path: passed_file_pa
}; };
} }
catch (error) { catch (error) {
const is404 = error instanceof NotFoundError || log.error(`Error Grabbing Page Component: ${error.message}`);
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, is404: error instanceof NotFoundError,
url, url,
}); });
} }

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

@ -1,13 +1,22 @@
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}"\n`; tsx += `import Root from "${root_file_path}${import_suffix}"\n`;
} }
tsx += `import Page from "${file_path}"\n`; tsx += `import Page from "${file_path}${import_suffix}"\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`;

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

@ -1,38 +1,75 @@
import isDevelopment from "../../../utils/is-development"; import isDevelopment from "../../../utils/is-development";
import * as esbuild from "esbuild"; import { transform } 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 { BUNX_CWD_MODULE_CACHE_DIR } = grabDirNames(); const final_tsx = dev ? tsx + `\n// v_${now}` : tsx;
const target_cache_file_path = path.join(BUNX_CWD_MODULE_CACHE_DIR, `server-render-${now}.js`); const result = await transform(final_tsx, {
await esbuild.build({ loader: "tsx",
stdin: {
contents: dev ? tsx + `\n// v_${now}` : tsx,
resolveDir: process.cwd(),
loader: "tsx",
},
bundle: true,
format: "esm", format: "esm",
target: "es2020",
platform: "node",
external: [
"react",
"react-dom",
"react/jsx-runtime",
"react/jsx-dev-runtime",
],
minify: !dev,
define: {
"process.env.NODE_ENV": JSON.stringify(dev ? "development" : "production"),
},
jsx: "automatic", jsx: "automatic",
outfile: target_cache_file_path, minify: !dev,
plugins: [tailwindEsbuildPlugin],
}); });
Loader.registry.delete(target_cache_file_path); const blob = new Blob([result.code], { type: "text/javascript" });
const mod = await import(`${target_cache_file_path}?t=${now}`); const url = URL.createObjectURL(blob);
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.58", "version": "1.0.57",
"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
View File

@ -1,75 +0,0 @@
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
View File

@ -1,35 +0,0 @@
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,6 +15,9 @@ 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+/)) {
@ -135,7 +138,7 @@ async function fullRebuild(params?: { msg?: string }) {
} }
} }
function reloadWatcher() { function reloadWatcher(params?: { msg?: string }) {
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,40 +143,15 @@ 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;
originalConsole.error(error); console.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;

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

@ -6,14 +6,7 @@ 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;
@ -107,19 +100,12 @@ export default async function grabPageComponent({
root_module, root_module,
}; };
} catch (error: any) { } catch (error: any) {
const is404 = log.error(`Error Grabbing Page Component: ${error.message}`);
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, is404: error instanceof NotFoundError,
url, url,
}); });
} }

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

@ -1,4 +1,5 @@
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 = {
@ -12,18 +13,28 @@ 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}"\n`; tsx += `import Root from "${root_file_path}${import_suffix}"\n`;
} }
tsx += `import Page from "${file_path}"\n`; tsx += `import Page from "${file_path}${import_suffix}"\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`;

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

@ -1,8 +1,5 @@
import isDevelopment from "../../../utils/is-development"; import isDevelopment from "../../../utils/is-development";
import * as esbuild from "esbuild"; import { transform } 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;
@ -13,41 +10,86 @@ 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`,
);
await esbuild.build({ const final_tsx = dev ? tsx + `\n// v_${now}` : tsx;
stdin: {
contents: dev ? tsx + `\n// v_${now}` : tsx, const result = await transform(final_tsx, {
resolveDir: process.cwd(), loader: "tsx",
loader: "tsx",
},
bundle: true,
format: "esm", format: "esm",
target: "es2020",
platform: "node",
external: [
"react",
"react-dom",
"react/jsx-runtime",
"react/jsx-dev-runtime",
],
minify: !dev,
define: {
"process.env.NODE_ENV": JSON.stringify(
dev ? "development" : "production",
),
},
jsx: "automatic", jsx: "automatic",
outfile: target_cache_file_path, minify: !dev,
plugins: [tailwindEsbuildPlugin],
}); });
Loader.registry.delete(target_cache_file_path); const blob = new Blob([result.code], { type: "text/javascript" });
const mod = await import(`${target_cache_file_path}?t=${now}`); const url = URL.createObjectURL(blob);
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,
// });