c7f7584 | edge-city

git clone https://git.pyrossh.dev/edge-city

edge-city is a next level meta-framework for react that runs only on edge runtimes

c7f7584 — pyrossh 2023-06-03T00:40:04+05:30

refactor dir

Generated files not shown: pnpm-lock.yaml

Files changed (21) hide show

example/package.json +5 -1
example/src/components/Layout/Layout.jsx +1 -1
example/src/pages/about/page.jsx +2 -1
example/src/pages/page.jsx +1 -1
example/src/pages/todos/Todo.jsx +1 -1
example/src/pages/todos/TodoList.jsx +1 -1
example/src/pages/todos/page.jsx +1 -1
example/vite.config.js +55 -0
index.js +0 -201
cli.js → lib/bin/cli.js +6 -6
lib/client/hydratePage.js +27 -0
lib/data.js +95 -0
lib/index.js +29 -0
index.test.js → lib/index.test.js +0 -0
lib/link.js +33 -0
package.json → lib/package.json +4 -1
lib/router.js +49 -0
lib/server/dev-server.js +18 -0
renderApi.js → lib/server/renderApi.js +0 -0
renderPage.js → lib/server/renderPage.js +1 -1
pnpm-workspace.yaml +1 -1

example/package.json CHANGED Viewed

@@ -8,6 +8,7 @@
     "dev:wrangler": "cd build && wrangler pages dev static",
     "deploy:wrangler": "cd build && wrangler pages deploy static",
     "build": " edge-city build -p cloudflare",
+    "build-2": "vite build",
     "generate": "drizzle-kit generate:pg --out migrations --schema migrations/schema.js",
     "migrate": "node scripts/migrate.js",
     "test": "jest",
@@ -33,7 +34,10 @@
     "eslint-config-react-app": "^7.0.1",
     "postgres": "3.3.4",
     "prettier": "^2.8.8",
-    "wrangler": "3.0.1"
+    "wrangler": "3.0.1",
+    "vite": "4.3.9",
+    "vite-plugin-pages": "0.30.1",
+    "@vitejs/plugin-react": "4.0.0"
   },
   "prettier": {
     "printWidth": 100,

example/src/components/Layout/Layout.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "edge-city";
+import Link from "edge-city/link";
 import "./Layout.css";
 const Layout = ({ children }) => {

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

@@ -1,5 +1,6 @@
 import React from "react";
+import Link from "edge-city/link";
-import { Link, useRouter } from "edge-city";
+import { useRouter } from "edge-city/router";
 import { Helmet } from "react-helmet-async";
 import "./page.css";

example/src/pages/page.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react";
-import { useRouter } from "edge-city";
+import { useRouter } from "edge-city/router";
 import Counter from "@/components/Counter/Counter";
 import { Helmet } from "react-helmet-async";
 import "./page.css";

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

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { TextField, Input } from "react-aria-components";
-import { cache, useMutation } from "edge-city";
+import { cache, useMutation } from "edge-city/data";
 import { updateTodo, deleteTodo } from "@/services/todos.service";
 import "./Todo.css";

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { useQuery } from "edge-city";
+import { useQuery } from "edge-city/data";
 import { getTodos } from "@/services/todos.service";
 import Spinner from "@/components/Spinner/Spinner";
 import Todo from "./Todo";

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

@@ -1,7 +1,7 @@
 import { Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { Helmet } from "react-helmet-async";
-import { cache, useMutation } from "edge-city";
+import { cache, useMutation } from "edge-city/data";
 import { useForm } from "react-hook-form";
 import { Button, TextField, Input } from "react-aria-components";
 import Spinner from "@/components/Spinner/Spinner";

example/vite.config.js ADDED Viewed

@@ -0,0 +1,55 @@
+import { defineConfig } from 'vite';
+function pagesPlugin(userOptions) {
+  return {
+    name: 'vite-plugin-pages',
+    enforce: 'pre',
+    async configResolved(config) {
+      userOptions.resolver = 'react'
+      ctx = new PageContext(userOptions, config.root)
+      ctx.setLogger(config.logger)
+      await ctx.searchGlob()
+    },
+    api: {
+      getResolvedRoutes() {
+        return ctx.options.resolver.getComputedRoutes(ctx)
+      },
+    },
+    configureServer(server) {
+      ctx.setupViteServer(server)
+    },
+    resolveId(id) {
+      if (ctx.options.moduleIds.includes(id))
+        return `${MODULE_ID_VIRTUAL}?id=${id}`
+      if (routeBlockQueryRE.test(id))
+        return ROUTE_BLOCK_ID_VIRTUAL
+      return null
+    },
+    async load(id) {
+      const {
+        moduleId,
+        pageId,
+      } = parsePageRequest(id)
+      if (moduleId === MODULE_ID_VIRTUAL && pageId && ctx.options.moduleIds.includes(pageId))
+        return ctx.resolveRoutes()
+      if (id === ROUTE_BLOCK_ID_VIRTUAL) {
+        return {
+          code: 'export default {};',
+          map: null,
+        }
+      }
+      return null
+    },
+  }
+}
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+  ],
+})

