@server/next 0.12.1 → 0.15.0

package/package.json

@@ -1,65 +1,43 @@
 {
   "name": "@server/next",
-  "version": "0.12.1",
-  "description": "An experimental Server.js reimplementation",
-  "main": "index.js",
-  "type": "module",
+  "version": "0.15.0",
+  "description": "An experimental reimplementation of server.js focused on the DX",
+  "homepage": "https://node-server.com/",
+  "repository": "https://github.com/franciscop/server-next.git",
+  "bugs": "https://github.com/franciscop/server-next/issues",
+  "funding": "https://www.paypal.me/franciscopresencia/19",
+  "author": "Francisco Presencia <public@francisco.io> (https://francisco.io/)",
+  "license": "UNLICENSED",
   "scripts": {
-    "build": "rollup src/index.js --output.format es --name server --output.file index.js && npm run size",
-    "start": "npm run test -- --watch",
+    "start": "node --experimental-vm-modules node_modules/jest/bin/jest.js --watch",
     "size": "echo \"$(gzip -c index.js | wc -c) bytes\" # Only for Unix",
-    "test": "jest --detectOpenHandles"
-  },
-  "engines": {
-    "node": ">=12.0.0"
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
   },
-  "engineStrict": true,
   "keywords": [
     "server",
     "node",
     "server.js"
   ],
-  "files": [],
-  "author": "Francisco Presencia <public@francisco.io> (https://francisco.io/)",
-  "license": "UNLICENSED",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/franciscop/server-next.git"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "@babel/core": "^7.4.4",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/preset-env": "^7.4.4",
-    "jest": "^24.8.0",
-    "rollup": "^1.21.4"
+  "type": "module",
+  "main": "src/index.js",
+  "files": [
+    "src/"
+  ],
+  "engines": {
+    "node": ">=14.0.0"
   },
-  "babel": {
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "targets": {
-            "node": "current"
-          }
-        }
-      ]
-    ],
-    "plugins": [
-      [
-        "@babel/plugin-syntax-dynamic-import"
-      ]
-    ],
-    "env": {
-      "test": {
-        "plugins": [
-          "dynamic-import-node"
-        ]
-      }
-    }
+  "engineStrict": true,
+  "dependencies": {
+    "dotenv": "^16.0.1",
+    "spinnies": "^0.5.1",
+    "urlpattern-polyfill": "^5.0.0"
   },
-  "bugs": {
-    "url": "https://github.com/franciscop/server-next/issues"
+  "devDependencies": {
+    "jest": "^26.0.1",
+    "prettier": "^2.7.0"
   },
-  "homepage": "https://github.com/franciscop/server-next#readme"
+  "jest": {
+    "testEnvironment": "jest-environment-node",
+    "transform": {}
+  }
 }

package/readme.md

@@ -1,87 +1,86 @@
+# Server @ Next
+
 > **VERY EARLY WORK IN PROGRESS**
 >
 > **I don't know what will come out of this, if anything! Treat as the most experimental thing you've ever seen**
 
-# Server.js
-
-New implementation from scratch. This version has these changes when compared with the 1.0 (WIP):
-
-- Tiny footprint with no dependencies, all bundled in a single file. Installing and using the full library takes under 10kb (target limit).
-- Faster! Reimplemented from scratch for speed. With raw ES7 and a tiny code footprint, your server will fly.
-- Modern ES6 syntax for both the library and examples.
-- Error handling improved greatly.
-- Compatible with Cloudflare Workers so you can run the same code on Node.js or on a Worker.
-- Not using express underneath anymore. Considering keeping the compatibility layer anynway (since Express itself is a thin layer).
-- Changed the reply logic greatly, including the removal of `render()`. This is the main reason express was removed. Many servers don't need render() at all.
-- **[security]** Removed mandatory CSRF token, since this is only useful for server-rendered pages and not for SPA. You can activate it with a single option as before.
-
-Conceptually, the world is moving out of server-rendered websites so we are as well. Now instead we treat APIs as first-class citizens.
-
-```js
-// It will be published under `server` in the future
-import server, { get, post } from "@server/next";
-
-server(
-  get("/", () => `Homepage works! Try '/users/abc'`),
-  get("/users/:id", ({ params }) => `The user is ${params.id}`),
-  post("/users", () => ({ id: "abc", name: "Francisco" }))
-);
-```
-
-## Demo
-
-Create a directory, initialize npm and install `@server/next`:
-
-```bash
-mkdir server-demo && cd server-demo
-npm init --yes
-npm install @server/next
-```
-
-Create a `index.js` with a home route and a path route:
+A fully-fledged web server for Node.js, with all the basics covered for you:
 
 ```js
-import server, { get } from "@server/next";
-
-server(
-  get("/", ctx => `Hello there!`),
-  get("/:path", ctx => `Visited "${ctx.params.path}"`)
-).then(ctx => console.log(`Running on ${ctx.runtime}`));
+import server, { get, post, put, use, error } from 'server';
+
+// Create a running instance of the server
+const app = server(config, [pluginA, pluginB]);
+
+// Attach handlers to the instance
+app([
+  get('/users', getUsers),
+  post('/users', createUser),
+  put('/users/:id', editUser),
+  use('/admin/*', dashboard),
+  error(ctx => console.log(ctx.error))
+]);
 ```
 
