Updates

src/commands/dev/index.ts

@@ -4,11 +4,12 @@ import { log } from "../../utils/log";
 import bunextInit from "../../functions/bunext-init";
 import grabDirNames from "../../utils/grab-dir-names";
 import { rmSync } from "fs";
-import allPagesBunBundler from "../../functions/bundler/all-pages-bun-bundler";
-import allPagesESBuildContextBundler from "../../functions/bundler/all-pages-esbuild-context-bundler";
-import serverPostBuildFn from "../../functions/server/server-post-build-fn";
 
-const { HYDRATION_DST_DIR, BUNX_CWD_PAGES_REWRITE_DIR } = grabDirNames();
+const {
+    HYDRATION_DST_DIR,
+    BUNX_CWD_PAGES_REWRITE_DIR,
+    BUNX_CWD_MODULE_CACHE_DIR,
+} = grabDirNames();
 
 export default function () {
     return new Command("dev")

src/functions/bundler/all-pages-bun-bundler.ts

@@ -129,6 +129,7 @@ export default async function allPagesBunBundler(params?: Params) {
     log.success(`[Built] in ${elapsed}ms`);
 
     global.RECOMPILING = false;
+    global.IS_SERVER_COMPONENT = false;
 
     return artifacts;
 }

src/functions/bundler/all-pages-bundler.ts

@@ -177,6 +177,7 @@ export default async function allPagesBundler(params?: Params) {
     log.success(`[Built] in ${elapsed}ms`);
 
     global.RECOMPILING = false;
+    global.IS_SERVER_COMPONENT = false;
 
     build_starts = 0;
 }

src/functions/bundler/init-pages.ts

@@ -0,0 +1,70 @@
+import grabDirNames from "../../utils/grab-dir-names";
+import isDevelopment from "../../utils/is-development";
+import grabAllPages from "../../utils/grab-all-pages";
+import { log } from "../../utils/log";
+import type { GrabTSXModuleBatchMap } from "../../types";
+import grabPageBundledReactComponent from "../server/web-pages/grab-page-bundled-react-component";
+import grabTsxStringModule from "../server/web-pages/grab-tsx-string-module";
+
+const {} = grabDirNames();
+
+type Params = {
+    log_time?: boolean;
+    debug?: boolean;
+    target_page_file?: string;
+};
+
+export default async function initPages(params?: Params) {
+    const buildStart = performance.now();
+
+    const dev = isDevelopment();
+    const pages = grabAllPages({
+        exclude_api: true,
+    });
+
+    if (params?.log_time) {
+        log.build(`Compiling SSR for ${pages.length} pages ...`);
+    }
+
+    const tsx_map: GrabTSXModuleBatchMap[] = [];
+
+    try {
+        for (let i = 0; i < pages.length; i++) {
+            const page = pages[i];
+            if (
+                params?.target_page_file &&
+                page.local_path !== params.target_page_file
+            ) {
+                continue;
+            }
+
+            const { tsx } =
+                (await grabPageBundledReactComponent({
+                    file_path: page.local_path,
+                    return_tsx_only: true,
+                })) || {};
+
+            if (!tsx) {
+                continue;
+            }
+
+            tsx_map.push({
+                tsx,
+                page_file_path: page.local_path,
+            });
+
+            // const component = await grabPageComponent({
+            //     file_path: page.local_path,
+            //     skip_server_res: true,
+            // });
+        }
+
+        await grabTsxStringModule({ tsx_map });
+    } catch (error) {}
+
+    const elapsed = (performance.now() - buildStart).toFixed(0);
+
+    if (params?.log_time) {
+        log.success(`[SSR Compiled] in ${elapsed}ms`);
+    }
+}

src/functions/bundler/plugins/esbuild-ctx-artifact-tracker.ts

@@ -32,6 +32,7 @@ export default function esbuildCTXArtifactTracker({
                     const error_msg = `Build Failed. Please check all your components and imports.`;
                     log.error(error_msg);
                     global.RECOMPILING = false;
+                    global.IS_SERVER_COMPONENT = false;
                 }
             });
 
@@ -75,6 +76,7 @@ export default function esbuildCTXArtifactTracker({
                 log.success(`[Built] in ${elapsed}ms`);
 
                 global.RECOMPILING = false;
+                global.IS_SERVER_COMPONENT = false;
 
                 build_starts = 0;
             });

src/functions/bunext-init.ts

