@json-render/devtools 0.18.0 → 0.20.0

package/dist/index.mjs

@@ -1761,21 +1761,22 @@ function mountSpecTab(root, ctx) {
         return;
       }
       const el2 = spec.elements[current];
-      const hasChildren = !!el2?.children?.length;
+      const childKeys = getChildKeys(el2);
+      const hasChildren = childKeys.length > 0;
       if (!hasChildren) return;
       if (!expanded.has(current)) {
         expanded.add(current);
         render();
         scrollSelectedIntoView();
       } else {
-        moveSelection(el2.children[0]);
+        moveSelection(childKeys[0]);
       }
       return;
     }
     if (key === "ArrowLeft") {
       if (!current) return;
       const el2 = spec.elements[current];
-      const hasChildren = !!el2?.children?.length;
+      const hasChildren = getChildKeys(el2).length > 0;
       if (hasChildren && expanded.has(current)) {
         expanded.delete(current);
         render();
@@ -1791,7 +1792,7 @@ function mountSpecTab(root, ctx) {
       return;
     }
     const el = spec.elements[current];
-    if (el?.children?.length) {
+    if (getChildKeys(el).length > 0) {
       toggleExpanded(current);
       scrollSelectedIntoView();
     }
@@ -1977,19 +1978,27 @@ function collectVisibleKeys(spec, expanded) {
   function walk(key) {
     list.push(key);
     const el = spec.elements[key];
-    if (!el?.children || el.children.length === 0) return;
+    const childKeys = getChildKeys(el);
+    if (childKeys.length === 0) return;
     if (!expanded.has(key)) return;
-    for (const child of el.children) walk(child);
+    for (const child of childKeys) walk(child);
   }
   walk(spec.root);
   return list;
 }
 function findParent(spec, key) {
   for (const [parentKey, el] of Object.entries(spec.elements)) {
-    if (el.children?.includes(key)) return parentKey;
+    if (getChildKeys(el).includes(key)) return parentKey;
   }
   return null;
 }
+function getChildKeys(element) {
+  if (!element) return [];
+  return [
+    ...element.children ?? [],
+    ...Object.values(element.slots ?? {}).flat()
+  ];
+}
 function collectIssues(spec) {
   const result = validateSpec(spec, { checkOrphans: true });
   const byKey = /* @__PURE__ */ new Map();
@@ -2009,8 +2018,7 @@ function findPath(spec, key) {
       return true;
     }
     const el = spec.elements[current];
-    if (!el?.children) return false;
-    for (const child of el.children) {
+    for (const child of getChildKeys(el)) {
       if (walk(child)) {
         path.push(current);
         return true;
@@ -2035,7 +2043,8 @@ function renderNode(spec, key, depth, expanded, selected, issues, ctx, onToggle,
       h("span", { className: "jr-tree-key" }, key)
     );
   }
-  const hasChildren = Array.isArray(el.children) && el.children.length > 0;
+  const childKeys = getChildKeys(el);
+  const hasChildren = childKeys.length > 0;
   const isExpanded = hasChildren && expanded.has(key);
   const isSelected = selected === key;
   const elementIssues = issues.byKey.get(key) ?? [];
@@ -2091,7 +2100,7 @@ function renderNode(spec, key, depth, expanded, selected, issues, ctx, onToggle,
   );
   const container = h("div", null, row);
   if (isExpanded && hasChildren) {
-    for (const childKey of el.children) {
+    for (const childKey of childKeys) {
       const childNode = renderNode(
         spec,
         childKey,
@@ -2137,7 +2146,7 @@ function renderDetail(container, spec, key, issues) {
     return;
   }
   const elIssues = issues.byKey.get(key) ?? [];
-  const children = el.children?.length ?? 0;
+  const children = getChildKeys(el).length;
   replaceChildren(
     container,
     h(