fix: remove invalid Pixi React props from JSX elements

src/core/createRoot.ts

@@ -32,11 +32,11 @@ export function createRoot(
     else
     {
         state.app = new Application();
-        state.rootContainer = prepareInstance(state.app.stage);
+        state.rootContainer = prepareInstance(state.app.stage) as HostConfig['containerInstance'];
     }
 
     const fiber = root?.fiber ?? reconciler.createContainer(
-        state.rootContainer as HostConfig['containerInstance'],
+        state.rootContainer,
         ConcurrentRoot,
         null,
         false,

src/helpers/attach.ts

@@ -10,7 +10,7 @@ export function attach(
 {
     if (childInstance instanceof Filter)
     {
-        (childInstance as HostConfig['filterInstance']).__pixireact.parent = parentInstance;
+        (childInstance as unknown as HostConfig['filterInstance']).__pixireact.parent = parentInstance;
 
         if (typeof targetIndex === 'number')
         {

src/helpers/hideInstance.ts

@@ -11,10 +11,10 @@ export function hideInstance(
 {
     if (instance instanceof Container)
     {
-        (instance as HostConfig['containerInstance']).visible = false;
+        instance.visible = false;
     }
     else if (instance instanceof Filter)
     {
-        (instance as HostConfig['filterInstance']).enabled = false;
+        instance.enabled = false;
     }
 }

src/helpers/insertBefore.ts

@@ -35,7 +35,7 @@ export function insertBefore(
     }
     else if (childInstance instanceof Filter)
     {
-        const childFilterInstance = childInstance as HostConfig['filterInstance'];
+        const childFilterInstance = childInstance;
         const instanceState = childFilterInstance.__pixireact;
 
         const targetIndex = instanceState.filters.indexOf(beforeChildInstance as unknown as Filter);

src/helpers/prepareInstance.ts

@@ -1,8 +1,7 @@
-import {
-    type Container,
-    type Filter,
+import type {
+    Container,
+    Filter,
 } from 'pixi.js';
-
 import type { HostConfig } from '../typedefs/HostConfig.ts';
 import type { NodeState } from '../typedefs/NodeState.ts';
 

src/helpers/switchInstance.ts

@@ -19,7 +19,7 @@ export function switchInstance(
         return;
     }
 
-    const root = instance.__pixireact.root as HostConfig['instance'];
+    const root = instance.__pixireact.root as HostConfig['containerInstance'];
     const newInstance = createInstance(type, newProps, root);
 
     if (!instance.__pixireact.autoRemovedBeforeAppend)

src/helpers/unhideInstance.ts

@@ -11,10 +11,10 @@ export function unhideInstance(
 {
     if (instance instanceof Container)
     {
-        (instance as HostConfig['containerInstance']).visible = true;
+        instance.visible = true;
     }
     else if (instance instanceof Filter)
     {
-        (instance as HostConfig['filterInstance']).enabled = true;
+        instance.enabled = true;
     }
 }

src/typedefs/ApplicationProps.ts

@@ -4,8 +4,11 @@ import type {
     TextStyle,
     TextStyleOptions,
 } from 'pixi.js';
-import type { RefObject } from 'react';
-import type { HostConfig } from './HostConfig.ts';
+import type {
+    Key,
+    RefObject,
+} from 'react';
+import type { PixiReactChildNode } from './PixiReactChildNode.ts';
 
 export interface BaseApplicationProps
 {
@@ -16,11 +19,14 @@ export interface BaseApplicationProps
     className?: string
 
     /** @description Child components. */
-    children?: HostConfig['instance'] | HostConfig['instance'][];
+    children: PixiReactChildNode;
 
     /** @description The default style to be applied to text nodes. */
     defaultTextStyle?: TextStyle | TextStyleOptions,
 
+    /** @description A unique key which allows React to manage this component across changes in parent state. */
+    key?: Key,
+
     /** @description Callback to be fired when the application finishes initializing. */
     onInit?: (app: Application) => void
 

src/typedefs/BasePixiReactNode.ts

@@ -0,0 +1,7 @@
+import type {
+    Container,
+    Filter,
+} from 'pixi.js';
+import type { PixiReactNode } from './PixiReactNode.ts';
+
+export type BasePixiReactNode<T extends new (...args: any) => any = typeof Container | typeof Filter> = PixiReactNode<T>;

src/typedefs/ConstructorOptions.ts

@@ -0,0 +1,12 @@
+import type { ConstructorOverrides } from './ConstructorOverrides';
+
+/**
+ * We're adding a specific options type overrides for some components because their deprecated overloads get in the way.
+ * @see https://github.com/pixijs/pixi-react/issues/500
+ */
+export type ConstructorOptions<T extends new (...args: any[]) => any> =
+    Extract<ConstructorOverrides, { 0: T }> extends [T, infer R]
+        ? unknown extends R
+            ? ConstructorParameters<T>[0]
+            : R
+        : never;

src/typedefs/ConstructorOverrides.ts

@@ -0,0 +1,25 @@
+import type {
+    AlphaFilter,
+    AlphaFilterOptions,
+    BlurFilter,
+    BlurFilterOptions,
+    BlurFilterPass,
+    BlurFilterPassOptions,
+    DisplacementFilter,
+    DisplacementFilterOptions,
+    Filter,
+    FilterOptions,
+    NoiseFilter,
+    NoiseFilterOptions,
+    Text,
+    TextOptions,
+} from 'pixi.js';
+
+export type ConstructorOverrides =
+    | [typeof AlphaFilter, AlphaFilterOptions]
+    | [typeof BlurFilter, BlurFilterOptions]
+    | [typeof BlurFilterPass, BlurFilterPassOptions]
+    | [typeof DisplacementFilter, DisplacementFilterOptions]
+    | [typeof Filter, FilterOptions]
+    | [typeof NoiseFilter, NoiseFilterOptions]
+    | [typeof Text, TextOptions];

src/typedefs/EventHandlers.ts

@@ -1,9 +1,13 @@
 import type {
+    FederatedEventHandler,
     FederatedPointerEvent,
     FederatedWheelEvent,
 } from 'pixi.js';
 import type { ReactToPixiEventPropNames } from '../constants/EventPropNames.ts';
 
 export type EventHandlers = {
-    -readonly [K in keyof typeof ReactToPixiEventPropNames]?: (event: FederatedPointerEvent | FederatedWheelEvent) => void
+    -readonly [K in keyof typeof ReactToPixiEventPropNames]?:
+    | FederatedEventHandler<FederatedPointerEvent>
+    | FederatedEventHandler<FederatedWheelEvent>
+    | null
 };

src/typedefs/PixiElements.ts

@@ -1,8 +1,12 @@
 import type * as PIXI from 'pixi.js';
 import type { NameOverrides } from '../constants/NameOverrides.ts';
 import type { PixiComponents } from './PixiComponents.ts';
-import type { PixiReactNode } from './PixiReactNode.ts';
+import type { PixiReactElementProps } from './PixiReactNode.ts';
 
 export type PixiElements = {
-    [K in PixiComponents as K extends keyof typeof NameOverrides ? typeof NameOverrides[K] : Uncapitalize<K>]: PixiReactNode<typeof PIXI[K]>
+    [K in PixiComponents as K extends keyof typeof NameOverrides ? typeof NameOverrides[K] : Uncapitalize<K>]: {
+        [K2 in keyof PixiReactElementProps<typeof PIXI[K]> as K2]?: PixiReactElementProps<typeof PIXI[K]>[K2] extends (...args: any) => any
+            ? never
+            : PixiReactElementProps<typeof PIXI[K]>[K2];
+    };
 };

src/typedefs/PixiReactChildNode.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+import type { BasePixiReactNode } from './BasePixiReactNode.ts';
+
+export type PixiReactChildNode = BasePixiReactNode | Iterable<BasePixiReactNode> | ReactNode;

src/typedefs/PixiReactNode.ts

@@ -6,29 +6,53 @@ import type {
     Key,
     Ref,
 } from 'react';
+import type { PixiToReactEventPropNames } from '../constants/EventPropNames.ts';
+import type { ConstructorOptions } from './ConstructorOptions.ts';
 import type { DrawCallback } from './DrawCallback.ts';
 import type { EventHandlers } from './EventHandlers.ts';
 import type { NodeState } from './NodeState.ts';
+import type { PixiReactChildNode } from './PixiReactChildNode.ts';
 
 export interface BaseNodeProps<T extends new (...args: any) => any = typeof Container>
 {
-    __pixireact: NodeState,
-    children?: T extends Container
-        ? PixiReactNode | PixiReactNode[]
+    children: T extends Container
+        ? PixiReactChildNode
         : never;
     draw?: T extends Graphics
         ? DrawCallback
         : null;
     key?: Key;
-    parent?: PixiReactNode<typeof Container>;
     ref?: Ref<T>;
 }
 
+export interface NodeProps<T extends new (...args: any) => any = typeof Container> extends BaseNodeProps<T>
+{
+    __pixireact: NodeState,
+    parent?: PixiReactNode<typeof Container>;
+}
+
 export type PixiReactNode<T extends new (...args: any) => any = typeof Container> =
-    BaseNodeProps<InstanceType<T>>
+    NodeProps<InstanceType<T>>
     & EventHandlers
     & {
-        [K in keyof InstanceType<T> as K]: K extends keyof BaseNodeProps<InstanceType<T>>
-            ? BaseNodeProps<InstanceType<T>>[K]
+        [K in keyof InstanceType<T> as K]: K extends keyof NodeProps<InstanceType<T>>
+            ? NodeProps<InstanceType<T>>[K]
             : InstanceType<T>[K];
     };
+
+export type PixiReactElementProps<T extends new (...args: any) => any = typeof Container> =
+    BaseNodeProps<InstanceType<T>>
+    & EventHandlers
+    & {
+        [
+        K in keyof ConstructorOptions<T> as (
+            K extends keyof typeof PixiToReactEventPropNames
+                ? never
+                : K extends keyof NodeProps<InstanceType<T>>
+                    ? ConstructorOptions<T>[K] extends NodeProps<InstanceType<T>>[K]
+                        ? never
+                        : K
+                    : K
+        )
+        ]: ConstructorOptions<T>[K];
+    };