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

5a97fa61 — Peter John

improve stuff

Files changed (14) hide show

bun.toml +0 -3
package-lock.json +44 -25
packages/example/bun.lockb +0 -0
packages/example/components/Counter/Counter.jsx +1 -1
packages/example/components/Todo/Todo.jsx +2 -0
packages/example/containers/TodoList/TodoList.jsx +1 -0
packages/example/jsconfig.json +5 -1
packages/example/package.json +2 -2
packages/example/routes/about/page.css +3 -0
packages/example/routes/about/page.jsx +19 -0
packages/example/routes/app.jsx +26 -0
packages/example/routes/page.css +4 -0
packages/example/routes/page.jsx +11 -4
packages/parotta/cli.js +53 -31

bun.toml DELETED Viewed

@@ -1,3 +0,0 @@
-[loaders]
-".jsx" = "js"
-".css" = "css"

package-lock.json CHANGED Viewed

@@ -1,19 +1,14 @@
 {
-  "name": "parotta-workspace",
+  "name": "quickstart",
   "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "parotta-workspace",
-      "version": "1.0.0",
       "workspaces": [
         "packages/example",
         "packages/parotta"
-      ],
+      ]
-      "bin": {
-        "parotta": "package/parotta/cli"
-      }
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
@@ -65,16 +60,38 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/swr": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.1.0.tgz",
+      "integrity": "sha512-4hYl5p3/KalQ1MORealM79g/DtLohmud6yyfXw5l4wjtFksYUnocRFudvyaoUtgj3FrVNK9lS25Av9dsZYvz0g==",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.0"
+      },
+      "engines": {
+        "pnpm": "7"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "packages/example": {
       "name": "quickstart",
       "dependencies": {
-        "parotta": "0.1.0",
         "react": "18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "swr": "2.1.0"
       }
     },
     "packages/parotta": {
-      "version": "0.1.0",
+      "version": "0.2.0",
       "dependencies": {
         "autoprefixer": "^10.4.14",
         "mime-types": "2.1.35",
@@ -86,10 +103,7 @@
         "walkdir": "0.4.1"
       },
       "bin": {
-        "parotta": "cli"
+        "parotta": "cli.js"
-      },
-      "devDependencies": {
-        "bun-types": "^0.5.0"
       }
     },
     "packages/parotta/node_modules/@csstools/cascade-layer-name-parser": {
@@ -223,10 +237,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "packages/parotta/node_modules/bun-types": {
-      "version": "0.5.7",
-      "dev": true
-    },
     "packages/parotta/node_modules/caniuse-lite": {
       "version": "1.0.30001468",
       "funding": [
@@ -482,7 +492,6 @@
       "version": "file:packages/parotta",
       "requires": {
         "autoprefixer": "^10.4.14",
-        "bun-types": "^0.5.0",
         "mime-types": "2.1.35",
         "postcss": "^8.4.21",
         "postcss-custom-media": "^9.1.2",
@@ -534,10 +543,6 @@
             "update-browserslist-db": "^1.0.10"
           }
         },
-        "bun-types": {
-          "version": "0.5.7",
-          "dev": true
-        },
         "caniuse-lite": {
           "version": "1.0.30001468"
         },
@@ -647,9 +652,9 @@
     "quickstart": {
       "version": "file:packages/example",
       "requires": {
-        "parotta": "0.1.0",
         "react": "18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "swr": "2.1.0"
       }
     },
     "react": {
@@ -670,6 +675,20 @@
       "requires": {
         "loose-envify": "^1.1.0"
       }
+    },
+    "swr": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.1.0.tgz",
+      "integrity": "sha512-4hYl5p3/KalQ1MORealM79g/DtLohmud6yyfXw5l4wjtFksYUnocRFudvyaoUtgj3FrVNK9lS25Av9dsZYvz0g==",
+      "requires": {
+        "use-sync-external-store": "^1.2.0"
+      }
+    },
+    "use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "requires": {}
     }
   }
 }

packages/example/bun.lockb ADDED Viewed

Binary file

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 const Counter = () => {
   const [count, setCount] = useState(5);

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

@@ -1,3 +1,5 @@
+import React from 'react';
 const Todo = ({ id, text }) => {
   return (
     <div id={id}>

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import Todo from "@/components/Todo/Todo";
 const todos = [

packages/example/jsconfig.json CHANGED Viewed

@@ -4,6 +4,10 @@
       "@/*": [
         "./*"
       ]
-    }
+    },
+    // TODO these options are not supported
+    "jsx": "react",
+    "jsxFactory": "React.createElement",
+    "jsxImportSource": "react"
   }
 }

packages/example/package.json CHANGED Viewed

