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

fbdae633 — Peter John

add atom

Files changed (5) hide show

bun.lockb +0 -0
index.js +20 -36
jsxPlugin.js +1 -2
package.json +0 -1
router.js +67 -21

bun.lockb CHANGED Viewed

Binary file

index.js CHANGED Viewed

@@ -1,8 +1,7 @@
 import './jsxPlugin.js';
 import path from 'path';
-import { SWRConfig } from 'swr';
 import { renderToReadableStream } from 'react-dom/server';
-import { RouterProvider } from './router.js';
+import { routerAtom } from './router.js';
 import packageJson from "./package.json";
 const transpiler = new Bun.Transpiler({
@@ -32,15 +31,13 @@ const renderPage = async (filePath, url, params) => {
     pathname: url.pathname,
   }
   console.log('filePath', filePath);
+  routerAtom.update(() => initialRouteValue);
   const routeImport = await import(filePath);
   const Page = routeImport.default;
   const stream = await renderToReadableStream(
     <html lang="en">
       <head>
-        <link rel="stylesheet" href="/pages/index.css" />
+        <link rel="stylesheet" href="/routes/index/page.css" />
-        <script id="initial_route_context" type='application/json' dangerouslySetInnerHTML={{
-          __html: JSON.stringify(initialRouteValue)
-        }} />
         <script type="importmap" dangerouslySetInnerHTML={{
           __html: JSON.stringify(
             {
@@ -49,7 +46,7 @@ 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",
-                "@/pages/index.jsx": "/pages/index.js",
+                "@/routes/index/page.jsx": "/routes/index/page.js",
                 "@/components/Todo.jsx": "/components/Todo.js",
                 "@/containers/TodoList.jsx": "/containers/TodoList.js"
               }
@@ -59,30 +56,19 @@ const renderPage = async (filePath, url, params) => {
         </script>
         <script type="module" defer dangerouslySetInnerHTML={{
           __html: `
-          import* as JSX from "react/jsx-dev-runtime";
+          import React from 'react';
-          var $jsx = JSX.jsxDEV;
           import { hydrateRoot } from 'react-dom/client';
-          import { SWRConfig } from 'swr';
-          import {RouterProvider} from "@/router.js";
+          import { routerAtom } from "@/router.js";
-          import Page from "@/pages/index.jsx";
+          import Page from "@/routes/index/page.jsx";
-          const initialRouteValue = JSON.parse(document.getElementById('initial_route_context').textContent);
+          routerAtom.update(() => (${JSON.stringify(initialRouteValue)}));
-          const root = hydrateRoot(document.getElementById("root"), $jsx(SWRConfig, {
+          hydrateRoot(document.getElementById("root"), React.createElement(Page, {}, undefined, false, undefined, this));
-            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}>
-              <Page />
+          <Page />
-            </RouterProvider>
-          </SWRConfig>
         </div>
       </body>
     </html >
@@ -126,26 +112,24 @@ export default {
   port: 3000,
   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("/pages/")) {
+    if (url.pathname.includes("/components/") || url.pathname.includes("/containers/") || url.pathname.includes("/routes/")) {
       return sendFile(url);
     }
     if (url.pathname.includes("/assets/js")) {
       return renderJs(url);
     }
-    if (url.pathname.includes("/api")) {
-      return renderApi(url, req);
-    }
     if (url.pathname.includes("/favicon")) {
       return new Response(`Not Found`, {
         headers: { 'Content-Type': 'text/html' },
         status: 404,
       });
     }
+    if (url.pathname.includes("/")) {
-    return renderPage("./pages/index.jsx", url, {});
+      return renderPage("./routes/index/page.jsx", 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,
+    });
   },
 };

jsxPlugin.js CHANGED Viewed

@@ -24,9 +24,8 @@ plugin({
       const outputFile = path.join(outputFolder, filename);
       const jsxCode = readFileSync(args.path, "utf8");
       const code = await transpiler.transform(jsxCode);
-      // console.log('code', code);
       if (!existsSync(outputFolder)) {
-        mkdirSync(outputFolder);
+        mkdirSync(outputFolder, { recursive: true });
       }
       writeFileSync(outputFile, code);
       if (existsSync(cssFile)) {

package.json CHANGED Viewed

@@ -19,7 +19,6 @@
     "react": "18.2.0",
     "react-dom": "^18.2.0",
     "react-streaming": "^0.3.5",
-    "swr": "^2.1.0",
     "zod": "^3.21.0"
   }
 }

router.js CHANGED Viewed

@@ -1,26 +1,72 @@
-import { createContext, useContext } from 'react';
+import { useState, useEffect } from 'react';
-const Context = createContext(undefined)
-export const RouterProvider = ({ value, children }) => {
+export const atom = (initial) => {
+  let value;
-  return <Context.Provider value={value}>{children}</Context.Provider>
+  const isDerived = typeof initial === 'function';
+  const subs = new Set();
+  const get = (a) => {
+    a.subscribe(compute);
+    return a.getValue();
+  };
+  const compute = () => {
+    value = initial(get);
+    subs.forEach((sub) => {
+      sub(value);
+    });
+  };
+  if (isDerived) {
+    compute();
+  } else {
+    value = initial;
-}
+  }
-export const useRouter = () => {
-  const state = useContext(Context);
   return {
-    query: state.query,
-    pathname: state.pathname,
-    params: state.params,
-    push: () => {
-    },
-    replace: () => {
+    getValue() {
+      return value;
     },
+    subscribe(fn) {
+      subs.add(fn);
-    prefetch: () => {
+      return () => subs.delete(fn);
     },
+    update(fn) {
+      value = fn(value);
-    beforePopState: () => {
+      subs.forEach((sub) => {
+        sub(value);
+      });
     },
+  };
+};
+export const useAtom = (atom) => {
+  const [data, setData] = useState(atom.getValue());
-    back: () => { },
+  useEffect(() => {
+    return atom.subscribe((value) => {
+      setData(value);
+    });
+  }, []);
+  return data;
+};
+export const routerAtom = atom({
+  pathname: "/",
+  query: {},
+  params: {},
+})
-    reload: () => window.location.reload(),
+export const useRouter = () => useAtom(routerAtom);
+export const push = () => {
-  }
+}
+export const replace = () => {
-}
+}
+export const prefetch = () => {
+}
+export const beforePopState = () => {
+}
+export const back = () => {
+}
+export const reload = () => window.location.reload()

~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