`.\n- **MCP server**: `sygnal-check mcp` exposes `check`, `graph` and `explain` as tools (`claude mcp add sygnal-check -- npx --no-install sygnal-check mcp`).\n- **`inspect()`**: a machine-readable graph of the running app, in the browser or from `renderComponent()` in a test.\n\nThe repository also contains an evaluation harness ([`evals/agent-ergonomics`](./evals/agent-ergonomics)) that runs coding agents on the same tasks in a Sygnal app and an equivalent React app, scores each run with hidden acceptance tests, and records time and iteration counts. The baseline results, from before this tooling existed, are in [`results/BASELINE.md`](./evals/agent-ergonomics/results/BASELINE.md).\n\nSee [Building with AI Agents](https://sygnal.js.org/integration/agents/).\n\n## Features\n\n### Collections\n\nRender dynamic lists with built-in filtering and sorting:\n\n```jsx\n !item.done} sort=\"name\" />\n```\n\n### Switchable\n\nSwap between components based on state:\n\n```jsx\n\n Modal content\n \n```\n\n### Slots\n\nPass named content regions to child components:\n\n```jsx\nimport { Slot } from 'sygnal'\n\n\n Title
Default content
\n \n\n// In Card's view:\nfunction Card({ state, slots }) {\n return (\n \n {...(slots.header || [])} \n {...(slots.default || [])} \n \n \n )\n}\n```\n\n### Transitions\n\nCSS-based enter/leave animations:\n\n```jsx\n\n {state.visible && Animated content}\n \n```\n\n### Lazy Loading & Suspense\n\nCode-split components with loading boundaries:\n\n```jsx\nconst HeavyChart = lazy(() => import('./HeavyChart.jsx'))\n\nLoading...}>\n \n```\n\n### Refs\n\nAccess DOM elements declaratively:\n\n```jsx\nconst inputRef = createRef()\n\nfunction Search({ state }) {\n return // inputRef.current is the element once mounted\n}\n```\n\n### Commands\n\nSend imperative commands from parent to child:\n\n```jsx\nimport { createCommand } from 'sygnal'\n\nconst playerCmd = createCommand()\n\n// Parent passes the command as a prop and sends commands with optional data\nfunction App({ state }) {\n return ) => ({\n INCREMENT: DOM.click('.inc'),\n})\n\nconst App: RootComponent> = ({ state }) => (\n \n)\nApp.intent = intent\nApp.model = { INCREMENT: (state) => ({ ...state, count: state.count + 1 }) }\n```\n\nTyped actions from the intent, a typed EVENTS registry, typed `CHILD.select()` payloads and type-checked Collection `from`.\n\n## Bundler Setup\n\n**Vite** (recommended): use the plugin above (`plugins: [sygnal()]`). Without it, configure the automatic JSX runtime yourself:\n\n```javascript\n// vite.config.js (Vite 8; under Vite 7 use esbuild: { jsx: 'automatic', jsxImportSource: 'sygnal' })\nexport default defineConfig({\n oxc: { jsx: { runtime: 'automatic', importSource: 'sygnal' } },\n})\n```\n\nFor TypeScript projects, add to `tsconfig.json`:\n\n```json\n{\n \"compilerOptions\": {\n \"jsx\": \"react-jsx\",\n \"jsxImportSource\": \"sygnal\"\n }\n}\n```\n\nWithout JSX, use `h()` directly:\n\n```javascript\nimport { h } from 'sygnal'\nh('div', [h('h1', 'Hello'), h('button.btn', 'Click')])\n```\n\n## Documentation\n\n📖 **[sygnal.js.org](https://sygnal.js.org)** — Full guide, API reference, and examples.\n\n## Examples\n\n| Example | Description |\n|---------|-------------|\n| [Getting Started](./examples/getting-started) | Interactive guide with live demos (Astro) |\n| [Kanban Board](./examples/kanban) | Drag-and-drop with Collections and cross-component communication |\n| [Vike SSR](./examples/vike) | File-based routing with SSR, layouts, and data fetching |\n| [Advanced Features](./examples/advanced-feature-tests) | Portals, slots, disposal, suspense, lazy loading |\n| [TypeScript 2048](./examples/ts-example-2048) | Full game in TypeScript |\n| [AI Discussion Panel](./examples/ai-panel-spa) | Complex SPA with custom drivers |\n| [Sygnal ToDoMVC](https://github.com/tpresley/sygnal-todomvc) | [Live Demo](https://tpresley.github.io/sygnal-todomvc/) |\n| [Sygnal 2048](https://github.com/tpresley/sygnal-2048) | [Live Demo](https://tpresley.github.io/sygnal-2048/) |\n| [Sygnal Mahjong](https://github.com/tpresley/mahjong-trainer) | [Live Demo](https://tpresley.github.io/mahjong-trainer/) |\n| [Sygnal Calculator](https://github.com/tpresley/sygnal-calculator) | [Live Demo](https://tpresley.github.io/sygnal-calculator/) |\n\n## Acknowledgments\n\nSygnal's reactive architecture is built on patterns from [Cycle.js](https://cycle.js.org/) by [André Staltz](https://github.com/staltz). The Cycle.js runtime, DOM driver, state management, and isolation modules have been absorbed into the library — snabbdom, xstream, and extend are the only external dependencies.\n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md"}