feat: add rollup-plugin-visualizer for bundle analysis; update dependencies and improve link parsing tests and fix the text following the link is missing.

Simon-He95 · Simon-He95 · commit 34a9331931a5 · 2025-11-28T18:56:11.000+08:00
diff --git a/package.json b/package.json
@@ -35,6 +35,9 @@
     "real-time-preview",
     "markstream-vue"
   ],
+  "sideEffects": [
+    "src/index.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -136,6 +139,7 @@
     "postcss-cli": "^11.0.1",
     "rollup": "^3.29.5",
     "rollup-plugin-dts": "^5.3.1",
+    "rollup-plugin-visualizer": "^6.0.5",
     "stream-markdown-parser": "workspace:^",
     "tailwindcss": "^3.4.18",
     "terser": "^5.44.1",
diff --git a/packages/markdown-parser/package.json b/packages/markdown-parser/package.json
@@ -59,7 +59,7 @@
     "markdown-it-sub": "^2.0.0",
     "markdown-it-sup": "^2.0.0",
     "markdown-it-task-checkbox": "^1.0.6",
-    "markdown-it-ts": "0.0.2-beta.7"
+    "markdown-it-ts": "0.0.2-beta.8"
   },
   "devDependencies": {
     "@types/node": "^22.19.1",
diff --git a/packages/markdown-parser/src/parser/inline-parsers/index.ts b/packages/markdown-parser/src/parser/inline-parsers/index.ts
@@ -520,9 +520,6 @@ export function parseInlineTokens(
       i++
       return
     }
-    if (content.startsWith(')') && result[result.length - 1]?.type === 'link') {
-      content = content.slice(1)
-    }
 
     // math 公式 $ 只出现一个并且在末尾，优化掉
     if (Array.from(content.matchAll(/\$/g)).length === 1 && content.endsWith('$')) {
diff --git a/packages/markdown-parser/src/plugins/fixLinkTokens.ts b/packages/markdown-parser/src/plugins/fixLinkTokens.ts
@@ -83,6 +83,7 @@ export function applyFixLinkTokens(md: MarkdownIt) {
 function fixLinkToken(tokens: MarkdownToken[]): MarkdownToken[] {
   if (tokens.length < 4)
     return tokens
+
   for (let i = 0; i <= tokens.length - 1; i++) {
     if (i < 0) {
       i = 0
@@ -281,11 +282,11 @@ function fixLinkToken(tokens: MarkdownToken[]): MarkdownToken[] {
         if (m === -1) {
           href += (tokens[i + 1]?.content?.slice(0, m) || '')
           tokens[i + 1].content = ''
+          count += 1
         }
         else {
           loading = false
         }
-        count += 1
       }
       else if (tokens[i + 1].type === 'text' && tokens[i + 1]?.content?.startsWith('](')) {
         count += 1
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
@@ -34,13 +34,6 @@ function goToTest() {
   })
 }
 
-function goToMermaidExportDemo() {
-  // Prefer router navigation, fallback to full redirect if it fails.
-  router.push('/mermaid-export-demo').catch(() => {
-    window.location.href = '/mermaid-export-demo'
-  })
-}
-
 // Keep persisted values within reasonable bounds on hydration.
 watchEffect(() => {
   const parsedDelay = Number(streamDelay.value)
@@ -513,15 +506,6 @@ onBeforeUnmount(() => {
               <Icon icon="carbon:rocket" class="w-4 h-4" />
               <span>Test</span>
             </button>
-            <!-- Mermaid export demo -->
-            <button
-              class="ml-2 test-page-btn flex items-center gap-2 px-3 py-1.5 bg-green-600 hover:bg-green-500 text-white text-sm font-medium rounded-lg transition-all duration-200 shadow-md focus:outline-none focus:ring-2 focus:ring-green-500/50"
-              title="Mermaid export demo"
-              @click="goToMermaidExportDemo"
-            >
-              <Icon icon="carbon:download" class="w-4 h-4" />
-              <span>Mermaid Export</span>
-            </button>
           </div>
         </div>
       </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/exports.ts b/src/exports.ts
@@ -1,11 +1,11 @@
 import type { App, Component, Plugin } from 'vue'
 import type { LanguageIconResolver } from './utils/languageIcon'
 import { setDefaultMathOptions } from 'stream-markdown-parser'
+import { defineAsyncComponent } from 'vue'
 import AdmonitionNode from './components/AdmonitionNode'
 
 import BlockquoteNode from './components/BlockquoteNode'
 import CheckboxNode from './components/CheckboxNode'
-import CodeBlockNode from './components/CodeBlockNode'
 import DefinitionListNode from './components/DefinitionListNode'
 import EmojiNode from './components/EmojiNode'
 import FootnoteNode from './components/FootnoteNode'
@@ -20,8 +20,6 @@ import LinkNode from './components/LinkNode'
 import ListItemNode from './components/ListItemNode'
 import ListNode from './components/ListNode'
 import MarkdownCodeBlockNode from './components/MarkdownCodeBlockNode'
-import MathBlockNode from './components/MathBlockNode'
-import MathInlineNode from './components/MathInlineNode'
 import MermaidBlockNode from './components/MermaidBlockNode'
 import MarkdownRender from './components/NodeRenderer'
 import ParagraphNode from './components/ParagraphNode'
@@ -38,9 +36,14 @@ import { setDefaultI18nMap } from './composables/useSafeI18n'
 import { setLanguageIconResolver } from './utils/languageIcon'
 import { clearGlobalCustomComponents, getCustomNodeComponents, removeCustomComponents, setCustomComponents } from './utils/nodeComponents'
 import './index.css'
+// Re-add top-level worker imports so builds emit worker bundles into `dist/`
 import './workers/katexRenderer.worker?worker'
 import './workers/mermaidParser.worker?worker'
 
+const CodeBlockNode = defineAsyncComponent(() => import('./components/CodeBlockNode'))
+const MathBlockNode = defineAsyncComponent(() => import('./components/MathBlockNode'))
+const MathInlineNode = defineAsyncComponent(() => import('./components/MathInlineNode'))
+
 // Export centralized props interfaces so they appear in package d.ts
 export * from './utils'
 
diff --git a/test/__snapshots__/e2e.markdown.test.ts.snap b/test/__snapshots__/e2e.markdown.test.ts.snap
@@ -57,15 +57,20 @@ exports[`e2e markdown parsing (fixtures) > parses fixture escaped-brackets.md >
   {
     "children": [
       "text",
+      "text_special",
+      "text",
+      "text_special",
     ],
-    "firstText": "A line with an escaped bracket: [not a link]",
+    "firstText": "A line with an escaped bracket: ",
     "type": "paragraph",
   },
   {
     "children": [
       "text",
+      "text_special",
+      "text",
     ],
-    "firstText": "And a literal backslash  and more text.",
+    "firstText": "And a literal backslash ",
     "type": "paragraph",
   },
 ]
@@ -178,8 +183,12 @@ exports[`e2e markdown parsing (fixtures) > parses fixture math.md > math.md 1`]
   {
     "children": [
       "text",
+      "text_special",
+      "text",
+      "text_special",
+      "text",
     ],
-    "firstText": "Inline math (alpha + beta) and another form (x_i).",
+    "firstText": "Inline math (",
     "type": "paragraph",
   },
   {
diff --git a/test/e2e.markdown.test.ts b/test/e2e.markdown.test.ts
@@ -91,7 +91,7 @@ describe('e2e markdown parsing (fixtures)', () => {
         }
         else {
           // generic: record if has children
-          out.children = (n as any).children ? (n as any).children.map(item => item.type) : undefined
+          out.children = (n as any).children ? (n as any).children.map((item: any) => item.type) : undefined
         }
         // Tolerate environment differences for escaped backslash in a specific fixture
         if (f === 'escaped-brackets.md' && typeof out.firstText === 'string') {
diff --git a/test/e2e/__snapshots__/node-renderer.e2e.test.ts.snap b/test/e2e/__snapshots__/node-renderer.e2e.test.ts.snap
@@ -310,6 +310,21 @@ exports[`markdownRender node e2e coverage > renders heading node 1`] = `
 </div>"
 `;
 
+exports[`markdownRender node e2e coverage > renders heading node 2`] = `
+"<div data-v-8dfe8a80="" class="markdown-renderer">
+  <div data-v-8dfe8a80="" class="node-spacer" style="height: 0px;" aria-hidden="true"></div>
+  <div data-v-8dfe8a80="" class="node-slot" data-node-index="0" data-node-type="heading">
+    <div data-v-8dfe8a80="" class="node-content">
+      <!-- Skip wrapping code_block nodes in transitions to avoid touching Monaco editor internals -->
+      <transition-stub data-v-8dfe8a80="" name="typewriter" appear="true" persisted="false" css="true">
+        <h1 data-v-9f883140="" data-v-8dfe8a80="" class="heading-node heading-1" dir="auto" typewriter="true" is-dark="false"><span data-v-a84b8095="" data-v-9f883140="" class="whitespace-pre-wrap break-words text-node" index-key="markdown-renderer-0-0">Heading Node Title</span></h1>
+      </transition-stub>
+    </div>
+  </div>
+  <div data-v-8dfe8a80="" class="node-spacer" style="height: 0px;" aria-hidden="true"></div>
+</div>"
+`;
+
 exports[`markdownRender node e2e coverage > renders highlight node 1`] = `
 "<div data-v-8dfe8a80="" class="markdown-renderer">
   <div data-v-8dfe8a80="" class="node-spacer" style="height: 0px;" aria-hidden="true"></div>
diff --git a/test/link-parsing.test.ts b/test/link-parsing.test.ts
@@ -269,4 +269,62 @@ http://127.0.0.1:8001/upload/20251118/4737bbe0-c42e-11f0-8471-37360564882d.docx
     nodes.forEach(walk)
     expect(foundHardBreak).toBe(true)
   })
+
+  it('parses Danish list item with parenthetical URL', () => {
+    const special = '- **Kilde:**\u202FGrammatip – “Tekstretter” (https://www.grammatip.com/tekstretter) – her beskrives, hvordan værktøjet automatisk markerer fejl, giver fejltyper, leverer farvekodet feedback, giver lærerne et samlet overblik og muligheden for at tilpasse, hvilke fejl eleven skal se.'
+    const nodes = parseMarkdownToStructure(special, md)
+
+    // Find the paragraph node inside the list item
+    let para: any = null
+    const findPara = (n: any) => {
+      if (!n)
+        return
+      if (n.type === 'paragraph') {
+        para = n
+        return
+      }
+      if (Array.isArray(n.children))
+        n.children.forEach(findPara)
+      if (Array.isArray(n.items))
+        n.items.forEach(findPara)
+    }
+    nodes.forEach(findPara)
+    expect(para).toBeTruthy()
+
+    // Flatten paragraph descendants into ordered tokens, marking links specially
+    const tokens: string[] = []
+    const flatten = (n: any) => {
+      if (!n)
+        return
+      if (n.type === 'link') {
+        tokens.push(`<LINK:${n.href || n.text || ''}>`)
+        return
+      }
+      if (n.type === 'text') {
+        tokens.push(n.content || n.text || '')
+        return
+      }
+      if (Array.isArray(n.children)) {
+        for (const c of n.children) flatten(c)
+      }
+    }
+    flatten(para)
+
+    // There should be at least one link token with the expected href
+    const linkIndex = tokens.findIndex(t => t.startsWith('<LINK:'))
+    expect(linkIndex).toBeGreaterThanOrEqual(0)
+    const linkToken = tokens[linkIndex]
+    expect(linkToken).toContain('https://www.grammatip.com/tekstretter')
+
+    // Check text immediately before the link contains the title/context
+    const before = tokens[linkIndex - 1] || ''
+    const hasBefore = before.includes('Tekstretter') || before.includes('Grammatip') || before.includes('Kilde')
+    expect(hasBefore).toBe(true)
+
+    // Check text immediately after the link contains the trailing explanation
+    const afterTokens = tokens.slice(linkIndex + 1)
+    const afterFull = afterTokens.join('').trim()
+    const expectedAfter = ') – her beskrives, hvordan værktøjet automatisk markerer fejl, giver fejltyper, leverer farvekodet feedback, giver lærerne et samlet overblik og muligheden for at tilpasse, hvilke fejl eleven skal se.'
+    expect(afterFull).toBe(expectedAfter)
+  })
 })
diff --git a/vite.config.tailwind.ts b/vite.config.tailwind.ts
@@ -1,21 +1,29 @@
-import Vue from '@vitejs/plugin-vue'
+import process from 'node:process'
 /// <reference types="vitest" />
 
+import Vue from '@vitejs/plugin-vue'
 import autoprefixer from 'autoprefixer'
+import { visualizer } from 'rollup-plugin-visualizer'
 import UnpluginClassExtractor from 'unplugin-class-extractor/vite'
 import { defineConfig } from 'vite'
 import { name } from './package.json'
 
 // https://vitejs.dev/config/
+const pluginsArr: any[] = [
+  Vue(),
+  UnpluginClassExtractor({
+    output: 'dist/tailwind.ts',
+    include: [/\/src\/components\/(?:[^/]+\/)*[^/]+\.vue(\?.*)?$/],
+  }) as any,
+]
+
+if (process.env.ANALYZE === 'true') {
+  pluginsArr.push(visualizer({ filename: 'dist/bundle-visualizer-tailwind.html', gzipSize: true }) as any)
+}
+
 export default defineConfig({
   base: '/',
-  plugins: [
-    Vue(),
-    UnpluginClassExtractor({
-      output: 'dist/tailwind.ts',
-      include: [/\/src\/components\/(?:[^/]+\/)*[^/]+\.vue(\?.*)?$/],
-    }) as any,
-  ],
+  plugins: pluginsArr,
   build: {
     target: 'es2015',
     cssTarget: 'chrome61',
@@ -58,6 +66,8 @@ export default defineConfig({
         'monaco-editor-core',
         'stream-monaco',
         'stream-markdown',
+        'stream-markdown-parser',
+        '@floating-ui/dom',
         'vscode-textmate',
         'vscode-oniguruma',
       ],
diff --git a/vite.config.ts b/vite.config.ts

Original file line number	Diff line number	Diff line change
`@@ -520,9 +520,6 @@ export function parseInlineTokens(`
`520`	`520`	`i++`
`521`	`521`	`return`
`522`	`522`	`}`
`523`		`- if (content.startsWith(')') && result[result.length - 1]?.type === 'link') {`
`524`		`- content = content.slice(1)`
`525`		`- }`
`526`	`523`
`527`	`524`	`// math 公式 $ 只出现一个并且在末尾，优化掉`
`528`	`525`	`if (Array.from(content.matchAll(/\$/g)).length === 1 && content.endsWith('$')) {`
Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,7 @@ describe('e2e markdown parsing (fixtures)', () => {`
`91`	`91`	`}`
`92`	`92`	`else {`
`93`	`93`	`// generic: record if has children`
`94`		`- out.children = (n as any).children ? (n as any).children.map(item => item.type) : undefined`
	`94`	`+ out.children = (n as any).children ? (n as any).children.map((item: any) => item.type) : undefined`
`95`	`95`	`}`
`96`	`96`	`// Tolerate environment differences for escaped backslash in a specific fixture`
`97`	`97`	`if (f === 'escaped-brackets.md' && typeof out.firstText === 'string') {`