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

32750419 — Peter John

add layouts

Files changed (8) hide show

packages/create-parotta-app/bun.lockb +0 -0
packages/example/routes/app.jsx +0 -12
packages/example/routes/layout.css +5 -0
packages/example/routes/layout.jsx +20 -0
packages/example/routes/page.jsx +3 -7
packages/example/services/collections.js +1 -0
packages/parotta/cli.js +26 -14
packages/parotta/router.js +29 -21

packages/create-parotta-app/bun.lockb ADDED Viewed

Binary file

packages/example/routes/app.jsx DELETED Viewed

@@ -1,12 +0,0 @@
-import React, { Suspense } from "react";
-import { ErrorBoundary } from "parotta/error";
-export default function App({ children }) {
-  return (
-    <ErrorBoundary onError={(err) => console.log(err)} fallback={<p>Oops something went wrong</p>}>
-      <Suspense fallback={<p>Loading...</p>}>
-        {children}
-      </Suspense>
-    </ErrorBoundary>
-  )
-}

packages/example/routes/layout.css ADDED Viewed

@@ -0,0 +1,5 @@
+.layout-header {
+  & a {
+    margin-right: 20px;
+  }
+}

packages/example/routes/layout.jsx ADDED Viewed

@@ -0,0 +1,20 @@
+import React, { Suspense } from 'react';
+import { Link } from "parotta/router";
+import { ErrorBoundary } from "parotta/error";
+import "./layout.css";
+const Layout = ({ children }) => {
+  return (
+    <ErrorBoundary onError={(err) => console.log(err)} fallback={<p>Oops something went wrong</p>}>
+      <header className="layout-header">
+        <Link href="/about">About us</Link>
+        <Link href="/todos">Todos</Link>
+      </header>
+      <Suspense fallback={<p>Loading...</p>}>
+        {children}
+      </Suspense>
+    </ErrorBoundary>
+  )
+}
+export default Layout;

packages/example/routes/page.jsx CHANGED Viewed

@@ -1,17 +1,17 @@
 import React, { useEffect } from 'react';
-import { Link, useRouter } from "parotta/router";
+import { useRouter } from "parotta/router";
 import { useFetch } from "parotta/fetch";
 import Counter from "@/components/Counter/Counter";
 import "./page.css";
 export const Head = () => {
-  const { data } = useFetch("/todos");
   return (
     <title>Parotta</title>
   )
 }
 export const Body = () => {
+  const router = useRouter();
   const { data, cache } = useFetch("/todos");
   console.log('page');
   console.log('data', data);
@@ -19,8 +19,7 @@ export const Body = () => {
     setTimeout(() => {
       cache.invalidate(/todos/);
     }, 3000)
-  }, [])
+  }, []);
-  const router = useRouter();
   return (
     <div>
       <div>
@@ -30,9 +29,6 @@ export const Body = () => {
         </p>
         <Counter />
       </div>
-      <footer>
-        <Link href="/about">About us</Link>
-      </footer>
     </div>
   )
 }

packages/example/services/collections.js CHANGED Viewed

