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

0754c43a — Peter John

add router

Files changed (13) hide show

.gitignore +2 -1
package.json +4 -1
packages/example/Dockerfile +6 -0
packages/example/package.json +3 -1
packages/example/routes/{health/api.js → api.js} +0 -0
packages/example/routes/{index/page.css → page.css} +0 -0
packages/example/routes/{index/page.jsx → page.jsx} +0 -0
packages/example/routes/todos/{[id]/server.js → :id/api.js} +1 -1
packages/muffinjs/bin/muffin +0 -0
packages/muffinjs/bun.lockb +0 -0
packages/muffinjs/index.js +107 -32
packages/muffinjs/package.json +4 -1
packages/muffinjs/router.js +1 -0

.gitignore CHANGED Viewed

@@ -1 +1,2 @@
-node_modules
+node_modules
+.vercel

package.json CHANGED Viewed

@@ -1,5 +1,8 @@
 {
   "name": "my-project",
   "version": "1.0.0",
+  "workspaces": [
-  "workspaces": ["packages/example", "packages/muffinjs"]
+    "packages/example",
+    "packages/muffinjs"
+  ]
 }

packages/example/Dockerfile ADDED Viewed

@@ -0,0 +1,6 @@
+FROM oven/bun
+WORKDIR /app
+COPY . /app
+CMD ["bun", "start"]

packages/example/package.json CHANGED Viewed

