feat: add attachToDevTools prop to the <Application> component

pixijs · Jun 25, 2024 · fdeaea4 · fdeaea4
1 parent 3ad17ce
commit fdeaea4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,6 +1,9 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
     extends: ['@pixi/eslint-config'],
+    globals: {
+        globalThis: 'readonly',
+    },
     parserOptions: {
         project: './tsconfig.eslint.json',
         ecmaVersion: 2020,

diff --git a/src/components/Application.js b/src/components/Application.js
@@ -34,6 +34,7 @@ import { render } from '../render.js';
 
 /**
  * @typedef {object} BaseApplicationProps
+ * @property {boolean} [attachToDevTools] Whether this application chould be attached to the dev tools. NOTE: This should only be enabled on one application at a time.
  * @property {string} [className] CSS classes to be applied to the Pixi Application's canvas element.
  */
 
@@ -51,6 +52,7 @@ import { render } from '../render.js';
 export const ApplicationFunction = (props, forwardedRef) =>
 {
     const {
+        attachToDevTools,
         children,
         className,
         resizeTo,
@@ -101,6 +103,14 @@ export const ApplicationFunction = (props, forwardedRef) =>
         resizeTo,
     ]);
 
+    useEffect(() =>
+    {
+        if (attachToDevTools && applicationRef.current)
+        {
+            /** @type {*} */ (globalThis).__PIXI_APP__ = applicationRef.current;
+        }
+    }, [attachToDevTools]);
+
     return createElement('canvas', {
         ref: canvasRef,
         className,