worker 模式无法正常调用

[Hiram-Wong]

code

<template>
  <markdown-worker-poll :worker-count="1" :parser-options="parserOptions" @ready="onPoolReady">
    <markdown-renderer :markdown="markdown" :dynamic="true" :style="rendererStyle" :code-renderer="codeRenderer" />
  </markdown-worker-poll>
</template>
<script lang="ts" setup>
import 'highlight.js/styles/github-dark.css';

import type { MarkdownComponent, MarkdownWorkerPollProps } from '@markdown-next/vue';
import { MarkdownRenderer, MarkdownWorkerPoll } from '@markdown-next/vue';
import hljs from 'highlight.js';
import { h, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';

import { isDev } from '@/utils/systeminfo';

defineOptions({
  name: 'RenderMarkdown',
});

const props = defineProps<{
  text?: string;
}>();

const markdown = shallowRef('');
const pool = ref<typeof MarkdownWorkerPoll | null>(null);
const statsInterval = ref<NodeJS.Timeout | null>(null);

const parserOptions: MarkdownWorkerPollProps = {
  extendedGrammar: ['gfm'],
};

const rendererStyle = {
  background: 'transparent',
  color: 'var(--td-text-color-secondary)',
  fontFamily: 'var(--td-font-family-default)',
  fontSize: '14px',
};

watch(
  () => props.text,
  (val) => {
    markdown.value = val ?? '';
  },
  { immediate: true },
);

onMounted(() => setup());
onUnmounted(() => dispose());

const setup = () => {
  if (!isDev) return;

  statsInterval.value = setInterval(() => {
    if (pool.value) {
      const stats = pool.value.getStats();
      console.debug('Markdown Worker Pool Stats:', stats);
    }
  }, 100);
};

const dispose = () => {
  if (isDev) clearInterval(statsInterval.value!);
  if (pool.value) pool.value.terminate();
};

const onPoolReady = (p: typeof MarkdownWorkerPoll) => {
  pool.value = p;
};

const codeRenderer: MarkdownComponent = (props) => {
  const codeNode = props.children?.[0]?.children?.[0];
  const code = codeNode?.value || '';

  const className = props.children?.[0]?.properties?.className;
  const lang = Array.isArray(className) ? className[0]?.replace('language-', '') : 'plaintext';

  const highlighted =
    lang && hljs.getLanguage(lang) ? hljs.highlight(code, { language: lang }).value : hljs.highlightAuto(code).value;

  return h('pre', { class: 'code-block' }, [
    h('div', { class: 'code-header' }, [h('span', { class: 'language-badge' }, lang)]),
    h('code', {
      class: `language-${lang} hljs`,
      innerHTML: highlighted,
    }),
  ]);
};
</script>
<style scoped></style>

参考方案

vite配置

报错信息

[XueHua-s]

你好，补充说明一下：
我这边本地测试使用的是 Vite 7.x。

为了便于定位问题，麻烦你提供一个 最小可复现示例，并放在任一在线平台上，例如：

StackBlitz

CodeSandbox

GitHub 仓库（最小 demo 即可）

复现示例中请尽量只保留：

Vite + Vue 的基础配置

@markdown-next/vue

触发问题所需的最少代码

这样可以确认问题是否与 Vite 7 / Worker 构建方式有关，也能更快判断是否是库本身的问题。谢谢配合。