wip

pixijs · May 17, 2024 · 54be4df · 54be4df
1 parent 659e931
commit 54be4df
Show file tree

Hide file tree

Showing 57 changed files with 3,204 additions and 3,120 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v18
+v20
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "hosted-git-info": "^2.1.4"
   },
   "dependencies": {
-    "pixi.js": "^8.0.0",
+    "pixi.js": "^8.1.0",
     "@react-spring/animated": "^9.6.1",
     "@react-spring/types": "^9.6.1",
     "react": "^18.0.0",
@@ -61,28 +61,29 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.2.1",
     "@rollup/plugin-typescript": "^10.0.1",
-    "@types/jest": "^29.2.4",
+    "@types/jest": "^29.5.12",
     "@types/react": "17.0.15",
     "@types/react-dom": "17.0.9",
     "@types/react-reconciler": "0.28.2",
-    "babel-jest": "^29.3.1",
+    "babel-jest": "^29.7.0",
     "babel-plugin-module-resolver": "4.1.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.29.0",
     "eslint-plugin-react": "^7.31.11",
     "husky": "^8.0.2",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
-    "jest-extended": "^3.2.0",
-    "jest-watch-typeahead": "^2.2.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-extended": "^4.0.2",
+    "jest-watch-typeahead": "^2.2.2",
+    "jest-webgl-canvas-mock": "^2.5.3",
     "lerna": "^6.0.3",
     "lint-staged": "^13.1.0",
     "nx": "15.3.0",
     "rimraf": "^3.0.2",
     "rollup": "^3.7.0",
     "rollup-plugin-filesize": "^9.1.2",
     "rollup-plugin-visualizer": "^5.9.0",
-    "ts-jest": "^29.0.3",
+    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4"
   }

diff --git a/packages/animated/index.d.ts b/packages/animated/index.d.ts
@@ -1,22 +1,25 @@
-import * as React from 'react';
-import { Application as PixiApplication } from '@pixi/app'
-import { Texture as PixiTexture } from '@pixi/core'
-import { Container as PixiContainer, DisplayObject as PixiDisplayObject } from '@pixi/display'
-import { Graphics as PixiGraphics } from '@pixi/graphics'
-import { Point as PixiPoint, ObservablePoint as PixiObservablePoint } from '@pixi/math'
+import { ComponentPropsWithRef, ElementType } from '@react-spring/types';
 import {
-    NineSlicePlane as PixiNineSlicePlane,
-    SimpleRope as PixiSimpleRope,
-    SimpleMesh as PixiSimpleMesh,
-} from '@pixi/mesh-extras'
-import { Text as PixiText } from '@pixi/text'
-import { BitmapText as PixiBitmapText } from '@pixi/text-bitmap'
-import { Ticker as PixiTicker } from '@pixi/ticker'
-import { Sprite as PixiSprite } from '@pixi/sprite'
-import { TilingSprite as PixiTilingSprite } from '@pixi/sprite-tiling'
-import { AnimatedSprite as PixiAnimatedSprite } from '@pixi/sprite-animated'
-import { ParticleContainer as PixiParticleContainer } from '@pixi/particle-container'
-import { ElementType, ComponentPropsWithRef } from '@react-spring/types';
+    AnimatedSprite as PixiAnimatedSprite,
+    Application as PixiApplication,
+    ApplicationOptions as PixiApplicationOptions,
+    BitmapText as PixiBitmapText,
+    Container as PixiContainer,
+    Graphics as PixiGraphics,
+    MeshRope as PixiMeshRope,
+    MeshSimple as PixiMeshSimple,
+    NineSliceSprite as PixiNineSliceSprite,
+    ObservablePoint as PixiObservablePoint,
+    Point as PixiPoint,
+    Sprite as PixiSprite,
+    Text as PixiText,
+    TextStyle as PixiTextStyle,
+    TextStyleOptions as PixiTextStyleOptions,
+    Texture as PixiTexture,
+    Ticker as PixiTicker,
+    TilingSprite as PixiTilingSprite
+} from 'pixi.js';
+import * as React from 'react';
 import { AnimatedProps } from 'react-spring';
 
 type AnimatedComponent<T extends ElementType> = React.ForwardRefExoticComponent<AnimatedProps<ComponentPropsWithRef<T>>>;
@@ -134,7 +137,7 @@ declare namespace _ReactPixi {
     [P in keyof T]-?: IfEquals<{ [Q in P]: T[P] }, { -readonly [Q in P]: T[P] }, never, P>
   }[keyof T];
 
-  type ApplicationOptions = ConstructorParameters<typeof PixiApplication>[0];
+  type ApplicationOptions = PixiApplicationOptions;
   type PointLike =
     | PixiPoint
     | PixiObservablePoint
