@incremark/vue 0.2.2 → 0.2.4

package/src/composables/useBlockTransformer.ts

@@ -1,141 +0,0 @@
-import { ref, watch, computed, onUnmounted, type Ref, type ComputedRef } from 'vue'
-import {
-  BlockTransformer,
-  createBlockTransformer,
-  type TransformerOptions,
-  type DisplayBlock,
-  type SourceBlock,
-  type AnimationEffect
-} from '@incremark/core'
-
-export interface UseBlockTransformerOptions extends Omit<TransformerOptions, 'onChange'> {}
-
-export interface UseBlockTransformerReturn<T = unknown> {
-  /** 用于渲染的 display blocks */
-  displayBlocks: ComputedRef<DisplayBlock<T>[]>
-  /** 是否正在处理中 */
-  isProcessing: ComputedRef<boolean>
-  /** 是否已暂停 */
-  isPaused: ComputedRef<boolean>
-  /** 当前动画效果 */
-  effect: ComputedRef<AnimationEffect>
-  /** 跳过所有动画 */
-  skip: () => void
-  /** 重置状态 */
-  reset: () => void
-  /** 暂停动画 */
-  pause: () => void
-  /** 恢复动画 */
-  resume: () => void
-  /** 动态更新配置 */
-  setOptions: (options: Partial<Pick<TransformerOptions, 'charsPerTick' | 'tickInterval' | 'effect' | 'pauseOnHidden'>>) => void
-  /** transformer 实例（用于高级用法） */
-  transformer: BlockTransformer<T>
-}
-
-/**
- * Vue 3 Composable: Block Transformer
- *
- * 用于控制 blocks 的逐步显示（打字机效果）
- * 作为解析器和渲染器之间的中间层
- *
- * 特性：
- * - 使用 requestAnimationFrame 实现流畅动画
- * - 支持随机步长 `charsPerTick: [1, 3]`
- * - 支持动画效果 `effect: 'typing'`
- * - 页面不可见时自动暂停
- *
- * @example
- * ```vue
- * <script setup>
- * import { useIncremark, useBlockTransformer, defaultPlugins } from '@incremark/vue'
- *
- * const { blocks, completedBlocks, append, finalize } = useIncremark()
- *
- * // 使用 completedBlocks 作为输入（ID 稳定）
- * const sourceBlocks = computed(() => completedBlocks.value.map(b => ({
- *   id: b.id,
- *   node: b.node,
- *   status: b.status
- * })))
- *
- * // 添加打字机效果
- * const { displayBlocks, isProcessing, skip, effect } = useBlockTransformer(sourceBlocks, {
- *   charsPerTick: [1, 3],  // 随机步长
- *   tickInterval: 30,
- *   effect: 'typing',      // 光标效果
- *   plugins: defaultPlugins
- * })
- * </script>
- *
- * <template>
- *   <Incremark :blocks="displayBlocks" :class="{ 'typing': effect === 'typing' }" />
- *   <button v-if="isProcessing" @click="skip">跳过</button>
- * </template>
- * ```
- */
-export function useBlockTransformer<T = unknown>(
-  sourceBlocks: Ref<SourceBlock<T>[]> | ComputedRef<SourceBlock<T>[]>,
-  options: UseBlockTransformerOptions = {}
-): UseBlockTransformerReturn<T> {
-  const displayBlocksRef = ref<DisplayBlock<T>[]>([])
-  const isProcessingRef = ref(false)
-  const isPausedRef = ref(false)
-  const effectRef = ref<AnimationEffect>(options.effect ?? 'none')
-
-  const transformer = createBlockTransformer<T>({
-    ...options,
-    onChange: (blocks) => {
-      displayBlocksRef.value = blocks as DisplayBlock<T>[]
-      isProcessingRef.value = transformer.isProcessing()
-      isPausedRef.value = transformer.isPausedState()
-    }
-  })
-
-  // 监听源 blocks 变化
-  watch(
-    sourceBlocks,
-    (blocks) => {
-      // 推入新 blocks
-      transformer.push(blocks)
-
-      // 处理正在显示的 block 内容更新
-      const currentDisplaying = displayBlocksRef.value.find((b) => !b.isDisplayComplete)
-      if (currentDisplaying) {
-        const updated = blocks.find((b) => b.id === currentDisplaying.id)
-        if (updated) {
-          transformer.update(updated)
-        }
-      }
-    },
-    { immediate: true, deep: true }
-  )
-
-  onUnmounted(() => {
-    transformer.destroy()
-  })
-
-  return {
-    displayBlocks: computed(() => displayBlocksRef.value) as ComputedRef<DisplayBlock<T>[]>,
-    isProcessing: computed(() => isProcessingRef.value),
-    isPaused: computed(() => isPausedRef.value),
-    effect: computed(() => effectRef.value),
-    skip: () => transformer.skip(),
-    reset: () => transformer.reset(),
-    pause: () => {
-      transformer.pause()
-      isPausedRef.value = true
-    },
-    resume: () => {
-      transformer.resume()
-      isPausedRef.value = false
-    },
-    setOptions: (opts) => {
-      transformer.setOptions(opts)
-      if (opts.effect !== undefined) {
-        effectRef.value = opts.effect
-      }
-    },
-    transformer
-  }
-}

