Preact Signals

Signals is a performant state management library designed for two primary goals:

1. Simplified Business Logic: It allows for easy state management from small to complex applications. Updates are automatically optimized to trigger the fewest necessary re-renders. Signals are lazy by default and automatically skip updates if no listeners are present.
2. Seamless Framework Integration: Signals are designed to integrate into frameworks (like Preact and React) as if they were native primitives. You can access signals directly, and components will automatically re-render when the signal's value changes without requiring manual selectors or wrapper functions.

When enabled, @preact/signals-debug provides the following debugging capabilities:

• Value Changes: Tracks and logs all signal value changes.
• Effect Tracking: Monitors effect executions and their dependencies.
• Computed Values: Tracks computed value recalculations and dependencies.
• Update Grouping: Groups related updates for better visualization in the console.
• Performance Stats: Provides real-time statistics including active trackers and subscription counts.

Install the @preact/signals-preact-transform Babel plugin as a development dependency to automatically provide names to all useComputed and useSignal invocations.

npm i --save-dev @preact/signals-preact-transform

To enable the transform, add module:@preact/signals-react-transform to your Babel configuration plugins.

// babel.config.js
module.exports = {
	plugins: [["module:@preact/signals-react-transform"]],
};

Install the Vite plugin as a development dependency. If you want to use the built-in Babel transform integration, you must also install the matching transform package for your framework.

# Install the agent
pnpm add -D @preact/signals-agent-vite

# Install the matching transform (choose one)
# React
pnpm add -D @preact/signals-react-transform

# Preact
pnpm add -D @preact/signals-preact-transform

To test the extension with working examples, you can set up the demo applications located in the repository:

cd docs/demos
pnpm i && pnpm start --force

The Preact Signals extension provides several controls within the DevTools panel to manage how you view data:

• Pause/Resume: Temporarily stop receiving real-time updates.
• Clear: Reset the current update history.
• Filter: Use regex patterns to filter the view and show only specific signals.
• Settings: Configure grouping, rate limiting, and other monitoring options.

Install the communication adapters package via npm to enable the DevTools UI to communicate with the signals debug system.

npm install @preact/signals-devtools-adapter

Import signalsVite from @preact/signals-agent-vite and add it to your vite.config.ts plugins array. You must specify the framework option (either "react" or "preact") to enable the built-in transform layer.

import { defineConfig } from "vite";
import { signalsVite } from "@preact/signals-agent-vite";

export default defineConfig({
	plugins: [signalsVite({ framework: "preact" })],
});

To use the transform plugin, add module:@preact/signals-preact-transform to your Babel configuration plugins array.

Note: Since this is a development plugin, it is recommended to remove it from your configuration when building for production to minimize bundle size.

// babel.config.js
module.exports = {
	plugins: [["module:@preact/signals-preact-transform"]],
};

To embed the DevTools directly into a web page (e.g., for demos or blog posts), use createDirectAdapter to connect directly to signals on the page and call mount to render the UI into a container element.

Important: Ensure @preact/signals-debug is imported in an entry point to ensure signals are registered as early as possible.

import { mount } from "@preact/signals-devtools-ui";
import { createDirectAdapter } from "@preact/signals-devtools-adapter";
import "@preact/signals-devtools-ui/styles";

// Create a direct adapter (connects directly to signals on the page)
const adapter = createDirectAdapter();

// Mount the DevTools UI
const unmount = await mount({
	adapter,
	container: document.getElementById("devtools-container")!,
});

// Later, to cleanup:
unmount();

To use the DevTools inside an iframe, use the createPostMessageAdapter. You must specify the sourceWindow, sourceOrigin, targetWindow, and targetOrigin to facilitate communication between the iframe and the host page.

import { mount } from "@preact/signals-devtools-ui";
import { createPostMessageAdapter } from "@preact/signals-devtools-adapter";
import "@preact/signals-devtools-ui/styles";

const adapter = createPostMessageAdapter({
	sourceWindow: window,
	sourceOrigin: "https://your-app.com",
	targetWindow: window.parent,
	targetOrigin: "https://your-app.com",
});

await mount({
	adapter,
	container: document.getElementById("devtools")!,
});