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

827ac811 — Peter John

get example working

Files changed (11) hide show

bun.toml +3 -0
package.json +1 -4
packages/example/components/Todo.jsx +4 -2
packages/example/containers/TodoList.jsx +4 -2
packages/example/jsconfig.json +3 -1
packages/example/package.json +2 -1
packages/example/routes/index/page.jsx +10 -10
packages/example/routes/todos/page.jsx +5 -2
packages/muffinjs/bin/{muffin.js → muffin} +0 -0
packages/muffinjs/index.js +44 -39
packages/muffinjs/jsxPlugin.js +0 -50

bun.toml ADDED Viewed

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

package.json CHANGED Viewed

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

packages/example/components/Todo.jsx CHANGED Viewed

@@ -1,4 +1,4 @@
-export default ({ id, text }) => {
+const Todo = ({ id, text }) => {
   return (
     <div id={id}>
       <p>
@@ -6,4 +6,6 @@ export default ({ id, text }) => {
       </p>
     </div>
   )
-}
+}
+export default Todo;

packages/example/containers/TodoList.jsx CHANGED Viewed

@@ -5,7 +5,7 @@ const todos = [
   { id: '2', text: "AEQ" }
 ];
-export default () => {
+const TodoList = () => {
   return (
     <div className="todo-list">
       <h1>Todos</h1>
@@ -18,4 +18,6 @@ export default () => {
       </ul>
     </div>
   );
-}
+}
+export default TodoList;

packages/example/jsconfig.json CHANGED Viewed

@@ -1,7 +1,9 @@
 {
   "compilerOptions": {
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   }
 }

packages/example/package.json CHANGED Viewed

@@ -2,7 +2,8 @@
   "name": "quickstart",
   "type": "module",
   "scripts": {
-    "dev": "bun --hot main.js"
+    "dev": "bun --hot main.js",
+    "start": "NODE_ENV=production bun main.js"
   },
   "dependencies": {
     "muffinjs": "0.1.0",

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

@@ -1,19 +1,17 @@
 import { useState } from "react";
-import { useRouter } from "muffinjs/router.js";
+// import { useRouter } from "muffinjs/router.js";
-import TodoList from "@/containers/TodoList.jsx";
-// import "./index.css";
+import "./page.css";
-export default () => {
+const HomePage = () => {
-  const router = useRouter();
+  // const router = useRouter();
   const [count, setCount] = useState(5);
-  // const { data: todos, isLoading, isRevalidating } = usePromise("/todos");
   return (
     <div className="home-page">
       <div>
+        <h1>Home Page</h1>
-        <p>
+        {/* <p>
           Hello from server path 123: {router.pathname}
-        </p>
+        </p> */}
-        <TodoList />
         <div>
           <button onClick={() => setCount(count - 1)}>-</button>
           <span className="count">
@@ -24,4 +22,6 @@ export default () => {
       </div>
     </div>
   )
-}
+}
+export default HomePage;

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

@@ -3,14 +3,17 @@ import { useRouter } from "muffinjs/router.js";
 import TodoList from "@/containers/TodoList.jsx";
 // import "./index.css";
-export default () => {
+const TodosPage = () => {
   const router = useRouter();
   const { data: todos, isRevalidating } = usePromise("/todos");
   return (
     <div className="todos-page">
+      <h1>Todos</h1>
       <Suspense>
         <TodoList todos={todos} />
       </Suspense>
     </div>
   )
-}
+}
+export default TodosPage;

packages/muffinjs/bin/{muffin.js → muffin} RENAMED Viewed

File without changes

packages/muffinjs/index.js CHANGED Viewed

@@ -1,10 +1,20 @@
-import './jsxPlugin.js';
+// import './jsxPlugin.js';
 import React from 'react';
 import path from 'path';
+import { rmSync, readFileSync } from "fs";
+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 { routerAtom } from './router.js';
+console.log("running in folder:", path.basename(process.cwd()), "env:", process.env.NODE_ENV);
-console.log("running in", process.cwd());
+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",
@@ -28,28 +38,28 @@ const renderPage = async (filePath, url, params) => {
     pathname: url.pathname,
   }
   routerAtom.update(() => initialRouteValue);
-  const routeImport = await import(filePath);
+  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) => {
-    acc[dep] = `https://esm.sh/${dep}@${dependencies[dep]}?dev`;
+    acc[dep] = `https://esm.sh/${dep}@${dependencies[dep]}${devTag}`;
     return acc;
   }, {})
   const Page = routeImport.default;
+  console.log(filePath)
   const stream = await renderToReadableStream(
     <html lang="en">
       <head>
-        <link rel="stylesheet" href="/routes/index/page.css" />
+        <link rel="stylesheet" href={`${filePath.replace("jsx", "css")}`} />
         <script type="importmap" dangerouslySetInnerHTML={{
           __html: JSON.stringify(
             {
               "imports": {
                 ...imports,
-                "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev",
+                "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?dev",
+                "react/jsx-dev-runtime": `https://esm.sh/react@18.2.0/jsx-dev-runtime${devTag}`,
-                "@/atom.js": "/assets/js/src/atom.js",
+                "muffinjs": "https://esm.sh/muffinjs",
-                "@/router.js": "/assets/js/src/router.js",
-                "@/routes/index/page.jsx": "/routes/index/page.js",
                 "@/components/Todo.jsx": "/components/Todo.js",
                 "@/containers/TodoList.jsx": "/containers/TodoList.js"
               }
@@ -61,10 +71,10 @@ const renderPage = async (filePath, url, params) => {
           __html: `
           import React from 'react';
           import { hydrateRoot } from 'react-dom/client';
-          import { routerAtom } from "@/router.js";
+          // import { routerAtom } from "muffinjs/router.js";
-          import Page from "@/routes/index/page.jsx";
+          import Page from "${filePath}";
-          routerAtom.update(() => (${JSON.stringify(initialRouteValue)}));
+          // routerAtom.update(() => (${JSON.stringify(initialRouteValue)}));
           hydrateRoot(document.getElementById("root"), React.createElement(Page, {}, undefined, false, undefined, this));
         `}}></script>
@@ -77,36 +87,31 @@ const renderPage = async (filePath, url, params) => {
     </html >
   );
   return new Response(stream, {
-    headers: {
-      'Content-Type': 'text/html',
+    headers: { 'Content-Type': 'text/html' },
-    },
     status: 200,
   });
 }
-const renderJs = async (url) => {
+const renderCss = async (url) => {
-  const localFile = url.pathname.replace("/assets/js/", "").replace("src/", "");
+  const cssText = readFileSync(path.join(process.cwd(), url.pathname), "utf-8");
-  const src = await Bun.file(localFile).text();
-  const result = await transpiler.transform(src);
+  const result = await postcss([
+    autoprefixer(),
+    postcssCustomMedia(),
+    // postcssNormalize({ browsers: 'last 2 versions' }),
+    postcssNesting,
+  ]).process(cssText);
-  return new Response(result, {
+  return new Response(result.css, {
-    headers: {
-      'Content-Type': 'application/javascript',
+    headers: { 'Content-Type': 'text/css' },
-    },
     status: 200,
   });
 }
-const sendFile = async (url) => {
+const renderJs = async (url) => {
-  const localFile = url.pathname.replace("/assets/js/", "").replace("src/", "");
-  const result = await Bun.file(path.join(".cache", localFile)).text();
+  const jsText = readFileSync(path.join(process.cwd(), url.pathname), "utf-8");
-  let contentType = "application/javascript";
+  const result = await transpiler.transform(jsText);
-  if (url.pathname.endsWith(".css")) {
+  const js = result.replaceAll(`import"./page.css";`, "");
-    contentType = 'text/css';
-  }
-  return new Response(result, {
+  return new Response(js, {
-    headers: {
-      'Content-Type': contentType,
+    headers: { 'Content-Type': 'application/javascript' },
-    },
     status: 200,
   });
 }
@@ -115,10 +120,10 @@ export default {
   port: 3000,
   async fetch(req) {
     const url = new URL(req.url);
-    if (url.pathname.includes("/components/") || url.pathname.includes("/containers/") || url.pathname.includes("/routes/")) {
+    if (url.pathname.endsWith(".css")) {
-      return sendFile(url);
+      return renderCss(url);
     }
-    if (url.pathname.includes("/assets/js")) {
+    if (url.pathname.endsWith(".js") || url.pathname.endsWith(".jsx")) {
       return renderJs(url);
     }
     if (url.pathname.includes("/favicon")) {
@@ -128,7 +133,7 @@ export default {
       });
     }
     if (url.pathname.includes("/")) {
-      return renderPage(process.cwd() + "/routes/index/page.jsx", url, {});
+      return renderPage("/routes/index/page.jsx", url, {});
     }
     return new Response(`Not Found`, {
       headers: { 'Content-Type': 'text/html' },

packages/muffinjs/jsxPlugin.js DELETED Viewed

@@ -1,50 +0,0 @@
-import { plugin } from "bun";
-import path from "path";
-import { readFileSync, writeFileSync, mkdirSync, existsSync } from "fs";
-import postcss from "postcss"
-import autoprefixer from "autoprefixer";
-import postcssCustomMedia from "postcss-custom-media";
-// import postcssNormalize from 'postcss-normalize';
-import postcssNesting from "postcss-nesting";
-const transpiler = new Bun.Transpiler({
-  loader: "jsx",
-  autoImportJSX: true,
-  jsxOptimizationInline: true,
-});
-plugin({
-  name: "JsxPlugin",
-  async setup(build) {
-    build.onLoad({ filter: /\.jsx$/ }, async (args) => {
-      const folder = path.dirname(args.path).replace(process.cwd(), "");
-      const filename = path.basename(args.path).replace("jsx", "js");
-      const cssFile = args.path.replace("jsx", "css");
-      const outputFolder = path.join(process.cwd(), ".cache", folder);
-      const outputFile = path.join(outputFolder, filename);
-      const jsxCode = readFileSync(args.path, "utf8");
-      const code = await transpiler.transform(jsxCode);
-      if (!existsSync(outputFolder)) {
-        mkdirSync(outputFolder, { recursive: true });
-      }
-      writeFileSync(outputFile, code);
-      if (existsSync(cssFile)) {
-        const cssText = readFileSync(cssFile, "utf-8");
-        const result = postcss([
-          autoprefixer(),
-          postcssCustomMedia(),
-          // postcssNormalize({ browsers: 'last 2 versions' }),
-          postcssNesting,
-        ]).process(cssText);
-        writeFileSync(outputFile.replace("js", "css"), result.css);
-      }
-      const src = await import(outputFile);
-      return {
-        exports: {
-          default: src.default,
-        },
-        loader: "object",
-      };
-    });
-  },
-});

~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