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

Commit b5417a5

Browse files
hoihearthoiheart
committed
chore: init
1 parent 53d9274 commit b5417a5

File tree

17 files changed

+1058
-67
lines changed

17 files changed

+1058
-67
lines changed

‎dev/App.vue‎

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,28 @@
22
<h1>Vue Diff</h1>
33
<Diff
44
language="javascript"
5-
:left="left"
6-
:right="right"
5+
:prev="prev"
6+
:current="current"
77
/>
88
</template>
99

1010
<script lang="ts">
11-
import { defineComponent, reactive } from 'vue'
11+
import { defineComponent, ref } from 'vue'
1212
1313
export default defineComponent({
1414
setup () {
15-
const left = reactive({
16-
code:
15+
const prev = ref(
1716
`var a = {
1817
"name": "vue-diff",
1918
"version": "0.0.0",
2019
"description": "Vue diff viewer",
21-
"scripts": {
22-
"dev": "vite",
23-
"build": "vite build",
24-
"test:unit": "vue-cli-service test:unit",
25-
"test:e2e": "vue-cli-service test:e2e",
26-
"lint": "vue-cli-service lint"
27-
}
28-
}`
29-
})
20+
"private": true
21+
}`)
3022
31-
const right = reactive({
32-
code:
23+
const current = ref(
3324
`var b = {
3425
"name": "vue-diff",
3526
"version": "0.0.1",
36-
"private": true,
3727
"description": "Vue diff viewer",
3828
"scripts": {
3929
"dev": "vite",
@@ -42,10 +32,9 @@ export default defineComponent({
4232
"test:e2e": "vue-cli-service test:e2e",
4333
"lint": "vue-cli-service lint"
4434
}
45-
}`
46-
})
35+
}`)
4736
48-
return { left, right }
37+
return { prev, current }
4938
}
5039
})
5140
</script>

‎dev/main.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { createApp } from 'vue'
22
import App from './App.vue'
33
import VueDiff from '../src'
4+
import '../src/themes/okaidia.css'
45

56
const app = createApp(App)
67
app.use(VueDiff)

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"vue": "^3.0.0"
2323
},
2424
"devDependencies": {
25+
"@rollup/plugin-commonjs": "^17.0.0",
2526
"@types/diff": "^5.0.0",
2627
"@types/jest": "^24.0.19",
2728
"@types/prismjs": "^1.16.2",

‎src/Code.vue‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<tr :class="`vue-diff-row vue-diff-row-${data.type}`">
3+
<td class="lineNum">
4+
{{ data.lineNum }}
5+
</td>
6+
<td ref="code" class="code">
7+
<pre><code :class="`language-${language}`" v-html="data.value"></code></pre>
8+
</td>
9+
</tr>
10+
</template>
11+
12+
<script lang="ts">
13+
import { defineComponent, PropType, ref, onMounted } from 'vue'
14+
import { Prism } from './index'
15+
import { Line } from './utils'
16+
17+
export default defineComponent({
18+
props: {
19+
data: {
20+
type: Object as PropType<Line>,
21+
required: true
22+
},
23+
language: {
24+
type: String,
25+
required: true
26+
}
27+
},
28+
setup () {
29+
const code = ref(null)
30+
31+
onMounted(() => {
32+
Prism.highlightAllUnder(code.value as unknown as HTMLElement)
33+
})
34+
35+
return { code }
36+
}
37+
})
38+
</script>
39+
40+
<style scoped lang="scss">
41+
td {
42+
padding: 0 10px;
43+
44+
&.lineNum {
45+
width: 2em;
46+
text-align: right;
47+
color: #999;
48+
font-size: 0.9em;
49+
}
50+
}
51+
52+
pre[class*="language-"] {
53+
padding: 0;
54+
margin: 0;
55+
overflow: auto;
56+
background: none;
57+
border-radius: 0;
58+
}
59+
60+
tr.vue-diff-row-removed td {
61+
background-color: rgba(255, 0, 0, .1);
62+
63+
:deep(.token.modified) {
64+
background-color: rgba(255, 0, 0, .3);
65+
}
66+
}
67+
68+
tr.vue-diff-row-added td {
69+
background-color: rgba(0, 255, 128, .1);
70+
71+
:deep(.token.modified) {
72+
background-color: rgba(0, 255, 128, .3);
73+
}
74+
}
75+
</style>

‎src/Diff.vue‎

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<template>
22
<div class="vue-diff-wrapper">
3-
<Viewer :language="language" v-bind="{...left}" />
4-
<Viewer :language="language" v-bind="{...right}" />
3+
<!-- <Viewer type="unified" :language="language" :diffLines="diffLines" /> -->
4+
<Viewer type="prev" :language="language" :diffs="diffs" />
5+
<Viewer type="current" :language="language" :diffs="diffs" />
56
</div>
67
</template>
78

89
<script lang="ts">
9-
import { defineComponent } from 'vue'
10-
import Diff from 'diff'
10+
import { defineComponent, reactive } from 'vue'
11+
import * as Diff from 'diff'
1112
import Viewer from './Viewer.vue'
1213
1314
export default defineComponent({
@@ -19,26 +20,19 @@ export default defineComponent({
1920
type: String,
2021
required: true
2122
},
22-
left: {
23-
type: Object,
24-
required: true,
25-
code: {
26-
type: String,
27-
required: true
28-
}
23+
prev: {
24+
type: String,
25+
required: true
2926
},
30-
right: {
31-
type: Object,
32-
required: true,
33-
code: {
34-
type: String,
35-
required: true
36-
}
27+
current: {
28+
type: String,
29+
required: true
3730
}
3831
},
3932
setup (props) {
40-
const diff = Diff.diffLines(props.left.code, props.right.code)
41-
console.log(diff)
33+
const diffs = reactive(Diff.diffLines(props.prev, props.current))
34+
35+
return { diffs }
4236
}
4337
})
4438
</script>

‎src/Viewer.vue‎

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,61 @@
11
<template>
22
<div ref="viewer" class="vue-diff-viewer">
3-
<pre class="line-numbers"><code :class="`language-${language} language-diff-${language} diff-highlight`">{{ code }}</code></pre>
3+
<table>
4+
<tbody>
5+
<Code
6+
:key="index"
7+
v-for="(data, index) in lines"
8+
:language="language"
9+
:data="data"
10+
/>
11+
</tbody>
12+
</table>
413
</div>
514
</template>
615

716
<script lang="ts">
8-
import { defineComponent, ref, onMounted } from 'vue'
9-
import { Prism } from './index'
17+
import { defineComponent, ref, PropType } from 'vue'
18+
import { renderLines } from './utils'
19+
import Code from './Code.vue'
20+
21+
import type { Type, Change } from './utils'
1022
1123
export default defineComponent({
24+
components: {
25+
Code
26+
},
1227
props: {
28+
type: {
29+
type: String as PropType<Type>,
30+
required: true
31+
},
1332
language: {
1433
type: String,
1534
required: true
1635
},
17-
code: {
18-
type: String,
36+
diffs: {
37+
type: Array as PropType<Array<Change>>,
1938
required: true
2039
}
2140
},
22-
setup () {
23-
const viewer = ref(null)
24-
25-
onMounted(() => {
26-
// @ts-ignore
27-
Prism.manual = true
28-
Prism.highlightAllUnder(viewer.value as unknown as HTMLElement)
29-
})
41+
setup (props) {
42+
const lines = ref(renderLines(props.type, props.diffs))
3043
31-
return { viewer }
44+
return { lines }
3245
}
3346
})
3447
</script>
48+
49+
<style scoped lang="scss">
50+
.vue-diff-viewer {
51+
overflow: hidden;
52+
padding: 1em 0;
53+
border-radius: 0.3em;
54+
}
55+
56+
table {
57+
width: 100%;
58+
table-layout: fixed;
59+
border-collapse: collapse;
60+
}
61+
</style>

‎src/index.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import Prism from 'prismjs'
2-
import 'prismjs/themes/prism-okaidia.css'
3-
import 'prismjs/components'
4-
import 'prismjs/plugins/diff-highlight/prism-diff-highlight'
5-
import 'prismjs/plugins/diff-highlight/prism-diff-highlight.css'
6-
import 'prismjs/plugins/line-numbers/prism-line-numbers'
7-
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
2+
import 'prismjs/plugins/keep-markup/prism-keep-markup'
83

94
import Diff from './Diff.vue'
105

116
import type { App } from 'vue'
127

8+
// @ts-ignore
9+
Prism.manual = true
10+
1311
interface PluginOptions {
1412
componentName: string;
1513
}

‎src/themes/coy.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import 'prismjs/themes/prism-coy.css';
2+
3+
.vue-diff-table {
4+
background-color: #fdfdfd;
5+
background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
6+
background-size: 3em 3em;
7+
background-origin: content-box;
8+
background-attachment: local;
9+
}
10+
11+
.vue-diff-table code[class*="language-"],
12+
.vue-diff-table pre[class*="language-"] {
13+
background: none;
14+
}

0 commit comments

Comments
 (0)