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

091ac2e7 — Peter John

improve routing

Files changed (9) hide show

packages/example/bun.lockb +0 -0
packages/example/routes/about/page.jsx +4 -1
packages/example/routes/app.jsx +3 -5
packages/example/routes/page.jsx +1 -0
packages/parotta/bun.lockb +0 -0
packages/parotta/cli.js +62 -64
packages/parotta/package.json +1 -0
packages/parotta/router.js +29 -55
readme.md +5 -0

packages/example/bun.lockb CHANGED Viewed

Binary file

packages/example/routes/about/page.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useRouter } from "parotta/router";
+import { Link, useRouter } from "parotta/router";
 import "./page.css";
 const AboutPage = () => {
@@ -12,6 +12,9 @@ const AboutPage = () => {
           Path: {router.pathname}
         </p>
       </div>
+      <footer>
+        <Link href="/">Back</Link>
+      </footer>
     </div>
   )
 }

packages/example/routes/app.jsx CHANGED Viewed

@@ -1,9 +1,9 @@
 import React, { Suspense } from "react";
 import { SWRConfig } from "swr";
-import { RouterProvider } from "parotta/router";
 import { ErrorBoundary } from "parotta/error";
-const App = ({ routerProps, children }) => {
+const App = ({ children }) => {
+  console.log('app');
   return (
     <SWRConfig value={{
       fallback: {
@@ -14,9 +14,7 @@ const App = ({ routerProps, children }) => {
     }}>
       <ErrorBoundary onError={(err) => console.log(err)} fallback={<p>Oops something went wrong</p>}>
         <Suspense fallback={<p>Loading...</p>}>
-          <RouterProvider value={routerProps}>
-            {children}
+          {children}
-          </RouterProvider>
         </Suspense>
       </ErrorBoundary>
     </SWRConfig>

packages/example/routes/page.jsx CHANGED Viewed

@@ -5,6 +5,7 @@ import Counter from "@/components/Counter/Counter";
 import "./page.css";
 const HomePage = () => {
+  console.log('page');
   // const todo = useAsync('123', () => getData());
   const { data } = useSWR(`https://jsonplaceholder.typicode.com/todos/1`);
   const router = useRouter();

packages/parotta/bun.lockb CHANGED Viewed

Binary file

packages/parotta/cli.js CHANGED Viewed

@@ -1,5 +1,6 @@
 #!/usr/bin/env bun --hot
+import React from 'react';
 import path from 'path';
 import walkdir from 'walkdir';
 import postcss from "postcss"
@@ -7,8 +8,10 @@ import autoprefixer from "autoprefixer";
 import postcssCustomMedia from "postcss-custom-media";
 // import postcssNormalize from 'postcss-normalize';
 import postcssNesting from "postcss-nesting";
+import { createMemoryHistory } from "history";
 import { createRouter } from 'radix3';
 import mimeTypes from "mime-types";
+import { Router } from "./router";
 import { renderToReadableStream } from 'react-dom/server';
 // import { renderToStream } from './render';
@@ -20,7 +23,7 @@ console.log("running in folder:", path.basename(process.cwd()), "env:", process.
 const isProd = process.env.NODE_ENV === "production";
-const mapFiles = ({ includeStatic, includeApi }) => {
+const mapFiles = () => {
   const routes = {};
   const dirs = walkdir.sync(path.join(process.cwd(), "routes"))
     .map((s) => s.replace(process.cwd(), "")
@@ -34,23 +37,19 @@ const mapFiles = ({ includeStatic, includeApi }) => {
       const key = page.route || "/";
       routes[key] = { key: key, page: page.path };
     });
-  if (includeApi) {
-    dirs.filter((p) => p.includes('api.js'))
+  dirs.filter((p) => p.includes('api.js'))
-      .map((s) => s.replace(process.cwd(), ""))
+    .map((s) => s.replace(process.cwd(), ""))
-      .map((s) => ({ path: s, route: s.replace("/api.js", "") }))
+    .map((s) => ({ path: s, route: s.replace("/api.js", "") }))
-      .forEach((api) => {
+    .forEach((api) => {
-        const key = api.route || "/";
+      const key = api.route || "/";
-        routes[key] = routes[key] || { key };
+      routes[key] = routes[key] || { key };
-        routes[key].api = api.path;
+      routes[key].api = api.path;
-      });
+    });
-  }
-  if (includeStatic) {
-    walkdir.sync(path.join(process.cwd(), "static"))
+  walkdir.sync(path.join(process.cwd(), "static"))
-      .map((s) => s.replace(process.cwd(), "").replace("/static", ""))
+    .map((s) => s.replace(process.cwd(), "").replace("/static", ""))
-      .forEach((route) => {
+    .forEach((route) => {
-        routes[route] = { key: route, file: route }
+      routes[route] = { key: route, file: route }
-      });
+    });
-  }
   return routes;
 }
@@ -64,32 +63,20 @@ const mapDeps = (dir) => {
     }, {});
 }
+const mapPages = () => walkdir.sync(path.join(process.cwd(), "routes"))
+  .filter((p) => p.includes('page.jsx'))
-const removeCwd = (s) => s.replace(process.cwd(), "")
+  .map((s) => s.replace(process.cwd(), ""))
+  .map((s) => s.replace("/routes", ""))
+  .map((s) => s.replace("/page.jsx", ""));
-const serverSideRoutes = mapFiles({ includeApi: true, includeStatic: true });
+const serverSideRoutes = mapFiles();
-const clientSideRoutes = mapFiles({ includeApi: false, includeStatic: false });
+const clientSideRoutes = mapPages();
 const radixRouter = createRouter({
   strictTrailingSlash: true,
   routes: serverSideRoutes,
 });
-const hydrateScript = (appPath, pagePath, routerProps) => {
-  return `
-import React from "react";
-import { hydrateRoot } from "react-dom/client";
-import App from "${removeCwd(appPath)}";
-import Page from "${removeCwd(pagePath)}";
-const routerProps = ${JSON.stringify(routerProps)};
-hydrateRoot(document.getElementById("root"), React.createElement(App, {
-  routerProps: routerProps,
-  children: React.createElement(Page, {}),
-}));
-  `;
-}
 const renderApi = async (filePath, req) => {
   const routeImport = await import(path.join(process.cwd(), filePath));
   switch (req.method) {
@@ -116,33 +103,19 @@ const renderApi = async (filePath, req) => {
 }
 const renderPage = async (filePath, url, params) => {
-  const query = {};
-  for (const key of url.searchParams.keys()) {
-    query[key] = url.searchParams.get(key);
-  }
-  const routerProps = {
-    routes: clientSideRoutes,
-    state: {
-      query: query,
-      params: params,
-      pathname: url.pathname,
-    },
-  }
-  const appPath = path.join(process.cwd(), "routes", "app.jsx");
-  const pagePath = path.join(process.cwd(), filePath);
   const packageJson = await import(path.join(process.cwd(), "package.json"));
   const devTag = !isProd ? "?dev" : "";
   const nodeDeps = Object.keys(packageJson.default.dependencies).reduce((acc, dep) => {
     acc[dep] = `https://esm.sh/${dep}@${packageJson.default.dependencies[dep]}`;
     return acc;
   }, {})
-  const App = (await import(appPath)).default;
   const components = mapDeps("components");
   const containers = mapDeps("containers");
   const cssFile = `${filePath.replace("jsx", "css")}`;
   const stream = await renderToReadableStream(
     <html lang="en">
       <head>
+        <title>Parotta</title>
         <link rel="preload" href={cssFile} as="style" />
         <link rel="stylesheet" href={cssFile} />
         <script type="importmap" dangerouslySetInnerHTML={{
@@ -150,11 +123,11 @@ const renderPage = async (filePath, url, params) => {
             {
               "imports": {
                 "radix3": `https://esm.sh/radix3`,
+                "history": "https://esm.sh/history@5.3.0",
-                "react": `https://esm.sh/react@18.2.0`,
+                "react": `https://esm.sh/react@18.2.0${devTag}`,
-                // TODO: need to remove this
+                // TODO: need to remove this in prod
-                "react/jsx-dev-runtime": `https://esm.sh/react@18.2.0/jsx-dev-runtime`,
+                "react/jsx-dev-runtime": `https://esm.sh/react@18.2.0${devTag}/jsx-dev-runtime`,
-                "react-dom/client": `https://esm.sh/react-dom@18.2.0/client`,
+                "react-dom/client": `https://esm.sh/react-dom@18.2.0${devTag}/client`,
-                "react-streaming": "https://esm.sh/react-streaming",
                 // "parotta/router": `https://esm.sh/parotta@${version}/router.js`,
                 // "parotta/error": `https://esm.sh/parotta@${version}/error.js`,
                 "parotta/router": `/parotta/router.js`,
@@ -168,16 +141,41 @@ const renderPage = async (filePath, url, params) => {
         }}>
         </script>
         <script type="module" defer={true} dangerouslySetInnerHTML={{
+          __html: `
+import React from "react";
+import { hydrateRoot } from "react-dom/client";
+import { createBrowserHistory } from "history";
+import { createRouter } from "radix3";
-          __html: hydrateScript(appPath, pagePath, routerProps)
+import { Router } from "parotta/router";
+hydrateRoot(document.getElementById("root"), React.createElement(Router, {
+  App: React.lazy(() => import("/routes/app.jsx")),
+  history: createBrowserHistory(),
+  radixRouter: createRouter({
+    strictTrailingSlash: true,
+    routes: {
+      ${clientSideRoutes.map((r) => `"${r === "" ? "/" : r}": React.lazy(() => import("/routes${r === "" ? "" : r}/page.jsx"))`).join(',\n      ')}
+    },
+  }),
+}));
+        `
         }}></script>
-        <title>
-          Parotta
-        </title>
       </head>
       <body>
         <div id="root">
+          <Router
+            App={React.lazy(() => import(`${process.cwd()}/routes/app.jsx`))}
+            history={createMemoryHistory({
+              initialEntries: [url.pathname + url.search],
+            })}
-          <App routerProps={routerProps}>
+            radixRouter={createRouter({
+              strictTrailingSlash: true,
+              routes: clientSideRoutes.reduce((acc, r) => {
+                acc[r === "" ? "/" : r] = React.lazy(() => import(`${process.cwd()}/routes${r === "" ? "" : r}/page.jsx`));
+                return acc
+              }, {})
+            })}
-          </App>
+          />
         </div>
       </body>
     </html >

packages/parotta/package.json CHANGED Viewed

@@ -4,6 +4,7 @@
   "type": "module",
   "dependencies": {
     "autoprefixer": "^10.4.14",
+    "history": "^5.3.0",
     "mime-types": "2.1.35",
     "postcss": "^8.4.21",
     "postcss-custom-media": "^9.1.2",

packages/parotta/router.js CHANGED Viewed

@@ -1,80 +1,55 @@
-import React, { createContext, useContext, useState, useMemo, useEffect } from "react";
+import React, { createContext, useContext, useState, useEffect } from "react";
-import { createRouter } from 'radix3';
-export const RouterContext = createContext({
+export const RouterContext = createContext(undefined);
-  stack: [],
-  state: {
-    pathname: "",
-    query: {},
-    params: {},
-  }
-});
-const getBasePath = () => typeof window !== "undefined" ? "" : process.cwd();
-export const RouterProvider = ({ value, children }) => {
+export const Router = ({ App, history, radixRouter }) => {
-  const [path, setPath] = useState(value.state.pathname);
+  const [Page, setPage] = useState(radixRouter.lookup(history.location.pathname));
-  const [state, setState] = useState(value.state);
-  const [Page, setPage] = useState();
-  const radixRouter = useMemo(() => createRouter({
-    strictTrailingSlash: true,
-    routes: value.routes,
-  }), [])
   useEffect(() => {
-    window.addEventListener('popstate', function (event) {
+    return history.listen(({ action, location }) => {
-      setPath(location.pathname);
-    }, false);
-  }, [])
-  useEffect(() => {
-    if (path !== value.state.pathname) {
-      let match = radixRouter.lookup(path)
+      const matchedPage = radixRouter.lookup(location.pathname);
-      if (!match) {
+      if (!matchedPage) {
-        match = { page: '/404.jsx' }
+        matchedPage = '/404.jsx';
         console.log('route not matched');
+        setPage(() => <h1> Not found</h1>);
       } else {
-        console.log('route match', match, `${getBasePath()}/routes${match.page}`);
+        console.log('route match', matchedPage);
+        setPage(matchedPage);
       }
-      import(`${getBasePath()}/routes${match.page}`)
-        .then((comp) => {
-          setState({ pathname: path, params: match.params, query: {} });
-          setPage(comp.default);
-        })
+    });
-    } else {
-      setState(value.state);
-      setPage(null);
-    }
-  }, [path])
+  }, [])
+  console.log('Router');
   return React.createElement(RouterContext.Provider, {
-    value: {
+    value: history,
-      stack: [],
-      state,
-      setPath,
+    children: React.createElement(App, {
+      children: React.createElement(Page, {})
-    },
+    }),
-    children: Page || children,
   });
 }
 export const useRouter = () => {
-  const ctx = useContext(RouterContext);
+  const history = useContext(RouterContext);
   return {
+    pathname: history.location.pathname,
+    query: {},
-    ...ctx.state,
+    params: {},
     push: (path) => {
+      history.push(path)
     },
     replace: (path) => {
+      history.replace(path)
     },
-    prefetch: () => {
+    forward: () => {
-    },
-    beforePopState: () => {
+      history.forward();
     },
     back: () => {
+      history.back();
     },
     reload: () => window.location.reload(),
   };
 }
 export const Link = (props) => {
-  const ctx = useContext(RouterContext);
+  const router = useRouter();
   return React.createElement("a", {
     ...props,
     onClick: (e) => {
@@ -82,8 +57,7 @@ export const Link = (props) => {
       if (props && props.onClick) {
         props.onClick(e);
       }
-      history.pushState({}, "", props.href);
-      ctx.setPath(props.href)
+      router.push(props.href);
     },
   })
 }

readme.md CHANGED Viewed

@@ -0,0 +1,5 @@
+# parotta
+parotta is a next level meta-framework for react that runs only on the bun js runtime.
+It uses File system routing with SSR with streaming + CSR as the method to render pages. Basically a MPA + SPA Transitional App.
+It is very opionated and has set of idiomatic ways of doing things.

~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