Refactor (#35)

* export Handler

* Fixed example

* Update readme

* Rename

* Param value as string

* Update jsx ssr example

* Hono is Ultrafast web framework

README.md

@@ -1,9 +1,9 @@
 # Hono
 
-Hono [炎] - Tiny web framework for Cloudflare Workers and others.
+Hono [炎] - Ultrafast web framework for Cloudflare Workers.
 
 ```js
-const { Hono } = require('hono')
+import { Hono } from 'hono'
 const app = new Hono()
 
 app.get('/', (c) => c.text('Hono!!'))
@@ -11,7 +11,7 @@ app.get('/', (c) => c.text('Hono!!'))
 app.fire()
 ```
 
-Hono[炎] - _**means flame🔥 in Japanese**_ - is small, simple, and ultrafast web flamework for a Service Workers API based serverless such as **Cloudflare Workers** and **Fastly Compute@Edge**. Hono does not depend on any npm packages. However, Hono has a router, context object, and middleware including the builtins. It's easy to make a web application.
+Hono[炎] - _**means flame🔥 in Japanese**_ - is small, simple, and ultrafast web flamework for a Service Workers API based serverless such as **Cloudflare Workers** and **Fastly Compute@Edge**. Hono does not depend on any npm packages. But, Hono has a router, context object, and middleware including the builtins. Easy to make a web application.
 
 ## Features
 
@@ -130,7 +130,7 @@ app.get('/fetch-url', async () => {
 ### Builtin Middleware
 
 ```js
-const { Hono, Middleware } = require('hono')
+import { Hono, Middleware } from 'hono'
 
 ...
 
@@ -323,7 +323,7 @@ npm i hono
 Only 4 lines!!
 
 ```js
-const { Hono } = require('hono')
+import { Hono } from 'hono'
 const app = new Hono()
 
 app.get('/', (c) => c.text('Hello! Hono!'))

example/basic/index.js

@@ -1,6 +1,7 @@
-const { Hono, Middleware } = require('../../dist/index')
+import { Hono, Middleware } from '../../dist'
 // or install from npm:
-// const { Hono, Middleware } = require('hono')
+// import { Hono, Middleware } from 'hono'
+
 const app = new Hono()
 
 // Mount Builtin Middleware
@@ -41,7 +42,7 @@ app.get('/', (c) => c.text('Hono!!'))
 app.get('/hello', () => new Response('This is /hello'))
 app.get('/entry/:id', (c) => {
   const id = c.req.params('id')
-  return new Response(`Your ID is ${id}`)
+  return c.text(`Your ID is ${id}`)
 })
 app.get('/auth/*', async (ctx) => ctx.text('You are authorized'))
 

example/compute-at-edge/index.js

@@ -1,4 +1,5 @@
-const { Hono } = require('hono')
+import { Hono } from 'hono'
+
 const app = new Hono()
 
 app.use('*', async (c, next) => {
@@ -6,12 +7,10 @@ app.use('*', async (c, next) => {
   next()
 })
 
-app.get('/', () => {
-  return new Response('Hono!! Compute@Edge!!')
-})
+app.get('/', (c) => c.text('Hono!! Compute@Edge!!'))
 
 app.get('/hello/:name', (c) => {
-  return new Response(`Hello ${c.req.params('name')}!!!!!`)
+  return c.text(`Hello ${c.req.params('name')}!!!!!`)
 })
 
 app.fire()

example/jsx-ssr/src/Footer.jsx

@@ -0,0 +1,7 @@
+export const Footer = () => {
+  return (
+    <footer>
+      <address><a href="https://github.com/yusukebe/hono">Hono</a></address>
+    </footer>
+  )
+}

example/jsx-ssr/src/Header.jsx

@@ -0,0 +1,7 @@
+export const Header = () => {
+  return (
+    <header>
+      <h1><a href="/">Hono Example</a></h1>
+    </header>
+  )
+}

example/jsx-ssr/src/Post.jsx

@@ -0,0 +1,15 @@
+import { Header } from './Header'
+import { Footer } from './Footer'
+
+export const Post = (props) => {
+  return (
+    <div>
+      <Header />
+      <main>
+        <h2>{props.post.title}</h2>
+        <p>{props.post.body}</p>
+      </main>
+      <Footer />
+    </div>
+  )
+}

example/jsx-ssr/src/Top.jsx

@@ -0,0 +1,20 @@
+import { Header } from './Header'
+import { Footer } from './Footer'
+
+export const Top = (props) => {
+  return (
+    <div>
+      <Header />
+      <main>
+        <h2>Posts</h2>
+        {props.posts}
+        <ul>
+          {props.posts.map((post) => {
+            return <li><a href={`/post/${post.id}`}>{post.title}</a></li>
+          })}
+        </ul>
+      </main>
+      <Footer />
+    </div>
+  )
+}

example/jsx-ssr/src/app.jsx

@@ -1,20 +0,0 @@
-import { Component } from 'nano-jsx'
-import { Link } from './Link'
-
-export class App extends Component {
-  render() {
-    return (
-      <div>
-        <header>
-          <h1>Hello! Hono!</h1>
-        </header>
-        <main>
-          <ul>
-            <Link title='Hono GitHub Repositry' url='https://github.com/yusukebe/hono'></Link>
-            <Link title='Hono npm Registry' url='https://www.npmjs.com/package/hono'></Link>
-          </ul>
-        </main>
-      </div>
-    )
-  }
-}

example/jsx-ssr/src/index.js

@@ -1,10 +1,11 @@
 import { Hono } from '../../../dist/index'
-
 import Nano from 'nano-jsx'
-import { App } from './App'
+import { Post } from './Post'
+import { Top } from './Top'
 
 const app = new Hono()
 
+// View
 const makeHTML = (body) => {
   return `
 <!DOCTYPE html>
@@ -16,8 +17,43 @@ const makeHTML = (body) => {
 `
 }
 
+// Model
+const posts = [
+  { id: '1', title: 'Good Morning', body: 'Let us eat breakfast' },
+  { id: '2', title: 'Good Afternoon', body: 'Let us eat Lunch' },
+  { id: '3', title: 'Good Evening', body: 'Let us eat Dinner' },
+  { id: '4', title: 'Good Night', body: 'Let us drink Beer' },
+  { id: '5', title: 'こんにちは', body: '昼からビールを飲みます' },
+]
+
+// Logic
+const getPosts = () => {
+  return posts
+}
+
+const getPost = (id) => {
+  for (const post of posts) {
+    if (post.id === id) {
+      return post
+    }
+  }
+}
+
+// Controller
 app.get('/', (c) => {
-  const body = Nano.renderSSR(<App />)
+  const posts = getPosts()
+  const body = Nano.renderSSR(<Top posts={posts} />)
+  const html = makeHTML(body)
+  return c.html(html)
+})
+
+app.get('/post/:id{[0-9]+}', (c) => {
+  const id = c.req.params('id')
+  const post = getPost(id)
+  if (!post) {
+    return c.text('Not Found', 404)
+  }
+  const body = Nano.renderSSR(<Post post={post} />)
   const html = makeHTML(body)
   return c.html(html)
 })

example/jsx-ssr/src/link.jsx

@@ -1,7 +0,0 @@
-export const Link = (props) => {
-  return (
-    <li>
-      <a href={props.url}>{props.title}</a>
-    </li>
-  )
-}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "hono",
   "version": "0.0.12",
-  "description": "Tiny web framework for Cloudflare Workers and others.",
+  "description": "Ultrafast web framework for Cloudflare Workers.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [

src/hono.ts

@@ -11,13 +11,13 @@ const METHOD_NAME_OF_ALL = 'ALL'
 
 declare global {
   interface Request {
-    params: (key: string) => any
+    params: (key: string) => string
     query: (key: string) => string | null
   }
 }
 
-type Handler = (c: Context, next?: Function) => Response | Promise<Response>
-type MiddlwareHandler = (c: Context, next: Function) => Promise<void>
+export type Handler = (c: Context, next?: Function) => Response | Promise<Response>
+export type MiddlwareHandler = (c: Context, next: Function) => Promise<void>
 
 export class Router<T> {
   node: Node<T>
@@ -149,7 +149,7 @@ export class Hono {
       await next()
     }
 
-    middleware.push(Middleware.defaultFilter)
+    middleware.push(Middleware.default)
     middleware.push(wrappedHandler)
 
     const composed = compose(middleware)

src/index.ts

@@ -1,2 +1,2 @@
-export { Hono, Middleware } from './hono'
+export { Hono, Middleware, Handler, MiddlwareHandler } from './hono'
 export { Context } from './context'

src/middleware.ts

@@ -1,10 +1,10 @@
-import { defaultFilter } from './middleware/defaultFilter'
-import { poweredBy } from './middleware/poweredBy/poweredBy'
+import { defaultMiddleware } from './middleware/default'
+import { poweredBy } from './middleware/powered-by/powered-by'
 import { logger } from './middleware/logger/logger'
 import { basicAuth } from './middleware/basic-auth/basic-auth'
 
 export class Middleware {
-  static defaultFilter = defaultFilter
+  static default = defaultMiddleware
   static poweredBy = poweredBy
   static logger = logger
   static basicAuth = basicAuth

src/middleware/default.ts

@@ -1,6 +1,6 @@
 import type { Context } from '../context'
 
-export const defaultFilter = async (c: Context, next: Function) => {
+export const defaultMiddleware = async (c: Context, next: Function) => {
   c.req.query = (key: string) => {
     // eslint-disable-next-line
     const url = new URL(c.req.url)