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

package/dist/components/AdmonitionNode.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
   import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers'
   import { renderNodeHtml } from './shared/renderNodeHtml'
-  export let node: SvelteRenderableNode
-  export let context: SvelteRenderContext | undefined = undefined
-  $: html = renderNodeHtml(node, context)
+
+  interface Props {
+    node: SvelteRenderableNode;
+    context?: SvelteRenderContext | undefined;
+  }
+
+  let { node, context = undefined }: Props = $props();
+
+  let html = $derived(renderNodeHtml(node, context));
 </script>
 {@html html}

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

@@ -1,22 +1,8 @@
 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 AdmonitionNode: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     node: SvelteRenderableNode;
     context?: SvelteRenderContext | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AdmonitionNode = InstanceType<typeof AdmonitionNode>;
+}
+declare const AdmonitionNode: import("svelte").Component<Props, {}, "">;
+type AdmonitionNode = ReturnType<typeof AdmonitionNode>;
 export default AdmonitionNode;

package/dist/components/BlockquoteNode.svelte

@@ -2,9 +2,15 @@
   import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers'
   import RenderChildren from './RenderChildren.svelte'
   import { getNodeList, getString } from './shared/node-helpers'
-  export let node: SvelteRenderableNode
-  export let context: SvelteRenderContext | undefined = undefined
-  export let indexKey: string | number | undefined = undefined
-  $: cite = getString((node as any)?.cite)
+
+  interface Props {
+    node: SvelteRenderableNode;
+    context?: SvelteRenderContext | undefined;
+    indexKey?: string | number | undefined;
+  }
+
+  let { node, context = undefined, indexKey = undefined }: Props = $props();
+
+  let cite = $derived(getString((node as any)?.cite));
 </script>
 <blockquote class="blockquote blockquote-node" dir="auto" cite={cite || undefined}><RenderChildren nodes={getNodeList((node as any)?.children)} context={context} prefix={String(indexKey ?? 'blockquote') + '-blockquote'} /></blockquote>

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

@@ -1,23 +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 BlockquoteNode: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     node: SvelteRenderableNode;
     context?: SvelteRenderContext | undefined;
     indexKey?: string | number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type BlockquoteNode = InstanceType<typeof BlockquoteNode>;
+}
+declare const BlockquoteNode: import("svelte").Component<Props, {}, "">;
+type BlockquoteNode = ReturnType<typeof BlockquoteNode>;
 export default BlockquoteNode;

package/dist/components/CheckboxNode.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { SvelteRenderableNode } from './shared/node-helpers'
-  export let node: SvelteRenderableNode
+  
+  type Props = { node: SvelteRenderableNode };
+  let { node }: Props = $props()
 </script>
 <input class="checkbox-node" type="checkbox" disabled checked={Boolean((node as any)?.checked)} />

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

