Best way to have dynamic component in Solidjs?

[geohuz]

I have a component which loads and displays svg file as component, I can't find a decent way to do this, currently I'm coding like this:

import {  createEffect } from "solid-js";
import { render } from 'solid-js/web'

export const BaseLayer = (props) => {
  let baseLayerImg
  let gRef
  let dispose = () => {}      // a dispose function for the first run

  createEffect(async()=> {
    let file = props.file                     // have to access props.file to make reactive
    dispose()                                   // run dispose to remove the rendered component
    baseLayerImg = await import(`./${file}.svg?component-solid`)  // load my svg file 
    dispose = render(baseLayerImg.default, gRef)                             // render into a node
  })


  return (
      <svg>
        <g ref={gRef}/>
      </svg>
  )
}

so end user can choose file and a parent component like <BaseLayer file="base" /> or <BaseLayer file="other" /> can render different svg image dynamically. But the implementation looks awkward. Would somebody suggest an elegant way to do it?

[atk]

You can simply use lazy(import(...)) to make an asynchronous component.

[geohuz]

The problem is how can I dynamically change the svg? I know this is fine to load the component, statically, but how can I have the BaseLayer render dynamically in the runtime? For example, in App:

function App() {
  const [file, setFile]=createSignal('one')

  return (
   <>
      <button onClick={()=> setFile('two')}> render two.svg </button>
     <BaseLayer file={file} />
  </>
  )
}

in above example, the app renders 'one.svg' initially, I hope it renders 'two.svg' when clicking the button, I've tried the lazy loading as below:

let BaseImage = lazy(()=>{
    let file = props.file
    return import(`./${file}.svg?component-solid`)
  })

return (
 <BaseImage />
)

And it never change the svg, the BaseImage has to be removed from the dom (like dispose) then remount on the DOM

[atk]

You need BaseImage to be reactive when it comes to the props. Unfortunately, lazy is not reactive.

const BaseImage = createMemo(() => lazy(import(`./${props.file}.svg?component-solild`));