chore: Extend node struct to include structured datas (props, signals,

store, owner...)

Author: mirkobrombin

cmd/rfw/plugins/devtools/devtools.js

@@ -427,14 +427,28 @@ function selectNode(n) {
   if (!detailTitle || !detailKind || !detailKV) return;
   detailTitle.textContent = n.name;
   detailKind.textContent = n.kind;
-  detailKV.innerHTML = `
-    <b>Path</b><div>${n.path || ""}</div>
-    <b>Props</b><div>${escapeHTML(JSON.stringify(n.props || {}))}</div>
-    <b>Signals</b><div>${escapeHTML(JSON.stringify(n.signals || {}))}</div>
-    <b>Render time</b><div>${(n.time || 0).toFixed(2)} ms</div>
-    <b>Updates</b><div>${n.updates || 0}</div>
-    <b>Owner</b><div>${n.owner || ""}</div>
-  `;
+  const rows = [];
+  rows.push(renderRow("Path", n.path || ""));
+  rows.push(renderRow("Render time", `${(n.time || 0).toFixed(2)} ms`));
+  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)
+    rows.push(renderJSONRow("Slots", n.slots));
+  if (n.signals && Object.keys(n.signals).length)
+    rows.push(renderJSONRow("Signals", n.signals));
+  if (n.store) {
+    const storeLabel = [n.store.module, n.store.name]
+      .filter(Boolean)
+      .join("/") || "-";
+    rows.push(renderRow("Store", storeLabel));
+    if (n.store.state && Object.keys(n.store.state).length) {
+      rows.push(renderJSONRow("Store state", n.store.state));
+    }
+  }
+  detailKV.innerHTML = rows.join("") || renderRow("Info", "No metadata available");
 }
 
 function escapeHTML(s) {
@@ -447,6 +461,24 @@ function escapeHTML(s) {
   );
 }
 
+function formatJSON(value) {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch (err) {
+    return String(value);
+  }
+}
+
+function renderRow(label, value, isMono = false) {
+  const content = escapeHTML(value == null ? "" : value);
+  const cls = isMono ? " class=\"mono\" style=\"white-space:pre-wrap\"" : "";
+  return `<b>${escapeHTML(label)}</b><div${cls}>${content}</div>`;
+}
+
+function renderJSONRow(label, value) {
+  return renderRow(label, formatJSON(value), true);
+}
+
 $("#treeFilter")?.addEventListener("input", (e) => {
   const q = e.target.value.trim().toLowerCase();
   const nodes = $$(".node", treeContainer);

docs/articles/api/dom.md

@@ -32,4 +32,5 @@ Low level DOM helpers used by the framework. Most applications interact with the
 | `BindSignalInputs(id, el)` | Binds inputs to local `@signal` directives. |
 | `(Element).On(event, handler)` | Attaches an event listener and returns a stop function. |
 | `(Element).OnClick(handler)` | Convenience wrapper for click events. |
+| `SnapshotComponentSignals(id)` | Copy of signals registered for a component. |
 

docs/articles/api/state.md

@@ -13,6 +13,9 @@ Centralized reactive data stores.
 | `Map2(store, key, depA, depB, fn)` | Map two keys into a derived value. |
 | `RegisterWatcher(w)` | Run a callback after changes and return a cleanup function. |
 | `StoreManager.Snapshot()` | Deep copy of all stores and their current state. |
+| `(Store).Module()` | Current module namespace for the store. |
+| `(Store).Name()` | Store identifier within its module. |
+| `(Store).Snapshot()` | Copy of the store's current key/value state. |
 | `StoreManager.UnregisterStore(module, name)` | Remove a store from the manager. |
 | `WithHistory(limit)` | Enable mutation history for `Undo`/`Redo` up to `limit` steps. |
 | `Undo()` | Revert the last mutation when history is enabled. |

v1/devtools/tree.go

@@ -6,12 +6,25 @@ import (
 )
 
 type node struct {
-	ID       int     `json:"id"`
-	Kind     string  `json:"kind"`
-	Name     string  `json:"name"`
-	Time     float64 `json:"time"`
-	Path     string  `json:"path"`
-	Children []*node `json:"children,omitempty"`
+	ID       int            `json:"id"`
+	Kind     string         `json:"kind"`
+	Name     string         `json:"name"`
+	Time     float64        `json:"time"`
+	Path     string         `json:"path"`
+	Owner    string         `json:"owner,omitempty"`
+	Host     string         `json:"hostComponent,omitempty"`
+	Updates  int            `json:"updates,omitempty"`
+	Props    map[string]any `json:"props,omitempty"`
+	Slots    map[string]any `json:"slots,omitempty"`
+	Signals  map[string]any `json:"signals,omitempty"`
+	Store    *storeSnapshot `json:"store,omitempty"`
+	Children []*node        `json:"children,omitempty"`
+}
+
+type storeSnapshot struct {
+	Module string         `json:"module"`
+	Name   string         `json:"name"`
+	State  map[string]any `json:"state,omitempty"`
 }
 
 var (
@@ -21,7 +34,7 @@ var (
 	nextID int
 )
 
-func addComponent(id, kind, name, parentID string) {
+func addComponent(id, kind, name, parentID string) *node {
 	mu.Lock()
 	defer mu.Unlock()
 	n := &node{ID: nextID, Kind: kind, Name: name, Path: "/" + name}
@@ -30,11 +43,13 @@ func addComponent(id, kind, name, parentID string) {
 	if parentID != "" {
 		if p, ok := nodes[parentID]; ok {
 			n.Path = p.Path + "/" + name
+			n.Owner = p.Name
 			p.Children = append(p.Children, n)
-			return
+			return n
 		}
 	}
 	roots = append(roots, n)
+	return n
 }
 
 func removeComponent(id string) {