SolidJSS
SolidJS•11mo ago•
20 replies
hyperknot

Best practices when interfacing with vanilla JS libraries.

I'm trying to integrate lexical editor with my Solid app. Can you tell me if I'm thinking these integraions correctly?

export const UserInput: Component<ColumnProps> = (props) => {
  let editorInstance: LexicalEditor | undefined
  let editorRef!: HTMLDivElement

  onMount(() => {
    const config = {
      namespace: `UserInput-${props.index}`,
      onError: console.error,
    }

    editorInstance = createEditor(config)
    editorInstance.setRootElement(editorRef)

    const combinedUnregister = mergeRegister(
      registerPlainText(editorInstance),
      registerHistory(editorInstance, createEmptyHistoryState(), 300),
    )

    onCleanup(() => {
      combinedUnregister()
      editorInstance = undefined
    })
  })

  return <div ref={editorRef} contentEditable={true} />
}


Some of my questions:
1. editorRef for sure cannot be undefined, under any circumstance?
2. I have these components for a multi column layout, with index 0,1,2,3. Currently, with the index as a constant inside onMount it cannot be changed. Is this correct?
3. When would it change? Those columns are in a for loop, (item, index) => <Component ... index={index}>.
In Solid, is it possible that index would need to be updated? I'm thinking there'll be one, long-lived component for each column. Is this correct?
4. Currently I've put everything in onMount. I've read that it's a good practice to split it into a smaller onMount and multiple crateEffects. How does that work?
How is the order kept between them?
I mean initial time it's:
- onMount, createEffect1, createEffect2
- on each change is those createEffects which need updating? If both changed, does it keep their order?

Thanks!
Was this page helpful?