Example for use with a global/unified state machine

[tracker1]

For Advanced Examples, it would be nice to see a way to use this against a state engine like Zustand, Jotai, Valtio, Redux or MobX. Since being able to integrate a larger shared state would be beneficial for use in larger application(s) development.

[pyrossh]

Yep I was wondering if there were plans for a context api or if van.state() can be shared globally like preact signals.

[brettearle]

Could this be achieved with Module import/export. in a svelteKit style way?

main.js imports state required from store.js? On my phone but will test it this evening

[enpitsuLin]

I have some quite simple way to use jotai with vanjs, but didn't test in most case, it works on my simple todomvc app

import type { State } from './lib/van'
import { Atom, WritableAtom, atom, createStore } from 'jotai/vanilla'
type UseAtom = {
  <Value, Args extends unknown[], Result>(atom: WritableAtom<Value, Args, Result>): State<Value>
  <Value>(atom: Atom<Value>): State<Value>
}

function vanjsJotaiFactory(): UseAtom {
  const store = createStore()
  return <Value, Args extends unknown[], Result>(atom: WritableAtom<Value, Args, Result> | Atom<Value>) => {
    const atomState = van.state(store.get(atom))
    return new Proxy(atomState, {
      get(state, prop) {
        if (prop === 'val')
          return store.get(atom)
        //@ts-expect-error
        return state[prop]
      },
      set(state, prop, newValue: Value) {
        //@ts-expect-error
        state[prop] = newValue
        if (prop === 'val' && 'write' in atom && newValue !== store.get(atom)) {
          //@ts-expect-error
          store.set(atom, newValue)
        }
        return true
      }
    })
  }
}

[ndrean]

Zustand is very lightweight and has an extremely simple api in vanilla with zustand/vanilla. Create a store useStore = createStore((set) => ({a: null, b: false,...})) and just call useStore.getState().a to read from the store and useStore.setState().a = 1 to update it. If you have multi-page navigation, then you will inject fresh components so the pattern (context)=>(props)=> [dom elts] used here is enough: you pass van.state in the context and just use it. I used this exact pattern here and it just works.

[Tao-VanJS]

Hi @tracker1,

With VanJS's builtin state management, you can build your app based on a single global state. Here is an example (state persistence is supported as well):

https://vanjs.org/demo#todo-app

[Tao-VanJS]

Closing the issue as the example is provided in https://github.com/vanjs-org/van/issues/12#issuecomment-1742201991.