diff --git a/dist/functions/bundler/grab-client-hydration-script.js b/dist/functions/bundler/grab-client-hydration-script.js index e4c0b7c..dd0026a 100644 --- a/dist/functions/bundler/grab-client-hydration-script.js +++ b/dist/functions/bundler/grab-client-hydration-script.js @@ -8,34 +8,12 @@ export default function grabClientHydrationScript({ page_local_path }) { const { ClientRootElementIDName, ClientRootComponentWindowName } = grabConstants(); const root_component_path = path.join(PAGES_DIR, `${AppNames["RootPagesComponentName"]}.tsx`); const does_root_exist = existsSync(root_component_path); - // let txt = ``; - // txt += `import { hydrateRoot } from "react-dom/client";\n`; - // if (does_root_exist) { - // txt += `import Root from "${root_component_path}";\n`; - // } - // txt += `import Page from "${page.local_path}";\n\n`; - // txt += `const pageProps = window.__PAGE_PROPS__ || {};\n`; - // if (does_root_exist) { - // txt += `const component = \n`; - // } else { - // txt += `const component = \n`; - // } - // txt += `const root = hydrateRoot(document.getElementById("${ClientRootElementIDName}"), component);\n\n`; - // txt += `window.${ClientRootComponentWindowName} = root;\n`; let txt = ``; - // txt += `import * as React from "react";\n`; - // txt += `import * as ReactDOM from "react-dom";\n`; - // txt += `import * as ReactDOMClient from "react-dom/client";\n`; - // txt += `import * as JSXRuntime from "react/jsx-runtime";\n`; txt += `import { hydrateRoot, createElement } from "react-dom/client";\n`; if (does_root_exist) { txt += `import Root from "${root_component_path}";\n`; } txt += `import Page from "${page_local_path}";\n\n`; - // txt += `window.__REACT__ = React;\n`; - // txt += `window.__REACT_DOM__ = ReactDOM;\n`; - // txt += `window.__REACT_DOM_CLIENT__ = ReactDOMClient;\n`; - // txt += `window.__JSX_RUNTIME__ = JSXRuntime;\n\n`; txt += `const pageProps = window.__PAGE_PROPS__ || {};\n`; if (does_root_exist) { txt += `const component = \n`; @@ -55,13 +33,5 @@ export default function grabClientHydrationScript({ page_local_path }) { txt += ` root.render();\n`; txt += ` };\n`; txt += `}\n`; - // // HMR re-render helper - // if (does_root_exist) { - // txt += `window.__BUNEXT_RERENDER__ = (NewPage) => {\n`; - // txt += ` const props = window.__PAGE_PROPS__ || {};\n`; - // txt += ` root.render();\n`; - // txt += `};\n`; - // } else { - // } return txt; } diff --git a/dist/functions/server/bunext-req-handler.js b/dist/functions/server/bunext-req-handler.js index f670fef..175c86b 100644 --- a/dist/functions/server/bunext-req-handler.js +++ b/dist/functions/server/bunext-req-handler.js @@ -1,4 +1,3 @@ -import grabAppPort from "../../utils/grab-app-port"; import handleWebPages from "./web-pages/handle-web-pages"; import handleRoutes from "./handle-routes"; import isDevelopment from "../../utils/is-development"; diff --git a/dist/functions/server/web-pages/generate-web-html.js b/dist/functions/server/web-pages/generate-web-html.js index adc3325..e810f17 100644 --- a/dist/functions/server/web-pages/generate-web-html.js +++ b/dist/functions/server/web-pages/generate-web-html.js @@ -36,7 +36,7 @@ export default async function genWebHTML({ component, pageProps, bundledMap, hea html += ` \n`; } if (isDevelopment()) { - html += `\n`; + html += `\n`; } if (headHTML) { html += ` ${headHTML}\n`; diff --git a/dist/functions/server/web-pages/grab-web-page-hydration-script.d.ts b/dist/functions/server/web-pages/grab-web-page-hydration-script.d.ts index 94fd282..202113e 100644 --- a/dist/functions/server/web-pages/grab-web-page-hydration-script.d.ts +++ b/dist/functions/server/web-pages/grab-web-page-hydration-script.d.ts @@ -2,5 +2,5 @@ import type { BundlerCTXMap } from "../../../types"; type Params = { bundledMap?: BundlerCTXMap; }; -export default function ({ bundledMap }: Params): Promise; +export default function (params?: Params): Promise; export {}; diff --git a/dist/functions/server/web-pages/grab-web-page-hydration-script.js b/dist/functions/server/web-pages/grab-web-page-hydration-script.js index 5460992..0aa622c 100644 --- a/dist/functions/server/web-pages/grab-web-page-hydration-script.js +++ b/dist/functions/server/web-pages/grab-web-page-hydration-script.js @@ -1,27 +1,31 @@ import { AppData } from "../../../data/app-data"; -export default async function ({ bundledMap }) { +export default async function (params) { let script = ""; script += `console.log(\`Development Environment\`);\n\n`; + script += `const _ce = console.error.bind(console);\n`; + script += `console.error = (...args) => {\n`; + script += ` if (typeof args[0] === "string" && args[0].includes("hydrat")) return;\n`; + script += ` _ce(...args);\n`; + script += `};\n\n`; + script += `function __bunext_show_error(message, source, stack) {\n`; + script += ` const existing = document.getElementById("__bunext_error_overlay");\n`; + script += ` if (existing) existing.remove();\n`; + script += ` const overlay = document.createElement("div");\n`; + script += ` overlay.id = "__bunext_error_overlay";\n`; + script += ` overlay.style.cssText = "position:fixed;inset:0;z-index:99999;background:#1a1a1a;color:#ff6b6b;font-family:monospace;font-size:14px;padding:24px;overflow:auto;";\n`; + script += ` overlay.innerHTML = \`
Runtime Error
\${message}
\${source ? \`
\${source}
\` : ""}\${stack ? \`
\${stack}
\` : ""}
\`;\n`; + script += ` document.body.appendChild(overlay);\n`; + script += `}\n\n`; + script += `window.addEventListener("error", (e) => __bunext_show_error(e.message, e.filename ? e.filename + ":" + e.lineno + ":" + e.colno : "", e.error?.stack ?? ""));\n`; + script += `window.addEventListener("unhandledrejection", (e) => __bunext_show_error(String(e.reason?.message ?? e.reason), "", e.reason?.stack ?? ""));\n\n`; script += `const hmr = new EventSource("/__hmr");\n`; script += `window.addEventListener("beforeunload", () => hmr.close());\n`; script += `hmr.addEventListener("update", async (event) => {\n`; script += ` if (event?.data) {\n`; script += ` console.log(\`HMR Changes Detected. Updating ...\`);\n`; script += ` try {\n`; + script += ` document.getElementById("__bunext_error_overlay")?.remove();\n`; script += ` const data = JSON.parse(event.data);\n`; - // script += ` console.log("data", data);\n`; - // script += ` const modulePath = \`/\${data.target_map.path}\`;\n\n`; - // script += ` const modulePath = \`/${AppData["ClientHMRPath"]}?href=\${window.location.href}&t=\${Date.now()}\`;\n\n`; - // script += ` console.log("Fetching updated module ...", modulePath);\n\n`; - // script += ` const newModule = await import(modulePath);\n\n`; - // script += ` console.log("newModule", newModule);\n\n`; - // script += ` if (window.__BUNEXT_RERENDER__ && newModule.default) {\n`; - // script += ` window.__BUNEXT_RERENDER__(newModule.default);\n`; - // script += ` console.log(\`HMR: Component updated in-place\`);\n`; - // script += ` } else {\n`; - // script += ` console.warn(\`HMR: No re-render helper found, falling back to reload\`);\n`; - // // script += ` window.location.reload();\n`; - // script += ` }\n\n`; script += ` if (data.target_map.css_path) {\n`; script += ` const oldLink = document.querySelector('link[rel="stylesheet"]');\n`; script += ` const newLink = document.createElement("link");\n`; @@ -49,62 +53,3 @@ export default async function ({ bundledMap }) { script += `});\n`; return script; } -// import grabDirNames from "../../../utils/grab-dir-names"; -// import type { BundlerCTXMap, PageDistGenParams } from "../../../types"; -// const { BUNX_HYDRATION_SRC_DIR } = grabDirNames(); -// type Params = { -// bundledMap?: BundlerCTXMap; -// }; -// export default async function ({ bundledMap }: Params) { -// let script = ""; -// // script += `import React from "react";\n`; -// // script += `import { hydrateRoot } from "react-dom/client";\n`; -// // script += `import App from "${page_file}";\n`; -// // script += `declare global {\n`; -// // script += ` interface Window {\n`; -// // script += ` ${ClientWindowPagePropsName}: any;\n`; -// // script += ` }\n`; -// // script += `}\n`; -// // script += `let root: any = null;\n\n`; -// // script += `const component = ;\n\n`; -// // script += `const container = document.getElementById("${ClientRootElementIDName}");\n\n`; -// // script += `if (container) {\n`; -// // script += ` root = hydrateRoot(container, component);\n`; -// // script += `}\n\n`; -// script += `console.log(\`Development Environment\`);\n`; -// // script += `console.log(import.meta);\n`; -// // script += `if (import.meta.hot) {\n`; -// // script += ` console.log(\`HMR active\`);\n`; -// // script += ` import.meta.hot.dispose(() => {\n`; -// // script += ` console.log("dispose");\n`; -// // script += ` });\n`; -// // script += `}\n`; -// script += `const hmr = new EventSource("/__hmr");\n`; -// script += `hmr.addEventListener("update", async (event) => {\n`; -// // script += ` console.log(\`HMR even received:\`, event);\n`; -// script += ` if (event.data) {\n`; -// script += ` console.log(\`HMR Changes Detected. Reloading ...\`);\n`; -// // script += ` console.log("event", event);\n`; -// // script += ` console.log("window.${ClientRootComponentWindowName}", window.${ClientRootComponentWindowName});\n\n`; -// // script += ` const event_data = JSON.parse(event.data);\n\n`; -// // script += ` const new_js_path = \`/\${event_data.target_map.path}\`;\n\n`; -// // script += ` console.log("event_data", event_data);\n\n`; -// // script += ` console.log("new_js_path", new_js_path);\n\n`; -// // script += ` if (window.${ClientRootComponentWindowName}) {\n`; -// // script += ` const new_component = await import(new_js_path);\n`; -// // script += ` window.${ClientRootComponentWindowName}.render(new_component);\n`; -// // script += ` }\n`; -// // script += ` import("${page_file}?t=" + event.data.update).then((module) => {\n`; -// // script += ` root.render(module.default);\n`; -// // script += ` })\n`; -// // script += ` console.log("root", root);\n`; -// // script += ` root.unmount();\n`; -// // script += ` const container = document.getElementById("${ClientRootElementIDName}");\n\n`; -// // script += ` root = hydrateRoot(container!, component);\n`; -// // script += ` window.history.pushState({ page: 1 }, "New Page Title", \`\${window.location.pathname}?v=\${Date.now()}\`);\n`; -// // script += ` root.render(component);\n`; -// script += ` window.location.reload();\n`; -// script += ` }\n`; -// script += ` });\n`; -// return script; -// } diff --git a/package.json b/package.json index 489c1c5..5ab754b 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@moduletrace/bunext", "module": "index.ts", "type": "module", - "version": "1.0.5", + "version": "1.0.6", "main": "dist/index.js", "bin": { "bunext": "dist/commands/index.js" @@ -14,7 +14,7 @@ ], "scripts": { "dev": "tsc --watch", - "publish": "tsc --noEmit && tsc && git add . && git commit -m 'Update Package.json.' && git push", + "publish": "tsc --noEmit && tsc && git add . && git commit -m 'Update Version' && git push", "compile": "bun build ./src/commands/index.ts --compile --outfile bin/bunext", "build": "tsc" },