Avoid instanceof

src/components/Application.tsx

@@ -19,6 +19,7 @@
 import { roots } from '../core/roots';
 import { processUnmountQueue } from '../helpers/processUnmountQueue';
 import { queueForUnmount } from '../helpers/queueForUnmount';
+import { isHTMLElement } from '../helpers/typeChecks';
 import { unqueueForUnmount } from '../helpers/unqueueForUnmount';
 import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
 import { type ApplicationProps } from '../typedefs/ApplicationProps';
@@ -68,7 +69,7 @@
             {
                 if ('current' in resizeTo)
                 {
-                    if (resizeTo.current instanceof HTMLElement)
+                    if (isHTMLElement(resizeTo.current))
                     {
                         application.resizeTo = resizeTo.current;
                     }
@@ -93,7 +94,7 @@
         applicationRef.current = application;
         updateResizeTo();
         onInit?.(application);
     }, [onInit]);
 
     useIsomorphicLayoutEffect(() =>
     {
@@ -143,7 +144,7 @@
             // @ts-expect-error The value of `children` is fine, but `PixiReactChildNode` doesn't strictly adhere to the `ReactNode` structure.
             root.render((<Bridge>{children}</Bridge>), applicationProps);
         }
     }, [
         applicationProps,
         children,
         handleInit,
@@ -153,7 +154,7 @@
     useIsomorphicLayoutEffect(() =>
     {
         updateResizeTo();
     }, [resizeTo]);
 
     useIsomorphicLayoutEffect(() =>
     {

src/core/createRoot.tsx

@@ -6,6 +6,7 @@ import { ContextProvider } from '../components/Context';
 import { isReadOnlyProperty } from '../helpers/isReadOnlyProperty';
 import { log } from '../helpers/log';
 import { prepareInstance } from '../helpers/prepareInstance';
+import { isHTMLCanvasElement } from '../helpers/typeChecks';
 import { type ApplicationState } from '../typedefs/ApplicationState';
 import { type CreateRootOptions } from '../typedefs/CreateRootOptions';
 import { type HostConfig } from '../typedefs/HostConfig';
@@ -58,7 +59,7 @@ export function createRoot(
     {
         let canvas;
 
-        if (target instanceof HTMLCanvasElement)
+        if (isHTMLCanvasElement(target))
         {
             canvas = target;
         }

src/helpers/appendChild.ts

@@ -1,10 +1,7 @@
-import {
-    Container,
-    Filter,
-} from 'pixi.js';
 import { type HostConfig } from '../typedefs/HostConfig';
 import { attach } from './attach';
 import { log } from './log';
+import { isContainer, isFilter } from './typeChecks';
 
 /** Adds elements to our application. */
 export function appendChild(
@@ -19,11 +16,11 @@ export function appendChild(
         return;
     }
 
-    if (childNode instanceof Container)
+    if (isContainer(childNode))
     {
         parentNode.addChild(childNode);
     }
-    else if (childNode instanceof Filter)
+    else if (isFilter(childNode))
     {
         attach(parentNode, childNode);
     }

src/helpers/applyProps.ts

@@ -1,7 +1,3 @@
-import {
-    Container,
-    Graphics,
-} from 'pixi.js';
 import {
     type FederatedPointerEvent,
     type FederatedWheelEvent,
@@ -21,6 +17,7 @@ import { diffProps } from './diffProps';
 import { isDiffSet } from './isDiffSet';
 import { isReadOnlyProperty } from './isReadOnlyProperty';
 import { log } from './log';
+import { isContainer, isGraphics } from './typeChecks';
 
 const DEFAULT = '__default';
 const DEFAULTS_CONTAINERS = new Map();
@@ -85,7 +82,7 @@ export function applyProps(
 
         if ((key as string === 'draw') && (typeof value === 'function'))
         {
-            if (instance instanceof Graphics)
+            if (isGraphics(instance))
             {
                 value(instance);
             }
@@ -135,7 +132,7 @@ export function applyProps(
             // For removed props, try to set default values, if possible
             if (value === `${DEFAULT}remove`)
             {
-                if (currentInstance instanceof Container)
+                if (isContainer(currentInstance))
                 {
                     // create a blank slate of the instance and copy the particular parameter.
                     let ctor = DEFAULTS_CONTAINERS.get(currentInstance.constructor);

src/helpers/attach.ts

@@ -1,13 +1,13 @@
-import { Filter } from 'pixi.js';
 import { type HostConfig } from '../typedefs/HostConfig';
+import { isFilter } from './typeChecks';
 
 export function attach(
     parentInstance: HostConfig['containerInstance'],
     childInstance: HostConfig['instance'],
     targetIndex?: number
 )
 {
-    if (childInstance instanceof Filter)
+    if (isFilter(childInstance))
     {
         (childInstance as unknown as HostConfig['filterInstance']).__pixireact.parent = parentInstance;
 

src/helpers/detach.ts

@@ -1,11 +1,11 @@
-import { Filter } from 'pixi.js';
 import { type HostConfig } from '../typedefs/HostConfig';
+import { isFilter } from './typeChecks';
 
 export function detach(
     childInstance: HostConfig['instance'],
 )
 {
-    if (childInstance instanceof Filter)
+    if (isFilter(childInstance))
     {
         const parentInstance = childInstance.__pixireact.parent as HostConfig['instance'];
 

src/helpers/hideInstance.ts

@@ -1,18 +1,15 @@
-import {
-    Container,
-    Filter,
-} from 'pixi.js';
 import { type HostConfig } from '../typedefs/HostConfig';
+import { isContainer, isFilter } from './typeChecks';
 
 export function hideInstance(
     instance: HostConfig['instance']
 )
 {
-    if (instance instanceof Container)
+    if (isContainer(instance))
     {
         instance.visible = false;
     }
-    else if (instance instanceof Filter)
+    else if (isFilter(instance))
     {
         instance.enabled = false;
     }

src/helpers/insertBefore.ts

@@ -1,12 +1,10 @@
-import {
-    Container,
-    Filter,
-} from 'pixi.js';
+import { type Container, type Filter } from 'pixi.js';
 import { type HostConfig } from '../typedefs/HostConfig';
 import { attach } from './attach';
 import { detach } from './detach';
 import { invariant } from './invariant';
 import { log } from './log';
+import { isContainer, isFilter } from './typeChecks';
 
 export function insertBefore(
     parentInstance: HostConfig['containerInstance'],
@@ -18,7 +16,7 @@ export function insertBefore(
 
     invariant(childInstance !== beforeChildInstance, 'Cannot insert node before itself');
 
-    if (childInstance instanceof Container)
+    if (isContainer(childInstance))
     {
         const childContainerInstance = childInstance as HostConfig['containerInstance'];
         const childContainer = childInstance as unknown as Container;
@@ -33,7 +31,7 @@ export function insertBefore(
 
         parentInstance.addChildAt(childContainer, index);
     }
-    else if (childInstance instanceof Filter)
+    else if (isFilter(childInstance))
     {
         const childFilterInstance = childInstance;
         const instanceState = childFilterInstance.__pixireact;

src/helpers/log.ts

@@ -1,4 +1,5 @@
 import { store } from '../store';
+import { isFunction } from './typeChecks';
 
 export type LogType = 'error' | 'info' | 'log' | 'warn';
 
@@ -12,7 +13,7 @@ export function log(logType: LogType, ...args: any[])
     // eslint-disable-next-line no-console
     const logMethod = console[logType];
 
-    if (!(logMethod instanceof Function))
+    if (!isFunction(logMethod))
     {
         console.warn(`Attempted to create an invalid log type: "${logType}"`);
 

src/helpers/removeChild.ts

@@ -1,7 +1,7 @@
-import { Filter } from 'pixi.js';
 import { type HostConfig } from '../typedefs/HostConfig';
 import { detach } from './detach';
 import { log } from './log';
+import { isFilter } from './typeChecks';
 
 /** Removes elements from our scene and disposes of them. */
 export function removeChild(
@@ -11,7 +11,7 @@ export function removeChild(
 {
     log('info', 'lifecycle::removeChild');
 
-    if (childInstance instanceof Filter)
+    if (isFilter(childInstance))
     {
         detach(childInstance);
     }

src/helpers/typeChecks.ts

@@ -0,0 +1,135 @@
+import { Application, Container, Filter, Graphics } from 'pixi.js';
+
+/**
+ * Cross-realm compatible type checking utilities.
+ * These functions work across different JavaScript realms/contexts
+ * where instanceof checks may fail.
+ */
+
+/**
+ * Checks if an object is a PixiJS Container across realms.
+ * Uses constructor name and key properties as fallback to instanceof.
+ */
+export function isContainer(obj: any): obj is Container
+{
+    if (!obj || typeof obj !== 'object') return false;
+
+    // Primary check: instanceof (works in same realm)
+    if (obj instanceof Container) return true;
+
+    // Fallback: check constructor name and key properties
+    const constructorName = obj.constructor?.name;
+
+    return constructorName === 'Container'
+           || constructorName === 'Sprite'
+           || constructorName === 'Graphics'
+           || constructorName === 'Text'
+           || constructorName === 'BitmapText'
+           || constructorName === 'SimpleMesh'
+           || constructorName === 'NineSlicePlane'
+           || (typeof obj.addChild === 'function'
+            && typeof obj.removeChild === 'function'
+            && typeof obj.getChildIndex === 'function'
+            && 'children' in obj);
+}
+
+/**
+ * Checks if an object is a PixiJS Graphics across realms.
+ */
+export function isGraphics(obj: any): obj is Graphics
+{
+    if (!obj || typeof obj !== 'object') return false;
+
+    // Primary check: instanceof (works in same realm)
+    if (obj instanceof Graphics) return true;
+
+    // Fallback: check constructor name and key methods
+    const constructorName = obj.constructor?.name;
+
+    return constructorName === 'Graphics'
+           || (typeof obj.clear === 'function'
+            && typeof obj.rect === 'function'
+            && typeof obj.fill === 'function');
+}
+
+/**
+ * Checks if an object is a PixiJS Filter across realms.
+ */
+export function isFilter(obj: any): obj is Filter
+{
+    if (!obj || typeof obj !== 'object') return false;
+
+    // Primary check: instanceof (works in same realm)
+    if (obj instanceof Filter) return true;
+
+    // Fallback: check constructor name and key properties
+    const constructorName = obj.constructor?.name;
+
+    return constructorName === 'Filter'
+           || constructorName?.endsWith('Filter')
+           || ('enabled' in obj
+            && 'resolution' in obj
+            && typeof obj.apply === 'function');
+}
+
+/**
+ * Checks if an object is a PixiJS Application across realms.
+ */
+export function isApplication(obj: any): obj is Application
+{
+    if (!obj || typeof obj !== 'object') return false;
+
+    // Primary check: instanceof (works in same realm)
+    if (obj instanceof Application) return true;
+
+    // Fallback: check constructor name and key properties
+    const constructorName = obj.constructor?.name;
+
+    return constructorName === 'Application'
+           || ('stage' in obj
+            && 'renderer' in obj
+            && 'ticker' in obj
+            && typeof obj.init === 'function');
+}
+
+/**
+ * Checks if an object is an HTMLCanvasElement across realms.
+ */
+export function isHTMLCanvasElement(obj: any): obj is HTMLCanvasElement
+{
+    if (!obj || typeof obj !== 'object') return false;
+
+    // Primary check: instanceof (works in same realm)
+    if (typeof HTMLCanvasElement !== 'undefined' && obj instanceof HTMLCanvasElement) return true;
+
+    // Fallback: check node properties and methods
+    return isHTMLElement(obj)
+           && obj.nodeName === 'CANVAS'
+           && typeof (obj as HTMLCanvasElement).getContext === 'function'
+           && typeof (obj as HTMLCanvasElement).toDataURL === 'function';
+}
+
+/**
+ * Checks if an object is an HTMLElement across realms.
+ */
+export function isHTMLElement(obj: any): obj is HTMLElement
+{
+    if (!obj || typeof obj !== 'object') return false;
+
+    // Primary check: instanceof (works in same realm)
+    if (typeof HTMLElement !== 'undefined' && obj instanceof HTMLElement) return true;
+
+    // Fallback: check node properties
+    return obj.nodeType === Node.ELEMENT_NODE || (
+        obj.nodeType === Node.TEXT_NODE
+        && obj.parentElement?.nodeType === Node.ELEMENT_NODE
+    );
+}
+
+/**
+ * Checks if an object is a Function across realms.
+ */
+export function isFunction(obj: any): obj is (...args: any[]) => any
+{
+    return typeof obj === 'function';
+}

src/helpers/unhideInstance.ts

@@ -1,18 +1,15 @@
-import {
-    Container,
-    Filter,
-} from 'pixi.js';
 import { type HostConfig } from '../typedefs/HostConfig';
+import { isContainer, isFilter } from './typeChecks';
 
 export function unhideInstance(
     instance: HostConfig['instance'],
 )
 {
-    if (instance instanceof Container)
+    if (isContainer(instance))
     {
         instance.visible = true;
     }
-    else if (instance instanceof Filter)
+    else if (isFilter(instance))
     {
         instance.enabled = true;
     }

src/hooks/useApplication.ts

@@ -1,7 +1,7 @@
-import { Application } from 'pixi.js';
 import { useContext } from 'react';
 import { Context } from '../components/Context';
 import { invariant } from '../helpers/invariant';
+import { isApplication } from '../helpers/typeChecks';
 
 /**
  * @description Retrieves the nearest Pixi.js Application from the Pixi React context.
@@ -11,7 +11,7 @@ export function useApplication()
     const appContext = useContext(Context);
 
     invariant(
-        appContext.app instanceof Application,
+        isApplication(appContext.app),
         'No Context found with `%s`. Make sure to wrap component with `%s`',
         'Application',
         'AppProvider'