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

e95ca431 — pyrossh

seperate concerns

Files changed (4) hide show

cli.js +2 -19
index.js +2 -105
renderApi.js +19 -0
renderPage.js +106 -0

cli.js CHANGED Viewed

@@ -88,7 +88,7 @@ const bundlePages = async () => {
         build.onLoad({ filter: /\\*.page.jsx/, namespace: undefined }, (args) => {
           const data = fs.readFileSync(args.path);
           const newSrc = `
-            import { renderPage } from "edge-city";
+            import renderPage from "edge-city/renderPage";
             ${data.toString()}
@@ -172,26 +172,9 @@ const bundleServices = async () => {
           build.onLoad({ filter: /\\*.service.js/, namespace: undefined }, async (args) => {
             const src = fs.readFileSync(args.path);
             const newSrc = `
+              import renderApi from "edge-city/renderApi";
               ${src.toString()}
-              export const renderApi = async (fn, req) => {
-                const url = new URL(req.url);
-                const params = req.method === "POST" ? await req.json() : Object.fromEntries(url.searchParams);
-                try {
-                  const result = await fn(params);
-                  return new Response(JSON.stringify(result), {
-                    headers: { 'Content-Type': 'application/json' },
-                    status: 200,
-                  });
-                } catch (err) {
-                  const message = err.format ? err.format() : err;
-                  return new Response(JSON.stringify(message), {
-                    headers: { 'Content-Type': 'application/json' },
-                    status: 400,
-                  });
-                }
-              }
               export function onRequest(context) {
                 return renderApi(${p}, context.request);
               }

index.js CHANGED Viewed

@@ -4,14 +4,10 @@ import React, {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { HelmetProvider } from 'react-helmet-async';
 import { ErrorBoundary } from "react-error-boundary";
-import { createMemoryHistory, createBrowserHistory } from "history";
+import { createBrowserHistory } from "history";
 import { createRouter } from "radix3";
 import routemap from '/routemap.json' assert {type: 'json'};
-/**
- * CSR related functions
- */
 export const isClient = () => typeof window !== 'undefined';
 export const domain = () => isClient() ? window.origin : "http://0.0.0.0:3000";
@@ -212,103 +208,4 @@ export const hydrateApp = async () => {
     rpcContext: {},
     helmetContext: {},
   }));
-}
+}
-// TODO: move this to cli.js or another file
-export const renderPage = async (Page, req) => {
-  const { renderToReadableStream } = await import("react-dom/server");
-  const { default: isbot } = await import("isbot");
-  const url = new URL(req.url);
-  const history = createMemoryHistory({
-    initialEntries: [url.pathname + url.search],
-  });
-  const router = createRouter({
-    strictTrailingSlash: true,
-    routes: Object.keys(routemap).reduce((acc, r) => {
-      acc[r] = React.lazy(() => Promise.resolve({ default: Page }));
-      return acc;
-    }, {}),
-  });
-  const jsScript = url.pathname === "/" ? "/index" : url.pathname;
-  const helmetContext = {};
-  const rpcContext = {};
-  if (isbot(req.headers.get('User-Agent')) || url.search.includes("ec_is_bot=true")) {
-    const stream = await renderToReadableStream(_jsx("body", {
-      children: _jsxs("div", {
-        id: "root",
-        children: [_jsx(App, {
-          history,
-          router,
-          rpcCache: {},
-          helmetContext,
-        }), _jsx(_Fragment, {
-          children: _jsx("script", {
-            type: "module",
-            defer: true,
-            src: `/js${jsScript}.js?hydrate=true`,
-          })
-        })]
-      })
-    }))
-    await stream.allReady;
-    let isFirstChunk = true;
-    // TODO: add rpcContext
-    const transformStream = new TransformStream({
-      transform(chunk, controller) {
-        if (isFirstChunk) {
-          isFirstChunk = false;
-          controller.enqueue(new TextEncoder().encode(`
-        <!DOCTYPE html>
-        <html lang="en">
-          <head>
-            ${helmetContext.helmet.title.toString()}
-            ${helmetContext.helmet.meta.toString()}
-            <link rel="stylesheet" href="/css/app.css">
-          </head>
-        `));
-        }
-        controller.enqueue(chunk);
-      },
-      flush(controller) {
-        controller.enqueue(new TextEncoder().encode(`</html>`));
-        controller.terminate();
-      },
-    });
-    return new Response(stream.pipeThrough(transformStream), {
-      headers: { 'Content-Type': 'text/html' },
-      status: 200,
-    });
-  }
-  const stream = await renderToReadableStream(
-    _jsxs("html", {
-      lang: "en",
-      children: [_jsxs("head", {
-        children: [
-          _jsx("link", {
-            rel: "stylesheet",
-            href: "/css/app.css"
-          }),
-        ]
-      }), _jsx("body", {
-        children: _jsxs("div", {
-          id: "root",
-          children: [_jsx(App, {
-            history,
-            router,
-            rpcContext,
-            helmetContext,
-          }), _jsx(_Fragment, {
-            children: _jsx("script", {
-              type: "module",
-              defer: true,
-              src: `/js${jsScript}.js?hydrate=true`,
-            })
-          })]
-        })
-      })]
-    }));
-  return new Response(stream, {
-    headers: { 'Content-Type': 'text/html' },
-    status: 200,
-  });
-}