@@ -4,6 +4,7 @@ const getCollection = (name) => {
     findMany: () => {
       return {
         toArray: async () => {
+          await new Promise((res) => setTimeout(res, 500));
           return items;
         }
       }

packages/parotta/cli.js CHANGED Viewed

@@ -2,6 +2,7 @@
 import React from 'react';
 import path from 'path';
+import fs from 'fs';
 import walkdir from 'walkdir';
 import postcss from "postcss"
 import autoprefixer from "autoprefixer";
@@ -37,6 +38,12 @@ const mapFiles = () => {
       const key = page.route || "/";
       routes[key] = { key: key, page: page.path };
     });
+  dirs.filter((p) => p.includes('layout.jsx'))
+    .map((s) => ({ path: s, route: s.replace("/layout.jsx", "") }))
+    .forEach((item) => {
+      const key = item.route || "/";
+      routes[key].layout = item.path;
+    });
   dirs.filter((p) => p.includes('api.js'))
     .map((s) => s.replace(process.cwd(), ""))
     .map((s) => ({ path: s, route: s.replace("/api.js", "") }))
@@ -77,20 +84,23 @@ const serverRouter = createRouter({
   routes: serverSideRoutes,
 });
-const clientRoutes = clientSideRoutes.reduce((acc, r) => {
+const clientRoutes = await clientSideRoutes.reduce(async (accp, r) => {
+  const acc = await accp;
-  const Head = import(`${process.cwd()}/routes${r === "" ? "" : r}/page.jsx`);
+  const src = await import(`${process.cwd()}/routes${r}/page.jsx`);
-  const Body = import(`${process.cwd()}/routes${r === "" ? "" : r}/page.jsx`);
+  const exists = fs.existsSync(`${process.cwd()}/routes${r}/layout.jsx`);
+  const lpath = exists ? `/routes${r}/layout.jsx` : `/routes/layout.jsx`;
+  const lsrc = await import(`${process.cwd()}${lpath}`);
   acc[r === "" ? "/" : r] = {
+    r,
-    Head,
+    Head: src.Head,
-    Body,
+    Body: src.Body,
+    Layout: lsrc.default,
+    LayoutPath: lpath,
   }
   return acc
-}, {});
+}, Promise.resolve({}));
-for (const k of Object.keys(clientRoutes)) {
+// console.log(clientRoutes);
-  clientRoutes[k].Head = (await clientRoutes[k].Head).Head;
-  clientRoutes[k].Body = (await clientRoutes[k].Body).Body;
-}
 const clientRouter = createRouter({
   strictTrailingSlash: true,
@@ -182,9 +192,11 @@ const history = createBrowserHistory();
 const radixRouter = createRouter({
   strictTrailingSlash: true,
   routes: {
-    ${clientSideRoutes.map((r) => `"${r === "" ? "/" : r}": {
+    ${Object.keys(clientRoutes).map((r) => `"${r === "" ? "/" : r}": {
-      Head: React.lazy(() => import("/routes${r === "" ? "" : r}/page.jsx").then((js) => ({ default: js.Head }))),
+      Head: React.lazy(() => import("/routes${r}/page.jsx").then((js) => ({ default: js.Head }))),
-      Body: React.lazy(() => import("/routes${r === "" ? "" : r}/page.jsx").then((js) => ({ default: js.Body }))),
+      Body: React.lazy(() => import("/routes${r}/page.jsx").then((js) => ({ default: js.Body }))),
+      Layout: React.lazy(() => import("${clientRoutes[r].LayoutPath}")),
+      LayoutPath: "${clientRoutes[r].LayoutPath}",
     }`).join(',\n      ')}
   },
 });
@@ -246,7 +258,7 @@ const renderJs = async (src) => {
   try {
     const jsText = await Bun.file(src).text();
     const result = await transpiler.transform(jsText);
-    const js = result.replaceAll(`import"./page.css";`, "");
+    const js = result.replaceAll(`import"./page.css";`, "").replaceAll(`import"./layout.css";`, "");;
     // TODO
     //.replaceAll("$jsx", "React.createElement");
     return new Response(js, {

packages/parotta/router.js CHANGED Viewed

@@ -1,4 +1,7 @@
+import {
+  Fragment, Suspense, createElement, createContext,
-import React, { createContext, useContext, useState, useEffect, useMemo, useSyncExternalStore } from "react";
+  useContext, useState, useEffect, useMemo, useSyncExternalStore, useTransition
+} from "react";
 import nProgress from "nprogress";
 export const RouterContext = createContext(undefined);
@@ -11,27 +14,32 @@ const getMatch = (radixRouter, pathname) => {
   return matchedPage;
 }
-const getCssUrl = (pathname) => `/routes${pathname === "/" ? "/page.css" : pathname + "/page.css"}`;
+const getCssUrl = (pathname) => `/routes${pathname === "/" ? "" : pathname}`;
 export const Head = ({ history, radixRouter, importMap }) => {
   const pathname = useSyncExternalStore(history.listen, (v) => v ? v.location.pathname : history.location.pathname, () => history.location.pathname);
   const match = getMatch(radixRouter, pathname);
   const initialCss = useMemo(() => getCssUrl(history.location.pathname), []);
-  return React.createElement(React.Fragment, {
+  return createElement(Fragment, {
     children: [
-      React.createElement("link", {
+      createElement("link", {
         rel: "stylesheet",
         href: "https://unpkg.com/nprogress@0.2.0/nprogress.css",
       }),
-      React.createElement("link", {
+      createElement("link", {
+        id: "layoutCss",
+        rel: "stylesheet",
+        href: match.LayoutPath.replace("jsx", "css"),
+      }),
+      createElement("link", {
         id: "pageCss",
         rel: "stylesheet",
-        href: getCssUrl(history.location.pathname),
+        href: getCssUrl(history.location.pathname) + "/page.css",
       }),
-      React.createElement(React.Suspense, {
+      createElement(Suspense, {
-        children: React.createElement(match.Head, {}),
+        children: createElement(match.Head, {}),
       }),
-      React.createElement("script", {
+      createElement("script", {
         id: "importmap",
         type: "importmap",
         dangerouslySetInnerHTML: {
@@ -42,8 +50,8 @@ export const Head = ({ history, radixRouter, importMap }) => {
   });
 }
-export const Body = ({ App, history, radixRouter }) => {
+export const Body = ({ history, radixRouter }) => {
-  const [isPending, startTransition] = React.useTransition();
+  const [isPending, startTransition] = useTransition();
   const [match, setMatch] = useState(() => getMatch(radixRouter, history.location.pathname));
   useEffect(() => {
     return history.listen(({ location }) => {
@@ -63,10 +71,10 @@ export const Body = ({ App, history, radixRouter }) => {
       // link.setAttribute("href", href);
       // document.getElementsByTagName("head")[0].appendChild(link);
       // } else {
-        nProgress.start();
+      nProgress.start();
-        startTransition(() => {
+      startTransition(() => {
-          setMatch(getMatch(radixRouter, location.pathname));
+        setMatch(getMatch(radixRouter, location.pathname));
-        })
+      })
       // }
     });
   }, []);
@@ -76,13 +84,13 @@ export const Body = ({ App, history, radixRouter }) => {
     }
   }, [isPending])
   console.log('Router', isPending);
-  return React.createElement(RouterContext.Provider, {
+  return createElement(RouterContext.Provider, {
     value: {
       history: history,
       params: match.params || {},
     },
-    children: React.createElement(App, {
+    children: createElement(match.Layout, {
-      children: React.createElement(match.Body, {}),
+      children: createElement(match.Body, {}),
     }),
   });
 }
@@ -103,12 +111,12 @@ export const useRouter = () => {
 export const Link = (props) => {
   const router = useRouter();
-  return React.createElement("a", {
+  return createElement("a", {
     ...props,
     onMouseOver: (e) => {
       // Simple prefetching for now will work only with cache headers
-      fetch(getCssUrl(props.href));
+      // fetch(getCssUrl(props.href));
-      fetch(getCssUrl(props.href).replace("css", "jsx"));
+      // fetch(getCssUrl(props.href).replace("css", "jsx"));
     },
     onClick: (e) => {
       e.preventDefault();

~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