solid-new-bucket
Version:
Better Signal API for SolidJS
91 lines (75 loc) • 1.68 kB
Markdown
# solid-new-bucket
SolidJS Signal Utils
## Usage
### Bucket
Create a bucket to track data:
```
import { bucket } from 'solid-new-bucket'
const value = bucket('test data')
```
Access bucket's reactive value in SolidJS:
```
function myComponent() {
const value = bucket('test data')
return (
<div>
This is {value()}
</div>
)
}
```
Update bucket's content:
```
// Provide value directly
const value = bucket('test data')
value('new data')
console.log(value())
// expected to be: 'new data'
// Provide a consumer function
value(prevValue => 'updated: ' + prevValue)
console.log(value())
// expected to be: 'updated: test data'
```
Save bucket's content to local storage:
```
const value = bucket(new Date(), {
localStorageName: 'user.loginAt'
})
```
With ``localStorageName``, bucket sync it's content with local storage automatically.
Update listener:
```
const value = bucket(1, {
beforeUpdate(newValue) {
console.log('going to update to', newValue)
},
afterUpdate(newValue) {
console.log('now is', newValue)
}
})
```
Use Bucket as downstream of an accessor:
```
const [upstream, updateUpstream] = createSignal('test data')
const value = bucket(upstream, {
useValueAsAccessor: true
})
updateUpstream('new data')
console.log(value())
// expected to be: 'new data'
```
### StampedBucket
StampedBucket helps to track changes on Object, Array and other complex types.
Create a StampedBucket:
```
const set = stampedBucket(new Set())
```
Update and access:
```
set(content => {
content.add(1)
})
console.log(set())
// expected to be: Set(1) { 1 }
```
StampedBucket supports update listener and localStorage sync as well as Bucket.