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

e417de07 — Peter John

move all logic to single file

Files changed (10) hide show

packages/example/containers/TodoList/TodoList.jsx +1 -1
packages/example/pages/about/page.jsx +1 -1
packages/example/pages/layout.jsx +2 -2
packages/example/pages/page.jsx +1 -1
packages/example/pages/todos/page.jsx +1 -14
packages/parotta/cli.js +5 -10
packages/parotta/error.js +0 -42
packages/parotta/fetch.js +0 -55
packages/parotta/rpc.js +0 -56
packages/parotta/{router.js → runtime.js} +95 -1

packages/example/containers/TodoList/TodoList.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import Todo from "@/components/Todo/Todo";
 import { getTodos } from "@/services/todos.service";
-import { useRpc } from "parotta/rpc";
+import { useRpc } from "parotta/runtime";
 const TodoList = () => {
   const { data } = useRpc(getTodos, {});

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, useRouter } from "parotta/router";
+import { Link, useRouter } from "parotta/runtime";
 import "./page.css";
 export const Head = () => {

packages/example/pages/layout.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
-import { Link } from "parotta/router";
+import { Link } from "parotta/runtime";
-import { ErrorBoundary } from "parotta/error";
+import { ErrorBoundary } from "parotta/runtime";
 import "./layout.css";
 const Layout = ({ children }) => {

packages/example/pages/page.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useRouter } from "parotta/router";
+import { useRouter } from "parotta/runtime";
 import Counter from "@/components/Counter/Counter";
 import "./page.css";

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

@@ -1,6 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
-import { useFetch } from "parotta/fetch";
-// import Todo from "@/components/Todo/Todo";
 import TodoList from "@/containers/TodoList/TodoList";
 import "./page.css";
@@ -11,21 +9,10 @@ export const Head = () => {
 }
 export const Body = () => {
-  // const { data, cache } = useFetch("/api/todos");
-  // useEffect(() => {
-  //   setTimeout(() => {
-  //     cache.invalidate(/todos/);
-  //   }, 3000)
-  // }, []);
   return (
     <div>
       <h1>Todos</h1>
       <ul>
-        {/* {data?.map((item) => (
-          <li key={item.id}>
-            <Todo todo={item} />
-          </li>
-        ))} */}
         <TodoList />
       </ul>
     </div>

packages/parotta/cli.js CHANGED Viewed

@@ -12,7 +12,7 @@ import postcssNesting from "postcss-nesting";
 import { createMemoryHistory } from "history";
 import { createRouter } from 'radix3';
 import mimeTypes from "mime-types";
-import { HeadApp, BodyApp } from "./router";
+import { HeadApp, BodyApp } from "./runtime";
 import { renderToReadableStream } from 'react-dom/server';
 // import { renderToStream } from './render';
@@ -142,13 +142,8 @@ const renderPage = async (url) => {
     "react/jsx-dev-runtime": `https://esm.sh/react@18.2.0${devTag}/jsx-dev-runtime`,
     "react-dom/client": `https://esm.sh/react-dom@18.2.0${devTag}/client`,
     "nprogress": "https://esm.sh/nprogress@0.2.0",
-    // "parotta/router": `https://esm.sh/parotta@${version}/router.js`,
+    // "parotta/runtime": `https://esm.sh/parotta@${version}/runtime.js`,
-    // "parotta/error": `https://esm.sh/parotta@${version}/error.js`,
-    // "parotta/fetch": `https://esm.sh/parotta@${version}/fetch.js`,
-    "parotta/router": `/parotta/router.js`,
+    "parotta/runtime": `/parotta/runtime.js`,
-    "parotta/error": `/parotta/error.js`,
-    "parotta/fetch": `/parotta/fetch.js`,
-    "parotta/rpc": `/parotta/rpc.js`,
     ...nodeDeps,
     ...components,
     ...containers,
@@ -175,7 +170,7 @@ import React from "react";
 import { hydrateRoot } from "react-dom/client";
 import { createBrowserHistory } from "history";
 import { createRouter } from "radix3";
-import { HeadApp, BodyApp } from "parotta/router";
+import { HeadApp, BodyApp } from "parotta/runtime";
 const history = createBrowserHistory();
@@ -264,7 +259,7 @@ const renderJs = async (src) => {
       }
     })
     if (addRpcImport) {
-      lines.unshift(`import rpc from "parotta/rpc"`);
+      lines.unshift(`import { rpc } from "parotta/runtime"`);
     }
     // remove .css and .service imports
     const filteredJsx = lines.filter((ln) => !ln.includes(".css") && !ln.includes(".service")).join("\n");

packages/parotta/error.js DELETED Viewed

@@ -1,42 +0,0 @@
-import React from 'react';
-const changedArray = (a = [], b = []) =>
-  a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]))
-export class ErrorBoundary extends React.Component {
-  // static propTypes = {
-  //   resetKeys: PropTypes.arrayOf(PropTypes.any),
-  // }
-  static getDerivedStateFromError(error) {
-    return { error }
-  }
-  state = {}
-  componentDidCatch(error, info) {
-    this.props.onError?.(error, info)
-  }
-  componentDidUpdate(prevProps, prevState) {
-    const { error } = this.state
-    const { resetKeys } = this.props
-    if (
-      error !== null &&
-      prevState.error !== null &&
-      changedArray(prevProps.resetKeys, resetKeys)
-    ) {
-      this.setState({});
-    }
-  }
-  render() {
-    const { error } = this.state;
-    const { children, fallback } = this.props;
-    if (error) {
-      if (React.isValidElement(fallback)) {
-        return fallback;
-      }
-    }
-    return children;
-  }
-}

