Git Product home page Git Product logo

h3's Introduction

npm downloads version bundlephobia build status coverage jsDocs.io

H3 is a minimal h(ttp) framework built for high performance and portability

Features

✔️  Portable: Works perfectly in Serverless, Workers, and Node.js

✔️  Minimal: Small and tree-shakable

✔️  Modern: Native promise support

✔️  Extendable: Ships with a set of composable utilities but can be extended

✔️  Router: Super fast route matching using unjs/radix3

✔️  Compatible: Compatibility layer with node/connect/express middleware

Install

# Using npm
npm install h3

# Using yarn
yarn add h3

# Using pnpm
pnpm add h3

Usage

import { createServer } from "node:http";
import { createApp, eventHandler, toNodeListener } from "h3";

const app = createApp();
app.use(
  "/",
  eventHandler(() => "Hello world!")
);

createServer(toNodeListener(app)).listen(process.env.PORT || 3000);

Example using listhen for an elegant listener:

import { createApp, eventHandler, toNodeListener } from "h3";
import { listen } from "listhen";

const app = createApp();
app.use(
  "/",
  eventHandler(() => "Hello world!")
);

listen(toNodeListener(app));

Router

The app instance created by h3 uses a middleware stack (see how it works) with the ability to match route prefix and apply matched middleware.

To opt-in using a more advanced and convenient routing system, we can create a router instance and register it to app instance.

import { createApp, eventHandler, createRouter } from "h3";

const app = createApp();

const router = createRouter()
  .get(
    "/",
    eventHandler(() => "Hello World!")
  )
  .get(
    "/hello/:name",
    eventHandler((event) => `Hello ${event.context.params.name}!`)
  );

app.use(router);

Tip: We can register the same route more than once with different methods.

Routes are internally stored in a Radix Tree and matched using unjs/radix3.

More app usage examples

// Handle can directly return object or Promise<object> for JSON response
app.use('/api', eventHandler((event) => ({ url: event.node.req.url }))

// We can have better matching other than quick prefix match
app.use('/odd', eventHandler(() => 'Is odd!'), { match: url => url.substr(1) % 2 })

// Handle can directly return string for HTML response
app.use(eventHandler(() => '<h1>Hello world!</h1>'))

// We can chain calls to .use()
app.use('/1', eventHandler(() => '<h1>Hello world!</h1>'))
   .use('/2', eventHandler(() => '<h1>Goodbye!</h1>'))

// Legacy middleware with 3rd argument are automatically promisified
app.use(fromNodeMiddleware((req, res, next) => { req.setHeader('x-foo', 'bar'); next() }))

// Lazy loaded routes using { lazy: true }
app.use('/big', () => import('./big-handler'), { lazy: true })

Utilities

H3 has a concept of composable utilities that accept event (from eventHandler((event) => {})) as their first argument. This has several performance benefits over injecting them to event or app instances in global middleware commonly used in Node.js frameworks, such as Express. This concept means only required code is evaluated and bundled, and the rest of the utilities can be tree-shaken when not used.

Built-in

  • readRawBody(event, encoding?)
  • readBody(event)
  • parseCookies(event)
  • getCookie(event, name)
  • setCookie(event, name, value, opts?)
  • deleteCookie(event, name, opts?)
  • getQuery(event)
  • getRouterParams(event)
  • send(event, data, type?)
  • sendRedirect(event, location, code=302)
  • getRequestHeaders(event, headers) (alias: getHeaders)
  • getRequestHeader(event, name) (alias: getHeader)
  • setResponseHeaders(event, headers) (alias: setHeaders)
  • setResponseHeader(event, name, value) (alias: setHeader)
  • appendResponseHeaders(event, headers) (alias: appendHeaders)
  • appendResponseHeader(event, name, value) (alias: appendHeader)
  • writeEarlyHints(event, links, callback)
  • sendStream(event, data)
  • sendError(event, error, debug?)
  • getMethod(event, default?)
  • isMethod(event, expected, allowHead?)
  • assertMethod(event, expected, allowHead?)
  • createError({ statusCode, statusMessage, data? })
  • sendProxy(event, { target, headers?, fetchOptions?, fetch?, sendStream? })
  • proxyRequest(event, { target, headers?, fetchOptions?, fetch?, sendStream? })
  • fetchWithEvent(event, req, init, { fetch? }?)
  • getProxyRequestHeaders(event)
  • sendNoContent(event, code = 204)
  • setResponseStatus(event, status)
  • getResponseStatus(event)
  • getResponseStatusText(event)
  • readMultipartFormData(event)
  • useSession(event, config = { password, maxAge?, name?, cookie?, seal?, crypto? })
  • getSession(event, config)
  • updateSession(event, config, update)
  • clearSession(event, config)
  • sealSession(event, config)
  • unsealSession(event, config, sealed)

👉 You can learn more about usage in JSDocs Documentation.

Community Packages

You can use more H3 event utilities made by the community.

Please check their READMEs for more details.

PRs are welcome to add your packages.

  • h3-cors
    • defineCorsEventHandler(options)
    • isPreflight(event)
  • h3-typebox
    • validateBody(event, schema)
    • validateQuery(event, schema)
  • h3-zod
    • useValidatedBody(event, schema)
    • useValidatedQuery(event, schema)

License

MIT

h3's People

Contributors

ali-master avatar antfu avatar atinux avatar brc-dd avatar changjoo-park avatar chmking avatar chrisbbreuer avatar danielroe avatar dargmuesli avatar farnabaz avatar harlan-zw avatar jclong98 avatar kevinmarrec avatar l422y avatar lnbin avatar mannil avatar mstaack avatar nmathew98 avatar nozomuikuta avatar pi0 avatar renovate[bot] avatar ryanfrantz avatar seho-dev avatar shahriar-rahi avatar sisou avatar soub4i avatar stafyniaksacha avatar tobiasdiez avatar wobsoriano avatar ytjmt avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.