Method logChange

lib/metro.js:223–223

(e)

            </div>
            <div class="time-travel-items">${r||"Nothing to show!"}</div>
        `,document.body.appendChild(e)}createToggleButton(){let e=document.createElement("button");e.id="model-dev-tools-toggle-button",e.textContent="\u{1F6E0}",e.title="Model DevTools",e.onclick=()=>this.togglePanel(),document.body.appendChild(e)}setupModelListeners(){this.model.store.on("change",e=>{this.logChange({type:"data-change",path:e.path,oldValue:e.oldValue,newValue:e.newValue,timestamp:Date.now()})}),this.model.store.on("*",(e,r)=>{e!=="change"&&e!=="compute"&&e!=="arrayChange"&&this.logChange({type:"store-event",event:e,data:r,timestamp:Date.now()})}),this.model.on("*",(e,r)=>{e!=="change"&&e!=="compute"&&this.logChange({type:"model-event",event:e,data:r,timestamp:Date.now()})}),this.model.store.on("compute",e=>{this.logChange({type:"computed-update",property:e.key,dependencies:Array.from(e.dependencies),newValue:e.value,timestamp:Date.now()})}),this.model.store.on("arrayChange",e=>{this.logChange({type:"array-operation",path:e.path,method:e.method,args:e.args,oldValue:e.oldValue,newValue:e.newValue,timestamp:Date.now()})})}logChange(e){this.options.enabled&&(this.options.timeTravel&&this.saveSnapshot(e),this.updateDisplay())}saveSnapshot(e){let r={...e,state:JSON.parse(JSON.stringify(this.model.data)),computed:this.getComputedValues()};this.history=this.history.slice(0,this.currentIndex+1),this.history.push(r),this.currentIndex++,this.history.length>this.options.maxSnapshots&&(this.history.shift(),this.currentIndex--)}updateDisplay(){let e=document.getElementById("model-devtools-content");if(!e)return;let r=i=>{if(i===void 0)return"undefined";if(i===null)return"null";try{return Array.isArray(i)?`Array(${i.length}) ${JSON.stringify(i,null,2)}`:JSON.stringify(i,null,2)}catch{return String(i)}},l=this.getRecentChanges(),t="";for(let i of l){let s;try{let c={...i,timestamp:new Date(i.timestamp).toLocaleTimeString()};s=JSON.stringify(c,null,2)}catch(c){s=`Error formatting change: ${c.message}`}t+=`
            <div style="border-bottom: 1px solid #444; padding-bottom: 8px; overflow-x: auto">
                <pre>${s}</pre>
            </div>