@useavalon/preact

Preact integration for Avalon. Server-side rendering and client-side hydration for Preact components as islands.

Features

• Preact 10 with hooks support
• Server-side rendering via preact-render-to-string
• Client-side hydration via preact/compat
• All hydration strategies (on:client, on:visible, on:idle, on:interaction)

Usage

// components/Counter.preact.tsx
/** @jsxImportSource preact */
import { useState } from "preact/hooks";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

// pages/index.tsx
import Counter from '../components/Counter.preact.tsx';

export default function Home() {
  return <Counter island={{ condition: 'on:visible' }} />;
}

Links

• Documentation
• GitHub

License

MIT