@@ -8,8 +8,8 @@
     "run": "docker run -p 3000:3000 example"
   },
   "dependencies": {
-    "parotta": "0.1.0",
     "react": "18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "swr": "2.1.0"
   }
 }

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

@@ -0,0 +1,3 @@
+.about-page {
+  padding: 100px;
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useRouter } from "parotta/router";
+import "./page.css";
+const AboutPage = () => {
+  const router = useRouter();
+  return (
+    <div className="about-page">
+      <div>
+        <h1>About Page</h1>
+        <p>
+          Path: {router.pathname}
+        </p>
+      </div>
+    </div>
+  )
+}
+export default AboutPage;

packages/example/routes/app.jsx ADDED Viewed

@@ -0,0 +1,26 @@
+import React, { Suspense } from "react";
+import { SWRConfig } from "swr";
+import { RouterProvider } from "parotta/router";
+import { ErrorBoundary } from "parotta/error";
+const App = ({ routerProps, children }) => {
+  return (
+    <RouterProvider value={routerProps}>
+      <SWRConfig value={{
+        fallback: {
+          'https://jsonplaceholder.typicode.com/todos/1': { id: '123' },
+        },
+        // fallbackData: null,
+        fetcher: (resource, init) => fetch(resource, init).then(res => res.json()), suspense: true
+      }}>
+        <ErrorBoundary onError={(err) => console.log(err)} fallback={<p>Oops something went wrong</p>}>
+          <Suspense fallback={<p>Loading...</p>}>
+            {children}
+          </Suspense>
+        </ErrorBoundary>
+      </SWRConfig>
+    </RouterProvider>
+  )
+}
+export default App;

packages/example/routes/page.css CHANGED Viewed

@@ -8,4 +8,8 @@
     font-size: 30px;
     font-weight: 600;
   }
+  & footer {
+    margin-top: 100px;
+  }
 }

packages/example/routes/page.jsx CHANGED Viewed

@@ -1,18 +1,25 @@
+import React from 'react';
+import useSWR from "swr";
+import { useRouter } from "parotta/router";
 import Counter from "@/components/Counter/Counter";
-// import { useRouter } from "muffinjs/router.js";
 import "./page.css";
 const HomePage = () => {
+  // const todo = useAsync('123', () => getData());
+  const { data } = useSWR(`https://jsonplaceholder.typicode.com/todos/1`);
-  // const router = useRouter();
+  const router = useRouter();
   return (
     <div className="home-page">
       <div>
         <h1>Home Page</h1>
-        {/* <p>
+        <p>
           Path: {router.pathname}
-        </p> */}
+        </p>
         <Counter />
       </div>
+      <footer>
+        <a href="/about">About us</a>
+      </footer>
     </div>
   )
 }

packages/parotta/cli.js CHANGED Viewed

@@ -7,24 +7,19 @@ import autoprefixer from "autoprefixer";
 import postcssCustomMedia from "postcss-custom-media";
 // import postcssNormalize from 'postcss-normalize';
 import postcssNesting from "postcss-nesting";
-import { renderToReadableStream } from 'react-dom/server';
 import { createRouter } from 'radix3';
 import mimeTypes from "mime-types";
+import { renderToReadableStream } from 'react-dom/server';
-import { routerSignal } from './router.js';
+// import { renderToStream } from './render';
+const version = (await import(path.join(import.meta.dir, "package.json"))).default.version;
+console.log(`parotta v${version}`)
 console.log("running in folder:", path.basename(process.cwd()), "env:", process.env.NODE_ENV);
 // console.log("deleting cache");
 // rmSync(path.join(process.cwd(), ".cache"), { force: true, recursive: true })
 const isProd = process.env.NODE_ENV === "production";
-const transpiler = new Bun.Transpiler({
-  loader: "jsx",
-  autoImportJSX: true,
-  jsxOptimizationInline: true,
-});
 const mapFiles = () => {
   const routes = {};
   const dirs = walkdir.sync(path.join(process.cwd(), "routes"))
@@ -65,16 +60,21 @@ const mapDeps = (dir) => {
     }, {});
 }
