edge-city

git clone https://pyrossh.dev/repos/edge-city.git
Discussions: https://groups.google.com/g/rust-embed-devs

edge-city is a next level meta-framework for react that runs only on edge runtimes

7d46866a — pyrossh

HEAD -> main

update app

Files changed (10) hide show

example/src/components/Counter/Counter.jsx +2 -2
example/src/pages/app.jsx +14 -6
lib/bin/cli.js +1 -1
lib/{client/hydratePage.js → hydratePage.js} +7 -7
lib/index.js +0 -29
lib/index.test.js +0 -15
lib/link.js +1 -1
lib/package.json +1 -1
lib/router.js +13 -21
lib/server/renderPage.js +8 -10

example/src/components/Counter/Counter.jsx CHANGED Viewed

@@ -8,11 +8,11 @@ const Counter = () => {
   const decrement = () => setCount(count + 1);
   return (
     <div className="counter">
-      <Button onClick={increment}>
+      <Button onPress={increment}>
         -
       </Button>
       <span className="count">{count}</span>
-      <Button onClick={decrement}>
+      <Button onPress={decrement}>
         +
       </Button>
     </div>

example/src/pages/app.jsx CHANGED Viewed

@@ -1,15 +1,23 @@
+import { Suspense } from "react";
 import { SSRProvider } from "react-aria";
+import { HelmetProvider } from 'react-helmet-async';
+import { usePage } from "edge-city/router";
 import Layout from "@/components/Layout/Layout";
 import "./normalize.css";
 import "./spectrum.css";
 import "./app.css";
-export default function App({ children }) {
+export default function App({ helmetContext }) {
+  const Page = usePage();
   return (
+    <HelmetProvider context={helmetContext}>
-    <SSRProvider>
+      <SSRProvider>
-      <Layout>
+        <Layout>
+          <Suspense fallback={<p>Routing....</p>}>
-        {children}
+            <Page />
+          </Suspense>
-      </Layout>
+        </Layout>
-    </SSRProvider>
+      </SSRProvider>
+    </HelmetProvider>
   );
 }

lib/bin/cli.js CHANGED Viewed

@@ -156,7 +156,7 @@ const bundlePages = async () => {
       build.onLoad({ filter: /\\*.page.jsx/, namespace: undefined }, (args) => {
         const data = fs.readFileSync(args.path);
         const newSrc = `
-            import hydratePage from "edge-city/client/hydratePage";
+            import hydratePage from "edge-city/hydratePage";
             ${importAppComp}
             ${data.toString()}

lib/{client/hydratePage.js → hydratePage.js} RENAMED Viewed

@@ -3,7 +3,7 @@ import { hydrateRoot } from "react-dom/client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createBrowserHistory } from "history";
 import { createRouter } from "radix3";
-import { RouterProvider } from "../router";
+import { state } from "./router";
 import routemap from '/routemap.json' assert {type: 'json'};
 const hydratePage = (App) => {
@@ -15,13 +15,13 @@ const hydratePage = (App) => {
       return acc;
     }, {}),
   });
-  const root = document.getElementById("root");
-  hydrateRoot(root, _jsx(RouterProvider, {
-    history,
+  state.set({
     router,
-    rpcContext: window._EDGE_DATA_ || {},
+    history,
     helmetContext: {},
-    App,
-  }));
+  })
+  const root = document.getElementById("root");
+  hydrateRoot(root, _jsx(App, { helmetContext: {} }));
 }
 export default hydratePage;

lib/index.js DELETED Viewed

@@ -1,29 +0,0 @@
-import React from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createBrowserHistory } from "history";
-import { createRouter } from "radix3";
-import routemap from '/routemap.json' assert {type: 'json'};
-export const isProd = () => process.env.NODE_ENV === "production";
-export const hydrateApp = async (App) => {
-  if (!isProd()) {
-    console.log("hydrating with", window._EDGE_DATA_);
-  }
-  const module = await import("react-dom/client");
-  const history = createBrowserHistory();
-  const router = createRouter({
-    strictTrailingSlash: true,
-    routes: Object.keys(routemap).reduce((acc, r) => {
-      acc[r] = React.lazy(() => import(routemap[r]));
-      return acc;
-    }, {}),
-  });
-  const root = document.getElementById("root");
-  module.default.hydrateRoot(root, _jsx(RouterProvider, {
-    history,
-    router,
-    rpcContext: window._EDGE_DATA_ || {},
-    helmetContext: {},
-    App,
-  }));
-}

lib/index.test.js DELETED Viewed

@@ -1,15 +0,0 @@
-describe('A thing', () => {
-  it('should work', () => {
-    expect(1).toEqual(1);
-  });
-  it('should be ok', () => {
-    expect(1).toEqual(1);
-  });
-  describe('a nested thing', () => {
-    it('should work', () => {
-      expect(1).toEqual(1);
-    });
-  });
-});

lib/link.js CHANGED Viewed

@@ -20,7 +20,7 @@ const Link = (props) => {
   })
 }
-export const NavLink = ({ children, className, activeClassName, ...props }) => {
+export const StyleLink = ({ children, className, activeClassName, ...props }) => {
   const { pathname } = useRouter();
   const classNames = pathname === props.href ? [activeClassName, className] : [className];
   return _jsx(Link, {

lib/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "edge-city",
   "version": "0.5.0",
   "type": "module",
-  "main": "index.js",
+  "main": "client",
   "engines": {
     "node": ">= 20"
   },

lib/router.js CHANGED Viewed

@@ -1,14 +1,20 @@
 import {
-  Suspense, createContext, useContext, useState, useEffect, useTransition, useCallback
+  useState, useEffect, useTransition
 } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { HelmetProvider } from 'react-helmet-async';
+export let state = {
+  get: () => globalThis._EDGE_ROUTER_STATE_,
+  set: (v) => {
+    globalThis._EDGE_ROUTER_STATE_ = v;
+  },
+}
-export const RouterContext = createContext(undefined);
+export const usePage = () => {
-export const RouterProvider = ({ router, history, helmetContext, App }) => {
+  const { history, router } = state.get();
   const [_, startTransition] = useTransition();
   const [pathname, setPathname] = useState(history.location.pathname);
-  const page = router.lookup(pathname) || router.lookup("/_404");
+  const Page = router.lookup(pathname) || router.lookup("/_404");
   useEffect(() => {
     return history.listen(({ location }) => {
       // this causes 2 renders to happen but stops jitter or flash due to React.lazy
@@ -17,25 +23,11 @@ export const RouterProvider = ({ router, history, helmetContext, App }) => {
       })
     });
   }, []);
-  return _jsx(RouterContext.Provider, {
-    value: {
+  return Page;
-      history,
-      params: page.params || {},
-    },
-    children: _jsx(Suspense, {
-      fallback: _jsx("div", {}, "Routing...."),
-      children: _jsx(HelmetProvider, {
-        context: helmetContext,
-        children: _jsx(App, {
-          children: _jsx(page, {}),
-        })
-      }),
-    }),
-  })
 }
 export const useRouter = () => {
-  const { history, params } = useContext(RouterContext);
+  const { history, params } = state.get();
   return {
     pathname: history.location.pathname,
     query: new URLSearchParams(history.location.search),

lib/server/renderPage.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { createRouter } from "radix3";
 import { renderToReadableStream } from "react-dom/server";
 import isbot from "isbot";
 import routemap from '/routemap.json' assert {type: 'json'};
-import { RouterProvider } from "../router";
+import { state } from "../router";
 const stringToStream = (str) => {
   return new ReadableStream({
@@ -116,6 +116,11 @@ const renderPage = async (Page, App, req) => {
   const jsScript = url.pathname === "/" ? "/index" : url.pathname;
   const helmetContext = {};
   globalThis._EDGE_DATA_ = { data: {}, subs: {} };
+  state.set({
+    router,
+    history,
+    helmetContext,
+  })
   const stream = await render(
     _jsxs("html", {
       lang: "en",
@@ -129,16 +134,9 @@ const renderPage = async (Page, App, req) => {
           ]
         }),
         _jsx("body", {
-          children: _jsxs("div", {
+          children: _jsx("div", {
             id: "root",
-            children: [
-              _jsx(RouterProvider, {
-                history,
-                router,
-                helmetContext,
+            children: _jsx(App, { helmetContext }),
-                App,
-              }),
-            ]
           })
         })]
     }), {

~repos /edge-city

git clone https://pyrossh.dev/repos/edge-city.git Discussions: https://groups.google.com/g/rust-embed-devs

edge-city is a next level meta-framework for react that runs only on edge runtimes

HEAD -> main

git clone https://pyrossh.dev/repos/edge-city.git
Discussions: https://groups.google.com/g/rust-embed-devs