index.js DELETED Viewed

@@ -1,201 +0,0 @@
-import React, {
-  Suspense, createContext, useContext, useState, useEffect, useTransition, useCallback
-} from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { HelmetProvider } from 'react-helmet-async';
-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";
-export const defineRpc = (serviceName) => async (params = {}) => {
-  const res = await fetch(`${domain()}/_rpc/${serviceName}`, {
-    method: "POST",
-    headers: {
-      "Accept": "application/json",
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(params),
-  })
-  return await res.json();
-}
-export const cache = {
-  get: (k) => globalThis._EDGE_DATA_.data[k],
-  set: (k, v) => {
-    globalThis._EDGE_DATA_.data[k] = v;
-  },
-  invalidate: (k, setRefetch) => Promise.all(Array.from(globalThis._EDGE_DATA_.subs[k]).map((cb) => cb(setRefetch))),
-  subscribe: (k, cb) => {
-    if (!globalThis._EDGE_DATA_.subs[k]) {
-      globalThis._EDGE_DATA_.subs[k] = new Set();
-    }
-    globalThis._EDGE_DATA_.subs[k].add(cb)
-    return () => globalThis._EDGE_DATA_.subs[k].delete(cb);
-  }
-}
-/**
- *
- * @param {*} fn
- * @param {*} params
- * @returns
- */
-export const useQuery = (key, fn) => {
-  const [, toggle] = useState(false);
-  const [isRefetching, setIsRefetching] = useState(false);
-  const [err, setErr] = useState(null);
-  const refetch = useCallback(async (setRefetch = true) => {
-    try {
-      if (setRefetch) {
-        setIsRefetching(true);
-      }
-      setErr(null);
-      cache.set(key, await fn());
-    } catch (err) {
-      setErr(err);
-      throw err;
-    } finally {
-      if (setRefetch) {
-        setIsRefetching(false);
-      } else {
-        toggle((v) => !v);
-      }
-    }
-  }, [fn]);
-  useEffect(() => {
-    return cache.subscribe(key, refetch);
-  }, [key])
-  const value = cache.get(key);
-  if (value) {
-    if (value instanceof Promise) {
-      throw value;
-    } else if (value instanceof Error) {
-      throw value;
-    }
-    return { data: value, isRefetching, err, refetch };
-  }
-  cache.set(key, fn().then((v) => cache.set(key, v)));
-  throw cache.get(key);
-}
-export const useMutation = (fn) => {
-  const [isMutating, setIsMutating] = useState(false);
-  const [err, setErr] = useState(null);
-  const mutate = useCallback(async (params) => {
-    try {
-      setIsMutating(true);
-      setErr(null);
-      await fn(params);
-    } catch (err) {
-      setErr(err)
-      throw err;
-    } finally {
-      setIsMutating(false);
-    }
-  }, [fn])
-  return {
-    mutate,
-    isMutating,
-    err,
-  }
-}
-export const RouterContext = createContext(undefined);
-export const RouterProvider = ({ router, history, helmetContext, App }) => {
-  const [_, startTransition] = useTransition();
-  const [pathname, setPathname] = useState(history.location.pathname);
-  const page = router.lookup(pathname) || router.lookup("/_404");
-  useEffect(() => {
-    return history.listen(({ location }) => {
-      // this causes 2 renders to happen but stops jitter or flash due to React.lazy
-      startTransition(() => {
-        setPathname(location.pathname);
-      })
-    });
-  }, []);
-  return _jsx(RouterContext.Provider, {
-    value: {
-      history,
-      params: page.params || {},
-    },
-    children: _jsx(Suspense, {
-      fallback: _jsx("div", {}, "Routing...."),
-      children: _jsx(HelmetProvider, {
-        context: helmetContext,
-        children: _jsx(App, {
-          children: _jsx(page, {}),
-        })
-      }),
-    }),
-  })
-}
-export const useRouter = () => {
-  const { history, params } = useContext(RouterContext);
-  return {
-    pathname: history.location.pathname,
-    query: new URLSearchParams(history.location.search),
-    params,
-    push: history.push,
-    replace: history.replace,
-    forward: history.forward,
-    back: history.back,
-    reload: () => window.location.reload(),
-  };
-}
-export const Link = (props) => {
-  const router = useRouter();
-  return _jsx("a", {
-    ...props,
-    onMouseOver: (e) => {
-      // Simple prefetching for now will work only with cache headers
-      // fetch(getCssUrl(props.href));
-      // fetch(getCssUrl(props.href).replace("css", "jsx"));
-    },
-    onClick: (e) => {
-      e.preventDefault();
-      if (props && props.onClick) {
-        props.onClick(e);
-      }
-      router.push(props.href);
-    },
-  })
-}
-export const NavLink = ({ children, className, activeClassName, ...props }) => {
-  const { pathname } = useRouter();
-  const classNames = pathname === props.href ? [activeClassName, className] : [className];
-  return _jsx(Link, {
-    children,
-    className: classNames,
-    ...props,
-  })
-}
-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({
-    strictTrailingSlash: true,
-    routes: Object.keys(routemap).reduce((acc, r) => {
-      acc[r] = React.lazy(() => import(routemap[r]));
-      return acc;
-    }, {}),
-  });
-  const root = document.getElementById("root");
-  module.default.hydrateRoot(root, _jsx(RouterProvider, {
-    history,
-    router,
-    rpcContext: window._EDGE_DATA_ || {},
-    helmetContext: {},
-    App,
-  }));
-}

