From f9fa20062b6d00724674b53bcaf1526014f1ce34 Mon Sep 17 00:00:00 2001 From: Yusuke Wada Date: Sun, 9 Jan 2022 21:10:12 +0900 Subject: [PATCH] Refactor (#35) * export Handler * Fixed example * Update readme * Rename * Param value as string * Update jsx ssr example * Hono is Ultrafast web framework --- README.md | 10 ++--- example/basic/index.js | 7 ++-- example/compute-at-edge/index.js | 9 ++-- example/jsx-ssr/src/Footer.jsx | 7 ++++ example/jsx-ssr/src/Header.jsx | 7 ++++ example/jsx-ssr/src/Post.jsx | 15 +++++++ example/jsx-ssr/src/Top.jsx | 20 +++++++++ example/jsx-ssr/src/app.jsx | 20 --------- example/jsx-ssr/src/index.js | 42 +++++++++++++++++-- example/jsx-ssr/src/link.jsx | 7 ---- package.json | 2 +- src/hono.ts | 8 ++-- src/index.ts | 2 +- src/middleware.ts | 6 +-- .../{defaultFilter.ts => default.ts} | 2 +- .../powered-by.test.ts} | 0 .../poweredBy.ts => powered-by/powered-by.ts} | 0 17 files changed, 111 insertions(+), 53 deletions(-) create mode 100644 example/jsx-ssr/src/Footer.jsx create mode 100644 example/jsx-ssr/src/Header.jsx create mode 100644 example/jsx-ssr/src/Post.jsx create mode 100644 example/jsx-ssr/src/Top.jsx delete mode 100644 example/jsx-ssr/src/app.jsx delete mode 100644 example/jsx-ssr/src/link.jsx rename src/middleware/{defaultFilter.ts => default.ts} (73%) rename src/middleware/{poweredBy/poweredBy.test.ts => powered-by/powered-by.test.ts} (100%) rename src/middleware/{poweredBy/poweredBy.ts => powered-by/powered-by.ts} (100%) diff --git a/README.md b/README.md index 569360e4..606adbfd 100644 --- a/README.md +++ b/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!')) diff --git a/example/basic/index.js b/example/basic/index.js index ced4b702..0ace338b 100644 --- a/example/basic/index.js +++ b/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')) diff --git a/example/compute-at-edge/index.js b/example/compute-at-edge/index.js index 5e013764..401d5f25 100644 --- a/example/compute-at-edge/index.js +++ b/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() diff --git a/example/jsx-ssr/src/Footer.jsx b/example/jsx-ssr/src/Footer.jsx new file mode 100644 index 00000000..c9ee45af --- /dev/null +++ b/example/jsx-ssr/src/Footer.jsx @@ -0,0 +1,7 @@ +export const Footer = () => { + return ( + + ) +} \ No newline at end of file diff --git a/example/jsx-ssr/src/Header.jsx b/example/jsx-ssr/src/Header.jsx new file mode 100644 index 00000000..1f71c27b --- /dev/null +++ b/example/jsx-ssr/src/Header.jsx @@ -0,0 +1,7 @@ +export const Header = () => { + return ( +
+

Hono Example

+
+ ) +} diff --git a/example/jsx-ssr/src/Post.jsx b/example/jsx-ssr/src/Post.jsx new file mode 100644 index 00000000..d2b81933 --- /dev/null +++ b/example/jsx-ssr/src/Post.jsx @@ -0,0 +1,15 @@ +import { Header } from './Header' +import { Footer } from './Footer' + +export const Post = (props) => { + return ( +
+
+
+

{props.post.title}

+

{props.post.body}

+
+
+
+ ) +} diff --git a/example/jsx-ssr/src/Top.jsx b/example/jsx-ssr/src/Top.jsx new file mode 100644 index 00000000..2189f4d0 --- /dev/null +++ b/example/jsx-ssr/src/Top.jsx @@ -0,0 +1,20 @@ +import { Header } from './Header' +import { Footer } from './Footer' + +export const Top = (props) => { + return ( +
+
+
+

Posts

+ {props.posts} +
    + {props.posts.map((post) => { + return
  • {post.title}
    • + })} +
+
+
+
+ ) +} diff --git a/example/jsx-ssr/src/app.jsx b/example/jsx-ssr/src/app.jsx deleted file mode 100644 index 06ef8739..00000000 --- a/example/jsx-ssr/src/app.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Component } from 'nano-jsx' -import { Link } from './Link' - -export class App extends Component { - render() { - return ( -
-
-

Hello! Hono!

-
-
-
    - - -
-
-
- ) - } -} diff --git a/example/jsx-ssr/src/index.js b/example/jsx-ssr/src/index.js index 815caa7e..3646bdf1 100644 --- a/example/jsx-ssr/src/index.js +++ b/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 ` @@ -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() + const posts = getPosts() + const body = Nano.renderSSR() + 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() const html = makeHTML(body) return c.html(html) }) diff --git a/example/jsx-ssr/src/link.jsx b/example/jsx-ssr/src/link.jsx deleted file mode 100644 index 42a30f33..00000000 --- a/example/jsx-ssr/src/link.jsx +++ /dev/null @@ -1,7 +0,0 @@ -export const Link = (props) => { - return ( -
  • - {props.title} -
    • - ) -} diff --git a/package.json b/package.json index 63b70c8a..611ce09c 100644 --- a/package.json +++ b/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": [ diff --git a/src/hono.ts b/src/hono.ts index 4ccc0626..b78679cf 100644 --- a/src/hono.ts +++ b/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 -type MiddlwareHandler = (c: Context, next: Function) => Promise +export type Handler = (c: Context, next?: Function) => Response | Promise +export type MiddlwareHandler = (c: Context, next: Function) => Promise export class Router { node: Node @@ -149,7 +149,7 @@ export class Hono { await next() } - middleware.push(Middleware.defaultFilter) + middleware.push(Middleware.default) middleware.push(wrappedHandler) const composed = compose(middleware) diff --git a/src/index.ts b/src/index.ts index 7c05adb5..9b469a94 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,2 +1,2 @@ -export { Hono, Middleware } from './hono' +export { Hono, Middleware, Handler, MiddlwareHandler } from './hono' export { Context } from './context' diff --git a/src/middleware.ts b/src/middleware.ts index 6ab9d9f8..a5af15c6 100644 --- a/src/middleware.ts +++ b/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 diff --git a/src/middleware/defaultFilter.ts b/src/middleware/default.ts similarity index 73% rename from src/middleware/defaultFilter.ts rename to src/middleware/default.ts index 3293c3f4..cfc3bbc5 100644 --- a/src/middleware/defaultFilter.ts +++ b/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) diff --git a/src/middleware/poweredBy/poweredBy.test.ts b/src/middleware/powered-by/powered-by.test.ts similarity index 100% rename from src/middleware/poweredBy/poweredBy.test.ts rename to src/middleware/powered-by/powered-by.test.ts diff --git a/src/middleware/poweredBy/poweredBy.ts b/src/middleware/powered-by/powered-by.ts similarity index 100% rename from src/middleware/poweredBy/poweredBy.ts rename to src/middleware/powered-by/powered-by.ts