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

9e6ce31c — Peter John

improve dir structure

Files changed (22) hide show

.gitignore +2 -1
api/health.js +6 -1
api/todos/[id]/index.js +6 -1
astroPlugin.js +24 -6
bun.lockb +0 -0
components/Todo.astro +15 -0
containers/TodoList.astro +10 -0
index.css +0 -3
index.js +101 -51
package-lock.json +150 -0
package.json +4 -0
public/index.html +0 -44
routes/about/index.jsx +0 -12
routes/index.astro +14 -17
routes/layout.astro +0 -0
routes/page.jsx +21 -0
{public → static}/favicon.ico +0 -0
{public → static}/logo192.png +0 -0
{public → static}/logo512.png +0 -0
{public → static}/manifest.json +0 -0
{public → static}/robots.txt +0 -0
utils.js +0 -13

.gitignore CHANGED Viewed

@@ -168,4 +168,5 @@ dist
 .yarn/install-state.gz
 .pnp.\*
 .cache
-dist
+dist
+.vercel

api/health.js CHANGED Viewed

@@ -1,3 +1,8 @@
 export const onGet = (req) => {
-  return new Response("ok");
+  return new Response("ok", {
+    headers: {
+      "Content-Type": "application/json",
+    },
+    status: 200,
+  });
 }

api/todos/[id]/index.js CHANGED Viewed

@@ -8,7 +8,12 @@ export const onGet = async (req) => {
     filter: { id },
   });
   const data = JSON.stringify(item);