+const removeCwd = (s) => s.replace(process.cwd(), "")
-const hydrateScript = (filePath, initialRouteValue) => {
+const hydrateScript = (appPath, pagePath, routerProps) => {
   return `
-import React from 'react';
+import React from "react";
-import { hydrateRoot } from 'react-dom/client';
+import { hydrateRoot } from "react-dom/client";
-import { routerSignal } from "parotta/router";
+import App from "${removeCwd(appPath)}";
-import Page from "${filePath}";
+import Page from "${removeCwd(pagePath)}";
-routerSignal.value = ${JSON.stringify(initialRouteValue)};
+const routerProps = ${JSON.stringify(routerProps)};
-hydrateRoot(document.getElementById("root"), React.createElement(Page, {}, undefined, false, undefined, this));
+hydrateRoot(document.getElementById("root"), React.createElement(App, {
+  routerProps: routerProps,
+  children: React.createElement(Page, {}),
+}));
   `;
 }
@@ -113,23 +113,23 @@ const renderPage = async (filePath, url, params) => {
   for (const key of url.searchParams.keys()) {
     query[key] = url.searchParams.get(key);
   }
-  const initialRouteValue = {
+  const routerProps = {
     query: query,
     params: params,
     pathname: url.pathname,
   }
-  routerSignal.value = initialRouteValue;
+  const appPath = path.join(process.cwd(), "routes", "app.jsx");
-  const routeImport = await import(path.join(process.cwd(), filePath));
+  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]}${devTag}`;
+    acc[dep] = `https://esm.sh/${dep}@${packageJson.default.dependencies[dep]}`;
     return acc;
   }, {})
+  const App = (await import(appPath)).default;
-  const Page = routeImport.default;
+  const Page = (await import(pagePath)).default;
   const components = mapDeps("components");
   const containers = mapDeps("containers");
-  const parottaVersion = packageJson.default.dependencies["parotta"];
   const cssFile = `${filePath.replace("jsx", "css")}`;
   const stream = await renderToReadableStream(
     <html lang="en">
@@ -141,9 +141,12 @@ const renderPage = async (filePath, url, params) => {
             {
               "imports": {
                 "radix3": `https://esm.sh/radix3`,
-                "react-dom/client": `https://esm.sh/react-dom@18.2.0/client${devTag}`,
+                "react": `https://esm.sh/react@18.2.0`,
-                "react/jsx-dev-runtime": `https://esm.sh/react@18.2.0/jsx-dev-runtime${devTag}`,
+                "react/jsx-dev-runtime": `https://esm.sh/react@18.2.0/jsx-dev-runtime`,
+                "react-dom/client": `https://esm.sh/react-dom@18.2.0/client`,
+                "react-streaming": "https://esm.sh/react-streaming",
-                "parotta/router": `https://esm.sh/parotta@${parottaVersion}`,
+                "parotta/router": `https://esm.sh/parotta@${version}/router.js`,
+                "parotta/error": `https://esm.sh/parotta@${version}/error.js`,
                 ...nodeDeps,
                 ...components,
                 ...containers,
@@ -152,8 +155,8 @@ const renderPage = async (filePath, url, params) => {
           )
         }}>
         </script>
-        <script type="module" defer dangerouslySetInnerHTML={{
+        <script type="module" defer={true} dangerouslySetInnerHTML={{
-          __html: hydrateScript(filePath, initialRouteValue)
+          __html: hydrateScript(appPath, pagePath, routerProps)
         }}></script>
         <title>
           Parotta
@@ -161,11 +164,14 @@ const renderPage = async (filePath, url, params) => {
       </head>
       <body>
         <div id="root">
+          <App routerProps={routerProps}>
-          <Page />
+            <Page />
+          </App>
         </div>
       </body>
     </html >
   );
+  // injectToStream('<script type="module" src="/main.js"></script>', { flush: true });
   return new Response(stream, {
     headers: { 'Content-Type': 'text/html' },
     status: 200,
@@ -193,11 +199,23 @@ const renderCss = async (url) => {
   }
 }
+const transpiler = new Bun.Transpiler({
+  loader: "jsx",
+  autoImportJSX: true,
+  jsxOptimizationInline: true,
+  // TODO
+  // autoImportJSX: false,
+  // jsxOptimizationInline: false,
+});
-const renderJs = async (url) => {
+const renderJs = async (src) => {
   try {
-    const jsText = await Bun.file(path.join(process.cwd(), url.pathname)).text();
+    const jsText = await Bun.file(src).text();
     const result = await transpiler.transform(jsText);
     const js = result.replaceAll(`import"./page.css";`, "");
+    // TODO
+    //.replaceAll("$jsx", "React.createElement");
     return new Response(js, {
       headers: { 'Content-Type': 'application/javascript' },
       status: 200,
@@ -234,8 +252,12 @@ export default {
       return renderCss(url);
     }
     if (url.pathname.endsWith(".js") || url.pathname.endsWith(".jsx")) {
-      return renderJs(url);
+      return renderJs(path.join(process.cwd(), url.pathname));
     }
+    // maybe this is needed
+    // if (url.pathname.startsWith("/parotta/")) {
+    //   return renderJs(path.join(import.meta.dir, url.pathname.replace("/parotta/", "")) + ".js");
+    // }
     const match = radixRouter.lookup(url.pathname);
     if (match) {
       if (match.file) {

~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