Fix: crash when reading label and pixi properties (#26)

* Feat: add copy node to clipboard

* Fix: crash when reading label and pixi properties

* undo

README.md

@@ -50,6 +50,7 @@ initDevtools({
   app,
 });
 ```
+
 This package will automatically import `pixi.js` dynamically if you do not provide `pixi` in the configuration.
 
 ### Optional Configuration

packages/devtool-chrome/src/inject/pixi.ts

@@ -203,12 +203,16 @@ class PixiWrapper {
     return this._version;
   }
 
+  public get majorVersion() {
+    return this.version.split('.')[0];
+  }
+
   /**
    * Checks if PixiJS is active.
    * @returns A message indicating if PixiJS is active or not.
    */
   public get isPixiActive() {
-    return this.app || this.stage || this.renderer ? DevtoolMessage.active : DevtoolMessage.inactive;
+    return this.app || (this.stage && this.renderer) ? DevtoolMessage.active : DevtoolMessage.inactive;
   }
 
   public update() {
@@ -238,8 +242,8 @@ class PixiWrapper {
             this.tree.update(container);
           },
           test: (container) => {
-            if(container.__devtoolIgnore) return false;
-            if(container.__devtoolIgnoreChildren) return 'children';
+            if (container.__devtoolIgnore) return false;
+            if (container.__devtoolIgnoreChildren) return 'children';
             return true;
           },
         });
@@ -251,8 +255,12 @@ class PixiWrapper {
       this.properties.complete();
       this.overlay.complete();
 
-      // post the state to the devtools
-      window.postMessage({ method: DevtoolMessage.stateUpdate, data: JSON.stringify(this.state) }, '*');
+      try {
+        // post the state to the devtools
+        window.postMessage({ method: DevtoolMessage.stateUpdate, data: JSON.stringify(this.state) }, '*');
+      } catch (error) {
+        throw new Error(`[PixiJS Devtools] Error posting state update: ${(error as Error).message}`);
+      }
     }
   }
 }

packages/devtool-chrome/src/inject/scene/stats/stats.ts

@@ -48,7 +48,7 @@ export class NodeTracker {
   }
 
   private get plugins() {
-    return [totalNodesPlugin, ...(this._devtool.devtools!.plugins?.stats ?? []), defaultPlugin];
+    return [totalNodesPlugin, ...(this._devtool.devtools?.plugins?.stats ?? []), defaultPlugin];
   }
   public init() {
     // loop through all plugins and get the keys and set to 0

packages/devtool-chrome/src/inject/scene/tree/properties.ts

@@ -30,7 +30,7 @@ export class Properties {
   }
 
   public init() {
-    this._plugins = [...(this._devtool.devtools!.plugins?.properties ?? []), ...this.defaultPlugins];
+    this._plugins = [...(this._devtool.devtools?.plugins?.properties ?? []), ...this.defaultPlugins];
   }
 
   public setValue(prop: string, value: any) {

packages/devtool-chrome/src/inject/scene/tree/tree.ts

@@ -92,7 +92,7 @@ export class Tree {
 
   private _getName(container: Container, type: PixiNodeType) {
     const stage = this._devtool.stage;
-    const name = container.label ?? container.name;
+    const name = this._devtool.majorVersion === '8' ? container.label : container.name;
     const nameIsType = name === type;
     let fullName: string;
     let suffix: string;

packages/devtool-chrome/src/inject/utils/getPixiType.ts

@@ -7,29 +7,29 @@ export function getPixiType(container: Container): PixiNodeType {
 
   if (!pixi) return 'Unknown';
 
-  if (container instanceof pixi.BitmapText) {
+  if (pixi.BitmapText && container instanceof pixi.BitmapText) {
     return 'BitmapText';
-  } else if (container instanceof pixi.HTMLText) {
+  } else if (pixi.HTMLText && container instanceof pixi.HTMLText) {
     return 'HTMLText';
-  } else if (container instanceof pixi.Text) {
+  } else if (pixi.Text && container instanceof pixi.Text) {
     return 'Text';
-  } else if (container instanceof pixi.Mesh) {
+  } else if (pixi.Mesh && container instanceof pixi.Mesh) {
     return 'Mesh';
-  } else if (container instanceof pixi.Graphics) {
+  } else if (pixi.Graphics && container instanceof pixi.Graphics) {
     return 'Graphics';
-  } else if (container instanceof pixi.AnimatedSprite) {
+  } else if (pixi.AnimatedSprite && container instanceof pixi.AnimatedSprite) {
     return 'AnimatedSprite';
   } else if (
     // in v7 NineSliceSprite does not exist
     (pixi.NineSliceSprite && container instanceof pixi.NineSliceSprite) ||
-    container instanceof pixi.NineSlicePlane
+    (pixi.NineSlicePlane && container instanceof pixi.NineSlicePlane)
   ) {
     return 'NineSliceSprite';
-  } else if (container instanceof pixi.TilingSprite) {
+  } else if (pixi.TilingSprite && container instanceof pixi.TilingSprite) {
     return 'TilingSprite';
-  } else if (container instanceof pixi.Sprite) {
+  } else if (pixi.Sprite && container instanceof pixi.Sprite) {
     return 'Sprite';
-  } else if (container instanceof pixi.Container) {
+  } else if (pixi.Container && container instanceof pixi.Container) {
     return 'Container';
   }
 

packages/devtool-chrome/src/inject/utils/loop.ts

@@ -2,7 +2,7 @@ import type { Container } from 'pixi.js';
 
 interface LoopOptions {
   loop: (container: Container, parent: Container) => void;
-  test?: (container: Container, parent: Container) => boolean | 'children'
+  test?: (container: Container, parent: Container) => boolean | 'children';
   container: Container;
 }
 
@@ -21,7 +21,6 @@ function loopRecursive(container: Container, opts: Omit<LoopOptions, 'container'
     return;
   }
 
-
   loop(container, container.parent);
 
   if (container.children.length === 0 || testResult === 'children') {

packages/frontend/src/globals.css

@@ -163,7 +163,6 @@ h6 {
   background: rgba(79, 111, 127, 0.05);
 }
 
-
 [role='treeitem'] {
   color: white;
   cursor: pointer;

packages/frontend/src/lib/utils.ts

@@ -52,12 +52,12 @@ export function formatCamelCase(string: string) {
 export function copyToClipboard(text: string) {
   // @TODO navigator.clipboard is buggy in extensions
   if (typeof document === 'undefined') {
-    return
+    return;
   }
-  const dummyTextArea = document.createElement('textarea')
-  dummyTextArea.textContent = text
-  document.body.appendChild(dummyTextArea)
-  dummyTextArea.select()
-  document.execCommand('copy')
-  document.body.removeChild(dummyTextArea)
+  const dummyTextArea = document.createElement('textarea');
+  dummyTextArea.textContent = text;
+  document.body.appendChild(dummyTextArea);
+  dummyTextArea.select();
+  document.execCommand('copy');
+  document.body.removeChild(dummyTextArea);
 }

packages/frontend/src/pages/scene/scene-section/Properties.tsx

@@ -58,7 +58,7 @@ const Panel: React.FC<PanelProps> = ({ children, onSearch, onCopy }) => {
               variant="ghost"
               size="icon"
               className="hover:border-primary h-8 rounded-none hover:border-b-2"
-              onClick={()=> onCopy?.()}
+              onClick={() => onCopy?.()}
             >
               <CopyIcon className="dark:fill-white" />
             </Button>

packages/frontend/src/pages/scene/scene-section/tree/simple-tree.tsx

@@ -63,7 +63,7 @@ export function useSimpleTree<T extends SceneGraphEntry>(bridge: BridgeFn, initi
 
   const onSelect = (nodes: NodeApi[]) => {
     const node = nodes[0];
-    if(!node) return;
+    if (!node) return;
     bridge(
       `window.__PIXI_DEVTOOLS_WRAPPER__?.tree.setSelected(${node ? JSON.stringify(node.data.metadata.uid) : null})`,
     );

tsconfig.json

@@ -27,7 +27,7 @@
   "ts-node": {
     "files": true,
     "compilerOptions": {
-      "esModuleInterop": true,
+      "esModuleInterop": true
     },
     "transpileOnly": true
   }