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

c121e198 — Peter John

improve component

Files changed (16) hide show

bun.lockb +0 -0
components/Todo.astro +0 -15
components/Todo.jsx +9 -0
containers/TodoList.astro +0 -10
containers/TodoList.jsx +21 -0
index.js +9 -40
index.test.js +0 -11
astroPlugin.js → jsxPlugin.js +11 -24
package.json +1 -0
pages/index.css +11 -0
pages/index.jsx +27 -0
routes/index.astro +0 -34
routes/index.css +0 -11
routes/index.jsx +0 -27
routes/layout.astro +0 -0
routes/page.jsx +0 -25

bun.lockb CHANGED Viewed

Binary file

components/Todo.astro DELETED Viewed

@@ -1,15 +0,0 @@
----
-const { id, text  } = Astro.props;
-const todos = [{ text: "123" }];
----
-<div>
-  <p>
-    {item.text}
-  </p>
-</div>
----
-div {
-  font-size: 20px;
-}

components/Todo.jsx ADDED Viewed

@@ -0,0 +1,9 @@
+export default ({ id, text }) => {
+  return (
+    <div id={id}>
+      <p>
+        {text}
+      </p>
+    </div>
+  )
+}

containers/TodoList.astro DELETED Viewed

@@ -1,10 +0,0 @@
----
-const todos = [{ text: "123" }];
----
-<div className="todo-list">
-  <h1>Todos</h1>
-  <ul>
-    {todos.map((item) => <li key={item.text}>{item.text}</li>)}
-  </ul>
-</div>

containers/TodoList.jsx ADDED Viewed

