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

72dacf83 — Peter John

use react-helmet-async

Files changed (9) hide show

bun.lockb +0 -0
package.json +4 -0
pages/404/page.jsx +4 -8
pages/about/page.jsx +10 -9
pages/page.jsx +8 -8
pages/todos/page.jsx +6 -7
parotta/package.json +3 -0
parotta/runtime.js +22 -48
parotta/server.js +20 -19

bun.lockb CHANGED Viewed

Binary file

package.json CHANGED Viewed

@@ -17,6 +17,7 @@
     "normalize.css": "^8.0.1",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
     "sql-highlight": "^4.3.2"
   },
   "devDependencies": {
@@ -32,6 +33,9 @@
       "node_modules/normalize.css/normalize.css"
     ]
   },
+  "prettier": {
+    "printWidth": 120
+  },
   "eslintConfig": {
     "root": true,
     "parserOptions": {

pages/404/page.jsx CHANGED Viewed

@@ -1,13 +1,7 @@
 import React from 'react';
 import "./page.css";
-export const Head = () => {
+const Page = () => {
-  return (
-    <title>Page not found</title>
-  )
-}
-export const Body = () => {
   return (
     <div>
       <h1>404</h1>
@@ -16,4 +10,6 @@ export const Body = () => {
       </div>
     </div>
   )
-}
+}
+export default Page;

pages/about/page.jsx CHANGED Viewed

@@ -1,19 +1,18 @@
 import React from 'react';
 import { Link, useRouter } from "parotta/runtime";
+import { Helmet } from 'react-helmet-async';
 import "./page.css";
-export const Head = () => {
+export const Page = () => {
-  return (
-    <title>About us</title>
-  )
-}
-export const Body = () => {
   const router = useRouter();
   return (
     <div className="about-page">
+      <Helmet>
+        <title>About Page @ {router.pathname}</title>
+        <meta name="description" content="Showcase of using parotta meta-framework." />
+      </Helmet>
       <div>
-        <h1>About Page</h1>
+        <h1>About Page @ {router.pathname}</h1>
         <p>Showcase of using parotta meta-framework.</p>
       </div>
       <footer>
@@ -21,4 +20,6 @@ export const Body = () => {
       </footer>
     </div>
   )
-}
+}
+export default Page;

pages/page.jsx CHANGED Viewed

@@ -1,21 +1,19 @@
 import React, { useEffect } from 'react';
 import { useRouter } from "parotta/runtime";
 import Counter from "@/components/Counter/Counter";
+import { Helmet } from 'react-helmet-async';
 import "./page.css";
-export const Head = () => {
+const Page = () => {
-  return (
-    <title>Parotta App</title>
-  )
-}
-export const Body = () => {
   const router = useRouter();
   useEffect(() => {
   }, []);
   return (
     <div>
+      <Helmet>
+        <title>Parotta App</title>
+      </Helmet>
       <div>
         <h1>Home Page</h1>
         <p>
@@ -25,4 +23,6 @@ export const Body = () => {
       </div>
     </div>
   )
-}
+}
+export default Page;

pages/todos/page.jsx CHANGED Viewed

@@ -1,17 +1,15 @@
 import React, { Suspense } from 'react';
 import TodoList from "@/containers/TodoList/TodoList";
+import { Helmet } from 'react-helmet-async';
 import "./page.css";
-export const Head = () => {
+const Page = () => {
-  return (
-    <title>Todos</title>
-  )
-}
-export const Body = () => {
   return (
     <div>
       <h1>Todos</h1>
+      <Helmet>
+        <title>Todos Page</title>
+      </Helmet>
       <Suspense fallback={<p>Loading...</p>}>
         <TodoList />
       </Suspense>
@@ -19,3 +17,4 @@ export const Body = () => {
   )
 }
+export default Page;

parotta/package.json CHANGED Viewed

@@ -11,5 +11,8 @@
     "postcss-nesting": "^11.2.1",
     "radix3": "^1.0.0",
     "walkdir": "0.4.1"
+  },
+  "prettier": {
+    "printWidth": 120
   }
 }

parotta/runtime.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import React, {
-  Fragment, Suspense, createElement, createContext,
-  useContext, useState, useEffect, useSyncExternalStore, useTransition
+  createElement, createContext, useContext, useState, useEffect, useTransition
 } from "react";
+import { HelmetProvider } from 'react-helmet-async';
 export const domain = () => typeof window !== 'undefined' ? window.origin : "http://0.0.0.0:3000";
@@ -69,48 +69,14 @@ const getMatch = (radixRouter, pathname) => {
   return matchedPage;
 }
-const getCssUrl = (pathname) => `/pages${pathname === "/" ? "" : pathname}`;
+const getCssUrl = (pathname) => `/pages${pathname === "/" ? "" : pathname}/page.css`;
-export const HeadApp = ({ history, radixRouter, importMap }) => {
-  const pathname = useSyncExternalStore(history.listen, (v) => v ? v.location.pathname : history.location.pathname, () => history.location.pathname);
-  const match = getMatch(radixRouter, pathname);
-  // const initialCss = useMemo(() => getCssUrl(history.location.pathname), []);
-  return createElement(Fragment, {
-    children: [
-      createElement("link", {
-        rel: "stylesheet",
-        href: "https://unpkg.com/nprogress@0.2.0/nprogress.css",
-      }),
-      createElement("link", {
-        id: "layoutCss",
-        rel: "stylesheet",
-        href: match.LayoutPath.replace("jsx", "css"),
-      }),
-      createElement("link", {
-        id: "pageCss",
-        rel: "stylesheet",
-        href: getCssUrl(history.location.pathname) + "/page.css",
-      }),
-      createElement(Suspense, {
-        children: createElement(match.Head, {}),
-      }),
-      createElement("script", {
-        id: "importmap",
-        type: "importmap",
-        dangerouslySetInnerHTML: {
-          __html: JSON.stringify({ "imports": importMap }),
-        }
-      })
-    ]
-  });
-}
-export const BodyApp = ({ nProgress, history, radixRouter, rpcCache }) => {
+export const App = ({ nProgress, history, radixRouter, rpcCache, helmetContext }) => {
   const [isPending, startTransition] = useTransition();
   const [match, setMatch] = useState(() => getMatch(radixRouter, history.location.pathname));
   useEffect(() => {
     return history.listen(({ location }) => {
-      // const href = getCssUrl(location.pathname);
+      const href = getCssUrl(location.pathname);
       // const isLoaded = Array.from(document.getElementsByTagName("link"))
       //   .map((link) => link.href.replace(window.origin, "")).includes(href);
       // if (!isLoaded) {
@@ -126,6 +92,11 @@ export const BodyApp = ({ nProgress, history, radixRouter, rpcCache }) => {
       // link.setAttribute("href", href);
       // document.getElementsByTagName("head")[0].appendChild(link);
       // } else {
+      const link = document.createElement('link');
+      link.setAttribute("rel", "stylesheet");
+      link.setAttribute("type", "text/css");
+      link.setAttribute("href", href);
+      document.getElementsByTagName("head")[0].appendChild(link);
       nProgress.start();
       startTransition(() => {
         setMatch(getMatch(radixRouter, location.pathname));
@@ -138,15 +109,18 @@ export const BodyApp = ({ nProgress, history, radixRouter, rpcCache }) => {
       nProgress.done();
     }
   }, [isPending]);
+  return createElement(HelmetProvider, {
+    context: helmetContext,
-  return createElement(RpcContext.Provider, {
+    children: createElement(RpcContext.Provider, {
-    value: rpcCache,
+      value: rpcCache,
-    children: createElement(RouterContext.Provider, {
+      children: createElement(RouterContext.Provider, {
-      value: {
+        value: {
-        history: history,
+          history: history,
-        params: match.params || {},
+          params: match.params || {},
-      },
+        },
-      children: createElement(match.Layout, {
+        children: createElement(match.Layout, {
-        children: createElement(match.Body, {}),
+          children: createElement(match.Page, {}),
+        }),
       }),
     }),
   });

parotta/server.js CHANGED Viewed

@@ -10,7 +10,7 @@ import postcssNesting from "postcss-nesting";
 import { createMemoryHistory } from "history";
 import { createRouter } from 'radix3';
 import mimeTypes from "mime-types";
-import { HeadApp, BodyApp } from "./runtime";
+import { App } from "./runtime";
 if (!globalThis.firstRun) {
   globalThis.firstRun = true
@@ -74,8 +74,7 @@ const createClientRouter = async () => {
       const lpath = exists ? `/pages${r}/layout.jsx` : `/pages/layout.jsx`;
       const lsrc = await import(`${process.cwd()}${lpath}`);
       acc[r === "" ? "/" : r] = {
-        Head: src.Head,
+        Page: src.default,
-        Body: src.Body,
         Layout: lsrc.default,
         LayoutPath: lpath,
       }
@@ -88,32 +87,26 @@ const createClientRouter = async () => {
     import { createBrowserHistory } from "history";
     import nProgress from "nprogress";
     import { createRouter } from "radix3";
-    import { HeadApp, BodyApp } from "parotta/runtime";
+    import { App } from "parotta/runtime";
     const history = createBrowserHistory();
     const radixRouter = createRouter({
       strictTrailingSlash: true,
       routes: {
         ${Object.keys(routes).map((r) => `"${r}": {
-          Head: React.lazy(() => import("/pages${r}/page.jsx").then((js) => ({ default: js.Head }))),
+          Page: React.lazy(() => import("/pages${r}/page.jsx")),
-          Body: React.lazy(() => import("/pages${r}/page.jsx").then((js) => ({ default: js.Body }))),
           Layout: React.lazy(() => import("${routes[r].LayoutPath}")),
           LayoutPath: "${routes[r].LayoutPath}",
         }`).join(',\n      ')}
       },
     });
-    hydrateRoot(document.head, React.createElement(HeadApp, {
-      history,
-      radixRouter,
-    }))
-    hydrateRoot(document.body, React.createElement(BodyApp, {
+    hydrateRoot(document.body, React.createElement(App, {
       nProgress,
       history,
       radixRouter,
       rpcCache: {},
+      helmetContext: {},
     }));`
   const router = createRouter({
     strictTrailingSlash: true,
@@ -189,18 +182,24 @@ const renderPage = async (url) => {
   const history = createMemoryHistory({
     initialEntries: [url.pathname + url.search],
   });
+  const helmetContext = {}
   const nProgress = { start: () => { }, done: () => { } }
   const stream = await renderToReadableStream(
     <html lang="en">
       <head>
+        <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" />
+        {/* <link id="layoutCss" rel="stylesheet" href={ match.LayoutPath.replace("jsx", "css"),} /> */}
+        <link id="pageCss" rel="stylesheet" href={`/pages${url.pathname}/page.css`} />
+        <script type="importmap" dangerouslySetInnerHTML={{ __html: JSON.stringify({ "imports": importMap }) }} />
+      </head>
+      <body>
-        <HeadApp
+        <App
+          nProgress={nProgress}
           history={history}
           radixRouter={clientRouter}
+          rpcCache={{}}
-          importMap={importMap}
+          helmetContext={helmetContext}
         />
-      </head>
-      <body>
-        <BodyApp nProgress={nProgress} history={history} radixRouter={clientRouter} rpcCache={{}} />
         {config.hydrate &&
           <>
             <script type="module" defer={true} dangerouslySetInnerHTML={{
@@ -212,6 +211,8 @@ const renderPage = async (url) => {
       </body>
     </html >
   );
+  console.log("helmetContext", helmetContext.helmet.title.toString());
+  console.log("helmetContext", helmetContext.helmet.link.toString());
   return new Response(stream, {
     headers: { 'Content-Type': 'text/html' },
     status: 200,
@@ -264,7 +265,7 @@ const renderJs = async (srcFile) => {
       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");
+    const filteredJsx = lines.filter((ln) => !ln.includes(`.css"`) && !ln.includes(`.service"`)).join("\n");
     //.replaceAll("$jsx", "React.createElement");
     return new Response(filteredJsx, {
       headers: {

~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