Skip to content

chore: add Vue adapter Vite playground (live example)#42

Draft
jamliaoo wants to merge 2 commits into
feat/vue-adapterfrom
feat/vue-playground
Draft

chore: add Vue adapter Vite playground (live example)#42
jamliaoo wants to merge 2 commits into
feat/vue-adapterfrom
feat/vue-playground

Conversation

@jamliaoo

Copy link
Copy Markdown
Contributor

背景描述 (Why)

@coseeing/see-mark/vue#41)沒有內部 consumer,這個 playground 是它的活體範例
+手動驗證載具
:一個能真的跑起來的 Vite + Vue 3 最小 app,讓人一眼看到 adapter
的實際行為(數學渲染、自訂組件、安全處理)。

獨立成一個 PR(疊在 #41 上)是因為:目前只有 Vue 有 example,放進函式庫 PR 會造成
不對稱、也讓 #41 失焦。

如何使用

cd examples/vue-playground
npm install
npm run dev        # → http://localhost:5173

左邊是 markdown 編輯區(即時),右邊是 SeeMark Vue 渲染結果。可以玩的點:

  • 即時編輯:改左邊 textarea,右邊即時重渲染。
  • 切換自訂組件:勾「use custom alert component」→ alert 換成紅框的自訂 DemoAlert
    (示範 components prop 覆寫、payload props、default slot);取消勾選 → 回預設 alert。
  • 內建範例src/sample-markdown.js)涵蓋 15 種語法/組件:heading、alert + backlink、
    internal link、四種 image、外部連結三型、iframe/YouTube/CodePen、LaTeX 數學。
  • 數學:LaTeX(\(a^2+b^2=c^2\))渲染成 MathJax SVG + sr-only MathML。
  • 安全 probe:sample 內含 javascript: URL、onclick<script>,可對照 trust model
    的實際行為。

註:playground 設 enableAsciimath: false —— Vite 下 MathJax 的 AsciiMath 無法執行
(見 #41 的 bundler 說明),反引號因此渲染成 code span。

實作方法 (How)

  • Vite 6 + Vue 3 最小 app,純 h()(無 SFC)。
  • 透過 file:../.. symlink 消費 SeeMark(本地開發佈局)。
  • vite.config.js 兩個關鍵設定(僅 linked-dev 需要,registry 安裝不需):
    • optimizeDeps.include: ['@coseeing/see-mark/vue'] —— 強制對 symlink 套件做 CJS→ESM 預打包。
    • resolve.dedupe: ['vue'] —— 避免 symlink 佈局出現兩份 Vue runtime。
    • 另有 global → globalThis define(mathjax-full 在瀏覽器需要)。
  • index.html 帶一小段 demo CSS(表格框線 + padding、img { max-width: 100% }
    寬表 overflow-x)。SeeMark 的預設元件刻意無樣式、視覺交給 consumer;這段只是讓
    demo 看起來像有樣式表的真實部署(如 Access8Math),不影響 adapter 輸出

實際變更

  • 新增 examples/vue-playground/(index.html + demo CSS、src/main.js、
    src/sample-markdown.js、vite.config.js、package.json + lock、.gitignore)
  • README bundler 段落補回指向 examples/vue-playground/vite.config.js 的引用

測試驗證

  • 照 README 流程實跑:npm install(34 packages、0 vulnerabilities)→ npm run dev
    http://localhost:5173 正常起、full-syntax 範例正確渲染
  • 瀏覽器走查:自訂 alert 切換、即時編輯、LaTeX 數學 SVG 實際顯示;表格框線/對齊、
    圖片寬度收束皆正確(證據於本機 gitignored 目錄)
  • 不影響 npm 套件:root package.jsonfiles: ["lib","src"] 已排除 examples

補充說明

相關連結

jamliaoo added 2 commits July 14, 2026 13:49
Runnable Vite demo that exercises the @coseeing/see-mark/vue entry end to
end: all default components, custom-component override, and adversarial
probes. Stacked on the Vue adapter branch; not published (package.json
files = [lib, src]).

Includes the symlinked-dev vite config (optimizeDeps.include +
resolve.dedupe ['vue']) and enableAsciimath: false for the ESM-strict
bundler caveat. README points here from the bundler-compatibility notes.
SeeMark's default components are unstyled, so the playground rendered tables
borderless and images at natural size — looking off next to styled
deployments (Access8Math). Add a small index.html stylesheet mirroring those
conventions: bordered/padded table cells, img max-width, and article
overflow-x for very wide tables. The adapter's output is unchanged.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant