@incremark/vue 0.3.2 → 0.3.4

package/README.en.md

@@ -17,7 +17,7 @@ Vue 3 integration library for Incremark, providing high-performance streaming Ma
 ## Installation
 
 ```bash
-pnpm add @incremark/core @incremark/vue
+pnpm add @incremark/vue @incremark/theme
 ```
 
 ## Quick Start
@@ -28,7 +28,7 @@ pnpm add @incremark/core @incremark/vue
 <script setup>
 import { ref } from 'vue'
 import { IncremarkContent } from '@incremark/vue'
-import '@incremark/vue/style.css'
+import '@incremark/theme/styles.css'
 
 const content = ref('')
 const isFinished = ref(false)

package/README.md

@@ -15,38 +15,31 @@ Incremark 的 Vue 3 集成库。
 ## 安装
 
 ```bash
-pnpm add @incremark/core @incremark/vue
+pnpm add @incremark/vue @incremark/theme
 ```
 
 ## 快速开始
 
-**1. 引入样式**
-
-```ts
-import '@incremark/vue/style.css'
-```
-
-**2. 在组件中使用**
-
 ```vue
 <script setup>
-import { useIncremark, Incremark } from '@incremark/vue'
-import '@incremark/vue/style.css'
+import { ref } from 'vue'
+import { IncremarkContent } from '@incremark/vue'
+import '@incremark/theme/styles.css'
 
-const { blocks, append, finalize, reset } = useIncremark({ gfm: true })
+const content = ref('')
+const isFinished = ref(false)
 
 async function handleStream(stream) {
-  reset()
   for await (const chunk of stream) {
-    append(chunk)
+    content.value += chunk
   }
-  finalize()
+  isFinished.value = true
 }
 </script>
 
 <template>
   <button @click="handleStream">开始</button>
-  <Incremark :blocks="blocks" />
+  <IncremarkContent :content="content" :is-finished="isFinished" />
 </template>
 ```
 

package/dist/composables/index.d.ts

@@ -2,8 +2,6 @@ export { useIncremark } from './useIncremark';
 export type { UseIncremarkOptions, TypewriterOptions, TypewriterControls } from './useIncremark';
 export { useStreamRenderer } from './useStreamRenderer';
 export type { UseStreamRendererOptions } from './useStreamRenderer';
-export { useDevTools } from './useDevTools';
-export type { UseDevToolsOptions } from './useDevTools';
 export { useBlockTransformer } from './useBlockTransformer';
 export type { UseBlockTransformerOptions, UseBlockTransformerReturn } from './useBlockTransformer';
 export { useLocale, type UseLocaleReturn } from './useLocale';

package/dist/index.d.ts

@@ -1,11 +1,12 @@
-export { useIncremark, useStreamRenderer, useDevTools, useBlockTransformer, useLocale } from './composables';
+export { useIncremark, useStreamRenderer, useBlockTransformer, useLocale } from './composables';
 export { useProvideDefinations } from './composables/useProvideDefinations';
 export { useDefinationsContext } from './composables/useDefinationsContext';
-export type { UseIncremarkOptions, TypewriterOptions, TypewriterControls, UseStreamRendererOptions, UseDevToolsOptions, UseBlockTransformerOptions, UseBlockTransformerReturn } from './composables';
+export type { UseIncremarkOptions, TypewriterOptions, TypewriterControls, UseStreamRendererOptions, UseBlockTransformerOptions, UseBlockTransformerReturn } from './composables';
 export * from './components';
 export { default as ThemeProvider } from './ThemeProvider.vue';
 export { default as ConfigProvider } from './components/ConfigProvider.vue';
 export type { ParsedBlock, IncrementalUpdate, ParserOptions, BlockStatus, Root, RootContent, SourceBlock, DisplayBlock, TransformerPlugin, TransformerOptions, TransformerState, AnimationEffect } from '@incremark/core';
