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

164eba9f — pyrossh

Fix hydration issue

Files changed (10) hide show

cli.js +11 -5
example/package.json +3 -0
example/scripts/migrate.js +1 -1
example/src/pages/app.jsx +11 -0
example/src/pages/todos/page.jsx +6 -8
example/src/services/db.js +1 -1
index.js +12 -5
pnpm-lock.yaml +3 -0
readme.md +0 -1
renderPage.js +7 -4

cli.js CHANGED Viewed

@@ -21,6 +21,7 @@ dotenv.config();
 let isProd = false;
 const srcDir = path.join(process.cwd(), "src");
+const pagesDir = path.join(srcDir, "pages");
 const inputStaticDir = path.join(srcDir, "static");
 const buildDir = path.join(process.cwd(), "build");
 const staticDir = path.join(buildDir, "static");
@@ -36,13 +37,13 @@ const recordSize = (buildStart, dest) => {
 let generatedCss = ``;
 const cssCache = [];
 const serverEnvs = Object.keys(process.env)
-  .filter((k) => k.startsWith("EC_") || k === "NODE_ENV")
+  .filter((k) => k.startsWith("EDGE_") || k === "NODE_ENV")
   .reduce((acc, k) => {
     acc[`process.env.${k}`] = JSON.stringify(process.env[k]);
     return acc
   }, {});
 const clientEnvs = Object.keys(process.env)
-  .filter((k) => k.startsWith("EC_PUBLIC") || k === "NODE_ENV")
+  .filter((k) => k.startsWith("EDGE_PUBLIC") || k === "NODE_ENV")
   .reduce((acc, k) => {
     acc[`process.env.${k}`] = JSON.stringify(process.env[k]);
     return acc
@@ -94,7 +95,9 @@ const buildRouteMap = (routes) => {
 }
 const bundlePages = async () => {
-  const routes = walkdir.sync(path.join(srcDir, "pages"))
+  const appExists = fs.existsSync(path.join(pagesDir, "app.jsx"));
+  const importAppComp = appExists ? `import App from "@/pages/app";` : ""
+  const routes = walkdir.sync(pagesDir)
     .filter((p) => p.includes("page.jsx"))
     .map((r) => ({
       in: r,
@@ -111,11 +114,12 @@ const bundlePages = async () => {
           const data = fs.readFileSync(args.path);
           const newSrc = `
             import renderPage from "edge-city/renderPage";
+            ${importAppComp}
             ${data.toString()}
             export function onRequest(context) {
-              return renderPage(Page, context.request);
+              return renderPage(Page, App, context.request);
             }
           `
           return {
@@ -155,11 +159,13 @@ const bundlePages = async () => {
         const data = fs.readFileSync(args.path);
         const newSrc = `
             import { hydrateApp } from "edge-city";
+            ${importAppComp}
             ${data.toString()}
             const searchParams = new URL(import.meta.url).searchParams;
             if (searchParams.get("hydrate") === "true") {
-              hydrateApp()
+              hydrateApp(App)
             }
           `
         return {

example/package.json CHANGED Viewed

@@ -3,6 +3,8 @@
   "type": "module",
   "scripts": {
     "dev": "edge-city dev -p cloudflare",
+    "dev:wrangler": "cd build && wrangler pages dev static",
+    "deploy:wrangler": "cd build && wrangler pages deploy static",
     "build": " edge-city build -p cloudflare",
     "generate": "drizzle-kit generate:pg --out migrations --schema migrations/schema.js",
     "migrate": "node scripts/migrate.js",
@@ -29,6 +31,7 @@
     "postgres": "3.3.4",
     "@playwright/test": "^1.31.2",
     "eslint": "^8.35.0",
+    "wrangler": "3.0.1",
     "eslint-config-react-app": "^7.0.1"
   },
   "prettier": {

example/scripts/migrate.js CHANGED Viewed

@@ -6,7 +6,7 @@ dotenv.config();
 const main = async () => {
   console.log("migration started");
-  const client = postgres(process.env.EC_PG_CONN_URL + "?sslmode=require", { max: 1 });
+  const client = postgres(process.env.EDGE_PG_CONN_URL + "?sslmode=require", { max: 1 });
   await migrate(drizzle(client), { migrationsFolder: './migrations' });
   console.log("migration complete");
 }

example/src/pages/app.jsx ADDED Viewed

@@ -0,0 +1,11 @@
+import { SSRProvider } from 'react-aria';
+const App = ({ children }) => {
+  return (
+    <SSRProvider>
+      {children}
+    </SSRProvider>
+  )
+}
+export default App;

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

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { Suspense } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useQuery, useMutation } from "edge-city";
 import { useForm } from 'react-hook-form';
@@ -29,7 +29,6 @@ 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,12 +37,11 @@ const TodoList = () => {
     await refetch();
   });
   const { register, handleSubmit, formState: { errors } } = useForm();
-  console.log('err', err, errors);
-  useEffect(() => {
+  // useEffect(() => {
-    setTimeout(() => {
+  //   setTimeout(() => {
-      refetch();
+  //     refetch();
-    }, 3000)
+  //   }, 3000)
-  }, [])
+  // }, [])
   return (
     <div>
       <ul>

example/src/services/db.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { drizzle } from 'drizzle-orm/neon-serverless';
 import { Pool } from '@neondatabase/serverless';
 import { highlight } from 'sql-highlight';
-export const pool = new Pool({ connectionString: process.env.EC_PG_CONN_URL });
+export const pool = new Pool({ connectionString: process.env.EDGE_PG_CONN_URL });
 const db = drizzle(pool, {
   logger: {
     logQuery: (query, params) => {

index.js CHANGED Viewed

@@ -8,6 +8,7 @@ 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 isClient = () => typeof window !== 'undefined';
 export const domain = () => isClient() ? window.origin : "http://0.0.0.0:3000";
@@ -114,7 +115,7 @@ export const useMutation = (fn) => {
 }
 export const RouterContext = createContext(undefined);
-export const RouterProvider = ({ router, history, rpcContext, helmetContext }) => {
+export const RouterProvider = ({ router, history, rpcContext, helmetContext, App }) => {
   const [_, startTransition] = useTransition();
   const [pathname, setPathname] = useState(history.location.pathname);
   const page = router.lookup(pathname) || router.lookup("/_404");
@@ -140,12 +141,14 @@ export const RouterProvider = ({ router, history, rpcContext, helmetContext }) =
           fallback: _jsx("p", {}, "Oops something went wrong"),
           children: _jsx(Suspense, {
             fallback: _jsx("p", {}, "Loading..."),
+            children: _jsx(App, {
-            children: _jsx(page, {}),
+              children: _jsx(page, {}),
+            })
           }),
         }),
       }),
     }),
-  });
+  })
 }
 export const useRouter = () => {
@@ -191,7 +194,10 @@ export const NavLink = ({ children, className, activeClassName, ...props }) => {
   })
 }
-export const hydrateApp = async () => {
+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({
@@ -205,7 +211,8 @@ export const hydrateApp = async () => {
   module.default.hydrateRoot(root, _jsx(RouterProvider, {
     history,
     router,
-    rpcContext: window.__EC_RPC_DATA__ || {},
+    rpcContext: window._EDGE_DATA_ || {},
     helmetContext: {},
+    App,
   }));
 }

pnpm-lock.yaml CHANGED Viewed

@@ -141,6 +141,9 @@ importers:
       postgres:
         specifier: 3.3.4
         version: 3.3.4
+      wrangler:
+        specifier: 3.0.1
+        version: 3.0.1
 packages:

readme.md CHANGED Viewed

@@ -45,7 +45,6 @@ which are compatible with these API's. Here is a list of some of them,
 3. Add tests for runtime
 4. Add E2E tests for example
 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

renderPage.js CHANGED Viewed

@@ -101,7 +101,7 @@ const render = async (children, {
   }
 }
-const renderPage = async (Page, req) => {
+const renderPage = async (Page, App, req) => {
   const url = new URL(req.url);
   const history = createMemoryHistory({
     initialEntries: [url.pathname + url.search],
@@ -137,6 +137,7 @@ const renderPage = async (Page, req) => {
                 router,
                 rpcContext,
                 helmetContext,
+                App,
               }),
             ]
           })
@@ -147,9 +148,11 @@ const renderPage = async (Page, req) => {
       Object.keys(helmetContext.helmet)
         .map((k) => helmetContext.helmet[k].toString())
         .join(''),
-    injectBeforeBodyClose: () => ''
+    injectOnEnd: () => {
+      return ''
-      + `<script>window.__EC_RPC_DATA__ = ${JSON.stringify(rpcContext)};</script>`
+        + `<script>window._EDGE_DATA_ = ${JSON.stringify(rpcContext)};</script>`
-      + `<script type="module" src="/js${jsScript}.js?hydrate=true"></script>`
+        + `<script type="module" src="/js${jsScript}.js?hydrate=true" defer></script>`
+    }
   });
   return new Response(stream, {
     headers: { 'Content-Type': 'text/html' },

~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