hono 0.0.9 → 0.0.10

package/README.md

@@ -11,6 +11,8 @@ app.get('/', () => new Response('Hono!!'))
 app.fire()
 ```
 
+![carbon](https://user-images.githubusercontent.com/10682/147877725-bce9bd46-953d-4d70-9c2b-3eae47ad4df9.png)
+
 ## Feature
 
 - Fast - the router is implemented with Trie-Tree structure.
@@ -100,6 +102,15 @@ app
     .put(() => {...})
 ```
 
+## Async
+
+```js
+app.get('/fetch-url', async () => {
+  const response = await fetch('https://example.com/')
+  return new Response(`Status is ${response.status}`)
+})
+```
+
 ## Middleware
 
 ### Builtin Middleware
@@ -116,14 +127,14 @@ app.use('*', Middleware.poweredBy)
 ### Custom Middleware
 
 ```js
-const logger = (c, next) => {
+const logger = async (c, next) => {
   console.log(`[${c.req.method}] ${c.req.url}`)
-  next()
+  await next()
 }
 
-const addHeader = (c, next) => {
-  next()
-  c.res.headers.add('x-message', 'This is middleware!')
+const addHeader = async (c, next) => {
+  await next()
+  await c.res.headers.add('x-message', 'This is middleware!')
 }
 
 app.use('*', logger)
@@ -135,8 +146,8 @@ app.get('/message/hello', () => 'Hello Middleware!')
 ### Custom 404 Response
 
 ```js
