feat: code viewer

Author: antfu

package.json

@@ -53,7 +53,7 @@
     "vite": "catalog:build",
     "vite-plugin-inspect": "catalog:devtools",
     "vitest": "catalog:testing",
-    "vue": "catalog:",
+    "vue": "catalog:frontend",
     "vue-tsc": "catalog:devtools"
   },
   "resolutions": {

packages/devtools/package.json

@@ -55,16 +55,22 @@
     "ws": "catalog:deps"
   },
   "devDependencies": {
+    "@types/codemirror": "catalog:types",
     "@types/stream-json": "catalog:types",
     "@unocss/nuxt": "catalog:build",
     "@vueuse/nuxt": "catalog:build",
+    "codemirror": "catalog:frontend",
+    "codemirror-theme-vars": "catalog:frontend",
+    "comlink": "catalog:frontend",
     "d3": "catalog:frontend",
     "d3-hierarchy": "catalog:frontend",
     "d3-shape": "catalog:frontend",
+    "diff-match-patch-es": "catalog:frontend",
     "floating-vue": "catalog:frontend",
     "fuse.js": "catalog:frontend",
     "idb-keyval": "catalog:frontend",
     "nanovis": "catalog:frontend",
+    "splitpanes": "catalog:frontend",
     "theme-vitesse": "catalog:frontend",
     "vite-hot-client": "catalog:frontend"
   }

packages/devtools/src/app/app.vue

@@ -6,6 +6,8 @@ import { backend } from './state/backend'
 import { fetchData } from './state/data'
 
 import 'floating-vue/dist/style.css'
+import './styles/cm.css'
+import './styles/splitpanes.css'
 import './styles/global.css'
 import './composables/dark'
 

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

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type CodeMirror from 'codemirror'
+import { nextTick, onMounted, toRefs, useTemplateRef, watchEffect } from 'vue'
+import { guessCodemirrowMode, syncEditorScrolls, syncScrollListeners, useCodeMirror } from '../../composables/codemirror'
+import { settings } from '../../state/settings'
+import { calculateDiffWithWorker } from '../../worker/diff'
+
+const props = defineProps<{
+  from: string
+  to: string
+  oneColumn: boolean
+  diff: boolean
+}>()
+
+const { from, to } = toRefs(props)
+
+const fromEl = useTemplateRef('fromEl')
+const toEl = useTemplateRef('toEl')
+
+let cm1: CodeMirror.Editor
+let cm2: CodeMirror.Editor
+
+onMounted(() => {
+  cm1 = useCodeMirror(
+    fromEl,
+    from,
+    {
+      mode: 'javascript',
+      readOnly: true,
+      lineNumbers: true,
+    },
+  )
+
+  cm2 = useCodeMirror(
+    toEl,
+    to,
+    {
+      mode: 'javascript',
+      readOnly: true,
+      lineNumbers: true,
+    },
+  )
+
+  syncScrollListeners(cm1, cm2)
+
+  watchEffect(() => {
+    cm1.setOption('lineWrapping', settings.value.codeviewerLineWrap)
+    cm2.setOption('lineWrapping', settings.value.codeviewerLineWrap)
+  })
+
+  watchEffect(async () => {
+    cm1.getWrapperElement().style.display = props.oneColumn ? 'none' : ''
+    if (!props.oneColumn) {
+      await nextTick()
+      // Force sync to current scroll
+      cm1.refresh()
+      syncEditorScrolls(cm2, cm1)
+    }
+  })
+
+  watchEffect(async () => {
+    const l = from.value
+    const r = to.value
+    const diffEnabled = props.diff
+
+    cm1.setOption('mode', guessCodemirrowMode(l))
+    cm2.setOption('mode', guessCodemirrowMode(r))
+
+    await nextTick()
+
+    cm1.startOperation()
+    cm2.startOperation()
+
+    // clean up marks
+    cm1.getAllMarks().forEach(i => i.clear())
+    cm2.getAllMarks().forEach(i => i.clear())
+    for (let i = 0; i < cm1.lineCount() + 2; i++)
+      cm1.removeLineClass(i, 'background', 'diff-removed')
+    for (let i = 0; i < cm2.lineCount() + 2; i++)
+      cm2.removeLineClass(i, 'background', 'diff-added')
+
+    if (diffEnabled && from.value) {
+      const changes = await calculateDiffWithWorker(l, r)
+
+      const addedLines = new Set()
+      const removedLines = new Set()
+
+      let indexL = 0
+      let indexR = 0
+      changes.forEach(([type, change]) => {
+        if (type === 1) {
+          const start = cm2.posFromIndex(indexR)
+          indexR += change.length
+          const end = cm2.posFromIndex(indexR)
+          cm2.markText(start, end, { className: 'diff-added-inline' })
+          for (let i = start.line; i <= end.line; i++) addedLines.add(i)
+        }
+        else if (type === -1) {
+          const start = cm1.posFromIndex(indexL)
+          indexL += change.length
+          const end = cm1.posFromIndex(indexL)
+          cm1.markText(start, end, { className: 'diff-removed-inline' })
+          for (let i = start.line; i <= end.line; i++) removedLines.add(i)
+        }
+        else {
+          indexL += change.length
+          indexR += change.length
+        }
+      })
+
+      Array.from(removedLines).forEach(i =>
+        cm1.addLineClass(i, 'background', 'diff-removed'),
+      )
+      Array.from(addedLines).forEach(i =>
+        cm2.addLineClass(i, 'background', 'diff-added'),
+      )
+    }
+
+    cm1.endOperation()
+    cm2.endOperation()
+  })
+})
+
+function _onUpdate(size: number) {
+  // Refresh sizes
+  cm1?.refresh()
+  cm2?.refresh()
+  if (props.oneColumn)
+    return
+  settings.value.codeviewerDiffPanelSize = size
+}
+</script>
+
+<template>
+  <div h-full w-full :class="oneColumn ? 'flex' : 'grid grid-cols-2'">
+    <div v-show="!oneColumn" ref="fromEl" class="h-inherit" />
+    <div ref="toEl" class="h-inherit" />
+  </div>
+</template>
+
+<style lang="postcss">
+.diff-added {
+  --at-apply: bg-green-400/15;
+}
+.diff-removed {
+  --at-apply: bg-red-400/15;
+}
+.diff-added-inline {
+  --at-apply: bg-green-400/30;
+}
+.diff-removed-inline {
+  --at-apply: bg-red-400/30;
+}
+</style>

