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} />
}

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!

15 Replies

zulu•2mo ago

this will answer 1 and 2 https://docs.solidjs.com/reference/lifecycle/on-mount 1. it can not be undefined, after the mount the ref should be set 2.onMount is non reactive so if props.index change the on mount is not going to re run 3. read about For and understand when it will recreate the item https://docs.solidjs.com/reference/components/for and compare it with the <Index> https://docs.solidjs.com/reference/components/index-component 4. not sure what you mean, why would smaller onMount be better?

onMount - SolidDocs

Fully featured, fully customisable static site generation for SolidStart

<For> - SolidDocs

Fully featured, fully customisable static site generation for SolidStart

<Index> - SolidDocs

Fully featured, fully customisable static site generation for SolidStart

hyperknotOP•2mo ago

Thanks! So basiccally, with For, the item part can change and the index cannot, while with Index it's the other way? So for the children, it looks like I'm good with putting index in the onMount only for children of <For>, not of <Index>? About the smaller onMount, I mean for example when I want some part to be "init" and some part to be reactive. Is there any rule about the order of createEffects? Is it following the source code order of lines, or it's totally random? I mean for example at the first time / when onMount is also called.

zulu•2mo ago

ideally you want to make sure that your components do no re render ( fully re created) with For you need to preserve referential identity for that to be the case. so in for items can more around but as long as they have the "referential identity" it will not get re rendered. it will just move if the difference are not clear you can try going over the tutorial https://www.solidjs.com/tutorial/flow_for https://www.solidjs.com/tutorial/flow_index

hyperknotOP•2mo ago

It is doing that currently, I just checked. onCleanup is called on every change.

zulu•2mo ago

I will typically keep one onMount per component orders of effects might not be guaranteed, so I would not rely on the callback order

hyperknotOP•2mo ago

I mean for the changed item / position. clear, thanks!

zulu•2mo ago

yeah don't forget you can see more of your code than i can see , the more context you provide the more we can see why things may work a certain way or another

hyperknotOP•2mo ago

so in the store

state:
      activeChats: {
        0: null,
        1: null,
        2: null,
        3: null,
      },

set fn
this.setState('activeChats', colNum, chat)

get fn
  getActiveChats(): ChatModel[] {
    return Object.values(this.state.activeChats)
      .filter((c) => c !== null)
      .slice(0, this.getCalculatedDisplayColumns())
  }

state:
      activeChats: {
        0: null,
        1: null,
        2: null,
        3: null,
      },

set fn
this.setState('activeChats', colNum, chat)

get fn
  getActiveChats(): ChatModel[] {
    return Object.values(this.state.activeChats)
      .filter((c) => c !== null)
      .slice(0, this.getCalculatedDisplayColumns())
  }

in the component

      <For each={uiStore.getActiveChats()}>
        {(chat, index) => <ChatColumn chat={chat} index={index()} />}
      </For>

      <For each={uiStore.getActiveChats()}>
        {(chat, index) => <ChatColumn chat={chat} index={index()} />}
      </For>

So here the referential identity stays with the Object.values() right? I mean it correctly notifies the one value being updated.

zulu•2mo ago

is this all in a store?

hyperknotOP•2mo ago

of course not, but the only one relevant here what I'm saying is that referential identity seems to be preserved through this object -> values() -> filter -> slice

zulu•2mo ago

yeah it does look like the chat object should be the same until it is being removed and replaced by another chat object you are saying that you see the cleanup on all chats when you update one chat?

hyperknotOP•2mo ago

no, just that one so if I click index 1 then I see cleanup for index 1

zulu•2mo ago

cool is there any other question you have and i might have missed?

hyperknotOP•2mo ago

nothing, I think you answered everything, thank you for all the help!!

mdynnl•2mo ago

Worth checking out lexical-solid maintained by @foolswisdom

Gaming

Programming

Best practices when interfacing with vanilla JS libraries.

Did you find this page helpful?