chore: add Vue adapter Vite playground (live example)#42
Draft
jamliaoo wants to merge 2 commits into
Draft
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
背景描述 (Why)
@coseeing/see-mark/vue(#41)沒有內部 consumer,這個 playground 是它的活體範例+手動驗證載具:一個能真的跑起來的 Vite + Vue 3 最小 app,讓人一眼看到 adapter
的實際行為(數學渲染、自訂組件、安全處理)。
獨立成一個 PR(疊在 #41 上)是因為:目前只有 Vue 有 example,放進函式庫 PR 會造成
不對稱、也讓 #41 失焦。
如何使用
左邊是 markdown 編輯區(即時),右邊是 SeeMark Vue 渲染結果。可以玩的點:
DemoAlert(示範
componentsprop 覆寫、payload props、default slot);取消勾選 → 回預設 alert。src/sample-markdown.js)涵蓋 15 種語法/組件:heading、alert + backlink、internal link、四種 image、外部連結三型、iframe/YouTube/CodePen、LaTeX 數學。
\(a^2+b^2=c^2\))渲染成 MathJax SVG + sr-only MathML。javascript:URL、onclick、<script>,可對照 trust model的實際行為。
實作方法 (How)
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 → globalThisdefine(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)
examples/vue-playground/vite.config.js的引用測試驗證
npm install(34 packages、0 vulnerabilities)→npm run dev→
http://localhost:5173正常起、full-syntax 範例正確渲染圖片寬度收束皆正確(證據於本機 gitignored 目錄)
package.json的files: ["lib","src"]已排除 examples補充說明
feat/vue-adapter(feat: add Vue 3 adapter (@coseeing/see-mark/vue) #41),不是 main;diff 只含此分支多出的 commit。feat: add Vue 3 adapter (@coseeing/see-mark/vue) #41 併入 main 後,GitHub 會自動把 base 改成 main。
private: true,不發佈。相關連結