Best practices for rendering lots of Carta instances

[tucnak]

First, amazing job on this library! I'm a beginner in Svelte, if anything, and it's been really instructive.

I'm building a dramaturgy-inspired design system in Svelte, it's basically alternative chat UI for multi-agent environments to be used in LLM context. My team is looking into computational literature, so we needed to make summat that would better reflect the underlying environment: many agent-characters, really elastic, and turns out the standard screenplay format works quite well as general-purpose chat UI!

Carta works great for us so far, in fact we use it for both action points and dialogue, however because there are many items like that, we would often need to render 100's of Markdown blocks that would largely remain unchanged. This presents a challenge because I'm not sure if it's possible to disable highlighter where it's not needed? For example, most dialogues would never include code, and yet it's created in every instance:

[Shiki] 10 instances have been created. Shiki is supposed to be used as a singleton, consider refactoring your code to cache your highlighter instance; Or call `highlighter.dispose()` to release unused instances.

There's also been this weird error in the DevTools, I wonder if it could somehow be related to Carta or just noise?

Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

I'd looked into options to disable the highlighter, but ShikiOptions at least didn't include any. Is this going to be a serious performance issue? Also: is it possible to access the underlying textarea to force, or otherwise collect events like onfocus etc? I'd also figured out a way to use extensions API to re-define Enter and Shift+Enter and it looks alright, perhaps there's a way to go about this similarly?

On the different note: when we use {#each} in Svelte, and append, or insert new items to the list, does it re-render everything, or is there a way to make efficient updates to the list with some kind of hash-table / eviction policy so that Svelte could render the items surgically? I really hate the idea that a long-winded chat would bog down re-rendering Markdown bits whenever the user would switch between two alternate versions of the conversation? We want this thing to fly, and if {#each} is not able to cache various rendered components natively, I'd love to know if there's alternatives.

[BearToCode]

Hello,

I'm glad you like this project. You asked quite a lot of questions, I'll try to answer briefly to all of them.

1. The reason you get that warning from Shiki is because everytime a Carta class is created, it also comes with a new instance of Shiki, an highlighter which is imbedded in the class and used for highlighting markdown in the editor. While I could definetely use a singleton for that now that you point it out (I might create an issue for that), since from what I understand most of your Carta classes are instantiated for the <Markdown> component, you could just use one Carta instance for all of them (should work fine for almost all cases).
2. I'm not sure about that error: if you find out more let me know!
3. Do not worry about disabling the highlighter, I'll fix it later(see 1).
4. While you have access to the textarea, you can add your own listeners to carta: see here. If you just want to add shortcuts, see here instead. Both of them need to be provided inside your own extension(Plugin).
5. I think Svelte 5 would not rebuild all the components, and not re-render everything when adding something to a list. However, I'm not sure if Svelte 4 works the same, you'll have to check it out yourself. In case it did in fact remount all the components, you could use your own implementation of the <Markdown> component, caching the rendered HTML somewhere.

[tucnak]

Thank you that's big time. Much appreciated!