MDL-83658 core: Fix reactive debug tool logging

Fixed issue where the reactive debug panel does not log a transaction,
if the events fired are exactly the same as the previous ones.

lib/amd/build/local/reactive/debug.min.js

@@ -20,7 +20,7 @@ define("core/local/reactive/debug",["exports","core/local/reactive/reactive","co
    * @copyright  2021 Ferran Recio <ferran@moodle.com>
    * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
    */
-class Debug extends _reactive.default{setInitialState(stateData){super.setInitialState(stateData),_log.default.debug('Debug module "M.reactive" loaded.')}get list(){return JSON.parse(JSON.stringify(this.state.reactives))}registerNewInstance(instance){var _instance$name;let name=null!==(_instance$name=instance.name)&&void 0!==_instance$name?_instance$name:"instance".concat(this.state.reactives.length);name=name.replace(/\W/g,""),_log.default.debug('Registering new reactive instance "M.reactive.'.concat(name,'"')),reactiveInstances[name]=instance,reactiveDebuggers[name]=new DebugInstance(reactiveInstances[name]),this.dispatch("putInstance",name,instance);const refreshMethod=()=>{this.dispatch("putInstance",name,instance)};instance.target.addEventListener("readmode:on",refreshMethod),instance.target.addEventListener("readmode:off",refreshMethod),instance.target.addEventListener("registerComponent:success",refreshMethod),instance.target.addEventListener("transaction:end",refreshMethod);instance.target.addEventListener("transaction:start",(_ref=>{let{detail:detail}=_ref;const changes=null==detail?void 0:detail.changes;this.dispatch("lastTransaction",name,changes)}))}debug(name){return reactiveDebuggers[name]}}class Mutations{putInstance(stateManager,name,instance){const state=stateManager.state;stateManager.setReadOnly(!1),state.reactives.has(name)?(state.reactives.get(name).countcomponents=instance.components.length,state.reactives.get(name).readOnly=instance.stateManager.readonly,state.reactives.get(name).modified=(new Date).getTime()):state.reactives.add({id:name,countcomponents:instance.components.length,readOnly:instance.stateManager.readonly,lastChanges:[],modified:(new Date).getTime()}),stateManager.setReadOnly(!0)}lastTransaction(stateManager,name,changes){if(!changes||0===changes.length)return;const state=stateManager.state,lastChanges=["transaction:start"];changes.forEach((change=>{lastChanges.push(change.eventName)})),lastChanges.push("transaction:end"),stateManager.setReadOnly(!1),state.reactives.get(name).lastChanges=lastChanges,stateManager.setReadOnly(!0)}}
+class Debug extends _reactive.default{setInitialState(stateData){super.setInitialState(stateData),_log.default.debug('Debug module "M.reactive" loaded.')}get list(){return JSON.parse(JSON.stringify(this.state.reactives))}registerNewInstance(instance){var _instance$name;let name=null!==(_instance$name=instance.name)&&void 0!==_instance$name?_instance$name:"instance".concat(this.state.reactives.length);name=name.replace(/\W/g,""),_log.default.debug('Registering new reactive instance "M.reactive.'.concat(name,'"')),reactiveInstances[name]=instance,reactiveDebuggers[name]=new DebugInstance(reactiveInstances[name]),this.dispatch("putInstance",name,instance);const refreshMethod=()=>{this.dispatch("putInstance",name,instance)};instance.target.addEventListener("readmode:on",refreshMethod),instance.target.addEventListener("readmode:off",refreshMethod),instance.target.addEventListener("registerComponent:success",refreshMethod),instance.target.addEventListener("transaction:end",refreshMethod);instance.target.addEventListener("transaction:end",(_ref=>{let{detail:detail}=_ref;const changes=null==detail?void 0:detail.changes;this.dispatch("lastTransaction",name,changes)}))}debug(name){return reactiveDebuggers[name]}}class Mutations{putInstance(stateManager,name,instance){const state=stateManager.state;stateManager.setReadOnly(!1),state.reactives.has(name)?(state.reactives.get(name).countcomponents=instance.components.length,state.reactives.get(name).readOnly=instance.stateManager.readonly,state.reactives.get(name).modified=(new Date).getTime()):state.reactives.add({id:name,countcomponents:instance.components.length,readOnly:instance.stateManager.readonly,lastChanges:[],modified:(new Date).getTime()}),stateManager.setReadOnly(!0)}lastTransaction(stateManager,name,changes){if(!changes||0===changes.length)return;const state=stateManager.state,lastChanges=["transaction:start"];changes.forEach((change=>{lastChanges.push(change.eventName)})),lastChanges.push("transaction:end"),stateManager.setReadOnly(!1),state.reactives.get(name).lastChanges=[],state.reactives.get(name).lastChanges=lastChanges,stateManager.setReadOnly(!0)}}
 /**
    * Class used to debug a specific instance and manipulate the state from the JS console.
    *

lib/amd/src/local/reactive/debug.js

@@ -95,7 +95,7 @@ class Debug extends Reactive {
             const changes = detail?.changes;
             this.dispatch('lastTransaction', name, changes);
         };
-        instance.target.addEventListener('transaction:start', storeTransaction);
+        instance.target.addEventListener('transaction:end', storeTransaction);
     }
 
     /**
@@ -151,7 +151,7 @@ class Mutations {
      * Update the lastChanges attribute with a list of changes
      *
      * @param {StateManager} stateManager the debug reactive state
-     * @param {string} name tje instance name
+     * @param {string} name the instance name
      * @param {array} changes the list of changes
      */
     lastTransaction(stateManager, name, changes) {
@@ -170,6 +170,10 @@ class Mutations {
 
         stateManager.setReadOnly(false);
 
+        // Dirty hack to force the lastChanges:updated event to be dispatched.
+        state.reactives.get(name).lastChanges = [];
+
+        // Assign the actual value.
         state.reactives.get(name).lastChanges = lastChanges;
 
         stateManager.setReadOnly(true);

lib/amd/src/local/reactive/debugpanel.js

@@ -303,7 +303,7 @@ class DebugInstanceSubpanel extends BaseComponent {
     }
 
     /**
-     * Wtacher method to refresh the log panel.
+     * Watcher method to refresh the log panel.
      *
      * @param {object} args
      * @param {HTMLElement} args.element
@@ -311,10 +311,16 @@ class DebugInstanceSubpanel extends BaseComponent {
     _refreshLog({element}) {
         const list = element?.lastChanges ?? [];
 
-        const logContent = list.join("\n");
         // Append last log.
+
         const target = this.getElement(this.selectors.LOG);
-        target.value += `\n\n= Transaction =\n ${logContent}`;
+        if (target.value !== '') {
+            target.value += '\n\n';
+        }
+
+        const logContent = list.join("\n");
+
+        target.value += `= Transaction =\n${logContent}`;
         target.scrollTop = target.scrollHeight;
     }
 

lib/amd/src/local/reactive/statemanager.js

@@ -605,6 +605,7 @@ export default class StateManager {
 
         // List of the published events to prevent redundancies.
         let publishedEvents = new Set();
+        let transactionEvents = [];
 
         fieldChanges.forEach((event) => {
 
@@ -618,6 +619,7 @@ export default class StateManager {
                 }, this.target);
 
                 publishedEvents.add(eventkey);
+                transactionEvents.push(event);
             }
         });
 
@@ -626,6 +628,7 @@ export default class StateManager {
             action: 'transaction:end',
             state: this.state,
             element: null,
+            changes: transactionEvents,
         }, this.target);
     }
 }