Global state management?

[yahia-berashish]

Hello again,
I'm currently toying with a utility project for VanJS, just experimenting at this point, and I have some questions.

Is there currently a way to implement a global state not bound to a certain component or a single file?
Is it possible to consume state without passing it with props?
I will take anything, but I'm interested in the possibility of a Provider/Consumer approach, like the React Context API.
This can potentially solve a lot of issues (e.g. prop drilling) and will make VanJS state management more advanced.

I think it can be a bit complex with VanJS specifically because of its direct DOM manipulation approach, which makes updating the DOM at a global scale challenging - at least according to my time working with it/reading the docs -, but a possible solution is to use a custom prop attached to functional components which can be used to access and modify a state globally:

export type Theme = "dark" | "light";

// `provide` function uses a key to inject the passed state to the component passed to the resulting function
const theme = van.state<Theme>("light");
const provideTheme: ProvideFunc<Theme> = provider("theme", theme);

export interface StatefulComponent<TProps = any, TStates extends Record<string, State> = Record<string, State>> {
  (props: TProps): ChildDom;
  state: TState
}

export const ThemeButton: StatefulComponent<any, { theme: State<Theme> }> = () => {
  // retrieve the `state` property of the caller function using a key
  // if the state isn't found, the function will look for it in the nearest caller function
  // the function can also inherit the callers state type
  const theme = getState("theme");

  // render something based on the current theme, toggle the current theme with an event
  return button({onclick: () => theme.val = theme.val === "dark" ? "light" : "dark",
   style: () => `background: ${theme.val === "light" ? "white" : "black"}`}, "Toggle Theme");
}

// inject state to component
provideTheme(ThemeButton)

// use the stateful component like any regular functional component
van.add(document.body, ThemeButton())

This is just some sketching code, I would like to get some opinions on the problem and how it could be solved.

[Tao-VanJS]

To be honest I'm not quite familiar with the React Context API. My understanding of context is a collection of states at the global scope with a set of ergonomic APIs to get and set their values. I think VanJS (which is a reactive UI framework) is largely orthogonal to global state management. I feel that it's quite easy to provide some simple implementation for a straight-forward approach (e.g.: via a global variable or something in the window object). It's also possible to have something more sophisticated if you want more features about context management. It should also be okay to integrate with some 3rd party library for it.

For the code you have shown, I think it's a reasonable approach. I've seen no problems with it.

[Hunter-Gu]

I think van.state() is the easiest way to do global state management. API like React Context is another way to do that, but it is a little different from global state management. React Context lets the parent component make some information available to any component in the tree below it, that really make sense when use create a group component (e.g. from group)

[Hunter-Gu]

Thank you for your recommendations. It is still POC version now. I will try to design a friendly API once the plan accepted.

In the example, I create another providers for setting function is because we need to change the whole value of van state object. VanX reactive object can be better, I will replace the van state with VanX reactive object in the example.

[yahia-berashish]

Great 👍🏼
Removed the answered tag just to keep the discussion going.
Would you open an issue please (just to keep the workflow clean) @Hunter-Gu

[Hunter-Gu]

I created an issue 161.

[yahia-berashish]

Good
So I say we close this Q&A
See you later 👋🏼

[Tao-VanJS]

Hi @yahia-berashish and @Hunter-Gu,

I appreciate your discussion in this thread. I don't think you need to close this thread. From the perspective of discoverability, keeping the thread here might be helpful for other people to find this interesting discussion :-)

[iuroc]

Sharing a bit about how I currently manage state using the following approach:

export class SG<T> {
    public constructor(private init: T) { }

    public get<Key extends keyof T>(key: Key): T[Key] {
        return this.init[key]
    }
    public obj<Key extends keyof T>(key: Key) {
        return new SG(this.init[key])
    }
    public set<Key extends keyof T>(key: Key, value: T[Key]) {
        this.init[key] = value
    }
}

const sg = new SG({
    a: van.state(333),
    b: new SG({
        c: van.state(666)
    })
});

console.log(sg.get<number>('a'))  // { val: 333 }
console.log(sg.obj('b').get<number>('c'))  // { val: 666 }

const Component = () => {
    return div(
        sg.get('a'),
        button({
            onclick() {
                sg.get('a').val = 111;
            },
        }, 'Change a val')
    );
}

My project structure looks like this:

main.ts                  Entry file
view.ts                  Common components
route/                   Starting point for routes
    home/               Home route
        index.ts        Route component
        state.ts        Export SG (StateGroup)
        view.ts         Subcomponent
    about/
        index.ts        Route component
        state.ts        Export SG (StateGroup)
        view.ts         Subcomponent

[iuroc]

You can encapsulate it into a utility class.

/**
 * State Group
 */
export class SG<T> {
    public constructor(private init: T) { }

    public get<Key extends keyof T>(key: Key): T[Key] {
        return this.init[key]
    }
    public obj<Key extends keyof T>(key: Key) {
        return new SG(this.init[key])
    }
    public set<Key extends keyof T>(key: Key, value: T[Key]) {
        this.init[key] = value
    }
}

[yahia-berashish]

Hello @iuroc
Thanks for your contribution, but using objects for states has been natively implemented with VanX (vanjs-ext to download via package manager).
The current issue is concerned with handling global state in a growing web application.
Currently the solutions we are focusing on are:

• A React Context-style API
• A Svelte Stores/Observer-style API (which isn't really necessary because VanJS natively handles state to reactivity update the DOM, but it can be useful in larger apps)
• A Redux/Mobx-style API

Again, thanks for your contribution 👋🏼