@incremark/svelte 0.2.7 → 0.3.1

package/dist/components/IncremarkCode.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { Code } from 'mdast'
-  import { useShiki } from '../stores/useShiki.svelte'
+  import type { Component } from 'svelte'
+  import IncremarkCodeMermaid from './IncremarkCodeMermaid.svelte'
+  import IncremarkCodeDefault from './IncremarkCodeDefault.svelte'
 
   /**
    * 组件 Props
@@ -22,6 +24,8 @@
     codeBlockConfigs?: Record<string, { takeOver?: boolean }>
     /** 块状态，用于判断是否使用自定义组件 */
     blockStatus?: 'pending' | 'stable' | 'completed'
+    /** 默认代码块渲染组件（当不是 mermaid 且没有自定义组件时使用） */
+    defaultCodeComponent?: Component<any>
   }
 
   let {
@@ -32,25 +36,10 @@
     mermaidDelay = 500,
     customCodeBlocks,
     codeBlockConfigs,
-    blockStatus = 'completed'
+    blockStatus = 'completed',
+    defaultCodeComponent
   }: Props = $props()
 
-  // 状态
-  let copied = $state(false)
-  let highlightedHtml = $state('')
-
-  // Mermaid 支持
-  let mermaidSvg = $state('')
-  let mermaidError = $state('')
-  let mermaidLoading = $state(false)
-  let mermaidRef: any = null
-  let mermaidTimer: ReturnType<typeof setTimeout> | null = null
-  // 视图模式：'preview' | 'source'
-  let mermaidViewMode = $state<'preview' | 'source'>('preview')
-
-  // 使用 Shiki 单例管理器 - 修复：传入 getter 闭包以保持响应式
-  const shiki = useShiki(() => theme)
-
   /**
    * 计算属性
    */
@@ -71,90 +60,8 @@
     return component
   })
 
