Fix data fetching

Author: ije

framework/core/route.ts

@@ -7,6 +7,7 @@ export type RouteModule = {
   params: Record<string, string>;
   filename: string;
   defaultExport?: unknown;
+  withData?: boolean;
   data?: unknown;
   dataCacheTtl?: number;
 };

framework/react/context.ts

@@ -12,6 +12,7 @@ export const RouterContext = createContext<RouterContextProps>({
   url: new URL("http://localhost/"),
   params: {},
 });
+RouterContext.displayName = "RouterContext";
 
 export type HttpMethod = "get" | "post" | "put" | "patch" | "delete";
 
@@ -47,6 +48,7 @@ export const DataContext = createContext<DataContextProps>({
   },
   reload: () => Promise.resolve(undefined),
 });
+DataContext.displayName = "DataContext";
 
 export type ForwardPropsContextProps = {
   props: Record<string, unknown>;
@@ -55,3 +57,4 @@ export type ForwardPropsContextProps = {
 export const ForwardPropsContext = createContext<ForwardPropsContextProps>({
   props: {},
 });
+ForwardPropsContext.displayName = "ForwardPropsContext";

framework/react/error.ts

@@ -22,7 +22,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, { error: Error
   }
 }
 
-export function Err({ status, statusText }: { status: number; statusText: string }) {
+export function Err({ status, message }: { status?: number; message: string }) {
   return createElement(
     "div",
     {
@@ -35,8 +35,8 @@ export function Err({ status, statusText }: { status: number; statusText: string
         fontSize: 16,
       },
     },
-    createElement("strong", { style: { fontWeight: "500" } }, status),
-    createElement("small", { style: { color: "#999", padding: "0 6px" } }, "-"),
-    statusText,
+    status && createElement("strong", { style: { fontWeight: "500" } }, status),
+    status && createElement("small", { style: { color: "#999", padding: "0 6px" } }, "-"),
+    message,
   );
 }

framework/react/router.ts

@@ -151,12 +151,13 @@ export const Router: FC<RouterProps> = ({ ssrContext, suspense, createPortal })
         };
         const dataUrl = rmod.url.pathname + rmod.url.search;
         if (filename in routeModules) {
-          rmod.defaultExport = routeModules[filename].defaultExport;
+          Object.assign(rmod, routeModules[filename]);
         } else {
-          const { defaultExport } = await importModule(meta);
-          rmod.defaultExport = defaultExport;
+          const { defaultExport, withData } = await importModule(meta);
+          Object.assign(rmod, { defaultExport, withData });
         }
         if (!dataCache.has(dataUrl) && routeModules[filename]?.withData === true) {
+          rmod.withData = true;
           await prefetchData(dataUrl);
         }
         return rmod;
@@ -207,7 +208,7 @@ export const Router: FC<RouterProps> = ({ ssrContext, suspense, createPortal })
   }, []);
 
   if (modules.length === 0) {
-    return createElement(Err, { status: 404, statusText: "page not found" });
+    return createElement(Err, { status: 404, message: "page not found" });
   }
 
   return createElement(
@@ -227,38 +228,37 @@ export const Router: FC<RouterProps> = ({ ssrContext, suspense, createPortal })
 const RouteRoot: FC<{ modules: RouteModule[]; dataCache: Map<string, RouteData>; ssrContext?: SSRContext }> = (
   { modules, dataCache, ssrContext },
 ) => {
-  const { url, defaultExport } = modules[0];
+  const { url, defaultExport, withData } = modules[0];
   const dataUrl = url.pathname + url.search;
-  const errorHandler: FC<{ error: Error }> = ssrContext?.errorBoundaryHandler ?? global.__ERROR_BOUNDARY_HANDLER ??
-    (({ error }) =>
-      createElement(Err, {
-        status: 500,
-        statusText: error.message,
-      }));
+  const errorHandler: FC<{ error: Error }> = ssrContext?.errorBoundaryHandler ?? global.__ERROR_BOUNDARY_HANDLER ?? Err;
+  const el = typeof defaultExport === "function"
+    ? createElement(
+      defaultExport as FC,
+      null,
+      modules.length > 1 && createElement(
+        RouteRoot,
+        { modules: modules.slice(1), dataCache, ssrContext },
+      ),
+    )
+    : createElement(Err, {
+      status: 400,
+      message: "missing default export as a valid React component",
+    });
 
   return createElement(
     ErrorBoundary,
     { Handler: errorHandler },
-    createElement(
-      DataProvider,
-      {
-        dataCache,
-        dataUrl: dataUrl,
-        key: dataUrl,
-      },
-      typeof defaultExport === "function"
-        ? createElement(
-          defaultExport as FC,
-          null,
-          modules.length > 1
-            ? createElement(RouteRoot, { modules: modules.slice(1), dataCache, ssrContext })
-            : undefined,
-        )
-        : createElement(Err, {
-          status: 400,
-          statusText: "missing default export as a valid React component",
-        }),
-    ),
+    withData
+      ? createElement(
+        DataProvider,
+        {
+          dataCache,
+          dataUrl: dataUrl,
+          key: dataUrl,
+        },
+        el,
+      )
+      : el,
   );
 };
 

server/renderer.ts

@@ -217,14 +217,15 @@ export default {
             element(el: Element) {
               headCollection.forEach((h) => util.isFilledString(h) && el.append(h, { html: true }));
               if (routeModules.length > 0) {
-                const ssrModules = routeModules.map(({ url, params, filename, data, dataCacheTtl }) => {
+                const ssrModules = routeModules.map(({ url, params, filename, withData, data, dataCacheTtl }) => {
                   const suspense = typeof data === "function" ? true : undefined;
                   return {
                     url: url.pathname + url.search,
                     params,
                     filename,
-                    data: suspense ? undefined : data,
+                    withData,
                     suspense,
+                    data: suspense ? undefined : data,
                     dataCacheTtl,
                   };
                 });
@@ -408,6 +409,7 @@ async function initSSR(
           throw new FetchError(500, {}, "No response from data fetcher");
         }
       };
+      rmod.withData = true;
       if (suspense) {
         rmod.data = fetchData;
       } else {