fix: restore Pixi component property typings

pixijs · Jun 21, 2024 · 403d180 · 403d180
1 parent e0cf4a7
commit 403d180
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 49 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -69,7 +69,7 @@
     "@types/react": "^18.3.2",
     "@types/react-reconciler": "^0.28.8",
     "husky": "^8.0.0",
-    "pixi.js": "v8.1.5-dev.1ebdfc5",
+    "pixi.js": "v8.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup": "^4.18.0",

diff --git a/src/constants/EventPropNames.js b/src/constants/EventPropNames.js
@@ -1,5 +1,39 @@
-// MouseEventHandler<HTMLCanvasElement>
-export const EventPropNames = Object.freeze({
+export const PixiToReactEventPropNames = Object.freeze({
+    onclick: 'onClick',
+    onglobalmousemove: 'onGlobalMouseMove',
+    onglobalpointermove: 'onGlobalPointerMove',
+    onglobaltouchmove: 'onGlobalTouchMove',
+    onmousedown: 'onMouseDown',
+    onmouseenter: 'onMouseEnter',
+    onmouseleave: 'onMouseLeave',
+    onmousemove: 'onMouseMove',
+    onmouseout: 'onMouseOut',
+    onmouseover: 'onMouseOver',
+    onmouseup: 'onMouseUp',
+    onmouseupoutside: 'onMouseUpOutside',
+    onpointercancel: 'onPointerCancel',
+    onpointerdown: 'onPointerDown',
+    onpointerenter: 'onPointerEnter',
+    onpointerleave: 'onPointerLeave',
+    onpointermove: 'onPointerMove',
+    onpointerout: 'onPointerOut',
+    onpointerover: 'onPointerOver',
+    onpointertap: 'onPointerTap',
+    onpointerup: 'onPointerUp',
+    onpointerupoutside: 'onPointerUpOutside',
+    onrightclick: 'onRightClick',
+    onrightdown: 'onRightDown',
+    onrightup: 'onRightUp',
+    onrightupoutside: 'onRightUpOutside',
+    ontap: 'onTap',
+    ontouchcancel: 'onTouchCancel',
+    ontouchend: 'onTouchEnd',
+    ontouchendoutside: 'onTouchEndOutside',
+    ontouchmove: 'onTouchMove',
+    ontouchstart: 'onTouchStart',
+    onwheel: 'onWheel',
+});
+export const ReactToPixiEventPropNames = Object.freeze({
     onClick: 'onclick',
     onGlobalMouseMove: 'onglobalmousemove',
     onGlobalPointerMove: 'onglobalpointermove',

diff --git a/src/constants/NameOverrides.js b/src/constants/NameOverrides.js
@@ -1,5 +1,10 @@
 const NameOverrides = Object.freeze({
     HTMLText: 'htmlText',
+    HTMLTextPipe: 'htmlTextPipe',
+    HTMLTextRenderData: 'htmlTextRenderData',
+    HTMLTextStyle: 'htmlTextStyle',
+    HTMLTextSystem: 'htmlTextSystem',
+    IGLUniformData: 'iglUniformData',
 });
 
 export { NameOverrides };
diff --git a/src/helpers/applyProps.js b/src/helpers/applyProps.js
@@ -2,7 +2,10 @@ import {
     Container,
     Graphics,
 } from 'pixi.js';
-import { EventPropNames } from '../constants/EventPropNames.js';
+import {
+    PixiToReactEventPropNames,
+    ReactToPixiEventPropNames,
+} from '../constants/EventPropNames.js';
 import { diffProps } from './diffProps.js';
 import { isDiffSet } from './isDiffSet.js';
 import { log } from './log.js';
@@ -17,8 +20,6 @@ import { log } from './log.js';
 
 const DEFAULT = '__default';
 const DEFAULTS_CONTAINERS = new Map();
-const EVENT_PROP_NAMES = Object.keys(EventPropNames);
-const PIXI_EVENT_PROP_NAMES = Object.values(EventPropNames);
 
 /** @type {Record<string, boolean>} */
 const PIXI_EVENT_PROP_NAME_ERROR_HAS_BEEN_SHOWN = {};
@@ -46,17 +47,15 @@ export function applyProps(instance, data)
     {
         const change = changes[changeIndex];
         let hasError = false;
-
-        let key = change[0];
+        let key = /** @type {keyof Instance} */ (change[0]);
         let value = change[1];
         const isEvent = change[2];
 
         /** @type {(keyof Instance)[]} */
         const keys = /** @type {*} */ (change[3]);
 
-        /** @type {Instance} */
-        let currentInstance = /** @type {*} */ (instance);
-        let targetProp = /** @type {*} */ (currentInstance[key]);
+        let currentInstance = instance;
+        let targetProp = currentInstance[key];
 
         if ((key === 'draw') && (typeof value === 'function'))
         {
@@ -71,18 +70,17 @@ export function applyProps(instance, data)
             }
         }
 
-        const pixiEventPropNameIndex = PIXI_EVENT_PROP_NAMES.findIndex((propName) => propName === key);
-
-        if (pixiEventPropNameIndex !== -1)
+        if (key in PixiToReactEventPropNames)
         {
+            const typedKey = /** @type {keyof PixiToReactEventPropNames} */ (key);
+
             hasError = true;
+
             if (!PIXI_EVENT_PROP_NAME_ERROR_HAS_BEEN_SHOWN[key])
             {
                 PIXI_EVENT_PROP_NAME_ERROR_HAS_BEEN_SHOWN[key] = true;
 
-                const SUGGESTED_PROP_NAME = EVENT_PROP_NAMES[pixiEventPropNameIndex];
-
-                log('warn', `Event names must be pascal case; instead of \`${key}\`, you probably want \`${SUGGESTED_PROP_NAME}\`.`);
+                log('warn', `Event names must be pascal case; instead of \`${key}\`, you probably want \`${PixiToReactEventPropNames[typedKey]}\`.`);
             }
         }
 
@@ -140,10 +138,8 @@ export function applyProps(instance, data)
             // Deal with events ...
             if (isEvent && localState)
             {
-                /** @type {keyof EventPropNames} */
-                const typedKey = /** @type {*} */ (key);
-
-                const pixiKey = EventPropNames[typedKey];
+                const typedKey = /** @type {keyof ReactToPixiEventPropNames} */ (key);
+                const pixiKey = ReactToPixiEventPropNames[typedKey];
 
                 if (value)
                 {

diff --git a/src/helpers/diffProps.js b/src/helpers/diffProps.js
@@ -1,4 +1,7 @@
-import { EventPropNames } from '../constants/EventPropNames.js';
+import {
+    PixiToReactEventPropNames,
+    ReactToPixiEventPropNames,
+} from '../constants/EventPropNames.js';
 import { isEqual } from './compare.js';
 import { gentleCloneProps } from './gentleCloneProps.js';
 
@@ -59,7 +62,7 @@ export function diffProps(
         }
 
         // Collect handlers and bail out
-        if (key in EventPropNames)
+        if ((key in PixiToReactEventPropNames) || (key in ReactToPixiEventPropNames))
         {
             changes.push([key, value, true, []]);
 

diff --git a/src/typedefs/ConstructorParams.js b/src/typedefs/ConstructorParams.js
@@ -1,10 +1,5 @@
 /**
  * @template {new (...args: any[]) => any} T
- * @typedef {T extends new (args: infer A) => any ? A : never} ConstructorWithOneParam
- */
-
-/**
- * @template {new (...args: any[]) => any} T
- * @typedef {ConstructorWithOneParam<T>} ConstructorParams
+ * @typedef {T extends new (...args: infer A) => any ? A[0] : never} ConstructorParams
  */
 export const ConstructorParams = {};
diff --git a/src/typedefs/EventHandlers.js b/src/typedefs/EventHandlers.js
@@ -0,0 +1,12 @@
+import { ReactToPixiEventPropNames } from '../constants/EventPropNames.js';
+
+/** @typedef {import('pixi.js').FederatedPointerEvent} FederatedPointerEvent */
+/** @typedef {import('pixi.js').FederatedWheelEvent} FederatedWheelEvent */
+
+/**
+ * @typedef {{
+ * 	-readonly [K in keyof typeof ReactToPixiEventPropNames]?: (event: FederatedPointerEvent | FederatedWheelEvent) => void
+ * }} EventHandlers
+ */
+
+export const EventHandlers = {};
diff --git a/src/typedefs/Instance.js b/src/typedefs/Instance.js
@@ -1,10 +1,7 @@
-/** @typedef {import('pixi.js').FederatedPointerEvent} FederatedPointerEvent */
-/** @typedef {import('pixi.js').FederatedWheelEvent} FederatedWheelEvent */
 /** @typedef {import('pixi.js').Graphics} Graphics */
 
 /** @typedef {import('./ContainerElement.js').ContainerElement} ContainerElement */
-/** @typedef {import('../constants/EventPropNames.js').EventPropNames} EventPropNames */
-/** @typedef {import('./InstanceProps.js').InstanceProps} InstanceProps */
+/** @typedef {import('./EventHandlers.js').EventHandlers} EventHandlers */
 /** @typedef {import('./InstanceState.js').InstanceState} InstanceState */
 
 /**
@@ -15,12 +12,6 @@
  * @property {(graphics: Graphics) => void} [draw]
  */
 
-/**
- * @typedef {{
- * 	[K in EventPropNames]?: (event: FederatedPointerEvent | FederatedWheelEvent) => void
- * }} EventHandlers
- */
-
 /** @typedef {ContainerElement & BaseInstance & EventHandlers} Instance */
 
 export const Instance = {};
diff --git a/src/typedefs/PixiElementsImpl.js b/src/typedefs/PixiElementsImpl.js
@@ -1,22 +1,48 @@
 import { NameOverrides } from '../constants/NameOverrides.js';
 
 /** @typedef {typeof import('pixi.js')} PixiType */
+/** @typedef {import('pixi.js').Graphics} Graphics */
+/**
+ * @template T
+ * @typedef {import('react').PropsWithChildren<T>} PropsWithChildren
+ */
+/**
+ * @template T
+ * @typedef {import('react').PropsWithRef<T>} PropsWithRef
+ */
+/**
+ * @template T
+ * @typedef {import('react').RefObject<T>} RefObject
+ */
 
 /** @typedef {import('./AutoFilteredKeys.js').AutoFilteredKeys} AutoFilteredKeys */
+/** @typedef {import('./EventHandlers.js').EventHandlers} EventHandlers */
 /** @typedef {import('./PixiOptions.js').PixiOptions} PixiOptions */
 
 /**
- * @template {T extends PixiOptions ? T : never} T
- * @typedef {T} PixiOptionsType
+ * @template {new (...args: any[]) => any} T
+ * @typedef {import('./ConstructorParams.js').ConstructorParams<T>} ConstructorParams
+ */
+
+/**
+ * @template T
+ * @typedef {{
+ *  [K in keyof T]: T[K] extends (...args: any) => any ? never : T[K]
+ * }} PixiOptionsType
+ */
+
+/**
+ * @template T
+ * @typedef {T extends undefined ? never : Omit<T, 'children'>} OmitChildren
  */
 
 /**
  * @typedef {{
  *  [K in AutoFilteredKeys as K extends keyof typeof NameOverrides ? typeof NameOverrides[K] : Uncapitalize<K>]:
- *      import('react').PropsWithChildren<
- *          Omit<PixiOptionsType<import('./ConstructorParams.js').ConstructorParams<PixiType[K]>>, 'children'>
- *          & { init?: import('./ConstructorParams.js').ConstructorParams<PixiType[K]> }
- *      > & import('react').PropsWithRef<{ ref?: import('react').RefObject<InstanceType<PixiType[K]>> }>
+ *      & PropsWithChildren<OmitChildren<PixiOptionsType<ConstructorParams<PixiType[K]>>>>
+ *      & PropsWithRef<{ ref?: RefObject<InstanceType<PixiType[K]>> }>
+ *      & EventHandlers
+ *      & { draw?: (graphics: Graphics) => void }
  * }} PixiElementsImpl
  */
 export const PixiElementsImpl = {};