convert type defs to proper Typescript

src/components/Application.js

@@ -25,10 +25,10 @@ import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect.js
 
 /**
  * @template T
- * @typedef {import('../typedefs/OmitChildren.js').OmitChildren<T>} OmitChildren
+ * @typedef {import('../typedefs/OmitChildren.ts').OmitChildren<T>} OmitChildren
  */
 
-/** @typedef {import('../typedefs/Root.js').Root} Root */
+/** @typedef {import('../typedefs/Root.ts').Root} Root */
 
 /**
  * @template T

src/components/Context.js

@@ -6,7 +6,7 @@ import { createContext } from 'react';
  * @typedef {import('react').Context<T>} Context
  */
 
-/** @typedef {import('../typedefs/InternalState.js').InternalState} InternalState */
+/** @typedef {import('../typedefs/InternalState.ts').InternalState} InternalState */
 
 export const Context = /** @type {Context<InternalState | null>} */ (createContext(null));
 

src/core/createRoot.js

@@ -10,8 +10,8 @@ import { roots } from './roots.js';
 
 /** @typedef {import('pixi.js').ApplicationOptions} ApplicationOptions */
 
-/** @typedef {import('../typedefs/InternalState.js').InternalState} InternalState */
-/** @typedef {import('../typedefs/Root.js').Root} Root */
+/** @typedef {import('../typedefs/InternalState.ts').InternalState} InternalState */
+/** @typedef {import('../typedefs/Root.ts').Root} Root */
 
 /**
  * Creates a new root for a Pixi React app.

src/core/reconciler.js

@@ -25,8 +25,8 @@ import { removeChild } from '../helpers/removeChild.js';
 import { resetAfterCommit } from '../helpers/resetAfterCommit.js';
 import { shouldSetTextContent } from '../helpers/shouldSetTextContent.js';
 
-/** @typedef {import('../typedefs/HostConfig.js').HostConfig} HostConfig */
-/** @typedef {import('../typedefs/Instance.js').Instance} Instance */
+/** @typedef {import('../typedefs/HostConfig.ts').HostConfig} HostConfig */
+/** @typedef {import('../typedefs/Instance.ts').Instance} Instance */
 
 /**
  * @type {Reconciler.HostConfig<

src/core/roots.js

@@ -1,6 +1,6 @@
 /**
  * We store roots here since we can render to multiple canvases
  *
- * @type {Map<HTMLElement, import('../typedefs/Root.js').Root>}
+ * @type {Map<HTMLElement, import('../typedefs/Root.ts').Root>}
  */
 export const roots = new Map();

src/global.ts

@@ -1,10 +1,10 @@
-import type { NamespacedPixiElementsImpl } from './typedefs/NamespacedPixiElementsImpl';
-import type { PixiElementsImpl } from './typedefs/PixiElementsImpl';
+import type { NamespacedPixiElementsImpl } from './typedefs/NamespacedPixiElementsImpl.ts';
+import type { PixiElementsImpl } from './typedefs/PixiElementsImpl.ts';
 
 declare global
 {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace React.JSX
+    namespace JSX
     {
         interface IntrinsicElements extends PixiElementsImpl, NamespacedPixiElementsImpl {}
     }

src/helpers/appendChild.js

@@ -1,6 +1,6 @@
 import { log } from './log.js';
 
-/** @typedef {import('../typedefs/Instance.js').Instance} Instance */
+/** @typedef {import('../typedefs/Instance.ts').Instance} Instance */
 
 /**
  * Adds elements to our application.

src/helpers/applyProps.js

@@ -14,10 +14,10 @@ import { log } from './log.js';
 /** @typedef {import('pixi.js').FederatedPointerEvent} FederatedPointerEvent */
 /** @typedef {import('pixi.js').FederatedWheelEvent} FederatedWheelEvent */
 
-/** @typedef {import('../typedefs/DiffSet.js').DiffSet} DiffSet */
-/** @typedef {import('../typedefs/Instance.js').Instance} Instance */
-/** @typedef {import('../typedefs/InstanceProps.js').InstanceProps} InstanceProps */
-/** @typedef {import('../typedefs/MaybeInstance.js').MaybeInstance} MaybeInstance */
+/** @typedef {import('../typedefs/DiffSet.ts').DiffSet} DiffSet */
+/** @typedef {import('../typedefs/Instance.ts').Instance} Instance */
+/** @typedef {import('../typedefs/InstanceProps.ts').InstanceProps} InstanceProps */
+/** @typedef {import('../typedefs/MaybeInstance.ts').MaybeInstance} MaybeInstance */
 
 const DEFAULT = '__default';
 const DEFAULTS_CONTAINERS = new Map();
@@ -40,7 +40,18 @@ export function applyProps(instance, data)
     } = instance;
 
     /** @type {DiffSet} */
