v-code-diff - npm Package Compare versions

Comparing version 0.0.4 to 0.1.0

dist/v-code-diff.cjs.js

@@ -1,1 +0,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 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)}require("diff2html/bundles/css/diff2html.min.css");var i=o(t),s=l(r);const a=(n,t={},r)=>{if(e.isVue2)return e.h(n,t,r);const{props:l,domProps:o,on:i,...s}=t;const a={...s,...l,...o,...(e=>e?Object.entries(e).reduce(((e,[n,t])=>({...e,[n=`on${n=n.charAt(0).toUpperCase()+n.slice(1)}`]:t})),{}):null)(i)};return e.h(n,a,r)};var d=[],h=[];!function(e,n){if(e&&"undefined"!=typeof document){var t,r=!0===n.prepend?"prepend":"append",l=!0===n.singleTag,o="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(l){var i=d.indexOf(o);-1===i&&(i=d.push(o)-1,h[i]={}),t=h[i]&&h[i][r]?h[i][r]:h[i][r]=s()}else t=s();65279===e.charCodeAt(0)&&(e=e.substring(1)),t.styleSheet?t.styleSheet.cssText+=e:t.appendChild(document.createTextNode(e))}function s(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var t=Object.keys(n.attributes),l=0;l<t.length;l++)e.setAttribute(t[l],n.attributes[t[l]]);var i="prepend"===r?"afterbegin":"beforeend";return o.insertAdjacentElement(i,e),e}}(".hljs {\n  display: inline-block;\n  padding: 0;\n  background: transparent;\n  vertical-align: middle;\n}\n\n/*\n\nGoogle Code style (c) Aahan Krish <[e-mail]>\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}\n\n.d2h-wrapper {\n  position: relative;\n  line-height: normal;\n}\n.d2h-wrapper .d2h-files-diff {\n  position: relative;\n}\n.d2h-wrapper .d2h-files-diff > .d2h-file-side-diff ~ .d2h-file-side-diff {\n  position: absolute;\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-code-linenumber,\n.d2h-wrapper .d2h-code-side-linenumber {\n  height: 19px;\n}\n\n.d2h-wrapper .d2h-file-header {\n  display: none;\n}",{});var c=e.defineComponent({name:"CodeDiff",props:{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},fileName:{type:String,default:""},isShowNoChange:{type:Boolean,default:!1}},setup(t){const r=e.computed((()=>((e,t,r,l,o,s,a,d)=>{d&&(e="File Without Change\tOldString: ======================== \n"+e,t="File Without Change\tNewString: ======================== \n"+t);const h=n.createPatch(a,e,t,"","",{context:r});return function(e){return e.replace(/<span class="d2h-code-line-ctn">(.+?)<\/span>/g,'<span class="d2h-code-line-ctn"><code>$1</code></span>')}(i.html(h,{outputFormat:l,drawFileList:o,matching:"lines",renderNothingWhenEmpty:s}))})(t.oldString,t.newString,t.context,t.outputFormat,t.drawFileList,t.renderNothingWhenEmpty,t.fileName,t.isShowNoChange)));return e.onMounted((()=>{document.querySelectorAll(".d2h-wrapper code").forEach((e=>{s.default.highlightElement(e)}))})),{html:r}},render(){return a("div",{domProps:{innerHTML:this.html}})}});c.install=e=>{e.component(c.name,c)};const p=[c],u=e=>{p.forEach((n=>{e.component(n.name,n)}))};var f={install:u};exports.CodeDiff=c,exports.default=f,exports.install=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue-demi"),n=require("diff"),t=require("diff2html"),r=require("highlight.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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=i(t),s=l(r);const a=(n,t={},r)=>{if(e.isVue2)return e.h(n,t,r);const{props:l,domProps:i,on:o,...s}=t;const a={...s,...l,...i,...(e=>e?Object.entries(e).reduce(((e,[n,t])=>({...e,[n=`on${n=n.charAt(0).toUpperCase()+n.slice(1)}`]:t})),{}):null)(o)};return e.h(n,a,r)};var d=[],h=[];function c(e,n){if(e&&"undefined"!=typeof document){var t,r=!0===n.prepend?"prepend":"append",l=!0===n.singleTag,i="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(l){var o=d.indexOf(i);-1===o&&(o=d.push(i)-1,h[o]={}),t=h[o]&&h[o][r]?h[o][r]:h[o][r]=s()}else t=s();65279===e.charCodeAt(0)&&(e=e.substring(1)),t.styleSheet?t.styleSheet.cssText+=e:t.appendChild(document.createTextNode(e))}function s(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var t=Object.keys(n.attributes),l=0;l<t.length;l++)e.setAttribute(t[l],n.attributes[t[l]]);var o="prepend"===r?"afterbegin":"beforeend";return i.insertAdjacentElement(o,e),e}}c(".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}",{});c(".d2h-wrapper {\n  position: relative;\n  line-height: normal;\n}\n.d2h-wrapper .d2h-files-diff {\n  position: relative;\n}\n.d2h-wrapper .d2h-files-diff > .d2h-file-side-diff ~ .d2h-file-side-diff {\n  position: absolute;\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-code-linenumber,\n.d2h-wrapper .d2h-code-side-linenumber {\n  height: 19px;\n}\n.d2h-wrapper pre {\n  margin: 0;\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},fileName:{type:String,default:""},isShowNoChange:{type:Boolean,default:!1}},setup(t){const r=e.computed((()=>((e,t,r,l,i,s,a,d)=>{d&&(e="File Without Change\tOldString: ======================== \n"+e,t="File Without Change\tNewString: ======================== \n"+t);const h=n.createPatch(a,e,t,"","",{context:r});return function(e){return e.replace(/<span class="d2h-code-line-ctn">(.+?)<\/span>/g,'<span class="d2h-code-line-ctn"><pre><code>$1</code></pre></span>')}(o.html(h,{outputFormat:l,drawFileList:i,matching:"lines",renderNothingWhenEmpty:s}))})(t.oldString,t.newString,t.context,t.outputFormat,t.drawFileList,t.renderNothingWhenEmpty,t.fileName,t.isShowNoChange)));return e.onMounted((()=>{if(t.highlight){document.querySelectorAll(".d2h-wrapper .d2h-code-line-ctn").forEach((e=>{s.default.highlightElement(e)}))}})),{html:r}},render(){return a("div",{domProps:{innerHTML:this.html}})}});p.install=e=>{e.component(p.name,p)};const u=[p],f=e=>{u.forEach((n=>{e.component(n.name,n)}))};var m={install:f};exports.CodeDiff=p,exports.default=m,exports.install=f;

dist/v-code-diff.esm.js

@@ -1,1 +0,1 @@
-import{isVue2 as n,h as e,defineComponent as t,computed as l,onMounted as r}from"vue-demi";import{createPatch as o}from"diff";import*as i from"diff2html";import s from"highlight.js";import"diff2html/bundles/css/diff2html.min.css";const a=(t,l={},r)=>{if(n)return e(t,l,r);const{props:o,domProps:i,on:s,...a}=l;const d={...a,...o,...i,...(n=>n?Object.entries(n).reduce(((n,[e,t])=>({...n,[e=`on${e=e.charAt(0).toUpperCase()+e.slice(1)}`]:t})),{}):null)(s)};return e(t,d,r)};var d=[],h=[];!function(n,e){if(n&&"undefined"!=typeof document){var t,l=!0===e.prepend?"prepend":"append",r=!0===e.singleTag,o="string"==typeof e.container?document.querySelector(e.container):document.getElementsByTagName("head")[0];if(r){var i=d.indexOf(o);-1===i&&(i=d.push(o)-1,h[i]={}),t=h[i]&&h[i][l]?h[i][l]:h[i][l]=s()}else t=s();65279===n.charCodeAt(0)&&(n=n.substring(1)),t.styleSheet?t.styleSheet.cssText+=n:t.appendChild(document.createTextNode(n))}function s(){var n=document.createElement("style");if(n.setAttribute("type","text/css"),e.attributes)for(var t=Object.keys(e.attributes),r=0;r<t.length;r++)n.setAttribute(t[r],e.attributes[t[r]]);var i="prepend"===l?"afterbegin":"beforeend";return o.insertAdjacentElement(i,n),n}}(".hljs {\n  display: inline-block;\n  padding: 0;\n  background: transparent;\n  vertical-align: middle;\n}\n\n/*\n\nGoogle Code style (c) Aahan Krish <[e-mail]>\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}\n\n.d2h-wrapper {\n  position: relative;\n  line-height: normal;\n}\n.d2h-wrapper .d2h-files-diff {\n  position: relative;\n}\n.d2h-wrapper .d2h-files-diff > .d2h-file-side-diff ~ .d2h-file-side-diff {\n  position: absolute;\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-code-linenumber,\n.d2h-wrapper .d2h-code-side-linenumber {\n  height: 19px;\n}\n\n.d2h-wrapper .d2h-file-header {\n  display: none;\n}",{});var p=t({name:"CodeDiff",props:{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},fileName:{type:String,default:""},isShowNoChange:{type:Boolean,default:!1}},setup(n){const e=l((()=>((n,e,t,l,r,s,a,d)=>{d&&(n="File Without Change\tOldString: ======================== \n"+n,e="File Without Change\tNewString: ======================== \n"+e);const h=o(a,n,e,"","",{context:t});return function(n){return n.replace(/<span class="d2h-code-line-ctn">(.+?)<\/span>/g,'<span class="d2h-code-line-ctn"><code>$1</code></span>')}(i.html(h,{outputFormat:l,drawFileList:r,matching:"lines",renderNothingWhenEmpty:s}))})(n.oldString,n.newString,n.context,n.outputFormat,n.drawFileList,n.renderNothingWhenEmpty,n.fileName,n.isShowNoChange)));return r((()=>{document.querySelectorAll(".d2h-wrapper code").forEach((n=>{s.highlightElement(n)}))})),{html:e}},render(){return a("div",{domProps:{innerHTML:this.html}})}});p.install=n=>{n.component(p.name,p)};const c=[p],m=n=>{c.forEach((e=>{n.component(e.name,e)}))};var u={install:m};export default u;export{p as CodeDiff,m as install};
+import{isVue2 as e,h as n,defineComponent as t,computed as r,onMounted as l}from"vue-demi";import{createPatch as i}from"diff";import*as o from"diff2html";import s from"highlight.js";import"diff2html/bundles/css/diff2html.min.css";const a=(t,r={},l)=>{if(e)return n(t,r,l);const{props:i,domProps:o,on:s,...a}=r;const d={...a,...i,...o,...(e=>e?Object.entries(e).reduce(((e,[n,t])=>({...e,[n=`on${n=n.charAt(0).toUpperCase()+n.slice(1)}`]:t})),{}):null)(s)};return n(t,d,l)};var d=[],h=[];function p(e,n){if(e&&"undefined"!=typeof document){var t,r=!0===n.prepend?"prepend":"append",l=!0===n.singleTag,i="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(l){var o=d.indexOf(i);-1===o&&(o=d.push(i)-1,h[o]={}),t=h[o]&&h[o][r]?h[o][r]:h[o][r]=s()}else t=s();65279===e.charCodeAt(0)&&(e=e.substring(1)),t.styleSheet?t.styleSheet.cssText+=e:t.appendChild(document.createTextNode(e))}function s(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var t=Object.keys(n.attributes),l=0;l<t.length;l++)e.setAttribute(t[l],n.attributes[t[l]]);var o="prepend"===r?"afterbegin":"beforeend";return i.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  position: relative;\n}\n.d2h-wrapper .d2h-files-diff > .d2h-file-side-diff ~ .d2h-file-side-diff {\n  position: absolute;\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-code-linenumber,\n.d2h-wrapper .d2h-code-side-linenumber {\n  height: 19px;\n}\n.d2h-wrapper pre {\n  margin: 0;\n}",{});var c=t({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},fileName:{type:String,default:""},isShowNoChange:{type:Boolean,default:!1}},setup(e){const n=r((()=>((e,n,t,r,l,s,a,d)=>{d&&(e="File Without Change\tOldString: ======================== \n"+e,n="File Without Change\tNewString: ======================== \n"+n);const h=i(a,e,n,"","",{context:t});return function(e){return e.replace(/<span class="d2h-code-line-ctn">(.+?)<\/span>/g,'<span class="d2h-code-line-ctn"><pre><code>$1</code></pre></span>')}(o.html(h,{outputFormat:r,drawFileList:l,matching:"lines",renderNothingWhenEmpty:s}))})(e.oldString,e.newString,e.context,e.outputFormat,e.drawFileList,e.renderNothingWhenEmpty,e.fileName,e.isShowNoChange)));return l((()=>{if(e.highlight){document.querySelectorAll(".d2h-wrapper .d2h-code-line-ctn").forEach((e=>{s.highlightElement(e)}))}})),{html:n}},render(){return a("div",{domProps:{innerHTML:this.html}})}});c.install=e=>{e.component(c.name,c)};const u=[c],f=e=>{u.forEach((n=>{e.component(n.name,n)}))};var m={install:f};export default m;export{c as CodeDiff,f as install};

dist/v-code-diff.umd.js

@@ -1,1 +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,l){"use strict";function i(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),s=i(l);const a=(e,t={},r)=>{if(n.isVue2)return n.h(e,t,r);const{props:l,domProps:i,on:o,...d}=t;const s={...d,...l,...i,...(e=>e?Object.entries(e).reduce(((e,[n,t])=>({...e,[n=`on${n=n.charAt(0).toUpperCase()+n.slice(1)}`]:t})),{}):null)(o)};return n.h(e,s,r)};var h=[],c=[];!function(e,n){if(e&&"undefined"!=typeof document){var t,r=!0===n.prepend?"prepend":"append",l=!0===n.singleTag,i="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(l){var o=h.indexOf(i);-1===o&&(o=h.push(i)-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),l=0;l<t.length;l++)e.setAttribute(t[l],n.attributes[t[l]]);var o="prepend"===r?"afterbegin":"beforeend";return i.insertAdjacentElement(o,e),e}}(".hljs {\n  display: inline-block;\n  padding: 0;\n  background: transparent;\n  vertical-align: middle;\n}\n\n/*\n\nGoogle Code style (c) Aahan Krish <[e-mail]>\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}\n\n.d2h-wrapper {\n  position: relative;\n  line-height: normal;\n}\n.d2h-wrapper .d2h-files-diff {\n  position: relative;\n}\n.d2h-wrapper .d2h-files-diff > .d2h-file-side-diff ~ .d2h-file-side-diff {\n  position: absolute;\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-code-linenumber,\n.d2h-wrapper .d2h-code-side-linenumber {\n  height: 19px;\n}\n\n.d2h-wrapper .d2h-file-header {\n  display: none;\n}",{});var f=n.defineComponent({name:"CodeDiff",props:{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},fileName:{type:String,default:""},isShowNoChange:{type:Boolean,default:!1}},setup(e){const r=n.computed((()=>((e,n,r,l,i,o,s,a)=>{a&&(e="File Without Change\tOldString: ======================== \n"+e,n="File Without Change\tNewString: ======================== \n"+n);const h=t.createPatch(s,e,n,"","",{context:r});return function(e){return e.replace(/<span class="d2h-code-line-ctn">(.+?)<\/span>/g,'<span class="d2h-code-line-ctn"><code>$1</code></span>')}(d.html(h,{outputFormat:l,drawFileList:i,matching:"lines",renderNothingWhenEmpty:o}))})(e.oldString,e.newString,e.context,e.outputFormat,e.drawFileList,e.renderNothingWhenEmpty,e.fileName,e.isShowNoChange)));return n.onMounted((()=>{document.querySelectorAll(".d2h-wrapper code").forEach((e=>{s.default.highlightElement(e)}))})),{html:r}},render(){return a("div",{domProps:{innerHTML:this.html}})}});f.install=e=>{e.component(f.name,f)};const p=[f],u=e=>{p.forEach((n=>{e.component(n.name,n)}))};var m={install:u};e.CodeDiff=f,e.default=m,e.install=u,Object.defineProperty(e,"__esModule",{value:!0})}));
+!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),s=l(i);const a=(e,t={},r)=>{if(n.isVue2)return n.h(e,t,r);const{props:i,domProps:l,on:o,...d}=t;const s={...d,...i,...l,...(e=>e?Object.entries(e).reduce(((e,[n,t])=>({...e,[n=`on${n=n.charAt(0).toUpperCase()+n.slice(1)}`]:t})),{}):null)(o)};return n.h(e,s,r)};var h=[],c=[];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=h.indexOf(l);-1===o&&(o=h.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}}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  position: relative;\n}\n.d2h-wrapper .d2h-files-diff > .d2h-file-side-diff ~ .d2h-file-side-diff {\n  position: absolute;\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-code-linenumber,\n.d2h-wrapper .d2h-code-side-linenumber {\n  height: 19px;\n}\n.d2h-wrapper pre {\n  margin: 0;\n}",{});var p=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},fileName:{type:String,default:""},isShowNoChange:{type:Boolean,default:!1}},setup(e){const r=n.computed((()=>((e,n,r,i,l,o,s,a)=>{a&&(e="File Without Change\tOldString: ======================== \n"+e,n="File Without Change\tNewString: ======================== \n"+n);const h=t.createPatch(s,e,n,"","",{context:r});return function(e){return e.replace(/<span class="d2h-code-line-ctn">(.+?)<\/span>/g,'<span class="d2h-code-line-ctn"><pre><code>$1</code></pre></span>')}(d.html(h,{outputFormat:i,drawFileList:l,matching:"lines",renderNothingWhenEmpty:o}))})(e.oldString,e.newString,e.context,e.outputFormat,e.drawFileList,e.renderNothingWhenEmpty,e.fileName,e.isShowNoChange)));return n.onMounted((()=>{if(e.highlight){document.querySelectorAll(".d2h-wrapper .d2h-code-line-ctn").forEach((e=>{s.default.highlightElement(e)}))}})),{html:r}},render(){return a("div",{domProps:{innerHTML:this.html}})}});p.install=e=>{e.component(p.name,p)};const u=[p],m=e=>{u.forEach((n=>{e.component(n.name,n)}))};var g={install:m};e.CodeDiff=p,e.default=g,e.install=m,Object.defineProperty(e,"__esModule",{value:!0})}));

dist/v-code-diff/v-code-diff.d.ts

 import './styles';
 declare const _default: import("vue-demi").DefineComponent<{
+    highlight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     oldString: {
@@ -38,2 +42,3 @@ type: StringConstructor;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, Record<string, any>, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<{
+    highlight: boolean;
     oldString: string;
@@ -48,2 +53,3 @@ newString: string;
 } & {}>, {
+    highlight: boolean;
     oldString: string;
@@ -50,0 +56,0 @@ newString: string;

package.json

 {
   "name": "v-code-diff",
   "description": "A diff plugin of vue, support vue2 and vue3",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "scripts": {
@@ -6,0 +6,0 @@ "dev": "vite",

README.md

@@ -5,4 +5,4 @@ # VCodeDiff
 
-A code diff display plugin, available for Vue2 / Vue3.
-It is the vue3 version of [vue-code-diff](https://github.com/ddchef/vue-code-diff), refer to a lot of code, thanks here.
+A code diff display plugin, available for Vue2 / Vue3. It is the vue3 version
+of [vue-code-diff](https://github.com/ddchef/vue-code-diff), refer to a lot of code, thanks here.
 
@@ -12,6 +12,12 @@ > [🇨🇳 中文文档](./README-zh.md)
 # Attention!
-This plugin will be slower than [vue-code-diff](https://github.com/ddchef/vue-code-diff) because [vue-code-diff](https://github.com/ddchef/vue-code-diff) uses plugin [highlight.js](https://github.com/highlightjs/highlight.js) version 9, and this version has security issues. My plugin uses version 10, but the test found that the performance is not as good as version 9
 
-I am looking for a solution or mitigation, which may be to use highlighting as an option, or to use asynchronous tasks to render (so that it does not block the ui), or to solve the problem in terms of performance. If you have a good idea, you are also welcome to raise an issue or pr to help me.
+This plugin will be slower than [vue-code-diff](https://github.com/ddchef/vue-code-diff)
+because [vue-code-diff](https://github.com/ddchef/vue-code-diff) uses
+plugin [highlight.js](https://github.com/highlightjs/highlight.js) version 9, and this version has security issues. My
+plugin uses version 10, but the test found that the performance is not as good as version 9
 
+I am looking for a solution or mitigation, which may be to use highlighting as an option, or to use asynchronous tasks
+to render (so that it does not block the ui), or to solve the problem in terms of performance. If you have a good idea,
+you are also welcome to raise an issue or pr to help me.
+
 # Installation
@@ -42,3 +48,3 @@
 ```ts
-import {createApp} from 'vue'
+import { createApp } from 'vue'
 import CodeDiff from 'v-code-diff'
@@ -54,2 +60,3 @@
 ```vue
+
 <template>
@@ -60,3 +67,3 @@ <code-diff
     file-name="test.txt"
-    output-format="side-by-side" />
+    output-format="side-by-side"/>
 </template>
@@ -76,6 +83,6 @@ ```
     file-name="test.txt"
-    output-format="side-by-side" />
+    output-format="side-by-side"/>
 </template>
 <script lang="ts">
-import {defineComponent} from 'vue'
+import { defineComponent } from 'vue'
 import { CodeDiff } from 'v-code-diff'
@@ -100,3 +107,3 @@
 
-Vue.use(VueKatex);
+Vue.use(CodeDiff);
 ```
@@ -107,2 +114,3 @@
 ```vue
+
 <template>
@@ -113,3 +121,3 @@ <code-diff
     file-name="test.txt"
-    output-format="side-by-side" />
+    output-format="side-by-side"/>
 </template>
@@ -132,2 +140,3 @@ <script>
 |---------- |-------- |---------- |-------------  |-------- |
+| highlight| control whether to highlight the code | boolean  |   —    |    true     |
 | old-string| old string | string  |   —    |    —     |
@@ -148,14 +157,23 @@ | new-string| new string| string  |   —    |    —     |
 # Todo
--[ ] faster render
 
+- [ ] faster render
+
 # ChangeLog
 
+### 0.1.0
+
+1. Add prop `highlight` to control whether to highlight the code.
+
 ### 0.0.4
+
 1. Fix the problem of abnormal rendering in some browsers (such as safari)
+
 ### 0.0.3
+
 1. Prop: `context` default value changed from 5 to 10
 2. fix possible line-height conflict(such as `antd.css` in [antd-vue](https://github.com/vueComponent/ant-design-vue))
+
 ### 0.0.1
-First Version.  
 
+First Version.
 
@@ -162,0 +180,0 @@ # LICENCE

src/lib/v-code-diff/util.ts

@@ -5,4 +5,4 @@ import { createPatch } from 'diff'
 export const createHtml = (oldString, newString, context, outputFormat, drawFileList, renderNothingWhenEmpty, fileName, isShowNoChange) => {
-  function highlight (html) {
-    return html.replace(/<span class="d2h-code-line-ctn">(.+?)<\/span>/g, '<span class="d2h-code-line-ctn"><code>$1</code></span>')
+  function wrapCode (html) {
+    return html.replace(/<span class="d2h-code-line-ctn">(.+?)<\/span>/g, '<span class="d2h-code-line-ctn"><pre><code>$1</code></pre></span>')
   }
@@ -20,3 +20,3 @@ if (isShowNoChange) {
   })
-  return highlight(html)
+  return wrapCode(html)
 }

src/lib/v-code-diff/v-code-diff.ts

@@ -10,2 +10,6 @@ import { computed, defineComponent, onMounted } from 'vue-demi'
   props: {
+    highlight: {
+      type: Boolean,
+      default: true
+    },
     oldString: {
@@ -51,6 +55,8 @@ type: String,
     onMounted(() => {
-      const elements = document.querySelectorAll('.d2h-wrapper code')
-      elements.forEach((el) => {
-        hljs.highlightElement(<HTMLElement>el)
-      })
+      if (props.highlight) {
+        const elements = document.querySelectorAll('.d2h-wrapper .d2h-code-line-ctn')
+        elements.forEach((el) => {
+          hljs.highlightElement(<HTMLElement>el)
+        })
+      }
     })
@@ -57,0 +63,0 @@ return {

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31173

0.72%

Lines of code

284

4.41%

Number of lines in readme file

187

10.65%

Number of low supply chain risk alerts

0

-100%

No dependency changes