maho's Introduction

Maho

A framework for building server-rendered or static websites, powered by React and esbuild.

This framework is not production-ready yet, since esbuild itself is not mature enough, (but evanw is working on that).

Each rebuild is a full bundle (both server-side and client-side) yet takes only <100ms.

Differences to Vite / Snowpack

They all use esbuild too but:

Maho can also do server-side rendering
Maho uses esbuild for the whole bundle process instead of only using it to compile TypeScript, FYI they use Rollup in production build which is still much slower than esbuild.
Maho is a React framework, Vue integration will be done in another framework: Ream, and the progress totally depends on my funding status.

Install

yarn add maho

Usage

This basic usage is very similar to Next.js.

You can create new project with create-maho-app.

# For npm
npx create-maho-app my-app

# For yarn
yarn create maho-app my-app

# For pnpm
pnpx create-maho-app my-app

Roadmap

Nested routes and dynamic routes

Work in Progress.

Server-side data fetching

Work in Progress.

export const load = async () => {
  const posts = await getPosts()
  return {
    posts
  }
}

export default () => {
  const { posts } = useData()

  return <div>
    {posts.map(post => <div key={post.id}>{post.title}</div>)}
  </div>
}

Code splitting

🚧 upstream: esbuild: only work with esm format

CSS support

🚧 upstream: esbuild

Though directly importing CSS in your JavaScript / TypeScript code is not yet supported, you can use CSS-in-JS solutions like emotion without any configuration, alternatively you can have CSS files in ./public folder and reference them using <link> tag in your components.