chore: Add duration tracking in html_component.go

Author: mirkobrombin

cmd/rfw/plugins/devtools/devtools.js

@@ -52,7 +52,8 @@ const markup = `
 .node:hover{background:var(--tile-hover)}
 .node .kind{font-size:11px; color:var(--accent-2); padding:2px 6px; border:1px solid var(--border-2); border-radius:999px; background:var(--tile-bg)}
 .node .name{font-weight:600}
-.node .time{margin-left:auto; font-variant-numeric:tabular-nums; color:var(--rose-300)}
+.node .meta{margin-left:auto; display:flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; color:var(--rose-300)}
+.node .meta span{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; border:1px solid var(--tile-border); background:var(--tile-bg)}
 
 .rfw-detail{flex:1;background:var(--chip-bg);display:flex;flex-direction:column}
 .rfw-detail .rfw-subheader{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border)}
@@ -61,6 +62,10 @@ const markup = `
 .kv b{color:var(--rose-200)}
 
 .mono{font-variant-numeric:tabular-nums}
+.timeline{display:flex; flex-direction:column; gap:6px; font-variant-numeric:tabular-nums}
+.timeline-item{display:flex; align-items:center; gap:8px}
+.timeline-item .mono{background:var(--tile-bg); border:1px solid var(--tile-border); padding:2px 6px; border-radius:6px}
+.timeline-item .duration{opacity:.75}
 
 /* Network panel */
 .net-list{flex:1; overflow:auto; padding:8px}
@@ -402,10 +407,24 @@ function renderTree(list, root = true) {
     const el = document.createElement("div");
     el.className = "node";
     el.dataset.id = node.id;
+    const metrics = [];
+    if (typeof node.average === "number" && Number.isFinite(node.average)) {
+      metrics.push(`${node.average.toFixed(1)} ms avg`);
+    } else if (typeof node.time === "number" && Number.isFinite(node.time)) {
+      metrics.push(`${node.time.toFixed(1)} ms`);
+    }
+    if (typeof node.updates === "number" && node.updates > 0) {
+      metrics.push(`${node.updates}×`);
+    }
+    const meta = metrics.length
+      ? `<span class="meta">${metrics
+          .map((txt) => `<span>${escapeHTML(txt)}</span>`)
+          .join("")}</span>`
+      : "";
     el.innerHTML = `
-      <span class="kind">${node.kind}</span>
-      <span class="name">${node.name}</span>
-      <span class="time">${(node.time || 0).toFixed(1)} ms</span>
+      <span class="kind">${escapeHTML(node.kind || "")}</span>
+      <span class="name">${escapeHTML(node.name || "")}</span>
+      ${meta}
     `;
     el.addEventListener("click", () => selectNode(node));
     frag.appendChild(el);
@@ -429,10 +448,15 @@ function selectNode(n) {
   detailKind.textContent = n.kind;
   const rows = [];
   rows.push(renderRow("Path", n.path || ""));
-  rows.push(renderRow("Render time", `${(n.time || 0).toFixed(2)} ms`));
+  if (typeof n.updates === "number") rows.push(renderRow("Updates", String(n.updates)));
+  if (typeof n.average === "number" && Number.isFinite(n.average))
+    rows.push(renderRow("Average render", formatMs(n.average)));
+  if (typeof n.time === "number" && Number.isFinite(n.time))
+    rows.push(renderRow("Last render", formatMs(n.time)));
+  if (typeof n.total === "number" && Number.isFinite(n.total))
+    rows.push(renderRow("Total render", formatMs(n.total)));
   if (n.owner) rows.push(renderRow("Owner", n.owner));
   if (n.hostComponent) rows.push(renderRow("Host component", n.hostComponent));
-  if (typeof n.updates === "number") rows.push(renderRow("Updates", String(n.updates)));
   if (n.props && Object.keys(n.props).length)
     rows.push(renderJSONRow("Props", n.props));
   if (n.slots && Object.keys(n.slots).length)
@@ -448,6 +472,8 @@ function selectNode(n) {
       rows.push(renderJSONRow("Store state", n.store.state));
     }
   }
+  if (Array.isArray(n.timeline) && n.timeline.length)
+    rows.push(renderTimelineRow("Timeline", n.timeline));
   detailKV.innerHTML = rows.join("") || renderRow("Info", "No metadata available");
 }
 
@@ -461,6 +487,28 @@ function escapeHTML(s) {
   );
 }
 
