@incremark/svelte 0.3.3 → 0.3.4

package/README.en.md

@@ -16,7 +16,7 @@ Svelte 5 integration library for Incremark, providing high-performance streaming
 ## Installation
 
 ```bash
-pnpm add @incremark/core @incremark/svelte
+pnpm add @incremark/svelte @incremark/theme
 ```
 
 ## Quick Start
@@ -26,7 +26,7 @@ pnpm add @incremark/core @incremark/svelte
 ```svelte
 <script lang="ts">
   import { IncremarkContent } from '@incremark/svelte'
-  import '@incremark/svelte/style.css'
+  import '@incremark/theme/styles.css'
 
   let content = $state('')
   let isFinished = $state(false)

package/README.md

@@ -15,37 +15,29 @@ Incremark 的 Svelte 5 集成库。
 ## 安装
 
 ```bash
-pnpm add @incremark/core @incremark/svelte
+pnpm add @incremark/svelte @incremark/theme
 ```
 
 ## 快速开始
 
-**1. 引入样式**
-
-```ts
-import '@incremark/svelte/style.css'
-```
-
-**2. 在组件中使用**
-
 ```svelte
 <script>
-  import { useIncremark, Incremark } from '@incremark/svelte'
-  import '@incremark/svelte/style.css'
+  import { IncremarkContent } from '@incremark/svelte'
+  import '@incremark/theme/styles.css'
 
-  const { blocks, append, finalize, reset } = useIncremark({ gfm: true })
+  let content = $state('')
+  let isFinished = $state(false)
 
   async function handleStream(stream) {
-    reset()
     for await (const chunk of stream) {
-      append(chunk)
+      content += chunk
     }
-    finalize()
+    isFinished = true
   }
 </script>
 
