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

485b9513 — Peter John

add Header

Files changed (6) hide show

packages/example/package.json +3 -0
packages/example/routes/about/page.jsx +1 -3
packages/example/routes/app.jsx +0 -1
packages/example/routes/page.jsx +6 -9
packages/parotta/cli.js +78 -61
packages/parotta/router.js +25 -14

packages/example/package.json CHANGED Viewed

@@ -10,5 +10,8 @@
   "dependencies": {
     "react": "18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "parotta": {
+    "hydrate": true
   }
 }

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

@@ -4,9 +4,7 @@ import "./page.css";
 export function Head() {
   return (
-    <>
-      <title>About us</title>
+    <title>About us</title>
-    </>
   )
 }

packages/example/routes/app.jsx CHANGED Viewed

@@ -2,7 +2,6 @@ import React, { Suspense } from "react";
 import { ErrorBoundary } from "parotta/error";
 export default function App({ children }) {
-  console.log('app');
   return (
     <ErrorBoundary onError={(err) => console.log(err)} fallback={<p>Oops something went wrong</p>}>
       <Suspense fallback={<p>Loading...</p>}>

packages/example/routes/page.jsx CHANGED Viewed

@@ -6,9 +6,7 @@ import "./page.css";
 export function Head() {
   const { data } = useFetch("/todos");
   return (
-    <>
-      <title>Parotta</title>
+    <title>Parotta</title>
-    </>
   )
 }
@@ -16,12 +14,11 @@ export default function Page() {
   const { data, cache } = useFetch("/todos");
   console.log('page');
   console.log('data', data);
-  useEffect(() => {
+  // useEffect(() => {
-    setTimeout(() => {
+  //   setTimeout(() => {
-      cache.invalidate(/todos/);
+  //     cache.invalidate(/todos/);
-    }, 3000)
+  //   }, 3000)
-  }, [])
+  // }, [])
-  // const todo = useAsync('123', () => getData());
   const router = useRouter();
   return (
     <div className="home-page">

packages/parotta/cli.js CHANGED Viewed

@@ -11,7 +11,7 @@ import postcssNesting from "postcss-nesting";
 import { createMemoryHistory } from "history";
 import { createRouter } from 'radix3';
 import mimeTypes from "mime-types";
-import { Router } from "./router";
+import { Header, Router } from "./router";
 import { renderToReadableStream } from 'react-dom/server';
 // import { renderToStream } from './render';
@@ -72,11 +72,19 @@ const mapPages = () => walkdir.sync(path.join(process.cwd(), "routes"))
 const serverSideRoutes = mapFiles();
 const clientSideRoutes = mapPages();
-const radixRouter = createRouter({
+const serverRouter = createRouter({
   strictTrailingSlash: true,
   routes: serverSideRoutes,
 });
+const clientRouter = createRouter({
+  strictTrailingSlash: true,
+  routes: clientSideRoutes.reduce((acc, r) => {
+    acc[r === "" ? "/" : r] = React.lazy(() => import(`${process.cwd()}/routes${r === "" ? "" : r}/page.jsx`));
+    return acc
+  }, {})
+});
 const renderApi = async (filePath, req) => {
   const routeImport = await import(path.join(process.cwd(), filePath));
   switch (req.method) {
@@ -104,6 +112,7 @@ const renderApi = async (filePath, req) => {
 const renderPage = async (filePath, url, params) => {
   const packageJson = await import(path.join(process.cwd(), "package.json"));
+  const config = packageJson.default.parotta || { hydrate: true };
   const devTag = !isProd ? "?dev" : "";
   const nodeDeps = Object.keys(packageJson.default.dependencies).reduce((acc, dep) => {
     acc[dep] = `https://esm.sh/${dep}@${packageJson.default.dependencies[dep]}`;
@@ -111,73 +120,78 @@ const renderPage = async (filePath, url, params) => {
   }, {})
   const components = mapDeps("components");
   const containers = mapDeps("containers");
-  const cssFile = `${filePath.replace("jsx", "css")}`;
+  const history = createMemoryHistory({
-  const mainPage = await import(path.join(process.cwd(), filePath));
+    initialEntries: [url.pathname + url.search],
+  });
   const stream = await renderToReadableStream(
     <html lang="en">
       <head>
-        <link rel="preload" href={cssFile} as="style" />
-        <link rel="stylesheet" href={cssFile} />
-        <script type="importmap" dangerouslySetInnerHTML={{
-          __html: JSON.stringify(
-            {
-              "imports": {
-                "radix3": `https://esm.sh/radix3`,
-                "history": "https://esm.sh/history@5.3.0",
-                "react": `https://esm.sh/react@18.2.0${devTag}`,
-                // TODO: need to remove this in prod
-                "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`,
-                // "parotta/router": `https://esm.sh/parotta@${version}/router.js`,
-                // "parotta/error": `https://esm.sh/parotta@${version}/error.js`,
-                "parotta/router": `/parotta/router.js`,
-                "parotta/error": `/parotta/error.js`,
-                ...nodeDeps,
-                ...components,
-                ...containers,
+        <Header
-              }
-            }
-          )
-        }}>
-        </script>
-        <mainPage.Head />
-        <script type="module" defer={true} dangerouslySetInnerHTML={{
-          __html: `
-import React from "react";
-import { hydrateRoot } from "react-dom/client";
-import { createBrowserHistory } from "history";
-import { createRouter } from "radix3";
-import { Router } from "parotta/router";
-hydrateRoot(document.getElementById("root"), React.createElement(Router, {
-  App: React.lazy(() => import("/routes/app.jsx")),
-  history: createBrowserHistory(),
+          history={history}
-  radixRouter: createRouter({
+          radixRouter={clientRouter}
-    strictTrailingSlash: true,
-    routes: {
-      ${clientSideRoutes.map((r) => `"${r === "" ? "/" : r}": React.lazy(() => import("/routes${r === "" ? "" : r}/page.jsx"))`).join(',\n      ')}
-    },
-  }),
-}));
-        `
-        }}></script>
+        />
       </head>
       <body>
         <div id="root">
           <Router
             App={React.lazy(() => import(`${process.cwd()}/routes/app.jsx`))}
-            history={createMemoryHistory({
+            history={history}
-              initialEntries: [url.pathname + url.search],
-            })}
-            radixRouter={createRouter({
+            radixRouter={clientRouter}
-              strictTrailingSlash: true,
-              routes: clientSideRoutes.reduce((acc, r) => {
-                acc[r === "" ? "/" : r] = React.lazy(() => import(`${process.cwd()}/routes${r === "" ? "" : r}/page.jsx`));
-                return acc
-              }, {})
-            })}
           />
         </div>
+        {config.hydrate &&
+          <>
+            <script type="importmap" dangerouslySetInnerHTML={{
+              __html: JSON.stringify(
+                {
+                  "imports": {
+                    "radix3": `https://esm.sh/radix3`,
+                    "history": "https://esm.sh/history@5.3.0",
+                    "react": `https://esm.sh/react@18.2.0${devTag}`,
+                    // TODO: need to remove this in prod
+                    "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`,
+                    // "parotta/router": `https://esm.sh/parotta@${version}/router.js`,
+                    // "parotta/error": `https://esm.sh/parotta@${version}/error.js`,
+                    "parotta/router": `/parotta/router.js`,
+                    "parotta/error": `/parotta/error.js`,
+                    ...nodeDeps,
+                    ...components,
+                    ...containers,
+                  }
+                }
+              )
+            }}>
+            </script>
+            <script type="module" defer={true} dangerouslySetInnerHTML={{
+              __html: `
+import React from "react";
+import { hydrateRoot } from "react-dom/client";
+import { createBrowserHistory } from "history";
+import { createRouter } from "radix3";
+import { Header, Router } from "parotta/router";
+const history = createBrowserHistory();
+const radixRouter = createRouter({
+  strictTrailingSlash: true,
+  routes: {
+    ${clientSideRoutes.map((r) => `"${r === "" ? "/" : r}": React.lazy(() => import("/routes${r === "" ? "" : r}/page.jsx"))`).join(',\n      ')}
+  },
+});
+hydrateRoot(document.head, React.createElement(Header, {
+  history,
+  radixRouter,
+}))
+hydrateRoot(document.getElementById("root"), React.createElement(Router, {
+  App: React.lazy(() => import("/routes/app.jsx")),
+  history,
+  radixRouter,
+}));`}}>
+            </script>
+          </>
+        }
       </body>
     </html >
   );
@@ -226,7 +240,10 @@ const renderJs = async (src) => {
     // TODO
     //.replaceAll("$jsx", "React.createElement");
     return new Response(js, {
+      headers: {
-      headers: { 'Content-Type': 'application/javascript' },
+        'Content-Type': 'application/javascript',
+        // 'Link': `</routes/about/page.css>; rel=prefetch`,
+      },
       status: 200,
     });
   } catch (err) {
@@ -268,7 +285,7 @@ export default {
     if (url.pathname.endsWith(".js") || url.pathname.endsWith(".jsx")) {
       return renderJs(path.join(process.cwd(), url.pathname));
     }
-    const match = radixRouter.lookup(url.pathname);
+    const match = serverRouter.lookup(url.pathname);
     if (match) {
       if (match.file) {
         return sendFile(path.join(process.cwd(), `/static${match.file}`));

packages/parotta/router.js CHANGED Viewed

@@ -1,7 +1,8 @@
-import React, { createContext, useContext, useState, useEffect, useMemo } from "react";
+import React, { createContext, useContext, useState, useEffect, useMemo, useSyncExternalStore } from "react";
 export const isClient = () => typeof window !== 'undefined';
 export const domain = () => isClient() ? window.origin : "http://0.0.0.0:3000";
+export const basePath = () => isClient() ? "" : process.cwd()
 export const globalCache = new Map();
 export const useFetchCache = () => {
   const [_, rerender] = useState(false);
@@ -65,24 +66,30 @@ const getMatch = (radixRouter, pathname) => {
   return matchedPage;
 }
-const loadCss = (pathname) => {
-  const href = `/routes${pathname === "/" ? "" : pathname}/page.css`;
+const getCssUrl = (pathname) => `/routes${pathname === "/" ? "/page.css" : pathname + "/page.css"}`;
+export const Header = ({ history, radixRouter }) => {
+  useEffect(() => {
+    return history.listen(({ location }) => {
-  const isLoaded = Array.from(document.getElementsByTagName("link"))
+      // document.getElementById("pageCss").href = getCssUrl(location.pathname)
+    });
+  }, []);
-    .map((link) => link.href.replace(window.origin, "")).includes(href);
+  return React.createElement(React.Suspense, {
-  if (!isLoaded) {
+    children: [
-    const fileref = document.createElement("link");
+      React.createElement("link", {
+        id: "pageCss",
-    fileref.rel = "stylesheet";
+        rel: "stylesheet",
-    fileref.type = "text/css";
+        href: getCssUrl(history.location.pathname)
-    fileref.href = href;
-    document.getElementsByTagName("head")[0].appendChild(fileref);
-  }
+      }),
+      React.createElement(React.lazy(() => import(`${basePath()}/routes/page.jsx`).then((js) => ({ default: js.Head }))), {}),
+    ]
+  });
 }
 export const Router = ({ App, history, radixRouter }) => {
   const [MatchedPage, setMatchedPage] = useState(() => getMatch(radixRouter, history.location.pathname));
   useEffect(() => {
     return history.listen(({ location }) => {
-      loadCss(location.pathname);
       setMatchedPage(getMatch(radixRouter, location.pathname));
     });
   }, [])
@@ -93,7 +100,7 @@ export const Router = ({ App, history, radixRouter }) => {
       params: MatchedPage.params || {},
     },
     children: React.createElement(App, {
-      children: React.createElement(MatchedPage, {})
+      children: React.createElement(MatchedPage, {}),
     }),
   });
 }
@@ -116,6 +123,10 @@ export const Link = (props) => {
   const router = useRouter();
   return React.createElement("a", {
     ...props,
+    // onMouseOver: (e) => {
+    //   fetch(`/routes${pathname === "/" ? "" : pathname}/page.css`);
+    //   fetch(`/routes${pathname === "/" ? "" : pathname}/page.jsx`);
+    // },
     onClick: (e) => {
       e.preventDefault();
       if (props && props.onClick) {

~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