feat: enhance server-side rendering and context management and initial props load

Author: LiasCode

examples/basic/src/pages/about/about.module.css

@@ -3,4 +3,4 @@
   font-weight: bold;
   font-style: italic;
   color: orange;
-}
+}

examples/basic/src/pages/products/[id]/[name]/page.tsx

@@ -1,18 +1,25 @@
-import { GetStaticPathsFunction } from "pranx";
+import { GetServerSidePropsFunction } from "pranx";
 import { Header } from "src/components/Header";
 
-export default function ProductIdPage() {
+export default function ProductIdPage(props: { id: string; name: string }) {
   return (
     <div>
       <Header />
       <h1>Products id</h1>
+      <div className={"flex flex-col gap-2 font-bold"}>
+        <span>id: {props.id}</span>
+        <span>Name: {props.name}</span>
+      </div>
     </div>
   );
 }
 
-export const getStaticPaths: GetStaticPathsFunction<{ id: string; name: string }> = async () => {
+export const getServerSideProps: GetServerSidePropsFunction<{
+  id: string;
+  name: string;
+}> = async () => {
   return {
-    paths: [{ params: { name: "Pedro", id: "1" } }, { params: { name: "Juan", id: "2" } }],
-    fallback: false,
+    id: Math.random().toFixed(10),
+    name: "Pedro",
   };
 };

examples/basic/src/pages/products/products.css

@@ -1,3 +1,3 @@
 h2 {
   color: blueviolet;
-}
+}

examples/basic/src/styles/styles.css

@@ -1,8 +1,21 @@
 @import "tailwindcss";
 
 body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
   box-sizing: border-box;
   background-color: #0c131a;
   color: #9bafdc;
-}
+}

packages/pranx/src/client/AppContext.tsx

@@ -1,46 +1,52 @@
 import { createContext } from "preact";
 import type { PropsWithChildren } from "preact/compat";
-import { useContext, useState } from "preact/hooks";
+import { useCallback, useContext, useState } from "preact/hooks";
+import { find_current_route } from "./StartApp.js";
 
 export type AppContext = {
   _params: Record<string, string> | null;
   _props: Record<string, any> | null;
   set(key: "params" | "props", data: any): void;
 };
 
