From bb2d7dbed406c5eeabd8bafea482a8810e69dceb Mon Sep 17 00:00:00 2001
From: Alex Kanunnikov <lifeart92@gmail.com>
Date: Sat, 11 Jan 2025 18:08:20 +0300
Subject: [PATCH] improve inspector

---
 src/utils/inspector/ember-inspector.ts | 35 +++++++++++++++++++++++---
 src/utils/shared.ts                    |  3 +++
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/utils/inspector/ember-inspector.ts b/src/utils/inspector/ember-inspector.ts
index d54cd97f..70415061 100644
--- a/src/utils/inspector/ember-inspector.ts
+++ b/src/utils/inspector/ember-inspector.ts
@@ -1,12 +1,15 @@
 import * as backburner from 'backburner.js';
 import { getRoot } from '../dom';
-import { $_debug_args, $context, $nodes, CHILD, COMPONENT_ID_PROPERTY, getBounds, isArray, TREE } from '../shared';
+import { $_debug_args, $context, $nodes, CHILD, COMPONENT_ID_PROPERTY, getBounds, isArray, RENDERED_NODES_PROPERTY, TREE } from '../shared';
 import { Component } from '..';
 import { Cell, MergedCell, getCells, getMergedCells } from '../reactive';
 import { $args } from '../shared';
 import { inspect } from '@/utils/inspector';
 import { IfCondition } from '../control-flow/if';
 import { AsyncListComponent, SyncListComponent } from '../control-flow/list';
+import { attributes } from 'happy-dom/lib/PropertySymbol.js';
+import { template } from '@babel/core';
+import { NS_HTML } from '../namespaces';
 
 const genericProxy = new Proxy(
   {},
@@ -492,11 +495,37 @@ const EmberProxy: any = new Proxy(
             };
           }
 
-          const children = childs?.map((child) => componentToRenderTree(child)) ?? [];
-
+          const children = (childs?.map((child) => componentToRenderTree(child)) ?? []).filter(el => el !== null);
+          // @ts-expect-error
+          component[RENDERED_NODES_PROPERTY].forEach((node, index) => {
+            // @ts-expect-error
+            if ('attributes' in node && node.namespaceURI === NS_HTML) {
+              // children.push({
+              //   id: `${component[COMPONENT_ID_PROPERTY]}-${index}`,
+              //   type: 'html-element',
+              //   instance: node,
+              //   // @ts-expect-error
+              //   name: node.tagName.toLowerCase(),
+              //   children: [],
+              //   template: null,
+              //   args: {
+              //     named: {},
+              //     positional: [],
+              //   },
+              //   bounds: {
+              //     firstNode: node,
+              //     lastNode: node,
+              //     parentElement: node.parentElement,
+              //   }
+              // })
+            }
+          });
           if (componentName.startsWith('UnstableChildWrapper') && children.length === 1) {
             return children[0];
           }
+          if (componentName.startsWith('SVGProvider')) {
+            return null;
+          }
           let allArgs = function () {
             if ($_debug_args in component) {
               return component[$_debug_args] ?? {};
diff --git a/src/utils/shared.ts b/src/utils/shared.ts
index 3e81a1d1..fcb125a9 100644
--- a/src/utils/shared.ts
+++ b/src/utils/shared.ts
@@ -79,6 +79,9 @@ if (!import.meta.env.SSR) {
 }
 
 export function getBounds(ctx: Component<any>) {
+  if (ctx[RENDERED_NODES_PROPERTY].length) {
+    return ctx[RENDERED_NODES_PROPERTY].slice(0);
+  }
   return BOUNDS.get(ctx) ?? [];
 }
 export function setBounds(component: ComponentReturnType) {