072de50 | 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

072de50 — pyrossh 2023-05-23T10:49:01+05:30

use fse

Generated files not shown: pnpm-lock.yaml

Files changed (8) hide show

cli.js +25 -25
example/package.json +1 -1
example/pages/_404/page.css +0 -1
example/pages/_404/page.jsx +11 -8
example/pages/_500/page.jsx +11 -8
index.js +10 -2
package.json +1 -0
pnpm-workspace.yaml +1 -0

cli.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { hideBin } from 'yargs/helpers'
 import esbuild from 'esbuild';
 import resolve from 'esbuild-plugin-resolve';
 import fs from "fs";
+import fse from "fs-extra";
 import path from 'path';
 import walkdir from 'walkdir';
 import postcss from "postcss"
@@ -14,7 +15,8 @@ import bytes from 'bytes';
 import pc from 'picocolors';
 import ms from 'ms';
+let isProd = false;
-const isProd = process.env.NODE_ENV === "production";
+const inputStaticDir = path.join(process.cwd(), "static");
 const buildDir = path.join(process.cwd(), "build");
 const staticDir = path.join(buildDir, "static");
@@ -50,6 +52,8 @@ const bundleJs = async ({ entryPoints, outfile, ...options }, plg) => {
     plugins: [
       resolve({
         "/routemap.json": `${staticDir}/routemap.json`,
+        "@/_404/page": `${process.cwd()}/pages/_404/page.jsx`,
+        "@/_500/page": `${process.cwd()}/pages/_500/page.jsx`,
       }),
       plg,
     ]
@@ -87,6 +91,9 @@ const bundlePages = async () => {
           const data = fs.readFileSync(args.path);
           const newSrc = `
             import { renderPage } from "edge-city";
+            import NotFoundPage from "@/_404/page";
+            import ErrorPage from "@/_500/page";
             ${data.toString()}
             export function onRequest(context) {
@@ -159,7 +166,7 @@ const bundleServices = async () => {
   const services = walkdir.sync(path.join(process.cwd(), "services"))
     .filter((s) => s.includes(".service.js"));
   for (const s of services) {
-    const dest = s.replace(process.cwd(), "").replace("/services", "").replace(".service.js", "")
+    const dest = s.replace(process.cwd(), "").replace("/services", "").replace(".service.js", "");
     const pkg = await import(s);
     for (const p of Object.keys(pkg)) {
       const buildStart = Date.now();
@@ -200,7 +207,7 @@ const bundleServices = async () => {
           });
         }
       })
-      ensureDir(`build/functions/_rpc${dest}`)
+      fse.ensureDirSync(`build/functions/_rpc${dest}`)
       const outfile = `build/functions/_rpc${dest}/${p}.js`;
       fs.writeFileSync(outfile, result.outputFiles[0].contents);
       recordSize(buildStart, outfile);
@@ -214,32 +221,25 @@ const bundleCss = async () => {
     postcssCustomMedia(),
     postcssNesting,
   ]).process(generatedCss, { from: "app.css", to: "app.css" });
-  ensureDir(`build/static/css`)
+  fse.ensureDirSync(`build/static/css`)
   fs.writeFileSync(`${process.cwd()}/build/static/css/app.css`, result.toString());
 }
+const build = async (platform, setProd) => {
+  fse.removeSync(buildDir);
-const ensureDir = (d) => {
+  fse.ensureDirSync(buildDir);
-  if (!fs.existsSync(d)) {
+  fse.ensureDirSync(staticDir);
-    fs.mkdirSync(d, { recursive: true });
+  fse.copySync(inputStaticDir, staticDir);
-  }
-}
-const cleanDir = (d) => {
-  if (fs.existsSync(d)) {
+  if (setProd) {
-    fs.rmSync(d, { recursive: true });
+    process.env.NODE_ENV = "production";
+    isProd = true;
   }
-}
-const createDirs = () => {
-  cleanDir(buildDir);
-  ensureDir(buildDir);
-  ensureDir(staticDir);
-}
-const build = async () => {
-  createDirs();
   await bundlePages();
-  // await bundleServices();
+  await bundleServices();
   await bundleCss();
+  if (platform === "cloudflare") {
+    // create _routes.json for cloudflare which only includes the pages and services
+  }
 }
 yargs(hideBin(process.argv))
@@ -253,7 +253,7 @@ yargs(hideBin(process.argv))
     })
       .demandOption("p")
   }, ({ platform }) => {
-    build(platform);
+    build(platform, true);
   })
   .command('dev', 'run the dev server', (y) => {
     y.option('platform', {
@@ -263,7 +263,7 @@ yargs(hideBin(process.argv))
       choices: ['cloudflare', 'vercel']
     })
   }, ({ platform }) => {
-    build(platform);
+    build(platform, false);
   })
   .demandCommand(1)
   .parse()

example/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "type": "module",
   "scripts": {
     "dev": "edge-city dev -p cloudflare",
-    "build:prod": " edge-city build -p cloudflare",
+    "build": " edge-city build -p cloudflare",
     "test": "jest",
     "test-e2e": "playwright test"
   },

example/pages/_404/page.css CHANGED Viewed

@@ -6,7 +6,6 @@
   color: #000;
   background: #fff;
   font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif;
-  height: 100vh;
   text-align: center;
   & h1 {

example/pages/_404/page.jsx CHANGED Viewed

@@ -1,18 +1,21 @@
 import React from 'react';
 import { Helmet } from 'react-helmet-async';
+import Layout from '@/components/Layout/Layout';
 import "./page.css";
 const Page = () => {
   return (
+    <Layout>
-    <div className="notfound-page">
+      <div className="notfound-page">
-      <Helmet>
+        <Helmet>
-        <title>Page not found</title>
+          <title>Page not found</title>
-      </Helmet>
+        </Helmet>
-      <h1>404 - Page not found</h1>
+        <h1>404 - Page not found</h1>
-      <div className="content">
+        <div className="content">
-        <h2>This page could not be found</h2>
+          <h2>This page could not be found</h2>
+        </div>
       </div>
-    </div>
+    </Layout>
   )
 }

example/pages/_500/page.jsx CHANGED Viewed

@@ -1,18 +1,21 @@
 import React from 'react';
 import { Helmet } from 'react-helmet-async';
+import Layout from '@/components/Layout/Layout';
 import "./page.css";
 const Page = () => {
   return (
+    <Layout>
-    <div className="err-page">
+      <div className="err-page">
-      <Helmet>
+        <Helmet>
-        <title>Oop's Something went wrong</title>
+          <title>Oop's Something went wrong</title>
-      </Helmet>
+        </Helmet>
-      <h1>Oop's Something went wrong</h1>
+        <h1>Oop's Something went wrong</h1>
-      <div className="content">
+        <div className="content">
-        <h2>Internal Server Error</h2>
+          <h2>Internal Server Error</h2>
+        </div>
       </div>
-    </div>
+    </Layout>
   )
 }

index.js CHANGED Viewed

@@ -125,7 +125,7 @@ export const RouterContext = createContext(undefined);
 const getMatch = (router, pathname) => {
   const matchedPage = router.lookup(pathname);
   if (!matchedPage) {
-    return router.lookup("/js/_404.js")
+    return router.lookup("/_404")
   }
   return matchedPage;
 }
@@ -250,6 +250,14 @@ export const renderPage = async (PageComponent, req) => {
   const history = createMemoryHistory({
     initialEntries: [url.pathname + url.search],
   });
+  const router = createRouter({
+    strictTrailingSlash: true,
+    routes: Object.keys(routemap).reduce((acc, r) => {
+      acc[r] = r;
+      return acc;
+    }, {}),
+  });
+  const AppPage = router.lookup(url.pathname) ? PageComponent : NotFoundPage;
   const jsScript = url.pathname === "/" ? "index" : url.pathname;
   const helmetContext = {}
   const stream = await renderToReadableStream(
@@ -271,7 +279,7 @@ export const renderPage = async (PageComponent, req) => {
             router: null,
             rpcCache: {},
             helmetContext,
-            PageComponent,
+            PageComponent: AppPage,
           }), _jsx(_Fragment, {
             children: _jsx("script", {
               type: "module",

package.json CHANGED Viewed

@@ -20,6 +20,7 @@
     "esbuild": "0.17.19",
     "yargs": "17.7.2",
     "mime-types": "2.1.35",
+    "fs-extra": "11.1.1",
     "ms": "2.1.3",
     "picocolors": "1.0.0",
     "postcss": "^8.4.21",

pnpm-workspace.yaml CHANGED Viewed

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