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

a0d404df — Peter John

remove layout

Files changed (18) hide show

bun.lockb +0 -0
pages/layout.css → components/Layout/Layout.css +0 -0
components/Layout/Layout.jsx +19 -0
containers/TodoList/TodoList.jsx +0 -19
main.js +0 -2
package.json +1 -0
pages/{404 → _404}/page.css +0 -0
pages/{404 → _404}/page.jsx +5 -1
pages/_500/page.css +38 -0
pages/_500/page.jsx +19 -0
pages/about/page.jsx +15 -12
pages/layout.jsx +0 -20
pages/page.jsx +3 -2
pages/todos/page.css +1 -1
pages/todos/page.jsx +22 -6
parotta/runtime.js +10 -45
parotta/server.js +16 -29
services/todos.service.js +0 -2

bun.lockb CHANGED Viewed

Binary file

pages/layout.css → components/Layout/Layout.css RENAMED Viewed

File without changes

components/Layout/Layout.jsx ADDED Viewed

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Link } from "parotta/runtime";
+import "./Layout.css";
+const Layout = ({ children }) => {
+  return (
+    <div>
+      <header className="layout-header">
+        <Link href="/about">About us</Link>
+        <Link href="/todos">Todos</Link>
+      </header>
+      <div>
+        {children}
+      </div>
+    </div>
+  )
+}
+export default Layout;

containers/TodoList/TodoList.jsx DELETED Viewed

@@ -1,19 +0,0 @@
-import React from 'react';
-import Todo from "@/components/Todo/Todo";
-import { getTodos } from "@/services/todos.service";
-import { useRpc } from "parotta/runtime";
-const TodoList = () => {
-  const { data } = useRpc(getTodos, {});
-  return (
-    <div className="todo-list">
-      <ul>
-        {data.map((item) => (
-          <Todo key={item.id} todo={item} />
-        ))}
-      </ul>
-    </div>
-  );
-}
-export default TodoList;

main.js CHANGED Viewed

@@ -1,5 +1,3 @@
-import React from "react";
-import ReactDom from "react-dom/server";
 import server from "parotta/server.js";
 export default {

package.json CHANGED Viewed

@@ -17,6 +17,7 @@
     "normalize.css": "^8.0.1",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.4",
     "react-helmet-async": "^1.3.0",
     "sql-highlight": "^4.3.2"
   },

pages/{404 → _404}/page.css RENAMED Viewed

File without changes

pages/{404 → _404}/page.jsx RENAMED Viewed

@@ -1,10 +1,14 @@
 import React from 'react';
