From ae1a3fd4c1056e442fdcf8cbf3514a5a11b36cb3 Mon Sep 17 00:00:00 2001 From: Guilherme Simoes Date: Fri, 15 May 2026 18:27:28 +0100 Subject: [PATCH 1/4] Handle parent mutation --- src/main-api/Inspector.ts | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/main-api/Inspector.ts b/src/main-api/Inspector.ts index 6277212d..862334fc 100644 --- a/src/main-api/Inspector.ts +++ b/src/main-api/Inspector.ts @@ -1101,7 +1101,7 @@ export class Inspector { value: any, props: CoreNodeProps | CoreTextNodeProps, ) { - if (this.root === null || value === undefined || value === null) { + if (this.root === null || value === undefined) { return; } @@ -1109,17 +1109,18 @@ export class Inspector { * Special case for parent property */ if (property === 'parent') { - const parentId: number = value.id; - - // only way to detect if the parent is the root node - // if you are reading this and have a better way, please let me know - if (parentId === 1) { - this.root.appendChild(div); - return; + if (value) { + const parentId: number = value.id; + // only way to detect if the parent is the root node + // if you are reading this and have a better way, please let me know + if (parentId === 1) { + this.root.appendChild(div); + return; + } + value.div.appendChild(div); + } else { + div.parentNode?.removeChild(div); } - - const parent = document.getElementById(parentId.toString()); - parent?.appendChild(div); return; } From 5b712a9c0899a279261f268d05b6855ca74e1a80 Mon Sep 17 00:00:00 2001 From: Guilherme Simoes Date: Fri, 15 May 2026 18:30:47 +0100 Subject: [PATCH 2/4] Search up the entire proto tree --- src/main-api/Inspector.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/main-api/Inspector.ts b/src/main-api/Inspector.ts index 862334fc..89c7be3b 100644 --- a/src/main-api/Inspector.ts +++ b/src/main-api/Inspector.ts @@ -897,16 +897,16 @@ export class Inspector { }; // Define traps for each property in knownProperties knownProperties.forEach((property) => { - let originalProp = Object.getOwnPropertyDescriptor(node, property); + let proto: CoreNode | ObjectConstructor | null = node; + let originalProp: PropertyDescriptor | undefined | null = Object.getOwnPropertyDescriptor(proto, property); - if (originalProp === undefined) { - // Search the prototype chain for the property descriptor - const proto = Object.getPrototypeOf(node) as CoreNode | CoreTextNode; - originalProp = Object.getOwnPropertyDescriptor(proto, property); - } - - if (originalProp === undefined) { - return; + // Search the prototype chain for the property descriptor + while(originalProp === undefined) { + proto = Object.getPrototypeOf(proto) as ObjectConstructor; + if (proto === null) { + return; + } + originalProp = Object.getOwnPropertyDescriptor(proto, property); } if (property === 'text') { From 890906b9c92aad7c67037d743cb4597c5ce20ba2 Mon Sep 17 00:00:00 2001 From: Guilherme Simoes Date: Fri, 15 May 2026 18:06:09 +0100 Subject: [PATCH 3/4] Show component class name --- src/main-api/Inspector.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/main-api/Inspector.ts b/src/main-api/Inspector.ts index 89c7be3b..f3d03e8f 100644 --- a/src/main-api/Inspector.ts +++ b/src/main-api/Inspector.ts @@ -740,12 +740,13 @@ export class Inspector { } createDiv( - id: number, + node: CoreNode, properties: CoreNodeProps | CoreTextNodeProps, ): HTMLElement { const div = document.createElement('div'); div.style.position = 'absolute'; - div.id = id.toString(); + div.id = node.id.toString(); + div.setAttribute('type', node.constructor.name); // set initial properties for (const key in properties) { @@ -780,7 +781,7 @@ export class Inspector { } createNode(node: CoreNode): CoreNode { - const div = this.createDiv(node.id, node.props); + const div = this.createDiv(node, node.props); (div as HTMLElement & { node: CoreNode }).node = node; (node as CoreNode & { div: HTMLElement }).div = div; @@ -796,7 +797,7 @@ export class Inspector { // eslint-disable-next-line // @ts-ignore - textProps is a private property and keeping it that way // but we need it from the inspector to set the initial properties on the div element - const div = this.createDiv(node.id, node.textProps); + const div = this.createDiv(node, node.textProps); (div as HTMLElement & { node: CoreNode }).node = node; (node as CoreTextNode & { div: HTMLElement }).div = div; From 63671a717f80165065ce13bff38409d4e5c1f8d5 Mon Sep 17 00:00:00 2001 From: Guilherme Simoes Date: Tue, 19 May 2026 10:58:26 +0100 Subject: [PATCH 4/4] Refactor root node detection --- src/main-api/Inspector.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/main-api/Inspector.ts b/src/main-api/Inspector.ts index f3d03e8f..06749305 100644 --- a/src/main-api/Inspector.ts +++ b/src/main-api/Inspector.ts @@ -1111,14 +1111,12 @@ export class Inspector { */ if (property === 'parent') { if (value) { - const parentId: number = value.id; - // only way to detect if the parent is the root node - // if you are reading this and have a better way, please let me know - if (parentId === 1) { - this.root.appendChild(div); - return; + // detect if the parent is the root node + if (value.id === value.stage.root.id) { + this.root.appendChild(div); + } else { + value.div.appendChild(div); } - value.div.appendChild(div); } else { div.parentNode?.removeChild(div); }