+function formatMs(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return "0.00 ms";
+  const digits = value >= 100 ? 0 : 2;
+  return `${value.toFixed(digits)} ms`;
+}
+
+function renderTimelineRow(label, events) {
+  const items = events
+    .map((ev) => {
+      const offset = formatMs(ev.at ?? 0);
+      const duration =
+        typeof ev.duration === "number" && ev.duration > 0
+          ? `<span class="mono duration">${formatMs(ev.duration)}</span>`
+          : "";
+      return `<div class="timeline-item"><span class="mono">${offset}</span><span>${escapeHTML(
+        ev.kind || "",
+      )}</span>${duration}</div>`;
+    })
+    .join("");
+  return `<b>${escapeHTML(label)}</b><div class="timeline">${items}</div>`;
+}
+
 function formatJSON(value) {
   try {
     return JSON.stringify(value, null, 2);
@@ -501,19 +549,45 @@ function countNodes(list) {
   return total;
 }
 
+function aggregateRenderAverage(list) {
+  let total = 0;
+  let count = 0;
+  const walk = (nodes) => {
+    nodes.forEach((n) => {
+      if (
+        typeof n.total === "number" &&
+        typeof n.updates === "number" &&
+        n.updates > 0
+      ) {
+        total += n.total;
+        count += n.updates;
+      }
+      if (Array.isArray(n.children) && n.children.length) walk(n.children);
+    });
+  };
+  walk(list);
+  if (!count) return null;
+  return total / count;
+}
+
 function refreshTree() {
   try {
     if (typeof globalThis.RFW_DEVTOOLS_TREE === "function") {
       const data = JSON.parse(globalThis.RFW_DEVTOOLS_TREE());
       renderTree(data);
       const k = $("#kpiNodes");
       if (k) k.textContent = String(countNodes(data));
+      const avg = aggregateRenderAverage(data);
+      const r = $("#kpiRender");
+      if (r) r.textContent = avg == null ? "n/a" : formatMs(avg);
       return;
     }
   } catch {}
   if (treeContainer) treeContainer.textContent = "";
   const k = $("#kpiNodes");
   if (k) k.textContent = "0";
+  const r = $("#kpiRender");
+  if (r) r.textContent = "n/a";
 }
 
 let fpsSample = 0,

v1/core/html_component.go

@@ -13,6 +13,7 @@ import (
 	"sort"
 	"strings"
 	"sync"
+	"time"
 
 	"github.com/rfwlab/rfw/v1/dom"
 	hostclient "github.com/rfwlab/rfw/v1/hostclient"
@@ -58,6 +59,27 @@ type HTMLComponent struct {
 	provides          map[string]any
 	cache             map[string]string
 	lastCacheKey      string
+	metricsMu         sync.Mutex
+	renderCount       int
+	totalRender       time.Duration
+	lastRender        time.Duration
+	timeline          []ComponentTimelineEntry
+}
+
+// ComponentStats contains aggregated render metrics for an HTML component.
+type ComponentStats struct {
+	RenderCount   int
+	TotalRender   time.Duration
+	LastRender    time.Duration
+	AverageRender time.Duration
+	Timeline      []ComponentTimelineEntry
+}
+
+// ComponentTimelineEntry represents a point-in-time event collected for diagnostics.
+type ComponentTimelineEntry struct {
+	Kind      string
+	Timestamp time.Time
+	Duration  time.Duration
 }
 
 func NewHTMLComponent(name string, templateFs []byte, props map[string]any) *HTMLComponent {
@@ -98,10 +120,13 @@ func (c *HTMLComponent) Init(store *state.Store) {
 }
 
 func (c *HTMLComponent) Render() (renderedTemplate string) {
+	start := time.Now()
+	defer c.recordRender(time.Since(start))
 	key := c.cacheKey()
 	if c.cache != nil {
 		if val, ok := c.cache[key]; ok {
-			return val
+			renderedTemplate = val
+			return
 		}
 		if c.lastCacheKey != "" && c.lastCacheKey != key {
 			delete(c.cache, c.lastCacheKey)
@@ -187,6 +212,55 @@ func (c *HTMLComponent) Render() (renderedTemplate string) {
 	return renderedTemplate
 }
 
+const componentTimelineLimit = 64
+
+func (c *HTMLComponent) recordRender(duration time.Duration) {
+	if c == nil {
+		return
+	}
+	c.metricsMu.Lock()
+	c.renderCount++
+	c.totalRender += duration
+	c.lastRender = duration
+	c.appendTimelineLocked(ComponentTimelineEntry{
+		Kind:      "render",
+		Timestamp: time.Now(),
+		Duration:  duration,
+	})
+	c.metricsMu.Unlock()
+}
+
+func (c *HTMLComponent) appendTimelineLocked(entry ComponentTimelineEntry) {
+	if entry.Kind == "" {
+		return
+	}
+	if c.timeline == nil {
+		c.timeline = make([]ComponentTimelineEntry, 0, 8)
+	}
+	c.timeline = append(c.timeline, entry)
+	if len(c.timeline) > componentTimelineLimit {
+		c.timeline = append([]ComponentTimelineEntry(nil), c.timeline[len(c.timeline)-componentTimelineLimit:]...)
+	}
+}
+
+// Stats returns a snapshot of the component's render metrics.
+func (c *HTMLComponent) Stats() ComponentStats {
+	c.metricsMu.Lock()
+	defer c.metricsMu.Unlock()
+	stats := ComponentStats{
+		RenderCount: c.renderCount,
+		TotalRender: c.totalRender,
+		LastRender:  c.lastRender,
+	}
+	if c.renderCount > 0 {
+		stats.AverageRender = c.totalRender / time.Duration(c.renderCount)
+	}
+	if len(c.timeline) > 0 {
+		stats.Timeline = append(stats.Timeline, c.timeline...)
+	}
+	return stats
+}
+
 var (
 	inlineMinifierOnce sync.Once
 	inlineMinifier     *minify.M

v1/core/html_component_stats_stub.go

@@ -0,0 +1,24 @@
+//go:build !js || !wasm
+
+package core
+
+import "time"
+
+// ComponentStats is a stub for non-wasm builds.
+type ComponentStats struct {
+	RenderCount   int
+	TotalRender   time.Duration
+	LastRender    time.Duration
+	AverageRender time.Duration
+	Timeline      []ComponentTimelineEntry
+}
+
+// ComponentTimelineEntry is a stub for non-wasm builds.
+type ComponentTimelineEntry struct {
+	Kind      string
+	Timestamp time.Time
+	Duration  time.Duration
+}
+
+// Stats returns zeroed metrics on non-wasm builds.
+func (c *HTMLComponent) Stats() ComponentStats { return ComponentStats{} }

v1/devtools/devtools_js.go

@@ -24,6 +24,7 @@ var (
 func (plugin) Build(json.RawMessage) error { return nil }
 func (plugin) Install(a *core.App) {
 	a.RegisterLifecycle(func(c core.Component) {
+		appendLifecycle(c.GetID(), "mount", time.Now())
 		if root == nil {
 			root = c
 		}
@@ -34,6 +35,7 @@ func (plugin) Install(a *core.App) {
 			}
 		}
 	}, func(c core.Component) {
+		appendLifecycle(c.GetID(), "unmount", time.Now())
 		if root == c {
 			resetTree()
 			root = nil
@@ -43,6 +45,7 @@ func (plugin) Install(a *core.App) {
 				fn.Invoke()
 			}
 		}
+		dropLifecycle(c.GetID())
 	})
 	a.RegisterRouter(func(_ string) {
 		if root != nil {

v1/devtools/timeline.go

@@ -0,0 +1,61 @@
+package devtools
+
+import (
+	"sort"
+	"sync"
+	"time"
+)
+
+type lifecycleEvent struct {
+	Kind string
+	At   time.Time
+}
+
+const lifecycleLimit = 64
+
+var (
+	lifecycleMu          sync.RWMutex
+	lifecycleByComponent = map[string][]lifecycleEvent{}
+)
+
+func appendLifecycle(id, kind string, at time.Time) {
+	if id == "" || kind == "" {
+		return
+	}
+	lifecycleMu.Lock()
+	defer lifecycleMu.Unlock()
+	entry := lifecycleEvent{Kind: kind, At: at}
+	list := append(lifecycleByComponent[id], entry)
+	if len(list) > lifecycleLimit {
+		list = append([]lifecycleEvent(nil), list[len(list)-lifecycleLimit:]...)
+	}
+	lifecycleByComponent[id] = list
+}
+
+func dropLifecycle(id string) {
+	if id == "" {
+		return
+	}
+	lifecycleMu.Lock()
+	delete(lifecycleByComponent, id)
+	lifecycleMu.Unlock()
+}
+
+func snapshotLifecycle(id string) []lifecycleEvent {
+	lifecycleMu.RLock()
+	list := lifecycleByComponent[id]
+	lifecycleMu.RUnlock()
+	if len(list) == 0 {
+		return nil
+	}
+	out := make([]lifecycleEvent, len(list))
+	copy(out, list)
+	sort.Slice(out, func(i, j int) bool { return out[i].At.Before(out[j].At) })
+	return out
+}
+
+func resetLifecycles() {
+	lifecycleMu.Lock()
+	lifecycleByComponent = map[string][]lifecycleEvent{}
+	lifecycleMu.Unlock()
+}