Skip to content

refactor(rolldown): migrate codemirror to modern-monaco#185

Merged
webfansplz merged 3 commits intomainfrom
refactor/modern-monaco
Mar 9, 2026
Merged

refactor(rolldown): migrate codemirror to modern-monaco#185
webfansplz merged 3 commits intomainfrom
refactor/modern-monaco

Conversation

@webfansplz
Copy link
Copy Markdown
Member

Screenshot:
screenshot

Copilot AI review requested due to automatic review settings March 9, 2026 04:32
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR migrates the Rolldown DevTools code viewer/diff viewer from CodeMirror 5 to modern-monaco, updating both dependencies and the UI implementation to use Monaco editors with custom theming and scrollbar styling.

Changes:

  • Replace CodeMirror-based viewer/diff components with Monaco equivalents and introduce a new Monaco composable.
  • Update styles to target Monaco editor DOM and align scrollbars with app styling.
  • Remove CodeMirror dependencies/types and add modern-monaco to workspace/package deps (plus lockfile updates).

Reviewed changes

Copilot reviewed 10 out of 11 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
pnpm-workspace.yaml Removes CodeMirror entries from catalogs; adds modern-monaco.
pnpm-lock.yaml Reflects dependency swap to modern-monaco and related lock updates.
packages/rolldown/src/uno.config.ts Minor formatting cleanup.
packages/rolldown/src/nuxt.config.ts Updates optimizeDeps.include to preload modern-monaco instead of CodeMirror modules.
packages/rolldown/src/app/styles/global.css Adds app scrollbar CSS vars and Monaco scrollbar styling overrides.
packages/rolldown/src/app/styles/cm.css Repurposes editor styling from CodeMirror to Monaco while keeping shared font vars.
packages/rolldown/src/app/composables/monaco.ts New shared Monaco initialization, theme application, editor factory, language guessing, and scroll sync helpers.
packages/rolldown/src/app/composables/codemirror.ts Removes CodeMirror composable.
packages/rolldown/src/app/components/code/Viewer.vue Reimplements the code viewer using a read-only Monaco editor with auto-height.
packages/rolldown/src/app/components/code/DiffEditor.vue Reimplements the diff viewer using two Monaco editors + decoration-based diff highlighting + scroll sync.
packages/rolldown/package.json Drops CodeMirror deps/types and adds modern-monaco.
Files not reviewed (1)
  • pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Mar 9, 2026

Open in StackBlitz

npm i https://pkg.pr.new/@vitejs/devtools@185
npm i https://pkg.pr.new/@vitejs/devtools-kit@185
npm i https://pkg.pr.new/@vitejs/devtools-rolldown@185
npm i https://pkg.pr.new/@vitejs/devtools-rpc@185

commit: 7a6f541

@webfansplz webfansplz requested a review from antfu March 9, 2026 04:41
@antfu
Copy link
Copy Markdown
Member

antfu commented Mar 9, 2026

Awesome! Thank you!

@webfansplz webfansplz merged commit 6b02f38 into main Mar 9, 2026
9 checks passed
@webfansplz webfansplz deleted the refactor/modern-monaco branch March 9, 2026 13:09
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.

3 participants