packages/devtools/src/app/components/display/Duration.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    duration: number | undefined
+    factor?: number
+    color?: boolean
+  }>(),
+  {
+    factor: 1,
+    color: true,
+  },
+)
+
+function getDurationColor(duration: number | undefined) {
+  if (!props.color)
+    return ''
+  if (duration == null)
+    return ''
+  duration = duration * props.factor
+  if (duration < 1)
+    return ''
+  if (duration > 10000)
+    return 'color-scale-critical'
+  if (duration > 1000)
+    return 'color-scale-high'
+  if (duration > 500)
+    return 'color-scale-medium'
+  if (duration > 200)
+    return 'color-scale-low'
+  return 'color-scale-neutral'
+}
+
+const units = computed(() => {
+  if (!props.duration)
+    return ['', '-']
+  if (props.duration < 1)
+    return ['<1', 'ms']
+  if (props.duration < 1000)
+    return [props.duration.toFixed(0), 'ms']
+  if (props.duration < 1000 * 60)
+    return [(props.duration / 1000).toFixed(1), 's']
+  return [(props.duration / 1000 / 60).toFixed(1), 'min']
+})
+</script>
+
+<template>
+  <DisplayNumberWithUnit :class="getDurationColor(duration)" :number="units[0]" :unit="units[1]" />
+</template>

packages/devtools/src/app/components/display/DurationBadge.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+  number: number | string
+  unit: string
+}>()
+</script>
+
+<template>
+  <span block>
+    <span>{{ number }}</span><span ml-0.4 text-xs op75>{{ unit }}</span>
+  </span>
+</template>

packages/devtools/src/app/components/display/NumberWithUnit.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { h } from 'vue'
-import { getHashColorFromString } from '../../utils/color'
+import { getPluginColor } from '../../utils/color'
 
 const props = defineProps<{
   name: string
@@ -40,7 +40,7 @@ function render() {
   const parts = props.name.split(':')
   if (parts.length > 1) {
     return h('span', [
-      h('span', { style: { color: getHashColorFromString(parts[0]) } }, `${parts[0]}:`),
+      h('span', { style: { color: getPluginColor(parts[0]) } }, `${parts[0]}:`),
       h('span', parts.slice(1).join(':')),
     ])
   }

packages/devtools/src/app/components/display/PluginName.vue

@@ -4,6 +4,7 @@ const props = defineProps<{
     top?: boolean
     bottom?: boolean
   }
+  classNodeInline?: string
   classNodeOuter?: string
   classNodeInner?: string
 }>()
@@ -14,11 +15,13 @@ const props = defineProps<{
     <div v-if="props.lines?.top" absolute top-0 left-10 border="r base" h="1/2" max-h-4 z-flowmap-line />
     <div v-if="props.lines?.bottom" absolute bottom-0 left-10 border="r base" h="1/2" max-h-4 z-flowmap-line />
     <slot name="before" />
-    <div flex="~">
-      <div :class="props.classNodeOuter" border="~ base rounded-full" bg-base>
-        <div px3 py1 :class="props.classNodeInner" flex="~ inline gap-2 items-center">
-          <slot name="content" />
-        </div>
+    <div flex="~" :class="props.classNodeInline">
+      <div :class="props.classNodeOuter" border="~ base rounded-full" bg-base of-hidden>
+        <slot name="inner">
+          <div px3 py1 :class="props.classNodeInner" flex="~ inline gap-2 items-center">
+            <slot name="content" />
+          </div>
+        </slot>
       </div>
       <slot name="inline-after" />
     </div>