edge-city

git clone https://pyrossh.dev/repos/edge-city.git

edge-city is a next level meta-framework for react that runs only on edge runtimes

fde21b09 — Peter John

init hydration

Files changed (2) hide show

packages/cli/index.js +61 -25
packages/runtime/index.js +45 -50

packages/cli/index.js CHANGED Viewed

@@ -40,10 +40,6 @@ if (!globalThis.firstRun) {
   console.log(`server reloading`);
 }
 const isProd = process.env.NODE_ENV === "production";
-const routes = walkdir.sync(path.join(process.cwd(), "pages"))
-  .filter((p) => p.includes("page.jsx"));
-const services = walkdir.sync(path.join(process.cwd(), "services"))
-  .filter((s) => s.includes(".service.js"))
 const mapDeps = (dir) => {
   return walkdir.sync(path.join(process.cwd(), dir))
@@ -108,11 +104,11 @@ const buildImportMap = async () => {
   fs.writeFileSync(outfile, JSON.stringify(importmap, null, 2));
 }
-const buildRouteMap = () => {
+const buildRouteMap = (routes) => {
   const routemap = routes.reduce((acc, p) => {
     const r = p.replace(process.cwd(), "");
     const key = r.replace("/pages", "").replace("/page.jsx", "")
-    acc[key === "" ? "/" : key] = r;
+    acc[key === "" ? "/" : key] = "/js" + (r.replace("/pages", "").replace("/page.jsx", "") || "/index") + ".js";
     return acc
   }, {});
   const outfile = path.join(staticDir, "routemap.json");
@@ -121,7 +117,7 @@ const buildRouteMap = () => {
 let generatedCss = ``;
 const cssCache = [];
-const buildServer = async (options, src, dest, plg) => {
+const bundleJs = async (options, src, dest, plg) => {
   const result = await esbuild.build({
     bundle: true,
     target: ['es2022'],
@@ -143,8 +139,8 @@ const buildServer = async (options, src, dest, plg) => {
     },
     plugins: [
       resolve({
-        "/static/routemap.json": `${staticDir}/routemap.json`,
+        "/routemap.json": `${staticDir}/routemap.json`,
-        "/static/importmap.json": `${staticDir}/importmap.json`
+        "/importmap.json": `${staticDir}/importmap.json`
       }),
       plg,
     ]
@@ -175,24 +171,15 @@ const buildServer = async (options, src, dest, plg) => {
 //   }
 // }
-const bundleCss = async () => {
+const bundlePages = async () => {
-  const result = await postcss([
-    autoprefixer(),
-    postcssCustomMedia(),
-    postcssNesting,
-  ]).process(generatedCss, { from: "app.css", to: "app.css" });
+  const routes = walkdir.sync(path.join(process.cwd(), "pages"))
-  fs.writeFileSync(`${process.cwd()}/build/static/app.css`, result.toString());
+    .filter((p) => p.includes("page.jsx"));
-}
-const main = async () => {
-  createDirs();
-  buildImportMap();
-  buildRouteMap();
+  buildRouteMap(routes);
   for (const r of routes) {
     const buildStart = Date.now();
     const dest = r.replace(process.cwd(), "").replace("/pages", "").replace("/page.jsx", "") || "/index";
     const outfile = `build/functions${dest}.js`;
-    await buildServer({}, r, outfile, {
+    await bundleJs({}, r, outfile, {
       name: "parotta-page-plugin",
       setup(build) {
         build.onLoad({ filter: /\\*.page.jsx/, namespace: undefined }, (args) => {
@@ -225,12 +212,44 @@ const main = async () => {
     });
     recordSize(buildStart, outfile);
   }
+  for (const r of routes) {
+    const buildStart = Date.now();
+    const dest = r.replace(process.cwd(), "").replace("/pages", "").replace("/page.jsx", "") || "/index";
+    const outfile = `build/static/js${dest}.js`;
+    await bundleJs({}, r, outfile, {
+      name: "parotta-page-js-plugin",
+      setup(build) {
+        build.onLoad({ filter: /\\*.page.jsx/, namespace: undefined }, (args) => {
+          const data = fs.readFileSync(args.path);
+          const newSrc = `
+            import { hydrateApp } from "parotta-runtime";
+            ${data.toString()}
+            const searchParams = new URL(import.meta.url).searchParams;
+            if (searchParams.get("hydrate") === "true") {
+              hydrateApp(Page)
+            }
+          `
+          return {
+            contents: newSrc,
+            loader: "jsx",
+          }
+        });
+      }
+    });
+    recordSize(buildStart, outfile);
+  }
+}
+const bundleServices = async () => {
+  const services = walkdir.sync(path.join(process.cwd(), "services"))
+    .filter((s) => s.includes(".service.js"));
   for (const s of services) {
     const dest = s.replace(process.cwd(), "").replace("/services", "").replace(".service.js", "")
     const pkg = await import(s);
     for (const p of Object.keys(pkg)) {
       const buildStart = Date.now();
-      const result = await buildServer({ write: false }, s, `build/functions/_rpc${dest}.js`, {
+      const result = await bundleJs({ write: false }, s, `build/functions/_rpc${dest}.js`, {
         name: "parotta-service-plugin",
         setup(build) {
           build.onLoad({ filter: /\\*.service.js/, namespace: undefined }, async (args) => {
@@ -273,7 +292,24 @@ const main = async () => {
       recordSize(buildStart, outfile);
     }
   }
+}
+const bundleCss = async () => {
+  const result = await postcss([
+    autoprefixer(),
+    postcssCustomMedia(),
+    postcssNesting,
+  ]).process(generatedCss, { from: "app.css", to: "app.css" });
+  ensureDir(`build/static/css`)
+  fs.writeFileSync(`${process.cwd()}/build/static/css/app.css`, result.toString());
+}
+const main = async () => {
+  createDirs();
+  buildImportMap();
+  await bundlePages();
+  // await bundleServices();
-  bundleCss();
+  await bundleCss();
 }
 main();

packages/runtime/index.js CHANGED Viewed

@@ -4,15 +4,13 @@ import React, {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-import { renderToReadableStream } from "react-dom/server";
-import { hydrateRoot } from "react-dom/client";
 import { HelmetProvider } from 'react-helmet-async';
 import { ErrorBoundary } from "react-error-boundary";
 import { createMemoryHistory, createBrowserHistory } from "history";
 import { createRouter } from "radix3";
 import nProgress from "nprogress";
-import importmap from '/static/importmap.json' assert {type: 'json'};
+import importmap from '/importmap.json' assert {type: 'json'};
-import routemap from '/static/routemap.json' assert {type: 'json'};
+import routemap from '/routemap.json' assert {type: 'json'};
 /**
  * CSR related functions
@@ -125,27 +123,27 @@ export const useMutation = (fn) => {
 export const RouterContext = createContext(undefined);
-const getMatch = (radixRouter, pathname) => {
+const getMatch = (router, pathname) => {
-  const matchedPage = radixRouter.lookup(pathname);
+  const matchedPage = router.lookup(pathname);
   if (!matchedPage) {
-    return radixRouter.lookup("/static/js/_404.js")
+    return router.lookup("/js/_404.js")
   }
   return matchedPage;
 }
 const getCssUrl = (pathname) => `/pages${pathname === "/" ? "" : pathname}/page.css`;
-export const App = ({ nProgress, history, radixRouter, rpcCache, helmetContext, PageComponent }) => {
+export const App = ({ nProgress, history, router, rpcCache, helmetContext, PageComponent }) => {
   const [isPending, startTransition] = useTransition();
   const [match, setMatch] = useState(() => {
     if (PageComponent) {
       return PageComponent;
     }
-    return getMatch(radixRouter, history.location.pathname)
+    return getMatch(router, history.location.pathname)
   });
   useEffect(() => {
     return history.listen(({ location }) => {
-      const href = getCssUrl(location.pathname);
+      // const href = getCssUrl(location.pathname);
       // const isLoaded = Array.from(document.getElementsByTagName("link"))
       //   .map((link) => link.href.replace(window.origin, "")).includes(href);
       // if (!isLoaded) {
@@ -155,24 +153,25 @@ export const App = ({ nProgress, history, radixRouter, rpcCache, helmetContext,
       // link.onload = () => {
       //   nProgress.start();
       //   startTransition(() => {
-      //     setMatch(getMatch(radixRouter, location.pathname));
+      //     setMatch(getMatch(router, location.pathname));
       //   })
       // };
       // link.setAttribute("href", href);
       // document.getElementsByTagName("head")[0].appendChild(link);
       // } else {
-      const link = document.createElement('link');
+      // const link = document.createElement('link');
-      link.setAttribute("rel", "stylesheet");
+      // link.setAttribute("rel", "stylesheet");
-      link.setAttribute("type", "text/css");
+      // link.setAttribute("type", "text/css");
-      link.setAttribute("href", href);
+      // link.setAttribute("href", href);
-      document.getElementsByTagName("head")[0].appendChild(link);
+      // document.getElementsByTagName("head")[0].appendChild(link);
       nProgress.start();
       startTransition(() => {
-        setMatch(getMatch(radixRouter, location.pathname));
+        setMatch(getMatch(router, location.pathname));
       })
       // }
     });
   }, []);
+  console.log("match", match)
   useEffect(() => {
     if (!isPending) {
       nProgress.done();
@@ -228,7 +227,7 @@ export const Link = (props) => {
       if (props && props.onClick) {
         props.onClick(e);
       }
-      router.push(props.href)
+      router.push(props.href);
     },
   })
 }
@@ -247,17 +246,12 @@ export const NavLink = ({ children, className, activeClassName, ...props }) => {
  * SSR related functions
  */
 export const renderPage = async (PageComponent, req) => {
+  const { renderToReadableStream } = await import("react-dom/server");
   const url = new URL(req.url);
-  const router = createRouter({
-    strictTrailingSlash: true,
-    routes: Object.keys(routemap).reduce((acc, r) => {
-      acc[r] = React.lazy(() => import(`/pages${r}/page.jsx`));
-      return acc;
-    }, {}),
-  });
   const history = createMemoryHistory({
     initialEntries: [url.pathname + url.search],
   });
+  const jsScript = url.pathname === "/" ? "index" : url.pathname;
   const helmetContext = {}
   const stream = await renderToReadableStream(
     _jsxs("html", {
@@ -266,7 +260,7 @@ export const renderPage = async (PageComponent, req) => {
         children: [
           _jsx("link", {
             rel: "stylesheet",
-            href: "/app.css"
+            href: "/css/app.css"
           }),
           _jsx("script", {
             type: "importmap",
@@ -274,26 +268,24 @@ export const renderPage = async (PageComponent, req) => {
               __html: JSON.stringify(importmap),
             }
           })]
-      }), _jsxs("body", {
+      }), _jsx("body", {
+        children: _jsxs("div", {
+          id: "root",
-        children: [_jsx(App, {
+          children: [_jsx(App, {
-          nProgress,
+            nProgress,
-          history,
+            history,
-          router,
+            router: null,
-          rpcCache: {},
+            rpcCache: {},
-          helmetContext,
+            helmetContext,
-          PageComponent,
+            PageComponent,
-        }), false && _jsx(_Fragment, {
+          }), _jsx(_Fragment, {
-          children: _jsx("script", {
+            children: _jsx("script", {
-            type: "module",
+              type: "module",
-            defer: true,
+              defer: true,
-            dangerouslySetInnerHTML: {
-              __html: `
-              import { hydrateApp } from "parotta-runtime";
+              src: `/js/${jsScript}.js?hydrate=true`,
-              hydrateApp();
-              `
-            }
-          })
+            })
-        })]
+          })]
+        })
       })]
     }));
   // TODO:
@@ -307,21 +299,24 @@ export const renderPage = async (PageComponent, req) => {
   });
 }
-export const hydrateApp = () => {
+export const hydrateApp = async (Page) => {
+  console.log("hydrating");
+  const { hydrateRoot } = await import("react-dom/client");
   const history = createBrowserHistory();
   const router = createRouter({
     strictTrailingSlash: true,
     routes: Object.keys(routemap).reduce((acc, r) => {
-      acc[r] = React.lazy(() => import(`/static/js/${r}.js`));
+      acc[r] = React.lazy(() => import(routemap[r]));
       return acc;
     }, {}),
   });
+  const root = document.getElementById("root");
-  hydrateRoot(document.body, React.createElement(App, {
+  hydrateRoot(root, React.createElement(App, {
     nProgress,
     history,
     router,
     rpcCache: {},
     helmetContext: {},
-    PageComponent: null,
+    PageComponent: Page,
   }));
 }

~repos /edge-city

git clone https://pyrossh.dev/repos/edge-city.git

edge-city is a next level meta-framework for react that runs only on edge runtimes