Skip to content
This repository was archived by the owner on Feb 10, 2025. It is now read-only.

Commit 853704f

Browse files
hoihearthoiheart
committed
refactor: source, vite config
1 parent 9247017 commit 853704f

File tree

9 files changed

+653
-450
lines changed

9 files changed

+653
-450
lines changed

‎package-lock.json‎

Lines changed: 582 additions & 355 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,12 @@
3232
},
3333
"main": "dist/index.js",
3434
"peerDependencies": {
35-
"vue": "^3.0.0"
35+
"vue": "^3.0.7"
3636
},
3737
"dependencies": {
38+
"@vueuse/core": "^4.6.3",
3839
"diff-match-patch": "^1.0.5",
39-
"highlight.js": "^10.5.0",
40-
"lodash-es": "^4.17.21"
40+
"highlight.js": "^10.5.0"
4141
},
4242
"devDependencies": {
4343
"@babel/plugin-transform-runtime": "^7.12.1",
@@ -50,16 +50,15 @@
5050
"@types/diff-match-patch": "^1.0.32",
5151
"@types/highlight.js": "^10.1.0",
5252
"@types/jest": "^24.0.19",
53-
"@types/lodash-es": "^4.17.4",
5453
"@typescript-eslint/eslint-plugin": "^2.33.0",
5554
"@typescript-eslint/parser": "^2.33.0",
56-
"@vitejs/plugin-vue": "^1.0.5",
55+
"@vitejs/plugin-vue": "^1.1.5",
5756
"@vue/cli-plugin-babel": "~4.5.0",
5857
"@vue/cli-plugin-eslint": "~4.5.0",
5958
"@vue/cli-plugin-typescript": "~4.5.0",
6059
"@vue/cli-plugin-unit-jest": "~4.5.0",
6160
"@vue/cli-service": "~4.5.0",
62-
"@vue/compiler-sfc": "^3.0.0",
61+
"@vue/compiler-sfc": "^3.0.7",
6362
"@vue/eslint-config-standard": "^5.1.2",
6463
"@vue/eslint-config-typescript": "^5.0.2",
6564
"@vue/test-utils": "^2.0.0-0",
@@ -82,9 +81,9 @@
8281
"sass": "^1.26.5",
8382
"sass-loader": "^8.0.2",
8483
"typescript": "^3.9.6",
85-
"vite": "^2.0.0-beta.29",
86-
"vue": "^3.0.5",
87-
"vue-jest": "^5.0.0-0"
84+
"vite": "^2.1.0",
85+
"vue-jest": "^5.0.0-0",
86+
"vue-tsc": "^0.0.8"
8887
},
8988
"lint-staged": {
9089
"*.{js,jsx,vue,ts,tsx}": [

‎src/Code.vue‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@
33
</template>
44

55
<script lang="ts">
6-
import { defineComponent, ref, onMounted, watch, nextTick } from 'vue'
6+
import { defineComponent, nextTick, onMounted, ref, watch } from 'vue'
77
import { setHighlightCode } from './utils'
88
9+
import type { PropType } from 'vue'
10+
import type { VirtualScroll } from './types'
11+
912
export default defineComponent({
1013
props: {
1114
language: {
@@ -15,6 +18,10 @@ export default defineComponent({
1518
code: {
1619
type: String,
1720
required: true
21+
},
22+
scrollOptions: {
23+
type: [Boolean, Object] as PropType<false|VirtualScroll>,
24+
default: false
1825
}
1926
},
2027
emits: ['rendered'],
@@ -31,6 +38,10 @@ export default defineComponent({
3138
3239
nextTick(() => emit('rendered'))
3340
}, { immediate: true })
41+
42+
watch([() => props.scrollOptions], () => {
43+
nextTick(() => emit('rendered'))
44+
}, { deep: true })
3445
})
3546
3647
return {

‎src/Diff.vue‎

Lines changed: 15 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
>
1111
<div
1212
class="vue-diff-viewer-inner"
13-
:style="{ minHeight: minHeight ? minHeight + 'px' : undefined }"
13+
:style="{ minHeight }"
1414
>
1515
<Line
1616
v-for="(data, index) in visible"
@@ -19,7 +19,7 @@
1919
:language="language"
2020
:meta="meta[data.index]"
2121
:render="render[data.index]"
22-
:virtualScroll="scrollOptions"
22+
:scrollOptions="scrollOptions"
2323
@setLineHeight="setLineHeight"
2424
/>
2525
</div>
@@ -31,17 +31,14 @@
3131
import {
3232
computed,
3333
defineComponent,
34-
onMounted,
3534
ref,
36-
watch
35+
toRaw
3736
} from 'vue'
38-
import debounce from 'lodash-es/debounce'
39-
import { useVirtualScroll } from './hooks'
40-
import { renderLines } from './utils'
37+
import { useVirtualScroll, useRender } from './hooks'
4138
import Line from './Line.vue'
4239
4340
import type { PropType } from 'vue'
44-
import type { Meta, VirtualScroll, Mode, Theme, Lines } from './types'
41+
import type { Mode, Theme, VirtualScroll } from './types'
4542
4643
export default defineComponent({
4744
components: {
@@ -79,45 +76,17 @@ export default defineComponent({
7976
},
8077
setup (props) {
8178
const viewer = ref<null|HTMLElement>(null)
82-
const meta = ref<Array<Meta>>([])
83-
const render = ref<Array<Lines>>([])
84-
const visible = computed(() => meta.value.filter(item => item.visible))
85-
const { minHeight, scrollOptions, setMeta } = useVirtualScroll({
86-
meta,
87-
viewer,
88-
virtualScroll: props.virtualScroll,
89-
render
90-
})
91-
92-
const setData = () => {
93-
render.value = renderLines(props.mode, props.prev, props.current)
94-
meta.value.splice(render.value.length)
95-
render.value.map((v, index: number) => {
96-
const item = meta.value[index]
97-
meta.value[index] = {
98-
index,
99-
visible: item?.visible || !props.virtualScroll,
100-
top: item?.top || undefined,
101-
height: item?.height || 24
102-
}
103-
})
104-
setMeta()
105-
}
106-
107-
onMounted(() => {
108-
watch(
109-
[
110-
() => props.mode,
111-
() => props.prev,
112-
() => props.current
113-
],
114-
debounce(setData, props.inputDelay),
115-
{
116-
immediate: true,
117-
deep: true
118-
}
119-
)
79+
const scrollOptions = computed(() => {
80+
if (!props.virtualScroll) return false
81+
return {
82+
height: 500,
83+
lineMinHeight: 24,
84+
scrollDelay: 250,
85+
...(typeof props.virtualScroll === 'object' ? toRaw(props.virtualScroll) : {})
86+
}
12087
})
88+
const { meta, render, visible } = useRender(props, viewer, scrollOptions)
89+
const { minHeight } = useVirtualScroll(props, viewer, scrollOptions, meta)
12190
12291
const setLineHeight = (index: number, height: number) => {
12392
if (meta.value[index]) {

‎src/Line.vue‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,7 @@
33
ref="line"
44
class="vue-diff-row"
55
:class="`vue-diff-row-${mode}`"
6-
:style="virtualScroll ? {
7-
position: 'absolute',
8-
left: 0,
9-
top: 0,
10-
transform: `translate3d(0, ${meta.top}px, 0)`,
11-
minHeight: virtualScroll.lineMinHeight + 'px'
12-
} : undefined">
6+
:style="rowStyle">
137
<!-- split view -->
148
<template v-if="mode === 'split'">
159
<template :key="index" v-for="(line, index) in render">
@@ -20,6 +14,7 @@
2014
<Code
2115
:language="language"
2216
:code="setCode(line, render, index)"
17+
:scrollOptions="scrollOptions"
2318
@rendered="rendered"
2419
/>
2520
</div>
@@ -35,6 +30,7 @@
3530
<Code
3631
:language="language"
3732
:code="setCode(render[0])"
33+
:scrollOptions="scrollOptions"
3834
@rendered="rendered"
3935
/>
4036
</div>
@@ -44,11 +40,12 @@
4440
</template>
4541

4642
<script lang="ts">
47-
import { defineComponent, PropType, ref } from 'vue'
43+
import { computed, defineComponent, ref } from 'vue'
4844
import Code from './Code.vue'
4945
import { renderWords } from './utils'
5046
51-
import type { Meta, Mode, Lines, Line } from './types'
47+
import type { PropType } from 'vue'
48+
import type { Meta, Mode, Lines, Line, VirtualScroll } from './types'
5249
5350
export default defineComponent({
5451
components: {
@@ -71,10 +68,24 @@ export default defineComponent({
7168
type: Object as PropType<Lines>,
7269
required: true
7370
},
74-
virtualScroll: {}
71+
scrollOptions: {
72+
type: [Boolean, Object] as PropType<false|VirtualScroll>,
73+
default: false
74+
}
7575
},
7676
setup (props, { emit }) {
7777
const line = ref<null|HTMLElement>(null)
78+
const rowStyle = computed(() => {
79+
if (!props.scrollOptions) return undefined
80+
return {
81+
position: 'absolute',
82+
left: 0,
83+
top: 0,
84+
transform: `translate3d(0, ${props.meta.top}px, 0)`,
85+
minHeight: props.scrollOptions.lineMinHeight + 'px'
86+
}
87+
})
88+
7889
const setCode = (line: Line, render?: Lines, index?: number) => {
7990
if (!line.value) return '\n'
8091
@@ -95,7 +106,7 @@ export default defineComponent({
95106
emit('setLineHeight', props.meta.index, line.value.offsetHeight)
96107
}
97108
98-
return { line, setCode, rendered }
109+
return { line, rendered, rowStyle, setCode }
99110
}
100111
})
101112
</script>

‎src/shims-vue.d.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
declare module 'lodash-es/debounce'
2-
declare module 'lodash-es/throttle'
1+
declare module '@vueuse/core'
32
declare module 'highlight.js/lib/core'
43
declare module 'highlight.js/lib/languages/css'
54
declare module 'highlight.js/lib/languages/xml'

‎src/types.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,11 @@ export interface Meta {
2323
index: number;
2424
visible: boolean;
2525
top?: number;
26-
height: number;
26+
height?: number;
2727
}
2828

2929
export interface VirtualScroll {
30-
height?: number;
31-
lineMinHeight?: number;
30+
height: number;
31+
lineMinHeight: number;
32+
scrollDelay: number;
3233
}

‎tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"baseUrl": ".",
1414
"types": [
1515
"webpack-env",
16-
"jest"
16+
"jest",
17+
"vite/client"
1718
],
1819
"paths": {
1920
"@/*": [

‎vite.config.js‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,12 @@
1+
import { defineConfig } from 'vite'
12
import vue from '@vitejs/plugin-vue'
23

3-
export default {
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
base: '/vue-diff/demo/',
47
build: {
58
outDir: 'demo',
6-
assetsDir: './',
7-
base: '/vue-diff/demo/'
9+
assetsDir: './'
810
},
9-
optimizeDeps: {
10-
include: [
11-
'lodash-es/throttle',
12-
'lodash-es/debounce',
13-
'highlight.js/lib/core',
14-
'highlight.js/lib/languages/css',
15-
'highlight.js/lib/languages/xml',
16-
'highlight.js/lib/languages/markdown',
17-
'highlight.js/lib/languages/javascript',
18-
'highlight.js/lib/languages/json',
19-
'highlight.js/lib/languages/plaintext',
20-
'highlight.js/lib/languages/typescript',
21-
'highlight.js/lib/languages/yaml' // extend language test
22-
]
23-
},
24-
plugins: [
25-
vue()
26-
]
27-
}
11+
plugins: [vue()]
12+
})

0 commit comments

Comments
 (0)