Framework Adapters
•2 min read
Framework Adapters
Directive provides first-class adapters for five UI frameworks plus a vanilla adapter for framework-free projects. Each adapter gives you reactive hooks (or stores/controllers/bindings) that subscribe to facts, derivations, and system state with zero boilerplate.
Supported Frameworks
| Framework | Import | Pattern | Reactivity Model |
|---|---|---|---|
| React | @directive-run/react | Hooks (useFact, useDerived, ...) | useSyncExternalStore |
| Vue | @directive-run/vue | Composables (useFact, useDerived, ...) | ref / shallowRef |
| Svelte | @directive-run/svelte | Stores (useFact, useDerived, ...) | Svelte Readable stores |
| Solid | @directive-run/solid | Signals (useFact, useDerived, ...) | createSignal / createMemo |
| Lit | @directive-run/lit | Controllers (FactController, ...) | ReactiveController |
| Vanilla | @directive-run/el | el(), bind(), JSX, htm | Direct DOM |
Common Hook API
All adapters share the same core hook names and signatures (adapted to each framework's reactivity model):
| Hook | Purpose |
|---|---|
useSelector(system, fn) | Auto-tracking selector over facts and derivations |
useFact(system, key) | Subscribe to a single fact |
useFact(system, [keys]) | Subscribe to multiple facts |
useDerived(system, key) | Subscribe to a derivation |
useDerived(system, [keys]) | Subscribe to multiple derivations |
useEvents(system) | Typed event dispatchers |
useDispatch(system) | Low-level event dispatch |
useWatch(system, key, callback) | Side-effect watcher (no re-render) |
useInspect(system) | System inspection (settled, unmet, inflight) |
useExplain(system, reqId) | Requirement explanation |
useConstraintStatus(system) | Reactive constraint inspection |
useRequirementStatus(statusPlugin, type) | Requirement loading/error status (takes statusPlugin, not system) |
useOptimisticUpdate(system, statusPlugin?, type?) | Optimistic mutations with rollback |
useHistory(system) | Time-travel controls (undo/redo) |
useDirective(moduleDef) | Scoped system with selected or all subscriptions |
createTypedHooks<M>() | Factory for fully typed hook variants |
How to Choose
- React – Most comprehensive adapter. Use if you're building a React app.
- Vue – Full composable API with
ref-based reactivity. Passsystemexplicitly to composables. - Svelte – Returns Svelte
Readablestores. Use$prefix for auto-subscription. - Solid – Signal-based reactivity. Fine-grained updates without VDOM overhead.
- Lit – Controller-based pattern for Web Components. Works with any Lit element.
- Vanilla – No framework. Three authoring modes:
el()function calls, JSX (with build), or htm tagged templates (no build). The lightest adapter. Versions independently –el(), JSX, and htm work without@directive-run/core.
Next Steps
- React Adapter – The most popular starting point
- Quick Start – Build your first module
- Core Concepts – Understand facts, derivations, and constraints