@@ -16,6 +16,7 @@ import watcherEsbuildCTX from "./server/watcher-esbuild-ctx";
 import allPagesESBuildContextBundler from "./bundler/all-pages-esbuild-context-bundler";
 import serverPostBuildFn from "./server/server-post-build-fn";
 import reactModulesBundler from "./bundler/react-modules-bundler";
+import initPages from "./bundler/init-pages";
 
 /**
  * # Declare Global Variables
@@ -24,6 +25,7 @@ declare global {
     var CONFIG: BunextConfig;
     var SERVER: Server<any> | undefined;
     var RECOMPILING: boolean;
+    var IS_SERVER_COMPONENT: boolean;
     var WATCHER_TIMEOUT: any;
     var ROUTER: FileSystemRouter;
     var HMR_CONTROLLERS: GlobalHMRControllerObject[];
@@ -39,6 +41,7 @@ declare global {
     var DIR_NAMES: ReturnType<typeof grabDirNames>;
     var REACT_IMPORTS_MAP: { imports: Record<string, string> };
     var REACT_DOM_SERVER: any;
+    var REACT_DOM_MODULE_CACHE: Map<string, { main: any; css: string }>;
 }
 
 const dirNames = grabDirNames();
@@ -52,11 +55,12 @@ export default async function bunextInit() {
     global.SKIPPED_BROWSER_MODULES = new Set<string>();
     global.DIR_NAMES = dirNames;
     global.REACT_IMPORTS_MAP = { imports: {} };
+    global.REACT_DOM_MODULE_CACHE = new Map<string, any>();
+
+    log.banner();
 
     await init();
-    // await bunReactModulesBundler();
     await reactModulesBundler();
-    log.banner();
 
     const router = new Bun.FileSystemRouter({
         style: "nextjs",
@@ -68,12 +72,20 @@ export default async function bunextInit() {
     const is_dev = isDevelopment();
 
     if (is_dev) {
+        log.build(`Building Modules ...`);
         await allPagesESBuildContextBundler({
             post_build_fn: serverPostBuildFn,
         });
+        initPages({
+            log_time: true,
+        });
         watcherEsbuildCTX();
     } else {
+        log.build(`Building Modules ...`);
         await allPagesESBuildContextBundler();
+        initPages({
+            log_time: true,
+        });
         cron();
     }
 }

src/functions/init.ts

@@ -13,6 +13,7 @@ export default async function () {
         recursive: true,
         force: true,
     });
+
     rmSync(dirNames.BUNX_CWD_MODULE_CACHE_DIR, {
         recursive: true,
         force: true,

src/functions/server/server-post-build-fn.ts

@@ -1,6 +1,7 @@
 import _ from "lodash";
 import type { GlobalHMRControllerObject } from "../../types";
 import grabPageComponent from "./web-pages/grab-page-component";
+import initPages from "../bundler/init-pages";
 
 export default async function serverPostBuildFn() {
     // if (!global.IS_FIRST_BUNDLE_READY) {
@@ -23,10 +24,12 @@ export default async function serverPostBuildFn() {
 
         const mock_req = new Request(controller.page_url);
 
-        const { serverRes } = await grabPageComponent({
-            req: mock_req,
-            return_server_res_only: true,
-        });
+        const { serverRes } = global.IS_SERVER_COMPONENT
+            ? await grabPageComponent({
+                  req: mock_req,
+                  return_server_res_only: true,
+              })
+            : {};
 
         const final_artifact: Omit<GlobalHMRControllerObject, "controller"> = {
             ..._.omit(controller, ["controller"]),
@@ -58,5 +61,11 @@ export default async function serverPostBuildFn() {
         } catch {
             global.HMR_CONTROLLERS.splice(i, 1);
         }
+
+        global.REACT_DOM_MODULE_CACHE.delete(target_artifact.local_path);
+
+        initPages({
+            target_page_file: target_artifact.local_path,
+        });
     }
 }

src/functions/server/watcher-esbuild-ctx.ts

@@ -4,6 +4,7 @@ import grabDirNames from "../../utils/grab-dir-names";
 import { log } from "../../utils/log";
 import allPagesESBuildContextBundler from "../bundler/all-pages-esbuild-context-bundler";
 import serverPostBuildFn from "./server-post-build-fn";
+import initPages from "../bundler/init-pages";
 
 const { ROOT_DIR } = grabDirNames();
 
@@ -55,6 +56,10 @@ export default async function watcherEsbuildCTX() {
                     if (global.RECOMPILING) return;
                     global.RECOMPILING = true;
 
+                    if (filename.match(/.*\.server\.tsx?/)) {
+                        global.IS_SERVER_COMPONENT = true;
+                    }
+
                     await global.BUNDLER_CTX?.rebuild();
 
                     if (filename.match(/(404|500)\.tsx?/)) {
@@ -133,6 +138,8 @@ async function fullRebuild(params?: { msg?: string }) {
         global.PAGES_SRC_WATCHER.close();
         watcherEsbuildCTX();
     }
+
+    initPages();
 }
 
 function reloadWatcher() {
@@ -140,4 +147,6 @@ function reloadWatcher() {
         global.PAGES_SRC_WATCHER.close();
         watcherEsbuildCTX();
     }
+
+    initPages();
 }

src/functions/server/watcher.ts

@@ -94,6 +94,7 @@ async function fullRebuild(params?: { msg?: string }) {
         log.error(error);
     } finally {
         global.RECOMPILING = false;
+        global.IS_SERVER_COMPONENT = false;
     }
 
     if (global.PAGES_SRC_WATCHER) {

src/functions/server/web-pages/generate-web-html.tsx

@@ -12,7 +12,7 @@ import grabDirNames from "../../../utils/grab-dir-names";
 const { ROOT_DIR } = grabDirNames();
 
 export default async function genWebHTML({
-    component,
+    component: Main,
     pageProps,
     bundledMap,
     module,
@@ -30,7 +30,11 @@ export default async function genWebHTML({
     const is_dev = isDevelopment();
 
     if (debug) {
-        log.info("component", component);
+        log.info("component", Main);
+    }
+
+    if (!Main) {
+        throw new Error(`Main Component not found!`);
     }
 
     const serializedProps = (EJSON.stringify(pageProps || {}) || "{}").replace(
@@ -135,7 +139,7 @@ export default async function genWebHTML({
                     id={ClientRootElementIDName}
                     suppressHydrationWarning={!dev}
                 >
-                    {component}
+                    <Main {...pageProps} />
                 </div>
             </body>
         </html>

src/functions/server/web-pages/grab-page-bundled-react-component.tsx

@@ -2,36 +2,43 @@ import type { GrabPageReactBundledComponentRes } from "../../../types";
 import grabPageReactComponentString from "./grab-page-react-component-string";
 import grabTsxStringModule from "./grab-tsx-string-module";
 import { log } from "../../../utils/log";
+import type { FC } from "react";
+import grabRootFilePath from "./grab-root-file-path";
 
 type Params = {
     file_path: string;
-    root_file_path?: string;
-    server_res?: any;
+    return_tsx_only?: boolean;
 };
 
 export default async function grabPageBundledReactComponent({
     file_path,
-    root_file_path,
-    server_res,
+    return_tsx_only,
 }: Params): Promise<GrabPageReactBundledComponentRes | undefined> {
     try {
+        const { root_file_path } = grabRootFilePath();
+
         let tsx = grabPageReactComponentString({
             file_path,
             root_file_path,
-            server_res,
         });
 
         if (!tsx) {
             return undefined;
         }
 
-        const mod = await grabTsxStringModule({ tsx });
-        const Main = mod.default;
-        const component = <Main />;
+        if (return_tsx_only) {
+            return { tsx };
+        }
+
+        const mod: any = await grabTsxStringModule({
+            tsx,
+            page_file_path: file_path,
+        });
+
+        const Main = mod.default as FC;
 
         return {
-            component,
-            server_res,
+            component: Main,
             tsx,
         };
     } catch (error: any) {

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

@@ -20,6 +20,7 @@ type Params = {
     file_path?: string;
     debug?: boolean;
     return_server_res_only?: boolean;
+    skip_server_res?: boolean;
 };
 
 export default async function grabPageComponent({
@@ -27,6 +28,7 @@ export default async function grabPageComponent({
     file_path: passed_file_path,
     debug,
     return_server_res_only,
+    skip_server_res,
 }: Params): Promise<GrabPageComponentRes> {
     const url = req?.url ? new URL(req.url) : undefined;
     const router = global.ROUTER;
@@ -96,6 +98,7 @@ export default async function grabPageComponent({
                 query: match?.query,
                 routeParams,
                 url,
+                skip_server_res,
             });
 
         return {
@@ -114,6 +117,7 @@ export default async function grabPageComponent({
 
         if (!is404) {
             log.error(`Error Grabbing Page Component: ${error.message}`);
+            log.error(`Page: ${passed_file_path || url?.pathname}`);
         }
 
         return await grabPageErrorComponent({

src/functions/server/web-pages/grab-page-error-component.tsx

@@ -45,9 +45,9 @@ export default async function grabPageErrorComponent({
                 presetComponent
             );
             const Component = default_module.default as FC<any>;
-            const default_jsx = (
-                <Component>{<span>{error.message}</span>}</Component>
-            );
+            const default_jsx: FC = () => {
+                return <Component>{<span>{error.message}</span>}</Component>;
+            };
 
             return {
                 component: default_jsx,
@@ -95,7 +95,7 @@ export default async function grabPageErrorComponent({
         );
 
         return {
-            component: <DefaultNotFound />,
+            component: DefaultNotFound,
             routeParams,
             module: { default: DefaultNotFound },
             serverRes: default_server_res,

src/functions/server/web-pages/grab-page-modules.tsx

@@ -15,6 +15,7 @@ type Params = {
     url?: URL;
     query?: any;
     routeParams?: BunxRouteParams;
+    skip_server_res?: boolean;
 };
 
 export default async function grabPageModules({
@@ -23,6 +24,7 @@ export default async function grabPageModules({
     url,
     query,
     routeParams,
+    skip_server_res,
 }: Params) {
     const now = Date.now();
 
@@ -37,19 +39,19 @@ export default async function grabPageModules({
         log.info(`module:`, module);
     }
 
-    const { serverRes } = await grabPageCombinedServerRes({
-        file_path,
-        debug,
-        query,
-        routeParams,
-        url,
-    });
+    const { serverRes } = skip_server_res
+        ? {}
+        : await grabPageCombinedServerRes({
+              file_path,
+              debug,
+              query,
+              routeParams,
+              url,
+          });
 
     const { component } =
         (await grabPageBundledReactComponent({
             file_path,
-            root_file_path,
-            server_res: serverRes,
         })) || {};
 
     if (!component) {

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

@@ -4,28 +4,28 @@ import { log } from "../../../utils/log";
 type Params = {
     file_path: string;
     root_file_path?: string;
-    server_res?: any;
+    // server_res?: any;
 };
 
 export default function grabPageReactComponentString({
     file_path,
     root_file_path,
-    server_res,
+    // server_res,
 }: Params): string | undefined {
     try {
         let tsx = ``;
 
-        const server_res_json = JSON.stringify(
-            EJSON.stringify(server_res || {}) ?? "{}",
-        );
+        // const server_res_json = JSON.stringify(
+        //     EJSON.stringify(server_res || {}) ?? "{}",
+        // );
 
         if (root_file_path) {
             tsx += `import Root from "${root_file_path}"\n`;
         }
 
         tsx += `import Page from "${file_path}"\n`;
-        tsx += `export default function Main() {\n\n`;
-        tsx += `const props = JSON.parse(${server_res_json})\n\n`;
+        tsx += `export default function Main({...props}) {\n\n`;
+        // tsx += `const props = JSON.parse(${server_res_json})\n\n`;
         tsx += `    return (\n`;
         if (root_file_path) {
             tsx += `        <Root {...props}><Page {...props} /></Root>\n`;

src/functions/server/web-pages/grab-tsx-string-module-deprecated.tsx

@@ -0,0 +1,96 @@
+import isDevelopment from "../../../utils/is-development";
+import * as esbuild from "esbuild";
+
+type Params = {
+    tsx: string;
+};
+
+export default async function grabTsxStringModule<T>({
+    tsx,
+}: Params): Promise<T> {
+    const dev = isDevelopment();
+    const now = Date.now();
+
+    const final_tsx = dev ? tsx + `\n// v_${now}` : tsx;
+
+    const result = await esbuild.transform(final_tsx, {
+        loader: "tsx",
+        format: "esm",
+        jsx: "automatic",
+        minify: !dev,
+    });
+
+    const blob = new Blob([result.code], { type: "text/javascript" });
+    const url = URL.createObjectURL(blob);
+    const mod = await import(url);
+
+    URL.revokeObjectURL(url);
+
+    return mod as T;
+}
+
+// export default async function grabTsxStringModule<T extends any = any>({
+//     tsx,
+// }: Params): Promise<T> {
+//     const dev = isDevelopment();
+
+//     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({
+//         stdin: {
+//             contents: dev ? tsx + `\n// v_${now}` : tsx,
+//             resolveDir: process.cwd(),
+//             loader: "tsx",
+//         },
+//         bundle: true,
+//         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",
+//         outfile: target_cache_file_path,
+//         plugins: [tailwindEsbuildPlugin],
+//     });
+
+//     Loader.registry.delete(target_cache_file_path);
+//     const mod = await import(`${target_cache_file_path}?t=${now}`);
+
+//     return mod as T;
+// }
+
+// if (!dev) {
+//     const now = Date.now();
+
+//     const final_tsx = dev ? tsx + `\n// v_${now}` : tsx;
+
+//     const result = await esbuild.transform(final_tsx, {
+//         loader: "tsx",
+//         format: "esm",
+//         jsx: "automatic",
+//         minify: !dev,
+//     });
+
+//     const blob = new Blob([result.code], { type: "text/javascript" });
+//     const url = URL.createObjectURL(blob);
+//     const mod = await import(url);
+
+//     URL.revokeObjectURL(url);
+
+//     return mod as T;
+// }

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

@@ -3,28 +3,86 @@ import * as esbuild from "esbuild";
 import grabDirNames from "../../../utils/grab-dir-names";
 import path from "path";
 import tailwindEsbuildPlugin from "./tailwind-esbuild-plugin";
+import type {
+    GrabTSXModuleBatchParams,
+    GrabTSXModuleSingleParams,
+} from "../../../types";
+import { existsSync, unlinkSync } from "fs";
+import { log } from "../../../utils/log";
 
-type Params = {
-    tsx: string;
+const { PAGES_DIR, BUNX_CWD_MODULE_CACHE_DIR } = grabDirNames();
+
+type Params = GrabTSXModuleSingleParams | GrabTSXModuleBatchParams;
+
+function toModPath(page_file_path: string) {
+    return path.join(
+        BUNX_CWD_MODULE_CACHE_DIR,
+        page_file_path.replace(PAGES_DIR, "").replace(/\.(t|j)sx?$/, ".js"),
+    );
+}
+
+function isBatch(params: Params): params is GrabTSXModuleBatchParams {
+    return "tsx_map" in params;
+}
+
+type BuildEntriesParams = {
+    entries: { tsx: string; page_file_path: string }[];
+    clean_cache?: boolean;
 };
 
-export default async function grabTsxStringModule<T extends any = any>({
-    tsx,
-}: Params): Promise<T> {
+async function buildEntries({ entries, clean_cache }: BuildEntriesParams) {
     const dev = isDevelopment();
-    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 toBuild: { tsx: string; mod_file_path: string }[] = [];
+
+    for (const entry of entries) {
+        const mod_file_path = toModPath(entry.page_file_path);
+
+        if (
+            !global.REACT_DOM_MODULE_CACHE.has(entry.page_file_path) &&
+            !(await Bun.file(mod_file_path).exists())
+        ) {
+            toBuild.push({
+                tsx: entry.tsx,
+                mod_file_path,
+            });
+        } else {
+            try {
+                if (clean_cache && existsSync(mod_file_path)) {
+                    unlinkSync(mod_file_path);
+                }
+            } catch (error) {}
+        }
+    }
+
+    if (toBuild.length === 0) return;
+
+    const virtualEntries: Record<string, string> = {};
+    for (const { tsx, mod_file_path } of toBuild) {
+        virtualEntries[mod_file_path] = tsx;
+    }
+
+    const virtualPlugin: esbuild.Plugin = {
+        name: "virtual-tsx-entries",
+        setup(build) {
+            const entryPaths = new Set(Object.keys(virtualEntries));
+
+            build.onResolve({ filter: /.*/ }, (args) => {
+                if (entryPaths.has(args.path)) {
+                    return { path: args.path, namespace: "virtual" };
+                }
+            });
+
+            build.onLoad({ filter: /.*/, namespace: "virtual" }, (args) => ({
+                contents: virtualEntries[args.path],
+                resolveDir: process.cwd(),
+                loader: "tsx",
+            }));
+        },
+    };
 
     await esbuild.build({
-        stdin: {
-            contents: dev ? tsx + `\n// v_${now}` : tsx,
-            resolveDir: process.cwd(),
-            loader: "tsx",
-        },
+        entryPoints: Object.keys(virtualEntries),
         bundle: true,
         format: "esm",
         target: "es2020",
@@ -42,12 +100,106 @@ export default async function grabTsxStringModule<T extends any = any>({
             ),
         },
         jsx: "automatic",
-        outfile: target_cache_file_path,
-        plugins: [tailwindEsbuildPlugin],
+        outdir: BUNX_CWD_MODULE_CACHE_DIR,
+        plugins: [virtualPlugin, tailwindEsbuildPlugin],
     });
