https://github.com/asgerb/stimulus-durable-values
Easily make your Stimulus controller values persist through morphs
https://github.com/asgerb/stimulus-durable-values
hotwire stimulus stimulus-controller stimulus-js stimulusjs turbo
Last synced: 5 months ago
JSON representation
Easily make your Stimulus controller values persist through morphs
- Host: GitHub
- URL: https://github.com/asgerb/stimulus-durable-values
- Owner: asgerb
- License: mit
- Created: 2024-09-17T13:13:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-19T08:57:32.000Z (over 1 year ago)
- Last Synced: 2025-04-19T22:16:54.453Z (about 1 year ago)
- Topics: hotwire, stimulus, stimulus-controller, stimulus-js, stimulusjs, turbo
- Language: JavaScript
- Homepage:
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Stimulus Durable Values
Easily make your Stimulus controller values persist through morphs.
## Installing the package
Install the package using your package handler of choice
### Using npm
```bash
npm i stimulus-durable-values
```
### Using yarn
```bash
yarn add stimulus-durable-values
```
## Usage
### Setting up the API
Import the `DurableValuePropertiesBlessing` and add it to the `blessings` array on the `Controller` class:
```js
import { Controller } from "@hotwired/stimulus"
import { DurableValuePropertiesBlessing } from "stimulus-durable-values"
Controller.blessings.push(DurableValuePropertiesBlessing)
```
In rails apps this would typically be done in the `app/javascript/controllers/application.js` file.
### Implementing in a Controller
Now you can mark values as durable in your controller:
```js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static values = { open: Boolean }
static durableValues = ["open"]
// Your controller logic
}
```
Whenever you change a durable value in the controller, it will be saved. If the DOM is updated (via a morph), the value will automatically revert to the saved state, ensuring consistent behavior across interactions.