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

Commit c1c3f59

Browse files
hoihearthoiheart
committed
chore: development
1 parent ce2fa28 commit c1c3f59

File tree

12 files changed

+161
-444
lines changed

12 files changed

+161
-444
lines changed

‎dev/App.vue‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<template>
2-
<link rel="stylesheet" :href="`/src/themes/${theme}.css`">
3-
<h1 class="text-3xl font-extrabold text-gray-100">Vue Diff</h1>
42
<div class="form text-gray-100 mt-8">
53
<label for="language" class="mr-2">Language:</label>
64
<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">
@@ -33,6 +31,7 @@
3331
<h2 class="text-2xl font-bold text-gray-100 mb-4">Diff</h2>
3432
<Diff
3533
:mode="mode"
34+
:theme="theme"
3635
:language="language"
3736
:prev="prev"
3837
:current="current"
@@ -42,7 +41,8 @@
4241
</template>
4342

4443
<script lang="ts">
45-
import { defineComponent, ref, watch } from 'vue'
44+
import { defineComponent, onMounted, ref, watch } from 'vue'
45+
4646
import template from './template'
4747
4848
export default defineComponent({
@@ -58,23 +58,21 @@ export default defineComponent({
5858
const current = ref('')
5959
6060
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-
}
61+
// @ts-ignore
62+
prev.value = template[`${language.value}1`]
63+
// @ts-ignore
64+
current.value = template[`${language.value}2`]
7465
}, {
7566
immediate: true
7667
})
7768
69+
onMounted(() => {
70+
const script = document.createElement('script')
71+
script.async = true
72+
script.defer = true
73+
document.body.appendChild(script)
74+
})
75+
7876
return {
7977
modes,
8078
mode,

‎index.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,17 @@
77
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
88
</head>
99
<body class="bg-gray-900">
10-
<div id="app" class="p-12"></div>
10+
<div class="p-12">
11+
<h1 class="text-3xl font-extrabold text-gray-100 flex items-center">
12+
<span class="mr-4">Vue Diff</span>
13+
<!-- Place this tag where you want the button to render. -->
14+
<span class="mt-2">
15+
<a class="github-button" href="https://github.com/hoiheart/vue-diff" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Star hoiheart/vue-diff on GitHub">Star</a>
16+
</span>
17+
</h1>
18+
<div id="app"></div>
19+
</div>
1120
<script type="module" src="/dev/main.ts"></script>
21+
<script async defer src="https://buttons.github.io/buttons.js"></script>
1222
</body>
1323
</html>

‎package-lock.json‎

Lines changed: 15 additions & 0 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
@@ -48,6 +48,7 @@
4848
"sass-loader": "^8.0.2",
4949
"typescript": "~3.9.3",
5050
"vite": "^1.0.0-rc.13",
51+
"vue-github-button": "^1.3.0",
5152
"vue-jest": "^5.0.0-0"
5253
},
5354
"_id": "vue-diff@0.0.0",

‎src/Code.vue‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
<template>
2-
<pre :class="`language-${language}`"><code
3-
:class="`language-${language}`"
4-
v-html="highlightCode"
5-
></code></pre>
2+
<pre><code class="hljs" v-html="highlightCode"></code></pre>
63
</template>
74

85
<script lang="ts">
9-
import hljs from 'highlight.js'
10-
import { defineComponent, ref, onMounted, watch, Ref } from 'vue'
6+
import { highlight } from 'highlight.js'
7+
import { defineComponent, ref, onMounted, watch } from 'vue'
118
import { MODIFIED_START_TAG, MODIFIED_CLOSE_TAG } from './utils'
12-
import 'highlight.js/styles/monokai.css'
9+
10+
import type { Ref } from 'vue'
1311
1412
/**
1513
* Set hightlight code
@@ -19,7 +17,7 @@ const setHighlightCode = ({ highlightCode, language, code }: { highlightCode: Re
1917
const hasModifiedTags = code.match(new RegExp(`(${MODIFIED_START_TAG}|${MODIFIED_CLOSE_TAG})`, 'g'))
2018
2119
if (!hasModifiedTags) {
22-
highlightCode.value = hljs.highlight(language, code).value
20+
highlightCode.value = highlight(language, code).value
2321
return
2422
}
2523
@@ -29,7 +27,7 @@ const setHighlightCode = ({ highlightCode, language, code }: { highlightCode: Re
2927
let originalCode = code // original code with modified tags
3028
const pureCode = code.replace(new RegExp(`(${MODIFIED_START_TAG}|${MODIFIED_CLOSE_TAG})`, 'g'), '') // Without modified tags
3129
let pureElement = document.createElement('div')
32-
pureElement.innerHTML = hljs.highlight(language, pureCode).value // Highlight DOM without modified tags
30+
pureElement.innerHTML = highlight(language, pureCode).value // Highlight DOM without modified tags
3331
3432
const diffElements = (node: HTMLElement) => {
3533
node.childNodes.forEach(child => {
@@ -113,11 +111,3 @@ export default defineComponent({
113111
}
114112
})
115113
</script>
116-
117-
<style scoped lang="scss">
118-
code {
119-
word-wrap: break-all !important;
120-
word-break: break-all !important;
121-
white-space: pre-wrap !important;
122-
}
123-
</style>

‎src/Diff.vue‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="vue-diff-wrapper" :class="`vue-diff-wrapper-${mode}`">
2+
<div class="vue-diff-wrapper" :class="`vue-diff-mode-${mode} vue-diff-theme-${theme}`">
33
<div ref="viewer" class="vue-diff-viewer">
44
<table>
55
<tbody>
@@ -21,7 +21,7 @@ import { defineComponent, PropType, ref, watch } from 'vue'
2121
import { renderLines } from './utils'
2222
import Line from './Line.vue'
2323
24-
import type { Mode, Lines } from './utils'
24+
import type { Mode, Theme, Lines } from './utils'
2525
2626
export default defineComponent({
2727
components: {
@@ -32,17 +32,21 @@ export default defineComponent({
3232
type: String as PropType<Mode>,
3333
required: true
3434
},
35+
theme: {
36+
type: String as PropType<Theme>,
37+
default: 'dark'
38+
},
3539
language: {
3640
type: String,
37-
required: true
41+
default: ''
3842
},
3943
prev: {
4044
type: String,
41-
required: true
45+
default: ''
4246
},
4347
current: {
4448
type: String,
45-
required: true
49+
default: ''
4650
}
4751
},
4852
setup (props) {
@@ -60,23 +64,3 @@ export default defineComponent({
6064
}
6165
})
6266
</script>
63-
64-
<style scoped lang="scss">
65-
.vue-diff-wrapper {
66-
display: flex;
67-
justify-content: space-between;
68-
width: 100%;
69-
}
70-
71-
.vue-diff-viewer {
72-
width: 100%;
73-
padding: 1em 0;
74-
border-radius: 0.3em;
75-
}
76-
77-
table {
78-
width: 100%;
79-
table-layout: fixed;
80-
border-collapse: collapse;
81-
}
82-
</style>

‎src/Line.vue‎

Lines changed: 0 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -76,70 +76,3 @@ export default defineComponent({
7676
}
7777
})
7878
</script>
79-
80-
<style scoped lang="scss">
81-
td {
82-
padding: 0 0.5em;
83-
vertical-align: top;
84-
85-
&.lineNum {
86-
width: 3.5em;
87-
padding-top: .05em;
88-
text-align: right;
89-
color: #999;
90-
font-size: 0.9em;
91-
}
92-
93-
pre[class*="language-"]:before {
94-
display: inline-block;
95-
position: absolute;
96-
left: 0;
97-
top: 0;
98-
opacity: 0.8;
99-
}
100-
101-
pre[class*="language-"] {
102-
display: block;
103-
position: relative;
104-
max-width: 100%;
105-
margin: 0;
106-
padding: 0;
107-
padding-left: 1.5em;
108-
overflow: visible;
109-
background: none;
110-
border-radius: 0;
111-
}
112-
}
113-
114-
td.vue-diff-cell-removed {
115-
background-color: rgba(255, 0, 0, .1);
116-
117-
:deep(.modified) {
118-
background-color: rgba(255, 0, 0, .2);
119-
}
120-
}
121-
122-
td.vue-diff-cell-removed.code {
123-
pre[class*="language-"]:before {
124-
content: "-";
125-
}
126-
}
127-
128-
td.vue-diff-cell-added {
129-
background-color: rgba(0, 255, 128, .1);
130-
131-
:deep(.modified) {
132-
background-color: rgba(0, 255, 128, .2);
133-
}
134-
}
135-
136-
td.vue-diff-cell-added.code {
137-
pre[class*="language-"]:before {
138-
content: "+";
139-
}
140-
}
141-
142-
td.vue-diff-cell-disabled {
143-
background-color: rgba(128, 128, 128, 0.1);
144-
}
145-
</style>

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Diff from './Diff.vue'
2+
import './style.scss'
23

34
import type { App } from 'vue'
45

0 commit comments

Comments
 (0)