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

Commit e808175

Browse files
hoihearthoiheart
committed
chore: development
1 parent 89004dc commit e808175

File tree

6 files changed

+165
-44
lines changed

6 files changed

+165
-44
lines changed

‎dev/App.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,10 @@ import template from './template'
4848
export default defineComponent({
4949
setup () {
5050
const modes = ref(['split', 'unified'])
51-
const mode = ref('split')
51+
const mode = ref('unified')
5252
const languages = ref(['javascript', 'html', 'css'])
53-
const language = ref('javascript')
54-
const themes = ref(['coy', 'dark', 'funky', 'okaidia', 'solarizedlight', 'tomorrow', 'twilight'])
53+
const language = ref('html')
54+
const themes = ref(['light', 'okaidia'])
5555
const theme = ref('okaidia')
5656
5757
const prev = ref('')

‎dev/template_test.ts‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
const javascript1 =
2+
`var a1 = {
3+
"name": "vue-diff",
4+
"version": "0.0.0",
5+
"description": "Vue diff viewer",
6+
"private": true
7+
}`
8+
9+
const javascript2 =
10+
`const b2 = {
11+
"name": "vue-diff",
12+
"version": "0.0.1",
13+
"description": "Vue diff viewer",
14+
"scripts": {
15+
"dev": "vite",
16+
"build": "vite build",
17+
"test:unit": "vue-cli-service test:unit",
18+
"test:e2e": "vue-cli-service test:e2e",
19+
"lint": "vue-cli-service lint"
20+
}
21+
}`
22+
23+
const html1 =
24+
`<!doctype html>
25+
<html>
26+
<head>
27+
<meta charset="UTF-8">
28+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
29+
<title>Vue Diff</title>
30+
</head>
31+
<body>
32+
<div id="app"></div>
33+
<script type="module" src="/dev/main.ts"></script>
34+
</body>
35+
</html>`
36+
37+
const html2 =
38+
`<!doctype html>
39+
<html>
40+
<head>
41+
<meta charset="UTF-8">
42+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
43+
<title>Vue Diff</title>
44+
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
45+
</head>
46+
<body class="bg-gray-900">
47+
<div id="app" class="p-12"></div>
48+
<script type="module" src="/dev/main.ts"></script>
49+
</body>
50+
</html>`
51+
52+
const css1 =
53+
`@import '../../node_modules/prismjs/themes/prism-okaidia.css';
54+
55+
.vue-diff-viewer {
56+
background-color: #272822;
57+
}`
58+
59+
const css2 =
60+
`@import 'prismjs/themes/prism-okaidia.css';
61+
62+
div.vue-diff-viewer {
63+
background-color: #666;
64+
}
65+
66+
#vue-diff-viewer {
67+
display: flex;
68+
display: -webkit-flex;
69+
}`
70+
71+
export default {
72+
javascript1,
73+
javascript2,
74+
html1,
75+
html2,
76+
css1,
77+
css2
78+
}

‎src/Code.vue‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,14 @@
1010
</template>
1111
</tr>
1212
<template v-if="mode === 'unified'">
13-
<template :key="index" v-for="(line, index) in data">
14-
<tr v-if="!getSkipUnified(line, index)">
15-
<td class="lineNum" :class="`vue-diff-cell-${line.type}`">
16-
{{ index === 1 ? line.lineNum : undefined }}
17-
</td>
18-
<td class="code" :class="`vue-diff-cell-${line.type}`">
19-
<pre :class="`language-${language}`"><code :class="`language-${language}`" v-html="getHighlight(line.value)"></code></pre>
20-
</td>
21-
</tr>
22-
</template>
13+
<tr>
14+
<td class="lineNum" :class="`vue-diff-cell-${data[0].type}`">
15+
{{ data[0].lineNum }}
16+
</td>
17+
<td class="code" :class="`vue-diff-cell-${data[0].type}`">
18+
<pre :class="`language-${language}`"><code :class="`language-${language}`" v-html="getHighlight(data[0].value)"></code></pre>
19+
</td>
20+
</tr>
2321
</template>
2422
</template>
2523

@@ -53,7 +51,6 @@ export default defineComponent({
5351
const getHighlight = (value: string) => {
5452
if (!value) return '\n'
5553
56-
console.log(Prism.highlight(value, Prism.languages[props.language], props.language))
5754
return Prism.highlight(value, Prism.languages[props.language], props.language)
5855
// .replace(new RegExp(`${MODIFIED_START_TAG}`, 'gi'), '<span class="token modified">')
5956
// .replace(new RegExp(`${MODIFIED_CLOSE_TAG}`, 'gi'), '</span>')

‎src/Diff.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default defineComponent({
5353
() => props.prev,
5454
() => props.current
5555
], () => {
56-
lines.value = renderLines(props.prev, props.current)
56+
lines.value = renderLines(props.mode, props.prev, props.current)
5757
}, { immediate: true })
5858
5959
return { lines }

‎src/utils.ts‎

Lines changed: 75 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Prism, { Languages } from 'prismjs'
1+
import Prism from 'prismjs'
22
import * as Diff from 'diff'
33

44
import type { Change } from 'diff'
@@ -22,6 +22,7 @@ const MODIFIED_START_TAG = '<span class="token modified">'
2222
const MODIFIED_CLOSE_TAG = '</span>'
2323

2424
function getDiffType (diff: Change) {
25+
if (!diff.count) return 'disabled'
2526
return diff.added ? 'added' : diff.removed ? 'removed' : 'equal'
2627
}
2728

@@ -37,37 +38,33 @@ const renderLine = (diffWords: Array<Change>) => {
3738
}).join('')
3839
}
3940

40-
const getLines = (diffsMap: Array<Diffs>) => {
41-
const result: any = [] // Array(0): prev, Array(1): current
41+
const getSplitLines = (diffsMap: Array<Diffs>): Array<Lines> => {
42+
const result: Array<Lines> = [] // Array(0): prev, Array(1): current
4243
const lineNum = {
4344
prev: 0,
4445
current: 0
4546
}
4647

47-
diffsMap.map((diff) => {
48-
if (diff.length < 2) {
49-
diff.push({ ...diff[0] })
50-
}
51-
52-
const prevLines = diff[0].value.replace(/\n$/, '').split('\n')
53-
const currentLines = diff[1].value.replace(/\n$/, '').split('\n')
48+
diffsMap.map((diffs) => {
49+
const prevLines = diffs[0].value.replace(/\n$/, '').split('\n')
50+
const currentLines = diffs[1].value.replace(/\n$/, '').split('\n')
5451
const loopCount = Math.max(prevLines.length, currentLines.length)
5552

5653
for (let i = 0; i < loopCount; i++) {
57-
const hasPrevLine = typeof prevLines[i] !== 'undefined'
58-
const hasCurrentLine = typeof currentLines[i] !== 'undefined'
54+
const hasPrevLine = getDiffType(diffs[0]) !== 'disabled'
55+
const hasCurrentLine = getDiffType(diffs[1]) !== 'disabled'
5956

6057
if (hasPrevLine) lineNum.prev = lineNum.prev + 1
6158
if (hasCurrentLine) lineNum.current = lineNum.current + 1
6259

6360
result.push([
6461
{
65-
type: hasPrevLine ? getDiffType(diff[0]) : 'disabled',
62+
type: getDiffType(diffs[0]),
6663
lineNum: hasPrevLine ? lineNum.prev : undefined,
6764
value: hasPrevLine ? prevLines[i] : undefined
6865
},
6966
{
70-
type: hasCurrentLine ? getDiffType(diff[1]) : 'disabled',
67+
type: getDiffType(diffs[1]),
7168
lineNum: hasCurrentLine ? lineNum.current : undefined,
7269
value: hasCurrentLine ? currentLines[i] : undefined
7370
}
@@ -78,7 +75,49 @@ const getLines = (diffsMap: Array<Diffs>) => {
7875
return result
7976
}
8077

81-
const renderLines = (prev: string, current: string): () => Array<Lines> => {
78+
const getUnifiedLines = (diffsMap: Array<Diffs>): Array<Lines> => {
79+
const result: Array<Lines> = [] // Array(0)
80+
let lineNum = 0
81+
82+
diffsMap.map((diffs) => {
83+
const prevLines = diffs[0].value.replace(/\n$/, '').split('\n')
84+
const currentLines = diffs[1].value.replace(/\n$/, '').split('\n')
85+
86+
prevLines.map(value => {
87+
const type = getDiffType(diffs[0])
88+
89+
if (type !== 'removed') return
90+
91+
result.push([
92+
{
93+
type: getDiffType(diffs[0]),
94+
lineNum: undefined,
95+
value: value
96+
}
97+
])
98+
})
99+
100+
currentLines.map(value => {
101+
const type = getDiffType(diffs[1])
102+
103+
if (type === 'disabled') return
104+
105+
lineNum = lineNum + 1
106+
107+
result.push([
108+
{
109+
type: getDiffType(diffs[1]),
110+
lineNum,
111+
value: value
112+
}
113+
])
114+
})
115+
})
116+
117+
return result
118+
}
119+
120+
const renderLines = (mode: Mode, prev: string, current: string): Array<Lines> => {
82121
const diffsMap = Diff.diffLines(prev, current).reduce((acc: Array<Diffs>, curr) => {
83122
const type = getDiffType(curr)
84123

@@ -101,7 +140,27 @@ const renderLines = (prev: string, current: string): () => Array<Lines> => {
101140
return acc
102141
}, [])
103142

104-
return getLines(diffsMap)
143+
diffsMap.map((diffs) => {
144+
if (diffs.length > 1) return
145+
146+
const type = getDiffType(diffs[0])
147+
148+
if (type === 'added') {
149+
diffs.unshift({ value: '' })
150+
} else if (type === 'removed') {
151+
diffs.push({ value: '' })
152+
} else if (type === 'equal') {
153+
diffs.push({ ...diffs[0] })
154+
}
155+
})
156+
157+
if (mode === 'split') {
158+
return getSplitLines(diffsMap)
159+
} else if (mode === 'unified') {
160+
return getUnifiedLines(diffsMap)
161+
} else {
162+
return []
163+
}
105164
}
106165

107166
export { MODIFIED_START_TAG, MODIFIED_CLOSE_TAG, renderLines }

‎test.js‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)