package/src/composables/useDefinationsContext.ts

@@ -1,16 +0,0 @@
-import { inject } from 'vue'
-import { definationsInjectionKey } from './useProvideDefinations'
-
-/**
- * support definations and footnoteDefinitions
- * @returns 
- */
-export function useDefinationsContext() {
-  const definationContext = inject(definationsInjectionKey);
-
-  if (!definationContext) {
-    throw new Error('definationContext not found');
-  }
-
-  return definationContext;
-}

package/src/composables/useDevTools.ts

@@ -1,54 +0,0 @@
-import { onMounted, onUnmounted } from 'vue'
-import { createDevTools, type DevToolsOptions } from '@incremark/devtools'
-import type { UseIncremarkReturn } from './useIncremark'
-
-export interface UseDevToolsOptions extends DevToolsOptions {}
-
-/**
- * Vue 3 DevTools 一行接入
- *
- * @example
- * ```vue
- * <script setup>
- * import { useIncremark, useDevTools } from '@incremark/vue'
- *
- * const incremark = useIncremark()
- * useDevTools(incremark)  // 就这一行！
- * </script>
- * ```
- */
-export function useDevTools(
-  incremark: UseIncremarkReturn,
-  options: UseDevToolsOptions = {}
-) {
-  const devtools = createDevTools(options)
-
-  // 设置 parser 的 onChange 回调
-  incremark.parser.setOnChange((state) => {
-    const blocks = [
-      ...state.completedBlocks.map((b) => ({ ...b, stableId: b.id })),
-      ...state.pendingBlocks.map((b, i) => ({ ...b, stableId: `pending-${i}` }))
-    ]
-
-    devtools.update({
-      blocks,
-      completedBlocks: state.completedBlocks,
-      pendingBlocks: state.pendingBlocks,
-      markdown: state.markdown,
-      ast: state.ast,
-      isLoading: state.pendingBlocks.length > 0
-    })
-  })
-
-  onMounted(() => {
-    devtools.mount()
-  })
-
-  onUnmounted(() => {
-    devtools.unmount()
-    // 清理回调
-    incremark.parser.setOnChange(undefined)
-  })
-
-  return devtools
-}

package/src/composables/useIncremark.ts

