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

011acde7 — pyrossh

get streaming ssr hydration working

Files changed (4) hide show

example/src/pages/todos/page.jsx +7 -1
index.js +1 -1
readme.md +7 -8
renderPage.js +105 -49

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

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useQuery, useMutation } from "edge-city";
 import { useForm } from 'react-hook-form';
@@ -29,6 +29,7 @@ export default Page;
 const TodoList = () => {
   const { data, refetch } = useQuery("todos", () => getTodos());
+  console.log("data", data);
   const { mutate, isMutating, err } = useMutation(async ({ text }) => {
     await createTodo({
       text,
@@ -38,6 +39,11 @@ const TodoList = () => {
   });
   const { register, handleSubmit, formState: { errors } } = useForm();
   console.log('err', err, errors);
+  useEffect(() => {
+    setTimeout(() => {
+      refetch();
+    }, 3000)
+  }, [])
   return (
     <div>
       <ul>

index.js CHANGED Viewed

@@ -205,7 +205,7 @@ export const hydrateApp = async () => {
   module.default.hydrateRoot(root, _jsx(RouterProvider, {
     history,
     router,
-    rpcContext: {},
+    rpcContext: window.__EC_RPC_DATA__ || {},
     helmetContext: {},
   }));
 }

readme.md CHANGED Viewed

@@ -40,14 +40,13 @@ which are compatible with these API's. Here is a list of some of them,
 2. `pnpm >= v8.5.1`
 ### Todo[General]
-1. Hydrate rpc cache
-2. Build a docs website
+1. Build a docs website
-4. Add tests for bot
+2. Add tests for bot
-5. Add tests for runtime
+3. Add tests for runtime
-6. Add Env variables `PUBLIC_` for client
-7. Add E2E tests for example
+4. Add E2E tests for example
-8. Maybe move to vite for HMR goodness
+5. Maybe move to vite for HMR goodness
+6. Fix todos service not loading
 ### Todo[Cloudflare]
 1. Fix 404/500 pages not routing on server
-2. Fix todos service not loading
+2. Fix neondb serverless driver

renderPage.js CHANGED Viewed

@@ -7,6 +7,100 @@ import isbot from "isbot";
 import routemap from '/routemap.json' assert {type: 'json'};
 import { RouterProvider } from "./index";
+const stringToStream = (str) => {
+  return new ReadableStream({
+    start(controller) {
+      controller.enqueue(new TextEncoder().encode(str))
+      controller.close()
+    },
+  })
+}
+const createTagHtmlInjectTransformer = (
+  token,
+  oneTime,
+  inject,
+) => {
+  let injected = false
+  return new TransformStream({
+    transform(chunk, controller) {
+      if (!oneTime || !injected) {
+        const content = new TextDecoder().decode(chunk)
+        let index
+        if ((index = content.indexOf(token)) !== -1) {
+          const newContent =
+            content.slice(0, index) +
+            inject() +
+            content.slice(index, content.length)
+          injected = true
+          controller.enqueue(new TextEncoder().encode(newContent))
+          return
+        }
+      }
+      controller.enqueue(chunk)
+    },
+  })
+}
+const createEndHtmlInjectTransformer = (inject) => {
+  return new TransformStream({
+    flush(controller) {
+      controller.enqueue(new TextEncoder().encode(inject()))
+    },
+    transform(chunk, controller) {
+      controller.enqueue(chunk)
+    },
+  })
+}
+const render = async (children, {
+  injectBeforeBodyClose,
+  injectBeforeHeadClose,
+  injectBeforeEveryScript,
+  injectOnEnd,
+  isSeo,
+}) => {
+  function transfromStream(stream) {
+    let out = stream
+    if (injectBeforeBodyClose) {
+      out = out.pipeThrough(
+        createTagHtmlInjectTransformer('</body>', true, injectBeforeBodyClose)
+      )
+    }
+    if (injectBeforeHeadClose) {
+      out = out.pipeThrough(
+        createTagHtmlInjectTransformer('</head>', true, injectBeforeHeadClose)
+      )
+    }
+    if (injectBeforeEveryScript) {
+      out = out.pipeThrough(
+        createTagHtmlInjectTransformer(
+          '<script>',
+          false,
+          injectBeforeEveryScript
+        )
+      )
+    }
+    if (injectOnEnd) {
+      out = out.pipeThrough(
+        createEndHtmlInjectTransformer(injectOnEnd)
+      )
+    }
+    return out;
+  }
+  try {
+    const reactStream = await renderToReadableStream(children)
+    if (isSeo) {
+      await reactStream.allReady;
+    }
+    return transfromStream(reactStream);
+  } catch (error) {
+    throw error;
+  }
+}
 const renderPage = async (Page, req) => {
   const url = new URL(req.url);
   const history = createMemoryHistory({
@@ -22,47 +116,7 @@ const renderPage = async (Page, req) => {
   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: _jsx("div", {
-        id: "root",
-        children: _jsx(RouterProvider, {
-          history,
-          router,
-          rpcCache: {},
-          helmetContext,
-        }),
-      })
-    }))
-    await stream.allReady;
-    let isFirstChunk = true;
-    // TODO: add rpcContext
-    const transformStream = new TransformStream({
-      transform(chunk, controller) {
-        if (isFirstChunk) {
-          isFirstChunk = false;
-          const encoder = new TextEncoder();
-          controller.enqueue(encoder.encode(`<!DOCTYPE html><html lang="en"><head>`));
-          for (const key of Object.keys(helmetContext.helmet)) {
-            controller.enqueue(encoder.encode(helmetContext.helmet[key].toString()));
-          }
-          controller.enqueue(encoder.encode(`<link rel="stylesheet" href="/css/app.css">`));
-          controller.enqueue(encoder.encode(`<script type="module" src="/js${jsScript}.js?hydrate=true" defer></script>`));
-          controller.enqueue(encoder.encode(`</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(
+  const stream = await render(
     _jsxs("html", {
       lang: "en",
       children: [
@@ -84,17 +138,19 @@ const renderPage = async (Page, req) => {
                 rpcContext,
                 helmetContext,
               }),
-              _jsx(_Fragment, {
-                children: _jsx("script", {
-                  type: "module",
-                  defer: true,
-                  src: `/js${jsScript}.js?hydrate=true`,
-                })
-              }),
             ]
           })
         })]
+    }), {
+    isSeo: isbot(req.headers.get('User-Agent')) || url.search.includes("ec_is_bot=true"),
+    injectBeforeHeadClose: () =>
+      Object.keys(helmetContext.helmet)
+        .map((k) => helmetContext.helmet[k].toString())
+        .join(''),
+    injectBeforeBodyClose: () => ''
+      + `<script>window.__EC_RPC_DATA__ = ${JSON.stringify(rpcContext)};</script>`
+      + `<script type="module" src="/js${jsScript}.js?hydrate=true"></script>`
-    }));
+  });
   return new Response(stream, {
     headers: { 'Content-Type': 'text/html' },
     status: 200,

~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