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

Commit f3c8547

Browse files
hoihearthoiheart
committed
chore: development
1 parent d2cdee9 commit f3c8547

File tree

11 files changed

+86
-77
lines changed

11 files changed

+86
-77
lines changed

‎dev/App.vue‎

Lines changed: 46 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,39 @@
11
<template>
22
<link rel="stylesheet" :href="`/src/themes/${theme}.css`">
3-
<h1>Vue Diff</h1>
4-
language
5-
type
6-
theme
7-
<div class="editor">
3+
<h1 class="text-3xl font-extrabold text-gray-100">Vue Diff</h1>
4+
<div class="form text-gray-100 mt-8">
5+
<label for="language" class="mr-2">Language:</label>
6+
<select v-model="language" id="language" class="bg-gray-900 w-40 py-1 px-3 mr-4 rounded border border-gray-500 text-gray-300">
7+
<option :key="val" v-for="val in languages">{{ val }}</option>
8+
</select>
9+
<label for="mode" class="mr-2">Mode:</label>
10+
<select v-model="mode" id="mode" class="bg-gray-900 w-40 py-1 px-3 mr-4 rounded border border-gray-500 text-gray-300">
11+
<option :key="val" v-for="val in modes">{{ val }}</option>
12+
</select>
13+
<label for="theme" class="mr-2">Theme:</label>
14+
<select v-model="theme" id="theme" class="bg-gray-900 w-40 py-1 px-3 mr-4 rounded border border-gray-500 text-gray-300">
15+
<option :key="val" v-for="val in themes">{{ val }}</option>
16+
</select>
17+
</div>
18+
<div class="editor text-gray-100 mt-8">
819
<section>
9-
<h2>Editor</h2>
20+
<h2 class="text-2xl font-bold mb-4">Editor</h2>
1021
<div>
11-
<h3>Prev</h3>
12-
<textarea v-model="prev"></textarea>
22+
<h3 class="text-xl mb-4">Prev</h3>
23+
<textarea v-model="prev" class="bg-gray-900 p-4 rounded-lg border-2 border-gray-500 text-gray-300"></textarea>
1324
</div>
1425
<div>
15-
<h3>Current</h3>
16-
<textarea v-model="current"></textarea>
26+
<h3 class="text-xl mb-4">Current</h3>
27+
<textarea v-model="current" class="bg-gray-900 p-4 rounded-lg border-2 border-gray-500 text-gray-300"></textarea>
1728
</div>
1829
</section>
1930
</div>
2031
<div class="viewer">
21-
<section>
22-
<h2>Split</h2>
32+
<section class="mt-8">
33+
<h2 class="text-2xl font-bold text-gray-100 mb-4">Diff</h2>
2334
<Diff
24-
type="split"
25-
language="javascript"
26-
:prev="prev"
27-
:current="current"
28-
/>
29-
</section>
30-
<section>
31-
<h2>Unified</h2>
32-
<Diff
33-
type="unified"
34-
language="javascript"
35+
:mode="mode"
36+
:language="language"
3537
:prev="prev"
3638
:current="current"
3739
/>
@@ -44,18 +46,23 @@ import { defineComponent, ref } from 'vue'
4446
4547
export default defineComponent({
4648
setup () {
47-
const theme = 'okaidia'
49+
const modes = ref(['split', 'unified'])
50+
const mode = ref('split')
51+
const languages = ref(['javascript', 'html', 'css'])
52+
const language = ref('javascript')
53+
const themes = ref(['coy', 'dark', 'funky', 'okaidia', 'solarizedlight', 'tomorrow', 'twilight'])
54+
const theme = ref('okaidia')
4855
4956
const prev = ref(
50-
`var a = {
57+
`var a1 = {
5158
"name": "vue-diff",
5259
"version": "0.0.0",
5360
"description": "Vue diff viewer",
5461
"private": true
5562
}`)
5663
5764
const current = ref(
58-
`var b = {
65+
`const b2 = {
5966
"name": "vue-diff",
6067
"version": "0.0.1",
6168
"description": "Vue diff viewer",
@@ -68,7 +75,16 @@ export default defineComponent({
6875
}
6976
}`)
7077
71-
return { prev, current, theme }
78+
return {
79+
modes,
80+
mode,
81+
languages,
82+
language,
83+
themes,
84+
theme,
85+
prev,
86+
current
87+
}
7288
}
7389
})
7490
</script>
@@ -77,19 +93,20 @@ export default defineComponent({
7793
.editor {
7894
section {
7995
display: flex;
96+
justify-content: space-between;
8097
flex-wrap: wrap;
8198
8299
h2 {
83100
width: 100%;
84101
}
85102
86103
div {
87-
width: 50%;
104+
width: calc(50% - 10px);
88105
}
89106
90107
textarea {
91108
width: 100%;
92-
height: 100px;
109+
height: 200px;
93110
}
94111
}
95112
}

‎index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Vue Diff</title>
7+
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
78
</head>
8-
<body>
9-
<div id="app"></div>
9+
<body class="bg-gray-900">
10+
<div id="app" class="p-12"></div>
1011
<script type="module" src="/dev/main.ts"></script>
1112
</body>
1213
</html>

‎package-lock.json‎

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

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
"dependencies": {
1919
"core-js": "^3.6.5",
2020
"diff": "^5.0.0",
21-
"html-entities": "^2.0.2",
2221
"prismjs": "^1.22.0",
2322
"vue": "^3.0.0"
2423
},

‎src/Code.vue‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,15 @@
44
{{ data.lineNum }}
55
</td>
66
<td class="code">
7-
<pre><code ref="codeRef" :class="`language-${language}`" v-html="code"></code></pre>
7+
<pre><code ref="codeRef" :class="`language-${language}`" v-html="code || '\n'"></code></pre>
88
</td>
99
</tr>
1010
</template>
1111

1212
<script lang="ts">
13-
// @ts-ignore
14-
import { encode } from 'html-entities'
15-
import { defineComponent, PropType, ref, onMounted, watch, nextTick, computed } from 'vue'
13+
import { defineComponent, PropType, ref, computed } from 'vue'
1614
import { Prism } from './index'
17-
import { MODIFIED_TAG, Line } from './utils'
15+
import { MODIFIED_START_TAG, MODIFIED_CLOSE_TAG, Line } from './utils'
1816
1917
export default defineComponent({
2018
props: {
@@ -30,15 +28,10 @@ export default defineComponent({
3028
setup (props) {
3129
const codeRef = ref(null)
3230
const code = computed(() => {
33-
return encode(props.data.value)
34-
.replace(new RegExp(`&lt;${MODIFIED_TAG}&gt;`, 'gi'), '<span class="token modified">')
35-
.replace(new RegExp(`&lt;/${MODIFIED_TAG}&gt;`, 'gi'), '</span>')
36-
})
37-
38-
onMounted(() => {
39-
watch(() => props.data.value, () => {
40-
nextTick(() => Prism.highlightElement(codeRef.value as unknown as HTMLElement))
41-
}, { immediate: true })
31+
const highlight = Prism.highlight(props.data.value, Prism.languages[props.language], props.language)
32+
return highlight
33+
.replace(new RegExp(`${MODIFIED_START_TAG}`, 'gi'), '<span class="token modified">')
34+
.replace(new RegExp(`${MODIFIED_CLOSE_TAG}`, 'gi'), '</span>')
4235
})
4336
4437
return { codeRef, code }

‎src/Diff.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div class="vue-diff-wrapper" :class="`vue-diff-wrapper-${type}`">
3-
<template v-if="type === 'unified'">
2+
<div class="vue-diff-wrapper" :class="`vue-diff-wrapper-${mode}`">
3+
<template v-if="mode === 'unified'">
44
<Viewer role="unified" :language="language" :prev="prev" :current="current" />
55
</template>
66
<template v-else>
@@ -14,15 +14,15 @@
1414
import { defineComponent, PropType } from 'vue'
1515
import Viewer from './Viewer.vue'
1616
17-
import { Type } from './utils'
17+
import { Mode } from './utils'
1818
1919
export default defineComponent({
2020
components: {
2121
Viewer
2222
},
2323
props: {
24-
type: {
25-
type: String as PropType<Type>,
24+
mode: {
25+
type: String as PropType<Mode>,
2626
required: true
2727
},
2828
language: {

‎src/index.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import Prism from 'prismjs'
2-
import 'prismjs/plugins/keep-markup/prism-keep-markup'
32

43
import Diff from './Diff.vue'
54

65
import type { App } from 'vue'
76

8-
// @ts-ignore
9-
Prism.manual = true
10-
117
interface PluginOptions {
128
componentName: string;
139
}
1410

11+
// @ts-ignore
12+
Prism.manual = true
13+
1514
export default {
1615
install: (app: App, options = {}) => {
1716
const {

‎src/style.scss‎

Whitespace-only changes.

‎src/utils.ts‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as Diff from 'diff'
22

33
import type { Change } from 'diff'
44

5-
type Type = 'split' | 'unified'
5+
type Mode = 'split' | 'unified'
66
type Role = 'prev' | 'current' | 'unified'
77

88
interface Line {
@@ -11,7 +11,8 @@ interface Line {
1111
value: string;
1212
}
1313

14-
const MODIFIED_TAG = 'vue-diff-modified'
14+
const MODIFIED_START_TAG = '###VueDiffModifiedStart###'
15+
const MODIFIED_CLOSE_TAG = '###VueDiffModifiedClose###'
1516

1617
function getDiffType (diff: Change) {
1718
return diff.added ? 'added' : diff.removed ? 'removed' : 'equal'
@@ -22,7 +23,7 @@ const renderLine = (diffWords: Array<Change>) => {
2223
const type = getDiffType(word)
2324

2425
if (type === 'added') {
25-
return `<${MODIFIED_TAG}>${word.value}</${MODIFIED_TAG}>`
26+
return `${MODIFIED_START_TAG}${word.value}${MODIFIED_CLOSE_TAG}`
2627
} else {
2728
return word.value
2829
}
@@ -43,7 +44,7 @@ const renderPrev = (diffs: Array<Change>) => {
4344
if (isUnuseLine) return
4445

4546
if (isModifiedLine) {
46-
const diffWords = Diff.diffWords((nextDiff as Change).value, diff.value)
47+
const diffWords = Diff.diffChars((nextDiff as Change).value, diff.value)
4748
diff.value = renderLine(diffWords)
4849
}
4950

@@ -79,7 +80,7 @@ const renderCurrent = (diffs: Array<Change>) => {
7980
if (isUnuseLine) return
8081

8182
if (isModifiedLine) {
82-
const diffWords = Diff.diffWords((prevDiff as Change).value, diff.value)
83+
const diffWords = Diff.diffChars((prevDiff as Change).value, diff.value)
8384
diff.value = renderLine(diffWords)
8485
}
8586

@@ -93,7 +94,7 @@ const renderCurrent = (diffs: Array<Change>) => {
9394
result.push({
9495
type,
9596
lineNum: skip ? undefined : lineNum,
96-
value: skip ? '\n' : value
97+
value: skip ? '' : value
9798
})
9899
})
99100
})
@@ -113,12 +114,12 @@ const renderUnified = (diffs: Array<Change>) => {
113114
const isModifiedCurrentLine = prevDiff && diff.count === 1 && prevDiff.count === 1 && type === 'added' && prevDiff.removed
114115

115116
if (isModifiedPrevLine) {
116-
const diffWords = Diff.diffWords((nextDiff as Change).value, diff.value)
117+
const diffWords = Diff.diffChars((nextDiff as Change).value, diff.value)
117118
diff.value = renderLine(diffWords)
118119
}
119120

120121
if (isModifiedCurrentLine) {
121-
const diffWords = Diff.diffWords((prevDiff as Change).value, diff.value)
122+
const diffWords = Diff.diffChars((prevDiff as Change).value, diff.value)
122123
diff.value = renderLine(diffWords)
123124
}
124125

@@ -154,5 +155,5 @@ const renderLines = (role: Role, diffs: Array<Change>) => {
154155
}
155156
}
156157

157-
export { MODIFIED_TAG, renderLines }
158-
export type { Type, Role, Change, Line }
158+
export { MODIFIED_START_TAG, MODIFIED_CLOSE_TAG, renderLines }
159+
export type { Mode, Role, Change, Line }

‎test.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
/* eslint-disable */
2-
var a = {
2+
const b = {
33
"name": "vue-diff",
4-
"version": "0.0.0",
5-
"description": "Vue diff viewer",
6-
"private": true
4+
"version": "0.0.1",
5+
"description": "VueJS diff viewer",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"test:unit": "vue-cli-service test:unit",
10+
"test:e2e": "vue-cli-service test:e2e",
11+
"lint": "vue-cli-service lint"
12+
}
713
}

0 commit comments

Comments
 (0)