chore: update

Author: webfansplz

packages/rolldown/src/app/components/code/DiffEditor.vue

@@ -3,7 +3,16 @@ import type * as Monaco from 'modern-monaco/editor-core'
 import { isDark } from '@vitejs/devtools-ui/composables/dark'
 import { Pane, Splitpanes } from 'splitpanes'
 import { computed, nextTick, onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'
-import { applyMonacoTheme, getMonaco, guessMonacoLanguage, setupMonacoScrollSync, syncMonacoEditorScrolls } from '~/composables/monaco'
+import {
+  applyMonacoTheme,
+  createReadOnlyMonacoEditor,
+  getMonaco,
+  getMonacoWordWrap,
+  guessMonacoLanguage,
+  setModelLanguageIfNeeded,
+  setupMonacoScrollSync,
+  syncMonacoEditorScrolls,
+} from '~/composables/monaco'
 import { settings } from '~/state/settings'
 import { calculateDiffWithWorker } from '~/worker/diff'
 
@@ -27,23 +36,6 @@ let toDecorations: Monaco.editor.IEditorDecorationsCollection | null = null
 let disposeScrollSync: (() => void) | null = null
 let diffVersion = 0
 
-function createReadOnlyEditor(container: HTMLElement) {
-  if (!monaco)
-    throw new Error('Monaco is not initialized')
-
-  return monaco.editor.create(container, {
-    automaticLayout: true,
-    fontFamily: '\'Input Mono\', \'FiraCode\', monospace',
-    fontSize: 13,
-    lineNumbers: 'on',
-    minimap: { enabled: false },
-    readOnly: true,
-    renderLineHighlight: 'none',
-    scrollBeyondLastLine: false,
-    wordWrap: settings.value.codeviewerLineWrap ? 'on' : 'off',
-  })
-}
-
 function setModelValue(model: Monaco.editor.ITextModel, value: string) {
   if (model.getValue() !== value)
     model.setValue(value)
@@ -133,8 +125,12 @@ onMounted(async () => {
 
   monaco = await getMonaco()
 
-  fromEditor = createReadOnlyEditor(fromEl.value)
-  toEditor = createReadOnlyEditor(toEl.value)
+  fromEditor = createReadOnlyMonacoEditor(monaco, fromEl.value, {
+    wordWrap: getMonacoWordWrap(settings.value.codeviewerLineWrap),
+  })
+  toEditor = createReadOnlyMonacoEditor(monaco, toEl.value, {
+    wordWrap: getMonacoWordWrap(settings.value.codeviewerLineWrap),
+  })
 
   fromModel = monaco.editor.createModel(props.from, guessMonacoLanguage(props.from))
   toModel = monaco.editor.createModel(props.to, guessMonacoLanguage(props.to))
@@ -151,12 +147,14 @@ onMounted(async () => {
 
   if (!props.oneColumn)
     syncMonacoEditorScrolls(toEditor, fromEditor)
+
+  await updateDiffDecorations(props.from, props.to, props.diff)
 })
 
 watch(
   () => settings.value.codeviewerLineWrap,
   (enabled) => {
-    const wordWrap = enabled ? 'on' : 'off'
+    const wordWrap = getMonacoWordWrap(enabled)
     fromEditor?.updateOptions({ wordWrap })
     toEditor?.updateOptions({ wordWrap })
   },
@@ -187,33 +185,36 @@ watch(
   { immediate: true },
 )
 
-watch(
-  () => [props.from, props.to, props.diff] as const,
-  async ([from, to, diffEnabled]) => {
-    if (!monaco || !fromModel || !toModel || !fromDecorations || !toDecorations)
-      return
+async function updateDiffDecorations(from: string, to: string, diffEnabled: boolean) {
+  if (!monaco || !fromModel || !toModel || !fromDecorations || !toDecorations)
+    return
 
-    const currentVersion = ++diffVersion
+  const currentVersion = ++diffVersion
 
-    setModelValue(fromModel, from)
-    setModelValue(toModel, to)
+  setModelValue(fromModel, from)
+  setModelValue(toModel, to)
 
-    monaco.editor.setModelLanguage(fromModel, guessMonacoLanguage(from))
-    monaco.editor.setModelLanguage(toModel, guessMonacoLanguage(to))
+  setModelLanguageIfNeeded(monaco, fromModel, guessMonacoLanguage(from))
+  setModelLanguageIfNeeded(monaco, toModel, guessMonacoLanguage(to))
 
-    fromDecorations.set([])
-    toDecorations.set([])
+  fromDecorations.set([])
+  toDecorations.set([])
 
-    if (!diffEnabled || !from)
-      return
+  if (!diffEnabled || !from || from === to)
+    return
 
-    const changes = await calculateDiffWithWorker(from, to)
-    if (currentVersion !== diffVersion)
-      return
+  const changes = await calculateDiffWithWorker(from, to)
+  if (currentVersion !== diffVersion)
+    return
 
-    applyDiffDecorations(changes)
+  applyDiffDecorations(changes)
+}
+
+watch(
+  () => [props.from, props.to, props.diff] as const,
+  ([from, to, diffEnabled]) => {
+    updateDiffDecorations(from, to, diffEnabled)
   },
-  { immediate: true },
 )
 
 const leftPanelSize = computed(() => {

packages/rolldown/src/app/components/code/Viewer.vue

@@ -2,7 +2,7 @@
 import type * as Monaco from 'modern-monaco/editor-core'
 import { isDark } from '@vitejs/devtools-ui/composables/dark'
 import { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'
-import { applyMonacoTheme, getMonaco } from '~/composables/monaco'
+import { applyMonacoTheme, createReadOnlyMonacoEditor, getMonaco, getMonacoWordWrap } from '~/composables/monaco'
 import { settings } from '~/state/settings'
 
 const props = defineProps<{
@@ -31,20 +31,12 @@ onMounted(async () => {
   monaco = await getMonaco()
 
   model = monaco.editor.createModel(props.code, 'javascript')
-  editor = monaco.editor.create(codeEl.value, {
-    automaticLayout: true,
-    fontFamily: '\'Input Mono\', \'FiraCode\', monospace',
-    fontSize: 13,
-    lineNumbers: 'on',
-    minimap: { enabled: false },
-    readOnly: true,
-    renderLineHighlight: 'none',
-    scrollBeyondLastLine: false,
+  editor = createReadOnlyMonacoEditor(monaco, codeEl.value, {
     scrollbar: {
       vertical: 'hidden',
       verticalScrollbarSize: 0,
     },
-    wordWrap: settings.value.codeviewerLineWrap ? 'on' : 'off',
+    wordWrap: getMonacoWordWrap(settings.value.codeviewerLineWrap),
   })
 
   editor.setModel(model)
@@ -69,7 +61,7 @@ watch(
   () => settings.value.codeviewerLineWrap,
   (enabled) => {
     editor?.updateOptions({
-      wordWrap: enabled ? 'on' : 'off',
+      wordWrap: getMonacoWordWrap(enabled),
     })
   },
   { immediate: true },

packages/rolldown/src/app/composables/monaco.ts

@@ -72,6 +72,54 @@ export function applyMonacoTheme(monaco: typeof Monaco) {
   monaco.editor.setTheme(getThemeId())
 }
 
+export function getMonacoWordWrap(enabled: boolean): Monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] {
+  return enabled ? 'on' : 'off'
+}
+
+const readonlyEditorOptions: Monaco.editor.IStandaloneEditorConstructionOptions = {
+  automaticLayout: true,
+  fontFamily: '\'Input Mono\', \'FiraCode\', monospace',
+  fontSize: 13,
+  lineNumbers: 'on',
+  minimap: { enabled: false },
+  readOnly: true,
+  renderLineHighlight: 'none',
+  scrollBeyondLastLine: false,
+  scrollbar: {
+    alwaysConsumeMouseWheel: false,
+    horizontal: 'auto',
+    horizontalScrollbarSize: 6,
+    useShadows: false,
+    vertical: 'auto',
+    verticalScrollbarSize: 6,
+  },
+}
+
+export function createReadOnlyMonacoEditor(
+  monaco: typeof Monaco,
+  container: HTMLElement,
+  options: Monaco.editor.IStandaloneEditorConstructionOptions = {},
+) {
+  const scrollbar = {
+    ...readonlyEditorOptions.scrollbar,
+    ...options.scrollbar,
+  }
+  return monaco.editor.create(container, {
+    ...readonlyEditorOptions,
+    ...options,
+    scrollbar,
+  })
+}
+
+export function setModelLanguageIfNeeded(
+  monaco: typeof Monaco,
+  model: Monaco.editor.ITextModel,
+  language: string,
+) {
+  if (model.getLanguageId() !== language)
+    monaco.editor.setModelLanguage(model, language)
+}
+
 export function guessMonacoLanguage(code: string) {
   if (code.trimStart().startsWith('<'))
     return 'html'
@@ -134,7 +182,6 @@ export function setupMonacoScrollSync(
       if (activeEditor === 2)
         syncMonacoEditorScrolls(editor2, editor1)
     }),
-    // Keep cursor context aligned even when scroll comes from keyboard/search.
     editor1.onDidChangeCursorPosition(() => syncMonacoEditorScrolls(editor1, editor2)),
     editor2.onDidChangeCursorPosition(() => syncMonacoEditorScrolls(editor2, editor1)),
   ]

packages/rolldown/src/app/styles/global.css

@@ -4,6 +4,13 @@ html, body , #__nuxt{
   padding: 0;
 }
 
+:root {
+  --app-scrollbar-size: 6px;
+  --app-scrollbar-radius: 1px;
+  --app-scrollbar-thumb: #8884;
+  --app-scrollbar-thumb-hover: #8885;
+}
+
 .bg-dots {
   background-image: url('/dot-grid-light.png');
   background-size: 50px;
@@ -91,28 +98,43 @@ summary::-webkit-details-marker {
 
 /* For Scrollbar */
 ::-webkit-scrollbar {
-  width: 6px;
+  width: var(--app-scrollbar-size);
 } 
 
 ::-webkit-scrollbar:horizontal {
-  height: 6px;
+  height: var(--app-scrollbar-size);
 }
 
 ::-webkit-scrollbar-corner {
   background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #8884;
+  background-color: var(--app-scrollbar-thumb);
   transition: background 0.2s ease;
-  border-radius: 1px; 
+  border-radius: var(--app-scrollbar-radius);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #8885;
+  background-color: var(--app-scrollbar-thumb-hover);
 }
 
 ::-webkit-scrollbar-track {
-  border-radius: 1px;
+  border-radius: var(--app-scrollbar-radius);
   background: transparent;
 }
+
+.monaco-scrollable-element > .scrollbar {
+  background: transparent !important;
+}
+
+.monaco-scrollable-element > .scrollbar > .slider {
+  background-color: var(--app-scrollbar-thumb) !important;
+  border-radius: var(--app-scrollbar-radius) !important;
+  transition: background 0.2s ease;
+}
+
+.monaco-scrollable-element > .scrollbar > .slider.active,
+.monaco-scrollable-element > .scrollbar > .slider:hover {
+  background-color: var(--app-scrollbar-thumb-hover) !important;
+}