-  return new Response(data);
+  return new Response(data, {
+    headers: {
+      "Content-Type": "application/json",
+    },
+    status: 200,
+  });
 }
 export const onPut = async (req) => {

astroPlugin.js CHANGED Viewed

@@ -1,4 +1,9 @@
 import { plugin } from "bun";
+import path from "path";
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from "fs";
+import postcss from "postcss"
+import autoprefixer from "autoprefixer";
+import postcssNested from "postcss-nested";
 const transpiler = new Bun.Transpiler({
   loader: "jsx",
@@ -9,13 +14,16 @@ const transpiler = new Bun.Transpiler({
 plugin({
   name: "Astro",
   async setup(build) {
-    const { readFileSync, writeFileSync } = await import("fs");
     build.onLoad({ filter: /\.astro$/ }, async (args) => {
+      const folder = path.dirname(args.path).replace(process.cwd(), "");
+      const filename = path.basename(args.path).replace("astro", "js");
+      const outputFolder = path.join(process.cwd(), ".cache", folder);
+      const outputFile = path.join(outputFolder, filename);
       const text = readFileSync(args.path, "utf8");
-      const [_, js, html] = text.split("---");
+      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 code = await transpiler.transform(`
+      const tpl = `
         ${imports}
         export default () => {
@@ -25,10 +33,20 @@ plugin({
             ${html}
           );
         }
-      `);
+      `;
+      // console.log('tpl', tpl);
+      const code = await transpiler.transform(tpl);
       // console.log('code', code);
+      if (!existsSync(outputFolder)) {
+        mkdirSync(outputFolder);
+      }
-      writeFileSync("./dist/index.js", code)
+      writeFileSync(outputFile, code);
+      if (css) {
+        const result = postcss([autoprefixer, postcssNested])
+          .process(css, { from: 'src/app.css', to: 'dest/app.css' });
+        writeFileSync(path.join(outputFolder, filename.replace("js", "css")), result.css);
+      }
-      const src = await import("./dist/index.js");
+      const src = await import(outputFile);
       return {
         exports: {
           default: src.default,

bun.lockb CHANGED Viewed

Binary file

components/Todo.astro ADDED Viewed

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

containers/TodoList.astro ADDED Viewed

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

index.css DELETED Viewed

@@ -1,3 +0,0 @@
-.ccs {
-  display: flex;
-}

index.js CHANGED Viewed

@@ -1,6 +1,9 @@
 import './astroPlugin.js';
+import path from 'path';
+import { SWRConfig } from 'swr';
-import { renderToString, renderToReadableStream } from 'react-dom/server';
+import { renderToReadableStream } from 'react-dom/server';
 import { RouterProvider } from './router.js';
+import packageJson from "./package.json";
 const router = new Bun.FileSystemRouter({
   style: "nextjs",
@@ -20,7 +23,13 @@ const renderApi = async (route, req) => {
   console.log('routeImport', routeImport);
 }
+const deps = Object.keys(packageJson.dependencies).reduce((acc, dep) => {
+  acc[dep] = `https://esm.sh/${dep}@${packageJson.dependencies[dep]}?dev`;
+  return acc;
+}, {})
 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);
@@ -36,6 +45,7 @@ const renderPage = async (filePath, url, params) => {
     <html lang="en">
       <head>
         {/* {routeImport.head()} */}
+        <link rel="stylesheet" href="/routes/index.css" />
         <script id="initial_route_context" type='application/json' dangerouslySetInnerHTML={{
           __html: JSON.stringify(initialRouteValue)
         }} />
@@ -43,25 +53,44 @@ const renderPage = async (filePath, url, params) => {
           __html: JSON.stringify(
             {
               "imports": {
-                "react": "https://esm.sh/react@18.2.0?dev",
+                ...deps,
-                "react-dom": "https://esm.sh/react-dom@18.2.0?dev",
                 "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",
-                "@/utils": "/assets/js/src/utils.js",
                 "@/router.js": "/assets/js/src/router.js",
+                "@/routes/index.js": "/routes/index.js",
+                "@/components/Todo.astro": "/components/Todo.js",
+                "@/containers/TodoList.astro": "/containers/TodoList.js"
               }
             }
           )
         }}>
         </script>
-        {/* <script id="initial_swr_fallback" dangerouslySetInnerHTML={{ __html: JSON.stringify(value) }} /> */}
+        <script type="module" defer dangerouslySetInnerHTML={{
+          __html: `
+          import* as JSX from "react/jsx-dev-runtime";
+          var $jsx = JSX.jsxDEV;
+          import { hydrateRoot } from 'react-dom/client';
+          import { SWRConfig } from 'swr';
+          import {RouterProvider} from "@/router.js";
+          import Page from "@/routes/${file}";
-        <script type="module" src="/assets/js/routes/index.astro" defer></script>
+          const initialRouteValue = JSON.parse(document.getElementById('initial_route_context').textContent);
+          const root = hydrateRoot(document.getElementById("root"), $jsx(SWRConfig, {
+            value: { suspense: true },
+            children: $jsx(RouterProvider, {
+              value: initialRouteValue,
+              children: $jsx(Page, {}, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this));
+        `}}></script>
       </head>
       <body>
         <div id="root">
+          <SWRConfig value={{ suspense: true }}>
-          <RouterProvider value={initialRouteValue}>
+            <RouterProvider value={initialRouteValue}>
-            <Page />
+              <Page />
-          </RouterProvider>
+            </RouterProvider>
+          </SWRConfig>
         </div>
       </body>
     </html >
@@ -74,59 +103,80 @@ 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();
+  const result = await transpiler.transform(src);
+  return new Response(result, {
+    headers: {
+      'Content-Type': 'application/javascript',
+    },
+    status: 200,
+  });
+}
+const sendFile = async (url) => {
+  const localFile = url.pathname.replace("/assets/js/", "").replace("src/", "");
+  const result = await Bun.file(path.join(".cache", localFile)).text();
+  let contentType = "application/javascript";
+  if (url.pathname.endsWith(".css")) {
+    contentType = 'text/css';
+  }
+  return new Response(result, {
+    headers: {
+      'Content-Type': contentType,
+    },
+    status: 200,
+  });
+}
 export default {
   port: 3000,
   async fetch(req) {
     const url = new URL(req.url);
+    console.log(req.method, url.pathname)
-    if (url.pathname.startsWith("/dist/js")) {
+    if (url.pathname.includes("/components/") || url.pathname.includes("/containers/") || url.pathname.includes("/routes/")) {
-      const src = await Bun.file("./dist/index.js").text();
-      return new Response(src, {
+      return sendFile(url);
-        headers: {
-          'Content-Type': 'application/javascript',
-        },
-        status: 200,
-      });
     }
-    if (url.pathname.startsWith("/assets/js")) {
+    if (url.pathname.includes("/assets/js")) {
-      const lib = url.pathname.replace("/assets/js/", "");
-      const localFile = lib.replace("src/", "");
-      let result;
-      if (localFile.includes("routes")) {
-        result = await transpiler.transform(`
-          import { hydrateRoot } from 'react-dom/client';
-          import {RouterProvider} from "@/router.js";
-          import Page from "/dist/js/index.js";
-          const initialRouteValue = JSON.parse(document.getElementById('initial_route_context').textContent);
-          const root = hydrateRoot(document.getElementById('root'), (
-            <RouterProvider value={initialRouteValue}>
-              <Page />
-            </RouterProvider>
-          ));
-        `);
-      } else {
-        const src = await Bun.file(localFile).text();
-        result = await transpiler.transform(src);
-      }
-      return new Response(result, {
+      return renderJs(url);
-        headers: {
-          'Content-Type': 'application/javascript',
-        },
-        status: 200,
-      });
     }
-    if (url.pathname.startsWith("/api")) {
+    if (url.pathname.includes("/api")) {
-      console.log('api', url.pathname);
-      // return renderApi(route, req);
+      return renderApi(url, req);
+    }
+    if (url.pathname.includes("/favicon")) {
+      return new Response(`Not Found`, {
+        headers: { 'Content-Type': 'text/html' },
+        status: 404,
+      });
     }
     return renderPage("./routes/index.astro", url, {});
     // const route = router.match(url.pathname);
     // if (route) {
     //   return renderPage(route, url);
     // }
-    return new Response(`Not Found`, {
-      headers: { 'Content-Type': 'text/html' },
-      status: 404,
-    });
   },
 };

package-lock.json CHANGED Viewed

@@ -6,8 +6,11 @@
     "": {
       "name": "quickstart",
       "dependencies": {
+        "postcss": "^8.4.21",
+        "postcss-js": "^4.0.1",
         "react": "18.2.0",
         "react-dom": "^18.2.0",
+        "swr": "^2.1.0",
         "zod": "^3.21.0"
       },
       "devDependencies": {
@@ -18,6 +21,14 @@
       "version": "0.5.7",
       "dev": true
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "license": "MIT"
@@ -32,6 +43,63 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "node_modules/postcss": {
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "license": "MIT",
@@ -61,6 +129,36 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "engines": {
+        "node": ">=0.10.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"
+      }
+    },
     "node_modules/zod": {
       "version": "3.21.0",
       "license": "MIT",
@@ -74,6 +172,11 @@
       "version": "0.5.7",
       "dev": true
     },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
+    },
     "js-tokens": {
       "version": "4.0.0"
     },
@@ -83,6 +186,34 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+    },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "postcss": {
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "requires": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "requires": {
+        "camelcase-css": "^2.0.1"
+      }
+    },
     "react": {
       "version": "18.2.0",
       "requires": {
@@ -104,6 +235,25 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+    },
+    "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": {}
+    },
     "zod": {
       "version": "3.21.0"
     }

package.json CHANGED Viewed

@@ -10,8 +10,12 @@
     "bun-types": "^0.5.0"
   },
   "dependencies": {
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
+    "postcss-nested": "^6.0.1",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
+    "swr": "^2.1.0",
     "zod": "^3.21.0"
   }
 }

public/index.html DELETED Viewed

@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-    <script src="/src/index.jsx" async type="module"></script>
-  </body>
-</html>

routes/about/index.jsx DELETED Viewed

@@ -1,12 +0,0 @@
-import { page, useRouter } from "@/utils";
-export default page(() => {
-  const router = useRouter();
-  return (
-    <div>
-      <p>
-        Hello from server
-      </p>
-    </div>
-  );
-});

routes/index.astro CHANGED Viewed

@@ -1,34 +1,31 @@
 ---
-import { useState } from 'react';
+import { useState } from "react";
-import { useRouter } from '@/router.js';
+import { useRouter } from "@/router.js";
-const head = {
-  title: "pyros.sh",
-  description:
-    "Hi there, I'm Peter John, a fullstack dev from Bangalore, India",
+import TodoList from "@/containers/TodoList.astro";
-  image: "/favicon.png",
-  keywords: "pyros.sh,pyrossh",
-};
 const router = useRouter();
 const [count, setCount] = useState(5);
+// const { data: todos, isLoading, isRevalidating } = usePromise("/todos");
 ---
-<div className="home-page">
+<div>
   <div>
     <p>
       Hello from server path 123: {router.pathname}
     </p>
+    <TodoList />
     <div>
-      <button onClick={() => setCount(count - 1)}>
+      <button onClick={() => setCount(count - 1)}>-</button>
-        -
-      </button>
       <div>
         {count}
       </div>
-      <button onClick={() => setCount(count + 1)}>
+      <button onClick={() => setCount(count + 1)}>+</button>
-        +
-      </button>
     </div>
   </div>
 </div>
+---
+div {
+  padding: 10px;
+  background-color: yellow;
+}

routes/layout.astro ADDED Viewed

File without changes

routes/page.jsx ADDED Viewed

@@ -0,0 +1,21 @@
+export default () => {
+  return (
+    <div className="home-page">
+      <div>
+        <p>
+          Hello from server path 123: {router.pathname}
+        </p>
+        <Suspense fallback={"Loading..."}>
+          <TodoList />
+        </Suspense>
+        <div>
+          <button onClick={() => setCount(count - 1)}> -</button>
+          <div>
+            {count}
+          </div>
+          <button onClick={() => setCount(count + 1)}> +</button>
+        </div>
+      </div>
+    </div>
+  )
+}

{public → static}/favicon.ico RENAMED Viewed

File without changes

{public → static}/logo192.png RENAMED Viewed

File without changes

{public → static}/logo512.png RENAMED Viewed

File without changes

{public → static}/manifest.json RENAMED Viewed

File without changes

{public → static}/robots.txt RENAMED Viewed

File without changes

utils.js DELETED Viewed

@@ -1,13 +0,0 @@
-export const json = async (body, status = 200, headers = {}) => {
-  return new Response(body, {
-    headers: {
-      'Content-Type': 'application/json',
-      ...headers,
-    },
-    status
-  });
-}
-// const ErrorBoundary = () => {
-// }

~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