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

377409cc — Peter John

implement fetch

Files changed (12) hide show

packages/example/package.json +1 -2
packages/example/routes/404/page.jsx +2 -4
packages/example/routes/about/page.jsx +10 -4
packages/example/routes/app.jsx +7 -18
packages/example/routes/page.jsx +20 -8
packages/example/routes/todos/:id/api.js +8 -0
packages/example/routes/todos/:id/page.css +11 -0
packages/example/routes/todos/:id/page.jsx +14 -0
packages/example/routes/todos/page.jsx +5 -8
packages/parotta/cli.js +2 -2
packages/parotta/router.js +71 -21
readme.md +5 -6

packages/example/package.json CHANGED Viewed

@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "react": "18.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.2.0"
-    "swr": "2.1.0"
   }
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import "./page.css";
-const NotFound = () => {
+export default function Page() {
   return (
     <div className="notfound-page">
       <div>
@@ -12,6 +12,4 @@ const NotFound = () => {
       </div>
     </div>
   )
-}
+}
-export default NotFound;

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

@@ -2,7 +2,15 @@ import React from 'react';
 import { Link, useRouter } from "parotta/router";
 import "./page.css";
+export function Head() {
+  return (
+    <>
+      <title>About us</title>
+    </>
+  )
+}
-const AboutPage = () => {
+export default function Page() {
   const router = useRouter();
   return (
     <div className="about-page">
@@ -17,6 +25,4 @@ const AboutPage = () => {
       </footer>
     </div>
   )
-}
+}
-export default AboutPage;

packages/example/routes/app.jsx CHANGED Viewed

@@ -1,24 +1,13 @@
 import React, { Suspense } from "react";
-import { SWRConfig } from "swr";
 import { ErrorBoundary } from "parotta/error";
-const App = ({ children }) => {
+export default function App({ children }) {
   console.log('app');
   return (
-    <SWRConfig value={{
-      fallback: {
-        'https://jsonplaceholder.typicode.com/todos/1': { id: '123' },
-      },
-      // fallbackData: null,
-      fetcher: (resource, init) => fetch(resource, init).then(res => res.json()), suspense: true
-    }}>
-      <ErrorBoundary onError={(err) => console.log(err)} fallback={<p>Oops something went wrong</p>}>
+    <ErrorBoundary onError={(err) => console.log(err)} fallback={<p>Oops something went wrong</p>}>
-        <Suspense fallback={<p>Loading...</p>}>
+      <Suspense fallback={<p>Loading...</p>}>
-          {children}
+        {children}
-        </Suspense>
+      </Suspense>
-      </ErrorBoundary>
+    </ErrorBoundary>
-    </SWRConfig>
   )
-}
+}
-export default App;

packages/example/routes/page.jsx CHANGED Viewed

@@ -1,13 +1,27 @@
-import React from 'react';
+import React, { useEffect } from 'react';
-import useSWR from "swr";
-import { Link, useRouter } from "parotta/router";
+import { Link, useRouter, useFetch } from "parotta/router";
 import Counter from "@/components/Counter/Counter";
 import "./page.css";
+export function Head() {
+  const { data } = useFetch("/todos");
+  return (
+    <>
+      <title>Parotta</title>
+    </>
+  )
+}
-const HomePage = () => {
+export default function Page() {
+  const { data, cache } = useFetch("/todos");
   console.log('page');
+  console.log('data', data);
+  useEffect(() => {
+    setTimeout(() => {
+      cache.invalidate(/todos/);
+    }, 3000)
+  }, [])
   // const todo = useAsync('123', () => getData());
-  const { data } = useSWR(`https://jsonplaceholder.typicode.com/todos/1`);
   const router = useRouter();
   return (
     <div className="home-page">
@@ -23,6 +37,4 @@ const HomePage = () => {
       </footer>
     </div>
   )
-}
+}
-export default HomePage;

packages/example/routes/todos/:id/api.js CHANGED Viewed

@@ -11,6 +11,14 @@ export const onGet = async (req) => {
   const item = await todosCollection.findOne({
     filter: { id },
   });
+  if (!item) {
+    return new Response(`todo '${id}' not found`, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+      status: 404,
+    });
+  }
   const data = JSON.stringify(item);
   return new Response(data, {
     headers: {

packages/example/routes/todos/:id/page.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;
+  }
+}

packages/example/routes/todos/:id/page.jsx ADDED Viewed

@@ -0,0 +1,14 @@
+import { Suspense } from "react";
+import { Link, useRouter, useFetch } from "parotta/router";
+// import "./index.css";
+export default function Page() {
+  const { params } = useRouter();
+  const data = useFetch(`/todos/${params.id}`);
+  console.log('data', data);
+  return (
+    <div className="todos-page">
+      <h1>Todo no: {params.id}</h1>
+    </div>
+  )
+}

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

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

packages/parotta/cli.js CHANGED Viewed

@@ -112,10 +112,10 @@ const renderPage = async (filePath, url, params) => {
   const components = mapDeps("components");
   const containers = mapDeps("containers");
   const cssFile = `${filePath.replace("jsx", "css")}`;
+  const mainPage = await import(path.join(process.cwd(), filePath));
   const stream = await renderToReadableStream(
     <html lang="en">
       <head>
-        <title>Parotta</title>
         <link rel="preload" href={cssFile} as="style" />
         <link rel="stylesheet" href={cssFile} />
         <script type="importmap" dangerouslySetInnerHTML={{
@@ -140,6 +140,7 @@ const renderPage = async (filePath, url, params) => {
           )
         }}>
         </script>
+        <mainPage.Head />
         <script type="module" defer={true} dangerouslySetInnerHTML={{
           __html: `
 import React from "react";
@@ -180,7 +181,6 @@ hydrateRoot(document.getElementById("root"), React.createElement(Router, {
       </body>
     </html >
   );
-  // injectToStream('<script type="module" src="/main.js"></script>', { flush: true });
   return new Response(stream, {
     headers: { 'Content-Type': 'text/html' },
     status: 200,

packages/parotta/router.js CHANGED Viewed

@@ -1,8 +1,63 @@
-import React, { createContext, useContext, useState, useEffect } from "react";
+import React, { createContext, useContext, useState, useEffect, useMemo } from "react";
+export const isClient = () => typeof window !== 'undefined';
+export const domain = () => isClient() ? window.origin : "http://0.0.0.0:3000";
+export const globalCache = new Map();
+export const useFetchCache = () => {
+  const [_, rerender] = useState(false);
+  const cache = useMemo(() => globalCache, []);
+  const get = (k) => cache.get(k)
+  const set = (k, v) => {
+    cache.set(k, v);
+    rerender((c) => !c);
+  }
+  const invalidate = (regex) => {
+    Array.from(cache.keys())
+      .filter((k) => regex.test(k))
+      .forEach((k) => {
+        fetchData(k).then((v) => set(k, v));
+      });
+  }
+  return {
+    get,
+    set,
+    invalidate,
+  }
+}
+const fetchData = async (route) => {
+  const url = `${domain()}${route}`;
+  console.log('url', url);
+  const res = await fetch(url, {
+    headers: {
+      "Accept": "application/json",
+    },
+  });
+  if (res.ok) {
+    return await res.json();
+  } else {
+    return new Error(await res.text());
+  }
+}
+export const useFetch = (url) => {
+  const cache = useFetchCache();
+  const value = cache.get(url);
+  if (value) {
+    if (value instanceof Promise) {
+      throw value;
+    } else if (value instanceof Error) {
+      throw value;
+    }
+    return { data: value, cache };
+  }
+  cache.set(url, fetchData(url).then((v) => cache.set(url, v)));
+  throw cache.get(url);
+}
 export const RouterContext = createContext(undefined);
-const getRoute = (radixRouter, pathname) => {
+const getMatch = (radixRouter, pathname) => {
   const matchedPage = radixRouter.lookup(pathname);
   if (!matchedPage) {
     return radixRouter.lookup("/404");
@@ -24,40 +79,35 @@ const loadCss = (pathname) => {
 }
 export const Router = ({ App, history, radixRouter }) => {
-  const [Page, setPage] = useState(() => getRoute(radixRouter, history.location.pathname));
+  const [MatchedPage, setMatchedPage] = useState(() => getMatch(radixRouter, history.location.pathname));
   useEffect(() => {
     return history.listen(({ location }) => {
       loadCss(location.pathname);
-      setPage(getRoute(radixRouter, location.pathname));
+      setMatchedPage(getMatch(radixRouter, location.pathname));
     });
   }, [])
   console.log('Router');
   return React.createElement(RouterContext.Provider, {
+    value: {
-    value: history,
+      history: history,
+      params: MatchedPage.params || {},
+    },
     children: React.createElement(App, {
-      children: React.createElement(Page, {})
+      children: React.createElement(MatchedPage, {})
     }),
   });
 }
 export const useRouter = () => {
-  const history = useContext(RouterContext);
+  const { history, params } = useContext(RouterContext);
   return {
     pathname: history.location.pathname,
-    query: {},
+    query: new URLSearchParams(history.location.search),
-    params: {},
+    params,
-    push: (path) => {
-      history.push(path)
+    push: history.push,
-    },
-    replace: (path) => {
+    replace: history.replace,
-      history.replace(path)
-    },
-    forward: () => {
-      history.forward();
+    forward: history.forward,
-    },
-    back: () => {
-      history.back();
+    back: history.back,
-    },
     reload: () => window.location.reload(),
   };
 }

readme.md CHANGED Viewed

@@ -5,9 +5,8 @@ It uses File system routing with SSR with streaming + CSR as the method to rende
 It is very opionated and has set of idiomatic ways of doing things.
 ### Todo
-1. Add async streaming
+1. Hydrate fetch cache
-2. Add helmet functionality
-3. Improve css loading
+2. Improve css loading
-4. Improve react page loading (try to remove flash)
+3. Improve react page loading (try to remove flash)
-5. Add build step
+4. Add build step
-6. Deploy to Docker, Deno deploy, Cloudflare workers, Vercel edge functions, Bun edge (whenever it releases)
+5. Deploy to Docker, Deno deploy, Cloudflare workers, Vercel edge functions, Bun edge (whenever it releases)

~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