Example for use with a global/unified state machine about van HOT 6 CLOSED

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
      }
    })
  }
}

from van.

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

from van.

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

from van.

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.

from van.

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

from van.

Closing the issue as the example is provided in #12 (comment).

from van.