-Modify `package.json` to add `"type": "module"` for that nice `import` syntax:
-
-```json
-{
-  "main": "index.js",
-  "type": "module",
-  ...
-}
-```
-
-Start it with `node .` and visit http://localhost:3000/ 🎉
-
+It includes all the things you would expect from a modern Server framework, like routing, static file serving, body+file parsing, gzip+brotli\*, streaming, etc.
 
+> \* not yet available
 
-## Building for Cloudflare
-
-If you also want to build it (for example, for Cloudflare Workers) you can build it with `rollup`. Please see more info [in Cloudflare's official documentation](https://developers.cloudflare.com/workers/archive/writing-workers/using-npm-modules/).
+## Upgradingn server
 
+Why? The ecosystem is moving out of server-rendered websites so we are as well. Now instead we treat APIs as first-class citizens. Desired improvements (WIP!):
 
+- Tiny footprint with no dependencies, all bundled in a single file. Installing and using the full library takes under 10kb (target limit).
+- Faster! Reimplemented from scratch for speed. With raw ES6+ and a tiny code footprint, your server will fly.
+- Modern ES6+ESM syntax for both the library and examples.
+- Error handling improved greatly.
+- Not using express underneath anymore. Considering keeping the compatibility layer anyway (since Express itself is a thin layer).
+- Changed the reply logic greatly, including the removal of `render()`. This is the main reason express was removed. Many servers don't need render() at all.
+- **[security]** Removed mandatory CSRF token, since this is only useful for server-rendered pages and not for SPA. You can activate it with a single option as before.
 
-## TODO
 
-New guides coming:
+## Progress
 
-- Modify all documentation to use the new ES6 syntax. Explain how to bundle and run it. Maybe create `npx @server/build`.
-- Consider other serverless architectures.
-- How to even test? Create a test suite that makes requests.
+- Router has `get` and `post`, as well as URL pattern matches
+- The middleware can return:
+  - A number and it'll be set as the status code
+  - A string and it'll be sent as plain text or html (if it starts with "<")
+  - A readStream and it'll be piped to the response
+  - An object with `status`, `body` and `headers` and it'll be set raw.
 
 
+## Some plugins
 
-## Others
+> This question is just some concepts/ideas
 
-Random thoughts and ramblings:
+Plugins? Or internals?
 
-- Consider normalizing a `kv` store sorf-of, which would be very useful for both sessions and user-code. Right now we are using/supporting Redis.
-- Startup time is critical for serverless.
+```js
+import Bucket from 'bucket/s3';
+import Redis from 'redis';
+
+const bucket = Bucket('my-bucket', { id, key });
+const cache = Redis('my-redis', ...);
+
+const app = server({ public:  bucket, cache });
+
+app([
+  post('/uploads', ctx => {
+    // Without { public: bucket }, it'd be a local file in the filesystem
+    console.log(ctx.files.profile);
+    // file.name
+    // file.id
+    // file.path
+    // file.type
+    // file.size
+
+    // With { public: bucket }, it's the reference to the bucket file
+    console.log(ctx.files.profile);
+    // file.name
+    // file.id
+    // file.path
+    // file.type
+    // file.size
+  })
+]);
+```

package/src/RequestLogger.js

@@ -0,0 +1,77 @@
+import Spinnies from "spinnies";
+import color from "./color.js";
+
+const isProduction = process.env.NODE_ENV === "production";
+
+const format = (n, [below, above], limit = Infinity) => {
+  if (n < 1000) {
+    return n.toFixed(0).padStart(4, " ") + ` {dim}${below.padEnd(2, " ")}{/}`;
+  }
+  const clean = (n / 1000).toFixed(n > 90000 ? 0 : 1).padStart(4, " ");
+  if (n > 10 * limit) {
+    return `{red}${clean} ${above.padEnd(2, " ")}{/}`;
+  } else if (n > limit) {
+    return `{yellow}${clean} ${above.padEnd(2, " ")}{/}`;
+  } else {
+    return `${clean} {dim}${above.padEnd(2, " ")}{/}`;
+  }
+};
+
+const findSize = ({ headers, body, size }, res) => {
+  if (size) return size;
+  if (body) return body.length;
+  if (headers["content-length"]) return +headers["content-length"];
+  return 0;
+};
+
+function simpleType(type) {
+  const simpler = {
+    "text/html": "html",
+    "text/plain": "text",
+    "image/svg+xml": "svg",
+    "image/png": "png",
+    "text/css": "css",
+    "application/javascript": "js",
+    "application/json": "json",
+    "text/markdown": "md",
+  };
+  return simpler[type] || type;
+}
+
+let spinnies;
+export default function RequestLogger(ctx) {
+  this.id = Math.round(Math.random() * 100000);
+
+  if (!isProduction) {
+    if (!spinnies) {
+      spinnies = new Spinnies({ succeedColor: "white", failColor: "white" });
+    }
+    const method = ("[" + ctx.method.toLowerCase() + "]").padEnd(6, " ");
+    const text = color(`{dim}${method}{/} ${ctx.url?.path || ctx.url}`);
+    spinnies.add(`spinner-${this.id}`, { text });
+  }
+
+  this.end = function (ctx) {
+    if (!isProduction) {
+      const status = ctx.res.status;
+
+      const paddedPath = `${ctx.url?.path || ctx.url} {dim}`.padEnd(30, "╌");
+      const statColor =
+        status < 300 ? "green" : status < 500 ? "yellow" : "red";
+      const statusBlock = `{${statColor}}[${ctx.res.status}]{/}`;
+      const resSize = format(findSize(ctx.res), ["b", "kb"], 100000);
+      const t = Math.round(ctx.time._total - ctx.time._init);
+      const resTime = format(t, ["ms", "s"], 1000);
+
+      const type = simpleType(
+        ctx.res.type || ctx.res.headers["content-type"] || "----"
+      );
+      const method = ("[" + ctx.method + "]").padEnd(6, " ");
+      const reqText = `{dim}${method}{/} ${paddedPath}`;
+      const resText = `${statusBlock} ${resSize} ${resTime} ${type}`;
+      const text = color(`${reqText}╌›{/} ${resText}`);
+
+      spinnies.succeed(`spinner-${this.id}`, { text });
+    }
+  };
+}

package/src/ServerUrl.js

@@ -0,0 +1,32 @@
+export default class ServerUrl {
+  constructor(urlString) {
+    const url = new URL(urlString);
+    this.href = url.href;
+    this.origin = url.origin;
+    this.protocol = url.protocol;
+    this.username = url.username;
+    this.password = url.password;
+    this.host = url.host;
+    this.hostname = url.hostname;
+    this.port = url.port ? +url.port : null; // make it an intege
+    this.pathname = url.pathname;
+    this.path = url.pathname; // nicknam
+    this.params = {}; // The URL parameter
+    this.search = url.search;
+    this.searchParams = url.searchParams;
+    this.query = this.getQuery(url.searchParams.entries()); // As a plain object
+    this.hash = url.hash;
+  }
+
+  getQuery(entries) {
+    const query = {};
+    for (const [key, value] of entries) {
+      query[key] = value;
+    }
+    return query;
+  }
+
+  toString() {
+    return this.href;
+  }
+}

package/src/ServerUrl.test.js

@@ -0,0 +1,45 @@
+import ServerUrl from "./ServerUrl.js";
+
+describe("getUrl()", () => {
+  it("can parse a basic URL", () => {
+    const url = new ServerUrl("https://example.com/");
+
+    // Extended values
+    expect(url.path).toEqual("/");
+    expect(url.query).toEqual({});
+
+    // Base values
+    expect(url.href).toBe("https://example.com/");
+    expect(url.pathname).toEqual("/");
+    expect(url.protocol).toBe("https:");
+    expect(url.username).toBe("");
+    expect(url.password).toBe("");
+    expect(url.host).toBe("example.com");
+    expect(url.hostname).toBe("example.com");
+    expect(url.port).toBe(null);
+  });
+
+  it("can parse localhost", () => {
+    const url = new ServerUrl("http://localhost:3000/");
+
+    // Extended values
+    expect(url.path).toEqual("/");
+    expect(url.query).toEqual({});
+    expect(url.params).toEqual({});
+
+    // Base values
+    expect(url.href).toBe("http://localhost:3000/");
+    expect(url.pathname).toEqual("/");
+    expect(url.protocol).toBe("http:");
+    expect(url.username).toBe("");
+    expect(url.password).toBe("");
+    expect(url.host).toBe("localhost:3000");
+    expect(url.hostname).toBe("localhost");
+    expect(url.port).toBe(3000);
+  });
+
+  it("can be stringified", () => {
+    const url = new ServerUrl("http://localhost:3000/");
+    expect(url + "").toBe("http://localhost:3000/");
+  });
+});

package/src/color.js

@@ -0,0 +1,26 @@
+// Add color to a string: color('hello {bright}world{/bright}')
+// or a template literal: color`hello {bright}world{/bright}`
+// Supports NO_COLOR, multiple styles, and closing with "{/}"
+// prettier-ignore
+const map = {
+  reset: 0, bright: 1, dim: 2, under: 4, blink: 5, reverse: 7,
+
+  black: 30, red: 31, green: 32, yellow: 33,
+  blue: 34, magenta: 35, cyan: 36, white: 37,
+
+  bgblack: 40, bgred: 41, bggreen: 42, bgyellow: 43,
+  bgblue: 44, bgmagenta: 45, bgcyan: 46, bgwhite: 47,
+};
+
+const replace = (k) => (process.env.NO_COLOR ? "" : `\x1b[${map[k]}m`);
+
+export default function color(str, ...vals) {
+  if (typeof str === "string") {
+    return str
+      .replaceAll(/\{(\w+)\}/g, (m, k) => replace(k))
+      .replaceAll(/\{\/\w*\}/g, replace("reset"));
+  }
+
+  // For template literals, put them together first and then color it
+  return color(str[0] + vals.map((v, i) => v + str[i + 1]).join(""));
+}