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

Commit 337c64e

Browse files
hoihearthoiheart
authored
Merge pull request #1 from hoiheart/alpha
Alpha
2 parents 2372dd5 + 463fdab commit 337c64e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+41913
-110
lines changed

‎.browserslistrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
> 1%
2+
last 2 versions
3+
IE >= 11
4+
not dead

‎.editorconfig

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[*.{js,jsx,ts,tsx,vue}]
2+
indent_style = space
3+
indent_size = 2
4+
trim_trailing_whitespace = true
5+
insert_final_newline = true

‎.eslintrc.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true
5+
},
6+
extends: [
7+
'plugin:vue/vue3-essential',
8+
'@vue/standard',
9+
'@vue/typescript/recommended'
10+
],
11+
parserOptions: {
12+
ecmaVersion: 2020
13+
},
14+
rules: {
15+
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16+
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
17+
'@typescript-eslint/ban-ts-ignore': 'off'
18+
},
19+
overrides: [
20+
{
21+
files: [
22+
'**/__tests__/*.{j,t}s?(x)'
23+
],
24+
env: {
25+
jest: true
26+
}
27+
}
28+
]
29+
}

‎.github/workflows/release.yaml

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

‎.gitignore

Lines changed: 26 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,30 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
yarn-debug.log*
6-
yarn-error.log*
7-
lerna-debug.log*
8-
9-
# Diagnostic reports (https://nodejs.org/api/report.html)
10-
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11-
12-
# Runtime data
13-
pids
14-
*.pid
15-
*.seed
16-
*.pid.lock
17-
18-
# Directory for instrumented libs generated by jscoverage/JSCover
19-
lib-cov
20-
21-
# Coverage directory used by tools like istanbul
22-
coverage
23-
*.lcov
24-
25-
# nyc test coverage
26-
.nyc_output
27-
28-
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29-
.grunt
30-
31-
# Bower dependency directory (https://bower.io/)
32-
bower_components
33-
34-
# node-waf configuration
35-
.lock-wscript
36-
37-
# Compiled binary addons (https://nodejs.org/api/addons.html)
38-
build/Release
39-
40-
# Dependency directories
41-
node_modules/
42-
jspm_packages/
43-
44-
# TypeScript v1 declaration files
45-
typings/
46-
47-
# TypeScript cache
48-
*.tsbuildinfo
1+
.DS_Store
2+
node_modules
3+
/dist
494

50-
# Optional npm cache directory
51-
.npm
5+
/tests/e2e/videos/
6+
/tests/e2e/screenshots/
527

53-
# Optional eslint cache
54-
.eslintcache
558

56-
# Microbundle cache
57-
.rpt2_cache/
58-
.rts2_cache_cjs/
59-
.rts2_cache_es/
60-
.rts2_cache_umd/
9+
# local env files
10+
.env.local
11+
.env.*.local
6112

