v-code-diff 0.3.8 → 0.3.11

package/README.md

@@ -149,6 +149,10 @@ export default {
 
 # ChangeLog
 
+### 0.3.9
+
+1. Make the imported highlight.js style take effect only in `.d2h-wrapper` div
+
 ### 0.3.8
 
 1. Style adjustment, hide css `d2h-file-header`, same as vue-code-diff

package/dist/index.d.ts

@@ -1,8 +1,6 @@
-import { App } from 'vue-demi';
+import { Plugin } from 'vue-demi';
 import CodeDiff from './v-code-diff';
-declare const install: (app: App) => void;
+declare const install: (app: any) => void;
 export { install, CodeDiff };
-declare const _default: {
-    install: (app: App<any>) => void;
-};
+declare const _default: Plugin;
 export default _default;

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

@@ -1,2 +1,2 @@
-import CodeDiff from './v-code-diff.js';
+import CodeDiff from './v-code-diff';
 export default CodeDiff;

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

@@ -17,5 +17,8 @@ declare type Props = Readonly<{
 export declare function useDebounceFn(fn: any, delay: any): () => void;
 export declare const createHtml: (props: Props) => string;
 export declare function highlightElements(element: Element, props: any, ctx: SetupContext<any>): Promise<void>;
-export declare function syncScroll(selector: any): void;
+export declare function useSyncScroll(selector: any): {
+    addSyncScroll: () => void;
+    removeSyncScroll: () => void;
+};
 export {};

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

@@ -53,6 +53,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    syncScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     html: import("vue-demi").Ref<string>;
 }, 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<{
@@ -69,6 +73,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     trim: boolean;
     language: string;
     noDiffLineFeed: boolean;
+    syncScroll: boolean;
 } & {}>, {
     highlight: boolean;
     oldString: string;
@@ -83,5 +88,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     trim: boolean;
     language: string;
     noDiffLineFeed: boolean;
+    syncScroll: boolean;
 }>;
 export default _default;

package/dist/v-code-diff.cjs.js

@@ -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;t=e.noDiffLineFeed?t.replace(/(\r\n)/g,"\n"):t,r=e.noDiffLineFeed?r.replace(/(\r\n)/g,"\n"):r;let i=e.context;e.isShowNoChange&&t===r&&(t="File Without Change\tOldString: ======================== \n"+t,r="File Without Change\tNewString: ======================== \n"+r,i=99999);const l=n.createPatch(e.fileName,t,r,"","",{context:i});return o.html(l,{outputFormat:e.outputFormat,drawFileList:e.drawFileList,matching:"lines",diffStyle:e.diffStyle,renderNothingWhenEmpty:e.renderNothingWhenEmpty})};async function s(e,n,t){t.emit("before-render");const r=await async function(e){return new Promise((n=>{setTimeout((()=>{const t=e.querySelectorAll(".d2h-wrapper .d2h-code-line-ctn");n(Array.from(t))}),0)}))}(e),i=Array.from(r).map((e=>async function(e,n){return new Promise((t=>{setTimeout((()=>{if(n){const t=e.innerText;e.innerHTML=a.default.highlight(t,{language:n}).value}else a.default.highlightElement(e);t(!0)}),0)}))}(e,n.language)));await Promise.all(i),t.emit("after-render")}function h(e){let n=document.createElement("div");document.querySelectorAll(e).forEach((function(t){t.addEventListener("mouseenter",(function(e){n=e.target})),t.addEventListener("scroll",(function(t){t.target===n&&document.querySelectorAll(e).forEach((function(e){n!==e&&(e.scrollTop=n.scrollTop,e.scrollLeft=n.scrollLeft)}))}))}))}var c=[],u=[];function f(e,n){if(e&&"undefined"!=typeof document){var t,r=!0===n.prepend?"prepend":"append",i=!0===n.singleTag,l="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(i){var o=c.indexOf(l);-1===o&&(o=c.push(l)-1,u[o]={}),t=u[o]&&u[o][r]?u[o][r]:u[o][r]=a()}else t=a();65279===e.charCodeAt(0)&&(e=e.substring(1)),t.styleSheet?t.styleSheet.cssText+=e:t.appendChild(document.createTextNode(e))}function a(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var t=Object.keys(n.attributes),i=0;i<t.length;i++)e.setAttribute(t[i],n.attributes[t[i]]);var o="prepend"===r?"afterbegin":"beforeend";return l.insertAdjacentElement(o,e),e}}f(".hljs {\n  display: inline-block;\n  padding: 0;\n  background: transparent;\n  vertical-align: middle;\n}\n\n.hljs-comment,\n.hljs-quote {\n  color: #800;\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-section,\n.hljs-title,\n.hljs-name {\n  color: #008;\n}\n\n.hljs-variable,\n.hljs-template-variable {\n  color: #660;\n}\n\n.hljs-string,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-regexp {\n  color: #080;\n}\n\n.hljs-literal,\n.hljs-symbol,\n.hljs-bullet,\n.hljs-meta,\n.hljs-number,\n.hljs-link {\n  color: #066;\n}\n\n.hljs-title,\n.hljs-doctag,\n.hljs-type,\n.hljs-attr,\n.hljs-built_in,\n.hljs-builtin-name,\n.hljs-params {\n  color: #606;\n}\n\n.hljs-attribute,\n.hljs-subst {\n  color: #000;\n}\n\n.hljs-formula {\n  background-color: #eee;\n  font-style: italic;\n}\n\n.hljs-selector-id,\n.hljs-selector-class {\n  color: #9B703F;\n}\n\n.hljs-addition {\n  background-color: #baeeba;\n}\n\n.hljs-deletion {\n  background-color: #ffc8bd;\n}\n\n.hljs-doctag,\n.hljs-strong {\n  font-weight: bold;\n}\n\n.hljs-emphasis {\n  font-style: italic;\n}",{});f(".d2h-wrapper {\n  position: relative;\n  line-height: normal;\n}\n.d2h-wrapper .d2h-file-header {\n  display: none;\n}\n.d2h-wrapper .d2h-files-diff {\n  display: flex;\n}\n.d2h-wrapper .d2h-file-side-diff {\n  margin-bottom: -5px;\n}\n.d2h-wrapper .d2h-code-side-emptyplaceholder {\n  max-height: 19px;\n}\n.d2h-wrapper .d2h-code-side-line,\n.d2h-wrapper .d2h-code-line {\n  width: auto;\n}\n.d2h-wrapper .d2h-code-side-line .d2h-info {\n  height: 18px;\n}\n.d2h-wrapper .d2h-cntx,\n.d2h-wrapper .d2h-del,\n.d2h-wrapper .d2h-ins {\n  height: 18px;\n}\n.d2h-wrapper .d2h-code-linenumber,\n.d2h-wrapper .d2h-code-side-linenumber {\n  line-height: 20px;\n  height: 20px;\n}\n.d2h-wrapper tr {\n  height: 20px;\n}",{});var p=e.defineComponent({name:"CodeDiff",props:{highlight:{type:Boolean,default:!0},oldString:{type:String,default:""},newString:{type:String,default:""},context:{type:Number,default:10},outputFormat:{type:String,default:"line-by-line"},drawFileList:{type:Boolean,default:!1},renderNothingWhenEmpty:{type:Boolean,default:!1},diffStyle:{type:String,default:"word"},fileName:{type:String,default:""},isShowNoChange:{type:Boolean,default:!1},trim:{type:Boolean,default:!1},language:{type:String,default:""},noDiffLineFeed:{type:Boolean,default:!1}},emits:["before-render","after-render"],setup(n,t){const r=e.ref(d(n)),i=function(e,n){let t;return function(){const r=this,i=arguments;clearTimeout(t),t=setTimeout((function(){e.apply(r,i)}),n)}}((async()=>{if(r.value=d(n),n.highlight){const e=document.createElement("div");e.innerHTML=r.value,await s(e,n,t),r.value=e.innerHTML}}),200);return e.watch(n,i,{deep:!0,immediate:!0}),e.onMounted((()=>{"side-by-side"===n.outputFormat&&h(".d2h-file-side-diff")})),e.onUpdated((()=>{"side-by-side"===n.outputFormat&&h(".d2h-file-side-diff")})),{html:r}},render(){return e.isVue3?e.h("div",{innerHTML:this.html}):e.h("div",{domProps:{innerHTML:this.html}})}});p.install=e=>{e.component(p.name,p)};const m=[p],g=e=>{m.forEach((n=>{e.component(n.name,n)}))};var y={install:g};exports.CodeDiff=p,exports.default=y,exports.install=g;
+"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 a=i(t),o=l(r);const d=e=>{let t=e.trim?e.oldString.trim():e.oldString,r=e.trim?e.newString.trim():e.newString;t=e.noDiffLineFeed?t.replace(/(\r\n)/g,"\n"):t,r=e.noDiffLineFeed?r.replace(/(\r\n)/g,"\n"):r;let l=e.context;e.isShowNoChange&&t===r&&(t="File Without Change\tOldString: ======================== \n"+t,r="File Without Change\tNewString: ======================== \n"+r,l=99999);const i=n.createPatch(e.fileName,t,r,"","",{context:l});return a.html(i,{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),l=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(l),t.emit("after-render")}var h=[],s=[];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 a=h.indexOf(i);-1===a&&(a=h.push(i)-1,s[a]={}),t=s[a]&&s[a][r]?s[a][r]:s[a][r]=o()}else t=o();65279===e.charCodeAt(0)&&(e=e.substring(1)),t.styleSheet?t.styleSheet.cssText+=e:t.appendChild(document.createTextNode(e))}function o(){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 a="prepend"===r?"afterbegin":"beforeend";return i.insertAdjacentElement(a,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 u=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},syncScroll:{type:Boolean,default:!0}},emits:["before-render","after-render"],setup(n,t){const r=e.ref(d(n)),l=function(e,n){let t;return function(){const r=this,l=arguments;clearTimeout(t),t=setTimeout((function(){e.apply(r,l)}),n)}}((async()=>{if(r.value=d(n),n.highlight){const e=document.createElement("div");e.innerHTML=r.value,await p(e,n,t),r.value=e.innerHTML}}),200);e.watch(n,l,{deep:!0,immediate:!0});const{addSyncScroll:i,removeSyncScroll:a}=function(e){let n=document.createElement("div");function t(t){t.target===n&&document.querySelectorAll(e).forEach((function(e){n!==e&&(e.scrollTop=n.scrollTop,e.scrollLeft=n.scrollLeft)}))}function r(e){n=e.target}return{addSyncScroll:function(){document.querySelectorAll(e).forEach((function(e){e.addEventListener("mouseenter",r),e.addEventListener("scroll",t)}))},removeSyncScroll:function(){document.querySelectorAll(e).forEach((function(e){e.removeEventListener("mouseenter",r),e.removeEventListener("scroll",t)}))}}}(".d2h-file-side-diff");return e.watch((()=>n.syncScroll),((e,n)=>{a(),e&&i()})),e.onMounted((()=>{i()})),{html:r}},render(){return e.isVue3?e.h("div",{innerHTML:this.html}):e.h("div",{domProps:{innerHTML:this.html}})}});const f=[u],m=e=>{f.forEach((n=>{e.component(n.name,n)}))};var g={install:m};exports.CodeDiff=u,exports.default=g,exports.install=m;

package/dist/v-code-diff.esm.js

@@ -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;n=e.noDiffLineFeed?n.replace(/(\r\n)/g,"\n"):n,t=e.noDiffLineFeed?t.replace(/(\r\n)/g,"\n"):t;let r=e.context;e.isShowNoChange&&n===t&&(n="File Without Change\tOldString: ======================== \n"+n,t="File Without Change\tNewString: ======================== \n"+t,r=99999);const i=a(e.fileName,n,t,"","",{context:r});return d.html(i,{outputFormat:e.outputFormat,drawFileList:e.drawFileList,matching:"lines",diffStyle:e.diffStyle,renderNothingWhenEmpty:e.renderNothingWhenEmpty})};async function c(e,n,t){t.emit("before-render");const r=await async function(e){return new Promise((n=>{setTimeout((()=>{const t=e.querySelectorAll(".d2h-wrapper .d2h-code-line-ctn");n(Array.from(t))}),0)}))}(e),i=Array.from(r).map((e=>async function(e,n){return new Promise((t=>{setTimeout((()=>{if(n){const t=e.innerText;e.innerHTML=s.highlight(t,{language:n}).value}else s.highlightElement(e);t(!0)}),0)}))}(e,n.language)));await Promise.all(i),t.emit("after-render")}function p(e){let n=document.createElement("div");document.querySelectorAll(e).forEach((function(t){t.addEventListener("mouseenter",(function(e){n=e.target})),t.addEventListener("scroll",(function(t){t.target===n&&document.querySelectorAll(e).forEach((function(e){n!==e&&(e.scrollTop=n.scrollTop,e.scrollLeft=n.scrollLeft)}))}))}))}var f=[],u=[];function m(e,n){if(e&&"undefined"!=typeof document){var t,r=!0===n.prepend?"prepend":"append",i=!0===n.singleTag,l="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(i){var o=f.indexOf(l);-1===o&&(o=f.push(l)-1,u[o]={}),t=u[o]&&u[o][r]?u[o][r]:u[o][r]=a()}else t=a();65279===e.charCodeAt(0)&&(e=e.substring(1)),t.styleSheet?t.styleSheet.cssText+=e:t.appendChild(document.createTextNode(e))}function a(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var t=Object.keys(n.attributes),i=0;i<t.length;i++)e.setAttribute(t[i],n.attributes[t[i]]);var o="prepend"===r?"afterbegin":"beforeend";return l.insertAdjacentElement(o,e),e}}m(".hljs {\n  display: inline-block;\n  padding: 0;\n  background: transparent;\n  vertical-align: middle;\n}\n\n.hljs-comment,\n.hljs-quote {\n  color: #800;\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-section,\n.hljs-title,\n.hljs-name {\n  color: #008;\n}\n\n.hljs-variable,\n.hljs-template-variable {\n  color: #660;\n}\n\n.hljs-string,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-regexp {\n  color: #080;\n}\n\n.hljs-literal,\n.hljs-symbol,\n.hljs-bullet,\n.hljs-meta,\n.hljs-number,\n.hljs-link {\n  color: #066;\n}\n\n.hljs-title,\n.hljs-doctag,\n.hljs-type,\n.hljs-attr,\n.hljs-built_in,\n.hljs-builtin-name,\n.hljs-params {\n  color: #606;\n}\n\n.hljs-attribute,\n.hljs-subst {\n  color: #000;\n}\n\n.hljs-formula {\n  background-color: #eee;\n  font-style: italic;\n}\n\n.hljs-selector-id,\n.hljs-selector-class {\n  color: #9B703F;\n}\n\n.hljs-addition {\n  background-color: #baeeba;\n}\n\n.hljs-deletion {\n  background-color: #ffc8bd;\n}\n\n.hljs-doctag,\n.hljs-strong {\n  font-weight: bold;\n}\n\n.hljs-emphasis {\n  font-style: italic;\n}",{});m(".d2h-wrapper {\n  position: relative;\n  line-height: normal;\n}\n.d2h-wrapper .d2h-file-header {\n  display: none;\n}\n.d2h-wrapper .d2h-files-diff {\n  display: flex;\n}\n.d2h-wrapper .d2h-file-side-diff {\n  margin-bottom: -5px;\n}\n.d2h-wrapper .d2h-code-side-emptyplaceholder {\n  max-height: 19px;\n}\n.d2h-wrapper .d2h-code-side-line,\n.d2h-wrapper .d2h-code-line {\n  width: auto;\n}\n.d2h-wrapper .d2h-code-side-line .d2h-info {\n  height: 18px;\n}\n.d2h-wrapper .d2h-cntx,\n.d2h-wrapper .d2h-del,\n.d2h-wrapper .d2h-ins {\n  height: 18px;\n}\n.d2h-wrapper .d2h-code-linenumber,\n.d2h-wrapper .d2h-code-side-linenumber {\n  line-height: 20px;\n  height: 20px;\n}\n.d2h-wrapper tr {\n  height: 20px;\n}",{});var g=e({name:"CodeDiff",props:{highlight:{type:Boolean,default:!0},oldString:{type:String,default:""},newString:{type:String,default:""},context:{type:Number,default:10},outputFormat:{type:String,default:"line-by-line"},drawFileList:{type:Boolean,default:!1},renderNothingWhenEmpty:{type:Boolean,default:!1},diffStyle:{type:String,default:"word"},fileName:{type:String,default:""},isShowNoChange:{type:Boolean,default:!1},trim:{type:Boolean,default:!1},language:{type:String,default:""},noDiffLineFeed:{type:Boolean,default:!1}},emits:["before-render","after-render"],setup(e,l){const o=n(h(e)),a=function(e,n){let t;return function(){const r=this,i=arguments;clearTimeout(t),t=setTimeout((function(){e.apply(r,i)}),n)}}((async()=>{if(o.value=h(e),e.highlight){const n=document.createElement("div");n.innerHTML=o.value,await c(n,e,l),o.value=n.innerHTML}}),200);return t(e,a,{deep:!0,immediate:!0}),r((()=>{"side-by-side"===e.outputFormat&&p(".d2h-file-side-diff")})),i((()=>{"side-by-side"===e.outputFormat&&p(".d2h-file-side-diff")})),{html:o}},render(){return o("div",l?{innerHTML:this.html}:{domProps:{innerHTML:this.html}})}});g.install=e=>{e.component(g.name,g)};const y=[g],j=e=>{y.forEach((n=>{e.component(n.name,n)}))};var b={install:j};export default b;export{g as CodeDiff,j as install};
+import{defineComponent as e,ref as n,watch as r,onMounted as t,isVue3 as l,h as i}from"vue-demi";import{createPatch as o}from"diff";import*as a from"diff2html";import d from"highlight.js";import"diff2html/bundles/css/diff2html.min.css";const p=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 t=e.context;e.isShowNoChange&&n===r&&(n="File Without Change\tOldString: ======================== \n"+n,r="File Without Change\tNewString: ======================== \n"+r,t=99999);const l=o(e.fileName,n,r,"","",{context:t});return a.html(l,{outputFormat:e.outputFormat,drawFileList:e.drawFileList,matching:"lines",diffStyle:e.diffStyle,renderNothingWhenEmpty:e.renderNothingWhenEmpty})};async function h(e,n,r){r.emit("before-render");const t=await async function(e){return new Promise((n=>{setTimeout((()=>{const r=e.querySelectorAll(".d2h-wrapper .d2h-code-line-ctn");n(Array.from(r))}),0)}))}(e),l=Array.from(t).map((e=>async function(e,n){return new Promise((r=>{setTimeout((()=>{if(n){const r=e.innerText;e.innerHTML=d.highlight(r,{language:n}).value}else d.highlightElement(e);r(!0)}),0)}))}(e,n.language)));await Promise.all(l),r.emit("after-render")}var s=[],c=[];function u(e,n){if(e&&"undefined"!=typeof document){var r,t=!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=s.indexOf(i);-1===o&&(o=s.push(i)-1,c[o]={}),r=c[o]&&c[o][t]?c[o][t]:c[o][t]=a()}else r=a();65279===e.charCodeAt(0)&&(e=e.substring(1)),r.styleSheet?r.styleSheet.cssText+=e:r.appendChild(document.createTextNode(e))}function a(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var r=Object.keys(n.attributes),l=0;l<r.length;l++)e.setAttribute(r[l],n.attributes[r[l]]);var o="prepend"===t?"afterbegin":"beforeend";return i.insertAdjacentElement(o,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({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},syncScroll:{type:Boolean,default:!0}},emits:["before-render","after-render"],setup(e,l){const i=n(p(e)),o=function(e,n){let r;return function(){const t=this,l=arguments;clearTimeout(r),r=setTimeout((function(){e.apply(t,l)}),n)}}((async()=>{if(i.value=p(e),e.highlight){const n=document.createElement("div");n.innerHTML=i.value,await h(n,e,l),i.value=n.innerHTML}}),200);r(e,o,{deep:!0,immediate:!0});const{addSyncScroll:a,removeSyncScroll:d}=function(e){let n=document.createElement("div");function r(r){r.target===n&&document.querySelectorAll(e).forEach((function(e){n!==e&&(e.scrollTop=n.scrollTop,e.scrollLeft=n.scrollLeft)}))}function t(e){n=e.target}return{addSyncScroll:function(){document.querySelectorAll(e).forEach((function(e){e.addEventListener("mouseenter",t),e.addEventListener("scroll",r)}))},removeSyncScroll:function(){document.querySelectorAll(e).forEach((function(e){e.removeEventListener("mouseenter",t),e.removeEventListener("scroll",r)}))}}}(".d2h-file-side-diff");return r((()=>e.syncScroll),((e,n)=>{d(),e&&a()})),t((()=>{a()})),{html:i}},render(){return i("div",l?{innerHTML:this.html}:{domProps:{innerHTML:this.html}})}});const m=[f],g=e=>{m.forEach((n=>{e.component(n.name,n)}))};var w={install:g};export default w;export{f as CodeDiff,g as install};

package/dist/v-code-diff.umd.js

@@ -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;n=e.noDiffLineFeed?n.replace(/(\r\n)/g,"\n"):n,r=e.noDiffLineFeed?r.replace(/(\r\n)/g,"\n"):r;let i=e.context;e.isShowNoChange&&n===r&&(n="File Without Change\tOldString: ======================== \n"+n,r="File Without Change\tNewString: ======================== \n"+r,i=99999);const l=t.createPatch(e.fileName,n,r,"","",{context:i});return d.html(l,{outputFormat:e.outputFormat,drawFileList:e.drawFileList,matching:"lines",diffStyle:e.diffStyle,renderNothingWhenEmpty:e.renderNothingWhenEmpty})};async function h(e,n,t){t.emit("before-render");const r=await async function(e){return new Promise((n=>{setTimeout((()=>{const t=e.querySelectorAll(".d2h-wrapper .d2h-code-line-ctn");n(Array.from(t))}),0)}))}(e),i=Array.from(r).map((e=>async function(e,n){return new Promise((t=>{setTimeout((()=>{if(n){const t=e.innerText;e.innerHTML=a.default.highlight(t,{language:n}).value}else a.default.highlightElement(e);t(!0)}),0)}))}(e,n.language)));await Promise.all(i),t.emit("after-render")}function f(e){let n=document.createElement("div");document.querySelectorAll(e).forEach((function(t){t.addEventListener("mouseenter",(function(e){n=e.target})),t.addEventListener("scroll",(function(t){t.target===n&&document.querySelectorAll(e).forEach((function(e){n!==e&&(e.scrollTop=n.scrollTop,e.scrollLeft=n.scrollLeft)}))}))}))}var u=[],c=[];function p(e,n){if(e&&"undefined"!=typeof document){var t,r=!0===n.prepend?"prepend":"append",i=!0===n.singleTag,l="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(i){var o=u.indexOf(l);-1===o&&(o=u.push(l)-1,c[o]={}),t=c[o]&&c[o][r]?c[o][r]:c[o][r]=d()}else t=d();65279===e.charCodeAt(0)&&(e=e.substring(1)),t.styleSheet?t.styleSheet.cssText+=e:t.appendChild(document.createTextNode(e))}function d(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var t=Object.keys(n.attributes),i=0;i<t.length;i++)e.setAttribute(t[i],n.attributes[t[i]]);var o="prepend"===r?"afterbegin":"beforeend";return l.insertAdjacentElement(o,e),e}}p(".hljs {\n  display: inline-block;\n  padding: 0;\n  background: transparent;\n  vertical-align: middle;\n}\n\n.hljs-comment,\n.hljs-quote {\n  color: #800;\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-section,\n.hljs-title,\n.hljs-name {\n  color: #008;\n}\n\n.hljs-variable,\n.hljs-template-variable {\n  color: #660;\n}\n\n.hljs-string,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-regexp {\n  color: #080;\n}\n\n.hljs-literal,\n.hljs-symbol,\n.hljs-bullet,\n.hljs-meta,\n.hljs-number,\n.hljs-link {\n  color: #066;\n}\n\n.hljs-title,\n.hljs-doctag,\n.hljs-type,\n.hljs-attr,\n.hljs-built_in,\n.hljs-builtin-name,\n.hljs-params {\n  color: #606;\n}\n\n.hljs-attribute,\n.hljs-subst {\n  color: #000;\n}\n\n.hljs-formula {\n  background-color: #eee;\n  font-style: italic;\n}\n\n.hljs-selector-id,\n.hljs-selector-class {\n  color: #9B703F;\n}\n\n.hljs-addition {\n  background-color: #baeeba;\n}\n\n.hljs-deletion {\n  background-color: #ffc8bd;\n}\n\n.hljs-doctag,\n.hljs-strong {\n  font-weight: bold;\n}\n\n.hljs-emphasis {\n  font-style: italic;\n}",{});p(".d2h-wrapper {\n  position: relative;\n  line-height: normal;\n}\n.d2h-wrapper .d2h-file-header {\n  display: none;\n}\n.d2h-wrapper .d2h-files-diff {\n  display: flex;\n}\n.d2h-wrapper .d2h-file-side-diff {\n  margin-bottom: -5px;\n}\n.d2h-wrapper .d2h-code-side-emptyplaceholder {\n  max-height: 19px;\n}\n.d2h-wrapper .d2h-code-side-line,\n.d2h-wrapper .d2h-code-line {\n  width: auto;\n}\n.d2h-wrapper .d2h-code-side-line .d2h-info {\n  height: 18px;\n}\n.d2h-wrapper .d2h-cntx,\n.d2h-wrapper .d2h-del,\n.d2h-wrapper .d2h-ins {\n  height: 18px;\n}\n.d2h-wrapper .d2h-code-linenumber,\n.d2h-wrapper .d2h-code-side-linenumber {\n  line-height: 20px;\n  height: 20px;\n}\n.d2h-wrapper tr {\n  height: 20px;\n}",{});var m=n.defineComponent({name:"CodeDiff",props:{highlight:{type:Boolean,default:!0},oldString:{type:String,default:""},newString:{type:String,default:""},context:{type:Number,default:10},outputFormat:{type:String,default:"line-by-line"},drawFileList:{type:Boolean,default:!1},renderNothingWhenEmpty:{type:Boolean,default:!1},diffStyle:{type:String,default:"word"},fileName:{type:String,default:""},isShowNoChange:{type:Boolean,default:!1},trim:{type:Boolean,default:!1},language:{type:String,default:""},noDiffLineFeed:{type:Boolean,default:!1}},emits:["before-render","after-render"],setup(e,t){const r=n.ref(s(e)),i=function(e,n){let t;return function(){const r=this,i=arguments;clearTimeout(t),t=setTimeout((function(){e.apply(r,i)}),n)}}((async()=>{if(r.value=s(e),e.highlight){const n=document.createElement("div");n.innerHTML=r.value,await h(n,e,t),r.value=n.innerHTML}}),200);return n.watch(e,i,{deep:!0,immediate:!0}),n.onMounted((()=>{"side-by-side"===e.outputFormat&&f(".d2h-file-side-diff")})),n.onUpdated((()=>{"side-by-side"===e.outputFormat&&f(".d2h-file-side-diff")})),{html:r}},render(){return n.isVue3?n.h("div",{innerHTML:this.html}):n.h("div",{domProps:{innerHTML:this.html}})}});m.install=e=>{e.component(m.name,m)};const g=[m],y=e=>{g.forEach((n=>{e.component(n.name,n)}))};var j={install:y};e.CodeDiff=m,e.default=j,e.install=y,Object.defineProperty(e,"__esModule",{value:!0})}));
+!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),a=i(l);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 l=e.context;e.isShowNoChange&&n===r&&(n="File Without Change\tOldString: ======================== \n"+n,r="File Without Change\tNewString: ======================== \n"+r,l=99999);const i=t.createPatch(e.fileName,n,r,"","",{context:l});return d.html(i,{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),l=Array.from(r).map((e=>async function(e,n){return new Promise((t=>{setTimeout((()=>{if(n){const t=e.innerText;e.innerHTML=a.default.highlight(t,{language:n}).value}else a.default.highlightElement(e);t(!0)}),0)}))}(e,n.language)));await Promise.all(l),t.emit("after-render")}var s=[],c=[];function f(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=s.indexOf(i);-1===o&&(o=s.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}}f(".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}",{});f(".d2h-wrapper {\n  position: relative;\n  line-height: normal;\n}\n.d2h-wrapper .d2h-file-header {\n  display: none;\n}\n.d2h-wrapper .d2h-files-diff {\n  display: flex;\n}\n.d2h-wrapper .d2h-file-side-diff {\n  margin-bottom: -5px;\n}\n.d2h-wrapper .d2h-code-side-emptyplaceholder {\n  max-height: 19px;\n}\n.d2h-wrapper .d2h-code-side-line,\n.d2h-wrapper .d2h-code-line {\n  width: auto;\n}\n.d2h-wrapper .d2h-code-side-line .d2h-info {\n  height: 18px;\n}\n.d2h-wrapper .d2h-cntx,\n.d2h-wrapper .d2h-del,\n.d2h-wrapper .d2h-ins {\n  height: 18px;\n}\n.d2h-wrapper .d2h-code-linenumber,\n.d2h-wrapper .d2h-code-side-linenumber {\n  line-height: 20px;\n  height: 20px;\n}\n.d2h-wrapper tr {\n  height: 20px;\n}",{});var u=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},syncScroll:{type:Boolean,default:!0}},emits:["before-render","after-render"],setup(e,t){const r=n.ref(h(e)),l=function(e,n){let t;return function(){const r=this,l=arguments;clearTimeout(t),t=setTimeout((function(){e.apply(r,l)}),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);n.watch(e,l,{deep:!0,immediate:!0});const{addSyncScroll:i,removeSyncScroll:o}=function(e){let n=document.createElement("div");function t(t){t.target===n&&document.querySelectorAll(e).forEach((function(e){n!==e&&(e.scrollTop=n.scrollTop,e.scrollLeft=n.scrollLeft)}))}function r(e){n=e.target}return{addSyncScroll:function(){document.querySelectorAll(e).forEach((function(e){e.addEventListener("mouseenter",r),e.addEventListener("scroll",t)}))},removeSyncScroll:function(){document.querySelectorAll(e).forEach((function(e){e.removeEventListener("mouseenter",r),e.removeEventListener("scroll",t)}))}}}(".d2h-file-side-diff");return n.watch((()=>e.syncScroll),((e,n)=>{o(),e&&i()})),n.onMounted((()=>{i()})),{html:r}},render(){return n.isVue3?n.h("div",{innerHTML:this.html}):n.h("div",{domProps:{innerHTML:this.html}})}});const m=[u],g=e=>{m.forEach((n=>{e.component(n.name,n)}))};var w={install:g};e.CodeDiff=u,e.default=w,e.install=g,Object.defineProperty(e,"__esModule",{value:!0})}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-code-diff",
   "description": "A diff plugin of vue, support vue2 and vue3",
-  "version": "0.3.8",
+  "version": "0.3.11",
   "scripts": {
     "dev": "vite",
     "build": "npx rimraf dist && rollup --config rollup.config.js",

package/src/lib/index.ts

@@ -1,10 +1,10 @@
-import { App } from 'vue-demi'
+import { Plugin } from 'vue-demi'
 import CodeDiff from './v-code-diff'
 
 const components = [
   CodeDiff
 ]
-const install = (app: App) => {
+const install = (app) => {
   components.forEach(component => {
     app.component(component.name, component)
   })
@@ -15,4 +15,4 @@ export {
   CodeDiff
 }
 
-export default { install }
+export default { install } as Plugin

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

@@ -1,8 +1,3 @@
-import { App } from 'vue-demi'
-import CodeDiff from './v-code-diff.js'
-
-CodeDiff.install = (app: App) => {
-  app.component(CodeDiff.name, CodeDiff)
-}
+import CodeDiff from './v-code-diff'
 
 export default CodeDiff

package/src/lib/v-code-diff/styles/highlight.scss

@@ -1,82 +1,84 @@
-.hljs {
-  display: inline-block;
-  padding: 0;
-  background: transparent;
-  vertical-align: middle;
-}
+.d2h-wrapper {
+  .hljs {
+    display: inline-block;
+    padding: 0;
+    background: transparent;
+    vertical-align: middle;
+  }
 
-.hljs-comment,
-.hljs-quote {
-  color: #800;
-}
+  .hljs-comment,
+  .hljs-quote {
+    color: #800;
+  }
 
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-section,
-.hljs-title,
-.hljs-name {
-  color: #008;
-}
+  .hljs-keyword,
+  .hljs-selector-tag,
+  .hljs-section,
+  .hljs-title,
+  .hljs-name {
+    color: #008;
+  }
 
-.hljs-variable,
-.hljs-template-variable {
-  color: #660;
-}
+  .hljs-variable,
+  .hljs-template-variable {
+    color: #660;
+  }
 
-.hljs-string,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-regexp {
-  color: #080;
-}
+  .hljs-string,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-regexp {
+    color: #080;
+  }
 
-.hljs-literal,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-meta,
-.hljs-number,
-.hljs-link {
-  color: #066;
-}
+  .hljs-literal,
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-link {
+    color: #066;
+  }
 
-.hljs-title,
-.hljs-doctag,
-.hljs-type,
-.hljs-attr,
-.hljs-built_in,
-.hljs-builtin-name,
-.hljs-params {
-  color: #606;
-}
+  .hljs-title,
+  .hljs-doctag,
+  .hljs-type,
+  .hljs-attr,
+  .hljs-built_in,
+  .hljs-builtin-name,
+  .hljs-params {
+    color: #606;
+  }
 
-.hljs-attribute,
-.hljs-subst {
-  color: #000;
-}
+  .hljs-attribute,
+  .hljs-subst {
+    color: #000;
+  }
 
-.hljs-formula {
-  background-color: #eee;
-  font-style: italic;
-}
+  .hljs-formula {
+    background-color: #eee;
+    font-style: italic;
+  }
 
-.hljs-selector-id,
-.hljs-selector-class {
-  color: #9B703F
-}
+  .hljs-selector-id,
+  .hljs-selector-class {
+    color: #9B703F
+  }
 
-.hljs-addition {
-  background-color: #baeeba;
-}
+  .hljs-addition {
+    background-color: #baeeba;
+  }
 
-.hljs-deletion {
-  background-color: #ffc8bd;
-}
+  .hljs-deletion {
+    background-color: #ffc8bd;
+  }
 
-.hljs-doctag,
-.hljs-strong {
-  font-weight: bold;
-}
+  .hljs-doctag,
+  .hljs-strong {
+    font-weight: bold;
+  }
 
-.hljs-emphasis {
-  font-style: italic;
+  .hljs-emphasis {
+    font-style: italic;
+  }
 }

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

@@ -83,22 +83,40 @@ export async function highlightElements (element: Element, props, ctx: SetupCont
   ctx.emit('after-render')
 }
 
-export function syncScroll (selector) {
+export function useSyncScroll (selector) {
   let active: HTMLElement = document.createElement('div')
-  document.querySelectorAll(selector).forEach(function (element) {
-    element.addEventListener('mouseenter', function (e) {
-      active = e.target
+
+  function onScroll (e) {
+    if (e.target !== active) return
+
+    document.querySelectorAll(selector).forEach(function (target) {
+      if (active === target) return
+
+      target.scrollTop = active.scrollTop
+      target.scrollLeft = active.scrollLeft
     })
+  }
 
-    element.addEventListener('scroll', function (e) {
-      if (e.target !== active) return
+  function onMouseenter (e) {
+    active = e.target
+  }
 
-      document.querySelectorAll(selector).forEach(function (target) {
-        if (active === target) return
+  function addSyncScroll () {
+    document.querySelectorAll(selector).forEach(function (element) {
+      element.addEventListener('mouseenter', onMouseenter)
+      element.addEventListener('scroll', onScroll)
+    })
+  }
 
-        target.scrollTop = active.scrollTop
-        target.scrollLeft = active.scrollLeft
-      })
+  function removeSyncScroll () {
+    document.querySelectorAll(selector).forEach(function (element) {
+      element.removeEventListener('mouseenter', onMouseenter)
+      element.removeEventListener('scroll', onScroll)
     })
-  })
+  }
+
+  return {
+    addSyncScroll,
+    removeSyncScroll
+  }
 }

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

@@ -1,5 +1,5 @@
 import { defineComponent, isVue3, PropType, h, ref, watch, onUpdated, onMounted } from 'vue-demi'
-import { createHtml, highlightElements, syncScroll, useDebounceFn } from '@/lib/v-code-diff/util'
+import { createHtml, highlightElements, useDebounceFn, useSyncScroll } from '@/lib/v-code-diff/util'
 import './styles'
 
 export default defineComponent({
@@ -56,6 +56,10 @@ export default defineComponent({
     noDiffLineFeed: {
       type: Boolean,
       default: false
+    },
+    syncScroll: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['before-render', 'after-render'],
@@ -71,16 +75,19 @@ export default defineComponent({
       }
     }, 200)
     watch(props, cb, { deep: true, immediate: true })
-    onMounted(() => {
-      if (props.outputFormat === 'side-by-side') {
-        syncScroll('.d2h-file-side-diff')
+
+    const { addSyncScroll, removeSyncScroll } = useSyncScroll('.d2h-file-side-diff')
+    watch(() => props.syncScroll, (newVal, oldVal) => {
+      removeSyncScroll()
+      if (newVal) {
+        addSyncScroll()
       }
     })
-    onUpdated(() => {
-      if (props.outputFormat === 'side-by-side') {
-        syncScroll('.d2h-file-side-diff')
-      }
+
+    onMounted(() => {
+      addSyncScroll()
     })
+
     return {
       html
     }