The Solid-events library provides a set of primitives for event composition and state derivation within SolidJS applications.
Think of it as a lightweight alternative to RxJS, deeply integrated with Solid’s reactive system.
It offers declarative tools for managing events, transforming data, and deriving state, leading to cleaner, more maintainable code.
Features
✨ Declarative Event Composition: Chain event transformations with ease, simplifying complex event logic.
🧹 Automatic Disposal: Event handlers within components are automatically cleaned up, preventing memory leaks.
⏳ Async Event Handling: Seamlessly handle asynchronous events with automatic promise flattening.
🎯 Subjects for State Management: Manage state reactively with createSubject, createAsyncSubject, and createSubjectStore.
💡 State Derivation: Derive state directly from events using Subjects, reducing the need for manual state updates.
🛑 Halting Event Propagation: Stop event propagation at any point using halt(), providing granular control.
🔀 Event Merging and Splitting: Combine multiple events with createTopic and split events conditionally with createPartition.
🔗 Full-Stack Reactivity Enhancement: Improves full-stack reactive capabilities when used with server signals and “use socket”.
Use Cases
- Dynamic Form Validation: Validate form inputs in real-time based on user input events, providing immediate feedback. For example, validate email formats as the user types, enabling or disabling the submit button accordingly.
- Real-time Data Updates: Update UI elements based on incoming data streams from websockets or server signals. Imagine a dashboard displaying live stock prices, updating seamlessly as new data arrives.
- Optimistic UI Updates: Implement optimistic UI updates for actions like adding or deleting items. For instance, when a user deletes an item, visually remove it instantly while the deletion request is in progress.
- Complex Drag-and-Drop Interactions: Manage drag-and-drop logic with greater clarity by representing different drag states and drop actions as distinct events. This simplifies complex interactions in applications like Trello boards.
- Game Development: Handle user input events, game logic updates, and animation triggers in a structured and reactive manner.
Installation
Install solid-events using your preferred package manager:
npm install solid-events
# or
pnpm install solid-events
# or
bun install solid-eventsBasic Usage
import { createEvent, createSubject } from 'solid-events';
function Counter() {
const [onIncrement, emitIncrement] = createEvent();
const count = createSubject(0, onIncrement(delta => currentCount => currentCount + delta));
return (
<div>
Count: {count()}
<button onClick={() => emitIncrement(1)}>Increment</button>
</div>
);
}This example demonstrates creating an event emitter (emitIncrement) and a handler (onIncrement). The count signal is derived from the onIncrement event, updating whenever the event is emitted.
Related Resources
- SolidJS Official Documentation: https://www.solidjs.com/ – The official documentation for SolidJS, providing comprehensive information about the framework.
- RxJS Documentation: https://rxjs.dev/ – Documentation for RxJS, a powerful reactive programming library that offers more advanced features compared to solid-events.
FAQs
How does solid-events compare to RxJS?
Solid-events is a simpler, more focused alternative to RxJS, specifically designed for SolidJS. It provides essential event composition and state derivation features without the complexity of RxJS’s extensive operator set.
What are Subjects in solid-events?
Subjects are signals derived from event handlers, allowing you to manage state reactively based on events.
How does automatic disposal work?
Solid-events leverages Solid’s component lifecycle to automatically clean up event handlers when a component unmounts, preventing memory leaks.
What is the benefit of using createTopic and createPartition?
These functions offer convenient ways to merge multiple events into one and split events based on conditions, respectively, enhancing code readability and organization.
How can solid-events improve full-stack reactivity?
Solid-events strengthens full-stack reactivity by seamlessly integrating with server signals and “use socket,” allowing for efficient and declarative management of real-time data updates.
