v-code-diff 0.3.1 → 0.3.5
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 +20 -3
- package/dist/v-code-diff/util.d.ts +3 -0
- package/dist/v-code-diff/v-code-diff.d.ts +23 -15
- 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 +35 -2
- package/src/lib/v-code-diff/v-code-diff.ts +31 -37
package/README.md
CHANGED
|
@@ -134,6 +134,7 @@ export default {
|
|
|
134
134
|
| diffStyle | difference style | string | word, char | word |
|
|
135
135
|
| fileName | file name | string | - | |
|
|
136
136
|
| isShowNoChange | show raw when no change | boolean | - | false |
|
|
137
|
+
| trim | Remove blank characters before and after the string | boolean | - | false |
|
|
137
138
|
|
|
138
139
|
# Difference from [vue-code-diff](https://github.com/ddchef/vue-code-diff)
|
|
139
140
|
|
|
@@ -141,11 +142,27 @@ export default {
|
|
|
141
142
|
* Smaller package size
|
|
142
143
|
* Faster rendering speed
|
|
143
144
|
|
|
144
|
-
#
|
|
145
|
+
# ChangeLog
|
|
145
146
|
|
|
146
|
-
|
|
147
|
+
### 0.3.5
|
|
147
148
|
|
|
148
|
-
|
|
149
|
+
1. In the side-by-side mode, support left and right synchronous scrolling
|
|
150
|
+
|
|
151
|
+
### 0.3.4
|
|
152
|
+
|
|
153
|
+
1. Add Prop `trim`, it will remove the blank characters before and after the string
|
|
154
|
+
|
|
155
|
+
### 0.3.3
|
|
156
|
+
|
|
157
|
+
1. Fixed the problem of highlight failure.
|
|
158
|
+
|
|
159
|
+
### 0.3.2
|
|
160
|
+
|
|
161
|
+
1. Fixed the warning for vue2 users in console
|
|
162
|
+
|
|
163
|
+
### 0.3.1
|
|
164
|
+
|
|
165
|
+
1. Fix incorrect style when comparing text
|
|
149
166
|
|
|
150
167
|
### 0.3.0
|
|
151
168
|
|
|
@@ -10,7 +10,10 @@ declare type Props = Readonly<{
|
|
|
10
10
|
fileName: string;
|
|
11
11
|
isShowNoChange: boolean;
|
|
12
12
|
diffStyle: 'word' | 'char';
|
|
13
|
+
trim: boolean;
|
|
13
14
|
} & {}>;
|
|
15
|
+
export declare function useDebounceFn(fn: any, delay: any): () => void;
|
|
14
16
|
export declare const createHtml: (props: Props) => string;
|
|
15
17
|
export declare function highlightElements(element: Element, props: any, ctx: SetupContext<any>): Promise<void>;
|
|
18
|
+
export declare function syncScroll(selector: any): void;
|
|
16
19
|
export {};
|
|
@@ -41,22 +41,26 @@ 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
|
+
};
|
|
44
48
|
}, {
|
|
45
|
-
html: import("vue-demi").
|
|
46
|
-
props: Readonly<{
|
|
47
|
-
highlight: boolean;
|
|
48
|
-
oldString: string;
|
|
49
|
-
newString: string;
|
|
50
|
-
context: number;
|
|
51
|
-
outputFormat: "line-by-line" | "side-by-side";
|
|
52
|
-
drawFileList: boolean;
|
|
53
|
-
renderNothingWhenEmpty: boolean;
|
|
54
|
-
diffStyle: "word" | "char";
|
|
55
|
-
fileName: string;
|
|
56
|
-
isShowNoChange: boolean;
|
|
57
|
-
}>;
|
|
58
|
-
ctx: import("vue-demi").SetupContext<("before-render" | "after-render")[]>;
|
|
49
|
+
html: import("vue-demi").Ref<string>;
|
|
59
50
|
}, 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<{
|
|
51
|
+
highlight?: unknown;
|
|
52
|
+
oldString?: unknown;
|
|
53
|
+
newString?: unknown;
|
|
54
|
+
context?: unknown;
|
|
55
|
+
outputFormat?: unknown;
|
|
56
|
+
drawFileList?: unknown;
|
|
57
|
+
renderNothingWhenEmpty?: unknown;
|
|
58
|
+
diffStyle?: unknown;
|
|
59
|
+
fileName?: unknown;
|
|
60
|
+
isShowNoChange?: unknown;
|
|
61
|
+
trim?: unknown;
|
|
62
|
+
} & {
|
|
63
|
+
trim: boolean;
|
|
60
64
|
highlight: boolean;
|
|
61
65
|
oldString: string;
|
|
62
66
|
newString: string;
|
|
@@ -67,7 +71,11 @@ declare const _default: import("vue-demi").DefineComponent<{
|
|
|
67
71
|
diffStyle: "word" | "char";
|
|
68
72
|
fileName: string;
|
|
69
73
|
isShowNoChange: boolean;
|
|
70
|
-
} & {}
|
|
74
|
+
} & {}> & {
|
|
75
|
+
"onBefore-render"?: ((...args: any[]) => any) | undefined;
|
|
76
|
+
"onAfter-render"?: ((...args: any[]) => any) | undefined;
|
|
77
|
+
}, {
|
|
78
|
+
trim: boolean;
|
|
71
79
|
highlight: boolean;
|
|
72
80
|
oldString: string;
|
|
73
81
|
newString: string;
|
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);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){return new Promise((n=>{setTimeout((()=>{a.default.highlightElement(e),n(!0)}),0)}))}(e)));await Promise.all(i),t.emit("after-render")}
|
|
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;e.isShowNoChange&&(t="File Without Change\tOldString: ======================== \n"+t,r="File Without Change\tNewString: ======================== \n"+r);const i=n.createPatch(e.fileName,t,r,"","",{context:e.context});return o.html(i,{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){return new Promise((n=>{setTimeout((()=>{a.default.highlightElement(e),n(!0)}),0)}))}(e)));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}},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,0,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,
|
|
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;e.isShowNoChange&&(n="File Without Change\tOldString: ======================== \n"+n,t="File Without Change\tNewString: ======================== \n"+t);const r=a(e.fileName,n,t,"","",{context:e.context});return d.html(r,{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){return new Promise((n=>{setTimeout((()=>{s.highlightElement(e),n(!0)}),0)}))}(e)));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}},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 e=document.createElement("div");e.innerHTML=o.value,await c(e,0,l),o.value=e.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,i
|
|
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;e.isShowNoChange&&(n="File Without Change\tOldString: ======================== \n"+n,r="File Without Change\tNewString: ======================== \n"+r);const i=t.createPatch(e.fileName,n,r,"","",{context:e.context});return d.html(i,{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){return new Promise((n=>{setTimeout((()=>{a.default.highlightElement(e),n(!0)}),0)}))}(e)));await Promise.all(i),t.emit("after-render")}function c(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=[],u=[];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,u[o]={}),t=u[o]&&u[o][r]?u[o][r]:u[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}},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 e=document.createElement("div");e.innerHTML=r.value,await h(e,0,t),r.value=e.innerHTML}}),200);return n.watch(e,i,{deep:!0,immediate:!0}),n.onMounted((()=>{"side-by-side"===e.outputFormat&&c(".d2h-file-side-diff")})),n.onUpdated((()=>{"side-by-side"===e.outputFormat&&c(".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.5",
|
|
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,11 +14,24 @@ type Props = Readonly<{
|
|
|
14
14
|
fileName: string
|
|
15
15
|
isShowNoChange: boolean
|
|
16
16
|
diffStyle: 'word' | 'char'
|
|
17
|
+
trim: boolean
|
|
17
18
|
} & {}>
|
|
18
19
|
|
|
20
|
+
export function useDebounceFn (fn, delay) {
|
|
21
|
+
let timer
|
|
22
|
+
return function () {
|
|
23
|
+
const context = this
|
|
24
|
+
const args = arguments
|
|
25
|
+
clearTimeout(timer)
|
|
26
|
+
timer = setTimeout(function () {
|
|
27
|
+
fn.apply(context, args)
|
|
28
|
+
}, delay)
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
19
32
|
export const createHtml = (props: Props) => {
|
|
20
|
-
let oldString = props.oldString
|
|
21
|
-
let newString = props.newString
|
|
33
|
+
let oldString = props.trim ? props.oldString.trim() : props.oldString
|
|
34
|
+
let newString = props.trim ? props.newString.trim() : props.newString
|
|
22
35
|
if (props.isShowNoChange) {
|
|
23
36
|
oldString = 'File Without Change\tOldString: ======================== \n' + oldString
|
|
24
37
|
newString = 'File Without Change\tNewString: ======================== \n' + newString
|
|
@@ -58,3 +71,23 @@ export async function highlightElements (element: Element, props, ctx: SetupCont
|
|
|
58
71
|
await Promise.all(promises)
|
|
59
72
|
ctx.emit('after-render')
|
|
60
73
|
}
|
|
74
|
+
|
|
75
|
+
export function syncScroll (selector) {
|
|
76
|
+
let active: HTMLElement = document.createElement('div')
|
|
77
|
+
document.querySelectorAll(selector).forEach(function (element) {
|
|
78
|
+
element.addEventListener('mouseenter', function (e) {
|
|
79
|
+
active = e.target
|
|
80
|
+
})
|
|
81
|
+
|
|
82
|
+
element.addEventListener('scroll', function (e) {
|
|
83
|
+
if (e.target !== active) return
|
|
84
|
+
|
|
85
|
+
document.querySelectorAll(selector).forEach(function (target) {
|
|
86
|
+
if (active === target) return
|
|
87
|
+
|
|
88
|
+
target.scrollTop = active.scrollTop
|
|
89
|
+
target.scrollLeft = active.scrollLeft
|
|
90
|
+
})
|
|
91
|
+
})
|
|
92
|
+
})
|
|
93
|
+
}
|
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
defineComponent,
|
|
4
|
-
DirectiveArguments,
|
|
5
|
-
isVue3,
|
|
6
|
-
PropType,
|
|
7
|
-
resolveDirective,
|
|
8
|
-
withDirectives,
|
|
9
|
-
h
|
|
10
|
-
} from 'vue-demi'
|
|
11
|
-
import { createHtml, highlightElements } 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'
|
|
12
3
|
import './styles'
|
|
13
4
|
|
|
14
5
|
export default defineComponent({
|
|
15
6
|
name: 'CodeDiff',
|
|
16
|
-
directives: {
|
|
17
|
-
highlight: async function (el, binding) {
|
|
18
|
-
const props = binding.value.props
|
|
19
|
-
const ctx = binding.value.ctx
|
|
20
|
-
if (props.highlight) {
|
|
21
|
-
await highlightElements(el, props, ctx)
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
7
|
props: {
|
|
26
8
|
highlight: {
|
|
27
9
|
type: Boolean,
|
|
@@ -62,37 +44,49 @@ export default defineComponent({
|
|
|
62
44
|
isShowNoChange: {
|
|
63
45
|
type: Boolean,
|
|
64
46
|
default: false
|
|
47
|
+
},
|
|
48
|
+
trim: {
|
|
49
|
+
type: Boolean,
|
|
50
|
+
default: false
|
|
65
51
|
}
|
|
66
52
|
},
|
|
67
53
|
emits: ['before-render', 'after-render'],
|
|
68
54
|
setup (props, ctx) {
|
|
69
|
-
const html =
|
|
55
|
+
const html = ref(createHtml(props))
|
|
56
|
+
const cb = useDebounceFn(async () => {
|
|
57
|
+
html.value = createHtml(props)
|
|
58
|
+
if (props.highlight) {
|
|
59
|
+
const el = document.createElement('div')
|
|
60
|
+
el.innerHTML = html.value
|
|
61
|
+
await highlightElements(el, props, ctx)
|
|
62
|
+
html.value = el.innerHTML
|
|
63
|
+
}
|
|
64
|
+
}, 200)
|
|
65
|
+
watch(props, cb, { deep: true, immediate: true })
|
|
66
|
+
onMounted(() => {
|
|
67
|
+
if (props.outputFormat === 'side-by-side') {
|
|
68
|
+
syncScroll('.d2h-file-side-diff')
|
|
69
|
+
}
|
|
70
|
+
})
|
|
71
|
+
onUpdated(() => {
|
|
72
|
+
if (props.outputFormat === 'side-by-side') {
|
|
73
|
+
syncScroll('.d2h-file-side-diff')
|
|
74
|
+
}
|
|
75
|
+
})
|
|
70
76
|
return {
|
|
71
|
-
html
|
|
72
|
-
props,
|
|
73
|
-
ctx
|
|
77
|
+
html
|
|
74
78
|
}
|
|
75
79
|
},
|
|
76
80
|
render () {
|
|
77
|
-
const directiveValue = { props: this.props, ctx: this.ctx }
|
|
78
81
|
if (isVue3) {
|
|
79
|
-
|
|
80
|
-
return withDirectives(h('div', {
|
|
82
|
+
return h('div', {
|
|
81
83
|
innerHTML: this.html
|
|
82
|
-
})
|
|
83
|
-
[highlight, directiveValue]
|
|
84
|
-
])
|
|
84
|
+
})
|
|
85
85
|
} else {
|
|
86
86
|
return h('div', {
|
|
87
87
|
domProps: {
|
|
88
88
|
innerHTML: this.html
|
|
89
|
-
}
|
|
90
|
-
directives: [
|
|
91
|
-
{
|
|
92
|
-
name: 'highlight',
|
|
93
|
-
value: directiveValue
|
|
94
|
-
}
|
|
95
|
-
]
|
|
89
|
+
}
|
|
96
90
|
})
|
|
97
91
|
}
|
|
98
92
|
}
|