-<button on:click={handleStream}>开始</button>
-<Incremark {blocks} />
+<button onclick={handleStream}>开始</button>
+<IncremarkContent {content} {isFinished} />
 ```
 
 ## API

package/dist/components/IncremarkContent.svelte

@@ -7,7 +7,8 @@
   import { useIncremark } from '../stores/useIncremark.svelte.ts'
   import type { IncremarkContentProps } from './types'
   import Incremark from './Incremark.svelte'
-  import { untrack } from 'svelte'
+  import { untrack, onDestroy } from 'svelte'
+  import { generateParserId } from '@incremark/shared'
 
   let {
     stream,
@@ -19,7 +20,10 @@
     isFinished = false,
     incremarkOptions,
     pendingClass = 'incremark-pending',
-    showBlockStatus = false
+    showBlockStatus = false,
+    devtools,
+    devtoolsId,
+    devtoolsLabel
   }: IncremarkContentProps = $props()
 
   // 创建 incremark 实例（只创建一次）
@@ -32,6 +36,23 @@
     typewriter: incremarkOptions?.typewriter
   }))
 
+  // DevTools 集成 - 生成稳定的默认 ID（只生成一次）
+  const defaultParserId = generateParserId()
+
+  $effect(() => {
+    if (devtools) {
+      const id = devtoolsId || defaultParserId
+      devtools.register(incremark.parser, {
+        id,
+        label: devtoolsLabel || id
+      })
+
+      return () => {
+        devtools.unregister(id)
+      }
+    }
+  })
+
   // 计算 parser 配置的稳定 key（用于检测变化）
   // astBuilder 用名称标识，因为它是类不能 JSON.stringify
   function getConfigKey() {

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":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAwIpD,QAAA,MAAM,gBAAgB,2DAAwC,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;AA8JpD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/types.d.ts

@@ -5,6 +5,7 @@
 import type { Component } from 'svelte';
 import type { ParsedBlock } from '@incremark/core';
 import type { UseIncremarkOptions } from '../stores/useIncremark.svelte.ts';
+import type { IncremarkDevTools } from '@incremark/devtools';
 /**
  * 组件映射类型
  * 使用 any 以支持不同类型的组件
@@ -40,5 +41,11 @@ export interface IncremarkContentProps {
     incremarkOptions?: UseIncremarkOptions;
     pendingClass?: string;
     showBlockStatus?: boolean;
+    /** DevTools 实例，传入后组件会自动注册 parser */
+    devtools?: IncremarkDevTools;
+    /** DevTools 中显示的 parser ID，默认自动生成 */
+    devtoolsId?: string;
+    /** DevTools 中显示的 parser 标签，默认使用 ID */
+    devtoolsLabel?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAE3E;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;AAEvD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAAE,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAEvE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,MAAM,cAAc,CAAC,MAAM,CAAC,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;IACjD,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;IACjD,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IAClD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB,CAAC,EAAE,mBAAmB,CAAA;IACtC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAC3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAE5D;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;AAEvD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAAE,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAEvE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,MAAM,cAAc,CAAC,MAAM,CAAC,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;IACjD,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;IACjD,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IAClD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB,CAAC,EAAE,mBAAmB,CAAA;IACtC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB"}

package/dist/index.d.ts

@@ -3,7 +3,6 @@
  * @description Svelte 5 集成库的导出入口
  */
 export { useIncremark, type UseIncremarkOptions, type UseIncremarkReturn, type TypewriterOptions, type TypewriterControls } from './stores/useIncremark.svelte.ts';
-export { useDevTools, type UseDevToolsOptions } from './stores/useDevTools.svelte.ts';
 export { useBlockTransformer, type UseBlockTransformerOptions, type UseBlockTransformerReturn } from './stores/useBlockTransformer.svelte.ts';
 export { useLocale, type UseLocaleReturn } from './stores/useLocale.svelte.ts';
 export { setDefinitionsContext, getDefinitionsContext, type DefinitionsContextValue } from './context/definitionsContext.svelte.ts';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AAClK,OAAO,EAAE,WAAW,EAAE,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACrF,OAAO,EACL,mBAAmB,EACnB,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC/B,MAAM,wCAAwC,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAG9E,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wCAAwC,CAAA;AAGnI,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,sBAAsB,EACtB,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACrB,MAAM,cAAc,CAAA;AAGrB,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yCAAyC,CAAA;AACxF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAG9E,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,IAAI,EACJ,WAAW,EAEX,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EAChB,MAAM,iBAAiB,CAAA;AAGxB,YAAY,EACV,IAAI,IAAI,SAAS,EACjB,MAAM,EAEN,OAAO,EACP,SAAS,EACT,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,aAAa,EAEb,IAAI,EACJ,eAAe,EACf,UAAU,EACV,IAAI,EACJ,aAAa,EACb,KAAK,EACL,cAAc,EAEd,IAAI,EAEJ,UAAU,EACV,kBAAkB,EACnB,MAAM,OAAO,CAAA;AAGd,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EACb,WAAW,EACX,UAAU,EACV,mBAAmB,EACnB,cAAc,EACd,UAAU,EACV,YAAY,EACb,MAAM,iBAAiB,CAAA;AAGxB,OAAO,EACL,KAAK,YAAY,EACjB,YAAY,EACZ,SAAS,EACT,eAAe,EACf,UAAU,EACV,UAAU,EACX,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,EAAE,IAAI,QAAQ,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAA;AACtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,QAAQ,IAAI,EAAE,EAAE,UAAU,IAAI,IAAI,EAAE,CAAA;AAC7C,YAAY,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AAClK,OAAO,EACL,mBAAmB,EACnB,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC/B,MAAM,wCAAwC,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAG9E,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wCAAwC,CAAA;AAGnI,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,sBAAsB,EACtB,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACrB,MAAM,cAAc,CAAA;AAGrB,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yCAAyC,CAAA;AACxF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAG9E,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,IAAI,EACJ,WAAW,EAEX,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EAChB,MAAM,iBAAiB,CAAA;AAGxB,YAAY,EACV,IAAI,IAAI,SAAS,EACjB,MAAM,EAEN,OAAO,EACP,SAAS,EACT,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,aAAa,EAEb,IAAI,EACJ,eAAe,EACf,UAAU,EACV,IAAI,EACJ,aAAa,EACb,KAAK,EACL,cAAc,EAEd,IAAI,EAEJ,UAAU,EACV,kBAAkB,EACnB,MAAM,OAAO,CAAA;AAGd,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EACb,WAAW,EACX,UAAU,EACV,mBAAmB,EACnB,cAAc,EACd,UAAU,EACV,YAAY,EACb,MAAM,iBAAiB,CAAA;AAGxB,OAAO,EACL,KAAK,YAAY,EACjB,YAAY,EACZ,SAAS,EACT,eAAe,EACf,UAAU,EACV,UAAU,EACX,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,EAAE,IAAI,QAAQ,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAA;AACtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,QAAQ,IAAI,EAAE,EAAE,UAAU,IAAI,IAAI,EAAE,CAAA;AAC7C,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/dist/index.js

@@ -4,7 +4,6 @@
  */
 // Stores/Utilities
 export { useIncremark } from './stores/useIncremark.svelte.ts';
-export { useDevTools } from './stores/useDevTools.svelte.ts';
 export { useBlockTransformer } from './stores/useBlockTransformer.svelte.ts';
 export { useLocale } from './stores/useLocale.svelte.ts';
 // Context

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incremark/svelte",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "High-performance streaming markdown renderer for Svelte 5 ecosystem.",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -26,11 +26,11 @@
     "@antfu/utils": "^9.3.0",
     "shiki": "^3.20.0",
     "shiki-stream": "^0.1.4",
-    "@incremark/core": "0.3.3",
-    "@incremark/devtools": "0.3.3",
-    "@incremark/icons": "0.3.3",
-    "@incremark/shared": "0.3.3",
-    "@incremark/theme": "0.3.3"
+    "@incremark/devtools": "0.3.4",
+    "@incremark/shared": "0.3.4",
+    "@incremark/theme": "0.3.4",
+    "@incremark/core": "0.3.4",
+    "@incremark/icons": "0.3.4"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",

package/dist/stores/useDevTools.svelte.d.ts

@@ -1,33 +0,0 @@
-/**
- * @file useDevTools Store - DevTools 集成
- * @description Svelte 5 DevTools 一行接入
- */
-import { type DevToolsOptions } from '@incremark/devtools';
-import type { UseIncremarkReturn } from './useIncremark.svelte.ts';
-/**
- * useDevTools 选项
- */
-export interface UseDevToolsOptions extends DevToolsOptions {
-}
-/**
- * Svelte 5 DevTools 一行接入
- *
- * @description
- * 在组件中调用此函数以启用 DevTools
- *
- * @param incremark - useIncremark 返回的对象
- * @param options - DevTools 选项
- * @returns DevTools 实例
- *
- * @example
- * ```svelte
- * <script>
- *   import { useIncremark, useDevTools } from '@incremark/svelte'
- *
- *   const incremark = useIncremark()
- *   useDevTools(incremark)  // 就这一行！
- * </script>
- * ```
- */
-export declare function useDevTools(incremark: UseIncremarkReturn, options?: UseDevToolsOptions): import("@incremark/devtools").IncremarkDevTools;
-//# sourceMappingURL=useDevTools.svelte.d.ts.map

package/dist/stores/useDevTools.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDevTools.svelte.d.ts","sourceRoot":"","sources":["../../src/stores/useDevTools.svelte.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAC1E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAElE;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,eAAe;CAAG;AAE9D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CACzB,SAAS,EAAE,kBAAkB,EAC7B,OAAO,GAAE,kBAAuB,mDAkCjC"}

package/dist/stores/useDevTools.svelte.js

@@ -1,54 +0,0 @@
-/**
- * @file useDevTools Store - DevTools 集成
- * @description Svelte 5 DevTools 一行接入
- */
-import { createDevTools } from '@incremark/devtools';
-/**
- * Svelte 5 DevTools 一行接入
- *
- * @description
- * 在组件中调用此函数以启用 DevTools
- *
- * @param incremark - useIncremark 返回的对象
- * @param options - DevTools 选项
- * @returns DevTools 实例
- *
- * @example
- * ```svelte
- * <script>
- *   import { useIncremark, useDevTools } from '@incremark/svelte'
- *
- *   const incremark = useIncremark()
- *   useDevTools(incremark)  // 就这一行！
- * </script>
- * ```
- */
-export function useDevTools(incremark, options = {}) {
-    const devtools = createDevTools(options);
-    // 设置 parser 的 onChange 回调
-    incremark.parser.setOnChange((state) => {
-        const blocks = [
-            ...state.completedBlocks,
-            ...state.pendingBlocks
-        ];
-        devtools.update({
-            blocks,
-            completedBlocks: state.completedBlocks,
-            pendingBlocks: state.pendingBlocks,
-            markdown: state.markdown,
-            ast: state.ast,
-            isLoading: state.pendingBlocks.length > 0
-        });
-    });
-    // 使用 $effect 处理挂载和卸载
-    $effect(() => {
-        devtools.mount();
-        // 返回清理函数
-        return () => {
-            devtools.unmount();
-            // 清理回调
-            incremark.parser.setOnChange(undefined);
-        };
-    });
-    return devtools;
-}