+}
 
-    Loader.registry.delete(target_cache_file_path);
-    const mod = await import(`${target_cache_file_path}?t=${now}`);
+async function loadEntry<T>(page_file_path: string): Promise<T> {
+    const now = Date.now();
+    const mod_file_path = toModPath(page_file_path);
+    const mod_css_path = mod_file_path.replace(/\.js$/, ".css");
+
+    if (global.REACT_DOM_MODULE_CACHE.has(page_file_path)) {
+        return global.REACT_DOM_MODULE_CACHE.get(page_file_path)?.main as T;
+    }
+
+    const mod = await import(`${mod_file_path}?t=${now}`);
+
+    global.REACT_DOM_MODULE_CACHE.set(page_file_path, {
+        main: mod,
+        css: mod_css_path,
+    });
 
     return mod as T;
 }
+
+export default async function grabTsxStringModule<T>(
+    params: Params,
+): Promise<T | T[]> {
+    if (isBatch(params)) {
+        await buildEntries({ entries: params.tsx_map });
+        return Promise.all(
+            params.tsx_map.map((entry) => loadEntry<T>(entry.page_file_path)),
+        );
+    }
+
+    await buildEntries({ entries: [params], clean_cache: true });
+    return loadEntry<T>(params.page_file_path);
+}
+
+// export default async function grabTsxStringModule<T extends any = any>({
+//     tsx,
+// }: Params): Promise<T> {
+//     const dev = isDevelopment();
+
+//     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({
+//         stdin: {
+//             contents: dev ? tsx + `\n// v_${now}` : tsx,
+//             resolveDir: process.cwd(),
+//             loader: "tsx",
+//         },
+//         bundle: true,
+//         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",
+//         outfile: target_cache_file_path,
+//         plugins: [tailwindEsbuildPlugin],
+//     });
+
+//     Loader.registry.delete(target_cache_file_path);
+//     const mod = await import(`${target_cache_file_path}?t=${now}`);
+
+//     return mod as T;
+// }
+
+// if (!dev) {
+//     const now = Date.now();
+
+//     const final_tsx = dev ? tsx + `\n// v_${now}` : tsx;
+
+//     const result = await esbuild.transform(final_tsx, {
+//         loader: "tsx",
+//         format: "esm",
+//         jsx: "automatic",
+//         minify: !dev,
+//     });
+
+//     const blob = new Blob([result.code], { type: "text/javascript" });
+//     const url = URL.createObjectURL(blob);
+//     const mod = await import(url);
+
+//     URL.revokeObjectURL(url);
+
+//     return mod as T;
+// }