@@ -0,0 +1,21 @@
+import Todo from "@/components/Todo.jsx";
+const todos = [
+  { id: '1', text: "123" },
+  { id: '2', text: "AEQ" }
+];
+export default () => {
+  return (
+    <div className="todo-list">
+      <h1>Todos</h1>
+      <ul>
+        {todos.map((item) => (
+          <li key={item.text}>
+            <Todo id={item.id} text={item.text} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

index.js CHANGED Viewed

@@ -1,17 +1,10 @@
-import './astroPlugin.js';
+import './jsxPlugin.js';
 import path from 'path';
 import { SWRConfig } from 'swr';
 import { renderToReadableStream } from 'react-dom/server';
 import { RouterProvider } from './router.js';
 import packageJson from "./package.json";
-const router = new Bun.FileSystemRouter({
-  style: "nextjs",
-  dir: "./routes",
-  origin: "https://mydomain.com",
-  assetPrefix: "./public"
-});
 const transpiler = new Bun.Transpiler({
   loader: "jsx",
   autoImportJSX: true,
@@ -29,7 +22,6 @@ const deps = Object.keys(packageJson.dependencies).reduce((acc, dep) => {
 }, {})
 const renderPage = async (filePath, url, params) => {
-  const file = path.basename(url.pathname).replace("astro", "js") + "index.js";
   const query = {};
   for (const key of url.searchParams.keys()) {
     query[key] = url.searchParams.get(key);
@@ -39,13 +31,13 @@ const renderPage = async (filePath, url, params) => {
     params: params,
     pathname: url.pathname,
   }
+  console.log('filePath', filePath);
   const routeImport = await import(filePath);
   const Page = routeImport.default;
   const stream = await renderToReadableStream(
     <html lang="en">
       <head>
-        {/* {routeImport.head()} */}
-        <link rel="stylesheet" href="/routes/index.css" />
+        <link rel="stylesheet" href="/pages/index.css" />
         <script id="initial_route_context" type='application/json' dangerouslySetInnerHTML={{
           __html: JSON.stringify(initialRouteValue)
         }} />
@@ -57,9 +49,9 @@ const renderPage = async (filePath, url, params) => {
                 "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev",
                 "react/jsx-dev-runtime": "https://esm.sh/react@18.2.0/jsx-dev-runtime?dev",
                 "@/router.js": "/assets/js/src/router.js",
-                "@/routes/index.js": "/routes/index.js",
+                "@/pages/index.jsx": "/pages/index.js",
-                "@/components/Todo.astro": "/components/Todo.js",
+                "@/components/Todo.jsx": "/components/Todo.js",
-                "@/containers/TodoList.astro": "/containers/TodoList.js"
+                "@/containers/TodoList.jsx": "/containers/TodoList.js"
               }
             }
           )
@@ -72,7 +64,7 @@ const renderPage = async (filePath, url, params) => {
           import { hydrateRoot } from 'react-dom/client';
           import { SWRConfig } from 'swr';
           import {RouterProvider} from "@/router.js";
-          import Page from "@/routes/${file}";
+          import Page from "@/pages/index.jsx";
           const initialRouteValue = JSON.parse(document.getElementById('initial_route_context').textContent);
           const root = hydrateRoot(document.getElementById("root"), $jsx(SWRConfig, {
@@ -103,29 +95,6 @@ const renderPage = async (filePath, url, params) => {
   });
 }
-// const renderBootstrap = async (url) => {
-//   const folder = path.dirname(url.pathname);
-//   const file = path.basename(url.pathname).replace("astro", "js");
-//   const result = await transpiler.transform(`
-//     import { hydrateRoot } from 'react-dom/client';
-//     import {RouterProvider} from "@/router.js";
-//     import Page from "@/routes/${file}";
-//     const initialRouteValue = JSON.parse(document.getElementById('initial_route_context').textContent);
-//     const root = hydrateRoot(document.getElementById('root'), (
-//       <RouterProvider value={initialRouteValue}>
-//         <Page />
-//       </RouterProvider>
-//     ));
-//   `);
-//   return new Response(result, {
-//     headers: {
-//       'Content-Type': 'application/javascript',
-//     },
-//     status: 200,
-//   });
-// }
 const renderJs = async (url) => {
   const localFile = url.pathname.replace("/assets/js/", "").replace("src/", "");
   const src = await Bun.file(localFile).text();
@@ -158,7 +127,7 @@ export default {
   async fetch(req) {
     const url = new URL(req.url);
     console.log(req.method, url.pathname)
-    if (url.pathname.includes("/components/") || url.pathname.includes("/containers/") || url.pathname.includes("/routes/")) {
+    if (url.pathname.includes("/components/") || url.pathname.includes("/containers/") || url.pathname.includes("/pages/")) {
       return sendFile(url);
     }
     if (url.pathname.includes("/assets/js")) {
@@ -173,7 +142,7 @@ export default {
         status: 404,
       });
     }
-    return renderPage("./routes/index.astro", url, {});
+    return renderPage("./pages/index.jsx", url, {});
     // const route = router.match(url.pathname);
     // if (route) {
     //   return renderPage(route, url);

index.test.js DELETED Viewed

@@ -1,11 +0,0 @@
-import { expect, test } from "bun:test";
-describe("arithmetic", () => {
-  test("2 + 2", () => {
-    expect(2 + 2).toBe(4);
-  });
-  test("2 * 2", () => {
-    expect(2 * 2).toBe(4);
-  });
-});

astroPlugin.js → jsxPlugin.js RENAMED Viewed

@@ -14,43 +14,30 @@ const transpiler = new Bun.Transpiler({
 });
 plugin({
-  name: "Astro",
+  name: "JsxPlugin",
   async setup(build) {
-    build.onLoad({ filter: /\.astro$/ }, async (args) => {
+    build.onLoad({ filter: /\.jsx$/ }, async (args) => {
       const folder = path.dirname(args.path).replace(process.cwd(), "");
-      const filename = path.basename(args.path).replace("astro", "js");
+      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 text = readFileSync(args.path, "utf8");
+      const jsxCode = readFileSync(args.path, "utf8");
-      const [_, js, html, css] = text.split("---");
-      const imports = js.split("\n").filter((line) => line.startsWith("import")).join("\n");
-      const body = js.split("\n").filter((line) => !line.startsWith("import")).join("\n");
-      const tpl = `
-        ${imports}
-        export default () => {
-          ${body}
-          return (
-            ${html}
-          );
-        }
-      `;
-      // console.log('tpl', tpl);
-      const code = await transpiler.transform(tpl);
+      const code = await transpiler.transform(jsxCode);
       // console.log('code', code);
       if (!existsSync(outputFolder)) {
         mkdirSync(outputFolder);
       }
       writeFileSync(outputFile, code);
-      if (css) {
+      if (existsSync(cssFile)) {
+        const cssText = readFileSync(cssFile, "utf-8");
         const result = postcss([
           autoprefixer(),
           postcssCustomMedia(),
           // postcssNormalize({ browsers: 'last 2 versions' }),
-          postcssNesting(),
+          postcssNesting,
-        ]).process(css, { from: 'src/app.css', to: 'dest/app.css' });
+        ]).process(cssText);
-        writeFileSync(path.join(outputFolder, filename.replace("js", "css")), result.css);
+        writeFileSync(outputFile.replace("js", "css"), result.css);
       }
       const src = await import(outputFile);
       return {

package.json CHANGED Viewed

@@ -10,6 +10,7 @@
     "bun-types": "^0.5.0"
   },
   "dependencies": {
+    "@blueprintjs/core": "^4.17.6",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",
     "postcss-custom-media": "^9.1.2",

pages/index.css ADDED Viewed

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

pages/index.jsx ADDED Viewed

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

routes/index.astro DELETED Viewed

@@ -1,34 +0,0 @@
-import { useState } from "react";
-import { useRouter } from "@/router.js";
-import TodoList from "@/containers/TodoList.astro";
-const router = useRouter();
-const [count, setCount] = useState(5);
-return (
-  <div>
-    <div>
-      <p>
-        Hello from server path 123: {router.pathname}
-      </p>
-      <TodoList />
-      <div>
-        <button onClick={() => setCount(count - 1)}>-</button>
-        <span>
-          {count}
-        </span>
-        <button onClick={() => setCount(count + 1)}>+</button>
-      </div>
-    </div>
-  </div>
-)
----
-div {
-  padding: 10px;
-  background-color: yellow;
-  & span {
-    color: black;
-  }
-}

routes/index.css DELETED Viewed

@@ -1,11 +0,0 @@
-div {
-  padding: 10px;
-  background - color: turquoise;
-  & span {
-    color: black;
-    padding: 40px;
-    font - size: 30px;
-    font - weight: 600;
-  }
-}

routes/index.jsx DELETED Viewed

@@ -1,27 +0,0 @@
-import { useState } from "react";
-import { useRouter } from "@/router.js";
-import TodoList from "@/containers/TodoList.astro";
-import "index.css";
-const { name, title } = props;
-const router = useRouter();
-const [count, setCount] = useState(5);
-// const { data: todos, isLoading, isRevalidating } = usePromise("/todos");
-return (
-  <div className="container">
-    <div>
-      <p>
-        Hello from server path 123: {router.pathname}
-      </p>
-      <TodoList />
-      <div>
-        <button onClick={() => setCount(count - 1)}>-</button>
-        <span>
-          {count}
-        </span>
-        <button onClick={() => setCount(count + 1)}>+</button>
-      </div>
-    </div>
-  </div>
-);

routes/layout.astro DELETED Viewed

File without changes

routes/page.jsx DELETED Viewed

@@ -1,25 +0,0 @@
-<!--js-->
-import { useState } from "react";
-import { useRouter } from "@/router.js";
-import TodoList from "@/containers/TodoList.astro";
-const router = useRouter();
-const [count, setCount] = useState(5);
-// const { data: todos, isLoading, isRevalidating } = usePromise("/todos");
-<!--jsx-->
-<div>
-  <div>
-    <p>
-      Hello from server path 123: {router.pathname}
-    </p>
-    <TodoList />
-    <div>
-      <button onClick={() => setCount(count - 1)}>-</button>
-      <span>
-        {count}
-      </span>
-      <button onClick={() => setCount(count + 1)}>+</button>
-    </div>
-  </div>
-</div>

~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