andi23rosca / solid-markdown

Render Markdown as Solid components
MIT License
106 stars 10 forks source link

When providing a streaming content, everything re-renders all the time #32

Closed baptisteArno closed 3 months ago

baptisteArno commented 4 months ago

One thing that is cool with react-markdown is that even if you provide a content that is being streamed, what was already added to the DOM won't re-rendered again, allowing the user to interact with the existing text while the content is being streamed.

It seems this does not work the same with solid-markdown.

Reproduction:

export const StreamingBubble = (props: Props) => {
  const [content, setContent] = createSignal<string>('')

  onMount(() => {
    setInterval(() => {
      setContent(content => content + 'new content')
    }, 100)
  })

  return <SolidMarkdown children={content()} />
}

If you select the text, whenever the component re-renders, the selection will be removed.

andi23rosca commented 3 months ago

Hey @baptisteArno, just fixed this in v2.0.3, there's now a renderingStrategy prop, you can pass "reconcile" to, to make it diff the ASTs and only re-render the parts of the DOM that changed.

See https://github.com/andi23rosca/solid-markdown?tab=readme-ov-file#rendering-strategy