cli.js → lib/bin/cli.js RENAMED Viewed

@@ -62,7 +62,7 @@ const bundleJs = async ({ entryPoints, isServer, outfile, ...options }, plg) =>
     entryPoints,
     outfile,
     format: 'esm',
-    external: ["node:*"],
+    external: isServer ? [] : ["node:*"], // TODO: "react", "react-dom/client", "react-aria-components" "react-error-boundary" "react-helmet-async" "react-hook-form" "zod" "lodash" "date-fns"
     color: true,
     keepNames: !isProd,
     minify: isProd,
@@ -112,7 +112,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/renderPage";
+            import renderPage from "edge-city/server/renderPage";
             import init from "@/init";
             ${importAppComp}
@@ -156,14 +156,14 @@ const bundlePages = async () => {
       build.onLoad({ filter: /\\*.page.jsx/, namespace: undefined }, (args) => {
         const data = fs.readFileSync(args.path);
         const newSrc = `
-            import { hydrateApp } from "edge-city";
+            import hydratePage from "edge-city/client/hydratePage";
             ${importAppComp}
             ${data.toString()}
             const searchParams = new URL(import.meta.url).searchParams;
             if (searchParams.get("hydrate") === "true") {
-              hydrateApp(App)
+              hydratePage(App)
             }
           `
         return {
@@ -182,7 +182,7 @@ const bundlePages = async () => {
         const svcName = args.path.replace(srcDir, "").replace("/services/", "").replace(".service.js", "");
         const funcs = parseExports(src);
         const newSrc = `
-          import { defineRpc } from "edge-city";
+          import { defineRpc } from "edge-city/data";
           ${funcs.map((f) => `export const ${f} = defineRpc("${svcName}/${f}")`).join("\n")}
         `
         return {
@@ -217,7 +217,7 @@ const bundleServices = async () => {
           setup(build) {
             build.onLoad({ filter: /\\*.service.js/, namespace: undefined }, async (args) => {
               const newSrc = `
-                import renderApi from "edge-city/renderApi";
+                import renderApi from "edge-city/server/renderApi";
                 import init from "@/init";
                 ${src.toString()}

lib/client/hydratePage.js ADDED Viewed

@@ -0,0 +1,27 @@
+import React from "react";
+import { hydrateRoot } from "react-dom/client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createBrowserHistory } from "history";
+import { createRouter } from "radix3";
+import { RouterProvider } from "../router";
+import routemap from '/routemap.json' assert {type: 'json'};
+const hydratePage = (App) => {
+  const history = createBrowserHistory();
+  const router = createRouter({
+    strictTrailingSlash: true,
+    routes: Object.keys(routemap).reduce((acc, r) => {
+      acc[r] = React.lazy(() => import(routemap[r]));
+      return acc;
+    }, {}),
+  });
+  const root = document.getElementById("root");
+  hydrateRoot(root, _jsx(RouterProvider, {
+    history,
+    router,
+    rpcContext: window._EDGE_DATA_ || {},
+    helmetContext: {},
+    App,
+  }));
+}
+export default hydratePage;

lib/data.js ADDED Viewed

@@ -0,0 +1,95 @@
+import { useState, useEffect, useCallback } from "react";
+export const defineRpc = (serviceName) => async (params = {}) => {
+  const res = await fetch(`/_rpc/${serviceName}`, {
+    method: "POST",
+    headers: {
+      "Accept": "application/json",
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(params),
+  })
+  return await res.json();
+}
+export const cache = {
+  get: (k) => globalThis._EDGE_DATA_.data[k],
+  set: (k, v) => {
+    globalThis._EDGE_DATA_.data[k] = v;
+  },
+  invalidate: (k, setRefetch) => Promise.all(Array.from(globalThis._EDGE_DATA_.subs[k]).map((cb) => cb(setRefetch))),
+  subscribe: (k, cb) => {
+    if (!globalThis._EDGE_DATA_.subs[k]) {
+      globalThis._EDGE_DATA_.subs[k] = new Set();
+    }
+    globalThis._EDGE_DATA_.subs[k].add(cb)
+    return () => globalThis._EDGE_DATA_.subs[k].delete(cb);
+  }
+}
+/**
+ *
+ * @param {*} fn
+ * @param {*} params
+ * @returns
+ */
+export const useQuery = (key, fn) => {
+  const [, toggle] = useState(false);
+  const [isRefetching, setIsRefetching] = useState(false);
+  const [err, setErr] = useState(null);
+  const refetch = useCallback(async (setRefetch = true) => {
+    try {
+      if (setRefetch) {
+        setIsRefetching(true);
+      }
+      setErr(null);
+      cache.set(key, await fn());
+    } catch (err) {
+      setErr(err);
+      throw err;
+    } finally {
+      if (setRefetch) {
+        setIsRefetching(false);
+      } else {
+        toggle((v) => !v);
+      }
+    }
+  }, [fn]);
+  useEffect(() => {
+    return cache.subscribe(key, refetch);
+  }, [key])
+  const value = cache.get(key);
+  if (value) {
+    if (value instanceof Promise) {
+      throw value;
+    } else if (value instanceof Error) {
+      throw value;
+    }
+    return { data: value, isRefetching, err, refetch };
+  }
+  cache.set(key, fn().then((v) => cache.set(key, v)));
+  throw cache.get(key);
+}
+export const useMutation = (fn) => {
+  const [isMutating, setIsMutating] = useState(false);
+  const [err, setErr] = useState(null);
+  const mutate = useCallback(async (params) => {
+    try {
+      setIsMutating(true);
+      setErr(null);
+      await fn(params);
+    } catch (err) {
+      setErr(err)
+      throw err;
+    } finally {
+      setIsMutating(false);
+    }
+  }, [fn])
+  return {
+    mutate,
+    isMutating,
+    err,
+  }
+}

lib/index.js ADDED Viewed

@@ -0,0 +1,29 @@
+import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 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({
+    strictTrailingSlash: true,
+    routes: Object.keys(routemap).reduce((acc, r) => {
+      acc[r] = React.lazy(() => import(routemap[r]));
+      return acc;
+    }, {}),
+  });
+  const root = document.getElementById("root");
+  module.default.hydrateRoot(root, _jsx(RouterProvider, {
+    history,
+    router,
+    rpcContext: window._EDGE_DATA_ || {},
+    helmetContext: {},
+    App,
+  }));
+}

index.test.js → lib/index.test.js RENAMED Viewed

File without changes

lib/link.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRouter } from "./router";
+const Link = (props) => {
+  const router = useRouter();
+  return _jsx("a", {
+    ...props,
+    onMouseOver: (e) => {
+      // Simple prefetching for now will work only with cache headers
+      // fetch(getCssUrl(props.href));
+      // fetch(getCssUrl(props.href).replace("css", "jsx"));
+    },
+    onClick: (e) => {
+      e.preventDefault();
+      if (props && props.onClick) {
+        props.onClick(e);
+      }
+      router.push(props.href);
+    },
+  })
+}
+export const NavLink = ({ children, className, activeClassName, ...props }) => {
+  const { pathname } = useRouter();
+  const classNames = pathname === props.href ? [activeClassName, className] : [className];
+  return _jsx(Link, {
+    children,
+    className: classNames,
+    ...props,
+  })
+}
+export default Link;

package.json → lib/package.json RENAMED Viewed

@@ -29,6 +29,9 @@
     "walkdir": "0.4.1",
     "esbuild-plugin-resolve": "2.0.0",
     "wrangler": "3.0.1",
+    "miniflare": "3.0.1",
+    "vite": "4.3.9",
+    "express": "4.18.2",
     "node-watch": "0.7.3",
     "dotenv": "16.0.3",
     "jest": "29.5.0"
@@ -40,7 +43,7 @@
     "react-helmet-async": "*"
   },
   "bin": {
-    "edge-city": "cli.js"
+    "edge-city": "bin/cli.js"
   },
   "jest": {
     "verbose": true

lib/router.js ADDED Viewed

@@ -0,0 +1,49 @@
+import {
+  Suspense, createContext, useContext, useState, useEffect, useTransition, useCallback
+} from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { HelmetProvider } from 'react-helmet-async';
+export const RouterContext = createContext(undefined);
+export const RouterProvider = ({ router, history, helmetContext, App }) => {
+  const [_, startTransition] = useTransition();
+  const [pathname, setPathname] = useState(history.location.pathname);
+  const page = router.lookup(pathname) || router.lookup("/_404");
+  useEffect(() => {
+    return history.listen(({ location }) => {
+      // this causes 2 renders to happen but stops jitter or flash due to React.lazy
+      startTransition(() => {
+        setPathname(location.pathname);
+      })
+    });
+  }, []);
+  return _jsx(RouterContext.Provider, {
+    value: {
+      history,
+      params: page.params || {},
+    },
+    children: _jsx(Suspense, {
+      fallback: _jsx("div", {}, "Routing...."),
+      children: _jsx(HelmetProvider, {
+        context: helmetContext,
+        children: _jsx(App, {
+          children: _jsx(page, {}),
+        })
+      }),
+    }),
+  })
+}
+export const useRouter = () => {
+  const { history, params } = useContext(RouterContext);
+  return {
+    pathname: history.location.pathname,
+    query: new URLSearchParams(history.location.search),
+    params,
+    push: history.push,
+    replace: history.replace,
+    forward: history.forward,
+    back: history.back,
+    reload: () => window.location.reload(),
+  };
+}

lib/server/dev-server.js ADDED Viewed

@@ -0,0 +1,18 @@
+import http from "http";
+const server = http.createServer((req, res) => {
+  res.writeHead(200, { 'Content-Type': 'application/json' });
+  res.end(JSON.stringify({
+    data: 'Hello World!',
+  }))
+})
+server.listen(3000);
+server.on('error', (e) => {
+  if (e.code === 'EADDRINUSE') {
+    console.log('Address in use, retrying...');
+    setTimeout(() => {
+      server.close();
+      server.listen(PORT, HOST);
+    }, 1000);
+  }
+});

renderApi.js → lib/server/renderApi.js RENAMED Viewed

File without changes

renderPage.js → lib/server/renderPage.js RENAMED Viewed

@@ -5,7 +5,7 @@ import { createRouter } from "radix3";
 import { renderToReadableStream } from "react-dom/server";
 import isbot from "isbot";
 import routemap from '/routemap.json' assert {type: 'json'};
-import { RouterProvider } from "./index";
+import { RouterProvider } from "../router";
 const stringToStream = (str) => {
   return new ReadableStream({

pnpm-workspace.yaml CHANGED Viewed

@@ -1,4 +1,4 @@
 packages:
-  - "./"
+  - "lib"
   - "example"
   - "docs"