@@ -183,7 +186,7 @@ declare namespace _ReactPixi {
 
   type P = 'position' | 'scale' | 'pivot' | 'anchor' | 'skew';
 
-  type Container<T extends PixiDisplayObject, U = {}> = Partial<
+  type Container<T extends PixiContainer, U = {}> = Partial<
     Omit<T, 'children' | P | ReadonlyKeys<T> | keyof U> &
     WithPointLike<P>
   > & U & InteractionEvents & { ref?: React.Ref<T> };
@@ -217,20 +220,11 @@ declare namespace _ReactPixi {
        *
        * style={{ font: '50px Desyrel' }}
        */
-      style?: ConstructorParameters<typeof PixiBitmapText>[1];
+      style?: PixiTextStyle|PixiTextStyleOptions
     }
   >;
 
-  type INineSlicePlane = Container<PixiNineSlicePlane, WithSource>;
-  type IParticleContainer = Container<
-    PixiParticleContainer,
-    {
-      maxSize?: ConstructorParameters<typeof PixiParticleContainer>[0];
-      properties?: ConstructorParameters<typeof PixiParticleContainer>[1];
-      batchSize?: ConstructorParameters<typeof PixiParticleContainer>[2];
-      autoResize?: ConstructorParameters<typeof PixiParticleContainer>[3];
-    }
-  >;
+  type INineSliceSprite = Container<PixiNineSliceSprite, WithSource>;
 
   type ITilingSprite = Container<
     PixiTilingSprite,
@@ -240,12 +234,12 @@ declare namespace _ReactPixi {
     }
   >;
 
-  type ISimpleRope = Container<PixiSimpleRope, WithSource>;
-  type ISimpleMesh = Container<
-    PixiSimpleMesh,
+  type IMeshRope = Container<PixiMeshRope, WithSource>;
+  type IMeshSimple = Container<
+    PixiMeshSimple,
     WithSource & {
-      uvs?: ConstructorParameters<typeof PixiSimpleMesh>[2];
-      indices?: ConstructorParameters<typeof PixiSimpleMesh>[3];
+      uvs?: Float32Array;
+      indices?: Float32Array;
     }
   >;
 
@@ -308,22 +302,22 @@ declare namespace _ReactPixi {
 
   interface ICustomComponent<
     P extends { [key: string]: any },
-    PixiInstance extends PixiDisplayObject
+    PixiInstance extends PixiContainer
     > {
     /**
      * Create the PIXI instance
      * The component is created during React reconciliation.
      *
      * @param props passed down props
-     * @returns {PixiDisplayObject}
+     * @returns {PixiContainer}
      */
     create(props: P): PixiInstance;
 
     /**
      * Instance mounted
      * This is called during React reconciliation.
      *
-     * @param {PixiDisplayObject} instance
+     * @param {PixiContainer} instance
      * @param {PixiContainer} parent
      */
     didMount?(instance: PixiInstance, parent: PixiContainer): void;
@@ -332,7 +326,7 @@ declare namespace _ReactPixi {
      * Instance will unmount
      * This is called during React reconciliation.
      *
-     * @param {PixiDisplayObject} instance
+     * @param {PixiContainer} instance
      * @param {PixiContainer} parent
      */
     willUnmount?(instance: PixiInstance, parent: PixiContainer): void;
@@ -341,7 +335,7 @@ declare namespace _ReactPixi {
      * Apply props for this custom component.
      * This is called during React reconciliation.
      *
-     * @param {PixiDisplayObject} instance
+     * @param {PixiContainer} instance
      * @param oldProps
      * @param newProps
      */
@@ -359,11 +353,10 @@ export const Sprite: AnimatedComponent<React.FC<React.PropsWithChildren<_ReactPi
 export const Container: AnimatedComponent<React.FC<React.PropsWithChildren<_ReactPixi.IContainer>>>;
 export const Graphics: AnimatedComponent<React.FC<_ReactPixi.IGraphics>>;
 export const BitmapText: AnimatedComponent<React.FC<_ReactPixi.IBitmapText>>;
-export const NineSlicePlane: AnimatedComponent<React.FC<_ReactPixi.INineSlicePlane>>;
-export const ParticleContainer: AnimatedComponent<React.FC<React.PropsWithChildren<_ReactPixi.IParticleContainer>>>;
+export const NineSliceSprite: AnimatedComponent<React.FC<_ReactPixi.INineSliceSprite>>;
 export const TilingSprite: AnimatedComponent<React.FC<_ReactPixi.ITilingSprite>>;
-export const SimpleRope: AnimatedComponent<React.FC<_ReactPixi.ISimpleRope>>;
-export const SimpleMesh: AnimatedComponent<React.FC<_ReactPixi.ISimpleMesh>>;
+export const MeshRope: AnimatedComponent<React.FC<_ReactPixi.IMeshRope>>;
+export const MeshSimple: AnimatedComponent<React.FC<_ReactPixi.IMeshSimple>>;
 export const AnimatedSprite: AnimatedComponent<React.FC<_ReactPixi.IAnimatedSprite>>;
 
 // renderer
@@ -405,7 +398,7 @@ export class Stage extends React.Component<_ReactPixi.IStage> { }
  *   }
  * });
  */
-export const PixiComponent: <Props extends { [key: string]: any; }, PixiInstance extends PixiDisplayObject>(
+export const PixiComponent: <Props extends { [key: string]: any; }, PixiInstance extends PixiContainer>(
   componentName: string,
   lifecycle: _ReactPixi.ICustomComponent<Props, PixiInstance>
 ) => AnimatedComponent<React.FC<Props & { ref?: React.Ref<PixiInstance> }>>;
@@ -475,7 +468,7 @@ export const withPixiApp: <P extends { app: PixiApplication }>(
  * });
  */
 export const applyDefaultProps: <P extends object>(
-  instance: PixiDisplayObject,
+  instance: PixiContainer,
   oldProps: P,
   newProps: P
 ) => void;
@@ -501,7 +494,7 @@ export const applyDefaultProps: <P extends object>(
  */
 export const withFilters: <
   Component extends React.ComponentType<
-    _ReactPixi.Container<PixiDisplayObject, any>
+    _ReactPixi.Container<PixiContainer, any>
   >,
   Filters extends { [filterKey: string]: any }
   >(

diff --git a/packages/animated/package.json b/packages/animated/package.json
@@ -36,7 +36,7 @@
     "@pixi/react": "^7.1.2"
   },
   "peerDependencies": {
-    "pixi.js": ">=8.0.0",
+    "pixi.js": ">=8.1.0",
     "@pixi/react": ">=8.0.0",
     "@react-spring/animated": ">=9.0.0",
     "prop-types": "^15.8.1",

diff --git a/packages/animated/rollup.config.mjs b/packages/animated/rollup.config.mjs
@@ -9,20 +9,7 @@ const builds = ['cjs', 'es'].map(
         {
             external: [
                 '@pixi/react',
-                '@pixi/app',
-                '@pixi/core',
-                '@pixi/display',
-                '@pixi/graphics',
-                '@pixi/math',
-                '@pixi/mesh-extras',
-                '@pixi/text',
-                '@pixi/text-bitmap',
-                '@pixi/ticker',
-                '@pixi/sprite',
-                '@pixi/sprite-tiling',
-                '@pixi/sprite-animated',
-                '@pixi/particle-container',
-                '@react-spring/animated',
+                'pixi.js',
                 'react',
                 'react-dom',
                 'react-spring'

diff --git a/packages/animated/src/index.js b/packages/animated/src/index.js
@@ -5,11 +5,10 @@ import { animated } from './react-spring';
 export const BitmapText = animated[TYPES.BitmapText];
 export const Container = animated[TYPES.Container];
 export const Graphics = animated[TYPES.Graphics];
-export const NineSlicePlane = animated[TYPES.NineSlicePlane];
-export const ParticleContainer = animated[TYPES.ParticleContainer];
+export const NineSliceSprite = animated[TYPES.NineSliceSprite];
 export const Sprite = animated[TYPES.Sprite];
 export const AnimatedSprite = animated[TYPES.AnimatedSprite];
 export const Text = animated[TYPES.Text];
 export const TilingSprite = animated[TYPES.TilingSprite];
-export const SimpleMesh = animated[TYPES.SimpleMesh];
-export const SimpleRope = animated[TYPES.SimpleRope];
+export const MeshSimple = animated[TYPES.MeshSimple];
+export const MeshRope = animated[TYPES.MeshRope];
diff --git a/packages/animated/test/__snapshots__/index.spec.js.snap b/packages/animated/test/__snapshots__/index.spec.js.snap
@@ -18,19 +18,15 @@ exports[`index export modules for react-spring 1`] = `
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
   },
-  "NineSlicePlane": {
+  "MeshRope": {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
   },
-  "ParticleContainer": {
+  "MeshSimple": {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
   },
-  "SimpleMesh": {
-    "$$typeof": Symbol(react.forward_ref),
-    "render": [Function],
-  },
-  "SimpleRope": {
+  "NineSliceSprite": {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
   },

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -22,7 +22,7 @@
     "@pixi/react-animated": "*",
     "clsx": "^1.2.1",
     "lodash.times": "^4.3.2",
-    "pixi.js": "^8.0.0",
+    "pixi.js": "^8.1.1",
     "prism-react-renderer": "^1.3.5"
   },
   "devDependencies": {