@incremark/svelte 0.3.2 → 0.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.en.md +2 -2
- package/README.md +9 -17
- package/dist/components/CachedCodeRenderer.svelte +49 -44
- package/dist/components/CachedCodeRenderer.svelte.d.ts.map +1 -1
- package/dist/components/IncremarkContent.svelte +23 -2
- package/dist/components/IncremarkContent.svelte.d.ts.map +1 -1
- package/dist/components/IncremarkMath.svelte +1 -1
- package/dist/components/types.d.ts +7 -0
- package/dist/components/types.d.ts.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/package.json +6 -6
- package/dist/stores/useDevTools.svelte.d.ts +0 -33
- package/dist/stores/useDevTools.svelte.d.ts.map +0 -1
- package/dist/stores/useDevTools.svelte.js +0 -54
package/README.en.md
CHANGED
|
@@ -16,7 +16,7 @@ Svelte 5 integration library for Incremark, providing high-performance streaming
|
|
|
16
16
|
## Installation
|
|
17
17
|
|
|
18
18
|
```bash
|
|
19
|
-
pnpm add @incremark/
|
|
19
|
+
pnpm add @incremark/svelte @incremark/theme
|
|
20
20
|
```
|
|
21
21
|
|
|
22
22
|
## Quick Start
|
|
@@ -26,7 +26,7 @@ pnpm add @incremark/core @incremark/svelte
|
|
|
26
26
|
```svelte
|
|
27
27
|
<script lang="ts">
|
|
28
28
|
import { IncremarkContent } from '@incremark/svelte'
|
|
29
|
-
import '@incremark/
|
|
29
|
+
import '@incremark/theme/styles.css'
|
|
30
30
|
|
|
31
31
|
let content = $state('')
|
|
32
32
|
let isFinished = $state(false)
|
package/README.md
CHANGED
|
@@ -15,37 +15,29 @@ Incremark 的 Svelte 5 集成库。
|
|
|
15
15
|
## 安装
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
|
-
pnpm add @incremark/
|
|
18
|
+
pnpm add @incremark/svelte @incremark/theme
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
## 快速开始
|
|
22
22
|
|
|
23
|
-
**1. 引入样式**
|
|
24
|
-
|
|
25
|
-
```ts
|
|
26
|
-
import '@incremark/svelte/style.css'
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
**2. 在组件中使用**
|
|
30
|
-
|
|
31
23
|
```svelte
|
|
32
24
|
<script>
|
|
33
|
-
import {
|
|
34
|
-
import '@incremark/
|
|
25
|
+
import { IncremarkContent } from '@incremark/svelte'
|
|
26
|
+
import '@incremark/theme/styles.css'
|
|
35
27
|
|
|
36
|
-
|
|
28
|
+
let content = $state('')
|
|
29
|
+
let isFinished = $state(false)
|
|
37
30
|
|
|
38
31
|
async function handleStream(stream) {
|
|
39
|
-
reset()
|
|
40
32
|
for await (const chunk of stream) {
|
|
41
|
-
|
|
33
|
+
content += chunk
|
|
42
34
|
}
|
|
43
|
-
|
|
35
|
+
isFinished = true
|
|
44
36
|
}
|
|
45
37
|
</script>
|
|
46
38
|
|
|
47
|
-
<button
|
|
48
|
-
<
|
|
39
|
+
<button onclick={handleStream}>开始</button>
|
|
40
|
+
<IncremarkContent {content} {isFinished} />
|
|
49
41
|
```
|
|
50
42
|
|
|
51
43
|
## API
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
- 在脚本顶层创建和消费 stream(类似 Vue setup)
|
|
6
6
|
- 使用 $state 存储 tokens
|
|
7
7
|
- 使用 $effect 监听 code 变化
|
|
8
|
+
- SSR 兼容:Web Streams API 只在浏览器中使用
|
|
8
9
|
-->
|
|
9
10
|
<script lang="ts">
|
|
10
11
|
import type { ThemedToken } from '@shikijs/core'
|
|
@@ -22,6 +23,9 @@
|
|
|
22
23
|
|
|
23
24
|
let { code, lang, theme, highlighter }: Props = $props()
|
|
24
25
|
|
|
26
|
+
// SSR 检测:Web Streams API 只在浏览器中可用
|
|
27
|
+
const isBrowser = typeof window !== 'undefined'
|
|
28
|
+
|
|
25
29
|
// Stream 错误状态
|
|
26
30
|
let hasStreamError = $state(false)
|
|
27
31
|
|
|
@@ -31,57 +35,58 @@
|
|
|
31
35
|
// 已处理的 code 长度
|
|
32
36
|
let index = $state(0)
|
|
33
37
|
|
|
34
|
-
//
|
|
38
|
+
// Stream 相关状态(只在浏览器中初始化)
|
|
35
39
|
let controller: ReadableStreamController<string> | null = null
|
|
36
|
-
const textStream = new ReadableStream<string>({
|
|
37
|
-
start(_controller) {
|
|
38
|
-
controller = _controller
|
|
39
|
-
}
|
|
40
|
-
})
|
|
41
|
-
|
|
42
|
-
// 创建 token stream
|
|
43
|
-
// 使用 untrack 获取初始值,因为 stream 创建后不支持动态更改 lang/theme/highlighter
|
|
44
40
|
let tokenStream: ReadableStream<any> | null = null
|
|
45
41
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
42
|
+
// 只在浏览器环境中创建 stream
|
|
43
|
+
if (isBrowser) {
|
|
44
|
+
const textStream = new ReadableStream<string>({
|
|
45
|
+
start(_controller) {
|
|
46
|
+
controller = _controller
|
|
47
|
+
}
|
|
48
|
+
})
|
|
49
|
+
|
|
50
|
+
try {
|
|
51
|
+
const initialHighlighter = untrack(() => highlighter)
|
|
52
|
+
const initialLang = untrack(() => lang)
|
|
53
|
+
const initialTheme = untrack(() => theme)
|
|
54
|
+
|
|
55
|
+
tokenStream = textStream.pipeThrough(
|
|
56
|
+
new CodeToTokenTransformStream({
|
|
57
|
+
highlighter: initialHighlighter,
|
|
58
|
+
lang: initialLang,
|
|
59
|
+
theme: initialTheme,
|
|
60
|
+
allowRecalls: true
|
|
61
|
+
})
|
|
62
|
+
)
|
|
63
|
+
} catch (error) {
|
|
64
|
+
console.error('Failed to create token stream:', error)
|
|
65
|
+
hasStreamError = true
|
|
66
|
+
}
|
|
63
67
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
68
|
+
// 消费 token stream
|
|
69
|
+
if (tokenStream) {
|
|
70
|
+
tokenStream.pipeTo(
|
|
71
|
+
new WritableStream({
|
|
72
|
+
write(token: any) {
|
|
73
|
+
if ('recall' in token) {
|
|
74
|
+
tokens.splice(tokens.length - token.recall, token.recall)
|
|
75
|
+
} else {
|
|
76
|
+
tokens.push(token)
|
|
77
|
+
}
|
|
73
78
|
}
|
|
74
|
-
}
|
|
79
|
+
})
|
|
80
|
+
).catch((error) => {
|
|
81
|
+
console.error('Stream error:', error)
|
|
82
|
+
hasStreamError = true
|
|
75
83
|
})
|
|
76
|
-
|
|
77
|
-
console.error('Stream error:', error)
|
|
78
|
-
hasStreamError = true
|
|
79
|
-
})
|
|
84
|
+
}
|
|
80
85
|
}
|
|
81
86
|
|
|
82
87
|
// 监听 code 变化,增量推送到流中(与 Vue 的 watchEffect 对齐)
|
|
83
88
|
$effect(() => {
|
|
84
|
-
if (hasStreamError) return
|
|
89
|
+
if (!isBrowser || hasStreamError || !controller) return
|
|
85
90
|
|
|
86
91
|
// 读取 code 的值来建立依赖
|
|
87
92
|
const currentCode = code
|
|
@@ -92,7 +97,7 @@
|
|
|
92
97
|
// 只处理增量更新:传入新增的部分
|
|
93
98
|
if (currentCode.length > currentIndex) {
|
|
94
99
|
const incremental = currentCode.slice(currentIndex)
|
|
95
|
-
controller
|
|
100
|
+
controller.enqueue(incremental as any)
|
|
96
101
|
index = currentCode.length
|
|
97
102
|
}
|
|
98
103
|
})
|
|
@@ -103,8 +108,8 @@
|
|
|
103
108
|
})
|
|
104
109
|
</script>
|
|
105
110
|
|
|
106
|
-
{#if hasStreamError}
|
|
107
|
-
<!--
|
|
111
|
+
{#if hasStreamError || !isBrowser || tokens.length === 0}
|
|
112
|
+
<!-- SSR 或错误时渲染原始代码 -->
|
|
108
113
|
<pre class="shiki incremark-code-stream"><code>{code}</code></pre>
|
|
109
114
|
{:else}
|
|
110
115
|
<!-- 正常渲染高亮代码(与 Vue/React 的渲染结构对齐) -->
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CachedCodeRenderer.svelte.d.ts","sourceRoot":"","sources":["../../src/components/CachedCodeRenderer.svelte.ts"],"names":[],"mappings":"AAUE,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,GAAG,CAAA;CACjB;
|
|
1
|
+
{"version":3,"file":"CachedCodeRenderer.svelte.d.ts","sourceRoot":"","sources":["../../src/components/CachedCodeRenderer.svelte.ts"],"names":[],"mappings":"AAUE,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,GAAG,CAAA;CACjB;AAmHH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
|
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
import { useIncremark } from '../stores/useIncremark.svelte.ts'
|
|
8
8
|
import type { IncremarkContentProps } from './types'
|
|
9
9
|
import Incremark from './Incremark.svelte'
|
|
10
|
-
import { untrack } from 'svelte'
|
|
10
|
+
import { untrack, onDestroy } from 'svelte'
|
|
11
|
+
import { generateParserId } from '@incremark/shared'
|
|
11
12
|
|
|
12
13
|
let {
|
|
13
14
|
stream,
|
|
@@ -19,7 +20,10 @@
|
|
|
19
20
|
isFinished = false,
|
|
20
21
|
incremarkOptions,
|
|
21
22
|
pendingClass = 'incremark-pending',
|
|
22
|
-
showBlockStatus = false
|
|
23
|
+
showBlockStatus = false,
|
|
24
|
+
devtools,
|
|
25
|
+
devtoolsId,
|
|
26
|
+
devtoolsLabel
|
|
23
27
|
}: IncremarkContentProps = $props()
|
|
24
28
|
|
|
25
29
|
// 创建 incremark 实例(只创建一次)
|
|
@@ -32,6 +36,23 @@
|
|
|
32
36
|
typewriter: incremarkOptions?.typewriter
|
|
33
37
|
}))
|
|
34
38
|
|
|
39
|
+
// DevTools 集成 - 生成稳定的默认 ID(只生成一次)
|
|
40
|
+
const defaultParserId = generateParserId()
|
|
41
|
+
|
|
42
|
+
$effect(() => {
|
|
43
|
+
if (devtools) {
|
|
44
|
+
const id = devtoolsId || defaultParserId
|
|
45
|
+
devtools.register(incremark.parser, {
|
|
46
|
+
id,
|
|
47
|
+
label: devtoolsLabel || id
|
|
48
|
+
})
|
|
49
|
+
|
|
50
|
+
return () => {
|
|
51
|
+
devtools.unregister(id)
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
|
|
35
56
|
// 计算 parser 配置的稳定 key(用于检测变化)
|
|
36
57
|
// astBuilder 用名称标识,因为它是类不能 JSON.stringify
|
|
37
58
|
function getConfigKey() {
|
|
@@ -1 +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;
|
|
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;AA8JpD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
import type { Component } from 'svelte';
|
|
6
6
|
import type { ParsedBlock } from '@incremark/core';
|
|
7
7
|
import type { UseIncremarkOptions } from '../stores/useIncremark.svelte.ts';
|
|
8
|
+
import type { IncremarkDevTools } from '@incremark/devtools';
|
|
8
9
|
/**
|
|
9
10
|
* 组件映射类型
|
|
10
11
|
* 使用 any 以支持不同类型的组件
|
|
@@ -40,5 +41,11 @@ export interface IncremarkContentProps {
|
|
|
40
41
|
incremarkOptions?: UseIncremarkOptions;
|
|
41
42
|
pendingClass?: string;
|
|
42
43
|
showBlockStatus?: boolean;
|
|
44
|
+
/** DevTools 实例,传入后组件会自动注册 parser */
|
|
45
|
+
devtools?: IncremarkDevTools;
|
|
46
|
+
/** DevTools 中显示的 parser ID,默认自动生成 */
|
|
47
|
+
devtoolsId?: string;
|
|
48
|
+
/** DevTools 中显示的 parser 标签,默认使用 ID */
|
|
49
|
+
devtoolsLabel?: string;
|
|
43
50
|
}
|
|
44
51
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +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;
|
|
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;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
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* @description Svelte 5 集成库的导出入口
|
|
4
4
|
*/
|
|
5
5
|
export { useIncremark, type UseIncremarkOptions, type UseIncremarkReturn, type TypewriterOptions, type TypewriterControls } from './stores/useIncremark.svelte.ts';
|
|
6
|
-
export { useDevTools, type UseDevToolsOptions } from './stores/useDevTools.svelte.ts';
|
|
7
6
|
export { useBlockTransformer, type UseBlockTransformerOptions, type UseBlockTransformerReturn } from './stores/useBlockTransformer.svelte.ts';
|
|
8
7
|
export { useLocale, type UseLocaleReturn } from './stores/useLocale.svelte.ts';
|
|
9
8
|
export { setDefinitionsContext, getDefinitionsContext, type DefinitionsContextValue } from './context/definitionsContext.svelte.ts';
|
|
@@ -12,6 +11,7 @@ export { default as AutoScrollContainer } from './components/AutoScrollContainer
|
|
|
12
11
|
export { default as ThemeProvider } from './ThemeProvider.svelte';
|
|
13
12
|
export { default as ConfigProvider } from './components/ConfigProvider.svelte';
|
|
14
13
|
export type { ParsedBlock, IncrementalUpdate, ParserOptions, BlockStatus, Root, RootContent, SourceBlock, DisplayBlock, TransformerPlugin, TransformerOptions, TransformerState, AnimationEffect } from '@incremark/core';
|
|
14
|
+
export type { Root as MdastRoot, Parent, Heading, Paragraph, Code, Blockquote, List, ListItem, Table, TableCell, ThematicBreak, Text, PhrasingContent, InlineCode, Link, LinkReference, Image, ImageReference, HTML, Definition, FootnoteDefinition } from 'mdast';
|
|
15
15
|
export { BlockTransformer, createBlockTransformer, countChars, sliceAst, cloneNode, codeBlockPlugin, mermaidPlugin, imagePlugin, mathPlugin, thematicBreakPlugin, defaultPlugins, allPlugins, createPlugin } from '@incremark/core';
|
|
16
16
|
export { type DesignTokens, defaultTheme, darkTheme, generateCSSVars, mergeTheme, applyTheme } from '@incremark/theme';
|
|
17
17
|
import { en as enShared, zhCN as zhCNShared } from '@incremark/shared';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +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,
|
|
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,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
CHANGED
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
*/
|
|
5
5
|
// Stores/Utilities
|
|
6
6
|
export { useIncremark } from './stores/useIncremark.svelte.ts';
|
|
7
|
-
export { useDevTools } from './stores/useDevTools.svelte.ts';
|
|
8
7
|
export { useBlockTransformer } from './stores/useBlockTransformer.svelte.ts';
|
|
9
8
|
export { useLocale } from './stores/useLocale.svelte.ts';
|
|
10
9
|
// Context
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@incremark/svelte",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.4",
|
|
4
4
|
"description": "High-performance streaming markdown renderer for Svelte 5 ecosystem.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"svelte": "./dist/index.js",
|
|
@@ -26,11 +26,11 @@
|
|
|
26
26
|
"@antfu/utils": "^9.3.0",
|
|
27
27
|
"shiki": "^3.20.0",
|
|
28
28
|
"shiki-stream": "^0.1.4",
|
|
29
|
-
"@incremark/
|
|
30
|
-
"@incremark/
|
|
31
|
-
"@incremark/
|
|
32
|
-
"@incremark/
|
|
33
|
-
"@incremark/
|
|
29
|
+
"@incremark/devtools": "0.3.4",
|
|
30
|
+
"@incremark/shared": "0.3.4",
|
|
31
|
+
"@incremark/theme": "0.3.4",
|
|
32
|
+
"@incremark/core": "0.3.4",
|
|
33
|
+
"@incremark/icons": "0.3.4"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"svelte": "^5.0.0",
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file useDevTools Store - DevTools 集成
|
|
3
|
-
* @description Svelte 5 DevTools 一行接入
|
|
4
|
-
*/
|
|
5
|
-
import { type DevToolsOptions } from '@incremark/devtools';
|
|
6
|
-
import type { UseIncremarkReturn } from './useIncremark.svelte.ts';
|
|
7
|
-
/**
|
|
8
|
-
* useDevTools 选项
|
|
9
|
-
*/
|
|
10
|
-
export interface UseDevToolsOptions extends DevToolsOptions {
|
|
11
|
-
}
|
|
12
|
-
/**
|
|
13
|
-
* Svelte 5 DevTools 一行接入
|
|
14
|
-
*
|
|
15
|
-
* @description
|
|
16
|
-
* 在组件中调用此函数以启用 DevTools
|
|
17
|
-
*
|
|
18
|
-
* @param incremark - useIncremark 返回的对象
|
|
19
|
-
* @param options - DevTools 选项
|
|
20
|
-
* @returns DevTools 实例
|
|
21
|
-
*
|
|
22
|
-
* @example
|
|
23
|
-
* ```svelte
|
|
24
|
-
* <script>
|
|
25
|
-
* import { useIncremark, useDevTools } from '@incremark/svelte'
|
|
26
|
-
*
|
|
27
|
-
* const incremark = useIncremark()
|
|
28
|
-
* useDevTools(incremark) // 就这一行!
|
|
29
|
-
* </script>
|
|
30
|
-
* ```
|
|
31
|
-
*/
|
|
32
|
-
export declare function useDevTools(incremark: UseIncremarkReturn, options?: UseDevToolsOptions): import("@incremark/devtools").IncremarkDevTools;
|
|
33
|
-
//# sourceMappingURL=useDevTools.svelte.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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"}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file useDevTools Store - DevTools 集成
|
|
3
|
-
* @description Svelte 5 DevTools 一行接入
|
|
4
|
-
*/
|
|
5
|
-
import { createDevTools } from '@incremark/devtools';
|
|
6
|
-
/**
|
|
7
|
-
* Svelte 5 DevTools 一行接入
|
|
8
|
-
*
|
|
9
|
-
* @description
|
|
10
|
-
* 在组件中调用此函数以启用 DevTools
|
|
11
|
-
*
|
|
12
|
-
* @param incremark - useIncremark 返回的对象
|
|
13
|
-
* @param options - DevTools 选项
|
|
14
|
-
* @returns DevTools 实例
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* ```svelte
|
|
18
|
-
* <script>
|
|
19
|
-
* import { useIncremark, useDevTools } from '@incremark/svelte'
|
|
20
|
-
*
|
|
21
|
-
* const incremark = useIncremark()
|
|
22
|
-
* useDevTools(incremark) // 就这一行!
|
|
23
|
-
* </script>
|
|
24
|
-
* ```
|
|
25
|
-
*/
|
|
26
|
-
export function useDevTools(incremark, options = {}) {
|
|
27
|
-
const devtools = createDevTools(options);
|
|
28
|
-
// 设置 parser 的 onChange 回调
|
|
29
|
-
incremark.parser.setOnChange((state) => {
|
|
30
|
-
const blocks = [
|
|
31
|
-
...state.completedBlocks,
|
|
32
|
-
...state.pendingBlocks
|
|
33
|
-
];
|
|
34
|
-
devtools.update({
|
|
35
|
-
blocks,
|
|
36
|
-
completedBlocks: state.completedBlocks,
|
|
37
|
-
pendingBlocks: state.pendingBlocks,
|
|
38
|
-
markdown: state.markdown,
|
|
39
|
-
ast: state.ast,
|
|
40
|
-
isLoading: state.pendingBlocks.length > 0
|
|
41
|
-
});
|
|
42
|
-
});
|
|
43
|
-
// 使用 $effect 处理挂载和卸载
|
|
44
|
-
$effect(() => {
|
|
45
|
-
devtools.mount();
|
|
46
|
-
// 返回清理函数
|
|
47
|
-
return () => {
|
|
48
|
-
devtools.unmount();
|
|
49
|
-
// 清理回调
|
|
50
|
-
incremark.parser.setOnChange(undefined);
|
|
51
|
-
};
|
|
52
|
-
});
|
|
53
|
-
return devtools;
|
|
54
|
-
}
|