add ability to use a deep watch in scope var watches in angularjs adapters (#19195)

3 files changed, 4 insertions, 3 deletions

diff --git a/plugins/CoreHome/vue/dist/CoreHome.umd.js b/plugins/CoreHome/vue/dist/CoreHome.umd.js
index 9ac1826689..21d1a4265a 100644
--- a/plugins/CoreHome/vue/dist/CoreHome.umd.js
+++ b/plugins/CoreHome/vue/dist/CoreHome.umd.js
@@ -2535,7 +2535,7 @@ function createAngularJsAdapter(options) {
                 }
 
                 vm[info.vue] = newValueFinal;
-              });
+              }, info.deepWatch);
             });
 
             if (transclude && transcludeClone) {
diff --git a/plugins/CoreHome/vue/dist/CoreHome.umd.min.js b/plugins/CoreHome/vue/dist/CoreHome.umd.min.js
index 59d800d64b..1d40aac8a9 100644
--- a/plugins/CoreHome/vue/dist/CoreHome.umd.min.js
+++ b/plugins/CoreHome/vue/dist/CoreHome.umd.min.js
@@ -117,7 +117,7 @@ function Pe(){return S}function Ve(e,t){t.$oldEmit=t.$emit,t.$emit=function(e){f
  *
  * @link https://matomo.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */var yt=0;function wt(e){return e.substring(0,1).toLowerCase()+e.substring(1).replace(/[A-Z]/g,(function(e){return"-".concat(e.toLowerCase())}))}function Ot(e){return e.substring(0,1).toLowerCase()+e.substring(1).replace(/-([a-z])/g,(function(e,t){return t.toUpperCase()}))}function jt(e){return"object"===bt(e)&&null!==e&&Object.getPrototypeOf(e)===Object.prototype?Object.fromEntries(Object.entries(e).filter((function(e){return!/^\$/.test(e[0])}))):e}function kt(e){var t=e.component,n=e.require,r=e.scope,i=void 0===r?{}:r,o=e.events,l=void 0===o?{}:o,c=e.$inject,s=e.directiveName,u=e.transclude,d=e.mountPointFactory,p=e.postCreate,m=e.noScope,f=e.restrict,h=void 0===f?"A":f,g=e.priority,v=e.replace,b=yt;u&&(yt+=1);var y={},w={};function O(){for(var e=arguments.length,r=new Array(e),o=0;o<e;o++)r[o]=arguments[o];var c={restrict:h,require:n,priority:g,scope:m?void 0:w,compile:function(){return{post:function(e,n,o,c){var s=u?n.find("[ng-transclude][counter=".concat(b,"]")):null,m="<root-component";Object.entries(l).forEach((function(e){var t=pt(e,1),n=t[0];m+=" @".concat(wt(n),"=\"onEventHandler('").concat(n,"', $event)\"")})),Object.entries(i).forEach((function(e){var t=pt(e,2),n=t[1];if("&"===n.angularJsBind||"&?"===n.angularJsBind){var r=wt(n.vue);l[n.vue]||(m+=" @".concat(r,"=\"onEventHandler('").concat(n.vue,"', $event)\""))}else m+=" :".concat(wt(n.vue),'="').concat(n.vue,'"')})),m+=">",u&&(m+='<div ref="transcludeTarget"/>'),m+="</root-component>";var f=dt({template:m,data:function(){var t=this,a={};return Object.entries(i).forEach((function(i){var l=pt(i,2),s=l[0],u=l[1],d=jt(e[s]);"undefined"===typeof d&&"undefined"!==typeof u.default&&(d=u.default instanceof Function?u.default.apply(u,[e,n,o].concat(r)):u.default),u.transform&&(d=u.transform.apply(u,[d,t,e,n,o,c].concat(r))),a[u.vue]=d})),a},setup:function(){if(u){var e=Object(a["ref"])(null);return{transcludeTarget:e}}},methods:{onEventHandler:function(t,i){var a=Ot(t);a=y[a]||a,e[a]&&e[a](i),l[t]&&l[t].apply(l,[i,this,e,n,o,c].concat(r))}}});f.component("root-component",t);var h=d?d.apply(void 0,[e,n,o].concat(r)):n[0],g=f.mount(h);Object.entries(i).forEach((function(t){var i=pt(t,2),a=i[0],l=i[1];l.angularJsBind&&"&"!==l.angularJsBind&&"&?"!==l.angularJsBind&&e.$watch(a,(function(t,i){if(t!==i||JSON.stringify(g[l.vue])!==JSON.stringify(t)){var a=jt(t);"undefined"!==typeof l.default&&"undefined"===typeof t&&(a=l.default instanceof Function?l.default.apply(l,[e,n,o].concat(r)):l.default),l.transform&&(a=l.transform.apply(l,[a,g,e,n,o,c].concat(r))),g[l.vue]=a}}))})),u&&s&&$(g.transcludeTarget).append(s),p&&p.apply(void 0,[g,e,n,o,c].concat(r)),v&&(Array.from(n[0].attributes).forEach((function(e){i[e.nodeName]||h.firstElementChild&&h.firstElementChild.setAttribute(e.nodeName,e.nodeValue)})),n.replaceWith(window.$(h).children())),n.on("$destroy",(function(){f.unmount()}))}}}};return u&&(c.transclude=!0,c.template='<div ng-transclude counter="'.concat(b,'"/>')),c}return Object.entries(i).forEach((function(e){var t=pt(e,2),n=t[0],r=t[1];r.vue||(r.vue=n),r.angularJsBind&&(w[n]=r.angularJsBind),y[r.vue]=n})),O.$inject=c||[],window.angular.module("piwikApp").directive(s,O),O}function St(e){if("undefined"!==typeof e)return"true"===e||!!e&&e>0&&"0"!==e}function Ct(e){if("undefined"!==typeof e)return null===e?null:parseInt(e,10)}function Et(e){return"undefined"===typeof e?e:JSON.parse(JSON.stringify(e))}function Dt(e){var t=Et(e);return S.helper.getAngularDependency("$rootScope").$applyAsync(),t}
+ */var yt=0;function wt(e){return e.substring(0,1).toLowerCase()+e.substring(1).replace(/[A-Z]/g,(function(e){return"-".concat(e.toLowerCase())}))}function Ot(e){return e.substring(0,1).toLowerCase()+e.substring(1).replace(/-([a-z])/g,(function(e,t){return t.toUpperCase()}))}function jt(e){return"object"===bt(e)&&null!==e&&Object.getPrototypeOf(e)===Object.prototype?Object.fromEntries(Object.entries(e).filter((function(e){return!/^\$/.test(e[0])}))):e}function kt(e){var t=e.component,n=e.require,r=e.scope,i=void 0===r?{}:r,o=e.events,l=void 0===o?{}:o,c=e.$inject,s=e.directiveName,u=e.transclude,d=e.mountPointFactory,p=e.postCreate,m=e.noScope,f=e.restrict,h=void 0===f?"A":f,g=e.priority,v=e.replace,b=yt;u&&(yt+=1);var y={},w={};function O(){for(var e=arguments.length,r=new Array(e),o=0;o<e;o++)r[o]=arguments[o];var c={restrict:h,require:n,priority:g,scope:m?void 0:w,compile:function(){return{post:function(e,n,o,c){var s=u?n.find("[ng-transclude][counter=".concat(b,"]")):null,m="<root-component";Object.entries(l).forEach((function(e){var t=pt(e,1),n=t[0];m+=" @".concat(wt(n),"=\"onEventHandler('").concat(n,"', $event)\"")})),Object.entries(i).forEach((function(e){var t=pt(e,2),n=t[1];if("&"===n.angularJsBind||"&?"===n.angularJsBind){var r=wt(n.vue);l[n.vue]||(m+=" @".concat(r,"=\"onEventHandler('").concat(n.vue,"', $event)\""))}else m+=" :".concat(wt(n.vue),'="').concat(n.vue,'"')})),m+=">",u&&(m+='<div ref="transcludeTarget"/>'),m+="</root-component>";var f=dt({template:m,data:function(){var t=this,a={};return Object.entries(i).forEach((function(i){var l=pt(i,2),s=l[0],u=l[1],d=jt(e[s]);"undefined"===typeof d&&"undefined"!==typeof u.default&&(d=u.default instanceof Function?u.default.apply(u,[e,n,o].concat(r)):u.default),u.transform&&(d=u.transform.apply(u,[d,t,e,n,o,c].concat(r))),a[u.vue]=d})),a},setup:function(){if(u){var e=Object(a["ref"])(null);return{transcludeTarget:e}}},methods:{onEventHandler:function(t,i){var a=Ot(t);a=y[a]||a,e[a]&&e[a](i),l[t]&&l[t].apply(l,[i,this,e,n,o,c].concat(r))}}});f.component("root-component",t);var h=d?d.apply(void 0,[e,n,o].concat(r)):n[0],g=f.mount(h);Object.entries(i).forEach((function(t){var i=pt(t,2),a=i[0],l=i[1];l.angularJsBind&&"&"!==l.angularJsBind&&"&?"!==l.angularJsBind&&e.$watch(a,(function(t,i){if(t!==i||JSON.stringify(g[l.vue])!==JSON.stringify(t)){var a=jt(t);"undefined"!==typeof l.default&&"undefined"===typeof t&&(a=l.default instanceof Function?l.default.apply(l,[e,n,o].concat(r)):l.default),l.transform&&(a=l.transform.apply(l,[a,g,e,n,o,c].concat(r))),g[l.vue]=a}}),l.deepWatch)})),u&&s&&$(g.transcludeTarget).append(s),p&&p.apply(void 0,[g,e,n,o,c].concat(r)),v&&(Array.from(n[0].attributes).forEach((function(e){i[e.nodeName]||h.firstElementChild&&h.firstElementChild.setAttribute(e.nodeName,e.nodeValue)})),n.replaceWith(window.$(h).children())),n.on("$destroy",(function(){f.unmount()}))}}}};return u&&(c.transclude=!0,c.template='<div ng-transclude counter="'.concat(b,'"/>')),c}return Object.entries(i).forEach((function(e){var t=pt(e,2),n=t[0],r=t[1];r.vue||(r.vue=n),r.angularJsBind&&(w[n]=r.angularJsBind),y[r.vue]=n})),O.$inject=c||[],window.angular.module("piwikApp").directive(s,O),O}function St(e){if("undefined"!==typeof e)return"true"===e||!!e&&e>0&&"0"!==e}function Ct(e){if("undefined"!==typeof e)return null===e?null:parseInt(e,10)}function Et(e){return"undefined"===typeof e?e:JSON.parse(JSON.stringify(e))}function Dt(e){var t=Et(e);return S.helper.getAngularDependency("$rootScope").$applyAsync(),t}
 /*!
  * Matomo - free/libre analytics platform
  *
diff --git a/plugins/CoreHome/vue/src/createAngularJsAdapter.ts b/plugins/CoreHome/vue/src/createAngularJsAdapter.ts
index 750786a6d2..e6b7b22d56 100644
--- a/plugins/CoreHome/vue/src/createAngularJsAdapter.ts
+++ b/plugins/CoreHome/vue/src/createAngularJsAdapter.ts
@@ -28,6 +28,7 @@ interface SingleScopeVarInfo<InjectTypes extends unknown[]> {
     ...injected: InjectTypes
   ) => unknown;
   angularJsBind?: string;
+  deepWatch?: boolean;
 }
 
 type ScopeMapping<InjectTypes extends unknown[]> = {
@@ -276,7 +277,7 @@ export default function createAngularJsAdapter<InjectTypes extends unknown[] = [
                 }
 
                 vm[info.vue!] = newValueFinal;
-              });
+              }, info.deepWatch);
             });
 
             if (transclude && transcludeClone) {