62-
# Optional REPL history
63-
.node_repl_history
64-
65-
# Output of 'npm pack'
66-
*.tgz
67-
68-
# Yarn Integrity file
69-
.yarn-integrity
70-
71-
# dotenv environment variables file
72-
.env
73-
.env.test
74-
75-
# parcel-bundler cache (https://parceljs.org/)
76-
.cache
77-
78-
# Next.js build output
79-
.next
80-
81-
# Nuxt.js build / generate output
82-
.nuxt
83-
dist
84-
85-
# Gatsby files
86-
.cache/
87-
# Comment in the public line in if your project uses Gatsby and *not* Next.js
88-
# https://nextjs.org/blog/next-9-1#public-directory-support
89-
# public
90-
91-
# vuepress build output
92-
.vuepress/dist
93-
94-
# Serverless directories
95-
.serverless/
96-
97-
# FuseBox cache
98-
.fusebox/
99-
100-
# DynamoDB Local files
101-
.dynamodb/
102-
103-
# TernJS port file
104-
.tern-port
13+
# Log files
14+
npm-debug.log*
15+
yarn-debug.log*
16+
yarn-error.log*
17+
pnpm-debug.log*
18+
19+
# Editor directories and files
20+
.idea
21+
.vscode
22+
*.suo
23+
*.ntvs*
24+
*.njsproj
25+
*.sln
26+
*.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: 140 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,140 @@
1-
# vue-diff
1+
# vue-diff
2+
3+
Vue diff viewer plugin
4+
5+
> ⚠️ This plugin supports only Vue3
6+
> Vue2 doesn't have a support plan yet.
7+
8+
## Table of Contents
9+
10+
- [Introduction](#introduction)
11+
- [Features](#features)
12+
- [Install plugin](#install-plugin)
13+
* [Options](#options)
14+
- [Usage diff viewer](#usage-diff-viewer)
15+
* [props](#props)
16+
- [Custom theme](#custom-theme)
17+
- [Extend languages](#extend-languages)
18+
19+
## Introduction
20+
21+
<img src="https://user-images.githubusercontent.com/25652218/104695609-60533c80-5750-11eb-85dd-0e7d0d79d5ac.png" alt="screenshot" style="max-width:100%;">
22+
23+
You can see the difference between the two codes with the `vue-diff` plugin.
24+
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).
25+
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>
26+
27+
## Features
28+
29+
* [x] Support split / unified mode
30+
* [x] Support some languages and can be extended
31+
* [X] Support two themes (dark / light) and can be customized
32+
* [ ] Support IE11 (IE 11 support for Vue@3 is still pending)
33+
34+
## Install plugin
35+
36+
```bash
37+
npm install vue-diff
38+
```
39+
40+
install plugin in vue application
41+
42+
```ts
43+
import VueDiff from 'vue-diff'
44+
// import VueDiff from 'vue-diff/dist/index.es5' // If need to use es5 build
45+
import 'vue-diff/dist/index.css'
46+
47+
app.use(VueDiff)
48+
```
49+
### Options
50+
51+
```ts
52+
app.use(VueDiff, {
53+
componentName: 'VueDiff'
54+
})
55+
```
56+
57+
| name | type | detault | description |
58+
|- | - | - | - |
59+
| componentName | `string` | `'Diff'` | Global diff component name |
60+
61+
## Usage diff viewer
62+
63+
Insert the diff component with props.
64+
65+
```vue
66+
<template>
67+
<Diff
68+
:mode="mode"
69+
:theme="theme"
70+
:language="language"
71+
:prev="prev"
72+
:current="current"
73+
/>
74+
</template>
75+
```
76+
77+
### props
78+
79+
| name | type | detault | values | description
80+
|- | - | - | - |- |
81+
| mode | `string` | `split` | `split`, `unified` |
82+
| theme | `string` | `dark` | `dark`, `light` | See <a href="#custom-theme">Custom theme</a>
83+
| language | `string` | `plaintext` | | See <a href="#extend-languages">Extend languages</a>
84+
| prev | `string` | `''` | | Prev code |
85+
| current | `string` | `''` | | Current Code |
86+
87+
## Custom theme
88+
89+
`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.
90+
91+
* dark: `highlight.js/scss/monokai.scss`
92+
* light: `highlight.js/scss/vs.scss`
93+
94+
```bash
95+
npm install highlight.js
96+
```
97+
98+
```vue
99+
<template>
100+
<Diff
101+
:mode="mode"
102+
theme="custom"
103+
:language="language"
104+
:prev="prev"
105+
:current="current"
106+
/>
107+
</template>
108+
109+
<style lang="scss">
110+
.vue-diff-theme-custom {
111+
@import 'highlight.js/scss/vs2015.scss'; // import theme
112+
113+
background-color: #000; // Set background color
114+
}
115+
</style>
116+
```
117+
118+
## Extend languages
119+
120+
`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>
121+
122+
* `css`
123+
* `xml`
124+
* `markdown`
125+
* `javascript`
126+
* `json`
127+
* `plaintext`
128+
* `typescript`
129+
130+
```ts
131+
import VueDiff from 'vue-diff'
132+
import 'vue-diff/dist/index.css'
133+
134+
// extend yaml language
135+
import yaml from 'highlight.js/lib/languages/yaml'
136+
137+
VueDiff.hljs.registerLanguage('yaml', yaml)
138+
139+
app.use(VueDiff)
140+
```

0 commit comments

Comments
 (0)