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

Commit 70680d0

Browse files
hoihearthoiheart
committed
feat: Release
1 parent 4493899 commit 70680d0

19 files changed

+3119
-1604
lines changed

‎.github/workflows/release.yaml‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
name: Release
2+
on:
3+
push:
4+
branches:
5+
- alpha
6+
jobs:
7+
release:
8+
name: release
9+
runs-on: ubuntu-latest
10+
steps:
11+
- name: Checkout
12+
uses: actions/checkout@v2
13+
with:
14+
fetch-depth: 0
15+
- name: Setup Node.js
16+
uses: actions/setup-node@v1
17+
with:
18+
node-version: 12
19+
- name: Install dependencies
20+
run: npm ci
21+
- name: Lint
22+
run: npm run lint
23+
- name: Test
24+
run: npm run test
25+
- name: Build
26+
run: npm run build
27+
- name: Demo
28+
run: npm run demo
29+
- name: Release
30+
uses: cycjimmy/semantic-release-action@v2
31+
with:
32+
extra_plugins: |
33+
@semantic-release/git
34+
env:
35+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
36+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,7 @@ pnpm-debug.log*
2424
*.njsproj
2525
*.sln
2626
*.sw?
27+
28+
# ignore
29+
/demo
30+
/dist

‎.npmignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.*.swp
2+
._*
3+
.DS_Store
4+
.git
5+
.hg
6+
.npmrc
7+
.lock-wscript
8+
.svn
9+
.wafpickle-*
10+
config.gypi
11+
CVS
12+
npm-debug.log
13+
14+
/__tests__
15+
/.github
16+
/demo
17+
/dev
18+
/node_modules
19+
.*rc
20+
.*rc.*
21+
*config
22+
*config.*
23+
*.config.*
24+
index.html

‎README.md‎

Lines changed: 127 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,141 @@
11
# vue-diff
22

3-
## Project setup
4-
```
5-
npm install
6-
```
3+
Vue diff viewer plugin
74