+import { Helmet } from 'react-helmet-async';
 import "./page.css";
 const Page = () => {
   return (
     <div>
+      <Helmet>
+        <title>Page not found</title>
+      </Helmet>
-      <h1>404</h1>
+      <h1>404 - Page not found</h1>
       <div className="content">
         <h2>This page could not be found</h2>
       </div>

pages/_500/page.css ADDED Viewed

@@ -0,0 +1,38 @@
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #000;
+  background: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif;
+  height: 100vh;
+  text-align: center;
+  & h1 {
+    display: inline-block;
+    border-right: 1px solid rgba(0, 0, 0, .3);
+    margin: 0;
+    margin-right: 20px;
+    padding: 10px 23px 10px 0;
+    font-size: 24px;
+    font-weight: 500;
+    vertical-align: top;
+  }
+  & .content {
+    display: inline-block;
+    text-align: left;
+    line-height: 49px;
+    height: 49px;
+    vertical-align: middle;
+  }
+  & h2 {
+    font-size: 14px;
+    font-weight: normal;
+    line-height: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}

pages/_500/page.jsx ADDED Viewed

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Helmet } from 'react-helmet-async';
+import "./page.css";
+const Page = () => {
+  return (
+    <div>
+      <Helmet>
+        <title>Oop's Something went wrong</title>
+      </Helmet>
+      <h1>Oop's Something went wrong</h1>
+      <div className="content">
+        <h2>Internal Server Error</h2>
+      </div>
+    </div>
+  )
+}
+export default Page;

pages/about/page.jsx CHANGED Viewed

@@ -1,24 +1,27 @@
 import React from 'react';
 import { Link, useRouter } from "parotta/runtime";
 import { Helmet } from 'react-helmet-async';
+import Layout from '@/components/Layout/Layout';
 import "./page.css";
 export const Page = () => {
   const router = useRouter();
   return (
+    <Layout>
-    <div className="about-page">
+      <div className="about-page">
-      <Helmet>
+        <Helmet>
-        <title>About Page @ {router.pathname}</title>
+          <title>About Page @ {router.pathname}</title>
-        <meta name="description" content="Showcase of using parotta meta-framework." />
+          <meta name="description" content="Showcase of using parotta meta-framework." />
-      </Helmet>
+        </Helmet>
-      <div>
+        <div>
-        <h1>About Page @ {router.pathname}</h1>
+          <h1>About Page @ {router.pathname}</h1>
-        <p>Showcase of using parotta meta-framework.</p>
+          <p>Showcase of using parotta meta-framework.</p>
+        </div>
+        <footer>
+          <Link href="/">Back</Link>
+        </footer>
       </div>
-      <footer>
-        <Link href="/">Back</Link>
-      </footer>
+    </Layout>
-    </div>
   )
 }

pages/layout.jsx DELETED Viewed

@@ -1,20 +0,0 @@
-import React, { Suspense } from 'react';
-import { Link } from "parotta/runtime";
-import { ErrorBoundary } from "parotta/runtime";
-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;

pages/page.jsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { useRouter } from "parotta/runtime";
+import Layout from '@/components/Layout/Layout';
 import Counter from "@/components/Counter/Counter";
 import { Helmet } from 'react-helmet-async';
 import "./page.css";
@@ -10,7 +11,7 @@ const Page = () => {
   }, []);
   return (
-    <div>
+    <Layout>
       <Helmet>
         <title>Parotta App</title>
       </Helmet>
@@ -21,7 +22,7 @@ const Page = () => {
         </p>
         <Counter />
       </div>
-    </div>
+    </Layout>
   )
 }

pages/todos/page.css CHANGED Viewed

@@ -1,4 +1,4 @@
-body{
+body {
   padding: 10px;
   background-color: turquoise;
 }

pages/todos/page.jsx CHANGED Viewed

@@ -1,19 +1,35 @@
 import React, { Suspense } from 'react';
-import TodoList from "@/containers/TodoList/TodoList";
 import { Helmet } from 'react-helmet-async';
+import { useRpc } from "parotta/runtime";
+import Todo from "@/components/Todo/Todo";
+import { getTodos } from "@/services/todos.service";
+import Layout from '@/components/Layout/Layout';
 import "./page.css";
+const TodoList = () => {
+  const { data } = useRpc(getTodos, {});
+  return (
+    <ul>
+      {data.map((item) => (
+        <Todo key={item.id} todo={item} />
+      ))}
+    </ul>
+  )
+}
 const Page = () => {
   return (
-    <div>
+    <Layout>
       <h1>Todos</h1>
       <Helmet>
         <title>Todos Page</title>
       </Helmet>
+      <div>
-      <Suspense fallback={<p>Loading...</p>}>
+        <Suspense fallback="Loading...">
-        <TodoList />
+          <TodoList />
-      </Suspense>
+        </Suspense>
-    </div>
+      </div>
+    </Layout>
   )
 }

parotta/runtime.js CHANGED Viewed

@@ -1,13 +1,11 @@
 import React, {
-  createElement, createContext, useContext, useState, useEffect, useTransition
+  Suspense, createElement, createContext, useContext, useState, useEffect, useTransition
 } from "react";
 import { HelmetProvider } from 'react-helmet-async';
+import { ErrorBoundary } from "react-error-boundary";
 export const domain = () => typeof window !== 'undefined' ? window.origin : "http://0.0.0.0:3000";
-const changedArray = (a = [], b = []) =>
-  a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]))
 export const rpc = (serviceName) => async (params = {}) => {
   const res = await fetch(`${domain()}/services/${serviceName}`, {
     method: "POST",
@@ -64,7 +62,7 @@ export const RouterContext = createContext(undefined);
 const getMatch = (radixRouter, pathname) => {
   const matchedPage = radixRouter.lookup(pathname);
   if (!matchedPage) {
-    return radixRouter.lookup("/404");
+    return React.lazy(() => import("/pages/_404/page.jsx"));
   }
   return matchedPage;
 }
@@ -118,8 +116,13 @@ export const App = ({ nProgress, history, radixRouter, rpcCache, helmetContext }
           history: history,
           params: match.params || {},
         },
+        children: createElement(ErrorBoundary, {
+          onError: (err) => console.log(err),
+          fallback: createElement("p", {}, "Oops something went wrong"),
-        children: createElement(match.Layout, {
+          children: createElement(Suspense, {
+            fallback: createElement("p", {}, "Loading..."),
-          children: createElement(match.Page, {}),
+            children: createElement(match, {}),
+          }),
         }),
       }),
     }),
@@ -167,42 +170,4 @@ export const NavLink = ({ children, className, activeClassName, ...props }) => {
     className: classNames,
     ...props,
   })
