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.
Files changed (11) hide show
  1. package/README.md +28 -5
  2. package/dist/v-code-diff/util.d.ts +2 -0
  3. package/dist/v-code-diff/v-code-diff.d.ts +14 -17
  4. package/dist/v-code-diff.cjs.js +1 -1
  5. package/dist/v-code-diff.esm.js +1 -1
  6. package/dist/v-code-diff.umd.js +1 -1
  7. package/package.json +1 -1
  8. package/src/lib/v-code-diff/styles/highlight.scss +70 -68
  9. package/src/lib/v-code-diff/styles/style.scss +3 -0
  10. package/src/lib/v-code-diff/util.ts +16 -5
  11. 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
- [![NPM version](https://img.shields.io/npm/v/v-code-diff.svg?style=flat)](https://www.npmjs.com/package/v-code-diff) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
3
+ [![NPM version](https://img.shields.io/npm/v/v-code-diff.svg?style=flat)](https://www.npmjs.com/package/v-code-diff)
4
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5
+ [![Downloads](https://img.shields.io/npm/dt/v-code-diff?minimal=true)](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 | — | true |
128
- | old-string| old string | string | — | — |
129
- | new-string| new string| string | — | — |
130
- | context| number of show context lines | number | — | — |
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
package/dist/v-code-diff/util.d.ts CHANGED
@@ -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;
package/dist/v-code-diff/v-code-diff.d.ts CHANGED
@@ -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 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;
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 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};
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 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})}));
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,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.5",
4
+ "version": "0.3.9",
5
5
  "scripts": {
6
6
  "dev": "vite",
7
7
  "build": "npx rimraf dist && rollup --config rollup.config.js",
package/src/lib/v-code-diff/styles/highlight.scss CHANGED
@@ -1,82 +1,84 @@
1
- .hljs {
2
- display: inline-block;
3
- padding: 0;
4
- background: transparent;
5
- vertical-align: middle;
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
- color: #800;
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
- color: #008;
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
- color: #660;
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
- color: #080;
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
- color: #066;
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
- color: #606;
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
- color: #000;
55
- }
53
+ .hljs-attribute,
54
+ .hljs-subst {
55
+ color: #000;
56
+ }
56
57
 
57
- .hljs-formula {
58
- background-color: #eee;
59
- font-style: italic;
60
- }
58
+ .hljs-formula {
59
+ background-color: #eee;
60
+ font-style: italic;
61
+ }
61
62
 
62
- .hljs-selector-id,
63
- .hljs-selector-class {
64
- color: #9B703F
65
- }
63
+ .hljs-selector-id,
64
+ .hljs-selector-class {
65
+ color: #9B703F
66
+ }
66
67
 
67
- .hljs-addition {
68
- background-color: #baeeba;
69
- }
68
+ .hljs-addition {
69
+ background-color: #baeeba;
70
+ }
70
71
 
71
- .hljs-deletion {
72
- background-color: #ffc8bd;
73
- }
72
+ .hljs-deletion {
73
+ background-color: #ffc8bd;
74
+ }
74
75
 
75
- .hljs-doctag,
76
- .hljs-strong {
77
- font-weight: bold;
78
- }
76
+ .hljs-doctag,
77
+ .hljs-strong {
78
+ font-weight: bold;
79
+ }
79
80
 
80
- .hljs-emphasis {
81
- font-style: italic;
81
+ .hljs-emphasis {
82
+ font-style: italic;
83
+ }
82
84
  }
package/src/lib/v-code-diff/styles/style.scss CHANGED
@@ -1,6 +1,9 @@
1
1
  .d2h-wrapper {
2
2
  position: relative;
3
3
  line-height: normal;
4
+ .d2h-file-header {
5
+ display: none;
6
+ }
4
7
  .d2h-files-diff {
5
8
  display: flex;
6
9
  }
package/src/lib/v-code-diff/util.ts 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
- if (props.isShowNoChange) {
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: props.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: Element): Promise<boolean> {
64
+ async function highlightElement (el: HTMLElement, language: string): Promise<boolean> {
59
65
  return new Promise(resolve => {
60
66
  setTimeout(() => {
61
- hljs.highlightElement(<HTMLElement>el)
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
  }
package/src/lib/v-code-diff/v-code-diff.ts CHANGED
@@ -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'],