v-code-diff 0.3.3 → 0.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -8
- package/dist/v-code-diff/util.d.ts +3 -0
- package/dist/v-code-diff/v-code-diff.d.ts +12 -0
- package/dist/v-code-diff.cjs.js +1 -1
- package/dist/v-code-diff.esm.js +1 -1
- package/dist/v-code-diff.umd.js +1 -1
- package/package.json +12 -13
- package/src/lib/v-code-diff/util.ts +36 -7
- package/src/lib/v-code-diff/v-code-diff.ts +20 -2
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# VCodeDiff
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/v-code-diff)
|
|
3
|
+
[](https://www.npmjs.com/package/v-code-diff)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
[](https://www.npmjs.com/package/v-code-diff)
|
|
4
6
|
|
|
5
7
|
A code diff display plugin, available for Vue2 / Vue3. It is the vue3 version
|
|
6
8
|
of [vue-code-diff](https://github.com/ddchef/vue-code-diff), refer to a lot of code, thanks here.
|
|
@@ -124,16 +126,18 @@ export default {
|
|
|
124
126
|
|
|
125
127
|
| Prop | Description | Type | Optional | Default |
|
|
126
128
|
|---------- |-------- |---------- |------------- |-------- |
|
|
127
|
-
| highlight| control whether to highlight the code | boolean |
|
|
128
|
-
|
|
|
129
|
-
|
|
|
130
|
-
|
|
|
129
|
+
| highlight| control whether to highlight the code | boolean | - | true |
|
|
130
|
+
| language| code language，such as `typescript`. If you don't input, it will be judged automatically. [view all supported languages](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) | string | - | - |
|
|
131
|
+
| old-string| old string | string | - | - |
|
|
132
|
+
| new-string| new string| string | - | - |
|
|
133
|
+
| context| number of show context lines | number | - | - |
|
|
131
134
|
| outputFormat| show method | string | line-by-line，side-by-side | line-by-line |
|
|
132
135
|
| drawFileList | show files list | boolean | - | false |
|
|
133
136
|
| renderNothingWhenEmpty | render nothing when empty | boolean | - | false |
|
|
134
137
|
| diffStyle | difference style | string | word, char | word |
|
|
135
138
|
| fileName | file name | string | - | |
|
|
136
139
|
| isShowNoChange | show raw when no change | boolean | - | false |
|
|
140
|
+
| trim | Remove blank characters before and after the string | boolean | - | false |
|
|
137
141
|
|
|
138
142
|
# Difference from [vue-code-diff](https://github.com/ddchef/vue-code-diff)
|
|
139
143
|
|
|
@@ -141,11 +145,24 @@ export default {
|
|
|
141
145
|
* Smaller package size
|
|
142
146
|
* Faster rendering speed
|
|
143
147
|
|
|
144
|
-
#
|
|
148
|
+
# ChangeLog
|
|
145
149
|
|
|
146
|
-
|
|
150
|
+
### 0.3.7
|
|
147
151
|
|
|
148
|
-
|
|
152
|
+
1. Fix the problem of displaying "File Without Change..." when isShowNoChange is true and the old and new codes are different,
|
|
153
|
+
then show all the source code
|
|
154
|
+
|
|
155
|
+
### 0.3.6
|
|
156
|
+
|
|
157
|
+
1. Add prop `language`, make highlighting more accurate
|
|
158
|
+
|
|
159
|
+
### 0.3.5
|
|
160
|
+
|
|
161
|
+
1. In the side-by-side mode, support left and right synchronous scrolling
|
|
162
|
+
|
|
163
|
+
### 0.3.4
|
|
164
|
+
|
|
165
|
+
1. Add Prop `trim`, it will remove the blank characters before and after the string
|
|
149
166
|
|
|
150
167
|
### 0.3.3
|
|
151
168
|
|
|
@@ -10,8 +10,11 @@ declare type Props = Readonly<{
|
|
|
10
10
|
fileName: string;
|
|
11
11
|
isShowNoChange: boolean;
|
|
12
12
|
diffStyle: 'word' | 'char';
|
|
13
|
+
trim: boolean;
|
|
14
|
+
language: string;
|
|
13
15
|
} & {}>;
|
|
14
16
|
export declare function useDebounceFn(fn: any, delay: any): () => void;
|
|
15
17
|
export declare const createHtml: (props: Props) => string;
|
|
16
18
|
export declare function highlightElements(element: Element, props: any, ctx: SetupContext<any>): Promise<void>;
|
|
19
|
+
export declare function syncScroll(selector: any): void;
|
|
17
20
|
export {};
|
|
@@ -41,6 +41,14 @@ declare const _default: import("vue-demi").DefineComponent<{
|
|
|
41
41
|
type: BooleanConstructor;
|
|
42
42
|
default: boolean;
|
|
43
43
|
};
|
|
44
|
+
trim: {
|
|
45
|
+
type: BooleanConstructor;
|
|
46
|
+
default: boolean;
|
|
47
|
+
};
|
|
48
|
+
language: {
|
|
49
|
+
type: StringConstructor;
|
|
50
|
+
default: string;
|
|
51
|
+
};
|
|
44
52
|
}, {
|
|
45
53
|
html: import("vue-demi").Ref<string>;
|
|
46
54
|
}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("before-render" | "after-render")[], "before-render" | "after-render", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<{
|
|
@@ -54,6 +62,8 @@ declare const _default: import("vue-demi").DefineComponent<{
|
|
|
54
62
|
diffStyle: "word" | "char";
|
|
55
63
|
fileName: string;
|
|
56
64
|
isShowNoChange: boolean;
|
|
65
|
+
trim: boolean;
|
|
66
|
+
language: string;
|
|
57
67
|
} & {}>, {
|
|
58
68
|
highlight: boolean;
|
|
59
69
|
oldString: string;
|
|
@@ -65,5 +75,7 @@ declare const _default: import("vue-demi").DefineComponent<{
|
|
|
65
75
|
diffStyle: "word" | "char";
|
|
66
76
|
fileName: string;
|
|
67
77
|
isShowNoChange: boolean;
|
|
78
|
+
trim: boolean;
|
|
79
|
+
language: string;
|
|
68
80
|
}>;
|
|
69
81
|
export default _default;
|
package/dist/v-code-diff.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue-demi"),n=require("diff"),t=require("diff2html"),r=require("highlight.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}require("diff2html/bundles/css/diff2html.min.css");var o=l(t),a=i(r);const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue-demi"),n=require("diff"),t=require("diff2html"),r=require("highlight.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}require("diff2html/bundles/css/diff2html.min.css");var o=l(t),a=i(r);const d=e=>{let t=e.trim?e.oldString.trim():e.oldString,r=e.trim?e.newString.trim():e.newString,i=e.context;e.isShowNoChange&&t===r&&(t="File Without Change\tOldString: ======================== \n"+t,r="File Without Change\tNewString: ======================== \n"+r,i=99999);const l=n.createPatch(e.fileName,t,r,"","",{context:i});return o.html(l,{outputFormat:e.outputFormat,drawFileList:e.drawFileList,matching:"lines",diffStyle:e.diffStyle,renderNothingWhenEmpty:e.renderNothingWhenEmpty})};async function s(e,n,t){t.emit("before-render");const r=await async function(e){return new Promise((n=>{setTimeout((()=>{const t=e.querySelectorAll(".d2h-wrapper .d2h-code-line-ctn");n(Array.from(t))}),0)}))}(e),i=Array.from(r).map((e=>async function(e,n){return new Promise((t=>{setTimeout((()=>{if(n){const t=e.innerText;e.innerHTML=a.default.highlight(t,{language:n}).value}else a.default.highlightElement(e);t(!0)}),0)}))}(e,n.language)));await Promise.all(i),t.emit("after-render")}function h(e){let n=document.createElement("div");document.querySelectorAll(e).forEach((function(t){t.addEventListener("mouseenter",(function(e){n=e.target})),t.addEventListener("scroll",(function(t){t.target===n&&document.querySelectorAll(e).forEach((function(e){n!==e&&(e.scrollTop=n.scrollTop,e.scrollLeft=n.scrollLeft)}))}))}))}var c=[],u=[];function f(e,n){if(e&&"undefined"!=typeof document){var t,r=!0===n.prepend?"prepend":"append",i=!0===n.singleTag,l="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(i){var o=c.indexOf(l);-1===o&&(o=c.push(l)-1,u[o]={}),t=u[o]&&u[o][r]?u[o][r]:u[o][r]=a()}else t=a();65279===e.charCodeAt(0)&&(e=e.substring(1)),t.styleSheet?t.styleSheet.cssText+=e:t.appendChild(document.createTextNode(e))}function a(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var t=Object.keys(n.attributes),i=0;i<t.length;i++)e.setAttribute(t[i],n.attributes[t[i]]);var o="prepend"===r?"afterbegin":"beforeend";return l.insertAdjacentElement(o,e),e}}f(".hljs {\n display: inline-block;\n padding: 0;\n background: transparent;\n vertical-align: middle;\n}\n\n.hljs-comment,\n.hljs-quote {\n color: #800;\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-section,\n.hljs-title,\n.hljs-name {\n color: #008;\n}\n\n.hljs-variable,\n.hljs-template-variable {\n color: #660;\n}\n\n.hljs-string,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-regexp {\n color: #080;\n}\n\n.hljs-literal,\n.hljs-symbol,\n.hljs-bullet,\n.hljs-meta,\n.hljs-number,\n.hljs-link {\n color: #066;\n}\n\n.hljs-title,\n.hljs-doctag,\n.hljs-type,\n.hljs-attr,\n.hljs-built_in,\n.hljs-builtin-name,\n.hljs-params {\n color: #606;\n}\n\n.hljs-attribute,\n.hljs-subst {\n color: #000;\n}\n\n.hljs-formula {\n background-color: #eee;\n font-style: italic;\n}\n\n.hljs-selector-id,\n.hljs-selector-class {\n color: #9B703F;\n}\n\n.hljs-addition {\n background-color: #baeeba;\n}\n\n.hljs-deletion {\n background-color: #ffc8bd;\n}\n\n.hljs-doctag,\n.hljs-strong {\n font-weight: bold;\n}\n\n.hljs-emphasis {\n font-style: italic;\n}",{});f(".d2h-wrapper {\n position: relative;\n line-height: normal;\n}\n.d2h-wrapper .d2h-files-diff {\n display: flex;\n}\n.d2h-wrapper .d2h-file-side-diff {\n margin-bottom: -5px;\n}\n.d2h-wrapper .d2h-code-side-emptyplaceholder {\n max-height: 19px;\n}\n.d2h-wrapper .d2h-code-side-line,\n.d2h-wrapper .d2h-code-line {\n width: auto;\n}\n.d2h-wrapper .d2h-code-side-line .d2h-info {\n height: 18px;\n}\n.d2h-wrapper .d2h-cntx,\n.d2h-wrapper .d2h-del,\n.d2h-wrapper .d2h-ins {\n height: 18px;\n}\n.d2h-wrapper .d2h-code-linenumber,\n.d2h-wrapper .d2h-code-side-linenumber {\n line-height: 20px;\n height: 20px;\n}\n.d2h-wrapper tr {\n height: 20px;\n}",{});var p=e.defineComponent({name:"CodeDiff",props:{highlight:{type:Boolean,default:!0},oldString:{type:String,default:""},newString:{type:String,default:""},context:{type:Number,default:10},outputFormat:{type:String,default:"line-by-line"},drawFileList:{type:Boolean,default:!1},renderNothingWhenEmpty:{type:Boolean,default:!1},diffStyle:{type:String,default:"word"},fileName:{type:String,default:""},isShowNoChange:{type:Boolean,default:!1},trim:{type:Boolean,default:!1},language:{type:String,default:""}},emits:["before-render","after-render"],setup(n,t){const r=e.ref(d(n)),i=function(e,n){let t;return function(){const r=this,i=arguments;clearTimeout(t),t=setTimeout((function(){e.apply(r,i)}),n)}}((async()=>{if(r.value=d(n),n.highlight){const e=document.createElement("div");e.innerHTML=r.value,await s(e,n,t),r.value=e.innerHTML}}),200);return e.watch(n,i,{deep:!0,immediate:!0}),e.onMounted((()=>{"side-by-side"===n.outputFormat&&h(".d2h-file-side-diff")})),e.onUpdated((()=>{"side-by-side"===n.outputFormat&&h(".d2h-file-side-diff")})),{html:r}},render(){return e.isVue3?e.h("div",{innerHTML:this.html}):e.h("div",{domProps:{innerHTML:this.html}})}});p.install=e=>{e.component(p.name,p)};const m=[p],g=e=>{m.forEach((n=>{e.component(n.name,n)}))};var y={install:g};exports.CodeDiff=p,exports.default=y,exports.install=g;
|
package/dist/v-code-diff.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{defineComponent as e,ref as n,watch as t,
|
|
1
|
+
import{defineComponent as e,ref as n,watch as t,onMounted as r,onUpdated as i,isVue3 as l,h as o}from"vue-demi";import{createPatch as a}from"diff";import*as d from"diff2html";import s from"highlight.js";import"diff2html/bundles/css/diff2html.min.css";const h=e=>{let n=e.trim?e.oldString.trim():e.oldString,t=e.trim?e.newString.trim():e.newString,r=e.context;e.isShowNoChange&&n===t&&(n="File Without Change\tOldString: ======================== \n"+n,t="File Without Change\tNewString: ======================== \n"+t,r=99999);const i=a(e.fileName,n,t,"","",{context:r});return d.html(i,{outputFormat:e.outputFormat,drawFileList:e.drawFileList,matching:"lines",diffStyle:e.diffStyle,renderNothingWhenEmpty:e.renderNothingWhenEmpty})};async function c(e,n,t){t.emit("before-render");const r=await async function(e){return new Promise((n=>{setTimeout((()=>{const t=e.querySelectorAll(".d2h-wrapper .d2h-code-line-ctn");n(Array.from(t))}),0)}))}(e),i=Array.from(r).map((e=>async function(e,n){return new Promise((t=>{setTimeout((()=>{if(n){const t=e.innerText;e.innerHTML=s.highlight(t,{language:n}).value}else s.highlightElement(e);t(!0)}),0)}))}(e,n.language)));await Promise.all(i),t.emit("after-render")}function p(e){let n=document.createElement("div");document.querySelectorAll(e).forEach((function(t){t.addEventListener("mouseenter",(function(e){n=e.target})),t.addEventListener("scroll",(function(t){t.target===n&&document.querySelectorAll(e).forEach((function(e){n!==e&&(e.scrollTop=n.scrollTop,e.scrollLeft=n.scrollLeft)}))}))}))}var u=[],m=[];function f(e,n){if(e&&"undefined"!=typeof document){var t,r=!0===n.prepend?"prepend":"append",i=!0===n.singleTag,l="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(i){var o=u.indexOf(l);-1===o&&(o=u.push(l)-1,m[o]={}),t=m[o]&&m[o][r]?m[o][r]:m[o][r]=a()}else t=a();65279===e.charCodeAt(0)&&(e=e.substring(1)),t.styleSheet?t.styleSheet.cssText+=e:t.appendChild(document.createTextNode(e))}function a(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var t=Object.keys(n.attributes),i=0;i<t.length;i++)e.setAttribute(t[i],n.attributes[t[i]]);var o="prepend"===r?"afterbegin":"beforeend";return l.insertAdjacentElement(o,e),e}}f(".hljs {\n display: inline-block;\n padding: 0;\n background: transparent;\n vertical-align: middle;\n}\n\n.hljs-comment,\n.hljs-quote {\n color: #800;\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-section,\n.hljs-title,\n.hljs-name {\n color: #008;\n}\n\n.hljs-variable,\n.hljs-template-variable {\n color: #660;\n}\n\n.hljs-string,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-regexp {\n color: #080;\n}\n\n.hljs-literal,\n.hljs-symbol,\n.hljs-bullet,\n.hljs-meta,\n.hljs-number,\n.hljs-link {\n color: #066;\n}\n\n.hljs-title,\n.hljs-doctag,\n.hljs-type,\n.hljs-attr,\n.hljs-built_in,\n.hljs-builtin-name,\n.hljs-params {\n color: #606;\n}\n\n.hljs-attribute,\n.hljs-subst {\n color: #000;\n}\n\n.hljs-formula {\n background-color: #eee;\n font-style: italic;\n}\n\n.hljs-selector-id,\n.hljs-selector-class {\n color: #9B703F;\n}\n\n.hljs-addition {\n background-color: #baeeba;\n}\n\n.hljs-deletion {\n background-color: #ffc8bd;\n}\n\n.hljs-doctag,\n.hljs-strong {\n font-weight: bold;\n}\n\n.hljs-emphasis {\n font-style: italic;\n}",{});f(".d2h-wrapper {\n position: relative;\n line-height: normal;\n}\n.d2h-wrapper .d2h-files-diff {\n display: flex;\n}\n.d2h-wrapper .d2h-file-side-diff {\n margin-bottom: -5px;\n}\n.d2h-wrapper .d2h-code-side-emptyplaceholder {\n max-height: 19px;\n}\n.d2h-wrapper .d2h-code-side-line,\n.d2h-wrapper .d2h-code-line {\n width: auto;\n}\n.d2h-wrapper .d2h-code-side-line .d2h-info {\n height: 18px;\n}\n.d2h-wrapper .d2h-cntx,\n.d2h-wrapper .d2h-del,\n.d2h-wrapper .d2h-ins {\n height: 18px;\n}\n.d2h-wrapper .d2h-code-linenumber,\n.d2h-wrapper .d2h-code-side-linenumber {\n line-height: 20px;\n height: 20px;\n}\n.d2h-wrapper tr {\n height: 20px;\n}",{});var g=e({name:"CodeDiff",props:{highlight:{type:Boolean,default:!0},oldString:{type:String,default:""},newString:{type:String,default:""},context:{type:Number,default:10},outputFormat:{type:String,default:"line-by-line"},drawFileList:{type:Boolean,default:!1},renderNothingWhenEmpty:{type:Boolean,default:!1},diffStyle:{type:String,default:"word"},fileName:{type:String,default:""},isShowNoChange:{type:Boolean,default:!1},trim:{type:Boolean,default:!1},language:{type:String,default:""}},emits:["before-render","after-render"],setup(e,l){const o=n(h(e)),a=function(e,n){let t;return function(){const r=this,i=arguments;clearTimeout(t),t=setTimeout((function(){e.apply(r,i)}),n)}}((async()=>{if(o.value=h(e),e.highlight){const n=document.createElement("div");n.innerHTML=o.value,await c(n,e,l),o.value=n.innerHTML}}),200);return t(e,a,{deep:!0,immediate:!0}),r((()=>{"side-by-side"===e.outputFormat&&p(".d2h-file-side-diff")})),i((()=>{"side-by-side"===e.outputFormat&&p(".d2h-file-side-diff")})),{html:o}},render(){return o("div",l?{innerHTML:this.html}:{domProps:{innerHTML:this.html}})}});g.install=e=>{e.component(g.name,g)};const y=[g],j=e=>{y.forEach((n=>{e.component(n.name,n)}))};var b={install:j};export default b;export{g as CodeDiff,j as install};
|
package/dist/v-code-diff.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("vue-demi"),require("diff"),require("diff2html"),require("highlight.js"),require("diff2html/bundles/css/diff2html.min.css")):"function"==typeof define&&define.amd?define(["exports","vue-demi","diff","diff2html","highlight.js","diff2html/bundles/css/diff2html.min.css"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["v-code-diff"]={},e.VueDemi,e.diff,e.d2h,e.hljs)}(this,(function(e,n,t,r,i){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var
|
|
1
|
+
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("vue-demi"),require("diff"),require("diff2html"),require("highlight.js"),require("diff2html/bundles/css/diff2html.min.css")):"function"==typeof define&&define.amd?define(["exports","vue-demi","diff","diff2html","highlight.js","diff2html/bundles/css/diff2html.min.css"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["v-code-diff"]={},e.VueDemi,e.diff,e.d2h,e.hljs)}(this,(function(e,n,t,r,i){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var d=o(r),a=l(i);const s=e=>{let n=e.trim?e.oldString.trim():e.oldString,r=e.trim?e.newString.trim():e.newString,i=e.context;e.isShowNoChange&&n===r&&(n="File Without Change\tOldString: ======================== \n"+n,r="File Without Change\tNewString: ======================== \n"+r,i=99999);const l=t.createPatch(e.fileName,n,r,"","",{context:i});return d.html(l,{outputFormat:e.outputFormat,drawFileList:e.drawFileList,matching:"lines",diffStyle:e.diffStyle,renderNothingWhenEmpty:e.renderNothingWhenEmpty})};async function h(e,n,t){t.emit("before-render");const r=await async function(e){return new Promise((n=>{setTimeout((()=>{const t=e.querySelectorAll(".d2h-wrapper .d2h-code-line-ctn");n(Array.from(t))}),0)}))}(e),i=Array.from(r).map((e=>async function(e,n){return new Promise((t=>{setTimeout((()=>{if(n){const t=e.innerText;e.innerHTML=a.default.highlight(t,{language:n}).value}else a.default.highlightElement(e);t(!0)}),0)}))}(e,n.language)));await Promise.all(i),t.emit("after-render")}function u(e){let n=document.createElement("div");document.querySelectorAll(e).forEach((function(t){t.addEventListener("mouseenter",(function(e){n=e.target})),t.addEventListener("scroll",(function(t){t.target===n&&document.querySelectorAll(e).forEach((function(e){n!==e&&(e.scrollTop=n.scrollTop,e.scrollLeft=n.scrollLeft)}))}))}))}var f=[],c=[];function p(e,n){if(e&&"undefined"!=typeof document){var t,r=!0===n.prepend?"prepend":"append",i=!0===n.singleTag,l="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(i){var o=f.indexOf(l);-1===o&&(o=f.push(l)-1,c[o]={}),t=c[o]&&c[o][r]?c[o][r]:c[o][r]=d()}else t=d();65279===e.charCodeAt(0)&&(e=e.substring(1)),t.styleSheet?t.styleSheet.cssText+=e:t.appendChild(document.createTextNode(e))}function d(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var t=Object.keys(n.attributes),i=0;i<t.length;i++)e.setAttribute(t[i],n.attributes[t[i]]);var o="prepend"===r?"afterbegin":"beforeend";return l.insertAdjacentElement(o,e),e}}p(".hljs {\n display: inline-block;\n padding: 0;\n background: transparent;\n vertical-align: middle;\n}\n\n.hljs-comment,\n.hljs-quote {\n color: #800;\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-section,\n.hljs-title,\n.hljs-name {\n color: #008;\n}\n\n.hljs-variable,\n.hljs-template-variable {\n color: #660;\n}\n\n.hljs-string,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-regexp {\n color: #080;\n}\n\n.hljs-literal,\n.hljs-symbol,\n.hljs-bullet,\n.hljs-meta,\n.hljs-number,\n.hljs-link {\n color: #066;\n}\n\n.hljs-title,\n.hljs-doctag,\n.hljs-type,\n.hljs-attr,\n.hljs-built_in,\n.hljs-builtin-name,\n.hljs-params {\n color: #606;\n}\n\n.hljs-attribute,\n.hljs-subst {\n color: #000;\n}\n\n.hljs-formula {\n background-color: #eee;\n font-style: italic;\n}\n\n.hljs-selector-id,\n.hljs-selector-class {\n color: #9B703F;\n}\n\n.hljs-addition {\n background-color: #baeeba;\n}\n\n.hljs-deletion {\n background-color: #ffc8bd;\n}\n\n.hljs-doctag,\n.hljs-strong {\n font-weight: bold;\n}\n\n.hljs-emphasis {\n font-style: italic;\n}",{});p(".d2h-wrapper {\n position: relative;\n line-height: normal;\n}\n.d2h-wrapper .d2h-files-diff {\n display: flex;\n}\n.d2h-wrapper .d2h-file-side-diff {\n margin-bottom: -5px;\n}\n.d2h-wrapper .d2h-code-side-emptyplaceholder {\n max-height: 19px;\n}\n.d2h-wrapper .d2h-code-side-line,\n.d2h-wrapper .d2h-code-line {\n width: auto;\n}\n.d2h-wrapper .d2h-code-side-line .d2h-info {\n height: 18px;\n}\n.d2h-wrapper .d2h-cntx,\n.d2h-wrapper .d2h-del,\n.d2h-wrapper .d2h-ins {\n height: 18px;\n}\n.d2h-wrapper .d2h-code-linenumber,\n.d2h-wrapper .d2h-code-side-linenumber {\n line-height: 20px;\n height: 20px;\n}\n.d2h-wrapper tr {\n height: 20px;\n}",{});var m=n.defineComponent({name:"CodeDiff",props:{highlight:{type:Boolean,default:!0},oldString:{type:String,default:""},newString:{type:String,default:""},context:{type:Number,default:10},outputFormat:{type:String,default:"line-by-line"},drawFileList:{type:Boolean,default:!1},renderNothingWhenEmpty:{type:Boolean,default:!1},diffStyle:{type:String,default:"word"},fileName:{type:String,default:""},isShowNoChange:{type:Boolean,default:!1},trim:{type:Boolean,default:!1},language:{type:String,default:""}},emits:["before-render","after-render"],setup(e,t){const r=n.ref(s(e)),i=function(e,n){let t;return function(){const r=this,i=arguments;clearTimeout(t),t=setTimeout((function(){e.apply(r,i)}),n)}}((async()=>{if(r.value=s(e),e.highlight){const n=document.createElement("div");n.innerHTML=r.value,await h(n,e,t),r.value=n.innerHTML}}),200);return n.watch(e,i,{deep:!0,immediate:!0}),n.onMounted((()=>{"side-by-side"===e.outputFormat&&u(".d2h-file-side-diff")})),n.onUpdated((()=>{"side-by-side"===e.outputFormat&&u(".d2h-file-side-diff")})),{html:r}},render(){return n.isVue3?n.h("div",{innerHTML:this.html}):n.h("div",{domProps:{innerHTML:this.html}})}});m.install=e=>{e.component(m.name,m)};const g=[m],y=e=>{g.forEach((n=>{e.component(n.name,n)}))};var j={install:y};e.CodeDiff=m,e.default=j,e.install=y,Object.defineProperty(e,"__esModule",{value:!0})}));
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "v-code-diff",
|
|
3
3
|
"description": "A diff plugin of vue, support vue2 and vue3",
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.7",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite",
|
|
7
7
|
"build": "npx rimraf dist && rollup --config rollup.config.js",
|
|
@@ -56,25 +56,24 @@
|
|
|
56
56
|
"@types/node": "^14.14.41",
|
|
57
57
|
"@typescript-eslint/eslint-plugin": "^4.22.0",
|
|
58
58
|
"@typescript-eslint/parser": "^4.22.0",
|
|
59
|
-
"@vitejs/plugin-legacy": "^1.3
|
|
60
|
-
"@vitejs/plugin-vue": "^1.
|
|
61
|
-
"@vitejs/plugin-vue-jsx": "^1.1.
|
|
62
|
-
"@vue/compiler-sfc": "^3.
|
|
59
|
+
"@vitejs/plugin-legacy": "^1.5.3",
|
|
60
|
+
"@vitejs/plugin-vue": "^1.6.2",
|
|
61
|
+
"@vitejs/plugin-vue-jsx": "^1.1.8",
|
|
62
|
+
"@vue/compiler-sfc": "^3.2.11",
|
|
63
63
|
"@vue/eslint-config-standard": "^4.0.0",
|
|
64
64
|
"@vue/eslint-config-typescript": "^4.0.0",
|
|
65
65
|
"@vueuse/core": "^4.11.2",
|
|
66
|
-
"ant-design-vue": "^2.
|
|
66
|
+
"ant-design-vue": "^2.2.7",
|
|
67
67
|
"body-parser": "^1.19.0",
|
|
68
68
|
"commitizen": "^4.2.3",
|
|
69
69
|
"conventional-changelog-cli": "^2.1.1",
|
|
70
70
|
"cross-env": "^7.0.3",
|
|
71
71
|
"dotenv": "^8.2.0",
|
|
72
72
|
"eslint": "^7.22.0",
|
|
73
|
-
"eslint-config-airbnb-base": "^14.2.1",
|
|
74
73
|
"eslint-config-prettier": "^8.1.0",
|
|
75
74
|
"eslint-plugin-import": "^2.22.1",
|
|
76
75
|
"eslint-plugin-prettier": "^3.4.0",
|
|
77
|
-
"eslint-plugin-vue": "^7.
|
|
76
|
+
"eslint-plugin-vue": "^7.17.0",
|
|
78
77
|
"gh-pages": "^3.2.1",
|
|
79
78
|
"lint-staged": "^10.5.4",
|
|
80
79
|
"prettier": "^2.2.1",
|
|
@@ -88,11 +87,11 @@
|
|
|
88
87
|
"stylelint-config-prettier": "^8.0.2",
|
|
89
88
|
"stylelint-config-standard": "^21.0.0",
|
|
90
89
|
"stylelint-order": "^4.1.0",
|
|
91
|
-
"typescript": "^4.
|
|
92
|
-
"vite": "^2.
|
|
93
|
-
"vue": "^3.
|
|
94
|
-
"vue-eslint-parser": "^7.
|
|
95
|
-
"vue-tsc": "^0.0
|
|
90
|
+
"typescript": "^4.4.2",
|
|
91
|
+
"vite": "^2.5.6",
|
|
92
|
+
"vue": "^3.2.11",
|
|
93
|
+
"vue-eslint-parser": "^7.11.0",
|
|
94
|
+
"vue-tsc": "^0.3.0",
|
|
96
95
|
"yorkie": "^2.0.0"
|
|
97
96
|
},
|
|
98
97
|
"gitHooks": {
|
|
@@ -14,6 +14,8 @@ type Props = Readonly<{
|
|
|
14
14
|
fileName: string
|
|
15
15
|
isShowNoChange: boolean
|
|
16
16
|
diffStyle: 'word' | 'char'
|
|
17
|
+
trim: boolean
|
|
18
|
+
language: string
|
|
17
19
|
} & {}>
|
|
18
20
|
|
|
19
21
|
export function useDebounceFn (fn, delay) {
|
|
@@ -29,13 +31,15 @@ export function useDebounceFn (fn, delay) {
|
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
export const createHtml = (props: Props) => {
|
|
32
|
-
let oldString = props.oldString
|
|
33
|
-
let newString = props.newString
|
|
34
|
-
|
|
34
|
+
let oldString = props.trim ? props.oldString.trim() : props.oldString
|
|
35
|
+
let newString = props.trim ? props.newString.trim() : props.newString
|
|
36
|
+
let context = props.context
|
|
37
|
+
if (props.isShowNoChange && oldString === newString) {
|
|
35
38
|
oldString = 'File Without Change\tOldString: ======================== \n' + oldString
|
|
36
39
|
newString = 'File Without Change\tNewString: ======================== \n' + newString
|
|
40
|
+
context = 99999
|
|
37
41
|
}
|
|
38
|
-
const dd = createPatch(props.fileName, oldString, newString, '', '', { context:
|
|
42
|
+
const dd = createPatch(props.fileName, oldString, newString, '', '', { context: context })
|
|
39
43
|
return d2h.html(dd, {
|
|
40
44
|
outputFormat: props.outputFormat,
|
|
41
45
|
drawFileList: props.drawFileList,
|
|
@@ -54,10 +58,15 @@ async function listElements (element: Element): Promise<Element[]> {
|
|
|
54
58
|
})
|
|
55
59
|
}
|
|
56
60
|
|
|
57
|
-
async function highlightElement (el:
|
|
61
|
+
async function highlightElement (el: HTMLElement, language: string): Promise<boolean> {
|
|
58
62
|
return new Promise(resolve => {
|
|
59
63
|
setTimeout(() => {
|
|
60
|
-
|
|
64
|
+
if (language) {
|
|
65
|
+
const text = el.innerText
|
|
66
|
+
el.innerHTML = hljs.highlight(text, { language: language }).value
|
|
67
|
+
} else {
|
|
68
|
+
hljs.highlightElement(<HTMLElement>el)
|
|
69
|
+
}
|
|
61
70
|
resolve(true)
|
|
62
71
|
}, 0)
|
|
63
72
|
})
|
|
@@ -66,7 +75,27 @@ async function highlightElement (el: Element): Promise<boolean> {
|
|
|
66
75
|
export async function highlightElements (element: Element, props, ctx: SetupContext<any>) {
|
|
67
76
|
ctx.emit('before-render')
|
|
68
77
|
const elements = await listElements(element)
|
|
69
|
-
const promises = Array.from(elements).map(el => highlightElement(el))
|
|
78
|
+
const promises = Array.from(elements).map(el => highlightElement(el as HTMLElement, props.language))
|
|
70
79
|
await Promise.all(promises)
|
|
71
80
|
ctx.emit('after-render')
|
|
72
81
|
}
|
|
82
|
+
|
|
83
|
+
export function syncScroll (selector) {
|
|
84
|
+
let active: HTMLElement = document.createElement('div')
|
|
85
|
+
document.querySelectorAll(selector).forEach(function (element) {
|
|
86
|
+
element.addEventListener('mouseenter', function (e) {
|
|
87
|
+
active = e.target
|
|
88
|
+
})
|
|
89
|
+
|
|
90
|
+
element.addEventListener('scroll', function (e) {
|
|
91
|
+
if (e.target !== active) return
|
|
92
|
+
|
|
93
|
+
document.querySelectorAll(selector).forEach(function (target) {
|
|
94
|
+
if (active === target) return
|
|
95
|
+
|
|
96
|
+
target.scrollTop = active.scrollTop
|
|
97
|
+
target.scrollLeft = active.scrollLeft
|
|
98
|
+
})
|
|
99
|
+
})
|
|
100
|
+
})
|
|
101
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent, isVue3, PropType, h, ref, watch } from 'vue-demi'
|
|
2
|
-
import { createHtml, highlightElements, useDebounceFn } from '@/lib/v-code-diff/util'
|
|
1
|
+
import { defineComponent, isVue3, PropType, h, ref, watch, onUpdated, onMounted } from 'vue-demi'
|
|
2
|
+
import { createHtml, highlightElements, syncScroll, useDebounceFn } from '@/lib/v-code-diff/util'
|
|
3
3
|
import './styles'
|
|
4
4
|
|
|
5
5
|
export default defineComponent({
|
|
@@ -44,6 +44,14 @@ export default defineComponent({
|
|
|
44
44
|
isShowNoChange: {
|
|
45
45
|
type: Boolean,
|
|
46
46
|
default: false
|
|
47
|
+
},
|
|
48
|
+
trim: {
|
|
49
|
+
type: Boolean,
|
|
50
|
+
default: false
|
|
51
|
+
},
|
|
52
|
+
language: {
|
|
53
|
+
type: String,
|
|
54
|
+
default: ''
|
|
47
55
|
}
|
|
48
56
|
},
|
|
49
57
|
emits: ['before-render', 'after-render'],
|
|
@@ -59,6 +67,16 @@ export default defineComponent({
|
|
|
59
67
|
}
|
|
60
68
|
}, 200)
|
|
61
69
|
watch(props, cb, { deep: true, immediate: true })
|
|
70
|
+
onMounted(() => {
|
|
71
|
+
if (props.outputFormat === 'side-by-side') {
|
|
72
|
+
syncScroll('.d2h-file-side-diff')
|
|
73
|
+
}
|
|
74
|
+
})
|
|
75
|
+
onUpdated(() => {
|
|
76
|
+
if (props.outputFormat === 'side-by-side') {
|
|
77
|
+
syncScroll('.d2h-file-side-diff')
|
|
78
|
+
}
|
|
79
|
+
})
|
|
62
80
|
return {
|
|
63
81
|
html
|
|
64
82
|
}
|