@@ -3,7 +3,9 @@
   "type": "module",
   "scripts": {
     "dev": "bun --hot main.js",
-    "start": "NODE_ENV=production bun main.js"
+    "start": "NODE_ENV=production bun main.js",
+    "build": "docker build . -t example",
+    "run": "docker run -p 3000:3000 example"
   },
   "dependencies": {
     "muffinjs": "0.1.0",

packages/example/routes/{health/api.js → api.js} RENAMED Viewed

File without changes

packages/example/routes/{index/page.css → page.css} RENAMED Viewed

File without changes

packages/example/routes/{index/page.jsx → page.jsx} RENAMED Viewed

File without changes

packages/example/routes/todos/{[id]/server.js → :id/api.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import tigrisDB from "./db.js.js.js";
+import tigrisDB from "./db.js.js.js.js.js.js.js.js";
 export const todosCollection = tigrisDB.getCollection("todoItems");

packages/muffinjs/bin/muffin CHANGED Viewed

File without changes

packages/muffinjs/bun.lockb ADDED Viewed

Binary file

packages/muffinjs/index.js CHANGED Viewed

@@ -1,18 +1,18 @@
-// import './jsxPlugin.js';
-import React from 'react';
 import path from 'path';
-import { rmSync, readFileSync } from "fs";
+import walkdir from 'walkdir';
 import postcss from "postcss"
 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 { routerAtom } from './router.js';
 console.log("running in folder:", path.basename(process.cwd()), "env:", process.env.NODE_ENV);
-console.log("deleting cache");
+// console.log("deleting cache");
-rmSync(path.join(process.cwd(), ".cache"), { force: true, recursive: true })
+// rmSync(path.join(process.cwd(), ".cache"), { force: true, recursive: true })
 const isProd = process.env.NODE_ENV === "production";
@@ -22,7 +22,48 @@ const transpiler = new Bun.Transpiler({
   jsxOptimizationInline: true,
 });
+const mapFiles = () => {
+  const routes = {};
+  const dirs = walkdir.sync(path.join(process.cwd(), "routes"))
+    .map((s) => s.replace(process.cwd(), "")
+      .replace("/routes", "")
+      // .replaceAll("[", ":")
+      // .replaceAll("]", "")
+    );
+  dirs.filter((p) => p.includes('page.jsx'))
+    .map((s) => ({ path: s, route: s.replace("/page.jsx", "") }))
+    .forEach((page) => {
+      const key = page.route || "/";
+      routes[key] = { key: key, page: page.path };
+    });
+  dirs.filter((p) => p.includes('api.js'))
+    .map((s) => s.replace(process.cwd(), ""))
+    .map((s) => ({ path: s, route: s.replace("/api.js", "") }))
+    .forEach((api) => {
+      const key = api.route || "/";
+      routes[key] = routes[key] || { key };
+      routes[key].api = api.path;
+    });
+  walkdir.sync(path.join(process.cwd(), "static"))
+    .map((s) => s.replace(process.cwd(), "").replace("/static", ""))
+    .forEach((route) => {
+      routes[route] = { key: route, file: route }
+    });
+  return routes;
+}
+const radixRouter = createRouter({
+  strictTrailingSlash: true,
+  routes: mapFiles(),
+});
+console.log(radixRouter.lookup('/'));
+console.log(radixRouter.lookup('/about'));
+console.log(radixRouter.lookup('/todos'));
+console.log(radixRouter.lookup('/todos/123'));
+console.log(radixRouter.lookup('/robots.txt'));
-const renderApi = async (route, req) => {
+const renderApi = async (filePath, req) => {
   const routeImport = await import(route.filePath);
   console.log('routeImport', routeImport);
 }
@@ -57,6 +98,7 @@ const renderPage = async (filePath, url, params) => {
             {
               "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}`,
                 "muffinjs": "https://esm.sh/muffinjs",
@@ -93,27 +135,57 @@ const renderPage = async (filePath, url, params) => {
 }
 const renderCss = async (url) => {
+  try {
-  const cssText = readFileSync(path.join(process.cwd(), url.pathname), "utf-8");
+    const cssText = await Bun.file(path.join(process.cwd(), url.pathname)).text();
-  const result = await postcss([
+    const result = await postcss([
-    autoprefixer(),
+      autoprefixer(),
-    postcssCustomMedia(),
+      postcssCustomMedia(),
-    // postcssNormalize({ browsers: 'last 2 versions' }),
+      // postcssNormalize({ browsers: 'last 2 versions' }),
-    postcssNesting,
+      postcssNesting,
-  ]).process(cssText);
+    ]).process(cssText, { from: url.pathname, to: url.pathname });
-  return new Response(result.css, {
+    return new Response(result.css, {
-    headers: { 'Content-Type': 'text/css' },
+      headers: { 'Content-Type': 'text/css' },
-    status: 200,
+      status: 200,
-  });
+    });
+  } catch (err) {
+    return new Response(`Not Found`, {
+      headers: { 'Content-Type': 'text/html' },
+      status: 404,
+    });
+  }
 }
 const renderJs = async (url) => {
+  try {
-  const jsText = readFileSync(path.join(process.cwd(), url.pathname), "utf-8");
+    const jsText = await Bun.file(path.join(process.cwd(), url.pathname)).text();
-  const result = await transpiler.transform(jsText);
+    const result = await transpiler.transform(jsText);
-  const js = result.replaceAll(`import"./page.css";`, "");
+    const js = result.replaceAll(`import"./page.css";`, "");
-  return new Response(js, {
+    return new Response(js, {
-    headers: { 'Content-Type': 'application/javascript' },
+      headers: { 'Content-Type': 'application/javascript' },
-    status: 200,
+      status: 200,
-  });
+    });
+  } catch (err) {
+    return new Response(`Not Found`, {
+      headers: { 'Content-Type': 'text/html' },
+      status: 404,
+    });
+  }
+}
+const sendFile = async (file) => {
+  try {
+    const contentType = mimeTypes.lookup(file) || "application/octet-stream";
+    const stream = await Bun.file(path.join(process.cwd(), file)).stream();
+    return new Response(stream, {
+      headers: { 'Content-Type': contentType },
+      status: 200,
+    });
+  } catch (err) {
+    return new Response(`Not Found`, {
+      headers: { 'Content-Type': 'text/html' },
+      status: 404,
+    });
+  }
 }
 export default {
@@ -126,14 +198,17 @@ export default {
     if (url.pathname.endsWith(".js") || url.pathname.endsWith(".jsx")) {
       return renderJs(url);
     }
-    if (url.pathname.includes("/favicon")) {
+    const match = radixRouter.lookup(url.pathname);
+    if (match) {
+      if (match.file) {
-      return new Response(`Not Found`, {
+        return sendFile(`/static${match.file}`);
-        headers: { 'Content-Type': 'text/html' },
-        status: 404,
-      });
-    }
+      }
-    if (url.pathname.includes("/")) {
+      if (match.page) {
-      return renderPage("/routes/index/page.jsx", url, {});
+        return renderPage(`/routes${match.page}`, url, match.params);
+      }
+      if (match.api) {
+        return renderApi(`/routes${match.api}`, req);
+      }
     }
     return new Response(`Not Found`, {
       headers: { 'Content-Type': 'text/html' },

packages/muffinjs/package.json CHANGED Viewed

@@ -15,7 +15,10 @@
     "postcss": "^8.4.21",
     "postcss-custom-media": "^9.1.2",
     "postcss-nesting": "^11.2.1",
-    "postcss-normalize": "^10.0.1"
+    "postcss-normalize": "^10.0.1",
+    "radix3": "^1.0.0",
+    "walkdir": "0.4.1",
+    "mime-types": "2.1.35"
   },
   "bin": {
     "muffin": "./bin/muffin"

packages/muffinjs/router.js CHANGED Viewed

@@ -1,4 +1,5 @@
 // import { signal, useSignal } from "@preact/signals-react";
+import { createRouter } from 'radix3';
 import { atom, useAtom } from "./atom.js";
 export const routerAtom = atom({

~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