-  /**
-   * 切换 Mermaid 视图模式
-   */
-  function toggleMermaidView() {
-    mermaidViewMode = mermaidViewMode === 'preview' ? 'source' : 'preview'
-  }
-
-  /**
-   * 执行 Mermaid 渲染
-   */
-  async function doRenderMermaid() {
-    if (!code) return
-    mermaidError = ''
-
-    try {
-      if (!mermaidRef) {
-        // @ts-ignore
-        const mermaidModule = await import('mermaid')
-        mermaidRef = mermaidModule.default
-        mermaidRef.initialize({
-          startOnLoad: false,
-          theme: 'dark',
-          securityLevel: 'loose',
-          suppressErrorRendering: true
-        })
-      }
-
-      const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`
-      const { svg } = await mermaidRef.render(id, code)
-      mermaidSvg = svg
-    } catch (e: any) {
-      mermaidError = ''
-      mermaidSvg = ''
-    } finally {
-      mermaidLoading = false
-    }
-  }
-
-  /**
-   * 动态加载 shiki 并高亮
-   */
-  async function doHighlight() {
-    if (isMermaid) {
-      // Mermaid 防抖逻辑
-      if (mermaidTimer) clearTimeout(mermaidTimer)
-      mermaidLoading = true
-      mermaidTimer = setTimeout(doRenderMermaid, mermaidDelay)
-      return
-    }
-
-    if (!code || disableHighlight) {
-      highlightedHtml = ''
-      return
-    }
-
-    try {
-      // 调用经过修复的 shiki.highlight
-      const html = await shiki.highlight(code, language, fallbackTheme)
-      highlightedHtml = html
-    } catch (e) {
-      highlightedHtml = ''
-    }
-  }
-
-  /**
-   * 复制代码
-   */
-  async function copyCode() {
-    try {
-      await navigator.clipboard.writeText(code)
-      copied = true
-      setTimeout(() => { copied = false }, 2000)
-    } catch { /* 静默处理 */ }
-  }
-
-  // 监听代码、主题、语言变化并重新渲染
-  $effect(() => {
-    doHighlight()
-    
-    // 返回清理函数取代 onDestroy
-    return () => {
-      if (mermaidTimer) clearTimeout(mermaidTimer)
-    }
-  })
+  // 默认代码块组件
+  const DefaultCodeBlock = $derived(defaultCodeComponent || IncremarkCodeDefault)
 </script>
 
 {#if CustomCodeBlock}
@@ -166,55 +73,16 @@
     takeOver={codeBlockConfigs?.[language]?.takeOver} 
   />
 {:else if isMermaid}
-  <div class="incremark-mermaid">
-    <div class="mermaid-header">
-      <span class="language">MERMAID</span>
-      <div class="mermaid-actions">
-        <button 
-          class="code-btn" 
-          onclick={toggleMermaidView} 
-          type="button"
-          disabled={!mermaidSvg}
-        >
-          {mermaidViewMode === 'preview' ? '源码' : '预览'}
-        </button>
-        <button class="code-btn" onclick={copyCode} type="button">
-          {copied ? '✓ 已复制' : '复制'}
-        </button>
-      </div>
-    </div>
-    <div class="mermaid-content">
-      {#if mermaidLoading && !mermaidSvg}
-        <pre class="mermaid-source-code">{code}</pre>
-      {:else if mermaidViewMode === 'source'}
-        <pre class="mermaid-source-code">{code}</pre>
-      {:else if mermaidSvg}
-        {@html mermaidSvg}
-      {:else}
-        <pre class="mermaid-source-code">{code}</pre>
-      {/if}
-    </div>
-  </div>
+  <IncremarkCodeMermaid 
+    {node} 
+    {mermaidDelay} 
+  />
 {:else}
-  <div class="incremark-code">
-    <div class="code-header">
-      <span class="language">{language}</span>
-      <button class="code-btn" onclick={copyCode} type="button">
-        {copied ? '✓ 已复制' : '复制'}
-      </button>
-    </div>
-    <div class="code-content">
-      {#if shiki.isHighlighting && !highlightedHtml}
-        <div class="code-loading">
-          <pre><code>{code}</code></pre>
-        </div>
-      {:else if highlightedHtml}
-        <div class="shiki-wrapper">
-          {@html highlightedHtml}
-        </div>
-      {:else}
-        <pre class="code-fallback"><code>{code}</code></pre>
-      {/if}
-    </div>
-  </div>
+  {@const Component = DefaultCodeBlock}
+  <Component 
+    {node} 
+    {theme} 
+    {fallbackTheme} 
+    {disableHighlight} 
+  />
 {/if}

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

@@ -1,4 +1,5 @@
 import type { Code } from 'mdast';
+import type { Component } from 'svelte';
 /**
  * 组件 Props
  */
@@ -21,8 +22,10 @@ interface Props {
     }>;
     /** 块状态，用于判断是否使用自定义组件 */
     blockStatus?: 'pending' | 'stable' | 'completed';
+    /** 默认代码块渲染组件（当不是 mermaid 且没有自定义组件时使用） */
+    defaultCodeComponent?: Component<any>;
 }
-declare const IncremarkCode: import("svelte").Component<Props, {}, "">;
+declare const IncremarkCode: Component<Props, {}, "">;
 type IncremarkCode = ReturnType<typeof IncremarkCode>;
 export default IncremarkCode;
 //# sourceMappingURL=IncremarkCode.svelte.d.ts.map

package/dist/components/IncremarkCode.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IncremarkCode.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkCode.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAI/B;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,IAAI,CAAA;IACV,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IACzD,wBAAwB;IACxB,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAA;CACjD;AAiMH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"IncremarkCode.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkCode.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAKrC;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,IAAI,CAAA;IACV,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IACzD,wBAAwB;IACxB,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAA;IAChD,yCAAyC;IACzC,oBAAoB,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAA;CACtC;AAwDH,QAAA,MAAM,aAAa,0BAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/IncremarkCodeDefault.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import type { Code } from 'mdast'
+  import { onDestroy } from 'svelte'
+  import { LucideCopy, LucideCopyCheck } from '@incremark/icons'
+  import { isClipboardAvailable } from '@incremark/shared'
+  import SvgIcon from './SvgIcon.svelte'
+  import { useShiki } from '../stores/useShiki.svelte'
+  import { useLocale } from '../stores/useLocale.svelte'
+
+  /**
+   * 组件 Props
+   */
+  interface Props {
+    /** 代码节点 */
+    node: Code
+    /** Shiki 主题，默认 github-dark */
+    theme?: string
+    /** 默认回退主题（当指定主题加载失败时使用），默认 github-dark */
+    fallbackTheme?: string
+    /** 是否禁用代码高亮 */
+    disableHighlight?: boolean
+  }
+
+  let {
+    node,
+    theme = 'github-dark',
+    fallbackTheme = 'github-dark',
+    disableHighlight = false
+  }: Props = $props()
+
+  // 状态
+  let copied = $state(false)
+  let highlightedHtml = $state('')
+
+  // 使用 Shiki 单例管理器
+  const shiki = useShiki(() => theme)
+
+  // 使用 i18n
+  const { t } = useLocale()
+
+  // 计算属性
+  const language = $derived(node.lang || 'text')
+  const code = $derived(node.value)
+
+  /**
+   * 动态加载 shiki 并高亮
+   */
+  async function doHighlight() {
+    if (!code || disableHighlight) {
+      highlightedHtml = ''
+      return
+    }
+
+    try {
+      const html = await shiki.highlight(code, language, fallbackTheme)
+      highlightedHtml = html
+    } catch (e) {
+      highlightedHtml = ''
+    }
+  }
+
+  let copyTimeoutId: ReturnType<typeof setTimeout> | null = null
+
+  /**
+   * 复制代码
+   */
+  async function copyCode() {
+    if (!isClipboardAvailable()) return
+
+    try {
+      await navigator.clipboard.writeText(code)
+      copied = true
+
+      if (copyTimeoutId) clearTimeout(copyTimeoutId)
+      copyTimeoutId = setTimeout(() => { copied = false }, 2000)
+    } catch { /* 静默处理 */ }
+  }
+
+  onDestroy(() => {
+    if (copyTimeoutId) clearTimeout(copyTimeoutId)
+  })
+
+  // 监听代码、主题、语言变化并重新渲染
+  $effect(() => {
+    doHighlight()
+  })
+</script>
+
+<div class="incremark-code">
+  <div class="code-header">
+    <span class="language">{language}</span>
+    <button
+      class="code-btn"
+      onclick={copyCode}
+      type="button"
+      aria-label={copied ? t('code.copied') : t('code.copy')}
+      title={copied ? 'Copied!' : 'Copy'}
+    >
+      <SvgIcon svg={copied ? LucideCopyCheck : LucideCopy} />
+    </button>
+  </div>
+  <div class="code-content">
+    {#if shiki.isHighlighting && !highlightedHtml}
+      <div class="code-loading">
+        <pre><code>{code}</code></pre>
+      </div>
+    {:else if highlightedHtml}
+      <div class="shiki-wrapper">
+        {@html highlightedHtml}
+      </div>
+    {:else}
+      <pre class="code-fallback"><code>{code}</code></pre>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,18 @@
+import type { Code } from 'mdast';
+/**
+ * 组件 Props
+ */
+interface Props {
+    /** 代码节点 */
+    node: Code;
+    /** Shiki 主题，默认 github-dark */
+    theme?: string;
+    /** 默认回退主题（当指定主题加载失败时使用），默认 github-dark */
+    fallbackTheme?: string;
+    /** 是否禁用代码高亮 */
+    disableHighlight?: boolean;
+}
+declare const IncremarkCodeDefault: import("svelte").Component<Props, {}, "">;
+type IncremarkCodeDefault = ReturnType<typeof IncremarkCodeDefault>;
+export default IncremarkCodeDefault;
+//# sourceMappingURL=IncremarkCodeDefault.svelte.d.ts.map

package/dist/components/IncremarkCodeDefault.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IncremarkCodeDefault.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkCodeDefault.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAS/B;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,IAAI,CAAA;IACV,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAoGH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/components/IncremarkCodeMermaid.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+  import type { Code } from 'mdast'
+  import { onDestroy } from 'svelte'
+  import { GravityMermaid, LucideCode, LucideEye, LucideCopy, LucideCopyCheck } from '@incremark/icons'
+  import { isClipboardAvailable } from '@incremark/shared'
+  import SvgIcon from './SvgIcon.svelte'
+  import { useLocale } from '../stores/useLocale.svelte'
+
+  /**
+   * 组件 Props
+   */
+  interface Props {
+    /** 代码节点 */
+    node: Code
+    /** Mermaid 渲染延迟（毫秒），用于流式输入时防抖 */
+    mermaidDelay?: number
+  }
+
+  let {
+    node,
+    mermaidDelay = 500
+  }: Props = $props()
+
+  // 状态
+  let copied = $state(false)
+  let mermaidSvg = $state('')
+  let mermaidLoading = $state(false)
+  let mermaidRef: any = null
+  let mermaidTimer: ReturnType<typeof setTimeout> | null = null
+  let mermaidViewMode = $state<'preview' | 'source'>('preview')
+
+  // 计算属性
+  const code = $derived(node.value)
+
+  // 使用 i18n
+  const { t } = useLocale()
+
+  /**
+   * 切换 Mermaid 视图模式
+   */
+  function toggleMermaidView() {
+    mermaidViewMode = mermaidViewMode === 'preview' ? 'source' : 'preview'
+  }
+
+  /**
+   * 执行 Mermaid 渲染
+   */
+  async function doRenderMermaid() {
+    if (!code) return
+
+    try {
+      if (!mermaidRef) {
+        // @ts-ignore
+        const mermaidModule = await import('mermaid')
+        mermaidRef = mermaidModule.default
+        mermaidRef.initialize({
+          startOnLoad: false,
+          theme: 'dark',
+          securityLevel: 'loose',
+          suppressErrorRendering: true
+        })
+      }
+
+      const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`
+      const { svg } = await mermaidRef.render(id, code)
+      mermaidSvg = svg
+    } catch (e: any) {
+      mermaidSvg = ''
+    } finally {
+      mermaidLoading = false
+    }
+  }
+
+  let copyTimeoutId: ReturnType<typeof setTimeout> | null = null
+
+  /**
+   * 复制代码
+   */
+  async function copyCode() {
+    if (!isClipboardAvailable()) return
+
+    try {
+      await navigator.clipboard.writeText(code)
+      copied = true
+
+      if (copyTimeoutId) clearTimeout(copyTimeoutId)
+      copyTimeoutId = setTimeout(() => { copied = false }, 2000)
+    } catch { /* 静默处理 */ }
+  }
+
+  // 监听代码变化并重新渲染
+  $effect(() => {
+    // Mermaid 防抖逻辑
+    if (mermaidTimer) clearTimeout(mermaidTimer)
+    mermaidLoading = true
+    mermaidTimer = setTimeout(doRenderMermaid, mermaidDelay)
+
+    // 返回清理函数
+    return () => {
+      if (mermaidTimer) clearTimeout(mermaidTimer)
+    }
+  })
+
+  onDestroy(() => {
+    if (copyTimeoutId) clearTimeout(copyTimeoutId)
+  })
+</script>
+
+<div class="incremark-mermaid">
+  <div class="mermaid-header">
+    <span class="language">
+      <SvgIcon svg={GravityMermaid} class="language-icon" />
+      MERMAID
+    </span>
+    <div class="mermaid-actions">
+      <button
+        class="code-btn"
+        onclick={toggleMermaidView}
+        type="button"
+        disabled={!mermaidSvg}
+        aria-label={mermaidViewMode === 'preview' ? t('mermaid.viewSource') : t('mermaid.preview')}
+        title={mermaidViewMode === 'preview' ? 'View Source' : 'Preview'}
+      >
+        <SvgIcon svg={mermaidViewMode === 'preview' ? LucideCode : LucideEye} />
+      </button>
+      <button
+        class="code-btn"
+        onclick={copyCode}
+        type="button"
+        aria-label={copied ? t('mermaid.copied') : t('mermaid.copy')}
+        title={copied ? 'Copied!' : 'Copy'}
+      >
+        <SvgIcon svg={copied ? LucideCopyCheck : LucideCopy} />
+      </button>
+    </div>
+  </div>
+  <div class="mermaid-content">
+    {#if mermaidLoading && !mermaidSvg}
+      <pre class="mermaid-source-code">{code}</pre>
+    {:else if mermaidViewMode === 'source'}
+      <pre class="mermaid-source-code">{code}</pre>
+    {:else if mermaidSvg}
+      {@html mermaidSvg}
+    {:else}
+      <pre class="mermaid-source-code">{code}</pre>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,14 @@
+import type { Code } from 'mdast';
+/**
+ * 组件 Props
+ */
+interface Props {
+    /** 代码节点 */
+    node: Code;
+    /** Mermaid 渲染延迟（毫秒），用于流式输入时防抖 */
+    mermaidDelay?: number;
+}
+declare const IncremarkCodeMermaid: import("svelte").Component<Props, {}, "">;
+type IncremarkCodeMermaid = ReturnType<typeof IncremarkCodeMermaid>;
+export default IncremarkCodeMermaid;
+//# sourceMappingURL=IncremarkCodeMermaid.svelte.d.ts.map

package/dist/components/IncremarkCodeMermaid.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IncremarkCodeMermaid.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkCodeMermaid.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAQ/B;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,IAAI,CAAA;IACV,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAkIH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/components/IncremarkContent.svelte

@@ -4,11 +4,11 @@
 -->
 
 <script lang="ts">
-  import type { Component } from 'svelte'
   import { useIncremark, type UseIncremarkOptions } from '../stores/useIncremark'
-  import type { ComponentMap, IncremarkContentProps } from './types'
+  import type { IncremarkContentProps } from './types'
   import Incremark from './Incremark.svelte'
   import { get } from 'svelte/store'
+  import { untrack } from 'svelte'
 
   let {
     stream,
@@ -23,16 +23,47 @@
     showBlockStatus = false
   }: IncremarkContentProps = $props()
 
-  // 合并默认选项（初始化时使用）
-  const initialOptions: UseIncremarkOptions = {
-    gfm: true,
-    htmlTree: true,
-    containers: true,
-    math: true,
-    ...incremarkOptions
+  // 创建 incremark 实例（只创建一次）
+  const incremarkInstance = untrack(() => useIncremark({
+    gfm: incremarkOptions?.gfm ?? true,
+    htmlTree: incremarkOptions?.htmlTree ?? true,
+    containers: incremarkOptions?.containers ?? true,
+    math: incremarkOptions?.math ?? true,
+    astBuilder: incremarkOptions?.astBuilder,
+    typewriter: incremarkOptions?.typewriter
+  }))
+
+  // 解构出需要的方法和状态
+  const { blocks, append, finalize, render, reset, updateOptions, isDisplayComplete, markdown, typewriter } = incremarkInstance
+
+  // 计算 parser 配置的稳定 key（用于检测变化）
+  // astBuilder 用名称标识，因为它是类不能 JSON.stringify
+  function getConfigKey() {
+    const { typewriter: _, astBuilder, ...parserOptions } = incremarkOptions ?? {}
+    return JSON.stringify(parserOptions) + '|' + (astBuilder?.name ?? 'default')
   }
 
-  const { blocks, append, finalize, render, reset, isDisplayComplete, markdown, typewriter } = useIncremark(initialOptions)
+  // 监听 parser 配置变化，使用 updateOptions 动态更新（不重建实例）
+  let prevConfigKey = getConfigKey()
+  let isFirstRender = true
+  $effect(() => {
+    const currentConfigKey = getConfigKey()
+    if (isFirstRender) {
+      isFirstRender = false
+      return
+    }
+    if (prevConfigKey !== currentConfigKey) {
+      prevConfigKey = currentConfigKey
+      // 使用 updateOptions 动态更新配置（包括引擎切换）
+      updateOptions({
+        gfm: incremarkOptions?.gfm ?? true,
+        htmlTree: incremarkOptions?.htmlTree ?? true,
+        containers: incremarkOptions?.containers ?? true,
+        math: incremarkOptions?.math ?? true,
+        astBuilder: incremarkOptions?.astBuilder
+      })
+    }
+  })
 
   // 监听 incremarkOptions 的变化，更新 typewriter 配置
   $effect(() => {

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

@@ -1,6 +1,5 @@
-import type { Component } from 'svelte';
 import type { IncremarkContentProps } from './types';
-declare const IncremarkContent: Component<IncremarkContentProps, {}, "">;
+declare const IncremarkContent: import("svelte").Component<IncremarkContentProps, {}, "">;
 type IncremarkContent = ReturnType<typeof IncremarkContent>;
 export default IncremarkContent;
 //# sourceMappingURL=IncremarkContent.svelte.d.ts.map

package/dist/components/IncremarkContent.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IncremarkContent.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkContent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAEvC,OAAO,KAAK,EAAgB,qBAAqB,EAAE,MAAM,SAAS,CAAA;AA6GlE,QAAA,MAAM,gBAAgB,0CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"IncremarkContent.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkContent.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AA6IpD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/IncremarkFootnotes.svelte

@@ -4,26 +4,22 @@
 -->
 
 <script lang="ts">
-  import type { Readable } from 'svelte/store'
-  import type { FootnoteDefinition, RootContent } from 'mdast'
+  import type { RootContent } from 'mdast'
   import { getDefinitionsContext } from '../context/definitionsContext'
   import IncremarkRenderer from './IncremarkRenderer.svelte'
 
-
   const context = getDefinitionsContext()
-  const footnoteDefinitions = $derived(context?.footnoteDefinitions ?? {});
-  const footnoteReferenceOrder = $derived(context?.footnoteReferenceOrder ?? []);
+  // 解构 store 以便使用 $ 语法订阅
+  const { footnoteDefinitions, footnoteReferenceOrder } = context
 
   /**
    * 按引用顺序排列的脚注列表
    * 只显示已有定义的脚注
    */
   const orderedFootnotes = $derived.by(() => {
-    if (!footnoteReferenceOrder || !footnoteDefinitions) {
-      return []
-    }
     const order = $footnoteReferenceOrder
     const definitions = $footnoteDefinitions
+    
     return order
       .map(identifier => ({
         identifier,

package/dist/components/IncremarkFootnotes.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IncremarkFootnotes.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkFootnotes.svelte.ts"],"names":[],"mappings":"AA4EA,QAAA,MAAM,kBAAkB,2DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"IncremarkFootnotes.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkFootnotes.svelte.ts"],"names":[],"mappings":"AAuEA,QAAA,MAAM,kBAAkB,2DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/IncremarkInline.svelte

@@ -69,10 +69,10 @@
     return (node as unknown as MathNode).type === 'inlineMath'
   }
 
-  // 获取 definitions context（可能不存在）
-  // 使用 $derived 来确保响应式
+  // 获取 definitions context
   const context = getDefinitionsContext()
-  const definations = $derived(context?.definations ?? {});
+  // 解构 store 以便使用 $ 语法订阅
+  const { definations } = context
 
 
   /**