Merge pull request #522 from thejustinwalsh/beta

Typescript Type Improvements

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -44,7 +44,7 @@
     "prepare": "husky install",
     "prerelease": "npm run test:lint && npm run build",
     "release": "xs bump,publish,git-push",
-    "test": "vitest run",
+    "test": "tsc --project tsconfig.test.json && vitest run",
     "test:lint": "xs lint",
     "test:watch": "vitest"
   },

src/helpers/applyProps.ts

@@ -85,7 +85,7 @@ export function applyProps(
         let currentInstance = instance;
         let targetProp = currentInstance[key];
 
-        if ((key === 'draw') && (typeof value === 'function'))
+        if ((key as string === 'draw') && (typeof value === 'function'))
         {
             if (instance instanceof Graphics)
             {

src/typedefs/ConstructorOptions.ts

@@ -9,4 +9,5 @@ export type ConstructorOptions<T extends new (...args: any[]) => any> =
         ? unknown extends R
             ? ConstructorParameters<T>[0]
             : R
-        : never;
+        : unknown;
+

src/typedefs/PixiElements.ts

@@ -4,9 +4,6 @@ import type { PixiComponents } from './PixiComponents';
 import type { PixiReactElementProps } from './PixiReactNode';
 
 export type PixiElements = {
-    [K in PixiComponents as K extends keyof typeof NameOverrides ? typeof NameOverrides[K] : Uncapitalize<K>]: {
-        [K2 in keyof PixiReactElementProps<typeof PIXI[K]> as K2]?: PixiReactElementProps<typeof PIXI[K]>[K2] extends (...args: any) => any
-            ? never
-            : PixiReactElementProps<typeof PIXI[K]>[K2];
-    };
+    [K in PixiComponents as K extends keyof typeof NameOverrides ? typeof NameOverrides[K] : Uncapitalize<K>]:
+    PixiReactElementProps<typeof PIXI[K]>;
 };

src/typedefs/PixiReactNode.ts

@@ -1,3 +1,7 @@
+import { type PixiToReactEventPropNames } from '../constants/EventPropNames';
+import { type ConstructorOptions } from './ConstructorOptions';
+import { type ExcludeFunctionProps, type OmitKeys } from './UtilityTypes';
+
 import type {
     Container,
     Graphics,
@@ -6,25 +10,23 @@ import type {
     Key,
     Ref,
 } from 'react';
-import type { PixiToReactEventPropNames } from '../constants/EventPropNames';
-import type { ConstructorOptions } from './ConstructorOptions';
 import type { DrawCallback } from './DrawCallback';
 import type { EventHandlers } from './EventHandlers';
 import type { InstanceState } from './InstanceState';
 import type { PixiReactChildNode } from './PixiReactChildNode';
 
 export interface BaseNodeProps<T extends new (...args: any) => any = typeof Container>
 {
-    children: T extends Container
+    children?: T extends Container
         ? PixiReactChildNode
         : never;
-    draw?: T extends Graphics
-        ? DrawCallback
-        : null;
     key?: Key;
     ref?: Ref<T>;
 }
 
+export type GraphicsProps<T> = T extends Graphics ?
+    { draw: DrawCallback } : unknown;
+
 export interface NodeProps<T extends new (...args: any) => any = typeof Container> extends BaseNodeProps<T>
 {
     __pixireact: InstanceState,
@@ -42,17 +44,6 @@ export type PixiReactNode<T extends new (...args: any) => any = typeof Container
 
 export type PixiReactElementProps<T extends new (...args: any) => any = typeof Container> =
     BaseNodeProps<InstanceType<T>>
-    & EventHandlers
-    & {
-        [
-        K in keyof ConstructorOptions<T> as (
-            K extends keyof typeof PixiToReactEventPropNames
-                ? never
-                : K extends keyof NodeProps<InstanceType<T>>
-                    ? ConstructorOptions<T>[K] extends NodeProps<InstanceType<T>>[K]
-                        ? never
-                        : K
-                    : K
-        )
-        ]: ConstructorOptions<T>[K];
-    };
+    & GraphicsProps<InstanceType<T>>
+    & OmitKeys<ExcludeFunctionProps<ConstructorOptions<T>>, NodeProps<T> & typeof PixiToReactEventPropNames>
+    & EventHandlers;

src/typedefs/UtilityTypes.ts

@@ -0,0 +1,7 @@
+export type ExcludeFunctionProps<T> = {
+    [K in keyof T as T[K] extends (...args: any[]) => any ? never : K]: T[K];
+};
+
+export type OmitKeys<T1, T2> = {
+    [K in keyof T1 as K extends keyof T2 ? never : K]: T1[K];
+};

test/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../tsconfig.test.json",
+}

test/unit/typedefs/PixiElements.test.tsx

@@ -0,0 +1,35 @@
+import { AlphaFilter, Container, Graphics, Sprite, Text, Texture } from 'pixi.js';
+import { describe, expect, it } from 'vitest';
+import { extend } from '../../../src';
+
+extend({ Container, Graphics, Sprite, Text, Texture, AlphaFilter });
+
+describe('PixiElements', () =>
+{
+    it('applies children and props', () =>
+    {
+        const elements = (
+            <container>
+                <graphics draw={(_: Graphics) => { /* noop */ }} />
+                <sprite texture={Texture.EMPTY} />
+                <alphaFilter alpha={0.5} />
+                <pixiText anchor={{ x: 0.5, y: 0.5 }} text="Hello, World!" />
+            </container>
+        );
+
+        expect(elements.props.children).to.have.length(4);
+
+        expect(elements.props.children[0].type).to.equal('graphics');
+        expect(elements.props.children[0].props.draw).to.be.a('function');
+
+        expect(elements.props.children[1].type).to.equal('sprite');
+        expect(elements.props.children[1].props.draw).to.be.undefined;
+        expect(elements.props.children[1].props.texture).to.be.instanceOf(Texture);
+
+        expect(elements.props.children[2].type).to.equal('alphaFilter');
+        expect(elements.props.children[2].props.alpha).to.equal(0.5);
+
+        expect(elements.props.children[3].type).to.equal('pixiText');
+        expect(elements.props.children[3].props.text).to.equal('Hello, World!');
+    });
+});

tsconfig.eslint.json

@@ -5,6 +5,7 @@
     "release.config.js",
   ],
   "include": [
+    "./lib/**/*",
     "./test/**/*",
     "./vitest.setup.ts",
     "./vitest.workspace.ts"

tsconfig.json

@@ -28,7 +28,7 @@
   "exclude": [
     "dist",
     "node_modules",
-    "types"
+    "types",
   ],
   "include": [
     "./src/**/*",

tsconfig.test.json

@@ -0,0 +1,38 @@
+
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "allowImportingTsExtensions": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "./src",
+    "checkJs": true,
+    "noEmit": true,
+    "emitDeclarationOnly": false,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "lib": [
+      "DOM",
+      "ESNext"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "pretty": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "target": "ESNext"
+  },
+  "exclude": [
+    "dist",
+    "node_modules",
+    "types"
+  ],
+  "include": [
+    "./src/**/*",
+    "./test/**/*",
+  ]
+}

vitest.workspace.ts

@@ -4,7 +4,7 @@ export default defineWorkspace([
     {
         test: {
             environment: 'jsdom',
-            include: ['test/unit/**/*.test.ts'],
+            include: ['test/unit/**/*.test.ts?(x)'],
             pool: 'forks',
         },
     },