v-code-diff - npm Package Compare versions

Comparing version 0.2.1 to 0.3.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),a=l(r);async function s(e,n){n.emit("before-render");const t=await async function(){return new Promise((e=>{setTimeout((()=>{const n=document.querySelectorAll(".d2h-wrapper .d2h-code-line-ctn");e(Array.from(n))}),0)}))}(),r=Array.from(t).map((e=>async function(e){return new Promise((n=>{setTimeout((()=>{a.default.highlightElement(e),n(!0)}),0)}))}(e)));await Promise.all(r),n.emit("after-render")}const d=(n,t={},r)=>{if(e.isVue2)return e.h(n,t,r);const{props:l,domProps:o,on:i,...a}=t;const s={...a,...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,s,r)};var h=[],c=[];function u(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=h.indexOf(o);-1===i&&(i=h.push(o)-1,c[i]={}),t=c[i]&&c[i][r]?c[i][r]:c[i][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),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}}u(".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}",{});u(".d2h-wrapper {\n  position: relative;\n  line-height: normal;\n}\n.d2h-wrapper .d2h-files-diff {\n  position: relative;\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}",{});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}},emits:["before-render","after-render"],setup(t,r){const l=e.computed((()=>(e=>{let t=e.oldString,r=e.newString;e.isShowNoChange&&(t="File Without Change\tOldString: ======================== \n"+t,r="File Without Change\tNewString: ======================== \n"+r);const l=n.createPatch(e.fileName,t,r,"","",{context:e.context});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(l,{outputFormat:e.outputFormat,drawFileList:e.drawFileList,matching:"lines",renderNothingWhenEmpty:e.renderNothingWhenEmpty}))})(t)));return e.onMounted((()=>{t.highlight&&s(0,r)})),e.onUpdated((()=>{t.highlight&&s(0,r)})),{html:l}},render(){return d("div",{domProps:{innerHTML:this.html}})}});p.install=e=>{e.component(p.name,p)};const f=[p],m=e=>{f.forEach((n=>{e.component(n.name,n)}))};var g={install:m};exports.CodeDiff=p,exports.default=g,exports.install=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue-demi"),n=require("diff"),t=require("diff2html"),r=require("highlight.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}require("diff2html/bundles/css/diff2html.min.css");var o=l(t),a=i(r);async function s(e,n,t){t.emit("before-render");const r=await async function(e){return new Promise((n=>{setTimeout((()=>{const t=e.querySelectorAll(".d2h-wrapper .d2h-code-line-ctn");n(Array.from(t))}),0)}))}(e),i=Array.from(r).map((e=>async function(e){return new Promise((n=>{setTimeout((()=>{a.default.highlightElement(e),n(!0)}),0)}))}(e)));await Promise.all(i),t.emit("after-render")}var h=[],d=[];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 o=h.indexOf(l);-1===o&&(o=h.push(l)-1,d[o]={}),t=d[o]&&d[o][r]?d[o][r]:d[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}}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-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}",{});var u=e.defineComponent({name:"CodeDiff",directives:{highlight:async function(e,n){const t=n.value.props,r=n.value.ctx;t.highlight&&await s(e,0,r)}},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}},emits:["before-render","after-render"],setup:(t,r)=>({html:e.computed((()=>(e=>{let t=e.oldString,r=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})})(t))),props:t,ctx:r}),render(){const n={props:this.props,ctx:this.ctx};if(e.isVue3){const t=e.resolveDirective("highlight");return e.withDirectives(e.h("div",{innerHTML:this.html}),[[t,n]])}return e.h("div",{domProps:{innerHTML:this.html},directives:[{name:"highlight",value:n}]})}});u.install=e=>{e.component(u.name,u)};const p=[u],f=e=>{p.forEach((n=>{e.component(n.name,n)}))};var m={install:f};exports.CodeDiff=u,exports.default=m,exports.install=f;

dist/v-code-diff.esm.js

