React context for Avivator (+ types)

[xinaesthete]

I am using a copy-paste version of Avivator’s state code, with some alterations to allow it to work with context so that there can be multiple instances, with their own set of stores.

It may make sense for Avivator components to be usable as a library - although I appreciate that might mean more documentation etc. It certainly isn’t ideal for us to maintain separate copies of more-or-less the same code.

The way this is shaping up is that there is a VivContext, holding values with { channelsStore, imageSettingsStore, viewerStore } (there would be a provider for one of these at the root of Avivator), and hooks like:

export function useImageSettingsStoreApi() {
  const stores = useContext(VivContext);
  if (!stores) 'useImageSettingsStore must be used within a VivProvider';
  return stores.imageSettingsStore;
}

export function useImageSettingsStore(selector) {
  const store = useImageSettingsStoreApi();
  // zustand says this is deprecated and to use useStoreWithEqualityFn...
  return useStore(store, selector);
}

So, any component that does things like select state from a store via const val = useXxxStore(s => s.val) should continue to work as before.

Where possible, I want to avoid changing the API, but I believe this isn’t easily possible, particularly in the case of Avivator where things like useViewerStore.setState are used outside of rendering a react component…

What this means is that whenever there is something like

function Header(props) {
  //....
  const onImageSelectionChange = e =>
    useChannelsStore.setState({
      image: e.target.value
    })
}

It would need to be like

function Header(props) {
  const channelsStore = useChannelsStoreApi()
  //....
  const onImageSelectionChange = e =>
    channelsStore.setState({
      image: e.target.value
    })
}

Not ideal, but not much more than a bit of a find/replace with a little extra care… will mean for a slightly big diff.

I’m also keen to add some more types… actually, as of this writing, I’ve got a bit further with that than with usefully integrating more Avivator into MDV… so it appears that I have reasonable types, but they’ve not been tested in anger yet.

Anyway, I’ll probably make a new Viv fork & PR soon, but at the moment I’m working in the context of MDV. A bit sketchy at the moment, and maybe not the easiest thing to try, but thought I may as well share.

Best wishes,
Peter

[xinaesthete]

WIP https://github.com/xinaesthete/viv/tree/context2

I think that may actually be reasonably ok for context API, although it doesn't really add anything without changing the app to have multiple viewers. In the process I updated Zustand & made related patches for warnings.

Will turn into a PR anon.