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

c44e7193 — Peter John

add hydrate function

Files changed (7) hide show

packages/cli/index.js +102 -53
packages/example/components/Layout/Layout.jsx +1 -1
packages/example/package.json +1 -1
packages/example/services/todos.service.js +2 -2
packages/runtime/index.js +26 -48
packages/runtime/package.json +1 -0
pnpm-lock.yaml +3 -0

packages/cli/index.js CHANGED Viewed

@@ -62,14 +62,24 @@ const mapDeps = (dir) => {
 const staticDir = path.join(process.cwd(), "build", "static");
+const ensureDir = (d) => {
+  if (!fs.existsSync(d)) {
+    fs.mkdirSync(d, { recursive: true });
+  }
+}
 const createDirs = () => {
   const buildDir = path.join(process.cwd(), "build");
-  // if (fs.existsSync(buildDir)) {
+  ensureDir(buildDir);
-  //   fs.rmSync(buildDir, { recursive: true });
-  // }
-  if (!fs.existsSync(staticDir)) {
+  ensureDir(staticDir);
-    fs.mkdirSync(staticDir, { recursive: true });
-  }
+}
+const recordSize = (buildStart, dest) => {
+  const outLength = fs.statSync(dest).size;
+  const builtTime = ms(Date.now() - buildStart);
+  console.log(
+    `${pc.green("✓ Bundled")} ${dest.replace(process.cwd() + "/", "")} ${pc.cyan(`(${bytes(outLength)})`)} ${pc.gray(`[${builtTime}]`)}`
+  );
 }
 const buildImportMap = async () => {
@@ -111,18 +121,12 @@ const buildRouteMap = () => {
 let generatedCss = ``;
 const cssCache = [];
-const buildServer = async (src, type) => {
+const buildServer = async (options, src, dest, plg) => {
-  const buildStart = Date.now();
-  const shortName = src.replace(process.cwd(), "");
-  const outName = type === "service"
-    ? "/_rpc" + shortName.replace("/services", "").replace(".service.js", "")
-    : shortName.replace("/pages", "").replace("/page.jsx", "") || "/index";
-  const outfile = `${process.cwd()}/build/functions${outName}.js`;
   const result = await esbuild.build({
     bundle: true,
     target: ['es2022'],
     entryPoints: [src],
-    outfile: outfile,
+    outfile: dest,
     format: 'esm',
     keepNames: true,
     external: ["node:*"],
@@ -132,6 +136,7 @@ const buildServer = async (src, type) => {
     // metafile: true,
     jsxDev: !isProd,
     jsx: 'automatic',
+    ...options,
     define: {
       'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`,
       'process.env.PG_CONN_URL': "123",
@@ -141,45 +146,10 @@ const buildServer = async (src, type) => {
         "/static/routemap.json": `${staticDir}/routemap.json`,
         "/static/importmap.json": `${staticDir}/importmap.json`
       }),
-      {
-        name: "parotta-plugin",
-        setup(build) {
-          build.onLoad({ filter: /\\*.page.jsx/, namespace: undefined }, (args) => {
-            const data = fs.readFileSync(args.path);
-            const newSrc = `
-              import { renderPage } from "parotta-runtime";
-              ${data.toString()}
-              export function onRequest(context) {
-                return renderPage(Page, context.request);
-              }
-            `
-            return {
-              contents: newSrc,
-              loader: "jsx",
-            }
-          });
+      plg,
-          build.onLoad({ filter: /\\*.css/, namespace: undefined }, (args) => {
-            if (!cssCache[args.path]) {
-              const css = fs.readFileSync(args.path);
-              generatedCss += css + "\n\n";
-              cssCache[args.path] = true;
-            }
-            return {
-              contents: "",
-              loader: "file",
-            }
-          });
-        }
-      }
     ]
   });
-  // console.log(await analyzeMetafile(result.metafile))
-  const outLength = fs.statSync(outfile).size;
-  const builtTime = ms(Date.now() - buildStart);
-  console.log(
+  return result;
-    `${pc.green("✓ Bundled")} ${outfile.replace(process.cwd() + "/", "")} ${pc.cyan(`(${bytes(outLength)})`)} ${pc.gray(`[${builtTime}]`)}`
-  );
 }
 // const bundleBun = async (r, type) => {
@@ -219,10 +189,89 @@ const main = async () => {
   buildImportMap();
   buildRouteMap();
   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, "page");
+    await buildServer({}, r, outfile, {
+      name: "parotta-page-plugin",
+      setup(build) {
+        build.onLoad({ filter: /\\*.page.jsx/, namespace: undefined }, (args) => {
+          const data = fs.readFileSync(args.path);
+          const newSrc = `
+            import { renderPage } from "parotta-runtime";
+            ${data.toString()}
+            export function onRequest(context) {
+              return renderPage(Page, context.request);
+            }
+          `
+          return {
+            contents: newSrc,
+            loader: "jsx",
+          }
+        });
+        build.onLoad({ filter: /\\*.css/, namespace: undefined }, (args) => {
+          if (!cssCache[args.path]) {
+            const css = fs.readFileSync(args.path);
+            generatedCss += css + "\n\n";
+            cssCache[args.path] = true;
+          }
+          return {
+            contents: "",
+            loader: "file",
+          }
+        });
+      }
+    });
+    recordSize(buildStart, outfile);
   }
   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)) {
-    await buildServer(s, "service");
+      const buildStart = Date.now();
+      const result = await buildServer({ write: false }, s, `build/functions/_rpc${dest}.js`, {
+        name: "parotta-service-plugin",
+        setup(build) {
+          build.onLoad({ filter: /\\*.service.js/, namespace: undefined }, async (args) => {
+            const src = fs.readFileSync(args.path);
+            const newSrc = `
+              ${src.toString()}
+              export const renderApi = async (fn, req) => {
+                const url = new URL(req.url);
+                const params = req.method === "POST" ? await req.json() : Object.fromEntries(url.searchParams);
+                try {
+                  const result = await fn(params);
+                  return new Response(JSON.stringify(result), {
+                    headers: { 'Content-Type': 'application/json' },
+                    status: 200,
+                  });
+                } catch (err) {
+                  const message = err.format ? err.format() : err;
+                  return new Response(JSON.stringify(message), {
+                    headers: { 'Content-Type': 'application/json' },
+                    status: 400,
+                  });
+                }
+              }
+              export function onRequest(context) {
+                return renderApi(${p}, context.request);
+              }
+            `
+            return {
+              contents: newSrc,
+              loader: "js",
+            };
+          });
+        }
+      })
+      ensureDir(`build/functions/_rpc${dest}`)
+      const outfile = `build/functions/_rpc${dest}/${p}.js`;
+      fs.writeFileSync(outfile, result.outputFiles[0].contents);
+      recordSize(buildStart, outfile);
+    }
   }
   bundleCss();
 }

