4d1436e | 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

4d1436e — pyrossh 2023-05-22T22:34:00+05:30

improve cli

Generated files not shown: pnpm-lock.yaml

Files changed (7) hide show

cli.js +45 -63
example/package.json +3 -4
example/services/todos.service.js +1 -1
example/services/todos.service.test.js +0 -1
index.test.js +15 -0
package.json +10 -3
readme.md +6 -9

cli.js CHANGED Viewed

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
-import meow from 'meow';
+import yargs from 'yargs'
+import { hideBin } from 'yargs/helpers'
 import esbuild from 'esbuild';
 import resolve from 'esbuild-plugin-resolve';
 import fs from "fs";
@@ -13,46 +14,9 @@ import bytes from 'bytes';
 import pc from 'picocolors';
 import ms from 'ms';
-const __dirname = path.dirname(import.meta.url.replace("file://", ""));
-const appName = "edge-city";
-const version = JSON.parse(fs.readFileSync(path.join(__dirname, "package.json"))).version;
-const cli = meow(`
-${appName} v${version}
-Usage
-  $ ${appName} build cloudflare
-  $ ${appName} build vercel
-`, {
-  importMeta: import.meta,
-  autoVersion: true,
-});
-if (cli.input.length != 2) {
-  cli.showHelp();
-  process.exit(0);
-}
-console.log(`${appName} v${version}`)
-console.log(`running with NODE_ENV=${process.env.NODE_ENV}`);
-const ensureDir = (d) => {
-  if (!fs.existsSync(d)) {
-    fs.mkdirSync(d, { recursive: true });
-  }
-}
-const cleanDir = (d) => {
-  if (fs.existsSync(d)) {
-    fs.rmSync(d, { recursive: true });
-  }
-}
 const isProd = process.env.NODE_ENV === "production";
 const buildDir = path.join(process.cwd(), "build");
 const staticDir = path.join(buildDir, "static");
