@solid-hooks/state

Pinia like global state management for solid.js

Install

``shell
npm i @solid-hooks/state
`
`shell
yarn add @solid-hooks/state
`
`shell
pnpm add @solid-hooks/state
`

Usage

support run without provider (use createRoot)

`tsx
import { defineState, GlobalStateProvider, persistStateFn, storageSync } from '@solid-hooks/state'

// like Pinia's Option Store
const useTestState = defineState('test', {
init: { value: 1, deep: { data: 'hello' } },
getter: state => ({
// without param, will auto wrapped with createMemo
doubleValue() {
return state.value * 2
},
}),
action: (setState, state, utils) => ({
plus(num: number) {
setState('value', value => value + num)
},
}),
})

// usage
const [state, actions] = useTestState()

render(() => (

state:
{' '}

{state().value}

getter:
{' '}

{state.doubleValue()}

getter:
{' '}

{getters.doubleValue()}

action:
{' '}
double


action:
{' '}
actions.plus(2)}>plus 2

))

// use produce
state.$patch((state) => {
state.deep.data = 'patch'
})
// use reconcile but support partial state
state.$patch({
test: 2
})

// createEffect(on()), defer by default
state.$subscribe(
s => s.deep.data, // or state access path ('deep.data')
(state, oldState) => console.log(state, oldState),
{ defer: false },
)

// reset
state.$reset()
`

or just a global-level context & provider

`ts
import { defineState } from '@solid-hooks/state'
import { createEffect, createMemo, createSignal } from 'solid-js'

export const useCustomState = defineState('custom', (name, log) => {
const [plain, setPlain] = createSignal(1)
createEffect(() => {
log('defineState with custom function:', { name, newValue: plain() })
})
const plus2 = createMemo(() => plain() + 2)
function add() {
setPlain(p => p + 1)
}
return { plain, plus2, add }
})
`

$3

`ts
import { defineGlobalState } from '@solid-hooks/state'

const useTestState = defineGlobalState('test', {
init: { value: 1, deep: { data: 'hello' } },
getter: state => ({
doubleValue() {
return state.value * 2
},
}),
action: (setState, state, utils) => ({
plus(num: number) {
setState('value', value => value + num)
},
}),
})
`

$3

`ts
import { defineState } from '@solid-hooks/state'
import { persistStateFn, storageSync } from '@solid-hooks/state/persist'

const useTestState = defineState('test', {
init,
// ...
// custom state function
stateFn: persistStateFn({
key: 'other-key', // state.$id by default
serializer: { write: JSON.stringify, read: JSON.parse, }, // JSON by default
storage: localStorage, // localStorage by default, async storage available
path: ['test'], // type-safe state access path for persisted state, support array
sync: storageSync, // sync persisted data
}),
})
`

#### IndexedDB

`ts
import { createIdbStorage, persistStateFn } from '@solid-hooks/state/persist'

const idbStorage = createIdbStorage('db-name')
const stateFn = persistStateFn({
storage: idbStorage,
// ...
})
`

Utils

$3

`ts
/**
* create state with utils, use in SetupObject
*/
function createStateWithUtils(
stateName: string,
initialState: T,
stateFn?: StateFn
): [state: T, setState: SetStoreFunction, utils: StateUtils]
/**
* create getters, wrap non-param function with createMemo
*
* use in SetupObject
*/
function createStateGetter(getters?: T): T
/**
* create actions, wrap functions with batch(() => untrack(() => ...))
*
* use in SetupObject
*/
function createStateAction(actions?: T): T
`

$3

globalThis.structuredClone, fallback to klona`

Credit

- Pinia
- @solid-primitives/storage