markstream-svelte 0.0.1-beta.1 → 0.0.1-beta.2

package/README.md

@@ -1,11 +1,11 @@
 # markstream-svelte
 
-Svelte 5 renderer aligned with `markstream-vue`, `markstream-vue2`, and `markstream-react`.
+Svelte 5-only renderer aligned with `markstream-vue`, `markstream-vue2`, and `markstream-react`. Svelte 4 is not supported.
 
 ## Install
 
 ```bash
-pnpm add markstream-svelte svelte
+pnpm add markstream-svelte svelte@^5
 ```
 
 Optional heavy renderers stay as peer dependencies, matching the Vue and React packages:
@@ -52,6 +52,8 @@ flowchart LR
 
 ## Custom Components
 
+Register Svelte 5 components with the scoped registry:
+
 ```svelte
 <script lang="ts">
   import MarkdownRender, { setCustomComponents } from 'markstream-svelte'
@@ -70,6 +72,29 @@ flowchart LR
 />
 ```
 
+```svelte
+<!-- ThinkingNode.svelte -->
+<script lang="ts">
+  import MarkdownRender from 'markstream-svelte'
+
+  let {
+    node,
+    customId = undefined,
+  }: {
+    node: any
+    customId?: string
+  } = $props()
+</script>
+
+<section class="thinking-node">
+  <MarkdownRender
+    content={String(node?.content ?? '')}
+    {customId}
+    customHtmlTags={['thinking']}
+  />
+</section>
+```
+
 Run the local playground with:
 
 ```bash

package/dist/components/AdmonitionNode.svelte.d.ts

@@ -20,4 +20,3 @@ declare const AdmonitionNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type AdmonitionNode = InstanceType<typeof AdmonitionNode>;
 export default AdmonitionNode;
-//# sourceMappingURL=AdmonitionNode.svelte.d.ts.map

package/dist/components/BlockquoteNode.svelte.d.ts

@@ -21,4 +21,3 @@ declare const BlockquoteNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type BlockquoteNode = InstanceType<typeof BlockquoteNode>;
 export default BlockquoteNode;
-//# sourceMappingURL=BlockquoteNode.svelte.d.ts.map

package/dist/components/CheckboxNode.svelte.d.ts

@@ -19,4 +19,3 @@ declare const CheckboxNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type CheckboxNode = InstanceType<typeof CheckboxNode>;
 export default CheckboxNode;
-//# sourceMappingURL=CheckboxNode.svelte.d.ts.map

package/dist/components/CodeBlockNode.svelte.d.ts

@@ -40,4 +40,3 @@ declare const CodeBlockNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type CodeBlockNode = InstanceType<typeof CodeBlockNode>;
 export default CodeBlockNode;
-//# sourceMappingURL=CodeBlockNode.svelte.d.ts.map

package/dist/components/D2BlockNode.svelte.d.ts

@@ -30,4 +30,3 @@ declare const D2BlockNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type D2BlockNode = InstanceType<typeof D2BlockNode>;
 export default D2BlockNode;
-//# sourceMappingURL=D2BlockNode.svelte.d.ts.map

package/dist/components/DefinitionListNode.svelte.d.ts

@@ -20,4 +20,3 @@ declare const DefinitionListNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type DefinitionListNode = InstanceType<typeof DefinitionListNode>;
 export default DefinitionListNode;
-//# sourceMappingURL=DefinitionListNode.svelte.d.ts.map

package/dist/components/EmojiNode.svelte.d.ts

@@ -19,4 +19,3 @@ declare const EmojiNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type EmojiNode = InstanceType<typeof EmojiNode>;
 export default EmojiNode;
-//# sourceMappingURL=EmojiNode.svelte.d.ts.map

package/dist/components/EmphasisNode.svelte.d.ts

@@ -21,4 +21,3 @@ declare const EmphasisNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type EmphasisNode = InstanceType<typeof EmphasisNode>;
 export default EmphasisNode;
-//# sourceMappingURL=EmphasisNode.svelte.d.ts.map

package/dist/components/FallbackComponent.svelte.d.ts

@@ -20,4 +20,3 @@ declare const FallbackComponent: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type FallbackComponent = InstanceType<typeof FallbackComponent>;
 export default FallbackComponent;
-//# sourceMappingURL=FallbackComponent.svelte.d.ts.map

package/dist/components/FootnoteAnchorNode.svelte.d.ts

@@ -19,4 +19,3 @@ declare const FootnoteAnchorNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type FootnoteAnchorNode = InstanceType<typeof FootnoteAnchorNode>;
 export default FootnoteAnchorNode;
-//# sourceMappingURL=FootnoteAnchorNode.svelte.d.ts.map

package/dist/components/FootnoteNode.svelte.d.ts

@@ -21,4 +21,3 @@ declare const FootnoteNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type FootnoteNode = InstanceType<typeof FootnoteNode>;
 export default FootnoteNode;
-//# sourceMappingURL=FootnoteNode.svelte.d.ts.map

package/dist/components/FootnoteReferenceNode.svelte.d.ts

@@ -19,4 +19,3 @@ declare const FootnoteReferenceNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type FootnoteReferenceNode = InstanceType<typeof FootnoteReferenceNode>;
 export default FootnoteReferenceNode;
-//# sourceMappingURL=FootnoteReferenceNode.svelte.d.ts.map

package/dist/components/HardBreakNode.svelte.d.ts

@@ -24,4 +24,3 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-//# sourceMappingURL=HardBreakNode.svelte.d.ts.map

package/dist/components/HeadingNode.svelte.d.ts

@@ -21,4 +21,3 @@ declare const HeadingNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type HeadingNode = InstanceType<typeof HeadingNode>;
 export default HeadingNode;
-//# sourceMappingURL=HeadingNode.svelte.d.ts.map

package/dist/components/HighlightNode.svelte.d.ts

@@ -21,4 +21,3 @@ declare const HighlightNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type HighlightNode = InstanceType<typeof HighlightNode>;
 export default HighlightNode;
-//# sourceMappingURL=HighlightNode.svelte.d.ts.map

package/dist/components/HtmlBlockNode.svelte.d.ts

@@ -20,4 +20,3 @@ declare const HtmlBlockNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type HtmlBlockNode = InstanceType<typeof HtmlBlockNode>;
 export default HtmlBlockNode;
-//# sourceMappingURL=HtmlBlockNode.svelte.d.ts.map

package/dist/components/HtmlInlineNode.svelte.d.ts

@@ -20,4 +20,3 @@ declare const HtmlInlineNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type HtmlInlineNode = InstanceType<typeof HtmlInlineNode>;
 export default HtmlInlineNode;
-//# sourceMappingURL=HtmlInlineNode.svelte.d.ts.map

package/dist/components/HtmlPreviewFrame.svelte.d.ts

@@ -23,4 +23,3 @@ declare const HtmlPreviewFrame: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type HtmlPreviewFrame = InstanceType<typeof HtmlPreviewFrame>;
 export default HtmlPreviewFrame;
-//# sourceMappingURL=HtmlPreviewFrame.svelte.d.ts.map

package/dist/components/ImageNode.svelte.d.ts

@@ -22,4 +22,3 @@ declare const ImageNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type ImageNode = InstanceType<typeof ImageNode>;
 export default ImageNode;
-//# sourceMappingURL=ImageNode.svelte.d.ts.map

package/dist/components/InfographicBlockNode.svelte.d.ts

@@ -31,4 +31,3 @@ declare const InfographicBlockNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type InfographicBlockNode = InstanceType<typeof InfographicBlockNode>;
 export default InfographicBlockNode;
-//# sourceMappingURL=InfographicBlockNode.svelte.d.ts.map

package/dist/components/InlineCodeNode.svelte.d.ts

@@ -19,4 +19,3 @@ declare const InlineCodeNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type InlineCodeNode = InstanceType<typeof InlineCodeNode>;
 export default InlineCodeNode;
-//# sourceMappingURL=InlineCodeNode.svelte.d.ts.map

package/dist/components/InlineWrapNode.svelte.d.ts

@@ -22,4 +22,3 @@ declare const InlineWrapNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type InlineWrapNode = InstanceType<typeof InlineWrapNode>;
 export default InlineWrapNode;
-//# sourceMappingURL=InlineWrapNode.svelte.d.ts.map

package/dist/components/InsertNode.svelte.d.ts

@@ -21,4 +21,3 @@ declare const InsertNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type InsertNode = InstanceType<typeof InsertNode>;
 export default InsertNode;
-//# sourceMappingURL=InsertNode.svelte.d.ts.map

package/dist/components/LinkNode.svelte.d.ts

@@ -22,4 +22,3 @@ declare const LinkNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type LinkNode = InstanceType<typeof LinkNode>;
 export default LinkNode;
-//# sourceMappingURL=LinkNode.svelte.d.ts.map

package/dist/components/ListItemNode.svelte.d.ts

@@ -21,4 +21,3 @@ declare const ListItemNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type ListItemNode = InstanceType<typeof ListItemNode>;
 export default ListItemNode;
-//# sourceMappingURL=ListItemNode.svelte.d.ts.map

package/dist/components/ListNode.svelte.d.ts

@@ -21,4 +21,3 @@ declare const ListNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type ListNode = InstanceType<typeof ListNode>;
 export default ListNode;
-//# sourceMappingURL=ListNode.svelte.d.ts.map

package/dist/components/MarkdownCodeBlockNode.svelte.d.ts

@@ -20,4 +20,3 @@ declare const MarkdownCodeBlockNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type MarkdownCodeBlockNode = InstanceType<typeof MarkdownCodeBlockNode>;
 export default MarkdownCodeBlockNode;
-//# sourceMappingURL=MarkdownCodeBlockNode.svelte.d.ts.map

package/dist/components/MathBlockNode.svelte.d.ts

@@ -19,4 +19,3 @@ declare const MathBlockNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type MathBlockNode = InstanceType<typeof MathBlockNode>;
 export default MathBlockNode;
-//# sourceMappingURL=MathBlockNode.svelte.d.ts.map

package/dist/components/MathInlineNode.svelte.d.ts

@@ -19,4 +19,3 @@ declare const MathInlineNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type MathInlineNode = InstanceType<typeof MathInlineNode>;
 export default MathInlineNode;
-//# sourceMappingURL=MathInlineNode.svelte.d.ts.map

package/dist/components/MermaidBlockNode.svelte.d.ts

@@ -37,4 +37,3 @@ declare const MermaidBlockNode: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {}, string>;
 type MermaidBlockNode = InstanceType<typeof MermaidBlockNode>;
 export default MermaidBlockNode;
-//# sourceMappingURL=MermaidBlockNode.svelte.d.ts.map

package/dist/components/NodeOutlet.svelte

@@ -50,25 +50,31 @@
     resolveNodeOutletCustomInputs,
   } from './shared/node-outlet-helpers'
 
-  export let node: SvelteRenderableNode
-  export let context: SvelteRenderContext | undefined = undefined
-  export let indexKey: string | number | undefined = undefined
+  let {
+    node,
+    context = undefined,
+    indexKey = undefined,
+  }: {
+    node: SvelteRenderableNode
+    context?: SvelteRenderContext
+    indexKey?: string | number
+  } = $props()
 
-  $: resolvedType = String((node as any)?.type || '')
-  $: customComponentMap = context?.customComponents || getCustomNodeComponents(context?.customId)
-  $: CustomComponent = resolveNodeOutletCustomComponent(node, context, customComponentMap)
-  $: customNode = coerceCustomHtmlNode(node)
-  $: customInputs = resolveNodeOutletCustomInputs(node, context) || {}
-  $: codeMode = resolveNodeOutletCodeMode(node, context)
-  $: htmlTag = resolveHtmlTag(node)
-  $: shouldEscapeHtmlTag = resolveShouldEscapeHtmlTag()
-  $: htmlRenderNode = coerceBuiltinHtmlNode(node, resolvedType)
-  $: codeBlockInstanceKey = `${String(indexKey ?? 'code-block')}:${String((node as any)?.language ?? '')}:${(node as any)?.diff ? 'diff' : 'code'}`
-  $: escapedTextNode = {
+  let resolvedType = $derived(String((node as any)?.type || ''))
+  let customComponentMap = $derived(context?.customComponents || getCustomNodeComponents(context?.customId))
+  let CustomComponent = $derived(resolveNodeOutletCustomComponent(node, context, customComponentMap))
+  let customNode = $derived(coerceCustomHtmlNode(node))
+  let customInputs = $derived(resolveNodeOutletCustomInputs(node, context) || {})
+  let codeMode = $derived(resolveNodeOutletCodeMode(node, context))
+  let htmlTag = $derived(resolveHtmlTag(node))
+  let shouldEscapeHtmlTag = $derived(resolveShouldEscapeHtmlTag())
+  let htmlRenderNode = $derived(coerceBuiltinHtmlNode(node, resolvedType))
+  let codeBlockInstanceKey = $derived(`${String(indexKey ?? 'code-block')}:${String((node as any)?.language ?? '')}:${(node as any)?.diff ? 'diff' : 'code'}`)
+  let escapedTextNode = $derived({
     type: 'text',
     content: String((node as any)?.content ?? (node as any)?.raw ?? ''),
     raw: String((node as any)?.content ?? (node as any)?.raw ?? ''),
-  } as SvelteRenderableNode
+  } as SvelteRenderableNode)
 
   function resolveShouldEscapeHtmlTag() {
     if (resolvedType !== 'html_block' && resolvedType !== 'html_inline')
@@ -88,8 +94,7 @@
 </script>
 
 {#if CustomComponent}
-  <svelte:component
-    this={CustomComponent}
+  <CustomComponent
     node={customNode}
     context={context}
     ctx={context}

package/dist/components/NodeOutlet.svelte.d.ts

@@ -1,24 +1,9 @@
 import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const NodeOutlet: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     node: SvelteRenderableNode;
-    context?: SvelteRenderContext | undefined;
-    indexKey?: string | number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type NodeOutlet = InstanceType<typeof NodeOutlet>;
+    context?: SvelteRenderContext;
+    indexKey?: string | number;
+};
+declare const NodeOutlet: import("svelte").Component<$$ComponentProps, {}, "">;
+type NodeOutlet = ReturnType<typeof NodeOutlet>;
 export default NodeOutlet;
-//# sourceMappingURL=NodeOutlet.svelte.d.ts.map

package/dist/components/NodeRenderer.svelte

@@ -5,73 +5,80 @@
     SvelteRenderableNode,
     SvelteRenderContext,
   } from './shared/node-helpers'
-  import { afterUpdate, onDestroy, onMount, tick } from 'svelte'
+  import { onDestroy, onMount, tick } from 'svelte'
   import { getCustomNodeComponents, subscribeCustomComponents } from '../customComponents'
   import { disposeRenderedHtmlEnhancements, enhanceRenderedHtml } from '../enhanceRenderedHtml'
   import NodeOutlet from './NodeOutlet.svelte'
   import { buildRenderContext, resolveParsedNodes } from './shared/node-helpers'
 
-  export let content: NodeRendererProps['content'] = ''
-  export let nodes: NodeRendererProps['nodes'] = null
-  export let final: NodeRendererProps['final'] = undefined
-  export let parseOptions: NodeRendererProps['parseOptions'] = undefined
-  export let customMarkdownIt: NodeRendererProps['customMarkdownIt'] = undefined
-  export let debugPerformance = false
-  export let customHtmlTags: NodeRendererProps['customHtmlTags'] = undefined
-  export let htmlPolicy: NodeRendererProps['htmlPolicy'] = 'safe'
-  export let viewportPriority: NodeRendererProps['viewportPriority'] = true
-  export let codeBlockStream = true
-  export let codeBlockDarkTheme: NodeRendererProps['codeBlockDarkTheme'] = undefined
-  export let codeBlockLightTheme: NodeRendererProps['codeBlockLightTheme'] = undefined
-  export let codeBlockMonacoOptions: NodeRendererProps['codeBlockMonacoOptions'] = undefined
-  export let renderCodeBlocksAsPre = false
-  export let codeBlockMinWidth: NodeRendererProps['codeBlockMinWidth'] = undefined
-  export let codeBlockMaxWidth: NodeRendererProps['codeBlockMaxWidth'] = undefined
-  export let codeBlockProps: NodeRendererProps['codeBlockProps'] = undefined
-  export let mermaidProps: NodeRendererProps['mermaidProps'] = undefined
-  export let d2Props: NodeRendererProps['d2Props'] = undefined
-  export let infographicProps: NodeRendererProps['infographicProps'] = undefined
-  export let customComponents: NodeRendererProps['customComponents'] = undefined
-  export let showTooltips = true
-  export let themes: NodeRendererProps['themes'] = undefined
-  export let isDark = false
-  export let customId: NodeRendererProps['customId'] = undefined
-  export let indexKey: NodeRendererProps['indexKey'] = undefined
-  export let typewriter = true
-  export let batchRendering = true
-  export let initialRenderBatchSize = 40
-  export let renderBatchSize = 80
-  export let renderBatchDelay = 16
-  export let renderBatchBudgetMs = 6
-  export let renderBatchIdleTimeoutMs = 120
-  export let deferNodesUntilVisible = true
-  export let maxLiveNodes = 320
-  export let liveNodeBuffer = 60
-  export let allowHtml = true
-  export let className = ''
-  export let onCopy: NodeRendererEvents['onCopy'] = undefined
-  export let onHandleArtifactClick: NodeRendererEvents['onHandleArtifactClick'] = undefined
-  export let onClick: ((event: MouseEvent) => void) | undefined = undefined
-  export let onMouseover: ((event: MouseEvent) => void) | undefined = undefined
-  export let onMouseout: ((event: MouseEvent) => void) | undefined = undefined
+  type NodeRendererComponentProps = NodeRendererProps & NodeRendererEvents & {
+    className?: string
+    onClick?: (event: MouseEvent) => void
+    onMouseover?: (event: MouseEvent) => void
+    onMouseout?: (event: MouseEvent) => void
+  }
+
+  let {
+    content = '',
+    nodes = null,
+    final = undefined,
+    parseOptions = undefined,
+    customMarkdownIt = undefined,
+    debugPerformance = false,
+    customHtmlTags = undefined,
+    htmlPolicy = 'safe',
+    viewportPriority = true,
+    codeBlockStream = true,
+    codeBlockDarkTheme = undefined,
+    codeBlockLightTheme = undefined,
+    codeBlockMonacoOptions = undefined,
+    renderCodeBlocksAsPre = false,
+    codeBlockMinWidth = undefined,
+    codeBlockMaxWidth = undefined,
+    codeBlockProps = undefined,
+    mermaidProps = undefined,
+    d2Props = undefined,
+    infographicProps = undefined,
+    customComponents = undefined,
+    showTooltips = true,
+    themes = undefined,
+    isDark = false,
+    customId = undefined,
+    indexKey = undefined,
+    typewriter = true,
+    batchRendering = true,
+    initialRenderBatchSize = 40,
+    renderBatchSize = 80,
+    renderBatchDelay = 16,
+    renderBatchBudgetMs = 6,
+    renderBatchIdleTimeoutMs = 120,
+    deferNodesUntilVisible = true,
+    maxLiveNodes = 320,
+    liveNodeBuffer = 60,
+    allowHtml = true,
+    className = '',
+    onCopy = undefined,
+    onHandleArtifactClick = undefined,
+    onClick = undefined,
+    onMouseover = undefined,
+    onMouseout = undefined,
+  }: NodeRendererComponentProps = $props()
 
-  let rootEl: HTMLDivElement | null = null
-  let parsedNodes: SvelteRenderableNode[] = []
-  let renderContext: SvelteRenderContext = { events: {} }
-  let customComponentsRevision = 0
-  let streamRenderVersion = 0
-  let previousContent: typeof content = undefined
-  let previousNodes: typeof nodes = undefined
+  let rootEl: HTMLDivElement | null = $state(null)
+  let customComponentsRevision = $state(0)
+  let streamRenderVersion = $state(0)
+  let previousContent = $state<NodeRendererProps['content']>()
+  let previousNodes = $state<NodeRendererProps['nodes']>()
   let enhancementToken = 0
   let enhancementHandle: { dispose: () => void } | null = null
-  let renderedNodeCount = 0
+  let renderedNodeCount = $state(0)
   let renderBatchTimer: ReturnType<typeof setTimeout> | null = null
   let renderBatchFrame: number | null = null
   let renderBatchIdle: number | null = null
   let renderBatchToken = 0
   const textStreamState = new Map<string, string>()
 
-  $: props = {
+  let rendererProps = $derived({
     content,
     nodes,
     final,
@@ -109,37 +116,38 @@
     maxLiveNodes,
     liveNodeBuffer,
     allowHtml,
-  } satisfies NodeRendererProps
+  } satisfies NodeRendererProps)
 
-  $: {
+  $effect.pre(() => {
     if (previousContent !== content || previousNodes !== nodes) {
       streamRenderVersion += 1
       previousContent = content
       previousNodes = nodes
     }
-  }
+  })
 
-  $: {
+  let parsedNodes = $derived.by<SvelteRenderableNode[]>(() => {
     const start = debugPerformance && typeof performance !== 'undefined' ? performance.now() : 0
-    parsedNodes = resolveParsedNodes(props)
+    const nextParsedNodes = resolveParsedNodes(rendererProps)
     if (debugPerformance && typeof console !== 'undefined' && typeof performance !== 'undefined') {
       console.info('[markstream-svelte][perf] parse(sync)', {
         ms: Math.round(performance.now() - start),
-        nodes: parsedNodes.length,
+        nodes: nextParsedNodes.length,
         contentLength: content?.length ?? 0,
       })
     }
-  }
+    return nextParsedNodes
+  })
 
-  $: {
+  let renderContext = $derived.by<SvelteRenderContext>(() => {
     void customComponentsRevision
     const scopedCustomComponents = getCustomNodeComponents(customId)
     const mergedCustomComponents = customComponents
       ? { ...scopedCustomComponents, ...customComponents }
       : scopedCustomComponents
-    renderContext = buildRenderContext(
+    return buildRenderContext(
       {
-        ...props,
+        ...rendererProps,
         customComponents: mergedCustomComponents,
       },
       {
@@ -149,9 +157,9 @@
       textStreamState,
       streamRenderVersion,
     )
-  }
+  })
 
-  $: {
+  $effect(() => {
     void parsedNodes.length
     void batchRendering
     void initialRenderBatchSize
@@ -162,21 +170,33 @@
     void final
     void renderedNodeCount
     syncRenderedNodeWindow()
-  }
-  $: renderedNodes = parsedNodes.slice(0, Math.min(renderedNodeCount, parsedNodes.length))
+  })
+  let renderedNodes = $derived(parsedNodes.slice(0, Math.min(renderedNodeCount, parsedNodes.length)))
+
+  $effect(() => {
+    void rootEl
+    void final
+    void parsedNodes
+    void renderedNodes
+    void isDark
+    void renderCodeBlocksAsPre
+    void codeBlockMonacoOptions
+    void codeBlockProps
+    void mermaidProps
+    void d2Props
+    void infographicProps
+    void showTooltips
+    void onCopy
+    scheduleEnhancement()
+  })
 
   onMount(() => {
     const unsubscribe = subscribeCustomComponents(() => {
       customComponentsRevision += 1
     })
-    scheduleEnhancement()
     return unsubscribe
   })
 
-  afterUpdate(() => {
-    scheduleEnhancement()
-  })
-
   onDestroy(() => {
     enhancementToken += 1
     cancelRenderBatch()

package/dist/components/NodeRenderer.svelte.d.ts

@@ -1,64 +1,10 @@
 import type { NodeRendererEvents, NodeRendererProps } from './shared/node-helpers';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const NodeRenderer: $$__sveltets_2_IsomorphicComponent<{
-    content?: NodeRendererProps["content"];
-    nodes?: NodeRendererProps["nodes"];
-    final?: NodeRendererProps["final"];
-    parseOptions?: NodeRendererProps["parseOptions"];
-    customMarkdownIt?: NodeRendererProps["customMarkdownIt"];
-    debugPerformance?: boolean;
-    customHtmlTags?: NodeRendererProps["customHtmlTags"];
-    htmlPolicy?: NodeRendererProps["htmlPolicy"];
-    viewportPriority?: NodeRendererProps["viewportPriority"];
-    codeBlockStream?: boolean;
-    codeBlockDarkTheme?: NodeRendererProps["codeBlockDarkTheme"];
-    codeBlockLightTheme?: NodeRendererProps["codeBlockLightTheme"];
-    codeBlockMonacoOptions?: NodeRendererProps["codeBlockMonacoOptions"];
-    renderCodeBlocksAsPre?: boolean;
-    codeBlockMinWidth?: NodeRendererProps["codeBlockMinWidth"];
-    codeBlockMaxWidth?: NodeRendererProps["codeBlockMaxWidth"];
-    codeBlockProps?: NodeRendererProps["codeBlockProps"];
-    mermaidProps?: NodeRendererProps["mermaidProps"];
-    d2Props?: NodeRendererProps["d2Props"];
-    infographicProps?: NodeRendererProps["infographicProps"];
-    customComponents?: NodeRendererProps["customComponents"];
-    showTooltips?: boolean;
-    themes?: NodeRendererProps["themes"];
-    isDark?: boolean;
-    customId?: NodeRendererProps["customId"];
-    indexKey?: NodeRendererProps["indexKey"];
-    typewriter?: boolean;
-    batchRendering?: boolean;
-    initialRenderBatchSize?: number;
-    renderBatchSize?: number;
-    renderBatchDelay?: number;
-    renderBatchBudgetMs?: number;
-    renderBatchIdleTimeoutMs?: number;
-    deferNodesUntilVisible?: boolean;
-    maxLiveNodes?: number;
-    liveNodeBuffer?: number;
-    allowHtml?: boolean;
+type NodeRendererComponentProps = NodeRendererProps & NodeRendererEvents & {
     className?: string;
-    onCopy?: NodeRendererEvents["onCopy"];
-    onHandleArtifactClick?: NodeRendererEvents["onHandleArtifactClick"];
-    onClick?: ((event: MouseEvent) => void) | undefined;
-    onMouseover?: ((event: MouseEvent) => void) | undefined;
-    onMouseout?: ((event: MouseEvent) => void) | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type NodeRenderer = InstanceType<typeof NodeRenderer>;
+    onClick?: (event: MouseEvent) => void;
+    onMouseover?: (event: MouseEvent) => void;
+    onMouseout?: (event: MouseEvent) => void;
+};
+declare const NodeRenderer: import("svelte").Component<NodeRendererComponentProps, {}, "">;
+type NodeRenderer = ReturnType<typeof NodeRenderer>;
 export default NodeRenderer;
-//# sourceMappingURL=NodeRenderer.svelte.d.ts.map