v-code-diff 0.3.4 → 0.3.8
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 +27 -8
- package/dist/v-code-diff/util.d.ts +3 -0
- package/dist/v-code-diff/v-code-diff.d.ts +14 -17
- 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 +1 -1
- package/src/lib/v-code-diff/styles/style.scss +3 -0
- package/src/lib/v-code-diff/util.ts +36 -5
- 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,10 +126,11 @@ 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 |
|
|
@@ -135,6 +138,8 @@ export default {
|
|
|
135
138
|
| fileName | file name | string | - | |
|
|
136
139
|
| isShowNoChange | show raw when no change | boolean | - | false |
|
|
137
140
|
| trim | Remove blank characters before and after the string | boolean | - | false |
|
|
141
|
+
| language | code language | boolean | - | false |
|
|
142
|
+
| noDiffLineFeed | Do not diff windows line feed (CRLF) and linux line feed (LF) | boolean | - | false |
|
|
138
143
|
|
|
139
144
|
# Difference from [vue-code-diff](https://github.com/ddchef/vue-code-diff)
|
|
140
145
|
|
|
@@ -142,11 +147,25 @@ export default {
|
|
|
142
147
|
* Smaller package size
|
|
143
148
|
* Faster rendering speed
|
|
144
149
|
|
|
145
|
-
#
|
|
150
|
+
# ChangeLog
|
|
146
151
|
|
|
147
|
-
|
|
152
|
+
### 0.3.8
|
|
148
153
|
|
|
149
|
-
|
|
154
|
+
1. Style adjustment, hide css `d2h-file-header`, same as vue-code-diff
|
|
155
|
+
2. Add prop `noDiffLineFeed`, do not diff windows line feed (CRLF) and linux line feed (LF)
|
|
156
|
+
|
|
157
|
+
### 0.3.7
|
|
158
|
+
|
|
159
|
+
1. Fix the problem of displaying "File Without Change..." when isShowNoChange is true and the old and new codes are different,
|
|
160
|
+
then show all the source code
|
|
161
|
+
|
|
162
|
+
### 0.3.6
|
|
163
|
+
|
|
164
|
+
1. Add prop `language`, make highlighting more accurate
|
|
165
|
+
|
|
166
|
+
### 0.3.5
|
|
167
|
+
|
|
168
|
+
1. In the side-by-side mode, support left and right synchronous scrolling
|
|
150
169
|
|
|
151
170
|
### 0.3.4
|
|
152
171
|
|
|
@@ -11,8 +11,11 @@ declare type Props = Readonly<{
|
|
|
11
11
|
isShowNoChange: boolean;
|
|
12
12
|
diffStyle: 'word' | 'char';
|
|
13
13
|
trim: boolean;
|
|
14
|
+
language: string;
|
|
15
|
+
noDiffLineFeed: boolean;
|
|
14
16
|
} & {}>;
|
|
15
17
|
export declare function useDebounceFn(fn: any, delay: any): () => void;
|
|
16
18
|
export declare const createHtml: (props: Props) => string;
|
|
17
19
|
export declare function highlightElements(element: Element, props: any, ctx: SetupContext<any>): Promise<void>;
|
|
20
|
+
export declare function syncScroll(selector: any): void;
|
|
18
21
|
export {};
|
|
@@ -45,22 +45,17 @@ declare const _default: import("vue-demi").DefineComponent<{
|
|
|
45
45
|
type: BooleanConstructor;
|
|
46
46
|
default: boolean;
|
|
47
47
|
};
|
|
48
|
+
language: {
|
|
49
|
+
type: StringConstructor;
|
|
50
|
+
default: string;
|
|
51
|
+
};
|
|
52
|
+
noDiffLineFeed: {
|
|
53
|
+
type: BooleanConstructor;
|
|
54
|
+
default: boolean;
|
|
55
|
+
};
|
|
48
56
|
}, {
|
|
49
57
|
html: import("vue-demi").Ref<string>;
|
|
50
58
|
}, 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;
|
|
64
59
|
highlight: boolean;
|
|
65
60
|
oldString: string;
|
|
66
61
|
newString: string;
|
|
@@ -71,11 +66,10 @@ declare const _default: import("vue-demi").DefineComponent<{
|
|
|
71
66
|
diffStyle: "word" | "char";
|
|
72
67
|
fileName: string;
|
|
73
68
|
isShowNoChange: boolean;
|
|
74
|
-
} & {}> & {
|
|
75
|
-
"onBefore-render"?: ((...args: any[]) => any) | undefined;
|
|
76
|
-
"onAfter-render"?: ((...args: any[]) => any) | undefined;
|
|
77
|
-
}, {
|
|
78
69
|
trim: boolean;
|
|
70
|
+
language: string;
|
|
71
|
+
noDiffLineFeed: boolean;
|
|
72
|
+
} & {}>, {
|
|
79
73
|
highlight: boolean;
|
|
80
74
|
oldString: string;
|
|
81
75
|
newString: string;
|
|
@@ -86,5 +80,8 @@ declare const _default: import("vue-demi").DefineComponent<{
|
|
|
86
80
|
diffStyle: "word" | "char";
|
|
87
81
|
fileName: string;
|
|
88
82
|
isShowNoChange: boolean;
|
|
83
|
+
trim: boolean;
|
|
84
|
+
language: string;
|
|
85
|
+
noDiffLineFeed: boolean;
|
|
89
86
|
}>;
|
|
90
87
|
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 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
|
|
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;t=e.noDiffLineFeed?t.replace(/(\r\n)/g,"\n"):t,r=e.noDiffLineFeed?r.replace(/(\r\n)/g,"\n"):r;let 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-file-header {\n display: none;\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:""},noDiffLineFeed:{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,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;n=e.noDiffLineFeed?n.replace(/(\r\n)/g,"\n"):n,t=e.noDiffLineFeed?t.replace(/(\r\n)/g,"\n"):t;let 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 f=[],u=[];function m(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]=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}}m(".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}",{});m(".d2h-wrapper {\n position: relative;\n line-height: normal;\n}\n.d2h-wrapper .d2h-file-header {\n display: none;\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:""},noDiffLineFeed:{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 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;n=e.noDiffLineFeed?n.replace(/(\r\n)/g,"\n"):n,r=e.noDiffLineFeed?r.replace(/(\r\n)/g,"\n"):r;let 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 f(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=[],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=u.indexOf(l);-1===o&&(o=u.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-file-header {\n display: none;\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:""},noDiffLineFeed:{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 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&&f(".d2h-file-side-diff")})),n.onUpdated((()=>{"side-by-side"===e.outputFormat&&f(".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
|
@@ -15,6 +15,8 @@ type Props = Readonly<{
|
|
|
15
15
|
isShowNoChange: boolean
|
|
16
16
|
diffStyle: 'word' | 'char'
|
|
17
17
|
trim: boolean
|
|
18
|
+
language: string
|
|
19
|
+
noDiffLineFeed: boolean
|
|
18
20
|
} & {}>
|
|
19
21
|
|
|
20
22
|
export function useDebounceFn (fn, delay) {
|
|
@@ -32,11 +34,15 @@ export function useDebounceFn (fn, delay) {
|
|
|
32
34
|
export const createHtml = (props: Props) => {
|
|
33
35
|
let oldString = props.trim ? props.oldString.trim() : props.oldString
|
|
34
36
|
let newString = props.trim ? props.newString.trim() : props.newString
|
|
35
|
-
|
|
37
|
+
oldString = props.noDiffLineFeed ? oldString.replace(/(\r\n)/g, '\n') : oldString
|
|
38
|
+
newString = props.noDiffLineFeed ? newString.replace(/(\r\n)/g, '\n') : newString
|
|
39
|
+
let context = props.context
|
|
40
|
+
if (props.isShowNoChange && oldString === newString) {
|
|
36
41
|
oldString = 'File Without Change\tOldString: ======================== \n' + oldString
|
|
37
42
|
newString = 'File Without Change\tNewString: ======================== \n' + newString
|
|
43
|
+
context = 99999
|
|
38
44
|
}
|
|
39
|
-
const dd = createPatch(props.fileName, oldString, newString, '', '', { context:
|
|
45
|
+
const dd = createPatch(props.fileName, oldString, newString, '', '', { context: context })
|
|
40
46
|
return d2h.html(dd, {
|
|
41
47
|
outputFormat: props.outputFormat,
|
|
42
48
|
drawFileList: props.drawFileList,
|
|
@@ -55,10 +61,15 @@ async function listElements (element: Element): Promise<Element[]> {
|
|
|
55
61
|
})
|
|
56
62
|
}
|
|
57
63
|
|
|
58
|
-
async function highlightElement (el:
|
|
64
|
+
async function highlightElement (el: HTMLElement, language: string): Promise<boolean> {
|
|
59
65
|
return new Promise(resolve => {
|
|
60
66
|
setTimeout(() => {
|
|
61
|
-
|
|
67
|
+
if (language) {
|
|
68
|
+
const text = el.innerText
|
|
69
|
+
el.innerHTML = hljs.highlight(text, { language: language }).value
|
|
70
|
+
} else {
|
|
71
|
+
hljs.highlightElement(<HTMLElement>el)
|
|
72
|
+
}
|
|
62
73
|
resolve(true)
|
|
63
74
|
}, 0)
|
|
64
75
|
})
|
|
@@ -67,7 +78,27 @@ async function highlightElement (el: Element): Promise<boolean> {
|
|
|
67
78
|
export async function highlightElements (element: Element, props, ctx: SetupContext<any>) {
|
|
68
79
|
ctx.emit('before-render')
|
|
69
80
|
const elements = await listElements(element)
|
|
70
|
-
const promises = Array.from(elements).map(el => highlightElement(el))
|
|
81
|
+
const promises = Array.from(elements).map(el => highlightElement(el as HTMLElement, props.language))
|
|
71
82
|
await Promise.all(promises)
|
|
72
83
|
ctx.emit('after-render')
|
|
73
84
|
}
|
|
85
|
+
|
|
86
|
+
export function syncScroll (selector) {
|
|
87
|
+
let active: HTMLElement = document.createElement('div')
|
|
88
|
+
document.querySelectorAll(selector).forEach(function (element) {
|
|
89
|
+
element.addEventListener('mouseenter', function (e) {
|
|
90
|
+
active = e.target
|
|
91
|
+
})
|
|
92
|
+
|
|
93
|
+
element.addEventListener('scroll', function (e) {
|
|
94
|
+
if (e.target !== active) return
|
|
95
|
+
|
|
96
|
+
document.querySelectorAll(selector).forEach(function (target) {
|
|
97
|
+
if (active === target) return
|
|
98
|
+
|
|
99
|
+
target.scrollTop = active.scrollTop
|
|
100
|
+
target.scrollLeft = active.scrollLeft
|
|
101
|
+
})
|
|
102
|
+
})
|
|
103
|
+
})
|
|
104
|
+
}
|
|
@@ -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({
|
|
@@ -48,6 +48,14 @@ export default defineComponent({
|
|
|
48
48
|
trim: {
|
|
49
49
|
type: Boolean,
|
|
50
50
|
default: false
|
|
51
|
+
},
|
|
52
|
+
language: {
|
|
53
|
+
type: String,
|
|
54
|
+
default: ''
|
|
55
|
+
},
|
|
56
|
+
noDiffLineFeed: {
|
|
57
|
+
type: Boolean,
|
|
58
|
+
default: false
|
|
51
59
|
}
|
|
52
60
|
},
|
|
53
61
|
emits: ['before-render', 'after-render'],
|
|
@@ -63,6 +71,16 @@ export default defineComponent({
|
|
|
63
71
|
}
|
|
64
72
|
}, 200)
|
|
65
73
|
watch(props, cb, { deep: true, immediate: true })
|
|
74
|
+
onMounted(() => {
|
|
75
|
+
if (props.outputFormat === 'side-by-side') {
|
|
76
|
+
syncScroll('.d2h-file-side-diff')
|
|
77
|
+
}
|
|
78
|
+
})
|
|
79
|
+
onUpdated(() => {
|
|
80
|
+
if (props.outputFormat === 'side-by-side') {
|
|
81
|
+
syncScroll('.d2h-file-side-diff')
|
|
82
|
+
}
|
|
83
|
+
})
|
|
66
84
|
return {
|
|
67
85
|
html
|
|
68
86
|
}
|