Update HMR. Make page reload when __root.tsx file is changed.

dist/functions/server/web-pages/grab-web-page-hydration-script.js

@@ -25,13 +25,18 @@ export default async function (params) {
     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 += `            console.log("data", data);\n`;
+    script += `            if (data.reload) {\n`;
+    script += `                console.log(\`Root Changes Detected. Reloading Page ...\`);\n`;
+    script += `                window.location.reload();\n`;
+    script += `                return;\n`;
+    script += `            }\n`;
+    script += `            console.log(\`HMR Changes Detected. Updating ...\`);\n`;
     script += `            if (data.page_props) {\n`;
-    script += `                window.${ClientWindowPagePropsName} = data.page_props\n`;
+    script += `                window.${ClientWindowPagePropsName} = data.page_props;\n`;
     script += `            }\n`;
     script += `            const oldCSSLink = document.querySelector('link[rel="stylesheet"]');\n`;
     script += `            if (data.target_map.css_path) {\n`;

dist/functions/server/web-pages/write-hmr-tsx-module.d.ts

@@ -1,7 +0,0 @@
-import type { BundlerCTXMap } from "../../../types";
-type Params = {
-    tsx: string;
-    out_file: string;
-};
-export default function writeHMRTsxModule({ tsx, out_file }: Params): Promise<Pick<BundlerCTXMap, "path" | "css_path" | "hash" | "type"> | undefined>;
-export {};

dist/functions/server/web-pages/write-hmr-tsx-module.js

@@ -1,106 +0,0 @@
-import * as esbuild from "esbuild";
-import tailwindEsbuildPlugin from "./tailwind-esbuild-plugin";
-import path from "path";
-export default async function writeHMRTsxModule({ tsx, out_file }) {
-    try {
-        const build = await esbuild.build({
-            stdin: {
-                contents: tsx,
-                resolveDir: process.cwd(),
-                loader: "tsx",
-            },
-            bundle: true,
-            format: "esm",
-            target: "es2020",
-            platform: "browser",
-            external: [
-                "react",
-                "react-dom",
-                "react/jsx-runtime",
-                "react-dom/client",
-            ],
-            minify: true,
-            jsx: "automatic",
-            outfile: out_file,
-            plugins: [tailwindEsbuildPlugin],
-            metafile: true,
-        });
-        const artifacts = Object.entries(build.metafile.outputs)
-            .filter(([, meta]) => meta.entryPoint)
-            .map(([outputPath, meta]) => {
-            const cssPath = meta.cssBundle || undefined;
-            return {
-                path: outputPath,
-                hash: path.basename(outputPath, path.extname(outputPath)),
-                type: outputPath.endsWith(".css")
-                    ? "text/css"
-                    : "text/javascript",
-                css_path: cssPath,
-            };
-        });
-        return artifacts?.[0];
-    }
-    catch (error) {
-        return undefined;
-    }
-}
-// import * as esbuild from "esbuild";
-// import path from "path";
-// import tailwindEsbuildPlugin from "./tailwind-esbuild-plugin";
-// const hmrExternalsPlugin: esbuild.Plugin = {
-//     name: "hmr-globals",
-//     setup(build) {
-//         const mapping: Record<string, string> = {
-//             react: "__REACT__",
-//             "react-dom": "__REACT_DOM__",
-//             "react-dom/client": "__REACT_DOM_CLIENT__",
-//             "react/jsx-runtime": "__JSX_RUNTIME__",
-//         };
-//         const filter = new RegExp(
-//             `^(${Object.keys(mapping)
-//                 .map((k) => k.replace("/", "\\/"))
-//                 .join("|")})$`,
-//         );
-//         build.onResolve({ filter }, (args) => {
-//             return { path: args.path, namespace: "hmr-global" };
-//         });
-//         build.onLoad({ filter: /.*/, namespace: "hmr-global" }, (args) => {
-//             const globalName = mapping[args.path];
-//             return {
-//                 contents: `module.exports = window.${globalName};`,
-//                 loader: "js",
-//             };
-//         });
-//     },
-// };
-// type Params = {
-//     tsx: string;
-//     file_path: string;
-//     out_file: string;
-// };
-// export default async function writeHMRTsxModule({
-//     tsx,
-//     file_path,
-//     out_file,
-// }: Params) {
-//     try {
-//         await esbuild.build({
-//             stdin: {
-//                 contents: tsx,
-//                 resolveDir: path.dirname(file_path),
-//                 loader: "tsx",
-//             },
-//             bundle: true,
-//             format: "esm",
-//             target: "es2020",
-//             platform: "browser",
-//             minify: true,
-//             jsx: "automatic",
-//             outfile: out_file,
-//             plugins: [hmrExternalsPlugin, tailwindEsbuildPlugin],
-//         });
-//         return true;
-//     } catch (error) {
-//         return false;
-//     }
-// }