-    const { changes } = /** @type {*} */ (isDiffSet(data) ? data : diffProps(data, instanceProps));
+    let typedData;
+
+    if (isDiffSet(data))
+    {
+        typedData = /** @type {DiffSet} */ (data);
+    }
+    else
+    {
+        typedData = diffProps(/** @type {InstanceProps} */ (data), instanceProps);
+    }
+
+    const { changes } = typedData;
 
     let changeIndex = 0;
 

src/helpers/catalogue.js

@@ -1,4 +1,4 @@
-/** @typedef {import('../typedefs/Instance.js').Instance} Instance */
+/** @typedef {import('../typedefs/Instance.ts').Instance} Instance */
 
 /**
  * @type {{

src/helpers/commitUpdate.js

@@ -2,10 +2,10 @@ import { applyProps } from '../helpers/applyProps.js';
 import { log } from '../helpers/log.js';
 import { switchInstance } from './switchInstance.js';
 
-/** @typedef {import('../typedefs/DiffSet.js').DiffSet} DiffSet */
-/** @typedef {import('../typedefs/HostConfig.js').HostConfig} HostConfig */
-/** @typedef {import('../typedefs/Instance.js').Instance} Instance */
-/** @typedef {import('../typedefs/InstanceProps.js').InstanceProps} InstanceProps */
+/** @typedef {import('../typedefs/DiffSet.ts').DiffSet} DiffSet */
+/** @typedef {import('../typedefs/HostConfig.ts').HostConfig} HostConfig */
+/** @typedef {import('../typedefs/Instance.ts').Instance} Instance */
+/** @typedef {import('../typedefs/InstanceProps.ts').InstanceProps} InstanceProps */
 
 /**
  * @param {Instance} instance The instance to mutate.

src/helpers/createInstance.js

@@ -6,9 +6,9 @@ import { gentleCloneProps } from './gentleCloneProps.js';
 import { log } from './log.js';
 import { prepareInstance } from './prepareInstance.js';
 
-/** @typedef {import('../typedefs/HostConfig.js').HostConfig} HostConfig */
-/** @typedef {import('../typedefs/Instance.js').Instance} Instance */
-/** @typedef {import('../typedefs/InstanceProps.js').InstanceProps} InstanceProps */
+/** @typedef {import('../typedefs/HostConfig.ts').HostConfig} HostConfig */
+/** @typedef {import('../typedefs/Instance.ts').Instance} Instance */
+/** @typedef {import('../typedefs/InstanceProps.ts').InstanceProps} InstanceProps */
 
 /**
  * @param {HostConfig['type']} type

src/helpers/createTextInstance.js

@@ -1,6 +1,6 @@
 import { log } from './log.js';
 
-/** @typedef {import('../typedefs/Instance.js').Instance} Instance */
+/** @typedef {import('../typedefs/Instance.ts').Instance} Instance */
 
 /**
  * text: string, rootContainer: Instance, hostContext: null, internalHandle: any

src/helpers/diffProps.js

@@ -5,9 +5,9 @@ import {
 import { isEqual } from './compare.js';
 import { gentleCloneProps } from './gentleCloneProps.js';
 
-/** @typedef {import('../typedefs/Change.js').Change} Change */
-/** @typedef {import('../typedefs/DiffSet.js').DiffSet} DiffSet */
-/** @typedef {import('../typedefs/InstanceProps.js').InstanceProps} InstanceProps */
+/** @typedef {import('../typedefs/Change.ts').Change} Change */
+/** @typedef {import('../typedefs/DiffSet.ts').DiffSet} DiffSet */
+/** @typedef {import('../typedefs/InstanceProps.ts').InstanceProps} InstanceProps */
 
 const DEFAULT = '__default';
 

src/helpers/extend.js

@@ -1,6 +1,6 @@
 import { catalogue } from './catalogue.js';
 
