UNPKG

solid-new-bucket

Version:
91 lines (75 loc) 1.68 kB
# 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.