How to keep reactivity when passing props to a Solid component from a third party that's dynamically imported (as a plugin)?

[AlexErrant]

I'm building a webapp that allows users to load 3rd party plugins. These plugins have access to the DOM. My project is in Solid, and for now let's assume all plugins are also in Solid.

Loading Solid components as plugins works using <Dynamic/>:

const App: Component = () => {
  const [count, setCount] = createSignal(0)
  const [plugin] = createResource(async () => {
    let encodedPlugin = await toModule<{
      default: VoidComponent<{ i: number }>
    }>(script) // function that converts an arbitrary string to a module
    return encodedPlugin.default
  })
  return (
    <div class={styles.App}>
      <button onClick={() => setCount((x) => x + 1)}>Inc {count()}</button>
      <Dynamic component={plugin()} i={count()} />
    </div>
  )
}

However, the component is not updating when the prop changes. The exported component is a simple VoidComponent<{ i: number }> without a createRoot, so I think it should still be under the same reactive context. The script can be found here, which I'm omitting for brevity. It is the result of building this:

import { VoidComponent } from "solid-js"

const Comp: VoidComponent<{ i: number }> = (props) => {
  return <h1>Hello world!!! {props.i} x</h1>
}

export default Comp

I have a minimal repo here and its stackblitz is here.

[atk]

The problem here is that the plugin is using it's own instance of solid, which breaks reactivity.

You need to find a way to provide the same instance of solid to your app and to the plugins. The only way I can think of right now is to use external in the rollup options of vite: https://rollupjs.org/configuration-options/

[AlexErrant]

Yep, that works, thanks! Pushed a new commit demoing it working on stackblitz. It only works with vite preview due to this issue, but that's not Solid's problem :)

As commentary, I have two branches (on, runsWithOwner) where I try to get it working with on and runWithOwner, but neither work. When I look at the compiled output, both define let Effects = null;, which I think is the reactive context/stack that Ryan's mentioned in various media. Only with rollupOptions: { external: ["solid-js"]} does Effects disappear, so both my main project and plugin use the externalized solid-js module with its Effects state. I kinda thought that on/runWithOwner might give me access to the root Effects, but empirically that didn't pan out.