@@ -1,1 +0,1 @@
-import{isVue2 as e,h as n,defineComponent as t,computed as r,onMounted as l,onUpdated as o}from"vue-demi";import{createPatch as i}from"diff";import*as s from"diff2html";import a from"highlight.js";import"diff2html/bundles/css/diff2html.min.css";async function h(e,n){n.emit("before-render");const t=await async function(){return new Promise((e=>{setTimeout((()=>{const n=document.querySelectorAll(".d2h-wrapper .d2h-code-line-ctn");e(Array.from(n))}),0)}))}(),r=Array.from(t).map((e=>async function(e){return new Promise((n=>{setTimeout((()=>{a.highlightElement(e),n(!0)}),0)}))}(e)));await Promise.all(r),n.emit("after-render")}const d=(t,r={},l)=>{if(e)return n(t,r,l);const{props:o,domProps:i,on:s,...a}=r;const h={...a,...o,...i,...(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,h,l)};var c=[],p=[];function m(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=c.indexOf(o);-1===i&&(i=c.push(o)-1,p[i]={}),t=p[i]&&p[i][r]?p[i][r]:p[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}}m(".hljs {\n  display: inline-block;\n  padding: 0;\n  background: transparent;\n  vertical-align: middle;\n}\n\n.hljs-comment,\n.hljs-quote {\n  color: #800;\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-section,\n.hljs-title,\n.hljs-name {\n  color: #008;\n}\n\n.hljs-variable,\n.hljs-template-variable {\n  color: #660;\n}\n\n.hljs-string,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-regexp {\n  color: #080;\n}\n\n.hljs-literal,\n.hljs-symbol,\n.hljs-bullet,\n.hljs-meta,\n.hljs-number,\n.hljs-link {\n  color: #066;\n}\n\n.hljs-title,\n.hljs-doctag,\n.hljs-type,\n.hljs-attr,\n.hljs-built_in,\n.hljs-builtin-name,\n.hljs-params {\n  color: #606;\n}\n\n.hljs-attribute,\n.hljs-subst {\n  color: #000;\n}\n\n.hljs-formula {\n  background-color: #eee;\n  font-style: italic;\n}\n\n.hljs-selector-id,\n.hljs-selector-class {\n  color: #9B703F;\n}\n\n.hljs-addition {\n  background-color: #baeeba;\n}\n\n.hljs-deletion {\n  background-color: #ffc8bd;\n}\n\n.hljs-doctag,\n.hljs-strong {\n  font-weight: bold;\n}\n\n.hljs-emphasis {\n  font-style: italic;\n}",{});m(".d2h-wrapper {\n  position: relative;\n  line-height: normal;\n}\n.d2h-wrapper .d2h-files-diff {\n  position: relative;\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}",{});var u=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}},emits:["before-render","after-render"],setup(e,n){const t=r((()=>(e=>{let n=e.oldString,t=e.newString;e.isShowNoChange&&(n="File Without Change\tOldString: ======================== \n"+n,t="File Without Change\tNewString: ======================== \n"+t);const r=i(e.fileName,n,t,"","",{context:e.context});return function(e){return e.replace(/<span class="d2h-code-line-ctn">(.+?)<\/span>/g,'<span class="d2h-code-line-ctn"><code>$1</code></span>')}(s.html(r,{outputFormat:e.outputFormat,drawFileList:e.drawFileList,matching:"lines",renderNothingWhenEmpty:e.renderNothingWhenEmpty}))})(e)));return l((()=>{e.highlight&&h(0,n)})),o((()=>{e.highlight&&h(0,n)})),{html:t}},render(){return d("div",{domProps:{innerHTML:this.html}})}});u.install=e=>{e.component(u.name,u)};const f=[u],g=e=>{f.forEach((n=>{e.component(n.name,n)}))};var j={install:g};export default j;export{u as CodeDiff,g as install};
+import{defineComponent as e,computed as n,isVue3 as t,resolveDirective as r,withDirectives as i,h as l}from"vue-demi";import{createPatch as o}from"diff";import*as s from"diff2html";import a from"highlight.js";import"diff2html/bundles/css/diff2html.min.css";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.highlightElement(e),n(!0)}),0)}))}(e)));await Promise.all(i),t.emit("after-render")}var d=[],p=[];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 o=d.indexOf(l);-1===o&&(o=d.push(l)-1,p[o]={}),t=p[o]&&p[o][r]?p[o][r]:p[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),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}}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-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}",{});var m=e({name:"CodeDiff",directives:{highlight:async function(e,n){const t=n.value.props,r=n.value.ctx;t.highlight&&await h(e,0,r)}},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}},emits:["before-render","after-render"],setup:(e,t)=>({html:n((()=>(e=>{let n=e.oldString,t=e.newString;e.isShowNoChange&&(n="File Without Change\tOldString: ======================== \n"+n,t="File Without Change\tNewString: ======================== \n"+t);const r=o(e.fileName,n,t,"","",{context:e.context});return s.html(r,{outputFormat:e.outputFormat,drawFileList:e.drawFileList,matching:"lines",diffStyle:e.diffStyle,renderNothingWhenEmpty:e.renderNothingWhenEmpty})})(e))),props:e,ctx:t}),render(){const e={props:this.props,ctx:this.ctx};if(t){const n=r("highlight");return i(l("div",{innerHTML:this.html}),[[n,e]])}return l("div",{domProps:{innerHTML:this.html},directives:[{name:"highlight",value:e}]})}});m.install=e=>{e.component(m.name,m)};const u=[m],f=e=>{u.forEach((n=>{e.component(n.name,n)}))};var g={install:f};export default g;export{m 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,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 s=o(r),a=l(i);async function d(e,n){n.emit("before-render");const t=await async function(){return new Promise((e=>{setTimeout((()=>{const n=document.querySelectorAll(".d2h-wrapper .d2h-code-line-ctn");e(Array.from(n))}),0)}))}(),r=Array.from(t).map((e=>async function(e){return new Promise((n=>{setTimeout((()=>{a.default.highlightElement(e),n(!0)}),0)}))}(e)));await Promise.all(r),n.emit("after-render")}const h=(e,t={},r)=>{if(n.isVue2)return n.h(e,t,r);const{props:i,domProps:l,on:o,...s}=t;const a={...s,...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,a,r)};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]=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),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-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}",{});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}},emits:["before-render","after-render"],setup(e,r){const i=n.computed((()=>(e=>{let n=e.oldString,r=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 function(e){return e.replace(/<span class="d2h-code-line-ctn">(.+?)<\/span>/g,'<span class="d2h-code-line-ctn"><code>$1</code></span>')}(s.html(i,{outputFormat:e.outputFormat,drawFileList:e.drawFileList,matching:"lines",renderNothingWhenEmpty:e.renderNothingWhenEmpty}))})(e)));return n.onMounted((()=>{e.highlight&&d(0,r)})),n.onUpdated((()=>{e.highlight&&d(0,r)})),{html:i}},render(){return 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 j={install:g};e.CodeDiff=p,e.default=j,e.install=g,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,i,r){"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 i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var s=o(i),a=l(r);async function d(e,n,t){t.emit("before-render");const i=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),r=Array.from(i).map((e=>async function(e){return new Promise((n=>{setTimeout((()=>{a.default.highlightElement(e),n(!0)}),0)}))}(e)));await Promise.all(r),t.emit("after-render")}var h=[],c=[];function f(e,n){if(e&&"undefined"!=typeof document){var t,i=!0===n.prepend?"prepend":"append",r=!0===n.singleTag,l="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(r){var o=h.indexOf(l);-1===o&&(o=h.push(l)-1,c[o]={}),t=c[o]&&c[o][i]?c[o][i]:c[o][i]=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),r=0;r<t.length;r++)e.setAttribute(t[r],n.attributes[t[r]]);var o="prepend"===i?"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-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}",{});var u=n.defineComponent({name:"CodeDiff",directives:{highlight:async function(e,n){const t=n.value.props,i=n.value.ctx;t.highlight&&await d(e,0,i)}},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}},emits:["before-render","after-render"],setup:(e,i)=>({html:n.computed((()=>(e=>{let n=e.oldString,i=e.newString;e.isShowNoChange&&(n="File Without Change\tOldString: ======================== \n"+n,i="File Without Change\tNewString: ======================== \n"+i);const r=t.createPatch(e.fileName,n,i,"","",{context:e.context});return s.html(r,{outputFormat:e.outputFormat,drawFileList:e.drawFileList,matching:"lines",diffStyle:e.diffStyle,renderNothingWhenEmpty:e.renderNothingWhenEmpty})})(e))),props:e,ctx:i}),render(){const e={props:this.props,ctx:this.ctx};if(n.isVue3){const t=n.resolveDirective("highlight");return n.withDirectives(n.h("div",{innerHTML:this.html}),[[t,e]])}return n.h("div",{domProps:{innerHTML:this.html},directives:[{name:"highlight",value:e}]})}});u.install=e=>{e.component(u.name,u)};const p=[u],m=e=>{p.forEach((n=>{e.component(n.name,n)}))};var g={install:m};e.CodeDiff=u,e.default=g,e.install=m,Object.defineProperty(e,"__esModule",{value:!0})}));

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