packages/parotta/fetch.js DELETED Viewed

@@ -1,55 +0,0 @@
-import { useState, useMemo } from "react";
-export const domain = () => typeof window !== 'undefined' ? window.origin : "http://0.0.0.0:3000";
-export const globalCache = new Map();
-export const useCache = () => {
-  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}`;
-  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 = useCache();
-  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);
-}

packages/parotta/rpc.js DELETED Viewed

@@ -1,56 +0,0 @@
-import { useState, useMemo } from "react";
-export const domain = () => typeof window !== 'undefined' ? window.origin : "http://0.0.0.0:3000";
-export const globalCache = new Map();
-const rpc = (serviceName) => async (params = {}) => {
-  const res = await fetch(`${domain()}/services/${serviceName}`, {
-    method: "POST",
-    headers: {
-      "Accept": "application/json",
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(params),
-  })
-  return await res.json();
-}
-export const useCache = () => {
-  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,
-  }
-}
-export const useRpc = (fn, params) => {
-  const cache = useCache();
-  const key = `${fn.name}:${JSON.stringify(params)}`;
-  const value = cache.get(key);
-  if (value) {
-    if (value instanceof Promise) {
-      throw value;
-    } else if (value instanceof Error) {
-      throw value;
-    }
-    return { data: value, cache };
-  }
-  cache.set(key, fn(params).then((v) => cache.set(key, v)));
-  throw cache.get(key);
-}
-export default rpc;

packages/parotta/{router.js → runtime.js} RENAMED Viewed

@@ -1,9 +1,65 @@
-import {
+import React, {
   Fragment, Suspense, createElement, createContext,
   useContext, useState, useEffect, useMemo, useSyncExternalStore, useTransition
 } from "react";
 import nProgress from "nprogress";
+export const domain = () => typeof window !== 'undefined' ? window.origin : "http://0.0.0.0:3000";
+export const globalCache = new Map();
+const changedArray = (a = [], b = []) =>
+  a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]))
+export const rpc = (serviceName) => async (params = {}) => {
+  const res = await fetch(`${domain()}/services/${serviceName}`, {
+    method: "POST",
+    headers: {
+      "Accept": "application/json",
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(params),
+  })
+  return await res.json();
+}
+export const useCache = () => {
+  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,
+  }
+}
+export const useRpc = (fn, params) => {
+  const cache = useCache();
+  const key = `${fn.name}:${JSON.stringify(params)}`;
+  const value = cache.get(key);
+  if (value) {
+    if (value instanceof Promise) {
+      throw value;
+    } else if (value instanceof Error) {
+      throw value;
+    }
+    return { data: value, cache };
+  }
+  cache.set(key, fn(params).then((v) => cache.set(key, v)));
+  throw cache.get(key);
+}
 export const RouterContext = createContext(undefined);
 const getMatch = (radixRouter, pathname) => {
@@ -131,4 +187,42 @@ export const NavLink = ({ children, className, activeClassName, ...props }) => {
   const { pathname } = useRouter();
   const classNames = pathname === props.href ? [activeClassName, className] : [className];
   return <Link className={classNames} {...props} >{children}</Link>
+}
+export class ErrorBoundary extends React.Component {
+  // static propTypes = {
+  //   resetKeys: PropTypes.arrayOf(PropTypes.any),
+  // }
+  static getDerivedStateFromError(error) {
+    return { error }
+  }
+  state = {}
+  componentDidCatch(error, info) {
+    this.props.onError?.(error, info)
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const { error } = this.state
+    const { resetKeys } = this.props
+    if (
+      error !== null &&
+      prevState.error !== null &&
+      changedArray(prevProps.resetKeys, resetKeys)
+    ) {
+      this.setState({});
+    }
+  }
+  render() {
+    const { error } = this.state;
+    const { children, fallback } = this.props;
+    if (error) {
+      if (React.isValidElement(fallback)) {
+        return fallback;
+      }
+    }
+    return children;
+  }
 }

~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