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

b76450ae — Peter John

support api rendering

Files changed (6) hide show

packages/example/routes/todos/:id/api.js +9 -5
packages/example/routes/todos/api.js +1 -3
packages/example/services/collections.js +34 -0
packages/muffinjs/bun.lockb +0 -0
packages/muffinjs/index.js +56 -20
packages/muffinjs/package.json +2 -2

packages/example/routes/todos/:id/api.js CHANGED Viewed

@@ -1,9 +1,13 @@
-import tigrisDB from "./db.js.js.js.js.js.js.js.js";
+import { todosCollection } from "@/services/collections";
+const getId = (req) => {
+  const url = new URL(req.url);
-export const todosCollection = tigrisDB.getCollection("todoItems");
+  const res = new RegExp("/todos/(.*?)$").exec(url.pathname)
+  return res[1];
+}
 export const onGet = async (req) => {
-  const { id } = req.params;
+  const id = getId(req);
   const item = await todosCollection.findOne({
     filter: { id },
   });
@@ -19,7 +23,7 @@ export const onGet = async (req) => {
 export const onPut = async (req) => {
   const item = await req.body();
   const updated = await todosCollection.insertOrReplaceOne(item);
-  const data = JSON.stringify(updated);``
+  const data = JSON.stringify(updated);
   return new Response(data, {
     headers: {
       "Content-Type": "application/json",
@@ -29,7 +33,7 @@ export const onPut = async (req) => {
 }
 export const onDelete = async (req) => {
-  const { id } = req.params;
+  const id = getId(req);
   const res = await todosCollection.deleteOne({
     filter: { id },
   });

packages/example/routes/todos/api.js CHANGED Viewed

@@ -1,6 +1,4 @@
-import tigrisDB from "./db.js.js.js";
-export const todosCollection = tigrisDB.getCollection("todoItems");
+import { todosCollection } from "@/services/collections";
 export const onGet = async (req) => {
   const cursor = todosCollection.findMany({});

packages/example/services/collections.js ADDED Viewed

@@ -0,0 +1,34 @@
+const getCollection = (name) => {
+  let items = [];
+  return {
+    findMany: () => {
+      return {
+        toArray: async () => {
+          return items;
+        }
+      }
+    },
+    findOne: ({ filter }) => {
+      return items.find((item) => item.id === filter.id)
+    },
+    insertOne: (item) => {
+      items.push(item);
+      return item;
+    },
+    insertOrReplaceOne: (item) => {
+      const index = items.findIndex((it) => it.id === item.id);
+      if (index) {
+        items[index] = item;
+      } else {
+        items.push(item);
+      }
+      return item;
+    },
+    deleteOne: ({ filter }) => {
+      items = items.filter((item) => item.id !== filter.id);
+      return { id: filter.id }
+    },
+  }
+}
+export const todosCollection = getCollection("todos");

packages/muffinjs/bun.lockb CHANGED Viewed

Binary file

packages/muffinjs/index.js CHANGED Viewed

@@ -63,14 +63,47 @@ const mapDeps = (dir) => {
     }, {});
 }
+const hydrateScript = (filePath, initialRouteValue) => {
+  return `
+import React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+// import { routerAtom } from "muffinjs/router";
+import Page from "${filePath}";
+// routerAtom.update(() => (${JSON.stringify(initialRouteValue)}));
+hydrateRoot(document.getElementById("root"), React.createElement(Page, {}, undefined, false, undefined, this));
+  `;
+}
 const radixRouter = createRouter({
   strictTrailingSlash: true,
   routes: mapFiles(),
 });
 const renderApi = async (filePath, req) => {
-  const routeImport = await import(route.filePath);
+  const routeImport = await import(path.join(process.cwd(), filePath));
+  switch (req.method) {
+    case "HEAD":
+      return routeImport.onHead(req);
+    case "OPTIONS":
+      return routeImport.onOptions(req);
+    case "GET":
+      return routeImport.onGet(req);
+    case "POST":
+      return routeImport.onPost(req);
+    case "PUT":
+      return routeImport.onPut(req);
+    case "PATCH":
+      return routeImport.onPatch(req);
+    case "DELETE":
-  console.log('routeImport', routeImport);
+      return routeImport.onDelete(req);
+    default:
+      return new Response(`{"message": "route not found"}`, {
+        headers: { 'Content-Type': 'application/json' },
+        status: 404,
+      });
+  }
 }
 const renderPage = async (filePath, url, params) => {
@@ -86,29 +119,30 @@ const renderPage = async (filePath, url, params) => {
   routerAtom.update(() => initialRouteValue);
   const routeImport = await import(path.join(process.cwd(), filePath));
   const packageJson = await import(path.join(process.cwd(), "package.json"));
-  const dependencies = packageJson.default.dependencies;
   const devTag = !isProd ? "?dev" : "";
-  const imports = Object.keys(dependencies).reduce((acc, dep) => {
+  const nodeDeps = Object.keys(packageJson.default.dependencies).reduce((acc, dep) => {
-    acc[dep] = `https://esm.sh/${dep}@${dependencies[dep]}${devTag}`;
+    acc[dep] = `https://esm.sh/${dep}@${packageJson.default.dependencies[dep]}${devTag}`;
     return acc;
   }, {})
   const Page = routeImport.default;
   const components = mapDeps("components");
   const containers = mapDeps("containers");
-  const parottaVersion = dependencies["parotta"];
+  const parottaVersion = packageJson.default.dependencies["parotta"];
+  const cssFile = `${filePath.replace("jsx", "css")}`;
   const stream = await renderToReadableStream(
     <html lang="en">
       <head>
-        <link rel="stylesheet" href={`${filePath.replace("jsx", "css")}`} />
+        <link rel="preload" href={cssFile} as="style" />
+        <link rel="stylesheet" href={cssFile} />
         <script type="importmap" dangerouslySetInnerHTML={{
           __html: JSON.stringify(
             {
               "imports": {
-                ...imports,
                 "radix3": `https://esm.sh/radix3`,
                 "react-dom/client": `https://esm.sh/react-dom@18.2.0/client${devTag}`,
                 "react/jsx-dev-runtime": `https://esm.sh/react@18.2.0/jsx-dev-runtime${devTag}`,
                 "parotta/router": `https://esm.sh/parotta@${parottaVersion}`,
+                ...nodeDeps,
                 ...components,
                 ...containers,
               }
@@ -117,16 +151,11 @@ const renderPage = async (filePath, url, params) => {
         }}>
         </script>
         <script type="module" defer dangerouslySetInnerHTML={{
-          __html: `
-          import React from 'react';
-          import { hydrateRoot } from 'react-dom/client';
-          // import { routerAtom } from "muffinjs/router";
-          import Page from "${filePath}";
-          // routerAtom.update(() => (${JSON.stringify(initialRouteValue)}));
+          __html: hydrateScript(filePath, initialRouteValue)
-          hydrateRoot(document.getElementById("root"), React.createElement(Page, {}, undefined, false, undefined, this));
-        `}}></script>
+        }}></script>
+        <title>
+          Parotta
+        </title>
       </head>
       <body>
         <div id="root">
@@ -210,7 +239,7 @@ export default {
       if (match.file) {
         return sendFile(`/static${match.file}`);
       }
-      if (match.page) {
+      if (match.page && req.headers.get("Accept")?.includes('text/html')) {
         return renderPage(`/routes${match.page}`, url, match.params);
       }
       if (match.api) {
@@ -222,4 +251,11 @@ export default {
       status: 404,
     });
   },
+  // error(error) {
+  //   return new Response(`<pre>${error}\n${error.stack}</pre>`, {
+  //     headers: {
+  //       "Content-Type": "text/html",
+  //     },
+  //   });
+  // },
-};
+}

packages/muffinjs/package.json CHANGED Viewed

@@ -12,13 +12,13 @@
   },
   "dependencies": {
     "autoprefixer": "^10.4.14",
+    "mime-types": "2.1.35",
     "postcss": "^8.4.21",
     "postcss-custom-media": "^9.1.2",
     "postcss-nesting": "^11.2.1",
     "postcss-normalize": "^10.0.1",
     "radix3": "^1.0.0",
-    "walkdir": "0.4.1",
+    "walkdir": "0.4.1"
-    "mime-types": "2.1.35"
   },
   "bin": {
     "muffin": "./bin/muffin"

~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