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

Commit 0fd14c7

Browse files
hoihearthoiheart
committed
chore: development
1 parent f3c8547 commit 0fd14c7

File tree

5 files changed

+109
-49
lines changed

5 files changed

+109
-49
lines changed

‎dev/App.vue‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@
4242
</template>
4343

4444
<script lang="ts">
45-
import { defineComponent, ref } from 'vue'
45+
import { defineComponent, ref, watch } from 'vue'
46+
import template from './template'
4647
4748
export default defineComponent({
4849
setup () {
@@ -53,27 +54,26 @@ export default defineComponent({
5354
const themes = ref(['coy', 'dark', 'funky', 'okaidia', 'solarizedlight', 'tomorrow', 'twilight'])
5455
const theme = ref('okaidia')
5556
56-
const prev = ref(
57-
`var a1 = {
58-
"name": "vue-diff",
59-
"version": "0.0.0",
60-
"description": "Vue diff viewer",
61-
"private": true
62-
}`)
57+
const prev = ref('')
58+
const current = ref('')
6359
64-
const current = ref(
65-
`const b2 = {
66-
"name": "vue-diff",
67-
"version": "0.0.1",
68-
"description": "Vue diff viewer",
69-
"scripts": {
70-
"dev": "vite",
71-
"build": "vite build",
72-
"test:unit": "vue-cli-service test:unit",
73-
"test:e2e": "vue-cli-service test:e2e",
74-
"lint": "vue-cli-service lint"
75-
}
76-
}`)
60+
watch(() => language.value, () => {
61+
if (language.value === 'javascript') {
62+
prev.value = template.javascript1
63+
current.value = template.javascript2
64+
} else if (language.value === 'html') {
65+
prev.value = template.html1
66+
current.value = template.html2
67+
} else if (language.value === 'css') {
68+
prev.value = template.css1
69+
current.value = template.css2
70+
} else {
71+
prev.value = ''
72+
current.value = ''
73+
}
74+
}, {
75+
immediate: true
76+
})
7777
7878
return {
7979
modes,

‎dev/template.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: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,19 @@
44
{{ data.lineNum }}
55
</td>
66
<td class="code">
7-
<pre><code ref="codeRef" :class="`language-${language}`" v-html="code || '\n'"></code></pre>
7+
<pre :class="`language-${language}`"><code ref="codeRef" :class="`language-${language}`" v-html="code || '\n'"></code></pre>
88
</td>
99
</tr>
1010
</template>
1111

1212
<script lang="ts">
13+
import Prism from 'prismjs'
1314
import { defineComponent, PropType, ref, computed } from 'vue'
14-
import { Prism } from './index'
1515
import { MODIFIED_START_TAG, MODIFIED_CLOSE_TAG, Line } from './utils'
1616
17+
// @ts-ignore
18+
Prism.manual = true
19+
1720
export default defineComponent({
1821
props: {
1922
data: {
@@ -28,8 +31,7 @@ export default defineComponent({
2831
setup (props) {
2932
const codeRef = ref(null)
3033
const code = computed(() => {
31-
const highlight = Prism.highlight(props.data.value, Prism.languages[props.language], props.language)
32-
return highlight
34+
return Prism.highlight(props.data.value, Prism.languages[props.language], props.language)
3335
.replace(new RegExp(`${MODIFIED_START_TAG}`, 'gi'), '<span class="token modified">')
3436
.replace(new RegExp(`${MODIFIED_CLOSE_TAG}`, 'gi'), '</span>')
3537
})
@@ -80,7 +82,6 @@ tr.vue-diff-row-removed td {
8082
pre[class*="language-"]:before {
8183
content: "-";
8284
}
83-
8485
}
8586
8687
.vue-diff-viewer-prev {

‎src/index.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import Prism from 'prismjs'
2-
31
import Diff from './Diff.vue'
42

53
import type { App } from 'vue'
@@ -8,9 +6,6 @@ interface PluginOptions {
86
componentName: string;
97
}
108

11-
// @ts-ignore
12-
Prism.manual = true
13-
149
export default {
1510
install: (app: App, options = {}) => {
1611
const {
@@ -20,5 +15,3 @@ export default {
2015
app.component(componentName, Diff)
2116
}
2217
}
23-
24-
export { Prism }

‎src/utils.ts‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ const renderPrev = (diffs: Array<Change>) => {
3838
const type = getDiffType(diff)
3939
const prevDiff = index > 0 ? diffs[index - 1] : null
4040
const nextDiff = index < diffs.length - 1 ? diffs[index + 1] : null
41-
const isModifiedLine = nextDiff && diff.count === 1 && nextDiff.count === 1 && type === 'removed' && nextDiff.added
42-
const isUnuseLine = prevDiff && diff.count === 1 && prevDiff.count === 1 && type === 'added' && prevDiff.removed
41+
const isModifiedLine = nextDiff && diff.count === nextDiff.count && type === 'removed' && nextDiff.added
42+
const isUnuseLine = prevDiff && diff.count === prevDiff.count && type === 'added' && prevDiff.removed
4343

4444
if (isUnuseLine) return
4545

@@ -74,8 +74,8 @@ const renderCurrent = (diffs: Array<Change>) => {
7474
const type = getDiffType(diff)
7575
const prevDiff = index > 0 ? diffs[index - 1] : null
7676
const nextDiff = index < diffs.length - 1 ? diffs[index + 1] : null
77-
const isModifiedLine = prevDiff && diff.count === 1 && prevDiff.count === 1 && type === 'added' && prevDiff.removed
78-
const isUnuseLine = nextDiff && diff.count === 1 && nextDiff.count === 1 && type === 'removed' && nextDiff.added
77+
const isModifiedLine = prevDiff && diff.count === prevDiff.count && type === 'added' && prevDiff.removed
78+
const isUnuseLine = nextDiff && diff.count === nextDiff.count && type === 'removed' && nextDiff.added
7979

8080
if (isUnuseLine) return
8181

@@ -110,18 +110,6 @@ const renderUnified = (diffs: Array<Change>) => {
110110
const type = getDiffType(diff)
111111
const prevDiff = index > 0 ? diffs[index - 1] : null
112112
const nextDiff = index < diffs.length - 1 ? diffs[index + 1] : null
113-
const isModifiedPrevLine = nextDiff && diff.count === 1 && nextDiff.count === 1 && type === 'removed' && nextDiff.added
114-
const isModifiedCurrentLine = prevDiff && diff.count === 1 && prevDiff.count === 1 && type === 'added' && prevDiff.removed
115-
116-
if (isModifiedPrevLine) {
117-
const diffWords = Diff.diffChars((nextDiff as Change).value, diff.value)
118-
diff.value = renderLine(diffWords)
119-
}
120-
121-
if (isModifiedCurrentLine) {
122-
const diffWords = Diff.diffChars((prevDiff as Change).value, diff.value)
123-
diff.value = renderLine(diffWords)
124-
}
125113

126114
diff.value.replace(/\n$/, '').split('\n').map((value) => {
127115
const skip = type === 'removed'

0 commit comments

Comments
 (0)