-}
-export class ErrorBoundary extends React.Component {
-  // static propTypes = {
-  //   resetKeys: PropTypes.arrayOf(PropTypes.any),
-  // }
-  static getDerivedStateFromError(error) {
-    return { error }
-  }
-  state = {}
-  componentDidCatch(error, info) {
-    this.props.onError?.(error, info)
-  }
-  componentDidUpdate(prevProps, prevState) {
-    const { error } = this.state
-    const { resetKeys } = this.props
-    if (
-      error !== null &&
-      prevState.error !== null &&
-      changedArray(prevProps.resetKeys, resetKeys)
-    ) {
-      this.setState({});
-    }
-  }
-  render() {
-    const { error } = this.state;
-    const { children, fallback } = this.props;
-    if (error) {
-      if (React.isValidElement(fallback)) {
-        return fallback;
-      }
-    }
-    return children;
-  }
 }

parotta/server.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import React from "react";
 import { renderToReadableStream } from "react-dom/server";
 import path from 'path';
-import fs from 'fs';
 import walkdir from 'walkdir';
 import postcss from "postcss"
 import autoprefixer from "autoprefixer";
@@ -29,7 +28,8 @@ const createServerRouter = async () => {
       .replace("/pages", "")
       // .replaceAll("[", ":")
       // .replaceAll("]", "")
-    );
+    )
   walkdir.sync(path.join(process.cwd(), "services"))
     .map((s) => s.replace(process.cwd(), ""))
     .filter((s) => s.includes(".service.js"))