@@ -1,238 +0,0 @@
-import { ref, shallowRef, computed, markRaw, type ComputedRef } from 'vue'
-import {
-  createIncremarkParser,
-  type ParserOptions,
-  type ParsedBlock,
-  type IncrementalUpdate,
-  type Root,
-  type TransformerPlugin,
-  type AnimationEffect
-} from '@incremark/core'
-import { useProvideDefinations } from './useProvideDefinations'
-import { useTypewriter } from './useTypewriter'
-
-/** 打字机效果配置 */
-export interface TypewriterOptions {
-  /** 是否启用打字机效果（可响应式切换） */
-  enabled?: boolean
-  /** 每次显示的字符数，可以是固定值或范围 [min, max] */
-  charsPerTick?: number | [number, number]
-  /** 更新间隔 (ms) */
-  tickInterval?: number
-  /** 动画效果: 'none' | 'fade-in' | 'typing' */
-  effect?: AnimationEffect
-  /** 光标字符（仅 typing 效果使用） */
-  cursor?: string
-  /** 页面不可见时暂停 */
-  pauseOnHidden?: boolean
-  /** 自定义插件 */
-  plugins?: TransformerPlugin[]
-}
-
-export interface UseIncremarkOptions extends ParserOptions {
-  /** 打字机配置，传入即创建 transformer（可通过 enabled 控制是否启用） */
-  typewriter?: TypewriterOptions
-}
-
-/** 打字机控制对象 */
-export interface TypewriterControls {
-  /** 是否启用（只读） */
-  enabled: ComputedRef<boolean>
-  /** 设置是否启用 */
-  setEnabled: (enabled: boolean) => void
-  /** 是否正在处理中 */
-  isProcessing: ComputedRef<boolean>
-  /** 是否已暂停 */
-  isPaused: ComputedRef<boolean>
-  /** 当前动画效果 */
-  effect: ComputedRef<AnimationEffect>
-  /** 跳过动画，直接显示全部 */
-  skip: () => void
-  /** 暂停动画 */
-  pause: () => void
-  /** 恢复动画 */
-  resume: () => void
-  /** 动态更新配置 */
-  setOptions: (options: Partial<TypewriterOptions>) => void
-}
-
-/** useIncremark 的返回类型 */
-export type UseIncremarkReturn = ReturnType<typeof useIncremark>
-
-/**
- * Vue 3 Composable: Incremark 流式 Markdown 解析器
- *
- * @example
- * ```vue
- * <script setup>
- * import { useIncremark, Incremark } from '@incremark/vue'
- *
- * // 基础用法
- * const { blocks, append, finalize } = useIncremark()
- *
- * // 启用打字机效果
- * const { blocks, append, finalize, typewriter } = useIncremark({
- *   typewriter: {
- *     enabled: true,       // 可响应式切换
- *     charsPerTick: [1, 3],
- *     tickInterval: 30,
- *     effect: 'typing',
- *     cursor: '|'
- *   }
- * })
- *
- * // 动态切换打字机效果
- * typewriter.enabled.value = false
- * </script>
- *
- * <template>
- *   <Incremark :blocks="blocks" />
- *   <button v-if="typewriter.isProcessing.value" @click="typewriter.skip">跳过</button>
- * </template>
- * ```
- */
-export function useIncremark(options: UseIncremarkOptions = {}) {
-  // 内部自动提供 definitions context
-  const { setDefinations, setFootnoteDefinitions, setFootnoteReferenceOrder } = useProvideDefinations()
-
-  // 解析器
-  const parser = createIncremarkParser({
-    ...options,
-    onChange: (state) => {
-      setDefinations(state.definitions)
-      setFootnoteDefinitions(state.footnoteDefinitions)
-      // 调用用户提供的 onChange
-      options.onChange?.(state)
-    }
-  })
-
-  const completedBlocks = shallowRef<ParsedBlock[]>([])
-  const pendingBlocks = shallowRef<ParsedBlock[]>([])
-  const isLoading = ref(false)
-  const markdown = ref('')
-  const isFinalized = ref(false)
-  const footnoteReferenceOrder = ref<string[]>([])
-
-  // 使用 useTypewriter composable 管理打字机效果
-  const { blocks, typewriter, transformer } = useTypewriter({
-    typewriter: options.typewriter,
-    completedBlocks,
-    pendingBlocks
-  })
-
-  // AST
-  const ast = computed<Root>(() => ({
-    type: 'root',
-    children: [
-      ...completedBlocks.value.map((b) => b.node),
-      ...pendingBlocks.value.map((b) => b.node)
-    ]
-  }))
-
-  function append(chunk: string): IncrementalUpdate {
-    isLoading.value = true
-    const update = parser.append(chunk)
-
-    markdown.value = parser.getBuffer()
-
-    if (update.completed.length > 0) {
-      completedBlocks.value = [
-        ...completedBlocks.value,
-        ...update.completed.map((b) => markRaw(b))
-      ]
-    }
-    pendingBlocks.value = update.pending.map((b) => markRaw(b))
-
-    // 更新脚注引用顺序
-    footnoteReferenceOrder.value = update.footnoteReferenceOrder
-    setFootnoteReferenceOrder(update.footnoteReferenceOrder)
-
-    return update
-  }
-
-  function finalize(): IncrementalUpdate {
-    const update = parser.finalize()
-
-    markdown.value = parser.getBuffer()
-
-    if (update.completed.length > 0) {
-      completedBlocks.value = [
-        ...completedBlocks.value,
-        ...update.completed.map((b) => markRaw(b))
-      ]
-    }
-    pendingBlocks.value = []
-    isLoading.value = false
-    isFinalized.value = true
-
-    // 更新脚注引用顺序
-    footnoteReferenceOrder.value = update.footnoteReferenceOrder
-    setFootnoteReferenceOrder(update.footnoteReferenceOrder)
-
-    return update
-  }
-
-  function abort(): IncrementalUpdate {
-    return finalize()
-  }
-
-  function reset(): void {
-    parser.reset()
-    completedBlocks.value = []
-    pendingBlocks.value = []
-    markdown.value = ''
-    isLoading.value = false
-    isFinalized.value = false
-    footnoteReferenceOrder.value = []
-
-    // 重置 transformer
-    transformer?.reset()
-  }
-
-  function render(content: string): IncrementalUpdate {
-    const update = parser.render(content)
-
-    markdown.value = parser.getBuffer()
-    completedBlocks.value = parser.getCompletedBlocks().map(b => markRaw(b))
-    pendingBlocks.value = []
-    isLoading.value = false
-    isFinalized.value = true
-    footnoteReferenceOrder.value = update.footnoteReferenceOrder
-    setFootnoteReferenceOrder(update.footnoteReferenceOrder)
-
-    return update
-  }
-
-  return {
-    /** 已收集的完整 Markdown 字符串 */
-    markdown,
-    /** 已完成的块列表 */
-    completedBlocks,
-    /** 待处理的块列表 */
-    pendingBlocks,
-    /** 当前完整的 AST */
-    ast,
-    /** 用于渲染的 blocks（根据打字机设置自动处理） */
-    blocks,
-    /** 是否正在加载 */
-    isLoading,
-    /** 是否已完成（finalize） */
-    isFinalized,
-    /** 脚注引用的出现顺序 */
-    footnoteReferenceOrder,
-    /** 追加内容 */
-    append,
-    /** 完成解析 */
-    finalize,
-    /** 强制中断 */
-    abort,
-    /** 重置解析器和打字机 */
-    reset,
-    /** 一次性渲染（reset + append + finalize） */
-    render,
-    /** 解析器实例 */
-    parser,
-    /** 打字机控制 */
-    typewriter
-  }
-}

