hotwired/stimulus
Stimulus
Stimulus is a JavaScript behavior framework and client-side logic layer used to add interactive behavior to server-rendered HTML. It functions as a system of DOM component controllers that organize JavaScript logic into classes, allowing developers to enhance server-delivered markup without replacing the rendering process with a client-side framework.
The framework uses data attributes to bind JavaScript classes to HTML elements and map DOM events to specific methods through document-level event delegation. It employs a lifecycle manager based on mutation observers to automatically instantiate and tear down controllers as their corresponding HTML elements enter or leave the document.
The project covers client-side component management, DOM event handling, and the mapping of element targets within a controller's scope to maintain local state.
Features
- JavaScript Component Controllers - Provides a system of JavaScript classes that act as controllers to manage the state and behavior of HTML components.
- Server-Rendered Enhancement - Enhances server-rendered HTML with client-side interactivity without replacing the server's rendering process.
- Class-Based Architecture - Organizes interactive behavior into reusable JavaScript classes that maintain internal state.
- Attribute-Driven Interactivity - Attaches JavaScript logic to existing HTML elements via data attributes to create interactive interfaces.
- HTML Behavior Attachment - Attaches JavaScript logic to existing HTML elements to create interactive interfaces without modifying markup.
- Instance Lifecycle Management - Manages the initialization and destruction of controllers automatically as DOM elements change.
- Controller Binding - Links JavaScript controller classes to HTML elements using specific data attributes.
- MutationObserver Lifecycles - Automatically instantiates and tears down controllers as elements enter or leave the document using MutationObservers.
- Component Lifecycle Management - Manages the automatic creation and destruction of controllers as their corresponding elements change in the DOM.
- Stateful Class Components - Uses class-based components to encapsulate local state and manage the behavior of HTML elements.
- Attribute-Based Directives - Binds JavaScript classes to DOM elements by scanning HTML for custom data attributes.
- Behavioral JavaScript Frameworks - Provides a framework for attaching JavaScript behavior to HTML elements via data attributes.
- Behavioral Logic Binding - Connects JavaScript functions to HTML elements using attributes to handle user interactions.
- DOM & Event Handling - Manages user interactions by mapping DOM events to JavaScript methods via HTML attributes.
- Client-Side Components - Manages the lifecycle of JavaScript controllers bound to HTML elements on the client side.
- Client-Side Logic - Provides a client-side logic layer for adding interactivity to server-rendered HTML.
- Event Delegation - Uses document-level event delegation to trigger controller methods without per-element listeners.
- Event Delegation Systems - Maps DOM events to controller methods via centralized event bubbling listeners.
- Data Attribute Event Mapping - Implements document-level event delegation that maps HTML data attributes to specific controller methods.
- Progressive Enhancement Frameworks - Adds interactive client-side behavior to server-rendered HTML without replacing the rendering process.
- Server-Rendered Page Enhancement - Adds modest client-side interactivity to HTML delivered from a server without requiring a full SPA framework.
- Automatic Element Mapping - Provides automatic binding of DOM elements to controller properties using data attributes.
- Interactive Element Registries - Tracks and manages the active state of controllers as their elements enter or leave the document.
- DOM Mutation Lifecycles - Uses MutationObservers to automatically instantiate and destroy controllers as elements enter or leave the document.
- Automatic Element Target Mapping - Implements automatic mapping of child elements to controller targets via data attributes.
- DOM-Driven State Management - Manages component lifecycles and state based on the presence of elements in the DOM.