src/types/index.ts

@@ -151,7 +151,7 @@ export type PageDistGenParams = {
 };
 
 export type LivePageDistGenParams = {
-    component: ReactNode;
+    component?: FC;
     pageProps?: any;
     module?: BunextPageModule;
     root_module?: BunextRootModule;
@@ -282,7 +282,7 @@ export type BunextPageModuleMetadata = {
 };
 
 export type GrabPageComponentRes = {
-    component?: JSX.Element;
+    component?: FC;
     serverRes?: BunextPageModuleServerReturn;
     routeParams?: BunxRouteParams;
     bundledMap?: BundlerCTXMap;
@@ -294,7 +294,7 @@ export type GrabPageComponentRes = {
 export type BunextRootModule = BunextPageModule;
 
 export type GrabPageReactBundledComponentRes = {
-    component: JSX.Element;
+    component?: FC;
     server_res?: BunextPageModuleServerReturn;
     tsx?: string;
 };
@@ -330,3 +330,17 @@ export type BunextCacheFileMeta = {
 };
 
 export type BunextRootComponentProps = PropsWithChildren & BunextPageProps;
+
+export type GrabTSXModuleSingleParams = {
+    tsx: string;
+    page_file_path: string;
+};
+
+export type GrabTSXModuleBatchParams = {
+    tsx_map: GrabTSXModuleBatchMap[];
+};
+
+export type GrabTSXModuleBatchMap = {
+    tsx: string;
+    page_file_path: string;
+};