@@ -43,12 +43,6 @@ const createServerRouter = async () => {
       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;
-    });
   walkdir.sync(path.join(process.cwd(), "static"))
     .map((s) => s.replace(process.cwd(), "").replace("/static", ""))
     .forEach((route) => {
@@ -63,21 +57,15 @@ const createServerRouter = async () => {
 const createClientRouter = async () => {
   const routes = await walkdir.sync(path.join(process.cwd(), "pages"))
-    .filter((p) => p.includes('page.jsx'))
+    .filter((p) => p.includes("page.jsx"))
+    .filter((p) => !p.includes("/_"))
     .map((s) => s.replace(process.cwd(), ""))
     .map((s) => s.replace("/pages", ""))
     .map((s) => s.replace("/page.jsx", ""))
     .reduce(async (accp, r) => {
       const acc = await accp;
       const src = await import(`${process.cwd()}/pages${r}/page.jsx`);
-      const exists = fs.existsSync(`${process.cwd()}/pages${r}/layout.jsx`);
-      const lpath = exists ? `/pages${r}/layout.jsx` : `/pages/layout.jsx`;
-      const lsrc = await import(`${process.cwd()}${lpath}`);
-      acc[r === "" ? "/" : r] = {
+      acc[r === "" ? "/" : r] = src.default;
-        Page: src.default,
-        Layout: lsrc.default,
-        LayoutPath: lpath,
-      }
       return acc
     }, Promise.resolve({}));
   // console.log(clientRoutes);
@@ -93,11 +81,7 @@ const createClientRouter = async () => {
     const radixRouter = createRouter({
       strictTrailingSlash: true,
       routes: {
-        ${Object.keys(routes).map((r) => `"${r}": {
-          Page: React.lazy(() => import("/pages${r}/page.jsx")),
+        ${Object.keys(routes).map((r) => `"${r}": React.lazy(() => import("/pages${r}/page.jsx"))`).join(',\n      ')}
-          Layout: React.lazy(() => import("${routes[r].LayoutPath}")),
-          LayoutPath: "${routes[r].LayoutPath}",
-        }`).join(',\n      ')}
       },
     });
@@ -164,7 +148,6 @@ const renderPage = async (url) => {
     return acc;
   }, {})
   const components = mapDeps("components");
-  const containers = mapDeps("containers");
   const importMap = {
     "radix3": `https://esm.sh/radix3`,
     "history": "https://esm.sh/history@5.3.0",
@@ -177,7 +160,6 @@ const renderPage = async (url) => {
     "parotta/runtime": `/parotta/runtime.js`,
     ...nodeDeps,
     ...components,
-    ...containers,
   };
   const history = createMemoryHistory({
     initialEntries: [url.pathname + url.search],
@@ -188,7 +170,6 @@ const renderPage = async (url) => {
     <html lang="en">
       <head>
         <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" />
-        {/* <link id="layoutCss" rel="stylesheet" href={ match.LayoutPath.replace("jsx", "css"),} /> */}
         <link id="pageCss" rel="stylesheet" href={`/pages${url.pathname}/page.css`} />
         <script type="importmap" dangerouslySetInnerHTML={{ __html: JSON.stringify({ "imports": importMap }) }} />
       </head>
@@ -211,8 +192,11 @@ const renderPage = async (url) => {
       </body>
     </html >
   );
+  // TODO:
-  console.log("helmetContext", helmetContext.helmet.title.toString());
+  // if (bot || isCrawler) {
+  //  await stream.allReady
-  console.log("helmetContext", helmetContext.helmet.link.toString());
+  //  add helmetContext to head
+  // }
   return new Response(stream, {
     headers: { 'Content-Type': 'text/html' },
     status: 200,
@@ -311,7 +295,8 @@ const server = async (req) => {
     return renderJs(path.join(process.cwd(), url.pathname));
   }
   const match = serverRouter.lookup(url.pathname);
+  // TODO: maybe remove this as renderPage would handle it in clientRouter
-  if (match) {
+  if (match && !match.key.includes("/_")) {
     if (match.file) {
       return sendFile(path.join(process.cwd(), `/static${match.file}`));
     }
@@ -323,8 +308,10 @@ const server = async (req) => {
     }
   }
   if (req.headers.get("Accept")?.includes('text/html')) {
-    return renderPage(url);
+    // not found html page
+    return renderPage(new URL(`${url.protocol}//${url.host}/_404`));
   }
+  // not found generic page
   return new Response(`{"message": "not found"}`, {
     headers: { 'Content-Type': 'application/json' },
     status: 404,

services/todos.service.js CHANGED Viewed

@@ -2,8 +2,6 @@ import { eq, asc } from 'drizzle-orm';
 import db, { todos } from "@/db";
 export const getTodos = async () => {
-  // console.log("getTodos");
-  // return [];
   return await db.select().from(todos).orderBy(asc(todos.id));
 }

~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