@incremark/svelte 0.2.3

package/dist/components/IncremarkInline.svelte

@@ -0,0 +1,233 @@
+<!--
+  @file IncremarkInline.svelte - 行内元素组件
+  @description 渲染行内 Markdown 元素（文本、链接、加粗、斜体等）
+-->
+
+<script lang="ts">
+  import type { Readable } from 'svelte/store'
+  import type { PhrasingContent, ImageReference, LinkReference } from 'mdast'
+  import type { TextChunk } from '@incremark/core'
+  import {
+    type TextNodeWithChunks,
+    hasChunks,
+    getStableText,
+    isHtmlNode
+  } from '@incremark/shared'
+  import { getDefinitionsContext } from '../context/definitionsContext'
+  import IncremarkMath from './IncremarkMath.svelte'
+  import IncremarkHtmlElement from './IncremarkHtmlElement.svelte'
+  import IncremarkInline from './IncremarkInline.svelte'
+
+  /**
+   * 组件 Props
+   */
+  interface Props {
+    /** 行内节点列表 */
+    nodes: PhrasingContent[]
+  }
+
+  let { nodes }: Props = $props()
+
+  // Math 节点类型
+  interface MathNode {
+    type: 'math' | 'inlineMath'
+    value: string
+  }
+
+  // HtmlElement 节点类型
+  interface HtmlElementNode {
+    type: 'htmlElement'
+    tagName: string
+    attrs: Record<string, string>
+    children: PhrasingContent[]
+  }
+
+  /**
+   * 类型守卫：检查是否是 htmlElement 节点
+   */
+  function isHtmlElementNode(node: PhrasingContent): node is PhrasingContent & HtmlElementNode {
+    return (node as unknown as HtmlElementNode).type === 'htmlElement'
+  }
+
+  /**
+   * 类型守卫：检查是否是 imageReference 节点
+   */
+  function isImageReference(node: PhrasingContent): node is ImageReference {
+    return node.type === 'imageReference'
+  }
+
+  /**
+   * 类型守卫：检查是否是 linkReference 节点
+   */
+  function isLinkReference(node: PhrasingContent): node is LinkReference {
+    return node.type === 'linkReference'
+  }
+
+  /**
+   * 类型守卫：检查是否是 inlineMath 节点
+   */
+  function isInlineMath(node: PhrasingContent): node is PhrasingContent & MathNode {
+    return (node as unknown as MathNode).type === 'inlineMath'
+  }
+
+  // 获取 definitions context（可能不存在）
+  // 使用 $derived 来确保响应式
+  const definations = $derived.by(() => {
+    try {
+      const context = getDefinitionsContext()
+      return context.definations
+    } catch {
+      // Context 不存在，返回 null
+      return null
+    }
+  })
+  
+  const footnoteDefinitions = $derived.by(() => {
+    try {
+      const context = getDefinitionsContext()
+      return context.footnoteDefinitions
+    } catch {
+      // Context 不存在，返回 null
+      return null
+    }
+  })
+
+  /**
+   * 获取节点的 chunks（类型安全）
+   */
+  function getChunks(node: PhrasingContent): TextChunk[] | undefined {
+    if (hasChunks(node)) {
+      return (node as TextNodeWithChunks).chunks
+    }
+    return undefined
+  }
+</script>
+
+{#each nodes as node, idx (idx)}
+  <!-- 文本（支持 chunks 渐入动画） -->
+  {#if node.type === 'text'}
+    <!-- 稳定文本（已经显示过的部分，无动画） -->
+    {getStableText(node as TextNodeWithChunks)}
+    <!-- 新增的 chunk 部分（带渐入动画） -->
+    {#each getChunks(node) || [] as chunk (chunk.createdAt)}
+      <span class="incremark-fade-in">{chunk.text}</span>
+    {/each}
+  {/if}
+
+  <!-- 行内公式 -->
+  {#if isInlineMath(node)}
+    <IncremarkMath node={node as unknown as MathNode} />
+  {/if}
+
+  <!-- htmlElement 节点（结构化的 HTML 元素） -->
+  {#if isHtmlElementNode(node)}
+    <IncremarkHtmlElement node={node as unknown as HtmlElementNode} />
+  {/if}
+
+  <!-- HTML 节点（原始 HTML，如未启用 htmlTree 选项） -->
+  {#if isHtmlNode(node)}
+    {@html (node as any).value}
+  {/if}
+
+  <!-- 加粗 -->
+  {#if node.type === 'strong'}
+    <strong>
+      <IncremarkInline nodes={node.children as PhrasingContent[]} />
+    </strong>
+  {/if}
+
+  <!-- 斜体 -->
+  {#if node.type === 'emphasis'}
+    <em>
+      <IncremarkInline nodes={node.children as PhrasingContent[]} />
+    </em>
+  {/if}
+
+  <!-- 行内代码 -->
+  {#if node.type === 'inlineCode'}
+    <code class="incremark-inline-code">{(node as any).value}</code>
+  {/if}
+
+  <!-- 链接 -->
+  {#if node.type === 'link'}
+    <a
+      class="incremark-link"
+      href={node.url}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <IncremarkInline nodes={node.children as PhrasingContent[]} />
+    </a>
+  {/if}
+
+  <!-- 图片 -->
+  {#if node.type === 'image'}
+    <img
+      class="incremark-image"
+      src={node.url}
+      alt={node.alt || ''}
+      title={(node as any).title || undefined}
+      loading="lazy"
+    />
+  {/if}
+
+  <!-- 引用式图片（imageReference） -->
+  {#if isImageReference(node)}
+    {#if definations && $definations[node.identifier]}
+      <img
+        class="incremark-image incremark-reference-image"
+        src={$definations[node.identifier].url}
+        alt={node.alt || ''}
+        title={$definations[node.identifier].title || undefined}
+        loading="lazy"
+      />
+    {:else}
+      <!-- 如果没有找到定义，渲染为原始文本（降级处理） -->
+      <span class="incremark-image-ref-missing">
+        ![{node.alt}][{node.identifier || node.label}]
+      </span>
+    {/if}
+  {/if}
+
+  <!-- 引用式链接（linkReference） -->
+  {#if isLinkReference(node)}
+    {#if definations && $definations[node.identifier]}
+      <a
+        class="incremark-link incremark-reference-link"
+        href={$definations[node.identifier].url}
+        title={$definations[node.identifier].title || undefined}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <IncremarkInline nodes={node.children as PhrasingContent[]} />
+      </a>
+    {:else}
+      <!-- 如果没有找到定义，渲染为原始文本（降级处理） -->
+      <span class="incremark-link-ref-missing">
+        [{node.children.map((c: any) => c.value).join('')}][{node.identifier || node.label}]
+      </span>
+    {/if}
+  {/if}
+
+  <!-- 脚注引用（footnoteReference） -->
+  {#if node.type === 'footnoteReference'}
+    <sup class="incremark-footnote-ref">
+      <a href="#fn-{(node as any).identifier}" id="fnref-{(node as any).identifier}">
+        [{(node as any).identifier}]
+      </a>
+    </sup>
+  {/if}
+
+  <!-- 换行 -->
+  {#if node.type === 'break'}
+    <br />
+  {/if}
+
+  <!-- 删除线 -->
+  {#if node.type === 'delete'}
+    <del>
+      <IncremarkInline nodes={node.children as PhrasingContent[]} />
+    </del>
+  {/if}
+{/each}
+

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

@@ -0,0 +1,13 @@
+import type { PhrasingContent } from 'mdast';
+import IncremarkInline from './IncremarkInline.svelte';
+/**
+ * 组件 Props
+ */
+interface Props {
+    /** 行内节点列表 */
+    nodes: PhrasingContent[];
+}
+declare const IncremarkInline: import("svelte").Component<Props, {}, "">;
+type IncremarkInline = ReturnType<typeof IncremarkInline>;
+export default IncremarkInline;
+//# sourceMappingURL=IncremarkInline.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IncremarkInline.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkInline.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAiC,MAAM,OAAO,CAAA;AAW3E,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAGrD;;GAEG;AACH,UAAU,KAAK;IACb,aAAa;IACb,KAAK,EAAE,eAAe,EAAE,CAAA;CACzB;AAyMH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/IncremarkList.svelte

@@ -0,0 +1,85 @@
+<!--
+  @file IncremarkList.svelte - 列表组件
+  @description 渲染 Markdown 列表（有序列表和无序列表），支持任务列表
+-->
+
+<script lang="ts">
+  import type { List, ListItem, PhrasingContent } from 'mdast'
+  import IncremarkInline from './IncremarkInline.svelte'
+
+  /**
+   * 组件 Props
+   */
+  interface Props {
+    /** 列表节点 */
+    node: List
+  }
+
+  let { node }: Props = $props()
+
+  /**
+   * 根据 ordered 属性计算标签名
+   */
+  const tag = $derived(node.ordered ? 'ol' : 'ul')
+
+  /**
+   * 判断是否是任务列表
+   */
+  const isTaskList = $derived(
+    node.children.some(item => item.checked !== null && item.checked !== undefined)
+  )
+
+  /**
+   * 获取列表项内容
+   * 
+   * @param item - 列表项节点
+   * @returns 行内内容数组
+   */
+  function getItemContent(item: ListItem): PhrasingContent[] {
+    const firstChild = item.children[0]
+    if (firstChild?.type === 'paragraph') {
+      return firstChild.children as PhrasingContent[]
+    }
+    return []
+  }
+
+  /**
+   * 判断列表项是否是任务项
+   * 
+   * @param item - 列表项节点
+   * @returns 是否是任务项
+   */
+  function isTaskItem(item: ListItem): boolean {
+    return item.checked !== null && item.checked !== undefined
+  }
+</script>
+
+<svelte:element 
+  this={tag} 
+  class="incremark-list"
+  class:task-list={isTaskList}
+>
+  {#each node.children as item, index (index)}
+    <li 
+      class="incremark-list-item"
+      class:task-item={isTaskItem(item)}
+    >
+      {#if isTaskItem(item)}
+        <label class="task-label">
+          <input 
+            type="checkbox" 
+            checked={item.checked} 
+            disabled 
+            class="checkbox"
+          />
+          <span class="task-content">
+            <IncremarkInline nodes={getItemContent(item)} />
+          </span>
+        </label>
+      {:else}
+        <IncremarkInline nodes={getItemContent(item)} />
+      {/if}
+    </li>
+  {/each}
+</svelte:element>
+

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

@@ -0,0 +1,12 @@
+import type { List } from 'mdast';
+/**
+ * 组件 Props
+ */
+interface Props {
+    /** 列表节点 */
+    node: List;
+}
+declare const IncremarkList: import("svelte").Component<Props, {}, "">;
+type IncremarkList = ReturnType<typeof IncremarkList>;
+export default IncremarkList;
+//# sourceMappingURL=IncremarkList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IncremarkList.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkList.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAA6B,MAAM,OAAO,CAAA;AAI1D;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,IAAI,CAAA;CACX;AAmEH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/IncremarkMath.svelte

@@ -0,0 +1,137 @@
+<!--
+  @file IncremarkMath.svelte - 数学公式组件
+  @description 渲染 Markdown 数学公式（行内和块级），使用 KaTeX 渲染
+-->
+
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+
+  /**
+   * Math 节点类型（来自 mdast-util-math）
+   */
+  interface MathNode {
+    type: 'math' | 'inlineMath'
+    value: string
+    data?: {
+      hName?: string
+      hProperties?: Record<string, any>
+    }
+  }
+
+  /**
+   * 组件 Props
+   */
+  interface Props {
+    /** 数学公式节点 */
+    node: MathNode
+    /** 渲染延迟（毫秒），用于流式输入时防抖 */
+    renderDelay?: number
+  }
+
+  let {
+    node,
+    renderDelay = 300
+  }: Props = $props()
+
+  // 状态
+  let renderedHtml = $state('')
+  let renderError = $state('')
+  let isLoading = $state(false)
+  let katexRef: any = null
+  let renderTimer: ReturnType<typeof setTimeout> | null = null
+
+  /**
+   * 计算属性
+   */
+  const isInline = $derived(node.type === 'inlineMath')
+  const formula = $derived(node.value)
+
+  /**
+   * 带防抖动的渲染
+   */
+  function scheduleRender() {
+    if (!formula) {
+      renderedHtml = ''
+      return
+    }
+
+    // 清除之前的定时器
+    if (renderTimer) {
+      clearTimeout(renderTimer)
+    }
+
+    isLoading = true
+
+    // 防抖动延迟渲染
+    renderTimer = setTimeout(() => {
+      doRender()
+    }, renderDelay)
+  }
+
+  /**
+   * 执行渲染
+   */
+  async function doRender() {
+    if (!formula) return
+
+    try {
+      // 动态导入 KaTeX
+      if (!katexRef) {
+        // @ts-ignore - katex 是可选依赖
+        const katexModule = await import('katex')
+        katexRef = katexModule.default
+      }
+
+      const katex = katexRef
+      renderedHtml = katex.renderToString(formula, {
+        displayMode: !isInline,
+        throwOnError: false,
+        strict: false
+      })
+      renderError = ''
+    } catch (e: any) {
+      // 静默失败，可能是公式不完整
+      renderError = ''
+      renderedHtml = ''
+    } finally {
+      isLoading = false
+    }
+  }
+
+  // 监听公式变化，重新渲染
+  $effect(() => {
+    scheduleRender()
+  })
+
+  // 清理
+  onDestroy(() => {
+    if (renderTimer) {
+      clearTimeout(renderTimer)
+    }
+  })
+</script>
+
+<!-- 行内公式 -->
+{#if isInline}
+  <span class="incremark-math-inline">
+    <!-- 渲染成功 -->
+    {#if renderedHtml && !isLoading}
+      {@html renderedHtml}
+    <!-- 加载中或未渲染：显示源码 -->
+    {:else}
+      <code class="math-source">{formula}</code>
+    {/if}
+  </span>
+{:else}
+  <!-- 块级公式 -->
+  <div class="incremark-math-block">
+    <!-- 渲染成功 -->
+    {#if renderedHtml && !isLoading}
+      <div class="math-rendered">{@html renderedHtml}</div>
+    <!-- 加载中或未渲染：显示源码 -->
+    {:else}
+      <pre class="math-source-block"><code>{formula}</code></pre>
+    {/if}
+  </div>
+{/if}
+

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

@@ -0,0 +1,24 @@
+/**
+ * Math 节点类型（来自 mdast-util-math）
+ */
+interface MathNode {
+    type: 'math' | 'inlineMath';
+    value: string;
+    data?: {
+        hName?: string;
+        hProperties?: Record<string, any>;
+    };
+}
+/**
+ * 组件 Props
+ */
+interface Props {
+    /** 数学公式节点 */
+    node: MathNode;
+    /** 渲染延迟（毫秒），用于流式输入时防抖 */
+    renderDelay?: number;
+}
+declare const IncremarkMath: import("svelte").Component<Props, {}, "">;
+type IncremarkMath = ReturnType<typeof IncremarkMath>;
+export default IncremarkMath;
+//# sourceMappingURL=IncremarkMath.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IncremarkMath.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkMath.svelte.ts"],"names":[],"mappings":"AAME;;GAEG;AACH,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,GAAG,YAAY,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;KAClC,CAAA;CACF;AAED;;GAEG;AACH,UAAU,KAAK;IACb,aAAa;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAsHH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/IncremarkParagraph.svelte

@@ -0,0 +1,24 @@
+<!--
+  @file IncremarkParagraph.svelte - 段落组件
+  @description 渲染 Markdown 段落节点
+-->
+
+<script lang="ts">
+  import type { Paragraph } from 'mdast'
+  import IncremarkInline from './IncremarkInline.svelte'
+
+  /**
+   * 组件 Props
+   */
+  interface Props {
+    /** 段落节点 */
+    node: Paragraph
+  }
+
+  let { node }: Props = $props()
+</script>
+
+<p class="incremark-paragraph">
+  <IncremarkInline nodes={node.children} />
+</p>
+

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

@@ -0,0 +1,12 @@
+import type { Paragraph } from 'mdast';
+/**
+ * 组件 Props
+ */
+interface Props {
+    /** 段落节点 */
+    node: Paragraph;
+}
+declare const IncremarkParagraph: import("svelte").Component<Props, {}, "">;
+type IncremarkParagraph = ReturnType<typeof IncremarkParagraph>;
+export default IncremarkParagraph;
+//# sourceMappingURL=IncremarkParagraph.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IncremarkParagraph.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkParagraph.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIpC;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,SAAS,CAAA;CAChB;AAkBH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/IncremarkRenderer.svelte

@@ -0,0 +1,70 @@
+<!--
+  @file IncremarkRenderer.svelte - 渲染器组件
+  @description 用于渲染单个 RootContent 节点
+-->
+
+<script lang="ts">
+  import type { RootContent, HTML } from 'mdast'
+  import IncremarkHeading from './IncremarkHeading.svelte'
+  import IncremarkParagraph from './IncremarkParagraph.svelte'
+  import IncremarkCode from './IncremarkCode.svelte'
+  import IncremarkList from './IncremarkList.svelte'
+  import IncremarkTable from './IncremarkTable.svelte'
+  import IncremarkBlockquote from './IncremarkBlockquote.svelte'
+  import IncremarkThematicBreak from './IncremarkThematicBreak.svelte'
+  import IncremarkMath from './IncremarkMath.svelte'
+  import IncremarkHtmlElement from './IncremarkHtmlElement.svelte'
+  import IncremarkDefault from './IncremarkDefault.svelte'
+
+  /**
+   * 组件 Props
+   */
+  interface Props {
+    /** 要渲染的节点 */
+    node: RootContent
+  }
+
+  let { node }: Props = $props()
+
+  /**
+   * 组件映射
+   */
+  const componentMap: Record<string, any> = {
+    heading: IncremarkHeading,
+    paragraph: IncremarkParagraph,
+    code: IncremarkCode,
+    list: IncremarkList,
+    table: IncremarkTable,
+    blockquote: IncremarkBlockquote,
+    thematicBreak: IncremarkThematicBreak,
+    math: IncremarkMath,
+    inlineMath: IncremarkMath,
+    htmlElement: IncremarkHtmlElement,
+  }
+
+  /**
+   * 获取组件
+   */
+  function getComponent(type: string): any {
+    return componentMap[type] || IncremarkDefault
+  }
+
+  /**
+   * 检查是否是 html 节点
+   */
+  function isHtmlNode(node: RootContent): node is HTML {
+    return node.type === 'html'
+  }
+</script>
+
+<!-- HTML 节点：渲染为代码块显示源代码 -->
+{#if isHtmlNode(node)}
+  <pre class="incremark-html-code"><code>{node.value}</code></pre>
+{:else}
+  <!-- 其他节点：使用对应组件 -->
+  {@const Component = getComponent(node.type)}
+  {#if Component}
+    <Component node={node} />
+  {/if}
+{/if}
+

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

@@ -0,0 +1,12 @@
+import type { RootContent } from 'mdast';
+/**
+ * 组件 Props
+ */
+interface Props {
+    /** 要渲染的节点 */
+    node: RootContent;
+}
+declare const IncremarkRenderer: import("svelte").Component<Props, {}, "">;
+type IncremarkRenderer = ReturnType<typeof IncremarkRenderer>;
+export default IncremarkRenderer;
+//# sourceMappingURL=IncremarkRenderer.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IncremarkRenderer.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkRenderer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAQ,MAAM,OAAO,CAAA;AAa5C;;GAEG;AACH,UAAU,KAAK;IACb,aAAa;IACb,IAAI,EAAE,WAAW,CAAA;CAClB;AAgEH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}