+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';
 export { BlockTransformer, createBlockTransformer, countChars, sliceAst, cloneNode, codeBlockPlugin, mermaidPlugin, imagePlugin, mathPlugin, thematicBreakPlugin, defaultPlugins, allPlugins, createPlugin } from '@incremark/core';
 export { type DesignTokens, defaultTheme, darkTheme, generateCSSVars, mergeTheme, applyTheme } from '@incremark/theme';
 import { en as enShared, zhCN as zhCNShared } from '@incremark/shared';

package/dist/index.js

@@ -434,37 +434,8 @@ function useStreamRenderer(options) {
   };
 }
 
-// src/composables/useDevTools.ts
-import { onMounted, onUnmounted as onUnmounted2 } from "vue";
-import { createDevTools } from "@incremark/devtools";
-function useDevTools(incremark, options = {}) {
-  const devtools = createDevTools(options);
-  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
-    });
-  });
-  onMounted(() => {
-    devtools.mount();
-  });
-  onUnmounted2(() => {
-    devtools.unmount();
-    incremark.parser.setOnChange(void 0);
-  });
-  return devtools;
-}
-
 // src/composables/useBlockTransformer.ts
-import { ref as ref4, watch as watch3, computed as computed4, onUnmounted as onUnmounted3 } from "vue";
+import { ref as ref4, watch as watch3, computed as computed4, onUnmounted as onUnmounted2 } from "vue";
 import {
   createBlockTransformer as createBlockTransformer2
 } from "@incremark/core";
@@ -495,7 +466,7 @@ function useBlockTransformer(sourceBlocks, options = {}) {
     },
     { immediate: true, deep: true }
   );
