Skip to content

v0.2.0

Choose a tag to compare

@sbesh91 sbesh91 released this 22 May 14:55
· 155 commits to main since this release

hono-preact v0.2.0

Multi-cloud deployment, a unified middleware primitive, and create-hono-preact for new projects.

Highlights

  • Multi-cloud adapters. honoPreact() now takes a required adapter option. The framework ships cloudflareAdapter() (from hono-preact/adapter-cloudflare) and nodeAdapter() (from hono-preact/adapter-node); each supplies its own Vite plugins and entry wrapper. Node target uses @hono/node-server and supports WebSockets via @hono/node-ws.
  • create-hono-preact scaffold. pnpm create hono-preact my-app (or npm create, yarn create) bootstraps a working project with the adapter wired in, pnpm install runs by default. Replaces the four-file copy/paste quick-start.
  • Unified middleware primitive. defineServerMiddleware and defineClientMiddleware replace defineServerGuard / defineClientGuard / action guards. A single use array per scope (app / page / loader / action) drives the chain. Stream observers (defineStreamObserver) compose in the same array.
  • User middleware reaches /__actions and /__loaders. The user app (src/api.ts) now mounts ahead of the framework's reserved RPC paths, so app.use('/__actions', csrf({...})) works. The Vite plugin fails the build if your api.ts shadows a reserved path with a catch-all route.

Breaking changes

Adapter is required

honoPreact() no longer ships with a hardcoded Cloudflare toolchain. Pass an adapter:

// vite.config.ts
import { honoPreact } from 'hono-preact/vite';
import { cloudflareAdapter } from 'hono-preact/adapter-cloudflare';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [honoPreact({ adapter: cloudflareAdapter() })],
});

Install adapter peer deps for your target:

# Cloudflare Workers
npm install -D @cloudflare/vite-plugin wrangler

# Node.js (add @hono/node-ws for WebSockets)
npm install @hono/node-server

Guards replaced by middleware

defineServerGuard, defineClientGuard, createGuard, the serverGuards / clientGuards / actionGuards containers, and the guards: [...] page binding are gone. Migrate to defineServerMiddleware / defineClientMiddleware and the use array.

Before:

import { defineServerGuard, redirect } from 'hono-preact';

export const requireSession = defineServerGuard(async (ctx) => {
  const user = await currentUser(ctx.c);
  if (!user) throw redirect('/login');
});

// page.tsx
export default definePage(View, { guards: [requireSession] });

// page.server.ts
export const serverGuards = [requireSession];

After:

import { defineServerMiddleware, redirect } from 'hono-preact';

export const requireSession = defineServerMiddleware(async (ctx, next) => {
  const user = await currentUser(ctx.c);
  if (!user) throw redirect('/login');
  await next();
});

// page.tsx
export default definePage(View, { use: [requireSession] });

// page.server.ts
export const pageUse = [requireSession];

The shape change is one extra line: call await next() after your check, instead of returning. The outcome throws (redirect, deny, render) are unchanged.

For module-wide gating that covers both loaders and actions in a .server.* file, export pageUse. See Middleware for the full chain model, scope rules, and stream-observer composition.

Fixes

  • Set-Cookie delivered from streaming loaders. Cookies set via setSignedCookie / setCookie inside a streaming loader now reach the client. The v0.1 known-limitation note is gone.
  • CSRF middleware reach. User-supplied middleware on /__actions and /__loaders is honored. v0.1 required SameSite-cookie defaults as the only CSRF mitigation; v0.2 lets you mount hono/csrf explicitly.

Install

pnpm add hono-preact hono preact preact-iso preact-render-to-string hoofd
pnpm add -D vite

# Pick one adapter:
pnpm add -D @cloudflare/vite-plugin wrangler            # Cloudflare Workers
pnpm add @hono/node-server                              # Node.js (add @hono/node-ws for WebSockets)

Or scaffold a new project:

pnpm create hono-preact my-app

Docs

Full docs: https://framework.sbesh.com/docs · Demo: https://framework.sbesh.com/demo