@yuhufe/wtool-vdiff 0.0.1

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@yuhufe/wtool-vdiff",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "description": "Monaco diff viewer as Vue 3 Web Component",
+  "keywords": [
+    "git",
+    "diff",
+    "monaco",
+    "vue3",
+    "web-component"
+  ],
+  "scripts": {
+    "dev": "pnpm run dev:site",
+    "dev:lib": "vite build --watch --mode development",
+    "build:site": "vite build --mode production --config site/vite.config.ts",
+    "dev:site": "vite --config site/vite.config.ts",
+    "build": "vite build --mode production"
+  },
+  "main": "./dist/wtool-vdiff.cjs.js",
+  "module": "./dist/wtool-vdiff.es.js",
+  "files": [
+    "dist/*",
+    "src/*"
+  ],
+  "types": "dist/wtool-vdiff.es.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@yuhufe/web-ui": "workspace:*",
+    "@monaco-editor/loader": "^1.6.1",
+    "monaco-editor": "^0.53.0",
+    "less": "4.6.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.3",
+    "vue": "^3.5.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/defghy/web-toolkits.git"
+  }
+}

package/src/DiffViewer/DiffViewer.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="diff-viewer-wrap" :style="viewerStyle">
+    <TopBar class="top-bar" :diffPair="diffPair" />
+    <div class="content-wrap" v-show="!viewed" v-loading="loading">
+      <MonacoDiffViewer
+        class="monaco-container"
+        :originalCode="originalCode"
+        :modifiedCode="modifiedCode"
+        :language="language"
+        :options="mergedOptions"
+        :modelOptions="modelOptions"
+        @render-complete="onMonacoRenderComplete"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+import { loadingDirective } from '@yuhufe/web-ui'
+import type { DiffEditorOptions, WtoolDiffViewerProps, ModelOptions } from '../types'
+import MonacoDiffViewer from './MonacoDiffViewer.vue'
+import TopBar from './TopBar.vue'
+import { useDiffViewer } from './useDiffView'
+import { patch2Pair } from './utils/patch2Pair'
+import { autoHeight } from './utils/autoHeight'
+
+const vLoading = loadingDirective
+const loading = ref(true)
+
+const _renderStart = performance.now()
+const onMonacoRenderComplete = () => {
+  const cost = performance.now() - _renderStart
+  console.log(`[DiffViewer] 渲染耗时: ${cost.toFixed(2)} ms`)
+  loading.value = false
+}
+
+const props = withDefaults(defineProps<WtoolDiffViewerProps>(), {
+  diffPair: () => [],
+  diffPatch: '',
+  language: 'plaintext',
+  options: () => ({}),
+  modelOptions: () => ({}),
+})
+
+const diffPair = ref(props.diffPair || null)
+const initDiff = function () {
+  if (diffPair.value?.length) {
+    return
+  }
+
+  // diffPatch => diffPair
+  diffPair.value = patch2Pair(props.diffPatch)
+}
+initDiff()
+console.log(`[DiffViewer] patch耗时: ${(performance.now() - _renderStart).toFixed(2)} ms`)
+
+const originalCode = computed(() => diffPair.value[0].content)
+const modifiedCode = computed(() => diffPair.value[1].content)
+
+const { funcs, registerFunc } = useDiffViewer({ isMaster: true })
+
+/** raw 勾选时展示全文；未勾选时折叠无变更块，仅保留差异附近的上下文行 */
+const mergedOptions = computed(() => {
+  // canUnchangeVisible=false（patch 模式）时，未改动区域为空行，强制折叠且忽略 rawed
+  const forceHide = !canUnchangeVisible.value
+
+  // 折叠上下文
+  let hideUnchangedRegions = props.options.hideUnchangedRegions || {}
+  if (!forceHide && rawed.value) {
+    hideUnchangedRegions = {
+      enabled: false,
+      ...hideUnchangedRegions,
+    }
+  } else {
+    hideUnchangedRegions = {
+      enabled: true,
+      contextLineCount: 3,
+      ...hideUnchangedRegions,
+    }
+  }
+
+  return {
+    ...props.options,
+    hideUnchangedRegions,
+  }
+})
+
+const viewed = ref<boolean>(false) // 是否已读
+const rawed = ref<boolean>(false) // 是否显示原始文件
+const canUnchangeVisible = ref(!props.diffPatch) // patch 模式下未改动区域为空行，不可展示
+
+// 编辑器样式
+const viewerHeight = computed(() => {
+  if (props.viewerStyle?.height) {
+    return props.viewerStyle.height
+  }
+
+  const heightRange = {
+    minHeight: '100px',
+    maxHeight: '250px',
+    ...(props.viewerStyle || {}),
+  }
+
+  const height = autoHeight({
+    patch: props.diffPatch,
+    pair: props.diffPair,
+    ...heightRange,
+    unchangedVisiable: funcs.rawed.value,
+    unchangedCtxLineNum: mergedOptions.value.hideUnchangedRegions.contextLineCount!,
+  })
+
+  return `${height}px`
+})
+const viewerStyle = computed(() => {
+  return {
+    '--viewer-width': props.viewerStyle?.width || '100%',
+    '--viewer-height': viewerHeight.value,
+  }
+})
+
+registerFunc({
+  viewed,
+  rawed,
+  canUnchangeVisible,
+})
+</script>
+
+<style scoped>
+.diff-viewer-wrap {
+  width: var(--viewer-width);
+  border: 1px solid #ddd;
+
+  .top-bar {
+    flex-shrink: 0;
+  }
+  .content-wrap {
+    height: var(--viewer-height);
+    overflow: hidden;
+  }
+}
+</style>

