Preact

pnpm add preact

import { defineBlock, registerBlock } from "@juo/blocks";
import { createPreactRenderer } from "@juo/blocks/preact";
import { Toast } from "./Toast";

export const ToastBlock = defineBlock("Toast", {
  group: "theme",
  schema: /* ... */,
  initialValue: () => ({ props: { tone: "info", message: "Saved" } }),
  renderer: createPreactRenderer(Toast),
});

registerBlock(ToastBlock);

// Toast.tsx (Preact)
export function Toast({ tone, message }: { tone: string; message: string }) {
  return <div class={`toast toast--${tone}`}>{message}</div>;
}

import { useContext } from "@juo/blocks/preact";
import { CustomerServiceContext } from "@juo/blocks";

export function CustomerGreeting() {
  const customer = useContext(CustomerServiceContext);
  const [current] = customer.current;

  return <p>Hello, {current?.name ?? "guest"}</p>;
}

import { useSignal } from "@juo/blocks/preact";
import { signal } from "@juo/blocks";

const counter = signal(0);

export function Counter() {
  const value = useSignal(counter);
  return <button onClick={() => (counter.value = value + 1)}>{value}</button>;
}

import { useProvideContext } from "@juo/blocks/preact";
import { CartContext, createCart } from "./cart";

export function CartProvider({ children }) {
  useProvideContext(CartContext, createCart());
  return <>{children}</>;
}