-  onUnmounted3(() => {
+  onUnmounted2(() => {
     transformer.destroy();
   });
   return {
@@ -572,12 +543,12 @@ import {
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkMath.vue?type=script
 import { defineComponent as _defineComponent } from "vue";
-import { computed as computed6, ref as ref6, watch as watch4, shallowRef as shallowRef3, onUnmounted as onUnmounted4 } from "vue";
+import { computed as computed6, ref as ref6, watch as watch4, shallowRef as shallowRef3, onUnmounted as onUnmounted3 } from "vue";
 var IncremarkMath_default = /* @__PURE__ */ _defineComponent({
   __name: "IncremarkMath",
   props: {
     node: { type: Object, required: true },
-    renderDelay: { type: Number, required: false, default: 300 }
+    renderDelay: { type: Number, required: false, default: 0 }
   },
   setup(__props, { expose: __expose }) {
     __expose();
@@ -623,7 +594,7 @@ var IncremarkMath_default = /* @__PURE__ */ _defineComponent({
         isLoading.value = false;
       }
     }
-    onUnmounted4(() => {
+    onUnmounted3(() => {
       if (renderTimer) {
         clearTimeout(renderTimer);
       }
@@ -1333,7 +1304,7 @@ import { computed as computed10 } from "vue";
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkCodeMermaid.vue?type=script
 import { defineComponent as _defineComponent7 } from "vue";
-import { computed as computed8, ref as ref7, onUnmounted as onUnmounted5, shallowRef as shallowRef4, watch as watch5 } from "vue";
+import { computed as computed8, ref as ref7, onUnmounted as onUnmounted4, shallowRef as shallowRef4, watch as watch5 } from "vue";
 import { GravityMermaid, LucideCode, LucideEye, LucideCopy, LucideCopyCheck } from "@incremark/icons";
 import { isClipboardAvailable } from "@incremark/shared";
 
@@ -1426,7 +1397,7 @@ var IncremarkCodeMermaid_default = /* @__PURE__ */ _defineComponent7({
       }
     }
     watch5(code, scheduleRenderMermaid, { immediate: true });
-    onUnmounted5(() => {
+    onUnmounted4(() => {
       if (mermaidTimer) {
         clearTimeout(mermaidTimer);
       }
@@ -1750,7 +1721,7 @@ function useShiki(theme) {
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/CachedCodeRenderer.vue?type=script
 import { defineComponent as _defineComponent8 } from "vue";
-import { h, ref as ref8, reactive, watch as watch6, renderList, onUnmounted as onUnmounted6 } from "vue";
+import { h, ref as ref8, reactive, watch as watch6, renderList, onUnmounted as onUnmounted5 } from "vue";
 import { CodeToTokenTransformStream } from "shiki-stream";
 
 // ../../node_modules/.pnpm/@shikijs+vscode-textmate@10.0.2/node_modules/@shikijs/vscode-textmate/dist/index.js
@@ -2372,89 +2343,91 @@ var CachedCodeRenderer_default = /* @__PURE__ */ _defineComponent8({
     __expose();
     const props = __props;
     const emit = __emit;
+    const isBrowser = typeof window !== "undefined";
     const hasStreamError = ref8(false);
+    const tokens = reactive([]);
     const index = ref8(0);
     let controller = null;
-    const textStream = new ReadableStream({
-      start(_controller) {
-        controller = _controller;
+    let textStream = null;
+    let tokenStream = null;
+    if (isBrowser) {
+      textStream = new ReadableStream({
+        start(_controller) {
+          controller = _controller;
+        }
+      });
+      try {
+        tokenStream = textStream.pipeThrough(
+          new CodeToTokenTransformStream({
+            highlighter: props.highlighter,
+            lang: props.lang,
+            theme: props.theme,
+            allowRecalls: true
+          })
+        );
+      } catch (error) {
+        console.error("Failed to create token stream:", error);
+        hasStreamError.value = true;
+        emit("stream-error");
       }
-    });
+      if (tokenStream) {
+        tokenStream.pipeTo(new WritableStream({
+          write(token) {
+            if ("recall" in token)
+              tokens.splice(tokens.length - token.recall, token.recall);
+            else
+              tokens.push(token);
+          },
+          close: () => {
+            emit("stream-end");
+          }
+        })).catch((error) => {
+          console.error("Stream error:", error);
+          hasStreamError.value = true;
+          emit("stream-error");
+        });
+      }
+    }
     watch6(() => props.code, (newCode) => {
+      if (!isBrowser || !controller) return;
       if (newCode.length > index.value && !hasStreamError.value) {
         const incremental = newCode.slice(index.value);
-        controller?.enqueue(incremental);
+        controller.enqueue(incremental);
         index.value = newCode.length;
       }
     }, { immediate: true });
-    let tokenStream = null;
-    try {
-      tokenStream = textStream.pipeThrough(
-        new CodeToTokenTransformStream({
-          highlighter: props.highlighter,
-          lang: props.lang,
-          theme: props.theme,
-          allowRecalls: true
-        })
-      );
-    } catch (error) {
-      console.error("Failed to create token stream:", error);
-      hasStreamError.value = true;
-      emit("stream-error");
-    }
-    const tokens = reactive([]);
-    if (tokenStream) {
-      let tokenCount = 0;
-      tokenStream.pipeTo(new WritableStream({
-        write(token) {
-          const start = performance.now();
-          if ("recall" in token)
-            tokens.splice(tokens.length - token.recall, token.recall);
-          else
-            tokens.push(token);
-          const elapsed = performance.now() - start;
-          tokenCount++;
-          if (elapsed > 1) {
-            console.log(`[Vue CodeRenderer] Token #${tokenCount} update took ${elapsed.toFixed(2)}ms, total tokens: ${tokens.length}`);
-          }
-        },
-        close: () => {
-          console.log(`[Vue CodeRenderer] Stream completed, total tokens: ${tokenCount}`);
-          emit("stream-end");
-        }
-      })).catch((error) => {
-        console.error("Stream error:", error);
-        hasStreamError.value = true;
-        emit("stream-error");
-      });
-    }
     const render24 = () => {
-      if (hasStreamError.value) {
-        return h("pre", { class: "shiki incremark-code-stream" }, h("code", props.code));
+      if (hasStreamError.value || !isBrowser || tokens.length === 0) {
+        return h("pre", { class: "shiki incremark-code-stream" }, h("code", {}, props.code));
       }
       return h(
         "pre",
         { class: "shiki incremark-code-stream" },
         h(
           "code",
+          {},
           renderList(tokens, (token) => h("span", { key: objectId(token), style: token.htmlStyle || getTokenStyleObject(token) }, token.content))
         )
       );
     };
-    onUnmounted6(() => {
+    onUnmounted5(() => {
       hasStreamError.value = false;
       tokens.length = 0;
       index.value = 0;
     });
-    const __returned__ = { props, emit, hasStreamError, index, get controller() {
+    const __returned__ = { props, emit, isBrowser, hasStreamError, tokens, index, get controller() {
       return controller;
     }, set controller(v) {
       controller = v;
-    }, textStream, get tokenStream() {
+    }, get textStream() {
+      return textStream;
+    }, set textStream(v) {
+      textStream = v;
+    }, get tokenStream() {
       return tokenStream;
     }, set tokenStream(v) {
       tokenStream = v;
-    }, tokens, render: render24 };
+    }, render: render24 };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -3447,7 +3420,8 @@ var Incremark_default2 = Incremark_default;
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkContent.vue?type=script
 import { defineComponent as _defineComponent20 } from "vue";
-import { computed as computed15, watch as watch8 } from "vue";
+import { computed as computed15, watch as watch8, onMounted as onMounted4, onUnmounted as onUnmounted6 } from "vue";
+import { generateParserId } from "@incremark/shared";
 var IncremarkContent_default = /* @__PURE__ */ _defineComponent20({
   __name: "IncremarkContent",
   props: {
@@ -3460,7 +3434,10 @@ var IncremarkContent_default = /* @__PURE__ */ _defineComponent20({
     isFinished: { type: Boolean, required: false },
     incremarkOptions: { type: Object, required: false },
     pendingClass: { type: String, required: false },
-    showBlockStatus: { type: Boolean, required: false }
+    showBlockStatus: { type: Boolean, required: false },
+    devtools: { type: null, required: false },
+    devtoolsId: { type: String, required: false },
+    devtoolsLabel: { type: String, required: false }
   },
   setup(__props, { expose: __expose }) {
     __expose();
@@ -3472,7 +3449,22 @@ var IncremarkContent_default = /* @__PURE__ */ _defineComponent20({
       math: true,
       ...props.incremarkOptions
     }));
-    const { blocks, append, finalize, render: render24, reset, isDisplayComplete, markdown } = useIncremark(incremarkOptions);
+    const incremark = useIncremark(incremarkOptions);
+    const { blocks, append, finalize, render: render24, reset, isDisplayComplete, markdown } = incremark;
+    const parserId = props.devtoolsId || generateParserId();
+    onMounted4(() => {
+      if (props.devtools) {
+        props.devtools.register(incremark.parser, {
+          id: parserId,
+          label: props.devtoolsLabel || parserId
+        });
+      }
+    });
+    onUnmounted6(() => {
+      if (props.devtools) {
+        props.devtools.unregister(parserId);
+      }
+    });
     const isStreamMode = computed15(() => typeof props.stream === "function");
     async function handleStreamInput() {
       if (!props.stream) return;
@@ -3513,7 +3505,7 @@ var IncremarkContent_default = /* @__PURE__ */ _defineComponent20({
         finalize();
       }
     }, { immediate: true });
-    const __returned__ = { props, incremarkOptions, blocks, append, finalize, render: render24, reset, isDisplayComplete, markdown, isStreamMode, handleStreamInput, handleContentInput, Incremark: Incremark_default2 };
+    const __returned__ = { props, incremarkOptions, incremark, blocks, append, finalize, render: render24, reset, isDisplayComplete, markdown, parserId, isStreamMode, handleStreamInput, handleContentInput, Incremark: Incremark_default2 };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -3829,7 +3821,6 @@ export {
   thematicBreakPlugin,
   useBlockTransformer,
   useDefinationsContext,
-  useDevTools,
   useIncremark,
   useLocale,
   useProvideDefinations,