wip: build atri app

Author: cruxcode

packages/atri-app-core/src/prod-entries/loadRoutes.tsx

@@ -6,7 +6,7 @@ import React from "react";
 export function loadRoutes(
   props: Pick<
     ProdAppEntryOptions,
-    "PageWrapper" | "routes" | "styles" | "entryRouteObjectPath"
+    "PageWrapper" | "routes" | "styles" | "entryRouteObjectPath" | "entryPageFC"
   >,
   routerOpts: Parameters<typeof atriRouter.setPages>["1"]
 ) {
@@ -18,7 +18,7 @@ export function loadRoutes(
         element: (
           <FinalPageComponent
             PageWrapper={props.PageWrapper}
-            Page={route.PageFC}
+            Page={props.entryPageFC}
             styleStr={props.styles}
           />
         ),

packages/atri-app-core/src/prod-entries/renderAppOrReturnPageFC.tsx

@@ -15,27 +15,29 @@ declare global {
 window.__APP_STATUS = "started";
 
 export default function renderAppOrReturnPageFC(options: ProdAppEntryOptions) {
-  const { PageWrapper, entryRouteStore, entryRouteObjectPath, routes, styles } =
-    options;
+  const {
+    PageWrapper,
+    entryRouteStore,
+    entryRouteObjectPath,
+    routes,
+    styles,
+    entryPageFC,
+  } = options;
   // add to store
   addPageToStore(entryRouteObjectPath, entryRouteStore);
   if (window.__APP_STATUS === "loaded") {
     // return Page Component
     return (
       <FinalPageComponent
         PageWrapper={PageWrapper}
-        Page={
-          routes.find((curr) => {
-            return curr.path === entryRouteObjectPath;
-          })!.PageFC
-        }
+        Page={entryPageFC}
         styleStr={styles}
       />
     );
   } else {
     // configure rotues here
     loadRoutes(
-      { routes, PageWrapper, styles, entryRouteObjectPath },
+      { routes, PageWrapper, styles, entryRouteObjectPath, entryPageFC },
       { initialEntries: [entryRouteObjectPath], initialIndex: 0 }
     );
     window.__APP_STATUS = "loading";

packages/atri-app-core/src/prod-entries/renderPageServerSide.tsx

@@ -7,21 +7,38 @@ import { renderToString } from "react-dom/server";
 import { createMemoryRouter, RouterProvider } from "react-router-dom";
 import { atriRouter } from "../entries/atriRouter";
 import { loadRoutes } from "./loadRoutes";
+import { addPageToStore } from "./store";
 
 export function renderPageServerSide(
   options: {
     srcs: string[];
     DocFn: React.FC;
-    entryRouteObjectPath: string;
-  } & Pick<ProdAppEntryOptions, "PageWrapper" | "routes" | "styles">
+  } & Pick<
+    ProdAppEntryOptions,
+    | "PageWrapper"
+    | "routes"
+    | "styles"
+    | "entryRouteStore"
+    | "entryRouteObjectPath"
+    | "entryPageFC"
+  >
 ) {
-  const { srcs, PageWrapper, DocFn, routes, entryRouteObjectPath, styles } =
-    options;
+  const {
+    srcs,
+    PageWrapper,
+    DocFn,
+    routes,
+    entryRouteObjectPath,
+    styles,
+    entryRouteStore,
+    entryPageFC,
+  } = options;
   atriRouter.setRouterFactory(createMemoryRouter);
   loadRoutes(
-    { routes, PageWrapper, styles, entryRouteObjectPath },
+    { routes, PageWrapper, styles, entryRouteObjectPath, entryPageFC },
     { initialEntries: [entryRouteObjectPath], initialIndex: 0 }
   );
+  addPageToStore(entryRouteObjectPath, entryRouteStore);
   return renderToString(
     <AtriScriptsContext.Provider value={srcs}>
       <MainAppContext.Provider

packages/atri-app-core/src/types.ts

@@ -123,7 +123,8 @@ export interface LiveApiSocketData {}
 export type RepeatingContextData = { indices: number[]; lengths: number[] };
 
 export type ProdAppEntryOptions = {
-  routes: { path: string; PageFC: React.FC<any> }[];
+  routes: { path: string }[];
+  entryPageFC: React.FC<any>;
   entryRouteObjectPath: string;
   entryRouteStore: {
     custom: { [alias: string]: any };

packages/commands/src/scripts/build-atri-app/createServerEntry.ts

@@ -6,15 +6,21 @@ export async function createServerEntry() {
   const entry: Entry = {
     _error: { import: "./pages/_error" },
   };
-  const pagePaths = await getAllPages();
-  pagePaths.forEach((filepath) => {
-    const entryName = filepath.replace(/^\//, "");
+  const pageInfo = await getAllPages();
+  pageInfo.forEach(({ pagePath, routeObjectPath }) => {
+    const entryName = pagePath.replace(/^\//, "");
     const srcs: string[] = [];
     entry[entryName] = {
       import: `atri-pages-server-loader?${stringify({
-        filepath,
+        pagePath,
         srcs,
-        // TODO: add other options
+        reactRouteObjectPath: routeObjectPath,
+        routes: pageInfo.map(({ routeObjectPath }) => {
+          return { path: routeObjectPath };
+        }),
+        // TODO: add actual style & route stores
+        styles: "",
+        entryRouteStores: {},
       })}!`,
     };
   });

packages/commands/src/scripts/build-atri-app/loaders/atri-pages-server-loader.js

@@ -1,6 +1,13 @@
 function atriPagesServerLoader() {
   const options = this.getOptions();
-  const { srcs, filepath, reactRouteObjectPath, routes, styles } = options;
+  const {
+    srcs,
+    filepath,
+    reactRouteObjectPath,
+    routes,
+    styles,
+    entryRouteStores,
+  } = options;
   if (srcs === undefined || filepath === undefined) {
     const err = Error();
     err.name = "ValueError";
@@ -14,9 +21,15 @@ function atriPagesServerLoader() {
   import { renderPageServerSide } from "@atrilabs/atri-app-core/src/prod-entries/renderPageServerSide";
   
   function renderPage(){
-    return renderPageServerSide({PageFn, PageWrapper, DocFn, srcs: ${JSON.stringify(
+    return renderPageServerSide({entryPageFC: PageFn, PageWrapper, DocFn, srcs: ${JSON.stringify(
       srcs
-    )}, routes, styles, reactRouteObjectPath})
+    )}, routes: ${routes.map((route) => {
+    return { path: route };
+  })}, styles: ${JSON.stringify(
+    styles
+  )}, reactRouteObjectPath: ${JSON.stringify(
+    reactRouteObjectPath
+  )}, entryRouteStores: ${JSON.stringify(entryRouteStores)}})
   }
 
   export default { renderPage };`;

packages/commands/src/scripts/build-atri-app/utils.ts

@@ -1,7 +1,15 @@
-import { readDirStructure } from "@atrilabs/atri-app-core";
+import {
+  dirStructureToIR,
+  pathsIRToRouteObjectPaths,
+  readDirStructure,
+} from "@atrilabs/atri-app-core";
 import path from "path";
 
 export async function getAllPages() {
   const pagePaths = await readDirStructure(path.resolve("pages"));
-  return pagePaths;
+  const irs = dirStructureToIR(pagePaths);
+  const routeObjectPaths = pathsIRToRouteObjectPaths(irs);
+  return pagePaths.map((pagePath, index) => {
+    return { pagePath, routeObjectPath: routeObjectPaths[index] };
+  });
 }