feat: add the <Application> wrapper component

src/components/Application.js

@@ -0,0 +1,67 @@
+import {
+    createElement,
+    useEffect,
+    useRef,
+} from 'react';
+import { render } from '../render.js';
+
+/** @typedef {import('pixi.js').Application} Application */
+/** @typedef {import('pixi.js').ApplicationOptions} ApplicationOptions */
+/**
+ * @template T
+ * @typedef {import('react').PropsWithChildren<T>} PropsWithChildren
+ */
+/**
+ * @template T
+ * @typedef {import('react').PropsWithRef<T>} PropsWithRef
+ */
+/**
+ * @template T
+ * @typedef {import('react').RefObject<T>} RefObject
+ */
+
+/**
+ * @template T
+ * @typedef {import('../typedefs/OmitChildren.js').OmitChildren<T>} OmitChildren
+ */
+
+/**
+ * @typedef {object} BaseApplicationProps
+ * @property {string} [className] CSS classes to be applied to the Pixi Application's canvas element.
+ */
+
+/** @typedef {PropsWithChildren<Partial<OmitChildren<ApplicationOptions>>>} ApplicationPropsWithChildren */
+/** @typedef {PropsWithRef<{ ref?: RefObject<Application> }>} ApplicationPropsWithRef */
+/** @typedef {BaseApplicationProps & ApplicationPropsWithChildren & ApplicationPropsWithRef} ApplicationProps */
+
+/**
+ * Creates a React root and renders a Pixi application.
+ *
+ * @param {ApplicationProps} props All props.
+ */
+export function Application(props)
+{
+    const {
+        children,
+        className,
+        ...applicationProps
+    } = props;
+
+    /** @type {RefObject<HTMLCanvasElement>} */
+    const canvasRef = useRef(null);
+
+    useEffect(() =>
+    {
+        const canvasElement = canvasRef.current;
+
+        if (canvasElement)
+        {
+            render(children, canvasElement, applicationProps);
+        }
+    }, []);
+
+    return createElement('canvas', {
+        ref: canvasRef,
+        className,
+    });
+}

src/helpers/catalogue.js

@@ -1,3 +1,5 @@
+import { Application } from 'pixi.js';
+
 /** @typedef {import('../typedefs/Instance.js').Instance} Instance */
 
 /**
@@ -7,4 +9,7 @@
  *   }
  * }}
  */
-export const catalogue = {};
+export const catalogue = {
+    // @ts-expect-error
+    Application,
+};

src/helpers/convertStringToPascalCase.js

@@ -3,12 +3,12 @@
  *
  * @template {string} S
  * @param {S} string The string to be converted.
- * @returns {S} The converted string.
+ * @returns {Capitalize<S>} The converted string.
  */
 export function convertStringToPascalCase(string)
 {
     const firstChar = string.charAt(0);
     const rest = string.substring(1);
 
-    return /** @type {S} */ (`${firstChar.toUpperCase()}${rest}`);
+    return /** @type {Capitalize<S>} */ (`${firstChar.toUpperCase()}${rest}`);
 }

src/helpers/createInstance.js

@@ -33,7 +33,19 @@ export function createInstance(type, props, root)
 
     const pixiProps = gentleCloneProps(props, PixiReactIgnoredProps);
 
-    const instance = prepareInstance(new PixiComponent(pixiProps), {
+    let component;
+
+    if (name === 'Application')
+    {
+        component = new PixiComponent();
+        component.init(pixiProps);
+    }
+    else
+    {
+        component = new PixiComponent(pixiProps);
+    }
+
+    const instance = prepareInstance(component, {
         root,
         type,
     });

src/index.js

@@ -1,3 +1,4 @@
+export { Application } from './components/Application.js';
 export { extend } from './helpers/extend.js';
 export { useAsset } from './hooks/useAsset.js';
 export { useExtend } from './hooks/useExtend.js';
@@ -7,6 +8,7 @@ export { render } from './render.js';
 // stupid, stupid, stupid thing that we have to do to get the global types to
 // import.
 //
-// If you or someone you know has been hurt by Typescript, you may be entitled
-// to benefits. Please call 'tel:555-555-5555' in your browser devtools.
+// If you or someone you know has been hurt by Typescript, or knows how to fix
+// this, you may be entitled to benefits. Please call 'tel:555-555-5555' in your
+// browser devtools.
 export * from './global.js';

src/typedefs/OmitChildren.js

@@ -0,0 +1,5 @@
+/**
+ * @template T
+ * @typedef {T extends undefined ? never : Omit<T, 'children'>} OmitChildren
+ */
+export const OmitChildren = {};

src/typedefs/PixiElementsImpl.js

@@ -26,14 +26,14 @@ import { NameOverrides } from '../constants/NameOverrides.js';
 
 /**
  * @template T
- * @typedef {{
- *  [K in keyof T]: T[K] extends (...args: any) => any ? never : T[K]
- * }} PixiOptionsType
+ * @typedef {import('./OmitChildren.js').OmitChildren<T>} OmitChildren
  */
 
 /**
  * @template T
- * @typedef {T extends undefined ? never : Omit<T, 'children'>} OmitChildren
+ * @typedef {{
+ *  [K in keyof T]: T[K] extends (...args: any) => any ? never : T[K]
+ * }} PixiOptionsType
  */
 
 /** @typedef {{ draw?: (graphics: Graphics) => void }} DrawCallback */