Are there plans to create a generic version of "platesStore"?

[riexn]

The solution of platesStore is wonderful to have the behavior of context, where each component instance has its own state, as well as provides the ability to use the state anywhere in the app.

I was wondering if there are any plans to refactor platesStore in the sense where we can use it for other components rather than just being tailored for the editor.

I'm thinking something along the lines of:

const { storesManager, useStoresManager} = createStoresManager('todos', createTodosStore)

then we could use it like so:

export const Todos = ({ id, ...state }: TodosProps) => {
  const {storeEffect, isReady} = useStoreManager('main', state)
  
  storeEffect()

  if(!isReady) return

  return <div>{/*component*/}</div>
}

The challenge for me to do that is that I can't seem to figure out how to do the typing properly for it.

[zbeyens]

I was thinking to make the plugins as stores (e.g. for dynamic plugin.options) so you have full control on them, would it cover your use cases?

In the meantime, you can do it on your end:

export const todosStore = createStore('todos')({
  isReady: false,
});

const plugin = createTodosPlugin({
  options: todosStore,
)}

[riexn]

hmm, I didn't exactly understand what you meant there, so I created a quick example of what I am trying to do:

https://codesandbox.io/s/angry-cherry-vpo1f5?file=/src/App.tsx

you will find in src/stores/createStoresManager a function that will create a store for stores, similar to platesStore.
though I used any for everything that I didn't know how to type, which is the problem I am trying to solve with this solution.

in src/features you will see how we can reuse the createStoreManager logic to have multiple "store for stores".
but once again, the issue is the typing, so I can't really figure out what todoStore and counterStore have.

the idea then is that we will use it like so:

const { store, useStoreEffect } = createStoresManager(
  "counters",
  createCounterStore
);

and in our component, we can use it like so:

export const Todos = ({ id }: TodosProps) => {
  const { isReady } = useStoreEffect(id);
  if (!isReady) return null;

  return <TodosContent id={id} />;
};

isReady was more of a flag to prevent us from rendering the component before the the store is created, since states are an async operation. this idea is borrowed from React Query. more or less, this is an abstraction of hasId that exists in platesStore.

then we will get our instance of the store like so, similarly to how plate does it:

export const TodosContent = ({ id }: TodosContentProps) => {
  const todoStore = store.get.get(id);
  const { use, set } = todoStore;

  return (
    <div>
      <button
        onClick={(event) => {
          event.preventDefault();
          set.addTodo();
        }}
      >
        add todo
      </button>
      <div>
        {use.todos().map((todo) => (
          <div key={todo.id}>{todo.text}</div>
        ))}
      </div>
    </div>
  );
};

now this entire concept can be applied to every component that we want it to have its own instance of a store (like context) and can be accessed anywhere (like zustand). I also created src/features/counters as an example.

the result of everything is like so:

I hope the idea is clearer now.

[zbeyens]

It's on my zustood roadmap to create a utility that creates a store of stores by id. The first issue to take into account, that plate v9 had, is the hooks. We dynamically create stores + their hooks. But React can't have dynamic / conditional hooks depending on an id. I've fixed it by using .has(id) above all components using plate hooks, as you did with Counter and CounterContent. Otherwise subscription is broken. So

const counterStore = store.get.get(id);
const { use, set } = counterStore;

use will subscribe to the store with the id passed on mount, but will not subscribe to any other stores if id changes.

For typing, I think I got it fixed: https://codesandbox.io/s/dry-night-2fp2ks?file=/src/stores/createStoresManager.tsx (add , to <T,> to fix the parsing error)

[riexn]

That utility would be very helpful!

And yes, what you described is the expected behavior from my end.

Adding a , to <T,> doesn't seem to fix the typing issue. I am actually not sure of what the , is doing.

I was thinking the solution something along this, but I can't seem to figure out how to type createStore properly:
https://codesandbox.io/s/bold-galileo-o8kwg6?file=/src/stores/createStoresManager.tsx

also, I think it makes more sense to move this to zustood's discussions?

[zbeyens]

These are just parsing errors when mixing react and ts, you should find workaround on your end. Your latest solution won't work without generics.

See that the typescript intellisense works:

CleanShot.2022-03-02.at.19.08.35.mp4

[riexn]

ahhh! I see it now, that's great!

[zbeyens]

Also note that I didn't consider using zustand context providers as I'm not sure it would work with zustood which is decoupled from react and should be usable anywhere (getters, actions), whereas contexts can only be used with hooks (like jotai).

[riexn]

Yeah, zustand context providers are what I attempted to use first until I had to use a store outside of its providers.