-const createDirs = () => {
-  cleanDir(buildDir);
-  ensureDir(buildDir);
-  ensureDir(staticDir);
-}
 const recordSize = (buildStart, dest) => {
   const outLength = fs.statSync(dest).size;
@@ -93,29 +57,6 @@ const bundleJs = async ({ entryPoints, outfile, ...options }, plg) => {
   return result;
 }
-// const bundleBun = async (r, type) => {
-//   const buildStart = Date.now();
-//   const shortName =  r.replace(process.cwd(), "").replace("/page.jsx", "");
-//   const result = await Bun.build({
-//     entrypoints: [r],
-//     outdir: `${process.cwd()}/bb/functions/${shortName}`,
-//   });
-//   if (!result.success) {
-//     console.error("Build failed");
-//     for (const message of result.logs) {
-//       // Bun will pretty print the message object
-//       console.error(message);
-//     }
-//   }
-//   for (const o of result.outputs) {
-//     const outLength = (await o.arrayBuffer()).byteLength;
-//     const builtTime = ms(Date.now() - buildStart);
-//     console.log(
-//       `✓ Bundled ${o.kind} ${o.path.replace(process.cwd() + "/bb", "")} ${pc.cyan(`(${bytes(outLength)})`)} ${pc.gray(`[${builtTime}]`)}`
-//     );
-//   }
-// }
 const buildRouteMap = (routes) => {
   const buildStart = new Date();
   const routemap = routes.reduce((acc, r) => {
@@ -277,14 +218,55 @@ const bundleCss = async () => {
   fs.writeFileSync(`${process.cwd()}/build/static/css/app.css`, result.toString());
 }
+const ensureDir = (d) => {
+  if (!fs.existsSync(d)) {
+    fs.mkdirSync(d, { recursive: true });
+  }
+}
+const cleanDir = (d) => {
+  if (fs.existsSync(d)) {
+    fs.rmSync(d, { recursive: true });
+  }
+}
+const createDirs = () => {
+  cleanDir(buildDir);
+  ensureDir(buildDir);
+  ensureDir(staticDir);
+}
-const main = async () => {
+const build = async () => {
   createDirs();
   await bundlePages();
   // await bundleServices();
   await bundleCss();
 }
+yargs(hideBin(process.argv))
+  .scriptName("edge-city")
+  .usage('$0 <cmd> [args]')
+  .command('build', 'build the project', (y) => {
+    y.option('platform', {
+      alias: 'p',
+      description: 'The edge platform',
+      choices: ['cloudflare', 'vercel'],
+    })
+      .demandOption("p")
+  }, ({ platform }) => {
+    build(platform);
+  })
+  .command('dev', 'run the dev server', (y) => {
+    y.option('platform', {
+      alias: 'p',
+      type: 'string',
+      description: 'cloudflare or vercel',
+      choices: ['cloudflare', 'vercel']
+    })
+  }, ({ platform }) => {
+    build(platform);
+  })
+  .demandCommand(1)
-main();
+  .parse()
 // const renderJs = async (srcFile) => {
 //   try {

example/package.json CHANGED Viewed

@@ -2,10 +2,9 @@
   "name": "edge-city-example",
   "type": "module",
   "scripts": {
-    "dev": "edge-city build cloudflare",
+    "dev": "edge-city dev -p cloudflare",
-    "dev-server": "wrangler pages dev static --local --live-reload",
-    "build": "NODE_ENV=production edge-city build cloudflare",
+    "build:prod": " edge-city build -p cloudflare",
-    "test": "bun test",
+    "test": "jest",
     "test-e2e": "playwright test"
   },
   "dependencies": {

example/services/todos.service.js CHANGED Viewed

@@ -11,7 +11,7 @@ const todos = pgTable('todos', {
   updatedAt: date('updatedAt'),
 });
-const createSchema = z.object({
+export const createSchema = z.object({
   text: z.string().nonempty("please enter some text"),
   completed: z.boolean(),
 });

example/services/todos.service.test.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import { test, expect } from "bun:test";
 import { createSchema } from "./todos.service";
 test("validate createSchema", () => {

index.test.js ADDED Viewed

@@ -0,0 +1,15 @@
+describe('A thing', () => {
+  it('should work', () => {
+    expect(1).toEqual(1);
+  });
+  it('should be ok', () => {
+    expect(1).toEqual(1);
+  });
+  describe('a nested thing', () => {
+    it('should work', () => {
+      expect(1).toEqual(1);
+    });
+  });
+});

package.json CHANGED Viewed

@@ -4,7 +4,10 @@
   "type": "module",
   "main": "index.js",
   "engines": {
-    "node": ">= v20"
+    "node": ">= 20"
+  },
+  "scripts": {
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest index.test.js"
   },
   "dependencies": {
     "history": "^5.3.0",
@@ -15,7 +18,7 @@
     "autoprefixer": "^10.4.14",
     "bytes": "3.1.2",
     "esbuild": "0.17.19",
-    "meow": "12.0.1",
+    "yargs": "17.7.2",
     "mime-types": "2.1.35",
     "ms": "2.1.3",
     "picocolors": "1.0.0",
@@ -23,7 +26,8 @@
     "postcss-custom-media": "^9.1.2",
     "postcss-nesting": "^11.2.1",
     "walkdir": "0.4.1",
-    "esbuild-plugin-resolve": "2.0.0"
+    "esbuild-plugin-resolve": "2.0.0",
+    "jest": "29.5.0"
   },
   "peerDependencies": {
     "react": "*",
@@ -34,5 +38,8 @@
   },
   "bin": {
     "edge-city": "cli.js"
+  },
+  "jest": {
+    "verbose": true
   }
 }

readme.md CHANGED Viewed

@@ -1,19 +1,17 @@
 # Edge City
 edge-city is a next level meta-framework for react that runs only on edge runtimes.
-It uses esbuild as its bundler/transpiler.
-It uses file system routing (similar to nextjs app router) with streaming SSR + CSR to render pages.
+It uses file system routing with streaming SSR + CSR to render pages.
 It is very opionated and has set of idiomatic ways of doing things.
 It has an inbuilt rpc mechanism to access server resources instead of a typical REST API.
 It aims to have almost the same router api as nextjs router for ease of use.
 During development each request for a page is executed in a separate edge-runtime (miniflare/vercel) vm.
-During production each page is packaged to an esm function adapted to the platform of your choice.
+During production each page is packaged to an esm function adapted to the platform of your choice.
 ## Why?
-Beacause,
-* Its really hard to have a streaming SSR + CSR setup in nextjs currently.
+* Its really hard to have a streaming SSR + CSR with automatic data rehydration setup in nextjs currently.
-* There is no framework which runs your code in an edge simulated environment during development and targets only edge for production.
+* There is no meta-framework which runs your code in an edge simulated environment during development.
 ## Requirements
 1. `node >= v20`
@@ -22,9 +20,8 @@ Beacause,
 ### Supported platforms
 1. [Cloudflare page functions](https://developers.cloudflare.com/pages/platform/functions/routing/)
-2. [Vercel edge functions](https://vercel.com/docs/concepts/functions/edge-functions)
+2. [TODO][Vercel edge functions](https://vercel.com/docs/concepts/functions/edge-functions)
-3. [Netlify edge functions](https://docs.netlify.com/edge-functions/overview/)
+3. [TODO][Netlify edge functions](https://docs.netlify.com/edge-functions/overview/)
-4. [Deno Deploy](https://deno.com/deploy)
 ## Developing