refactor: improve Modules Component types for better code readability

Author: LiasCode

packages/pranx/src/cmd/build.ts packages/pranx/src/cmd/build.tsxpackages/pranx/src/cmd/build.ts renamed to packages/pranx/src/cmd/build.tsx

@@ -6,7 +6,6 @@ import { measureTime } from "@/utils/time-perf";
 import fse from "fs-extra";
 import kleur from "kleur";
 import { join } from "pathe";
-import { Fragment, h } from "preact";
 import { renderToStringAsync } from "preact-render-to-string";
 import type {
   AppModule,
@@ -60,13 +59,24 @@ export async function build() {
     api: [],
   };
 
-  let server_entry_module: ServerEntryModule | null = null;
+  const server_entry_module = (await import(
+    server_site_manifest.entry_server
+  )) as ServerEntryModule;
 
-  server_entry_module = (await import(server_site_manifest.entry_server)) as ServerEntryModule;
+  const app_module = (await import(server_site_manifest.app_module)) as AppModule;
 
-  let app_module: AppModule | null = null;
+  if (!server_entry_module.default) {
+    logger.error(new Error("entry-server.{tsx,jsx} should `export default` a valid Component"));
+    process.exit(1);
+  }
+
+  if (!app_module.default) {
+    logger.error(new Error("App.{tsx,jsx} should `export default` a valid Component"));
+    process.exit(1);
+  }
 
-  app_module = (await import(server_site_manifest.app_module)) as AppModule;
+  const AppComponent = app_module.default;
+  const ServerEntryComponent = server_entry_module.default;
 
   // Generating api routes Manifest
   const pranx_server_base_path = join(".pranx", "server");
@@ -289,15 +299,16 @@ export async function build() {
     if (route.rendering_kind === "server-side") continue;
 
     const page_module = (await import(route.absolute_module_path)) as PageModule;
+    const PageComponent = page_module.default;
 
     if (route.static_generated_routes.length > 0) {
       for (const static_route of route.static_generated_routes) {
         const page_prerendered = await renderToStringAsync(
-          h(
-            server_entry_module?.default || Fragment,
-            {},
-            h(app_module.default, {}, h(page_module.default, static_route.props))
-          )
+          <ServerEntryComponent>
+            <AppComponent>
+              <PageComponent {...static_route.props} />
+            </AppComponent>
+          </ServerEntryComponent>
         );
 
         const html = generate_html_template({
@@ -318,11 +329,11 @@ export async function build() {
     }
 
     const page_prerendered = await renderToStringAsync(
-      h(
-        server_entry_module?.default || Fragment,
-        {},
-        h(app_module.default, {}, h(page_module.default, route.props, null))
-      )
+      <ServerEntryComponent>
+        <AppComponent>
+          <PageComponent {...route.props} />
+        </AppComponent>
+      </ServerEntryComponent>
     );
 
     const html = generate_html_template({

…rc/server/runtime/define-ssr-handlers.ts …c/server/runtime/define-ssr-handlers.tsxpackages/pranx/src/server/runtime/define-ssr-handlers.ts renamed to packages/pranx/src/server/runtime/define-ssr-handlers.tsx packages/pranx/src/server/runtime/define-ssr-handlers.ts renamed to packages/pranx/src/server/runtime/define-ssr-handlers.tsx

@@ -5,7 +5,6 @@ import { logger } from "@/log/logger";
 import fse from "fs-extra";
 import { defineHandler, type H3, html } from "h3";
 import { extname, join, resolve } from "pathe";
-import { Fragment, h } from "preact";
 import { renderToStringAsync } from "preact-render-to-string";
 import type {
   AppModule,
@@ -20,11 +19,16 @@ export const define_ssr_handlers = async (server_manifest: SERVER_MANIFEST, app:
   const server_entry_module = (await import(server_manifest.entry_server)) as ServerEntryModule;
   const app_module = (await import(server_manifest.app_module)) as AppModule;
 
+  const AppComponent = app_module.default;
+  const ServerEntryComponent = server_entry_module.default;
+
   for (const route of server_manifest.routes) {
     if (route.rendering_kind !== "server-side") continue;
 
     const file_absolute = resolve(join(OUTPUT_BUNDLE_SERVER_DIR, "pages", route.module));
-    const { default: page, getServerSideProps } = (await import(file_absolute)) as PageModule;
+    const { default: PageComponent, getServerSideProps } = (await import(
+      file_absolute
+    )) as PageModule;
 
     const hydrate_data = (await fse.readJSON(SITE_MANIFEST_OUTPUT_PATH)) as HYDRATE_DATA;
     const url_for_routing_match = filePathToRoutingPath(route.path, false);
@@ -65,11 +69,11 @@ export const define_ssr_handlers = async (server_manifest: SERVER_MANIFEST, app:
         hydrate_data.routes[target_route_index].props = props_to_return;
 
         const page_prerendered = await renderToStringAsync(
-          h(
-            server_entry_module?.default || Fragment,
-            {},
-            h(app_module.default, {}, h(page, props_to_return))
-          )
+          <ServerEntryComponent>
+            <AppComponent>
+              <PageComponent {...props_to_return} />
+            </AppComponent>
+          </ServerEntryComponent>
         );
 
         const html_string = generate_html_template({

packages/pranx/types/index.d.ts

@@ -1,17 +1,17 @@
 import { BuildOptions } from "esbuild";
 import { EventHandlerRequest, H3Event, defineHandler } from "h3";
-import { VNode } from "preact";
+import { ComponentType } from "preact";
 import { PropsWithChildren } from "preact/compat";
 import { useHead } from "unhead";
 
-export type ServerEntryProps = PropsWithChildren;
+export type ServerEntryProps = PropsWithChildren<any>;
 
 export type ServerEntryModule = {
-  default(): VNode<ServerEntryProps>;
+  default: ComponentType;
 };
 
 export type AppModule = {
-  default(): VNode<PropsWithChildren<any>>;
+  default: ComponentType;
 };
 
 // Static
@@ -42,7 +42,7 @@ export type GetServerSidePropsFunction<Props extends Record<string, any> = {}> =
 // Meta
 export type MetaFunction = typeof useHead;
 
-export type Page = VNode<any>;
+export type Page = ComponentType;
 
 export type PageModule = {
   default(): Page;