renderApi.js ADDED Viewed

@@ -0,0 +1,19 @@
+export const renderApi = async (fn, req) => {
+  const url = new URL(req.url);
+  const params = req.method === "POST" ? await req.json() : Object.fromEntries(url.searchParams);
+  try {
+    const result = await fn(params);
+    return new Response(JSON.stringify(result), {
+      headers: { 'Content-Type': 'application/json' },
+      status: 200,
+    });
+  } catch (err) {
+    const message = err.format ? err.format() : err;
+    return new Response(JSON.stringify(message), {
+      headers: { 'Content-Type': 'application/json' },
+      status: 400,
+    });
+  }
+}
+export default renderApi;

renderPage.js ADDED Viewed

@@ -0,0 +1,106 @@
+import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createMemoryHistory } from "history";
+import { createRouter } from "radix3";
+import { renderToReadableStream } from "react-dom/server";
+import isbot from "isbot";
+import routemap from '/routemap.json' assert {type: 'json'};
+import { App } from "./index";
+const renderPage = async (Page, req) => {
+  const url = new URL(req.url);
+  const history = createMemoryHistory({
+    initialEntries: [url.pathname + url.search],
+  });
+  const router = createRouter({
+    strictTrailingSlash: true,
+    routes: Object.keys(routemap).reduce((acc, r) => {
+      acc[r] = React.lazy(() => Promise.resolve({ default: Page }));
+      return acc;
+    }, {}),
+  });
+  const jsScript = url.pathname === "/" ? "/index" : url.pathname;
+  const helmetContext = {};
+  const rpcContext = {};
+  if (isbot(req.headers.get('User-Agent')) || url.search.includes("ec_is_bot=true")) {
+    const stream = await renderToReadableStream(_jsx("body", {
+      children: _jsxs("div", {
+        id: "root",
+        children: [_jsx(App, {
+          history,
+          router,
+          rpcCache: {},
+          helmetContext,
+        }), _jsx(_Fragment, {
+          children: _jsx("script", {
+            type: "module",
+            defer: true,
+            src: `/js${jsScript}.js?hydrate=true`,
+          })
+        })]
+      })
+    }))
+    await stream.allReady;
+    let isFirstChunk = true;
+    // TODO: add rpcContext
+    const transformStream = new TransformStream({
+      transform(chunk, controller) {
+        if (isFirstChunk) {
+          isFirstChunk = false;
+          controller.enqueue(new TextEncoder().encode(`
+        <!DOCTYPE html>
+        <html lang="en">
+          <head>
+            ${helmetContext.helmet.title.toString()}
+            ${helmetContext.helmet.meta.toString()}
+            <link rel="stylesheet" href="/css/app.css">
+          </head>
+        `));
+        }
+        controller.enqueue(chunk);
+      },
+      flush(controller) {
+        controller.enqueue(new TextEncoder().encode(`</html>`));
+        controller.terminate();
+      },
+    });
+    return new Response(stream.pipeThrough(transformStream), {
+      headers: { 'Content-Type': 'text/html' },
+      status: 200,
+    });
+  }
+  const stream = await renderToReadableStream(
+    _jsxs("html", {
+      lang: "en",
+      children: [_jsxs("head", {
+        children: [
+          _jsx("link", {
+            rel: "stylesheet",
+            href: "/css/app.css"
+          }),
+        ]
+      }), _jsx("body", {
+        children: _jsxs("div", {
+          id: "root",
+          children: [_jsx(App, {
+            history,
+            router,
+            rpcContext,
+            helmetContext,
+          }), _jsx(_Fragment, {
+            children: _jsx("script", {
+              type: "module",
+              defer: true,
+              src: `/js${jsScript}.js?hydrate=true`,
+            })
+          })]
+        })
+      })]
+    }));
+  return new Response(stream, {
+    headers: { 'Content-Type': 'text/html' },
+    status: 200,
+  });
+}
+export default renderPage;

~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