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

3acb86f1 — Peter John

use head and body

Files changed (17) hide show

packages/create-parotta-app/index.js +31 -0
packages/create-parotta-app/package.json +16 -0
packages/example/containers/TodoList/TodoList.jsx +1 -1
packages/example/jsconfig.json +1 -2
packages/example/routes/404/page.css +1 -1
packages/example/routes/404/page.jsx +11 -7
packages/example/routes/about/page.css +6 -1
packages/example/routes/about/page.jsx +2 -2
packages/example/routes/page.css +0 -3
packages/example/routes/page.jsx +3 -3
packages/example/routes/todos/:id/page.css +1 -8
packages/example/routes/todos/:id/page.jsx +9 -3
packages/example/routes/todos/page.css +1 -8
packages/example/routes/todos/page.jsx +8 -3
packages/parotta/cli.js +14 -16
packages/parotta/router.js +22 -21
readme.md +3 -1

packages/create-parotta-app/index.js ADDED Viewed

@@ -0,0 +1,31 @@
+#!/usr/bin/env bun
+import { Command } from 'commander';
+import path from 'path';
+import fs from 'fs';
+import os from 'os';
+import chalk from 'chalk';
+import gunzip from 'gunzip-file';
+import packageJson from './package.json'
+process.on('SIGINT', () => process.exit(0))
+process.on('SIGTERM', () => process.exit(0))
+let projectPath = "";
+const program = new Command(packageJson.name)
+  .version(packageJson.version)
+  .arguments('<project-directory>')
+  .usage(`${chalk.green('<project-directory>')} [options]`)
+  .action((name) => {
+    projectPath = name
+  })
+// program.parse();
+const tmpDir = os.tmpdir();
+console.log('tmpDir', tmpDir);
+const tmpFile = path.join(tmpDir, "main.zip");
+const res = await fetch("https://github.com/pyrossh/parotta/archive/refs/heads/main.zip");
+await Bun.write(tmpFile, res);
+await gunzip(tmpFile, os.tmpdir());

packages/create-parotta-app/package.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "name": "create-parotta-app",
+  "version": "0.1.0",
+  "type": "module",
+  "dependencies": {
+    "chalk": "^5.2.0",
+    "commander": "10.0.0",
+    "extract-files": "^13.0.0",
+    "gunzip-file": "^0.1.1",
+    "tar": "^6.1.13",
+    "unzip": "^0.1.11"
+  },
+  "bin": {
+    "parotta": "./index.js"
+  }
+}

packages/example/containers/TodoList/TodoList.jsx CHANGED Viewed

@@ -7,7 +7,7 @@ const todos = [
 ];
 const TodoList = () => {
-  // const { data: todos } = usePromise("/todos");
+  // const { data: todos } = useFetch("/todos");
   return (
     <div className="todo-list">
       <h1>Todos</h1>

packages/example/jsconfig.json CHANGED Viewed

@@ -7,7 +7,6 @@
     },
     // TODO these options are not supported
     "jsx": "react",
-    "jsxFactory": "React.createElement",
+    "jsxFactory": "React.createElement"
-    "jsxImportSource": "react"
   }
 }

