>
(
selector: (state: ExtractState) => U,
equals?: (a: U, b: U) => boolean,
): P extends 'store' ? U : U extends IsFunction ? U : Accessor
} & S
export interface Create {
(
initializer: StateCreator,
): UseBoundStore, Mos>, P>
(): (
initializer: StateCreator,
) => UseBoundStore, Mos>, P>
>(store: S): UseBoundStore
}
export function createFactory(
useStore: (api: StoreApi, selector?: any, equalityFn?: any) => any,
): Create {
function createImpl(createState: StateCreator) {
const api = typeof createState === 'function' ? createZustandStore(createState) : createState
const useBoundStore: any = (selector?: any, equalityFn?: any) =>
useStore(api, selector, equalityFn)
Object.assign(useBoundStore, api)
return useBoundStore
}
return ((createState: StateCreator | undefined) =>
createState ? createImpl(createState) : createImpl) as Create
}
================================================
FILE: src/signal.ts
================================================
import type { Accessor } from 'solid-js'
import type { StoreApi } from 'zustand/vanilla'
import type { ExtractState, IsFunction } from './shared'
import { createSignal, onCleanup } from 'solid-js'
import { createFactory } from './shared'
export function useStore>(
api: S,
): ExtractState extends IsFunction> ? ExtractState : Accessor>
export function useStore, U>(
api: S,
selector: (state: ExtractState) => U,
equalityFn?: (a: U, b: U) => boolean,
): U extends IsFunction ? U : Accessor
export function useStore(
api: StoreApi,
selector: (state: TState) => StateSlice = api.getState as any,
equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {
const initialValue = selector(api.getState())
if (typeof initialValue === 'function')
return initialValue
const options: Parameters[1] = {}
if (equalityFn)
options.equals = equalityFn as any
const [signal, setSignal] = createSignal(initialValue, options)
const unsubscribe = api.subscribe((payload) => {
const nextStateSlice = selector(payload) as any
setSignal(nextStateSlice)
})
onCleanup(() => unsubscribe())
return signal
}
const create = createFactory<'signal'>(useStore)
export {
create,
}
================================================
FILE: src/store.ts
================================================
import type { StoreApi } from 'zustand/vanilla'
import type { ExtractState } from './shared'
import { onCleanup } from 'solid-js'
import { createStore, reconcile } from 'solid-js/store'
import { createFactory } from './shared'
export function useStore>(api: S): ExtractState
export function useStore, U>(
api: S,
selector: (state: ExtractState) => U,
equalityFn?: (a: U, b: U) => boolean,
): U
export function useStore(
api: StoreApi,
selector: (state: TState) => StateSlice = api.getState as any,
equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {
const initialValue = selector(api.getState()) as any
const [state, setState] = createStore(initialValue)
const listener = (nextState: TState, previousState: TState) => {
const prevStateSlice = selector(previousState)
const nextStateSlice = selector(nextState)
if (equalityFn !== undefined) {
if (!equalityFn(prevStateSlice, nextStateSlice))
setState(reconcile(nextStateSlice))
}
else {
setState(reconcile(nextStateSlice))
}
}
const unsubscribe = api.subscribe(listener)
onCleanup(() => unsubscribe())
return state
}
const create = createFactory<'store'>(useStore)
export {
create,
}
================================================
FILE: tests/index.spec.tsx
================================================
import { render } from 'solid-js/web'
import { beforeEach, describe, expect, it } from 'vitest'
import { create } from '../src'
import { create as createWithStore } from '../src/store'
interface BearState {
bears: number
bulls: number
increase: () => void
}
const useSignalStore = create(set => ({
bears: 0,
bulls: 0,
increase: () => set(state => ({ bears: state.bears + 1 })),
}))
describe('create', () => {
beforeEach(() => {
useSignalStore.setState({ bears: 0, bulls: 0 })
})
it('should return default zustand properties', () => {
expect(typeof useSignalStore.setState).toBe('function')
expect(typeof useSignalStore.getState).toBe('function')
expect(typeof useSignalStore.subscribe).toBe('function')
})
it('should function correct when rendering in Solid', () => {
const div = document.createElement('div')
render(() => {
const state = useSignalStore()
const increase = useSignalStore(state => state.increase)
expect(state().bears).toBe(0)
increase()
increase()
increase()
return {state().bears}
}, div)
expect(div.innerHTML).toBe('3')
})
it('should allow multiple state slices', () => {
const div = document.createElement('div')
render(() => {
const state = useSignalStore(state => ({ bears: state.bears, bulls: state.bulls }))
useSignalStore.setState({ bears: 6, bulls: 9 })
return (
Bears:
{state().bears}
{' '}
| Bulls:
{state().bulls}
)
}, div)
expect(div.textContent).toBe('Bears:6 | Bulls:9')
})
})
const useStore = createWithStore(set => ({
bears: 0,
bulls: 0,
increase: () => set(state => ({ bears: state.bears + 1 })),
}))
describe('create from /store', () => {
beforeEach(() => {
useStore.setState({ bears: 0, bulls: 0 })
})
it('should return default zustand properties', () => {
expect(typeof useStore.setState).toBe('function')
expect(typeof useStore.getState).toBe('function')
expect(typeof useStore.subscribe).toBe('function')
})
it('should function correct when rendering in Solid', () => {
const div = document.createElement('div')
render(() => {
const state = useStore()
const increase = useStore(state => state.increase)
expect(state.bears).toBe(0)
increase()
increase()
increase()
return {state.bears}
}, div)
expect(div.innerHTML).toBe('3')
})
it('should allow multiple state slices', () => {
const div = document.createElement('div')
render(() => {
const state = useStore(state => ({ bears: state.bears, bulls: state.bulls }))
useStore.setState({ bears: 6, bulls: 9 })
return (
Bears:
{state.bears}
{' '}
| Bulls:
{state.bulls}
)
}, div)
expect(div.textContent).toBe('Bears:6 | Bulls:9')
})
})
describe('new API - create (signal)', () => {
const useNewStore = create(set => ({
bears: 0,
bulls: 0,
increase: () => set(state => ({ bears: state.bears + 1 })),
}))
beforeEach(() => {
useNewStore.setState({ bears: 0, bulls: 0 })
})
it('should work with new create API', () => {
const div = document.createElement('div')
render(() => {
const state = useNewStore()
const increase = useNewStore(state => state.increase)
expect(state().bears).toBe(0)
increase()
return {state().bears}
}, div)
expect(div.innerHTML).toBe('1')
})
})
================================================
FILE: tsconfig.json
================================================
{
"compilerOptions": {
"target": "ES2022",
"jsx": "preserve",
"jsxImportSource": "solid-js",
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"module": "ESNext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"allowImportingTsExtensions": false,
"strict": true,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"declaration": true,
"declarationMap": true,
"inlineSources": true,
"noEmit": false,
"outDir": "./dist",
"sourceMap": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"verbatimModuleSyntax": true,
"skipLibCheck": true
},
"include": ["src/**/*", "tests/**/*"],
"exclude": ["dist", "node_modules", "./dev"]
}
================================================
FILE: tsdown.config.ts
================================================
import { defineConfig } from 'tsdown'
import solid from 'vite-plugin-solid'
export default defineConfig({
entry: ['src/index.ts', 'src/store.ts'],
format: 'esm',
platform: 'browser',
target: 'es2022',
plugins: [solid()],
clean: true,
external: ['solid-js'],
dts: {
build: true,
},
})
================================================
FILE: vitest.config.ts
================================================
import solid from 'vite-plugin-solid'
import { defineConfig } from 'vitest/config'
export default defineConfig({
plugins: [solid()],
})