8-
### Compiles and hot-reloads for development
9-
```
10-
npm run serve
11-
```
5+
> ⚠️ This plugin supports only Vue3
126
13-
### Compiles and minifies for production
14-
```
15-
npm run build
16-
```
7+
## Table of Contents
8+
9+
- [Introduction](#introduction)
10+
- [Features](#features)
11+
- [Install plugin](#install-plugin)
12+
* [Options](#options)
13+
- [Usage modal](#usage-modal)
14+
* [props](#props)
15+
+ [props.options](#propsoptions)
16+
* [slot arguments](#slot-arguments)
17+
- [Handle global CSS](#handle-global-css)
18+
- [Example](#example)
19+
20+
## Introduction
21+
22+
<img src="https://user-images.githubusercontent.com/25652218/104695609-60533c80-5750-11eb-85dd-0e7d0d79d5ac.png" alt="screenshot" style="max-width:100%;">
1723

18-
### Run your unit tests
24+
You can see the difference between the two codes with the `vue-diff` plugin.
25+
This plugin dependent on <a href="https://github.com/kpdecker/jsdiff">diff</a> and <a href="https://github.com/highlightjs/highlight.js/">highlight.js</a>, shows similar results to other diff viewers (e.g., Github Desktop).
26+
Please see the <a href="https://hoiheart.github.io/vue-diff/demo/index.html" target="_blank" style="font-size: 1.2em; text-decoration: underline;">demo</a>
27+
28+
## Features
29+
30+
* [x] Support split / unified mode
31+
* [x] Support some languages and can be extended
32+
* [X] Support two themes (dark / light) and can be customized
33+
* [ ] Support IE11 (IE 11 support for Vue@3 is still pending)
34+
35+
## Install plugin
36+
37+
```bash
38+
npm install vue-diff
1939
```
20-
npm run test:unit
40+
41+
install plugin in vue application
42+
43+
```ts
44+
import VueDiff from 'vue-diff'
45+
// import VueDiff from 'vue-diff/dist/index.es5' // If need to use es5 build
46+
import 'vue-diff/dist/index.css'
47+
48+
app.use(VueDiff)
2149
```
50+
### Options
2251

23-
### Run your end-to-end tests
52+
```ts
53+
app.use(VueDiff, {
54+
componentName: 'VueDiff'
55+
})
2456
```
25-
npm run test:e2e
57+
58+
| name | type | detault | description |
59+
|- | - | - | - |
60+
| componentName | `string` | `'Diff'` | Global diff component name |
61+
62+
## Usage diff viewer
63+
64+
Insert the diff component with props.
65+
66+
```vue
67+
<template>
68+
<Diff
69+
:mode="mode"
70+
:theme="theme"
71+
:language="language"
72+
:prev="prev"
73+
:current="current"
74+
/>
75+
</template>
2676
```
2777

28-
### Lints and fixes files
78+
### props
79+
80+
| name | type | detault | values | description
81+
|- | - | - | - |- |
82+
| mode | `string` | `split` | `split`, `unified` |
83+
| theme | `string` | `dark` | `dark`, `light` | See <a href="#custom-theme">Custom theme</a>
84+
| language | `string` | `plaintext` | | See <a href="#extend-languages">Extend languages</a>
85+
| prev | `string` | `''` | | Prev code |
86+
| current | `string` | `''` | | Current Code |
87+
88+
### Custom theme
89+
90+
`vue-diff` uses the following <a href="https://github.com/highlightjs/highlight.js/tree/master/src/styles">highlight.js themes</a> and can be customized.
91+
92+
* dark: `highlight.js/scss/monokai.scss`
93+
* light: `highlight.js/scss/vs.scss`
94+
95+
```bash
96+
npm install highlight.js
2997
```
30-
npm run lint
98+
99+
```vue
100+
<template>
101+
<Diff
102+
:mode="mode"
103+
theme="custom"
104+
:language="language"
105+
:prev="prev"
106+
:current="current"
107+
/>
108+
</template>
109+
110+
<style lang="scss">
111+
.vue-diff-theme-custom {
112+
@import 'highlight.js/scss/vs2015.scss'; // import theme
113+
114+
background-color: #000; // Set background color
115+
}
116+
</style>
31117
```
32118

33-
### Customize configuration
34-
See [Configuration Reference](https://cli.vuejs.org/config/).
119+
## Extend languages
120+
121+
`vue-diff` supports the following languages and can be extended through <a href="https://github.com/highlightjs/highlight.js/#es6-modules">highlight.js language registration.</a>
122+
123+
* `css`
124+
* `xml`
125+
* `markdown`
126+
* `javascript`
127+
* `json`
128+
* `plaintext`
129+
* `typescript`
130+
131+
```ts
132+
import VueDiff from 'vue-diff'
133+
import 'vue-diff/dist/index.css'
134+
135+
// extend yaml language
136+
import yaml from 'highlight.js/lib/languages/yaml'
137+
138+
VueDiff.hljs.registerLanguage('yaml', yaml)
139+
140+
app.use(VueDiff)
141+
```

‎dev/App.vue‎

Lines changed: 10 additions & 4 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('unified')
52-
const languages = ref(['javascript', 'html', 'css'])
51+
const mode = ref('split')
52+
const languages = ref(['javascript', 'html', 'css', 'yaml'])
5353
const language = ref('javascript')
54-
const themes = ref(['dark', 'light'])
54+
const themes = ref(['dark', 'light', 'vs2015'])
5555
const theme = ref('dark')
5656
5757
const prev = ref('')
@@ -87,7 +87,7 @@ export default defineComponent({
8787
})
8888
</script>
8989

90-
<style scoped lang="scss">
90+
<style lang="scss">
9191
.editor {
9292
section {
9393
display: flex;
@@ -108,4 +108,10 @@ export default defineComponent({
108108
}
109109
}
110110
}
111+
112+
.vue-diff-theme-custom {
113+
@import 'highlight.js/scss/vs2015.scss'; // import theme
114+
115+
background-color: #000; // Set background color
116+
}
111117
</style>

‎dev/main.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ import { createApp } from 'vue'
22
import App from './App.vue'
33
import VueDiff from '../src'
44

5+
// extend yaml language
6+
import yaml from 'highlight.js/lib/languages/yaml'
7+
8+
VueDiff.hljs.registerLanguage('yaml', yaml)
9+
510
const app = createApp(App)
611
app.use(VueDiff)
712
app.mount('#app')

‎dev/template.ts‎

Lines changed: 57 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,23 @@ const javascript1 =
33
"name": "vue-diff",
44
"version": "0.0.0",
55
"description": "Vue diff viewer",
6-
"private": true
6+
"private": true,
7+
"peerDependencies": {
8+
"vue": "^3.0.0"
9+
}
710
}`
811

912
const javascript2 =
1013
`const b2 = {
1114
"name": "vue-diff",
12-
"version": "0.0.1",
15+
"version": "1.0.0",
1316
"description": "Vue diff viewer",
1417
"scripts": {
15-
"dev": "vite",
16-
"build": "vite build",
17-
"test:unit": "vue-cli-service test:unit",
18-
"test:e2e": "vue-cli-service test:e2e",
18+
"test": "vue-cli-service test:unit"
1919
"lint": "vue-cli-service lint"
20+
},
21+
"peerDependencies": {
22+
"vue": "^3.0.0"
2023
}
2124
}`
2225

@@ -44,35 +47,72 @@ const html2 =
4447
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
4548
</head>
4649
<body class="bg-gray-900">
47-
<div id="app" class="p-12"></div>
50+
<div id="app"></div>
4851
<script type="module" src="/dev/main.ts"></script>
52+
<script async defer src="https://buttons.github.io/buttons.js"></script>
4953
</body>
5054
</html>`
5155

5256
const css1 =
53-
`@import '../../css/style.css';
57+
`.vue-diff-wrapper {
58+
width: 100%;
59+
}
5460
55-
.vue-diff-viewer {
56-
background-color: #272822;
61+
.vue-diff-theme-dark {
62+
@import 'highlight.js/scss/vs2015.scss';
63+
background-color: #000;
64+
}
65+
66+
.vue-diff-theme-light {
67+
@import 'highlight.js/scss/vs.scss';
68+
background-color: #fff;
5769
}`
5870

5971
const css2 =
60-
`@import 'css/style.css';
72+
`.vue-diff-wrapper {
73+
overflow: hidden;
74+
width: 100%;
75+
border-radius: 0.3em;
76+
}
6177
62-
div.vue-diff-viewer {
63-
background-color: #666;
78+
.vue-diff-theme-dark {
79+
@import 'highlight.js/scss/monokai.scss';
80+
background-color: #272822;
6481
}
6582
66-
#vue-diff-viewer {
67-
display: flex;
68-
display: -webkit-flex;
83+
.vue-diff-theme-light {
84+
@import 'highlight.js/scss/vs.scss';
85+
background-color: #fff;
6986
}`
7087

88+
const yaml1 =
89+
`name: Release
90+
91+
on:
92+
push:
93+
branches:
94+
- alpha
95+
96+
jobs:
97+
# job`
98+
99+
const yaml2 =
100+
`name: Release
101+
102+
on:
103+
push:
104+
branches:
105+
- master
106+
107+
jobs:`
108+
71109
export default {
72110
javascript1,
73111
javascript2,
74112
html1,
75113
html2,
76114
css1,
77-
css2
115+
css2,
116+
yaml1,
117+
yaml2
78118
}

0 commit comments

Comments
 (0)