@@ -1,21 +1,7 @@
 import type { SvelteRenderableNode } 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 CheckboxNode: $$__sveltets_2_IsomorphicComponent<{
+type Props = {
     node: SvelteRenderableNode;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CheckboxNode = InstanceType<typeof CheckboxNode>;
+};
+declare const CheckboxNode: import("svelte").Component<Props, {}, "">;
+type CheckboxNode = ReturnType<typeof CheckboxNode>;
 export default CheckboxNode;

package/dist/components/CodeBlockNode.svelte

@@ -10,27 +10,53 @@
   import { copyTextToClipboard, resolveCssSize } from './shared/rich-block-helpers'
   import { getString, sanitizeClassToken } from './shared/node-helpers'
 
-  export let node: SvelteRenderableNode
-  export let context: SvelteRenderContext | undefined = undefined
-  export let isDark: boolean | undefined = undefined
-  export let loading: boolean | undefined = undefined
-  export let stream: boolean | undefined = undefined
-  export let darkTheme: CodeBlockMonacoTheme | undefined = undefined
-  export let lightTheme: CodeBlockMonacoTheme | undefined = undefined
-  export let themes: CodeBlockMonacoTheme[] | undefined = undefined
-  export let monacoOptions: CodeBlockMonacoOptions | undefined = undefined
-  export let minWidth: string | number | undefined = undefined
-  export let maxWidth: string | number | undefined = undefined
-  export let isShowPreview = true
-  export let enableFontSizeControl = true
-  export let showHeader = true
-  export let showCopyButton = true
-  export let showExpandButton = true
-  export let showPreviewButton = true
-  export let showCollapseButton = true
-  export let showFontSizeButtons = true
-  export let htmlPreviewAllowScripts = false
-  export let htmlPreviewSandbox: string | undefined = undefined
+  type Props = {
+    node: SvelteRenderableNode
+    context?: SvelteRenderContext | undefined
+    isDark?: boolean | undefined
+    loading?: boolean | undefined
+    stream?: boolean | undefined
+    darkTheme?: CodeBlockMonacoTheme | undefined
+    lightTheme?: CodeBlockMonacoTheme | undefined
+    themes?: CodeBlockMonacoTheme[] | undefined
+    monacoOptions?: CodeBlockMonacoOptions | undefined
+    minWidth?: string | number | undefined
+    maxWidth?: string | number | undefined
+    isShowPreview?: boolean
+    enableFontSizeControl?: boolean
+    showHeader?: boolean
+    showCopyButton?: boolean
+    showExpandButton?: boolean
+    showPreviewButton?: boolean
+    showCollapseButton?: boolean
+    showFontSizeButtons?: boolean
+    htmlPreviewAllowScripts?: boolean
+    htmlPreviewSandbox?: string | undefined
+  }
+
+  let {
+    node,
+    context = undefined,
+    isDark = undefined,
+    loading = undefined,
+    stream = undefined,
+    darkTheme = undefined,
+    lightTheme = undefined,
+    themes = undefined,
+    monacoOptions = undefined,
+    minWidth = undefined,
+    maxWidth = undefined,
+    isShowPreview = true,
+    enableFontSizeControl = true,
+    showHeader = true,
+    showCopyButton = true,
+    showExpandButton = true,
+    showPreviewButton = true,
+    showCollapseButton = true,
+    showFontSizeButtons = true,
+    htmlPreviewAllowScripts = false,
+    htmlPreviewSandbox = undefined
+  }: Props = $props()
 
   const { t } = useSafeI18n()
   const defaultDiffHideUnchangedRegions = Object.freeze({
@@ -95,82 +121,86 @@
     languageRetryTimer = setTimeout(retry, 50)
   }
 
-  let editorHost: HTMLDivElement | null = null
-  let helpers: any = null
-  let runtimeMonacoOptions: Record<string, any> | null = null
-  let ensureMonacoPromise: Promise<void> | null = null
-  let editorReady = false
-  let useFallback = false
-  let fallbackLanguage = ''
-  let editorKind: 'single' | 'diff' | null = null
-  let createEditorPromise: Promise<void> | null = null
-  let mounted = false
-  let collapsed = false
-  let expanded = false
-  let copied = false
-  let previewOpen = false
-  let codeFontSize = 13
-  let copyTimer: ReturnType<typeof setTimeout> | null = null
-  let lifecycleId = 0
-  let heightSyncRaf: number | null = null
-  let heightSyncDisposables: Array<{ dispose?: () => void } | (() => void)> = []
-  let lastLayoutWidth: number | null = null
-  let lastLayoutHeight: number | null = null
-  let lastThemeRequest = ''
-  let languageRetryTimer: ReturnType<typeof setTimeout> | null = null
-  let loadingSettledRefreshPromise: Promise<void> | null = null
-  let loadingSettledRefreshTimer: ReturnType<typeof setTimeout> | null = null
-  let lastSettledRefreshSignature = ''
-  let tokenizeTimer: ReturnType<typeof setTimeout> | null = null
-  let tokenizeRaf: number | null = null
-  let tokenizeShouldRefreshModelValue = false
-
-  $: rawLanguage = getString((node as any)?.language).trim()
-  $: canonicalLanguage = normalizeLanguageIdentifier(rawLanguage)
-  $: monacoLanguage = resolveMonacoLanguageId(canonicalLanguage || rawLanguage || 'plaintext')
-  $: code = getResolvedCode(node)
-  $: diff = Boolean((node as any)?.diff)
-  $: originalCode = getString((node as any)?.originalCode)
-  $: updatedCode = getString((node as any)?.updatedCode)
-  $: nodeLoading = (node as any)?.loading === true
-  $: resolvedLoading = loading ?? nodeLoading
-  $: resolvedStream = stream ?? context?.codeBlockStream ?? true
-  $: resolvedIsDark = isDark ?? context?.isDark ?? false
-  $: resolvedThemes = context?.codeBlockThemes
-  $: mergedMonacoOptions = { ...(resolvedThemes?.monacoOptions || {}), ...(monacoOptions || {}) }
-  $: resolvedMonacoOptions = buildResolvedMonacoOptions()
-  $: requestedTheme = getThemeName(
+  let editorHost: HTMLDivElement | null = $state(null)
+  let helpers: any = $state(null)
+  let runtimeMonacoOptions: Record<string, any> | null = $state(null)
+  let ensureMonacoPromise: Promise<void> | null = $state(null)
+  let editorReady = $state(false)
+  let useFallback = $state(false)
+  let fallbackLanguage = $state('')
+  let editorKind: 'single' | 'diff' | null = $state(null)
+  let createEditorPromise: Promise<void> | null = $state(null)
+  let mounted = $state(false)
+  let collapsed = $state(false)
+  let expanded = $state(false)
+  let copied = $state(false)
+  let previewOpen = $state(false)
+  let codeFontSize = $state(13)
+  let copyTimer: ReturnType<typeof setTimeout> | null = $state(null)
+  let lifecycleId = $state(0)
+  let heightSyncRaf: number | null = $state(null)
+  let heightSyncDisposables: Array<{ dispose?: () => void } | (() => void)> = $state([])
+  let lastLayoutWidth: number | null = $state(null)
+  let lastLayoutHeight: number | null = $state(null)
+  let lastThemeRequest = $state('')
+  let languageRetryTimer: ReturnType<typeof setTimeout> | null = $state(null)
+  let loadingSettledRefreshPromise: Promise<void> | null = $state(null)
+  let loadingSettledRefreshTimer: ReturnType<typeof setTimeout> | null = $state(null)
+  let lastSettledRefreshSignature = $state('')
+  let tokenizeTimer: ReturnType<typeof setTimeout> | null = $state(null)
+  let tokenizeRaf: number | null = $state(null)
+  let tokenizeShouldRefreshModelValue = $state(false)
+
+  let rawLanguage = $derived(getString((node as any)?.language).trim())
+  let canonicalLanguage = $derived(normalizeLanguageIdentifier(rawLanguage))
+  let monacoLanguage = $derived(resolveMonacoLanguageId(canonicalLanguage || rawLanguage || 'plaintext'))
+  let code = $derived(getResolvedCode(node))
+  let diff = $derived(Boolean((node as any)?.diff))
+  let originalCode = $derived(getString((node as any)?.originalCode))
+  let updatedCode = $derived(getString((node as any)?.updatedCode))
+  let nodeLoading = $derived((node as any)?.loading === true)
+  let resolvedLoading = $derived(loading ?? nodeLoading)
+  let resolvedStream = $derived(stream ?? context?.codeBlockStream ?? true)
+  let resolvedIsDark = $derived(isDark ?? context?.isDark ?? false)
+  let resolvedThemes = $derived(context?.codeBlockThemes)
+  let mergedMonacoOptions = $derived({ ...(resolvedThemes?.monacoOptions || {}), ...(monacoOptions || {}) })
+  let resolvedMonacoOptions = $derived(buildResolvedMonacoOptions())
+  let requestedTheme = $derived(getThemeName(
     resolvedIsDark
       ? darkTheme ?? resolvedThemes?.darkTheme
       : lightTheme ?? resolvedThemes?.lightTheme,
     resolvedIsDark ? 'vitesse-dark' : 'vitesse-light',
-  )
-  $: defaultCodeFontSize = Number(mergedMonacoOptions.fontSize) || 13
-  $: minWidthValue = resolveCssSize(minWidth ?? resolvedThemes?.minWidth)
-  $: maxWidthValue = resolveCssSize(maxWidth ?? resolvedThemes?.maxWidth)
-  $: containerStyle = [
+  ))
+  let defaultCodeFontSize = $derived(Number(mergedMonacoOptions.fontSize) || 13)
+  let minWidthValue = $derived(resolveCssSize(minWidth ?? resolvedThemes?.minWidth))
+  let maxWidthValue = $derived(resolveCssSize(maxWidth ?? resolvedThemes?.maxWidth))
+  let containerStyle = $derived([
     minWidthValue ? `min-width: ${minWidthValue}` : '',
     maxWidthValue ? `max-width: ${maxWidthValue}` : '',
-  ].filter(Boolean).join('; ')
-  $: languageIcon = getLanguageIcon(canonicalLanguage || rawLanguage || 'plain')
-  $: displayLanguage = languageMap[canonicalLanguage] || (rawLanguage ? rawLanguage.toUpperCase() : languageMap[''])
-  $: isPreviewable = isShowPreview !== false && (canonicalLanguage === 'html' || canonicalLanguage === 'svg')
-  $: previewTitle = canonicalLanguage === 'svg' ? t('artifacts.svgPreviewTitle') : t('artifacts.htmlPreviewTitle')
-  $: shouldDelayEditor = resolvedStream === false && resolvedLoading
-  $: documentStreaming = context?.final === false || resolvedLoading
-  $: shouldDeferStreamingLanguage = resolvedStream !== false && documentStreaming && (isLikelyIncompleteLanguageIdentifier(rawLanguage) || isStreamingLanguagePrefix(rawLanguage))
-  $: shouldRender = !(resolvedLoading && !code.trim())
-  $: preLanguageClass = sanitizeClassToken(rawLanguage || monacoLanguage)
-  $: showPreWhileMonacoLoads = !useFallback && !shouldDelayEditor && !shouldDeferStreamingLanguage && !editorReady
-  $: showPreFallback = useFallback || shouldDelayEditor || shouldDeferStreamingLanguage || showPreWhileMonacoLoads
-  $: settledRefreshSignature = diff
+  ].filter(Boolean).join('; '))
+  let languageIcon = $derived(getLanguageIcon(canonicalLanguage || rawLanguage || 'plain'))
+  let displayLanguage = $derived(languageMap[canonicalLanguage] || (rawLanguage ? rawLanguage.toUpperCase() : languageMap['']))
+  let isPreviewable = $derived(isShowPreview !== false && (canonicalLanguage === 'html' || canonicalLanguage === 'svg'))
+  let previewTitle = $derived(canonicalLanguage === 'svg' ? t('artifacts.svgPreviewTitle') : t('artifacts.htmlPreviewTitle'))
+  let shouldDelayEditor = $derived(resolvedStream === false && resolvedLoading)
+  let documentStreaming = $derived(context?.final === false || resolvedLoading)
+  let shouldDeferStreamingLanguage = $derived(resolvedStream !== false && documentStreaming && (isLikelyIncompleteLanguageIdentifier(rawLanguage) || isStreamingLanguagePrefix(rawLanguage)))
+  let shouldRender = $derived(!(resolvedLoading && !code.trim()))
+  let preLanguageClass = $derived(sanitizeClassToken(rawLanguage || monacoLanguage))
+  let showPreWhileMonacoLoads = $derived(!useFallback && !shouldDelayEditor && !shouldDeferStreamingLanguage && !editorReady)
+  let showPreFallback = $derived(useFallback || shouldDelayEditor || shouldDeferStreamingLanguage || showPreWhileMonacoLoads)
+  let settledRefreshSignature = $derived(diff
     ? `${monacoLanguage}\0${originalCode}\0${updatedCode || code}`
-    : `${monacoLanguage}\0${code}`
-  $: if (useFallback && fallbackLanguage && rawLanguage !== fallbackLanguage && isLikelyIncompleteLanguageIdentifier(fallbackLanguage)) {
-    useFallback = false
-    fallbackLanguage = ''
-  }
-  $: {
+    : `${monacoLanguage}\0${code}`)
+
+  $effect(() => {
+    if (useFallback && fallbackLanguage && rawLanguage !== fallbackLanguage && isLikelyIncompleteLanguageIdentifier(fallbackLanguage)) {
+      useFallback = false
+      fallbackLanguage = ''
+    }
+  })
+
+  $effect(() => {
     void mounted
     void resolvedLoading
     void settledRefreshSignature
@@ -182,8 +212,9 @@
         queueLoadingSettledRefresh()
       }
     }
-  }
-  $: {
+  })
+
+  $effect(() => {
     void mounted
     void editorHost
     void shouldRender
@@ -201,7 +232,7 @@
     void expanded
     if (mounted)
       void syncEditor()
-  }
+  })
 
   onMount(() => {
     mounted = true

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

@@ -1,19 +1,6 @@
 import type { CodeBlockMonacoOptions, CodeBlockMonacoTheme } from '../types/monaco';
 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 CodeBlockNode: $$__sveltets_2_IsomorphicComponent<{
+type Props = {
     node: SvelteRenderableNode;
     context?: SvelteRenderContext | undefined;
     isDark?: boolean | undefined;
@@ -35,8 +22,7 @@ declare const CodeBlockNode: $$__sveltets_2_IsomorphicComponent<{
     showFontSizeButtons?: boolean;
     htmlPreviewAllowScripts?: boolean;
     htmlPreviewSandbox?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CodeBlockNode = InstanceType<typeof CodeBlockNode>;
+};
+declare const CodeBlockNode: import("svelte").Component<Props, {}, "">;
+type CodeBlockNode = ReturnType<typeof CodeBlockNode>;
 export default CodeBlockNode;

package/dist/components/D2BlockNode.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers'
-  import { afterUpdate, onDestroy, onMount } from 'svelte'
+  import { onDestroy, onMount, untrack } from 'svelte'
   import { useSafeI18n } from '../i18n/useSafeI18n'
   import { getD2 } from '../optional/d2'
   import { extractRenderedSvg, toSafeSvgMarkup } from '../sanitizeSvg'
@@ -29,50 +29,73 @@
     AB5: '#F59E0B',
   }
 
-  export let node: SvelteRenderableNode
-  export let context: SvelteRenderContext | undefined = undefined
-  export let maxHeight: string | null | undefined = '500px'
-  export let loading: boolean | undefined = undefined
-  export let isDark: boolean | undefined = undefined
-  export let themeId: number | null | undefined = undefined
-  export let darkThemeId: number | null | undefined = undefined
-  export let showHeader = true
-  export let showModeToggle = true
-  export let showCopyButton = true
-  export let showExportButton = true
-  export let showCollapseButton = true
+  type Props = {
+    node: SvelteRenderableNode
+    context?: SvelteRenderContext | undefined
+    maxHeight?: string | null | undefined
+    loading?: boolean | undefined
+    isDark?: boolean | undefined
+    themeId?: number | null | undefined
+    darkThemeId?: number | null | undefined
+    showHeader?: boolean
+    showModeToggle?: boolean
+    showCopyButton?: boolean
+    showExportButton?: boolean
+    showCollapseButton?: boolean
+  }
+
+  let {
+    node,
+    context = undefined,
+    maxHeight = '500px',
+    loading = undefined,
+    isDark = undefined,
+    themeId = undefined,
+    darkThemeId = undefined,
+    showHeader = true,
+    showModeToggle = true,
+    showCopyButton = true,
+    showExportButton = true,
+    showCollapseButton = true
+  }: Props = $props()
 
   const { t } = useSafeI18n()
 
-  let mounted = false
-  let renderToken = 0
-  let lastSignature = ''
-  let activeRenderSignature = ''
-  let svgMarkup = ''
-  let renderError = ''
-  let rendering = false
-  let rerenderQueued = false
-  let rerenderForce = false
-  let copied = false
-  let collapsed = false
-  let showSource = false
+  let mounted = $state(false)
+  let renderToken = $state(0)
+  let lastSignature = $state('')
+  let activeRenderSignature = $state('')
+  let svgMarkup = $state('')
+  let renderError = $state('')
+  let rendering = $state(false)
+  let rerenderQueued = $state(false)
+  let rerenderForce = $state(false)
+  let copied = $state(false)
+  let collapsed = $state(false)
+  let showSource = $state(false)
   let copyTimer: ReturnType<typeof setTimeout> | null = null
 
-  $: source = getString((node as any)?.code)
-  $: resolvedLoading = loading ?? (node as any)?.loading === true
-  $: resolvedIsDark = isDark ?? context?.isDark ?? false
-  $: shouldRender = !(resolvedLoading && !source.trim())
-  $: showSourceFallback = showSource || !svgMarkup
-  $: renderStyle = maxHeight && maxHeight !== 'none' ? `max-height: ${maxHeight}` : ''
+  let source = $derived(getString((node as any)?.code))
+  let resolvedLoading = $derived(loading ?? (node as any)?.loading === true)
+  let resolvedIsDark = $derived(isDark ?? context?.isDark ?? false)
+  let shouldRender = $derived(!(resolvedLoading && !source.trim()))
+  let showSourceFallback = $derived(showSource || !svgMarkup)
+  let renderStyle = $derived(maxHeight && maxHeight !== 'none' ? `max-height: ${maxHeight}` : '')
 
   onMount(() => {
     mounted = true
     void renderD2(true)
   })
 
-  afterUpdate(() => {
-    if (mounted)
-      void renderD2()
+  $effect(() => {
+    if (mounted) {
+      const _sig = getRenderSignature()
+      const _collapsed = collapsed
+      const _showSource = showSource
+      untrack(() => {
+        void renderD2()
+      })
+    }
   })
 
   onDestroy(() => {

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

@@ -1,18 +1,5 @@
 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 D2BlockNode: $$__sveltets_2_IsomorphicComponent<{
+type Props = {
     node: SvelteRenderableNode;
     context?: SvelteRenderContext | undefined;
     maxHeight?: string | null | undefined;
@@ -25,8 +12,7 @@ declare const D2BlockNode: $$__sveltets_2_IsomorphicComponent<{
     showCopyButton?: boolean;
     showExportButton?: boolean;
     showCollapseButton?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type D2BlockNode = InstanceType<typeof D2BlockNode>;
+};
+declare const D2BlockNode: import("svelte").Component<Props, {}, "">;
+type D2BlockNode = ReturnType<typeof D2BlockNode>;
 export default D2BlockNode;

package/dist/components/DefinitionListNode.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
   import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers'
   import { renderNodeHtml } from './shared/renderNodeHtml'
-  export let node: SvelteRenderableNode
-  export let context: SvelteRenderContext | undefined = undefined
-  $: html = renderNodeHtml(node, context)
+
+  interface Props {
+    node: SvelteRenderableNode;
+    context?: SvelteRenderContext | undefined;
+  }
+
+  let { node, context = undefined }: Props = $props();
+
+  let html = $derived(renderNodeHtml(node, context));
 </script>
 {@html html}

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

@@ -1,22 +1,8 @@
 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 DefinitionListNode: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     node: SvelteRenderableNode;
     context?: SvelteRenderContext | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DefinitionListNode = InstanceType<typeof DefinitionListNode>;
+}
+declare const DefinitionListNode: import("svelte").Component<Props, {}, "">;
+type DefinitionListNode = ReturnType<typeof DefinitionListNode>;
 export default DefinitionListNode;

package/dist/components/EmojiNode.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
   import type { SvelteRenderableNode } from './shared/node-helpers'
   import { getString } from './shared/node-helpers'
-  export let node: SvelteRenderableNode
-  $: value = getString((node as any)?.raw || (node as any)?.markup || (node as any)?.content || (node as any)?.name)
+
+  interface Props {
+    node: SvelteRenderableNode;
+  }
+
+  let { node }: Props = $props();
+
+  let value = $derived(getString((node as any)?.raw || (node as any)?.markup || (node as any)?.content || (node as any)?.name));
 </script>
 <span class="emoji-node">{value}</span>