package/src/composables/useProvideDefinations.ts

@@ -1,61 +0,0 @@
-import { ref, provide, type InjectionKey, type Ref } from 'vue';
-import type { Definition, FootnoteDefinition } from 'mdast';
-
-export const definationsInjectionKey: InjectionKey<{
-  definations: Ref<Record<string, Definition>>
-  footnoteDefinitions: Ref<Record<string, FootnoteDefinition>>
-  footnoteReferenceOrder: Ref<string[]>
-}> = Symbol('provideDefinations');
-
-export function useProvideDefinations() {
-  const definations = ref<Record<string, Definition>>({});
-  const footnoteDefinitions = ref<Record<string, FootnoteDefinition>>({});
-  const footnoteReferenceOrder = ref<string[]>([]);
-
-  provide(definationsInjectionKey, {
-    definations,
-    footnoteDefinitions,
-    footnoteReferenceOrder
-  });
-
-  function setDefinations(definitions: Record<string, Definition>) {
-    definations.value = definitions;
-  }
-
-  function setFootnoteDefinitions(definitions: Record<string, FootnoteDefinition>) {
-    footnoteDefinitions.value = definitions;
-  }
-
-  function setFootnoteReferenceOrder(order: string[]) {
-    footnoteReferenceOrder.value = order;
-  }
-
-  function clearDefinations() {
-    definations.value = {};
-  }
-
-  function clearFootnoteDefinitions() {
-    footnoteDefinitions.value = {};
-  }
-
-  function clearFootnoteReferenceOrder() {
-    footnoteReferenceOrder.value = [];
-  }
-
-  function clearAllDefinations() {
-    clearDefinations();
-    clearFootnoteDefinitions();
-    clearFootnoteReferenceOrder();
-  }
-
-  return {
-    setDefinations,
-    setFootnoteDefinitions,
-    setFootnoteReferenceOrder,
-    clearDefinations,
-    clearFootnoteDefinitions,
-    clearFootnoteReferenceOrder,
-    clearAllDefinations
-  }
-
-}