@@ -12,5 +12,6 @@ import { SetupContext } from 'vue-demi';
     isShowNoChange: boolean;
+    diffStyle: 'word' | 'char';
 } & {}>;
-export declare const createHtml: (props: Props) => any;
-export declare function highlightElements(props: any, ctx: SetupContext<any>): Promise<void>;
+export declare const createHtml: (props: Props) => string;
+export declare function highlightElements(element: Element, props: any, ctx: SetupContext<any>): Promise<void>;
 export {};

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

@@ -32,2 +32,6 @@ import { PropType } from 'vue-demi';
     };
+    diffStyle: {
+        type: PropType<"word" | "char">;
+        default: string;
+    };
     fileName: {
@@ -42,3 +46,16 @@ type: StringConstructor;
 }, {
-    html: import("vue-demi").ComputedRef<any>;
+    html: import("vue-demi").ComputedRef<string>;
+    props: Readonly<{
+        highlight: boolean;
+        oldString: string;
+        newString: string;
+        context: number;
+        outputFormat: "line-by-line" | "side-by-side";
+        drawFileList: boolean;
+        renderNothingWhenEmpty: boolean;
+        diffStyle: "word" | "char";
+        fileName: string;
+        isShowNoChange: boolean;
+    }>;
+    ctx: import("vue-demi").SetupContext<("before-render" | "after-render")[]>;
 }, 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<{
@@ -52,2 +69,3 @@ highlight: boolean;
     renderNothingWhenEmpty: boolean;
+    diffStyle: "word" | "char";
     fileName: string;
@@ -63,2 +81,3 @@ isShowNoChange: boolean;
     renderNothingWhenEmpty: boolean;
+    diffStyle: "word" | "char";
     fileName: string;
@@ -65,0 +84,0 @@ isShowNoChange: boolean;

package.json

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

README.md

@@ -134,2 +134,3 @@ # VCodeDiff
 | renderNothingWhenEmpty | render nothing when empty | boolean | - | false |
+| diffStyle | difference style | string | word, char | word |
 | fileName | file name | string | - |  |
@@ -150,2 +151,7 @@ | isShowNoChange | show raw when no change | boolean | - | false |
 
+### 0.3.0
+
+1. Performance optimization, now rendering has better performance
+2. Add Prop `diffStyle` to control whether to display word-level differences or char-level differences
+
 ### 0.2.1
@@ -152,0 +158,0 @@

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

@@ -16,8 +16,6 @@ import { createPatch } from 'diff'
   isShowNoChange: boolean
+  diffStyle: 'word' | 'char'
 } & {}>
 
 export const createHtml = (props: Props) => {
-  function wrapCode (html) {
-    return html.replace(/<span class="d2h-code-line-ctn">(.+?)<\/span>/g, '<span class="d2h-code-line-ctn"><code>$1</code></span>')
-  }
   let oldString = props.oldString
@@ -30,15 +28,15 @@ let newString = props.newString
   const dd = createPatch(props.fileName, oldString, newString, '', '', { context: props.context })
-  const html = d2h.html(dd, {
+  return d2h.html(dd, {
     outputFormat: props.outputFormat,
     drawFileList: props.drawFileList,
     matching: 'lines',
+    diffStyle: props.diffStyle,
     renderNothingWhenEmpty: props.renderNothingWhenEmpty
   })
-  return wrapCode(html)
 }
 
-async function listElements (): Promise<Element[]> {
+async function listElements (element: Element): Promise<Element[]> {
   return new Promise(resolve => {
     setTimeout(() => {
-      const elements = document.querySelectorAll('.d2h-wrapper .d2h-code-line-ctn')
+      const elements = element.querySelectorAll('.d2h-wrapper .d2h-code-line-ctn')
       resolve(Array.from(elements))
@@ -58,5 +56,5 @@ }, 0)
 
-export async function highlightElements (props, ctx: SetupContext<any>) {
+export async function highlightElements (element: Element, props, ctx: SetupContext<any>) {
   ctx.emit('before-render')
-  const elements = await listElements()
+  const elements = await listElements(element)
   const promises = Array.from(elements).map(el => highlightElement(el))
@@ -63,0 +61,0 @@ await Promise.all(promises)

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

@@ -1,4 +0,12 @@
-import { computed, defineComponent, onMounted, onUpdated, PropType } from 'vue-demi'
+import {
+  computed,
+  defineComponent,
+  DirectiveArguments,
+  isVue3,
+  PropType,
+  resolveDirective,
+  withDirectives,
+  h
+} from 'vue-demi'
 import { createHtml, highlightElements } from '@/lib/v-code-diff/util'
-import h from '@/lib/v-code-diff/h-demi'
 import './styles'
@@ -8,2 +16,11 @@
   name: 'CodeDiff',
+  directives: {
+    highlight: async function (el, binding) {
+      const props = binding.value.props
+      const ctx = binding.value.ctx
+      if (props.highlight) {
+        await highlightElements(el, props, ctx)
+      }
+    }
+  },
   props: {
@@ -38,6 +55,6 @@ highlight: {
     },
-    // diffStyle: {
-    //   type: String,
-    //   default: 'word'
-    // },
+    diffStyle: {
+      type: String as PropType<'word' | 'char'>,
+      default: 'word'
+    },
     fileName: {
@@ -54,25 +71,32 @@ type: String,
   setup (props, ctx) {
-    const html = computed(() => createHtml(props)
-    )
-    onMounted(() => {
-      if (props.highlight) {
-        highlightElements(props, ctx)
-      }
-    })
-    onUpdated(() => {
-      if (props.highlight) {
-        highlightElements(props, ctx)
-      }
-    })
+    const html = computed(() => createHtml(props))
     return {
-      html
+      html,
+      props,
+      ctx
     }
   },
   render () {
-    return h('div', {
-      domProps: {
+    const directiveValue = { props: this.props, ctx: this.ctx }
+    if (isVue3) {
+      const highlight = resolveDirective('highlight')
+      return withDirectives(h('div', {
         innerHTML: this.html
-      }
-    })
+      }), <DirectiveArguments>[
+        [highlight, directiveValue]
+      ])
+    } else {
+      return h('div', {
+        domProps: {
+          innerHTML: this.html
+        },
+        directives: [
+          {
+            name: 'highlight',
+            value: directiveValue
+          }
+        ]
+      })
+    }
   }
 })

No alert changes

Improved metrics

Lines of code

345

0.58%

Number of lines in readme file

196

3.16%

Worsened metrics

Total package byte prevSize

32756

-0.78%

Number of package files

18

-10%

No dependency changes