Feedback: Plugins API and Plugin Toolkit

[kmelve]

Sanity Studio v3 introduces a new Plugin API. There is also a new plugin toolkit.

Let us know how it works for you:

• How has the migration of plugins worked out for you?
• Is there anything unclear?
• Is there anything that you expect to work that doesn't?
• Are there things you can do now that you couldn't do before?

[joshuaellis]

My biggest issue I face is the fact you're only supposed to get the client from the useClient hook (and i suppose this goes for a lot of the hooks).

So because it's provided by a context and I was previously using the part in my state manager which lived outside react (zustand for reference) my service classes now need to be refactored to either take a client on initialisation which therefore requires me to add the services to the store in an effect or alternatively supply the client to the methods of said class.

Both options imo are more difficult to work with. Maybe i've missed something though?

[kmelve]

Hi! I discussed this with the team, and their recommendation was to use dependency injection and instantiate the store in a useMemo with the client as a dependency:

import {useClient} from 'sanity'

function useMyZustandStore() {
  const client = useClient()

  const zustandStore = useMemo(() => {
    return // create zustand store instance here
  }, [client])

  return zustandStore
}

function MyComponent() {
  const zustandStore = useMyZustandStore()
 
  return <div>...</div>
}

[joshuaellis]

Hey @kmelve thanks for letting me know, my understanding is this would create a new store per instance of the hook, so then you'd have to use a context provider pattern to pass the store around your application? Which IMO goes against using something like zustand. thoughts?

[mariuslundgard]

Hi @joshuaellis – thanks for bringing attention to this use case!

The hook example that Knut posted above would create a new instance of the store for each instance of the client (not per instance of the hook). I’m not familiar with zustand but think it should work.

That said – we are considering adding a way to wrap the entire studio (e.g. with custom context providers):

export default createConfig({
  // this is one of the proposals
  renderStudio: ({children}) => {
    return <MyContextProvider>{children}</MyContextProvider>
  }
})

Will post this as an RFC asap.

[AmeyGohil]

In v2, I am using the color-input plugin (@sanity/color-input)
How do I use the same plugin in v3? I am not able to find any relevant documentation in the migration docs

Same question for some other plugins:

• sanity-plugin-json-to-docs
• sanity-plugin-order-documents
• @sanity/vision

Also, how to restrict a plugin's use in, for example, development environment

[p10e]

Hi @AmeyGohil, you can find a list of v3-ready plugins and tools in #3343. That discussion also includes some instructions on how to install the color-input plugin in v3.

While the @sanity/color-input plugin is already available, the other plugins you mentioned are still on their way, with @sanity/vision hopefully coming soon! @snorrees and the rest of the team will you keep you posted in the discussion.

We will follow up separately on restricting a plugin's use.