Skip to main content
@juo/blocks/preact mirrors the React adapter but uses Preact’s renderer and hook runtime. Use it for the React-style component model with a smaller payload — typical for checkout extensions and theme overlays. 
pnpm add preact
The patterns below extend the Blocks, Reactivity, and Contexts concept pages with Preact-specific equivalents.

​
Defining a Preact block

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>;
}

​
Reading services with useContext

Identical surface to the React adapter — useContext returns a proxy that exposes signals as [value, setValue] tuples: 
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>;
}

​
useSignal

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>;
}

​
Providing contexts

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

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

​
React vs Preact

The two adapters expose the same APIs. Choose Preact when:
  • A smaller bundle is needed (checkout UI extensions, theme widgets).
  • The project is already in a Preact context (some Shopify surfaces).
  • React-only ecosystem packages aren’t required.
Otherwise, prefer React for broader ecosystem compatibility.