packages/example/components/Layout/Layout.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from "parotta-runtime";
 import "modern-normalize";
-import "nprogress/nprogress.css"
+import "nprogress";
 import "./Layout.css";
 const Layout = ({ children }) => {

packages/example/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "parotta-example",
   "type": "module",
   "scripts": {
-    "dev": "wrangler pages dev static",
+    "dev": "wrangler pages dev static --local --live-reload",
     "build": "parotta build cloudflare",
     "run": "docker run -p 3000:3000 example",
     "test": "bun test",

packages/example/services/todos.service.js CHANGED Viewed

@@ -11,12 +11,12 @@ const todos = pgTable('todos', {
   updatedAt: date('updatedAt'),
 });
-export const createSchema = z.object({
+const createSchema = z.object({
   text: z.string().nonempty("please enter some text"),
   completed: z.boolean(),
 });
-export const updateSchema = z.object({
+const updateSchema = z.object({
   text: z.string().nonempty("please enter some text"),
   completed: z.boolean(),
 });

packages/runtime/index.js CHANGED Viewed

@@ -5,10 +5,12 @@ 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 } from "history";
+import { createMemoryHistory, createBrowserHistory } from "history";
 import { createRouter } from "radix3";
+import nProgress from "nprogress";
 import importmap from '/static/importmap.json' assert {type: 'json'};
 import routemap from '/static/routemap.json' assert {type: 'json'};
@@ -126,7 +128,7 @@ export const RouterContext = createContext(undefined);
 const getMatch = (radixRouter, pathname) => {
   const matchedPage = radixRouter.lookup(pathname);
   if (!matchedPage) {
-    return radixRouter.lookup("_404")
+    return radixRouter.lookup("/static/js/_404.js")
   }
   return matchedPage;
 }
@@ -246,7 +248,7 @@ export const NavLink = ({ children, className, activeClassName, ...props }) => {
  */
 export const renderPage = async (PageComponent, req) => {
   const url = new URL(req.url);
-  const clientRouter = createRouter({
+  const router = createRouter({
     strictTrailingSlash: true,
     routes: Object.keys(routemap).reduce((acc, r) => {
       acc[r] = React.lazy(() => import(`/pages${r}/page.jsx`));
@@ -257,7 +259,6 @@ export const renderPage = async (PageComponent, req) => {
     initialEntries: [url.pathname + url.search],
   });
   const helmetContext = {}
-  const nProgress = { start: () => { }, done: () => { } }
   const stream = await renderToReadableStream(
     _jsxs("html", {
       lang: "en",
@@ -277,7 +278,7 @@ export const renderPage = async (PageComponent, req) => {
         children: [_jsx(App, {
           nProgress,
           history,
-          radixRouter: clientRouter,
+          router,
           rpcCache: {},
           helmetContext,
           PageComponent,
@@ -287,31 +288,9 @@ export const renderPage = async (PageComponent, req) => {
             defer: true,
             dangerouslySetInnerHTML: {
               __html: `
-              import React from "react";
-              import { hydrateRoot } from "react-dom/client";
-              import { createBrowserHistory } from "history";
-              import nProgress from "nprogress";
-              import { createRouter } from "radix3";
-              import { App } from "parotta/runtime";
+              import { hydrateApp } from "parotta-runtime";
-              import routemap from '/static/routemap.json' assert {type: 'json'};
-              // import sheet from './styles.css' assert { type: 'css' };
-              const history = createBrowserHistory();
-              const radixRouter = createRouter({
-                strictTrailingSlash: true,
-                routes: {
-                  ${Object.keys(routemap).map(r => `"${r}": React.lazy(() => import("/pages${r}/page.jsx"))`).join(',\n      ')}
-                },
-              });
-              hydrateRoot(document.body, React.createElement(App, {
-                nProgress,
-                history,
-                radixRouter,
-                rpcCache: {},
+              hydrateApp();
-                helmetContext: {},
-                PageComponent: null,
-              }));`
+              `
             }
           })
         })]
@@ -328,22 +307,21 @@ export const renderPage = async (PageComponent, req) => {
   });
 }
-export const renderApi = async (key, filePath, req) => {
+export const hydrateApp = () => {
+  const history = createBrowserHistory();
-  const url = new URL(req.url);
+  const router = createRouter({
-  const params = req.method === "POST" ? await req.json() : Object.fromEntries(url.searchParams);
-  const funcName = url.pathname.replace(`${key}/`, "");
-  const js = await import(path.join(process.cwd(), filePath));
-  try {
-    const result = await js[funcName](params);
+    strictTrailingSlash: true,
-    return new Response(JSON.stringify(result), {
+    routes: Object.keys(routemap).reduce((acc, r) => {
-      headers: { 'Content-Type': 'application/json' },
+      acc[r] = React.lazy(() => import(`/static/js/${r}.js`));
-      status: 200,
+      return acc;
+    }, {}),
-    });
+  });
+  hydrateRoot(document.body, React.createElement(App, {
+    nProgress,
+    history,
+    router,
-  } catch (err) {
+    rpcCache: {},
-    const message = err.format ? err.format() : err;
-    return new Response(JSON.stringify(message), {
-      headers: { 'Content-Type': 'application/json' },
-      status: 400,
+    helmetContext: {},
+    PageComponent: null,
-    });
+  }));
-  }
 }

packages/runtime/package.json CHANGED Viewed

@@ -9,6 +9,7 @@
   "peerDependencies": {
     "react": "*",
     "react-dom": "*",
+    "nprogress": "*",
     "react-error-boundary": "*",
     "react-helmet-async": "*"
   }

pnpm-lock.yaml CHANGED Viewed

@@ -113,6 +113,9 @@ importers:
       history:
         specifier: ^5.3.0
         version: 5.3.0
+      nprogress:
+        specifier: '*'
+        version: 0.2.0
       radix3:
         specifier: ^1.0.0
         version: 1.0.0

~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