package/src/composables/useStreamRenderer.ts

@@ -1,55 +0,0 @@
-import { ref, computed, type Ref, type ComputedRef } from 'vue'
-import type { ParsedBlock } from '@incremark/core'
-
-export interface BlockWithStableId extends ParsedBlock {
-  /** 稳定的渲染 ID（用于 Vue key） */
-  stableId: string
-}
-
-export interface UseStreamRendererOptions {
-  /** 已完成的块 */
-  completedBlocks: Ref<ParsedBlock[]>
-  /** 待处理的块 */
-  pendingBlocks: Ref<ParsedBlock[]>
-}
-
-export interface UseStreamRendererReturn {
-  /** 带稳定 ID 的已完成块 */
-  stableCompletedBlocks: ComputedRef<BlockWithStableId[]>
-  /** 带稳定 ID 的待处理块 */
-  stablePendingBlocks: ComputedRef<BlockWithStableId[]>
-  /** 所有带稳定 ID 的块 */
-  allStableBlocks: ComputedRef<BlockWithStableId[]>
-}
-
-/**
- * Vue 3 Composable: 流式渲染辅助
- *
- * 为块分配稳定的渲染 ID，确保 Vue 的虚拟 DOM 复用
- */
-export function useStreamRenderer(options: UseStreamRendererOptions): UseStreamRendererReturn {
-  const { completedBlocks, pendingBlocks } = options
-
-  const stableCompletedBlocks = computed<BlockWithStableId[]>(() =>
-    completedBlocks.value.map((block) => ({
-      ...block,
-      stableId: block.id
-    }))
-  )
-
-  const stablePendingBlocks = computed<BlockWithStableId[]>(() =>
-    pendingBlocks.value.map((block, index) => ({
-      ...block,
-      stableId: `pending-${index}`
-    }))
-  )
-
-  const allStableBlocks = computed(() => [...stableCompletedBlocks.value, ...stablePendingBlocks.value])
-
-  return {
-    stableCompletedBlocks,
-    stablePendingBlocks,
-    allStableBlocks
-  }
-}
-