packages/example/routes/404/page.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.notfound-page {
+body {
   display: flex;
   flex-direction: column;
   align-items: center;

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

@@ -1,14 +1,18 @@
 import React from 'react';
 import "./page.css";
-export default function Page() {
+export const Head = () => {
   return (
-    <div className="notfound-page">
+    <title>Page not found</title>
+  )
+}
+export const Body = () => {
+  return (
-      <div>
+    <div>
-        <h1>404</h1>
+      <h1>404</h1>
-        <div className="content">
+      <div className="content">
-          <h2>This page could not be found</h2>
+        <h2>This page could not be found</h2>
-        </div>
       </div>
     </div>
   )

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

@@ -1,5 +1,10 @@
-.about-page {
+body {
+  margin: 0;
   padding: 20px;
   padding-bottom: 130px;
   background-color: violet;
+  & footer {
+    margin-top: 100px;
+  }
 }

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

@@ -2,13 +2,13 @@ import React from 'react';
 import { Link, useRouter } from "parotta/router";
 import "./page.css";
-export function Head() {
+export const Head = () => {
   return (
     <title>About us</title>
   )
 }
-export default function Page() {
+export const Body = () => {
   const router = useRouter();
   return (
     <div className="about-page">

packages/example/routes/page.css CHANGED Viewed

@@ -1,8 +1,5 @@
 body {
   margin: 0;
-}
-.home-page {
   padding: 20px;
   margin: 0;
   background-color: turquoise;

packages/example/routes/page.jsx CHANGED Viewed

@@ -4,14 +4,14 @@ import { useFetch } from "parotta/fetch";
 import Counter from "@/components/Counter/Counter";
 import "./page.css";
-export function Head() {
+export const Head = () => {
   const { data } = useFetch("/todos");
   return (
     <title>Parotta</title>
   )
 }
-export default function Page() {
+export const Body = () => {
   const { data, cache } = useFetch("/todos");
   console.log('page');
   console.log('data', data);
@@ -22,7 +22,7 @@ export default function Page() {
   }, [])
   const router = useRouter();
   return (
-    <div className="home-page">
+    <div>
       <div>
         <h1>Home Page</h1>
         <p>

packages/example/routes/todos/:id/page.css CHANGED Viewed

@@ -1,11 +1,4 @@
-.home-page {
+.body{
   padding: 10px;
   background-color: turquoise;
-  & .count {
-    color: black;
-    padding: 40px;
-    font-size: 30px;
-    font-weight: 600;
-  }
 }

packages/example/routes/todos/:id/page.jsx CHANGED Viewed

@@ -1,14 +1,20 @@
 import { Suspense } from "react";
 import { Link, useRouter } from "parotta/router";
 import { useFetch } from "parotta/fetch";
-// import "./index.css";
-export default function Page() {
+export const Head = () => {
+  const { params } = useRouter();
+  return (
+    <title>Todo: {params.id}</title>
+  )
+}
+export const Body = () => {
   const { params } = useRouter();
   const data = useFetch(`/todos/${params.id}`);
   console.log('data', data);
   return (
-    <div className="todos-page">
+    <div>
       <h1>Todo no: {params.id}</h1>
     </div>
   )

packages/example/routes/todos/page.css CHANGED Viewed

@@ -1,11 +1,4 @@
-.home-page {
+body{
   padding: 10px;
   background-color: turquoise;
-  & .count {
-    color: black;
-    padding: 40px;
-    font-size: 30px;
-    font-weight: 600;
-  }
 }

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

@@ -1,10 +1,15 @@
 import { Suspense } from "react";
 import TodoList from "@/containers/TodoList/TodoList";
-// import "./index.css";
-export default function Page() {
+export const Head = () => {
   return (
-    <div className="todos-page">
+    <title>Todos</title>
+  )
+}
+export const Body = () => {
+  return (
+    <div>
       <h1>Todos</h1>
       {/* <Suspense>
         <TodoList todos={todos} />

packages/parotta/cli.js CHANGED Viewed

@@ -11,7 +11,7 @@ import postcssNesting from "postcss-nesting";
 import { createMemoryHistory } from "history";
 import { createRouter } from 'radix3';
 import mimeTypes from "mime-types";
-import { Header, Router } from "./router";
+import { Head, Body } from "./router";
 import { renderToReadableStream } from 'react-dom/server';
 // import { renderToStream } from './render';
@@ -79,17 +79,17 @@ const serverRouter = createRouter({
 const clientRoutes = clientSideRoutes.reduce((acc, r) => {
   const Head = import(`${process.cwd()}/routes${r === "" ? "" : r}/page.jsx`);
-  const Page = import(`${process.cwd()}/routes${r === "" ? "" : r}/page.jsx`);
+  const Body = import(`${process.cwd()}/routes${r === "" ? "" : r}/page.jsx`);
   acc[r === "" ? "/" : r] = {
     Head,
-    Page,
+    Body,
   }
   return acc
 }, {});
 for (const k of Object.keys(clientRoutes)) {
   clientRoutes[k].Head = (await clientRoutes[k].Head).Head;
-  clientRoutes[k].Page = (await clientRoutes[k].Page).default;
+  clientRoutes[k].Body = (await clientRoutes[k].Body).Body;
 }
 const clientRouter = createRouter({
@@ -156,20 +156,18 @@ const renderPage = async (url) => {
   const stream = await renderToReadableStream(
     <html lang="en">
       <head>
-        <Header
+        <Head
           history={history}
           radixRouter={clientRouter}
           importMap={importMap}
         />
       </head>
       <body>
-        <div id="page">
-          <Router
+        <Body
-            App={React.lazy(() => import(`${process.cwd()}/routes/app.jsx`))}
+          App={React.lazy(() => import(`${process.cwd()}/routes/app.jsx`))}
-            history={history}
+          history={history}
-            radixRouter={clientRouter}
+          radixRouter={clientRouter}
-          />
+        />
-        </div>
         {config.hydrate &&
           <>
             <script type="module" defer={true} dangerouslySetInnerHTML={{
@@ -178,7 +176,7 @@ import React from "react";
 import { hydrateRoot } from "react-dom/client";
 import { createBrowserHistory } from "history";
 import { createRouter } from "radix3";
-import { Header, Router } from "parotta/router";
+import { Head, Body } from "parotta/router";
 const history = createBrowserHistory();
 const radixRouter = createRouter({
@@ -186,17 +184,17 @@ const radixRouter = createRouter({
   routes: {
     ${clientSideRoutes.map((r) => `"${r === "" ? "/" : r}": {
       Head: React.lazy(() => import("/routes${r === "" ? "" : r}/page.jsx").then((js) => ({ default: js.Head }))),
-      Page: React.lazy(() => import("/routes${r === "" ? "" : r}/page.jsx")),
+      Body: React.lazy(() => import("/routes${r === "" ? "" : r}/page.jsx").then((js) => ({ default: js.Body }))),
     }`).join(',\n      ')}
   },
 });
-hydrateRoot(document.head, React.createElement(Header, {
+hydrateRoot(document.head, React.createElement(Head, {
   history,
   radixRouter,
 }))
-hydrateRoot(document.getElementById("page"), React.createElement(Router, {
+hydrateRoot(document.body, React.createElement(Body, {
   App: React.lazy(() => import("/routes/app.jsx")),
   history,
   radixRouter,

packages/parotta/router.js CHANGED Viewed

@@ -13,7 +13,7 @@ const getMatch = (radixRouter, pathname) => {
 const getCssUrl = (pathname) => `/routes${pathname === "/" ? "/page.css" : pathname + "/page.css"}`;
-export const Header = ({ history, radixRouter, importMap }) => {
+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), []);
@@ -24,8 +24,9 @@ export const Header = ({ history, radixRouter, importMap }) => {
         href: "https://unpkg.com/nprogress@0.2.0/nprogress.css",
       }),
       React.createElement("link", {
+        id: "pageCss",
         rel: "stylesheet",
-        href: initialCss,
+        href: getCssUrl(history.location.pathname),
       }),
       React.createElement(React.Suspense, {
         children: React.createElement(match.Head, {}),
@@ -41,32 +42,32 @@ export const Header = ({ history, radixRouter, importMap }) => {
   });
 }
-export const Router = ({ App, history, radixRouter }) => {
+export const Body = ({ App, history, radixRouter }) => {
   const [isPending, startTransition] = React.useTransition();
   const [match, setMatch] = useState(() => getMatch(radixRouter, 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"))
+      // const isLoaded = Array.from(document.getElementsByTagName("link"))
-        .map((link) => link.href.replace(window.origin, "")).includes(href);
+      //   .map((link) => link.href.replace(window.origin, "")).includes(href);
-      if (!isLoaded) {
+      // if (!isLoaded) {
-        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.onload = () => {
+      // link.onload = () => {
-          nProgress.start();
+      //   nProgress.start();
-          startTransition(() => {
+      //   startTransition(() => {
-            setMatch(getMatch(radixRouter, location.pathname));
+      //     setMatch(getMatch(radixRouter, location.pathname));
-          })
+      //   })
-        };
+      // };
-        link.setAttribute("href", href);
+      // link.setAttribute("href", href);
-        document.getElementsByTagName("head")[0].appendChild(link);
+      // document.getElementsByTagName("head")[0].appendChild(link);
-      } else {
+      // } else {
         nProgress.start();
         startTransition(() => {
           setMatch(getMatch(radixRouter, location.pathname));
         })
-      }
+      // }
     });
   }, []);
   useEffect(() => {
@@ -81,7 +82,7 @@ export const Router = ({ App, history, radixRouter }) => {
       params: match.params || {},
     },
     children: React.createElement(App, {
-      children: React.createElement(match.Page, {}),
+      children: React.createElement(match.Body, {}),
     }),
   });
 }

readme.md CHANGED Viewed

@@ -7,4 +7,6 @@ It is very opionated and has set of idiomatic ways of doing things.
 ### Todo
 1. Add build step
 2. Deploy to Docker, Deno deploy, Vercel edge functions, Cloudflare workers, Bun edge (whenever it releases)
-3. Hydrate fetch cache
+3. Hydrate fetch cache
+4. Build a proper example (create-parotta-app)
+5. Build a Webiste with Docs using parotta

~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