-const customNotFound = (c, next) => {
-  next()
+const customNotFound = async (c, next) => {
+  await next()
   if (c.res.status === 404) {
     c.res = new Response('Custom 404 Not Found', { status: 404 })
   }
@@ -145,13 +156,32 @@ const customNotFound = (c, next) => {
 app.use('*', customNotFound)
 ```
 
+### Complex Pattern
+
+```js
+// Log response time
+app.use('*', async (c, next) => {
+  await next()
+  const responseTime = await c.res.headers.get('X-Response-Time')
+  console.log(`X-Response-Time: ${responseTime}`)
+})
+
+// Add X-Response-Time header
+app.use('*', async (c, next) => {
+  const start = Date.now()
+  await next()
+  const ms = Date.now() - start
+  await c.res.headers.append('X-Response-Time', `${ms}ms`)
+})
+```
+
 ## Context
 
 ### req
 
 ```js
 app.get('/hello', (c) => {
-  const userAgent = c.req.headers('User-Agent')
+  const userAgent = c.req.headers.get('User-Agent')
   ...
 })
 ```
@@ -185,6 +215,69 @@ app.get('/entry/:id', (c) => {
 })
 ```
 
+## Hono in 1 minute
+
+Create your first Cloudflare Workers with Hono from scratch.
+
+### Demo
+
+![Demo](https://user-images.githubusercontent.com/10682/147877447-ff5907cd-49be-4976-b3b4-5df2ac6dfda4.gif)
+
+### 1. Install Wrangler
+
+Install Cloudflare Command Line "[Wrangler](https://github.com/cloudflare/wrangler)"
+
+```sh
+$ npm i @cloudflare/wrangler -g
+```
+
+### 2. `npm init`
+
+Make npm skeleton directory.
+
+```sh
+$ mkdir hono-example
+$ ch hono-example
+$ npm init -y
+```
+
+### 3. `wrangler init`
+
+Init as a wrangler project.
+
+```sh
+$ wrangler init
+```
+
+### 4. `npm install hono`
+
+Install `hono` from npm repository.
+
+```
+$ npm i hono
+```
+
+### 5. Write your app
+
+Only 4 line!!
+
+```js
+const { Hono } = require('hono')
+const app = new Hono()
+
+app.get('/', () => new Response('Hello! Hono!'))
+
+app.fire()
+```
+
+### 6. Run!
+
+Run the development server locally.
+
+```sh
+$ wrangler dev
+```
+
 ## Related projects
 
 - koa <https://github.com/koajs/koa>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hono",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Minimal web framework for Cloudflare Workers and Fastly Compute@Edge",
   "main": "src/hono.js",
   "scripts": {
@@ -13,6 +13,18 @@
     "url": "https://github.com/yusukebe/hono.git"
   },
   "homepage": "https://github.com/yusukebe/hono",
+  "keywords": [
+    "web",
+    "app",
+    "http",
+    "application",
+    "framework",
+    "router",
+    "cloudflare",
+    "workers",
+    "fastly",
+    "compute@edge"
+  ],
   "devDependencies": {
     "jest": "^27.4.5",
     "node-fetch": "^2.6.6"

package/src/compose.js

@@ -4,8 +4,7 @@ const compose = (middleware) => {
     let index = -1
     return dispatch(0)
     function dispatch(i) {
-      if (i <= index)
-        return Promise.reject(new Error('next() called multiple times'))
+      if (i <= index) return Promise.reject(new Error('next() called multiple times'))
       index = i
       let fn = middleware[i]
       if (i === middleware.length) fn = next

package/src/compose.test.js

@@ -3,21 +3,21 @@ const compose = require('./compose')
 describe('compose middleware', () => {
   const middleware = []
 
-  const a = (c, next) => {
+  const a = async (c, next) => {
     c.req['log'] = 'log'
-    next()
+    await next()
   }
   middleware.push(a)
 
-  const b = (c, next) => {
-    next()
+  const b = async (c, next) => {
+    await next()
     c.res['header'] = `${c.res.header}-custom-header`
   }
   middleware.push(b)
 
-  const handler = (c, next) => {
+  const handler = async (c, next) => {
     c.req['log'] = `${c.req.log} message`
-    next()
+    await next()
     c.res = { message: 'new response' }
   }
   middleware.push(handler)
@@ -25,17 +25,17 @@ describe('compose middleware', () => {
   const request = {}
   const response = {}
 
-  it('Request', () => {
+  it('Request', async () => {
     const c = { req: request, res: response }
     const composed = compose(middleware)
-    composed(c)
+    await composed(c)
     expect(c.req['log']).not.toBeNull()
     expect(c.req['log']).toBe('log message')
   })
-  it('Response', () => {
+  it('Response', async () => {
     const c = { req: request, res: response }
     const composed = compose(middleware)
-    composed(c)
+    await composed(c)
     expect(c.res['header']).not.toBeNull()
     expect(c.res['message']).toBe('new response')
   })

package/src/hono.d.ts

@@ -1,15 +1,31 @@
-declare class FetchEvent {}
-declare class Request {}
-declare class Response {}
-declare class Context {}
+type Result = {
+  handler: any
+  params: {}
+}
+
+declare class Node {
+  method: string
+  handler: any
+  children: Node[]
+  middlewares: any[]
+
+  insert(method: string, path: string, handler: any): Node
+  search(method: string, path: string): Result
+}
+
+declare class Context {
+  req: Request
+  res: Response
+  newResponse(params: {}): Response
+}
 
-declare class Node {}
+type Handler = (c: Context, next: () => void) => Response | void
 
 declare class Router {
   tempPath: string
   node: Node
 
-  add(method: string, path: string, handlers: any[]): Node
+  add(method: string, path: string, handler: Handler): Node
   match(method: string, path: string): Node
 }
 
@@ -17,32 +33,35 @@ export class Hono {
   router: Router
   middlewareRouters: Router[]
 
-  getRouter(): Router
-  addRoute(method: string, args: any[]): Hono
-  matchRoute(method: string, path: string): Node
-  createContext(req: Request, res: Response): Context
-  dispatch(req: Request, res: Response): Response
-  handleEvent(event: FetchEvent): Response
-  fire(): void
-
-  notFound(): Response
+  use(path: string, middleware: Handler): void
 
   route(path: string): Hono
+  fire(): void
 
-  use(path: string, middleware: any): void
+  all(path: string, handler: Handler): Hono
+  get(path: string, handler: Handler): Hono
+  post(path: string, handler: Handler): Hono
+  put(path: string, handler: Handler): Hono
+  head(path: string, handler: Handler): Hono
+  delete(path: string, handler: Handler): Hono
 
-  all(path: string, handler: any): Hono
-  get(path: string, handler: any): Hono
-  post(path: string, handler: any): Hono
-  put(path: string, handler: any): Hono
-  head(path: string, handler: any): Hono
-  delete(path: string, handler: any): Hono
-}
+  notFound(): Response
 
-// XXX
-declare interface BuiltinMiddleware {}
+  getRouter(): Router
+  addRoute(method: string, args: any[]): Hono
+  matchRoute(method: string, path: string): Promise<Node>
+  createContext(req: Request, res: Response): Promise<Context>
+  dispatch(req: Request, res: Response): Promise<Response>
+  handleEvent(event: FetchEvent): Promise<Response>
+}
 
 export class Middleware {
-  static defaultFilter: BuiltinMiddleware
-  static poweredBy: BuiltinMiddleware
+  static defaultFilter: Handler
+  // Add builtin middlewares
+  static poweredBy: Handler
+}
+
+interface FetchEvent extends Event {
+  request: Request
+  respondWith(response: Promise<Response> | Response): Promise<Response>
 }

package/src/hono.js

@@ -59,8 +59,8 @@ class Hono {
   }
 
   use(path, middleware) {
-    if (middleware.constructor.name !== 'Function') {
-      throw new TypeError('middleware must be a function!')
+    if (middleware.constructor.name !== 'AsyncFunction') {
+      throw new TypeError('middleware must be a async function!')
     }
 
     const router = new Router()
@@ -92,7 +92,7 @@ class Hono {
 
     let handler = result ? result.handler[0] : this.notFound // XXX
 
-    const middleware = [Middleware.defaultFilter] // add defaultFilter later
+    const middleware = []
 
     for (const mr of this.middlewareRouters) {
       const mwResult = mr.match(METHOD_NAME_OF_ALL, path)
@@ -102,15 +102,17 @@ class Hono {
     }
 
     let wrappedHandler = async (context, next) => {
-      context.res = handler(context)
-      next()
+      context.res = await handler(context)
+      await next()
     }
 
+    middleware.push(Middleware.defaultFilter)
     middleware.push(wrappedHandler)
+
     const composed = compose(middleware)
     const c = await this.createContext(request, response)
 
-    composed(c)
+    await composed(c)
 
     return c.res
   }

package/src/hono.test.js

@@ -63,22 +63,22 @@ describe('params and query', () => {
 describe('Middleware', () => {
   const app = new Hono()
 
-  const logger = (c, next) => {
+  const logger = async (c, next) => {
     console.log(`${c.req.method} : ${c.req.url}`)
-    next()
+    await next()
   }
 
-  const rootHeader = (c, next) => {
-    next()
-    c.res.headers.append('x-custom', 'root')
+  const rootHeader = async (c, next) => {
+    await next()
+    await c.res.headers.append('x-custom', 'root')
   }
 
-  const customHeader = (c, next) => {
-    next()
-    c.res.headers.append('x-message', 'custom-header')
+  const customHeader = async (c, next) => {
+    await next()
+    await c.res.headers.append('x-message', 'custom-header')
   }
-  const customHeader2 = (c, next) => {
-    next()
+  const customHeader2 = async (c, next) => {
+    await next()
     c.res.headers.append('x-message-2', 'custom-header-2')
   }
 
@@ -86,6 +86,7 @@ describe('Middleware', () => {
   app.use('*', rootHeader)
   app.use('/hello', customHeader)
   app.use('/hello/*', customHeader2)
+
   app.get('/hello', () => {
     return new fetch.Response('hello')
   })
@@ -117,8 +118,8 @@ describe('Middleware', () => {
 describe('Custom 404', () => {
   const app = new Hono()
 
-  const customNotFound = (c, next) => {
-    next()
+  const customNotFound = async (c, next) => {
+    await next()
     if (c.res.status === 404) {
       c.res = new fetch.Response('Custom 404 Not Found', { status: 404 })
     }
@@ -146,9 +147,12 @@ describe('Custom 404', () => {
 describe('Error Handling', () => {
   const app = new Hono()
 
-  it('Middleware must be function', () => {
+  it('Middleware must be async function', () => {
     expect(() => {
       app.use('*', {})
     }).toThrow(TypeError)
+    expect(() => {
+      app.use('*', () => '')
+    }).toThrow(TypeError)
   })
 })

package/src/middleware/defaultFilter.js

@@ -1,13 +1,13 @@
-const defaultFilter = (c, next) => {
+const defaultFilter = async (c, next) => {
   c.req.query = (key) => {
     const url = new URL(c.req.url)
     return url.searchParams.get(key)
   }
 
-  next()
+  await next()
 
   if (typeof c.res === 'string') {
-    c.res = new Reponse(c.res, {
+    c.res = new Response(c.res, {
       status: 200,
       headers: {
         'Conten-Type': 'text/plain',

package/src/middleware/poweredBy.js

@@ -1,6 +1,6 @@
-const poweredBy = (c, next) => {
-  next()
-  c.res.headers.append('X-Powered-By', 'Hono')
+const poweredBy = async (c, next) => {
+  await next()
+  await c.res.headers.append('X-Powered-By', 'Hono')
 }
 
 module.exports = poweredBy

package/.github/workflows/ci.yml

@@ -1,24 +0,0 @@
-name: ci
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    branches: [ master ]
-
-jobs:
-  ci:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [16.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: yarn install --frozen-lockfile
-    - run: npm test