package/src/DiffViewer/MonacoDiffViewer.vue

@@ -0,0 +1,178 @@
+<template>
+  <div ref="containerEl" class="monaco-editor-container" :class="{ 'hide-unchanged-actions': !canUnchangeVisible }" />
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount, shallowRef } from 'vue'
+import loader from '@monaco-editor/loader'
+import type * as Monaco from 'monaco-editor'
+import { useDiffViewer } from './useDiffView'
+
+type DiffEditorOptions = Monaco.editor.IStandaloneDiffEditorConstructionOptions
+type ModelOptions = Monaco.editor.ITextModelUpdateOptions
+
+const props = withDefaults(
+  defineProps<{
+    originalCode?: string
+    modifiedCode?: string
+    language?: string
+    options?: DiffEditorOptions
+    modelOptions?: ModelOptions
+  }>(),
+  {
+    originalCode: '',
+    modifiedCode: '',
+    language: 'plaintext',
+    options: () => ({}),
+    modelOptions: () => ({}),
+  }
+)
+
+const emit = defineEmits<{ renderComplete: [] }>()
+
+const { funcs } = useDiffViewer()
+const canUnchangeVisible = funcs.canUnchangeVisible
+
+const containerEl = ref<HTMLDivElement | null>(null)
+const monacoInstance = shallowRef<typeof Monaco | null>(null)
+const editor = shallowRef<Monaco.editor.IStandaloneDiffEditor | null>(null)
+const originalModel = shallowRef<Monaco.editor.ITextModel | null>(null)
+const modifiedModel = shallowRef<Monaco.editor.ITextModel | null>(null)
+
+let disposed = false
+
+onMounted(() => {
+  disposed = false
+
+  const init = async () => {
+    const monaco = await loader.init()
+    if (disposed || !containerEl.value) return
+
+    monacoInstance.value = monaco
+    originalModel.value = monaco.editor.createModel(props.originalCode, props.language)
+    modifiedModel.value = monaco.editor.createModel(props.modifiedCode, props.language)
+
+    editor.value = monaco.editor.createDiffEditor(containerEl.value, {
+      automaticLayout: true,
+      readOnly: true,
+      renderSideBySide: true,
+      useInlineViewWhenSpaceIsLimited: false,
+      scrollBeyondLastLine: false,
+      hideUnchangedRegions: {
+        enabled: true,
+        contextLineCount: 3,
+      },
+      scrollbar: {
+        verticalScrollbarSize: 8,
+        horizontalScrollbarSize: 8,
+      },
+      ...props.options,
+    })
+    editor.value.setModel({
+      original: originalModel.value,
+      modified: modifiedModel.value,
+    })
+
+    if (Object.keys(props.modelOptions).length > 0) {
+      originalModel.value.updateOptions(props.modelOptions)
+      modifiedModel.value.updateOptions(props.modelOptions)
+    }
+
+    // 仅在首次 diff 计算完成后统计行数，之后立即注销监听。
+    // Monaco 用 endLineNumber === 0 表示该侧无变更行（纯删除或纯新增），span 需特殊处理。
+    const onDidUpdateDiffDisposable = editor.value.onDidUpdateDiff(() => {
+      const changes = editor.value?.getLineChanges() ?? []
+      const span = (s: number, e: number) => (e === 0 ? 0 : e - s + 1)
+      const added = changes.reduce((n, c) => n + span(c.modifiedStartLineNumber, c.modifiedEndLineNumber), 0)
+      const removed = changes.reduce((n, c) => n + span(c.originalStartLineNumber, c.originalEndLineNumber), 0)
+      funcs.updateChangedLines?.({ added, removed })
+      emit('renderComplete')
+      onDidUpdateDiffDisposable.dispose()
+    })
+  }
+
+  void init()
+})
+
+onBeforeUnmount(() => {
+  disposed = true
+  editor.value?.dispose()
+  originalModel.value?.dispose()
+  modifiedModel.value?.dispose()
+  editor.value = null
+  originalModel.value = null
+  modifiedModel.value = null
+  monacoInstance.value = null
+})
+
+watch(
+  () => props.options,
+  opts => {
+    if (!editor.value) return
+    editor.value.updateOptions(opts)
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.originalCode,
+  v => {
+    if (!originalModel.value) return
+    if (originalModel.value.getValue() !== v) {
+      originalModel.value.setValue(v)
+    }
+  }
+)
+
+watch(
+  () => props.modifiedCode,
+  v => {
+    if (!modifiedModel.value) return
+    if (modifiedModel.value.getValue() !== v) {
+      modifiedModel.value.setValue(v)
+    }
+  }
+)
+
+watch(
+  () => props.language,
+  lang => {
+    const monaco = monacoInstance.value
+    const om = originalModel.value
+    const mm = modifiedModel.value
+    if (!monaco || !om || !mm) return
+    monaco.editor.setModelLanguage(om, lang)
+    monaco.editor.setModelLanguage(mm, lang)
+  }
+)
+
+watch(
+  () => props.modelOptions,
+  mo => {
+    if (!originalModel.value || !modifiedModel.value) return
+    originalModel.value.updateOptions(mo)
+    modifiedModel.value.updateOptions(mo)
+  },
+  { deep: true }
+)
+</script>
+
+<style scoped>
+.monaco-editor-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<style>
+/* patch 模式：未改动区域为空行，隐藏 monaco 内置的展开未改动区域按钮（非 scoped，配合 JS class 控制） */
+.monaco-editor-container.hide-unchanged-actions {
+  .diff-hidden-lines-widget {
+    cursor: not-allowed;
+    .diff-hidden-lines {
+      pointer-events: none;
+      opacity: 0.75;
+    }
+  }
+}
+</style>

package/src/DiffViewer/TopBar.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="top-bar-wrap">
+    <div class="title-area">
+      <div class="filename">{{ filename }}</div>
+      <div class="diff-line-num">
+        <div class="add">+{{ changed.added }}</div>
+        <div class="del">-{{ changed.removed }}</div>
+      </div>
+    </div>
+    <div class="toolbar">
+      <label>
+        <input type="checkbox" :checked="viewed" @change="onViewedChange" />
+        viewed
+      </label>
+      <label v-if="canUnchangeVisible">
+        <input type="checkbox" :checked="rawed" @change="onRawedChange" />
+        raw
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, reactive } from 'vue'
+import { useDiffViewer } from './useDiffView'
+
+const { funcs, registerFunc } = useDiffViewer()
+
+const props = withDefaults(
+  defineProps<{
+    diffPair?: { filename: string; content: string }[]
+  }>(),
+  {
+    diffPair: () => [],
+  }
+)
+
+const filename = computed(() => props.diffPair[0].filename)
+
+const { viewed, rawed, canUnchangeVisible } = funcs
+const onViewedChange = function (evt) {
+  const checked = (evt.target as HTMLInputElement).checked
+  viewed.value = checked
+}
+const onRawedChange = function (evt) {
+  const checked = (evt.target as HTMLInputElement).checked
+  rawed.value = checked
+}
+
+onMounted(() => {
+  // funcs.options.toolbar?.render($el, {})
+})
+
+// 变更行数
+const changed = ref({ added: 0, removed: 0 })
+function updateChangedLines(newVal) {
+  Object.assign(changed.value, newVal)
+}
+
+registerFunc({
+  viewed,
+  rawed,
+  updateChangedLines,
+})
+</script>
+
+<style scoped>
+.top-bar-wrap {
+  box-sizing: border-box;
+  height: 32px;
+
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  background-color: #f7f7f7;
+  padding: 4px 8px;
+
+  .title-area {
+    flex: 1;
+    display: flex;
+    align-items: center;
+
+    .filename {
+      font-size: 14px;
+    }
+
+    .diff-line-num {
+      display: inline-flex;
+      font-size: 12px;
+      font-weight: bold;
+      margin-left: 4px;
+      .add {
+        color: #1a7f37;
+      }
+      .del {
+        color: #d1242f;
+        margin-left: 4px;
+      }
+    }
+  }
+  .toolbar {
+    font-size: 12px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    label {
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+
+      &.disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+  }
+}
+</style>

package/src/DiffViewer/createDiffViewer.ts

@@ -0,0 +1,49 @@
+import { defineCustomElement } from 'vue'
+import type { WtoolDiffViewerProps } from '../types'
+import DiffViewer from './DiffViewer.vue'
+
+export type DiffViewerProps = WtoolDiffViewerProps
+
+export const WTOOL_DIFF_VIEWER_TAG = 'wtool-diff-viewer'
+
+export const WtoolDiffViewer = defineCustomElement(DiffViewer, {
+  shadowRoot: false,
+})
+
+export function register(tagName: string = WTOOL_DIFF_VIEWER_TAG): void {
+  if (customElements.get(tagName)) return
+  customElements.define(tagName, WtoolDiffViewer)
+}
+
+export interface DiffViewerInstance {
+  update(props: Partial<DiffViewerProps>): void
+  destroy(): void
+}
+
+function applyProps(el: InstanceType<typeof WtoolDiffViewer>, props: Partial<DiffViewerProps>): void {
+  const node = el as unknown as Record<string, unknown>
+  for (const key of Object.keys(props) as (keyof DiffViewerProps)[]) {
+    const v = props[key]
+    if (v !== undefined) {
+      node[key as string] = v
+    }
+  }
+}
+
+export function createDiffViewer(target: HTMLElement, initialProps: DiffViewerProps = {}): DiffViewerInstance {
+  register()
+  const el = new WtoolDiffViewer()
+
+  applyProps(el, initialProps)
+
+  target.appendChild(el)
+
+  return {
+    update(newProps: Partial<DiffViewerProps>) {
+      applyProps(el, newProps)
+    },
+    destroy() {
+      el.remove()
+    },
+  }
+}

package/src/DiffViewer/index.ts

@@ -0,0 +1,8 @@
+export {
+  WTOOL_DIFF_VIEWER_TAG,
+  WtoolDiffViewer,
+  register as registerDiffViewer,
+  createDiffViewer,
+  type DiffViewerProps,
+  type DiffViewerInstance,
+} from './createDiffViewer'

package/src/DiffViewer/useDiffView.ts

@@ -0,0 +1,16 @@
+import type { Ref } from 'vue'
+import { useCompExp } from '@yuhufe/web-ui'
+
+// 存放单个diffEditor的数据
+export const useDiffViewer = function ({ isMaster = false } = {}) {
+  const exp = useCompExp<{
+    viewed: Ref<boolean>
+    rawed: Ref<boolean>
+    updateViewed: (viewed: boolean) => any // 控制是否viewed
+    updateRawed: (args: boolean) => any // 控制是否收起展开
+    updateChangedLines: (args: { added: number; removed: number }) => any
+    canUnchangeVisible: Ref<boolean> // 未改动区域是否可见
+  }>({ isMaster, key: 'diffViewer' })
+
+  return { ...exp }
+}