object style solid.js primitives
npm i @solid-hooks/dollar
yarn add @solid-hooks/dollar
pnpm add @solid-hooks/dollar
object wrapper for createSignal
import { $ } from '@solid-hooks/dollar'
const data = $(0)
console.log(data()) // 0
console.log(data.$set(1)) // set value
untrack
alias
object wrapper for createMemo
import { $, $memo } from '@solid-hooks/dollar'
const test = $('test')
const memo = $memo(() => `value: ${test()}`, { value: 'test' })
object wrapper for createStore
import { $store } from '@solid-hooks/dollar'
const store = $store({ test: { deep: 1 } })
store() // { test: { deep: 1 } }
store.$set('test', 'deep', 2) // set value
object wrapper for createResource
import { $, $resource } from '@solid-hooks/dollar'
const fetcher = (source: string) => Promise.resolve(`${source} data`)
const source = $('source')
const data = $resource(source, fetcher, {
initialValue: 'test'
})
data() // 'test'
data.loading // true
data.state // pending
await Promise.resolve()
data() // 'source data'
data.loading // false
data.state // ready
data.$mutate()
data.$refetch()
normal effect, alias for createEffect
run effect after rendered, be able to access DOM, alias for createRenderEffect
run effect instantly, alias for createComputed
defer update notification until browser idle, alias for createDeferred
object wrapper for createSelector
import { For } from 'solid-js'
import { $selector } from '@solid-hooks/dollar'
const activeId = $selector(0)
activeId.$set(1)
return (
<For each={list()}>
{item => (
<li classList={{ active: activeId.$bind(item.id) }}>
{item.name}
</li>
)}
</For>
)