-/** @typedef {import('../typedefs/AutoFilteredKeys.js').AutoFilteredKeys} AutoFilteredKeys */
+/** @typedef {import('../typedefs/AutoFilteredKeys.ts').AutoFilteredKeys} AutoFilteredKeys */
 
 /**
  * Expose Pixi.js components for use in JSX.

src/helpers/getInstanceFromScope.js

@@ -3,7 +3,7 @@ import { log } from './log.js';
 /**
  * @param {*} _scope Unused.
  * @throws {Error} Always throws, because we don't support this.
- * @returns {import('../typedefs/Instance.js').Instance}
+ * @returns {import('../typedefs/Instance.ts').Instance}
  */
 export function getInstanceFromScope(_scope)
 {

src/helpers/insertBefore.js

@@ -1,7 +1,7 @@
 import { invariant } from './invariant.js';
 import { log } from './log.js';
 
-/** @typedef {import('../typedefs/Instance.js').Instance} Instance */
+/** @typedef {import('../typedefs/Instance.ts').Instance} Instance */
 
 /**
  * @param {Instance} parentInstance

src/helpers/isDiffSet.js

@@ -4,7 +4,7 @@
  */
 export function isDiffSet(input)
 {
-    const inputAsDiffSet = /** @type {import('../typedefs/DiffSet.js').DiffSet} */ input;
+    const inputAsDiffSet = /** @type {import('../typedefs/DiffSet.ts').DiffSet} */ input;
 
     if (!inputAsDiffSet)
     {

src/helpers/prepareInstance.js

@@ -1,7 +1,7 @@
 /** @typedef {import('pixi.js').Container} Container */
-/** @typedef {import('../typedefs/ContainerElement.js').ContainerElement} ContainerElement */
-/** @typedef {import('../typedefs/Instance.js').Instance} Instance */
-/** @typedef {import('../typedefs/InstanceState.js').InstanceState} InstanceState */
+/** @typedef {import('../typedefs/ContainerElement.ts').ContainerElement} ContainerElement */
+/** @typedef {import('../typedefs/Instance.ts').Instance} Instance */
+/** @typedef {import('../typedefs/InstanceState.ts').InstanceState} InstanceState */
 
 /**
  * Create the instance with the provided sate and attach the component to it.

src/helpers/prepareUpdate.js

@@ -1,12 +1,12 @@
 import { diffProps } from './diffProps.js';
 import { log } from './log.js';
 
-/** @typedef {import('../typedefs/DiffSet.js').DiffSet} DiffSet */
-/** @typedef {import('../typedefs/InstanceProps.js').InstanceProps} InstanceProps */
+/** @typedef {import('../typedefs/DiffSet.ts').DiffSet} DiffSet */
+/** @typedef {import('../typedefs/InstanceProps.ts').InstanceProps} InstanceProps */
 
 /**
  *
- * @param {import('../typedefs/Instance.js').Instance} _instance Unused.
+ * @param {import('../typedefs/Instance.ts').Instance} _instance Unused.
  * @param {string} _type Unused.
  * @param {InstanceProps} oldProps Old props.
  * @param {InstanceProps} newProps New props.

src/helpers/removeChild.js

@@ -1,6 +1,6 @@
 import { log } from './log.js';
 
-/** @typedef {import('../typedefs/Instance.js').Instance} Instance */
+/** @typedef {import('../typedefs/Instance.ts').Instance} Instance */
 
 /**
  * Removes elements from our scene and disposes of them.

src/helpers/switchInstance.js

@@ -2,8 +2,8 @@ import { appendChild } from './appendChild.js';
 import { createInstance } from './createInstance.js';
 import { removeChild } from './removeChild.js';
 
-/** @typedef {import('../typedefs/HostConfig.js').HostConfig} HostConfig */
-/** @typedef {import('../typedefs/Instance.js').Instance} Instance */
+/** @typedef {import('../typedefs/HostConfig.ts').HostConfig} HostConfig */
+/** @typedef {import('../typedefs/Instance.ts').Instance} Instance */
 
 /**
  * @param {HostConfig['instance']} instance

src/hooks/useApp.js

@@ -3,7 +3,7 @@ import { useContext } from 'react';
 import { Context } from '../components/Context.js';
 import { invariant } from '../helpers/invariant';
 
-/** @typedef {import('../typedefs/InternalState.js').InternalState} InternalState */
+/** @typedef {import('../typedefs/InternalState.ts').InternalState} InternalState */
 
 export function useApp()
 {

src/index.js

@@ -13,4 +13,4 @@ export { useTick } from './hooks/useTick.js';
 // 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.ts';
+export * from './global.js';

src/typedefs/AutoFilteredKeys.ts

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

src/typedefs/Change.ts

@@ -0,0 +1,6 @@
+export type Change = [
+    string, // key
+    unknown, // value
+    boolean, // isEvent
+    string[], // keys
+];

src/typedefs/ConstructorParams.ts

@@ -0,0 +1 @@
+export type ConstructorParams<T extends abstract new (...args: any) => any> = T extends new (...args: infer A) => any ? A[0] : never;

src/typedefs/ContainerElement.ts

@@ -0,0 +1,4 @@
+import type { Container } from 'pixi.js';
+import type { ReactElement } from 'react';
+
+export type ContainerElement = Container & ReactElement;

src/typedefs/DiffSet.ts

@@ -0,0 +1,6 @@
+import type { Change } from './Change.ts';
+
+export interface DiffSet
+{
+    changes: Change[],
+}

src/typedefs/EventHandlers.ts

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

src/typedefs/HostConfig.ts

@@ -0,0 +1,20 @@
+import type { Instance } from './Instance.ts';
+import type { NamespacedPixiElementsImpl } from './NamespacedPixiElementsImpl.ts';
+import type { PixiElementsImpl } from './PixiElementsImpl.ts';
+
+export interface HostConfig
+{
+    type: keyof PixiElementsImpl | keyof NamespacedPixiElementsImpl;
+    props: Record<string, unknown>;
+    container: Instance;
+    instance: Instance;
+    textInstance: Instance;
+    suspenseInstance: Instance;
+    hydratableInstance: never;
+    publicInstance: Instance;
+    hostContext: null;
+    updatePayload: object;
+    childSet: never;
+    timeoutHandle: number;
+    noTimeout: -1;
+}