-const AppContextInstance = createContext<AppContext>({
+const _app_context = createContext<AppContext>({
   _params: {},
   _props: {},
   set() {},
 });
 
 export const useAppContext = () => {
-  const c = useContext(AppContextInstance);
+  const c = useContext(_app_context);
   if (!c) {
     throw new Error("useAppContext must be used within a AppContextProvider");
   }
   return c;
 };
 
 export const AppContextProvider = (props: PropsWithChildren) => {
-  const [current_props, setCurrentProps] = useState<AppContext["_props"]>(null);
+  const [current_props, setCurrentProps] = useState<AppContext["_props"]>(() => {
+    const current_route = find_current_route();
+    return current_route?.props || null;
+  });
   const [current_params, setCurrentParams] = useState<AppContext["_params"]>(null);
 
+  const set: AppContext["set"] = useCallback((key, data) => {
+    if (key === "params") {
+      setCurrentParams(data);
+    } else {
+      setCurrentProps(data);
+    }
+  }, []);
+
   return (
-    <AppContextInstance.Provider
+    <_app_context.Provider
       value={{
         _params: current_params,
         _props: current_props,
-        set(key, data) {
-          if (key === "params") {
-            setCurrentParams(data);
-          } else {
-            setCurrentProps(data);
-          }
-        },
+        set,
       }}
     >
       {props.children}
-    </AppContextInstance.Provider>
+    </_app_context.Provider>
   );
 };

packages/pranx/src/client/ServerSidePage.tsx

@@ -22,9 +22,7 @@ export const ServerSidePage = (props: PropsWithChildren & { route_data: HydrateD
           signal: abortController.signal,
         });
 
-        setTimeout(() => {
-          set("props", props_result.props);
-        }, 2000);
+        set("props", props_result.props);
       } catch (error) {
         if (!(error instanceof Error)) return;
 
@@ -41,5 +39,5 @@ export const ServerSidePage = (props: PropsWithChildren & { route_data: HydrateD
     props_fetch_handler();
   }, []);
 
-  return cloneElement(child as VNode, _props || props.route_data.props);
+  return cloneElement(child as VNode, _props ?? props.route_data.props);
 };

packages/pranx/src/client/StartApp.tsx

@@ -9,27 +9,13 @@ import { ServerSidePage } from "./ServerSidePage.js";
 let headUsed: ReturnType<typeof useHead> | null = null;
 
 export function StartApp() {
-  const HYDRATE_DATA = window.__PRANX_HYDRATE_DATA__;
-
   return (
     <AppContextProvider>
       <LocationProvider>
         <ErrorBoundary onError={console.error}>
           <Router
             onRouteChange={() => {
-              let current_route: HydrateDataRoute | null = null;
-
-              for (const r of window.__PRANX_HYDRATE_DATA__.routes) {
-                const exec_result = exec_route_match(
-                  window.location.pathname,
-                  r.path_parsed_for_routing
-                );
-
-                if (exec_result) {
-                  current_route = r;
-                  break;
-                }
-              }
+              const current_route = find_current_route();
 
               const head_css_config_links = current_route?.css.map((p) => {
                 return {
@@ -49,7 +35,7 @@ export function StartApp() {
               }
             }}
           >
-            {HYDRATE_DATA.routes.map((r) => {
+            {window.__PRANX_HYDRATE_DATA__.routes.map((r) => {
               const Page = lazy(() => import(r.module));
 
               return (
@@ -92,3 +78,18 @@ export function StartApp() {
     </AppContextProvider>
   );
 }
+
+export const find_current_route = () => {
+  let current_route: HydrateDataRoute | null = null;
+
+  for (const r of window.__PRANX_HYDRATE_DATA__.routes) {
+    const exec_result = exec_route_match(window.location.pathname, r.path_parsed_for_routing);
+
+    if (exec_result) {
+      current_route = r;
+      break;
+    }
+  }
+
+  return current_route;
+};

packages/pranx/src/cmd/start.ts

@@ -38,6 +38,8 @@ export async function start() {
       const file_absolute = resolve(join(OUTPUT_BUNDLE_SERVER_DIR, "pages", route.module));
       const { default: page, getServerSideProps } = (await import(file_absolute)) as PageModule;
 
+      const hydrate_data = (await fse.readJSON(SITE_MANIFEST_OUTPUT_PATH)) as HYDRATE_DATA;
+
       app.on(
         "GET",
         filePathToRoutingPath(route.path, false),
@@ -49,30 +51,30 @@ export async function start() {
             const params = new URLSearchParams(url_parsed.search);
             const return_only_props = Boolean(params.get("props"));
 
-            let props = {};
+            let props_to_return = {};
 
             if (getServerSideProps) {
-              props = await getServerSideProps();
+              props_to_return = await getServerSideProps();
             }
 
             if (return_only_props) {
               return {
-                props,
+                props: props_to_return,
               };
             }
 
-            const hydrate_data = (await fse.readJSON(SITE_MANIFEST_OUTPUT_PATH)) as HYDRATE_DATA;
-
-            const target_route = hydrate_data.routes.find((r) => r.path === route.path);
+            const target_route_index = hydrate_data.routes.findIndex((r) => r.path === route.path);
 
-            if (!target_route) {
+            if (target_route_index === -1 || !hydrate_data.routes[target_route_index]) {
               logger.error(`Route not found in hydrate data: ${route.path}`);
               event.res.status = 500;
               return html(event, "Internal Server Error");
             }
 
+            hydrate_data.routes[target_route_index].props = props_to_return;
+
             const page_prerendered = await renderToStringAsync(
-              h(server_entry_module?.default || Fragment, {}, h(page, props, null))
+              h(server_entry_module?.default || Fragment, {}, h(page, props_to_return, null))
             );
 
             const html_string = generate_html_template({