v-code-diff 0.3.5 → 0.3.9
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 +28 -5
- package/dist/v-code-diff/util.d.ts +2 -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/highlight.scss +70 -68
- package/src/lib/v-code-diff/styles/style.scss +3 -0
- package/src/lib/v-code-diff/util.ts +16 -5
- package/src/lib/v-code-diff/v-code-diff.ts +8 -0
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
|
|
|
@@ -144,6 +149,24 @@ export default {
|
|
|
144
149
|
|
|
145
150
|
# ChangeLog
|
|
146
151
|
|
|
152
|
+
### 0.3.9
|
|
153
|
+
|
|
154
|
+
1. Make the imported highlight.js style take effect only in `.d2h-wrapper` div
|
|
155
|
+
|
|
156
|
+
### 0.3.8
|
|
157
|
+
|
|
158
|
+
1. Style adjustment, hide css `d2h-file-header`, same as vue-code-diff
|
|
159
|
+
2. Add prop `noDiffLineFeed`, do not diff windows line feed (CRLF) and linux line feed (LF)
|
|
160
|
+
|
|
161
|
+
### 0.3.7
|
|
162
|
+
|
|
163
|
+
1. Fix the problem of displaying "File Without Change..." when isShowNoChange is true and the old and new codes are different,
|
|
164
|
+
then show all the source code
|
|
165
|
+
|
|
166
|
+
### 0.3.6
|
|
167
|
+
|
|
168
|
+
1. Add prop `language`, make highlighting more accurate
|
|
169
|
+
|
|
147
170
|
### 0.3.5
|
|
148
171
|
|
|
149
172
|
1. In the side-by-side mode, support left and right synchronous scrolling
|
|
@@ -11,6 +11,8 @@ 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;
|
|
@@ -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
|
|
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 a=l(t),d=i(r);const o=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 a.html(l,{outputFormat:e.outputFormat,drawFileList:e.drawFileList,matching:"lines",diffStyle:e.diffStyle,renderNothingWhenEmpty:e.renderNothingWhenEmpty})};async function p(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=d.default.highlight(t,{language:n}).value}else d.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 s=[],c=[];function u(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 a=s.indexOf(l);-1===a&&(a=s.push(l)-1,c[a]={}),t=c[a]&&c[a][r]?c[a][r]:c[a][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 a="prepend"===r?"afterbegin":"beforeend";return l.insertAdjacentElement(a,e),e}}u(".d2h-wrapper .hljs {\n display: inline-block;\n padding: 0;\n background: transparent;\n vertical-align: middle;\n}\n.d2h-wrapper .hljs-comment,\n.d2h-wrapper .hljs-quote {\n color: #800;\n}\n.d2h-wrapper .hljs-keyword,\n.d2h-wrapper .hljs-selector-tag,\n.d2h-wrapper .hljs-section,\n.d2h-wrapper .hljs-title,\n.d2h-wrapper .hljs-name {\n color: #008;\n}\n.d2h-wrapper .hljs-variable,\n.d2h-wrapper .hljs-template-variable {\n color: #660;\n}\n.d2h-wrapper .hljs-string,\n.d2h-wrapper .hljs-selector-attr,\n.d2h-wrapper .hljs-selector-pseudo,\n.d2h-wrapper .hljs-regexp {\n color: #080;\n}\n.d2h-wrapper .hljs-literal,\n.d2h-wrapper .hljs-symbol,\n.d2h-wrapper .hljs-bullet,\n.d2h-wrapper .hljs-meta,\n.d2h-wrapper .hljs-number,\n.d2h-wrapper .hljs-link {\n color: #066;\n}\n.d2h-wrapper .hljs-title,\n.d2h-wrapper .hljs-doctag,\n.d2h-wrapper .hljs-type,\n.d2h-wrapper .hljs-attr,\n.d2h-wrapper .hljs-built_in,\n.d2h-wrapper .hljs-builtin-name,\n.d2h-wrapper .hljs-params {\n color: #606;\n}\n.d2h-wrapper .hljs-attribute,\n.d2h-wrapper .hljs-subst {\n color: #000;\n}\n.d2h-wrapper .hljs-formula {\n background-color: #eee;\n font-style: italic;\n}\n.d2h-wrapper .hljs-selector-id,\n.d2h-wrapper .hljs-selector-class {\n color: #9B703F;\n}\n.d2h-wrapper .hljs-addition {\n background-color: #baeeba;\n}\n.d2h-wrapper .hljs-deletion {\n background-color: #ffc8bd;\n}\n.d2h-wrapper .hljs-doctag,\n.d2h-wrapper .hljs-strong {\n font-weight: bold;\n}\n.d2h-wrapper .hljs-emphasis {\n font-style: italic;\n}",{});u(".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 f=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(o(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=o(n),n.highlight){const e=document.createElement("div");e.innerHTML=r.value,await p(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}})}});f.install=e=>{e.component(f.name,f)};const m=[f],g=e=>{m.forEach((n=>{e.component(n.name,n)}))};var w={install:g};exports.CodeDiff=f,exports.default=w,exports.install=g;
|
package/dist/v-code-diff.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{defineComponent as e,ref as n,watch as t,onMounted as r,onUpdated as i,isVue3 as l,h as
|
|
1
|
+
import{defineComponent as e,ref as n,watch as t,onMounted as r,onUpdated as i,isVue3 as l,h as a}from"vue-demi";import{createPatch as d}from"diff";import*as o from"diff2html";import p 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=d(e.fileName,n,t,"","",{context:r});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,n){return new Promise((t=>{setTimeout((()=>{if(n){const t=e.innerText;e.innerHTML=p.highlight(t,{language:n}).value}else p.highlightElement(e);t(!0)}),0)}))}(e,n.language)));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 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 a=f.indexOf(l);-1===a&&(a=f.push(l)-1,u[a]={}),t=u[a]&&u[a][r]?u[a][r]:u[a][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 a="prepend"===r?"afterbegin":"beforeend";return l.insertAdjacentElement(a,e),e}}m(".d2h-wrapper .hljs {\n display: inline-block;\n padding: 0;\n background: transparent;\n vertical-align: middle;\n}\n.d2h-wrapper .hljs-comment,\n.d2h-wrapper .hljs-quote {\n color: #800;\n}\n.d2h-wrapper .hljs-keyword,\n.d2h-wrapper .hljs-selector-tag,\n.d2h-wrapper .hljs-section,\n.d2h-wrapper .hljs-title,\n.d2h-wrapper .hljs-name {\n color: #008;\n}\n.d2h-wrapper .hljs-variable,\n.d2h-wrapper .hljs-template-variable {\n color: #660;\n}\n.d2h-wrapper .hljs-string,\n.d2h-wrapper .hljs-selector-attr,\n.d2h-wrapper .hljs-selector-pseudo,\n.d2h-wrapper .hljs-regexp {\n color: #080;\n}\n.d2h-wrapper .hljs-literal,\n.d2h-wrapper .hljs-symbol,\n.d2h-wrapper .hljs-bullet,\n.d2h-wrapper .hljs-meta,\n.d2h-wrapper .hljs-number,\n.d2h-wrapper .hljs-link {\n color: #066;\n}\n.d2h-wrapper .hljs-title,\n.d2h-wrapper .hljs-doctag,\n.d2h-wrapper .hljs-type,\n.d2h-wrapper .hljs-attr,\n.d2h-wrapper .hljs-built_in,\n.d2h-wrapper .hljs-builtin-name,\n.d2h-wrapper .hljs-params {\n color: #606;\n}\n.d2h-wrapper .hljs-attribute,\n.d2h-wrapper .hljs-subst {\n color: #000;\n}\n.d2h-wrapper .hljs-formula {\n background-color: #eee;\n font-style: italic;\n}\n.d2h-wrapper .hljs-selector-id,\n.d2h-wrapper .hljs-selector-class {\n color: #9B703F;\n}\n.d2h-wrapper .hljs-addition {\n background-color: #baeeba;\n}\n.d2h-wrapper .hljs-deletion {\n background-color: #ffc8bd;\n}\n.d2h-wrapper .hljs-doctag,\n.d2h-wrapper .hljs-strong {\n font-weight: bold;\n}\n.d2h-wrapper .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 a=n(h(e)),d=function(e,n){let t;return function(){const r=this,i=arguments;clearTimeout(t),t=setTimeout((function(){e.apply(r,i)}),n)}}((async()=>{if(a.value=h(e),e.highlight){const n=document.createElement("div");n.innerHTML=a.value,await s(n,e,l),a.value=n.innerHTML}}),200);return t(e,d,{deep:!0,immediate:!0}),r((()=>{"side-by-side"===e.outputFormat&&c(".d2h-file-side-diff")})),i((()=>{"side-by-side"===e.outputFormat&&c(".d2h-file-side-diff")})),{html:a}},render(){return a("div",l?{innerHTML:this.html}:{domProps:{innerHTML:this.html}})}});g.install=e=>{e.component(g.name,g)};const w=[g],y=e=>{w.forEach((n=>{e.component(n.name,n)}))};var j={install:y};export default j;export{g as CodeDiff,y 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
|
|
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 d(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 a=d(r),o=l(i);const h=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 a.html(l,{outputFormat:e.outputFormat,drawFileList:e.drawFileList,matching:"lines",diffStyle:e.diffStyle,renderNothingWhenEmpty:e.renderNothingWhenEmpty})};async function p(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=o.default.highlight(t,{language:n}).value}else o.default.highlightElement(e);t(!0)}),0)}))}(e,n.language)));await Promise.all(i),t.emit("after-render")}function s(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 c(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 d=f.indexOf(l);-1===d&&(d=f.push(l)-1,u[d]={}),t=u[d]&&u[d][r]?u[d][r]:u[d][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 d="prepend"===r?"afterbegin":"beforeend";return l.insertAdjacentElement(d,e),e}}c(".d2h-wrapper .hljs {\n display: inline-block;\n padding: 0;\n background: transparent;\n vertical-align: middle;\n}\n.d2h-wrapper .hljs-comment,\n.d2h-wrapper .hljs-quote {\n color: #800;\n}\n.d2h-wrapper .hljs-keyword,\n.d2h-wrapper .hljs-selector-tag,\n.d2h-wrapper .hljs-section,\n.d2h-wrapper .hljs-title,\n.d2h-wrapper .hljs-name {\n color: #008;\n}\n.d2h-wrapper .hljs-variable,\n.d2h-wrapper .hljs-template-variable {\n color: #660;\n}\n.d2h-wrapper .hljs-string,\n.d2h-wrapper .hljs-selector-attr,\n.d2h-wrapper .hljs-selector-pseudo,\n.d2h-wrapper .hljs-regexp {\n color: #080;\n}\n.d2h-wrapper .hljs-literal,\n.d2h-wrapper .hljs-symbol,\n.d2h-wrapper .hljs-bullet,\n.d2h-wrapper .hljs-meta,\n.d2h-wrapper .hljs-number,\n.d2h-wrapper .hljs-link {\n color: #066;\n}\n.d2h-wrapper .hljs-title,\n.d2h-wrapper .hljs-doctag,\n.d2h-wrapper .hljs-type,\n.d2h-wrapper .hljs-attr,\n.d2h-wrapper .hljs-built_in,\n.d2h-wrapper .hljs-builtin-name,\n.d2h-wrapper .hljs-params {\n color: #606;\n}\n.d2h-wrapper .hljs-attribute,\n.d2h-wrapper .hljs-subst {\n color: #000;\n}\n.d2h-wrapper .hljs-formula {\n background-color: #eee;\n font-style: italic;\n}\n.d2h-wrapper .hljs-selector-id,\n.d2h-wrapper .hljs-selector-class {\n color: #9B703F;\n}\n.d2h-wrapper .hljs-addition {\n background-color: #baeeba;\n}\n.d2h-wrapper .hljs-deletion {\n background-color: #ffc8bd;\n}\n.d2h-wrapper .hljs-doctag,\n.d2h-wrapper .hljs-strong {\n font-weight: bold;\n}\n.d2h-wrapper .hljs-emphasis {\n font-style: italic;\n}",{});c(".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(h(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=h(e),e.highlight){const n=document.createElement("div");n.innerHTML=r.value,await p(n,e,t),r.value=n.innerHTML}}),200);return n.watch(e,i,{deep:!0,immediate:!0}),n.onMounted((()=>{"side-by-side"===e.outputFormat&&s(".d2h-file-side-diff")})),n.onUpdated((()=>{"side-by-side"===e.outputFormat&&s(".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],w=e=>{g.forEach((n=>{e.component(n.name,n)}))};var y={install:w};e.CodeDiff=m,e.default=y,e.install=w,Object.defineProperty(e,"__esModule",{value:!0})}));
|
package/package.json
CHANGED
|
@@ -1,82 +1,84 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
.d2h-wrapper {
|
|
2
|
+
.hljs {
|
|
3
|
+
display: inline-block;
|
|
4
|
+
padding: 0;
|
|
5
|
+
background: transparent;
|
|
6
|
+
vertical-align: middle;
|
|
7
|
+
}
|
|
7
8
|
|
|
8
|
-
.hljs-comment,
|
|
9
|
-
.hljs-quote {
|
|
10
|
-
|
|
11
|
-
}
|
|
9
|
+
.hljs-comment,
|
|
10
|
+
.hljs-quote {
|
|
11
|
+
color: #800;
|
|
12
|
+
}
|
|
12
13
|
|
|
13
|
-
.hljs-keyword,
|
|
14
|
-
.hljs-selector-tag,
|
|
15
|
-
.hljs-section,
|
|
16
|
-
.hljs-title,
|
|
17
|
-
.hljs-name {
|
|
18
|
-
|
|
19
|
-
}
|
|
14
|
+
.hljs-keyword,
|
|
15
|
+
.hljs-selector-tag,
|
|
16
|
+
.hljs-section,
|
|
17
|
+
.hljs-title,
|
|
18
|
+
.hljs-name {
|
|
19
|
+
color: #008;
|
|
20
|
+
}
|
|
20
21
|
|
|
21
|
-
.hljs-variable,
|
|
22
|
-
.hljs-template-variable {
|
|
23
|
-
|
|
24
|
-
}
|
|
22
|
+
.hljs-variable,
|
|
23
|
+
.hljs-template-variable {
|
|
24
|
+
color: #660;
|
|
25
|
+
}
|
|
25
26
|
|
|
26
|
-
.hljs-string,
|
|
27
|
-
.hljs-selector-attr,
|
|
28
|
-
.hljs-selector-pseudo,
|
|
29
|
-
.hljs-regexp {
|
|
30
|
-
|
|
31
|
-
}
|
|
27
|
+
.hljs-string,
|
|
28
|
+
.hljs-selector-attr,
|
|
29
|
+
.hljs-selector-pseudo,
|
|
30
|
+
.hljs-regexp {
|
|
31
|
+
color: #080;
|
|
32
|
+
}
|
|
32
33
|
|
|
33
|
-
.hljs-literal,
|
|
34
|
-
.hljs-symbol,
|
|
35
|
-
.hljs-bullet,
|
|
36
|
-
.hljs-meta,
|
|
37
|
-
.hljs-number,
|
|
38
|
-
.hljs-link {
|
|
39
|
-
|
|
40
|
-
}
|
|
34
|
+
.hljs-literal,
|
|
35
|
+
.hljs-symbol,
|
|
36
|
+
.hljs-bullet,
|
|
37
|
+
.hljs-meta,
|
|
38
|
+
.hljs-number,
|
|
39
|
+
.hljs-link {
|
|
40
|
+
color: #066;
|
|
41
|
+
}
|
|
41
42
|
|
|
42
|
-
.hljs-title,
|
|
43
|
-
.hljs-doctag,
|
|
44
|
-
.hljs-type,
|
|
45
|
-
.hljs-attr,
|
|
46
|
-
.hljs-built_in,
|
|
47
|
-
.hljs-builtin-name,
|
|
48
|
-
.hljs-params {
|
|
49
|
-
|
|
50
|
-
}
|
|
43
|
+
.hljs-title,
|
|
44
|
+
.hljs-doctag,
|
|
45
|
+
.hljs-type,
|
|
46
|
+
.hljs-attr,
|
|
47
|
+
.hljs-built_in,
|
|
48
|
+
.hljs-builtin-name,
|
|
49
|
+
.hljs-params {
|
|
50
|
+
color: #606;
|
|
51
|
+
}
|
|
51
52
|
|
|
52
|
-
.hljs-attribute,
|
|
53
|
-
.hljs-subst {
|
|
54
|
-
|
|
55
|
-
}
|
|
53
|
+
.hljs-attribute,
|
|
54
|
+
.hljs-subst {
|
|
55
|
+
color: #000;
|
|
56
|
+
}
|
|
56
57
|
|
|
57
|
-
.hljs-formula {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}
|
|
58
|
+
.hljs-formula {
|
|
59
|
+
background-color: #eee;
|
|
60
|
+
font-style: italic;
|
|
61
|
+
}
|
|
61
62
|
|
|
62
|
-
.hljs-selector-id,
|
|
63
|
-
.hljs-selector-class {
|
|
64
|
-
|
|
65
|
-
}
|
|
63
|
+
.hljs-selector-id,
|
|
64
|
+
.hljs-selector-class {
|
|
65
|
+
color: #9B703F
|
|
66
|
+
}
|
|
66
67
|
|
|
67
|
-
.hljs-addition {
|
|
68
|
-
|
|
69
|
-
}
|
|
68
|
+
.hljs-addition {
|
|
69
|
+
background-color: #baeeba;
|
|
70
|
+
}
|
|
70
71
|
|
|
71
|
-
.hljs-deletion {
|
|
72
|
-
|
|
73
|
-
}
|
|
72
|
+
.hljs-deletion {
|
|
73
|
+
background-color: #ffc8bd;
|
|
74
|
+
}
|
|
74
75
|
|
|
75
|
-
.hljs-doctag,
|
|
76
|
-
.hljs-strong {
|
|
77
|
-
|
|
78
|
-
}
|
|
76
|
+
.hljs-doctag,
|
|
77
|
+
.hljs-strong {
|
|
78
|
+
font-weight: bold;
|
|
79
|
+
}
|
|
79
80
|
|
|
80
|
-
.hljs-emphasis {
|
|
81
|
-
|
|
81
|
+
.hljs-emphasis {
|
|
82
|
+
font-style: italic;
|
|
83
|
+
}
|
|
82
84
|
}
|
|
@@ -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,7 @@ 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
|
}
|
|
@@ -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'],
|