From 403d180ee2cf811a935ada6e3e9083ca520ae3e6 Mon Sep 17 00:00:00 2001 From: Trezy Date: Fri, 21 Jun 2024 14:03:11 -0500 Subject: [PATCH] fix: restore Pixi component property typings --- package-lock.json | 8 +++---- package.json | 2 +- src/constants/EventPropNames.js | 38 +++++++++++++++++++++++++++++-- src/constants/NameOverrides.js | 5 ++++ src/helpers/applyProps.js | 32 ++++++++++++-------------- src/helpers/diffProps.js | 7 ++++-- src/typedefs/ConstructorParams.js | 7 +----- src/typedefs/EventHandlers.js | 12 ++++++++++ src/typedefs/Instance.js | 11 +-------- src/typedefs/PixiElementsImpl.js | 38 ++++++++++++++++++++++++++----- 10 files changed, 111 insertions(+), 49 deletions(-) create mode 100644 src/typedefs/EventHandlers.js diff --git a/package-lock.json b/package-lock.json index 5bd50fae..0990f3d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,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", @@ -13227,9 +13227,9 @@ } }, "node_modules/pixi.js": { - "version": "8.1.5-dev.1ebdfc5", - "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.1.5-dev.1ebdfc5.tgz", - "integrity": "sha512-50FAtsgaS2eI+z3+CTbVLLhAC5XIOUeoeOt/3Yixfl+gpGpDYAbSi9x3MVmGKNJdB4jrUYVFR87FBAopzqHxgw==", + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.2.0.tgz", + "integrity": "sha512-hwPZ3sBYNbgrTyRmYAjQUyqZehiTxc1Qy0SI9GGrHLwtC15AtY7JaAk3ZVjnUo04wz9b0BHLjpRYnEUuIOENMw==", "dev": true, "dependencies": { "@pixi/colord": "^2.9.6", diff --git a/package.json b/package.json index 89127680..a4d5c760 100644 --- 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 index 39457634..c50234a6 100644 --- a/src/constants/EventPropNames.js +++ b/src/constants/EventPropNames.js @@ -1,5 +1,39 @@ -// MouseEventHandler -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 index 5146daf0..d09db6e6 100644 --- 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 index 080a1396..cf165c16 100644 --- 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} */ 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 index 2ea9bc51..b05edbd9 100644 --- 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 index cf0dd169..a0066732 100644 --- 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} 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 new file mode 100644 index 00000000..79b3cb8b --- /dev/null +++ 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 index d443430c..71981ed7 100644 --- 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 index 132ebfa6..8dc6e2d2 100644 --- 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} PropsWithChildren + */ +/** + * @template T + * @typedef {import('react').PropsWithRef} PropsWithRef + */ +/** + * @template T + * @typedef {import('react').RefObject} 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} 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} OmitChildren */ /** * @typedef {{ * [K in AutoFilteredKeys as K extends keyof typeof NameOverrides ? typeof NameOverrides[K] : Uncapitalize]: - * import('react').PropsWithChildren< - * Omit>, 'children'> - * & { init?: import('./ConstructorParams.js').ConstructorParams } - * > & import('react').PropsWithRef<{ ref?: import('react').RefObject> }> + * & PropsWithChildren>>> + * & PropsWithRef<{ ref?: RefObject> }> + * & EventHandlers + * & { draw?: (graphics: Graphics) => void } * }} PixiElementsImpl */ export const PixiElementsImpl = {};