feat: add support for custom components

src/global.ts

@@ -1,6 +1,8 @@
 import type { NamespacedPixiElements } from './typedefs/NamespacedPixiElements.ts';
 import type { PixiElements } from './typedefs/PixiElements.ts';
 
+export type { PixiReactNode } from './typedefs/PixiReactNode.ts';
+
 declare global
 {
     // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -9,5 +11,3 @@ declare global
         interface IntrinsicElements extends PixiElements, NamespacedPixiElements {}
     }
 }
-
-export {};

src/helpers/extend.js

@@ -5,9 +5,7 @@ import { catalogue } from './catalogue.js';
 /**
  * Expose Pixi.js components for use in JSX.
  *
- * @param {{
- *  [K in AutoFilteredKeys]?: typeof import('pixi.js')[K]
- * }} objects The Pixi.js components to be exposed.
+ * @param {{ [key: string]: new (...args: any) => any }} objects Components to be exposed.
  */
 export function extend(objects)
 {

src/typedefs/AutoFilteredKeys.ts

@@ -1,6 +1,6 @@
 import type * as PIXI from 'pixi.js';
 
-type PixiType = typeof PIXI;
+export type PixiType = typeof PIXI;
 
 export type AutoFilteredKeys = {
     [K in keyof PixiType]: PixiType[K] extends new (...args: any) => any ? K : never

src/typedefs/Instance.ts

@@ -3,13 +3,11 @@ import type { ContainerElement } from './ContainerElement.ts';
 import type { EventHandlers } from './EventHandlers.ts';
 import type { InstanceState } from './InstanceState.ts';
 
-interface BaseInstance
+export type Instance = ContainerElement & EventHandlers &
 {
     BaseInstance: object
     __pixireact?: InstanceState
     autoRemovedBeforeAppend?: boolean
     children?: ContainerElement | ContainerElement[]
     draw?: (graphics: Graphics) => void
-}
-
-export type Instance = ContainerElement & BaseInstance & EventHandlers;
+};

src/typedefs/InstanceProps.ts

@@ -2,12 +2,10 @@ import type { Graphics } from 'pixi.js';
 import type { ContainerElement } from './ContainerElement.ts';
 import type { InstanceState } from './InstanceState.ts';
 
-interface BaseInstanceProps
-{
+export type InstanceProps = {
+    [key: string]: unknown
     __pixireact?: InstanceState
     autoRemovedBeforeAppend?: boolean
     children?: ContainerElement | ContainerElement[]
     draw?: (graphics: Graphics) => void
-}
-
-export type InstanceProps = { [key: string]: unknown } & BaseInstanceProps;
+};

src/typedefs/PixiElements.ts

@@ -1,11 +1,8 @@
-import { type NameOverrides } from '../constants/NameOverrides.js';
-
 import type * as PIXI from 'pixi.js';
-import type { AutoFilteredKeys } from './AutoFilteredKeys';
-import type { Node } from './Node';
-
-type PixiType = typeof PIXI;
+import type { NameOverrides } from '../constants/NameOverrides.js';
+import type { AutoFilteredKeys } from './AutoFilteredKeys.ts';
+import type { PixiReactNode } from './PixiReactNode.ts';
 
 export type PixiElements = {
-    [K in AutoFilteredKeys as K extends keyof typeof NameOverrides ? typeof NameOverrides[K] : Uncapitalize<K>]: Node<PixiType[K]>
+    [K in AutoFilteredKeys as K extends keyof typeof NameOverrides ? typeof NameOverrides[K] : Uncapitalize<K>]: PixiReactNode<typeof PIXI[K]>
 };

src/typedefs/PixiReactNode.ts

@@ -0,0 +1,5 @@
+import type { ConstructorParams } from './ConstructorParams.ts';
+import type { Overwrite } from './Overwrite.ts';
+import type { PixiReactNodeProps } from './PixiReactNodeProps.ts';
+
+export type PixiReactNode<T extends abstract new (...args: any) => any> = Overwrite<Partial<ConstructorParams<T>>, PixiReactNodeProps<InstanceType<T>>>;

src/typedefs/NodeProps.ts → src/typedefs/PixiReactNodeProps.ts

@@ -13,6 +13,6 @@ export interface BaseNodeProps<T extends abstract new (...args: any) => any>
     ref?: Ref<T>;
 }
 
-export type NodeProps<T extends abstract new (...args: any) => any> = T extends Graphics
+export type PixiReactNodeProps<T extends abstract new (...args: any) => any> = T extends Graphics
     ? BaseNodeProps<T> & EventHandlers & { draw?: (graphics: Graphics) => void; }
     : BaseNodeProps<T> & EventHandlers;