[Vue] poc implementation of on demand UMD loading for TagManager

Menu.php

@@ -119,7 +119,7 @@ public function configureTagManagerMenu(MenuTagManager $menu)
                         $menu->addItem($menuCategory, 'TagManager_EnablePreviewDebug', array(), $orderId = 130, false,'icon-bug', "tagManagerHelper.enablePreviewMode(" . json_encode($container['idcontainer']) . ")");
                     }
 
-                    $menu->addItem($menuCategory, 'TagManager_Publish', array(), $orderId = 135, false, 'icon-rocket', "tagManagerHelper.editVersion(null, " . json_encode($container['idcontainer']) . ", 0, function () { window.location.reload(); })");
+                    $menu->addItem($menuCategory, 'TagManager_Publish', array(), $orderId = 135, false, 'icon-rocket', "tagManagerHelper.editVersion(" . json_encode($container['idcontainer']) . ", 0, function () { window.location.reload(); })");
                 }
                 $menu->addItem($menuCategory, 'TagManager_InstallCode', $this->urlForAction('releases', $params), $orderId = 140, false,'icon-embed', "tagManagerHelper.showInstallCode(" . json_encode($container['idcontainer']) . ")");
 

Model/Variable.php

@@ -178,13 +178,6 @@ public function getContainerVariableReferences($idSite, $idContainerVersion, $id
 
     public static function hasFieldConfigVariableParameter($parameter)
     {
-        if (!empty($parameter['templateFile']) &&
-            ($parameter['templateFile'] === BaseTemplate::FIELD_TEMPLATE_VARIABLE
-                || $parameter['templateFile'] === BaseTemplate::FIELD_TEMPLATE_TEXTAREA_VARIABLE
-                || $parameter['templateFile'] === BaseTemplate::FIELD_TEMPLATE_VARIABLE_TYPE)) {
-            return true;
-        }
-
         if (!empty($parameter['component'])
             && ($parameter['component'] === BaseTemplate::FIELD_TEXTAREA_VARIABLE_COMPONENT
                 || $parameter['component'] === BaseTemplate::FIELD_VARIABLE_COMPONENT
@@ -283,9 +276,8 @@ private function replaceVariableNameInParameters($entity, $oldVarName, $newVarNa
         $parameters = $entity['parameters'];
         foreach ($entity['typeMetadata']['parameters'] as $parameter) {
             $paramName = $parameter['name'];
-            if (($parameter['templateFile'] === BaseTemplate::FIELD_TEMPLATE_VARIABLE
-                    || (isset($parameter['component'])
-                        && in_array($parameter['component'], [BaseTemplate::FIELD_VARIABLE_COMPONENT, BaseTemplate::FIELD_VARIABLE_TYPE_COMPONENT])))
+            if ((isset($parameter['component'])
+                    && in_array($parameter['component'], [BaseTemplate::FIELD_VARIABLE_COMPONENT, BaseTemplate::FIELD_VARIABLE_TYPE_COMPONENT]))
                 && isset($parameters[$paramName])
                 && is_string($parameters[$paramName])
                 && strpos($parameters[$paramName], $oldVarNameTemplate) !== false) {

TagManager.php

@@ -40,6 +40,11 @@ class TagManager extends \Piwik\Plugin
 {
     public static $enableAutoContainerCreation = true;
 
+    public function shouldLoadUmdOnDemand()
+    {
+        return true;
+    }
+
     public function registerEvents()
     {
         return array(
@@ -527,7 +532,6 @@ public function getClientSideTranslationKeys(&$result)
         $result[] = 'TagManager_VersionImportContentTitle';
         $result[] = 'TagManager_VersionImportOverwriteContent';
         $result[] = 'TagManager_CustomVariables';
-        $result[] = 'TagManager_PreconfiguredVariables';
         $result[] = 'TagManager_EditContainer';
         $result[] = 'TagManager_CreateNewContainer';
         $result[] = 'TagManager_CreateNewContainerNow';
@@ -543,6 +547,36 @@ public function getClientSideTranslationKeys(&$result)
         $result[] = 'TagManager_TagDescriptionHelp';
         $result[] = 'TagManager_TriggerDescriptionHelp';
         $result[] = 'TagManager_VariableDescriptionHelp';
+        $result[] = 'TagManager_GettingStarted';
+        $result[] = 'CorePluginsAdmin_WhatIsTagManager';
+        $result[] = 'TagManager_GettingStartedWhatIsIntro';
+        $result[] = 'TagManager_GettingStartedAnalyticsTracking';
+        $result[] = 'TagManager_GettingStartedConversionTracking';
+        $result[] = 'TagManager_GettingStartedNewsletterSignups';
+        $result[] = 'TagManager_GettingStartedExitActions';
+        $result[] = 'TagManager_GettingStartedRemarketing';
+        $result[] = 'TagManager_GettingStartedSocialWidgets';
+        $result[] = 'TagManager_GettingStartedAffiliates';
+        $result[] = 'TagManager_GettingStartedAds';
+        $result[] = 'TagManager_GettingStartedAndMore';
+        $result[] = 'TagManager_GettingStartedMainComponents';
+        $result[] = 'TagManager_GettingStartedTagComponent';
+        $result[] = 'TagManager_GettingStartedTriggerComponent';
+        $result[] = 'TagManager_GettingStartedVariableComponent';
+        $result[] = 'TagManager_GettingStartedWhyDoINeed';
+        $result[] = 'TagManager_GettingStartedWhyMakesLifeEasier';
+        $result[] = 'TagManager_GettingStartedWhyThirdPartySnippets';
+        $result[] = 'TagManager_GettingStartedWhyAccuracyPerformance';
+        $result[] = 'TagManager_GettingStartedHowDoI';
+        $result[] = 'TagManager_GettingStartedHowCreateContainer';
+        $result[] = 'TagManager_GettingStartedHowCopyCode';
+        $result[] = 'TagManager_GettingStartedHowAddTagsToContainer';
+        $result[] = 'TagManager_GettingStartedWhatIfUnsupported';
+        $result[] = 'TagManager_GettingStartedCustomTags';
+        $result[] = 'TagManager_GettingStartedContributeTags';
+        $result[] = 'TagManager_CreateNewVersionNow';
+        $result[] = 'TagManager_TagManager';
+        $result[] = 'TagManager_TagManagerTrackingInfo';
     }
 
     public function getStylesheetFiles(&$stylesheets)
@@ -609,5 +643,4 @@ public function onSiteDeleted($idSite)
         }
         $dao->deleteContainersForSite($idSite, $deletedDate);
     }
-
 }

Template/BaseTemplate.php

@@ -27,21 +27,6 @@ abstract class BaseTemplate
 
     protected $templateType = '';
 
-    /**
-     * @deprecated Use self::FIELD_VARIABLE_COMPONENT instead.
-     */
-    const FIELD_TEMPLATE_VARIABLE = 'plugins/TagManager/angularjs/form-field/field-variable-template.html';
-
-    /**
-     * @deprecated Use self::FIELD_TEXTAREA_VARIABLE_COMPONENT instead.
-     */
-    const FIELD_TEMPLATE_TEXTAREA_VARIABLE = 'plugins/TagManager/angularjs/form-field/field-textarea-variable-template.html';
-
-    /**
-     * @deprecated Use self::FIELD_VARIABLE_TYPE_COMPONENT instead.
-     */
-    const FIELD_TEMPLATE_VARIABLE_TYPE = 'plugins/TagManager/angularjs/form-field/field-variabletype-template.html';
-
     const FIELD_TEXTAREA_VARIABLE_COMPONENT = ['plugin' => 'TagManager', 'name' => 'FieldTextareaVariable'];
     const FIELD_VARIABLE_COMPONENT = ['plugin' => 'TagManager', 'name' => 'FieldVariableTemplate'];
     const FIELD_VARIABLE_TYPE_COMPONENT = ['plugin' => 'TagManager', 'name' => 'FieldVariableTypeTemplate'];

javascripts/tagmanagerHelper.js

@@ -1,9 +1,10 @@
 (function ($) {
     var tagManagerHelper = {};
-    tagManagerHelper.editTrigger = function ($scope, idContainer, idContainerVersion, idTag, callback) {
+    tagManagerHelper.editTrigger = function (idContainer, idContainerVersion, idTag, callback) {
       var createVNode = Vue.createVNode;
       var createVueApp = CoreHome.createVueApp;
-      var TriggerEdit = TagManager.TriggerEdit;
+      var useExternalPluginComponent = CoreHome.useExternalPluginComponent;
+      var TriggerEdit = useExternalPluginComponent('TagManager', 'TriggerEdit');
 
       var template = $('<div class="tag-ui-confirm"><div></div><input role="no" type="button" value="'
         + _pk_translate('General_Cancel') +'"/></div>')
@@ -40,14 +41,14 @@
     };
 
     tagManagerHelper.createNewVersion = function () {
-        var piwikUrl = piwikHelper.getAngularDependency('piwikUrl');
-        var containerId = piwikUrl.getSearchParam('idContainer');
+        var containerId = CoreHome.MatomoUrl.parsed.value.idContainer;
         this.editVersion(null, containerId, 0, function () { window.location.reload(); });
     };
-    tagManagerHelper.editVersion = function ($scope, idContainer, idContainerVersion, callback) {
+    tagManagerHelper.editVersion = function (idContainer, idContainerVersion, callback) {
       var createVNode = Vue.createVNode;
       var createVueApp = CoreHome.createVueApp;
-      var VersionEdit = TagManager.VersionEdit;
+      var useExternalPluginComponent = CoreHome.useExternalPluginComponent;
+      var VersionEdit = useExternalPluginComponent('TagManager', 'VersionEdit');
 
       var template = $('<div class="tag-ui-confirm ui-confirm"><div></div><input role="no" type="button" value="'
         + _pk_translate('General_Cancel') +'"/></div>')
@@ -85,7 +86,8 @@
     tagManagerHelper.editVariable = function (ignored, idContainer, idContainerVersion, idVariable, callback, variableType) {
         var createVNode = Vue.createVNode;
         var createVueApp = CoreHome.createVueApp;
-        var VariableEdit = TagManager.VariableEdit;
+        var useExternalPluginComponent = CoreHome.useExternalPluginComponent;
+        var VariableEdit = useExternalPluginComponent('TagManager', 'VariableEdit');
 
         var template = $('<div class="tag-ui-confirm"><div></div><input role="no" type="button" value="'
           + _pk_translate('General_Cancel') +'"/></div>')
@@ -123,31 +125,39 @@
     };
 
     tagManagerHelper.selectVariable = function (callback) {
-        var $scope = piwikHelper.getAngularDependency('$rootScope');
-        var piwikUrl = piwikHelper.getAngularDependency('piwikUrl');
-        var containerId = piwikUrl.getSearchParam('idContainer');
+        var template = $('<div class="ui-confirm"><h2>Select a variable</h2><div></div><input role="no" type="button" value="' + _pk_translate('General_Cancel') +'"/></div>')
 
-        var childScope = $scope.$new(true, $scope);
-        var template = $('<div class="ui-confirm"><h2>Select a variable</h2><div piwik-variable-select id-container="idContainer" on-select-variable="onSelectVariable(variable)"></div><input role="no" type="button" value="' + _pk_translate('General_Cancel') +'"/></div>')
+        var createVNode = Vue.createVNode;
+        var createVueApp = CoreHome.createVueApp;
+        var VariableSelect = TagManager.VariableSelect;
+        var MatomoUrl = CoreHome.MatomoUrl;
+        var containerId = MatomoUrl.parsed.value.containerId;
 
-        var params = {
-            idContainer: containerId,
-            onSelectVariable: function (variable) {
+        var app = createVueApp({
+          render: function () {
+            return createVNode(VariableSelect, {
+              idContainer: containerId,
+              onSelectVariable: function (event) {
                 if ('function' === typeof callback) {
-                    callback(variable);
+                  callback(event.variable);
                 }
-                var modal = M.Modal.getInstance(template.parents('.modal.open'));
 
+                var modal = M.Modal.getInstance(template.parents('.modal.open'));
                 if (modal) {
-                    modal.close();
+                  modal.close();
                 }
-            }
-        };
-        piwikHelper.compileAngularComponents(template, {scope: childScope, params: params});
-        piwikHelper.modalConfirm(template, {}, {onCloseEnd: function () {
-            childScope.$destroy();
+              },
+            });
+          },
+        });
+        app.mount(template.children()[0]);
+
+        piwikHelper.modalConfirm(template, {}, {
+          onCloseEnd: function () {
+            app.unmount();
             template.empty();
-        }});
+          },
+        });
     };
     tagManagerHelper.insertTextSnippetAtElement = function(inputField, textToAdd) {
         if (!inputField || !textToAdd) {
@@ -173,7 +183,8 @@
     tagManagerHelper.showInstallCode = function (idContainer) {
       var createVNode = Vue.createVNode;
       var createVueApp = CoreHome.createVueApp;
-      var ManageInstallTagCode = TagManager.ManageInstallTagCode;
+      var useExternalPluginComponent = CoreHome.useExternalPluginComponent;
+      var ManageInstallTagCode = useExternalPluginComponent('TagManager', 'ManageInstallTagCode');
 
       var template = $('<div class="tag-ui-confirm" ui-confirm><div></div><input role="no" '
         + 'type="button" value="' + _pk_translate('General_Cancel') +'"/>')
@@ -199,18 +210,16 @@
         if (!idContainerVersion) {
             idContainerVersion = 0;
         }
-        var piwikApi = piwikHelper.getAngularDependency('piwikApi');
         var params = {method: 'TagManager.enablePreviewMode', idContainer: idContainer, idContainerVersion: idContainerVersion};
         piwikHelper.modalConfirm('<h2>' + _pk_translate('TagManager_EnablingPreviewPleaseWait') + '</h2>', {});
-        piwikApi.fetch(params).then(function () {
+        CoreHome.AjaxHelper.fetch(params).then(function () {
             window.location.reload();
         });
     };
     tagManagerHelper.disablePreviewMode = function (idContainer) {
-        var piwikApi = piwikHelper.getAngularDependency('piwikApi');
         var params = {method: 'TagManager.disablePreviewMode', idContainer: idContainer};
         piwikHelper.modalConfirm('<h2>' + _pk_translate('TagManager_DisablingPreviewPleaseWait') + '</h2>', {});
-        piwikApi.fetch(params).then(function () {
+        CoreHome.AjaxHelper.fetch(params).then(function () {
             tagManagerHelper.updateDebugSiteFlag(document.getElementById('previewDebugUrl').value, idContainer, -1);
             window.location.reload();
         });
@@ -265,10 +274,11 @@
         window.open(url + (url.indexOf('?') == -1 ? '?' : '&') + 'mtmPreviewMode=' + encodeURIComponent(idContainer) + '&mtmSetDebugFlag=' + encodeURIComponent(debugFlag), '_blank', 'noreferrer');
 
     };
-    tagManagerHelper.importVersion = function ($scope, idContainer) {
+    tagManagerHelper.importVersion = function (idContainer) {
         var createVNode = Vue.createVNode;
         var createVueApp = CoreHome.createVueApp;
-        var ImportVersion = TagManager.ImportVersion;
+        var useExternalPluginComponent = CoreHome.useExternalPluginComponent;
+        var ImportVersion = useExternalPluginComponent('TagManager', 'ImportVersion');
 
         var template = $('<div class="ui-confirm"><div></div><input role="no" type="button" value="'
           + _pk_translate('General_Cancel') +'"/></div>')

stylesheets/manageEdit.less

@@ -1,7 +1,7 @@
 .tagManagerManageSelect,
 .tagManagerManageEdit {
 
-  [matomo-multi-pair-field] {
+  .multiPairField {
     margin-right: -0.75rem;
 
     .form-group.row {

templates/dashboard.twig

@@ -3,7 +3,9 @@
 {% set title = 'Dashboard_Dashboard'|translate %}
 
 {% block content %}
-    <div piwik-container-dashboard id-container="{{ container.idcontainer }}">
-    </div>
+    <div
+        vue-entry="TagManager.ContainerDashboard"
+        id-container="{{ container.idcontainer|json_encode }}"
+    ></div>
 
 {% endblock %}