fix(types): pass generic type to GameObjectProps

src/components/GameObjects.ts

@@ -19,7 +19,7 @@ import type { GameObjectProps as Props, RecursivePartial } from '../types';
  * For most use cases it is recommended to use XML. If you wish to use JSON, the formatting should be equal to the result of converting a valid XML file through the popular X2JS library. An online tool for conversion can be found here: http://codebeautify.org/xmltojson
  */
 export const BitmapText = GameObjects.BitmapText as unknown as FC<
-  Props & RecursivePartial<GameObjects.BitmapText>
+  Props<GameObjects.BitmapText> & RecursivePartial<GameObjects.BitmapText>
 >;
 
 /**
@@ -40,7 +40,8 @@ export const BitmapText = GameObjects.BitmapText as unknown as FC<
  * For most use cases it is recommended to use XML. If you wish to use JSON, the formatting should be equal to the result of converting a valid XML file through the popular X2JS library. An online tool for conversion can be found here: http://codebeautify.org/xmltojson
  */
 export const DynamicBitmapText = GameObjects.DynamicBitmapText as unknown as FC<
-  Props & RecursivePartial<GameObjects.DynamicBitmapText>
+  Props<GameObjects.DynamicBitmapText> &
+    RecursivePartial<GameObjects.DynamicBitmapText>
 >;
 
 /**
@@ -53,7 +54,7 @@ export const DynamicBitmapText = GameObjects.DynamicBitmapText as unknown as FC<
  * If you have a need to blast a large volume of frames around the screen then Blitter objects are well worth investigating. They are especially useful for using as a base for your own special effects systems.
  */
 export const Blitter = GameObjects.Blitter as unknown as FC<
-  Props & RecursivePartial<GameObjects.Blitter>
+  Props<GameObjects.Blitter> & RecursivePartial<GameObjects.Blitter>
 >;
 
 /**
@@ -68,7 +69,7 @@ export const Blitter = GameObjects.Blitter as unknown as FC<
  * You can manipulate Bob objects directly from your game code, but the creation and destruction of them should be handled via the Blitter parent.
  */
 export const Bob = GameObjects.Bob as unknown as FC<
-  Props & RecursivePartial<GameObjects.Bob>
+  Props<GameObjects.Bob> & RecursivePartial<GameObjects.Bob>
 >;
 
 /**
@@ -97,7 +98,7 @@ export const Bob = GameObjects.Bob as unknown as FC<
  * It's important to understand the impact of using Containers. They add additional processing overhead into every one of their children. The deeper you nest them, the more the cost escalates. This is especially true for input events. You also loose the ability to set the display depth of Container children in the same flexible manner as those not within them. In short, don't use them for the sake of it. You pay a small cost every time you create one, try to structure your game around avoiding that where possible.
  */
 export const Container = GameObjects.Container as unknown as FC<
-  Props & RecursivePartial<GameObjects.Container>
+  Props<GameObjects.Container> & RecursivePartial<GameObjects.Container>
 >;
 
 /**
@@ -139,7 +140,7 @@ export const Container = GameObjects.Container as unknown as FC<
  * DOM Elements are a powerful way to align native HTML with your Phaser Game Objects. For example, you can insert a login form for a multiplayer game directly into your title screen. Or a text input box for a highscore table. Or a banner ad from a 3rd party service. Or perhaps you'd like to use them for high resolution text display and UI. The choice is up to you, just remember that you're dealing with standard HTML and CSS floating over the top of your game, and should treat it accordingly.
  */
 export const DOMElement = GameObjects.DOMElement as unknown as FC<
-  Props & RecursivePartial<GameObjects.DOMElement>
+  Props<GameObjects.DOMElement> & RecursivePartial<GameObjects.DOMElement>
 >;
 
 /**
@@ -152,7 +153,7 @@ export const DOMElement = GameObjects.DOMElement as unknown as FC<
  * Although this object has lots of properties such as Alpha, Blend Mode and Tint, none of them are used during rendering unless you take advantage of them in your own render code.
  */
 export const Extern = GameObjects.Extern as unknown as FC<
-  Props & RecursivePartial<GameObjects.Extern>
+  Props<GameObjects.Extern> & RecursivePartial<GameObjects.Extern>
 >;
 
 /**
@@ -185,7 +186,7 @@ export const Extern = GameObjects.Extern as unknown as FC<
  * As you can tell, Graphics objects are a bit of a trade-off. While they are extremely useful, you need to be careful in their complexity and quantity of them in your game.
  */
 export const Graphics = GameObjects.Graphics as unknown as FC<
-  Props & RecursivePartial<GameObjects.Graphics>
+  Props<GameObjects.Graphics> & RecursivePartial<GameObjects.Graphics>
 >;
 
 /**
@@ -196,7 +197,7 @@ export const Graphics = GameObjects.Graphics as unknown as FC<
  * Groups themselves aren't displayable, and can't be positioned, rotated, scaled, or hidden.
  */
 export const Group = GameObjects.Group as unknown as FC<
-  Props & RecursivePartial<GameObjects.Group>
+  Props<GameObjects.Group> & RecursivePartial<GameObjects.Group>
 >;
 
 /**
@@ -205,7 +206,7 @@ export const Group = GameObjects.Group as unknown as FC<
  * An Image is a light-weight Game Object useful for the display of static images in your game, such as logos, backgrounds, scenery or other non-animated elements. Images can have input events and physics bodies, or be tweened, tinted or scrolled. The main difference between an Image and a Sprite is that you cannot animate an Image as they do not have the Animation component.
  */
 export const Image = GameObjects.Image as unknown as FC<
-  Props & RecursivePartial<GameObjects.Image>
+  Props<GameObjects.Image> & RecursivePartial<GameObjects.Image>
 >;
 
 /**
@@ -238,15 +239,16 @@ export const Image = GameObjects.Image as unknown as FC<
  * However, you can set the Alpha, Blend Mode, Depth, Mask and Visible state of a Layer. These settings will impact all children being rendered by the Layer.
  */
 export const Layer = GameObjects.Layer as unknown as FC<
-  Props & RecursivePartial<GameObjects.Layer>
+  Props<GameObjects.Layer> & RecursivePartial<GameObjects.Layer>
 >;
 
 /**
  * A particle emitter represents a single particle stream. It controls a pool of Particles and is controlled by a Particle Emitter Manager.
  */
 export const ParticleEmitter = GameObjects.Particles
   .ParticleEmitter as unknown as FC<
-  Props & RecursivePartial<GameObjects.Particles.ParticleEmitter>
+  Props<GameObjects.Particles.ParticleEmitter> &
+    RecursivePartial<GameObjects.Particles.ParticleEmitter>
 >;
 
 /**
@@ -259,7 +261,7 @@ export const ParticleEmitter = GameObjects.Particles
  * PathFollowers are bound to a single Path at any one time and can traverse the length of the Path, from start to finish, forwards or backwards, or from any given point on the Path to its end. They can optionally rotate to face the direction of the path, be offset from the path coordinates or rotate independently of the Path.
  */
 export const PathFollower = GameObjects.PathFollower as unknown as FC<
-  Props & RecursivePartial<GameObjects.PathFollower>
+  Props<GameObjects.PathFollower> & RecursivePartial<GameObjects.PathFollower>
 >;
 
 /**
@@ -276,7 +278,7 @@ export const PathFollower = GameObjects.PathFollower as unknown as FC<
  * Point Lights are a WebGL only feature and do not have a Canvas counterpart.
  */
 export const PointLight = GameObjects.PointLight as unknown as FC<
-  Props & RecursivePartial<GameObjects.PointLight>
+  Props<GameObjects.PointLight> & RecursivePartial<GameObjects.PointLight>
 >;
 
 /**
@@ -287,14 +289,14 @@ export const PointLight = GameObjects.PointLight as unknown as FC<
  * Note that under WebGL a FrameBuffer, which is what the Render Texture uses internally, cannot be anti-aliased. This means that when drawing objects such as Shapes to a Render Texture they will appear to be drawn with no aliasing, however this is a technical limitation of WebGL. To get around it, create your shape as a texture in an art package, then draw that to the Render Texture.
  */
 export const RenderTexture = GameObjects.RenderTexture as unknown as FC<
-  Props & RecursivePartial<GameObjects.RenderTexture>
+  Props<GameObjects.RenderTexture> & RecursivePartial<GameObjects.RenderTexture>
 >;
 
 /**
  * The Shape Game Object is a base class for the various different shapes, such as the Arc, Star or Polygon. You cannot add a Shape directly to your Scene, it is meant as a base for your own custom Shape classes.
  */
 export const Shape = GameObjects.Shape as unknown as FC<
-  Props & RecursivePartial<GameObjects.Shape>
+  Props<GameObjects.Shape> & RecursivePartial<GameObjects.Shape>
 >;
 
 /**
@@ -305,7 +307,7 @@ export const Shape = GameObjects.Shape as unknown as FC<
  * The main difference between a Sprite and an Image Game Object is that you cannot animate Images. As such, Sprites take a fraction longer to process and have a larger API footprint due to the Animation Component. If you do not require animation then you can safely use Images to replace Sprites in all cases.
  */
 export const Sprite = GameObjects.Sprite as unknown as FC<
-  Props & RecursivePartial<GameObjects.Sprite>
+  Props<GameObjects.Sprite> & RecursivePartial<GameObjects.Sprite>
 >;
 
 /**
@@ -332,7 +334,7 @@ export const Sprite = GameObjects.Sprite as unknown as FC<
  * A note on performance: Every time the contents of a Text object changes, i.e. changing the text being displayed, or the style of the text, it needs to remake the Text canvas, and if on WebGL, re-upload the new texture to the GPU. This can be an expensive operation if used often, or with large quantities of Text objects in your game. If you run into performance issues you would be better off using Bitmap Text instead, as it benefits from batching and avoids expensive Canvas API calls.
  */
 export const Text = GameObjects.Text as unknown as FC<
-  Props & RecursivePartial<GameObjects.Text>
+  Props<GameObjects.Text> & RecursivePartial<GameObjects.Text>
 >;
 
 /**
@@ -345,7 +347,7 @@ export const Text = GameObjects.Text as unknown as FC<
  * An important note about Tile Sprites and NPOT textures: Internally, TileSprite textures use GL_REPEAT to provide seamless repeating of the textures. This, combined with the way in which the textures are handled in WebGL, means they need to be POT (power-of-two) sizes in order to wrap. If you provide a NPOT (non power-of-two) texture to a TileSprite it will generate a POT sized canvas and draw your texture to it, scaled up to the POT size. It's then scaled back down again during rendering to the original dimensions. While this works, in that it allows you to use any size texture for a Tile Sprite, it does mean that NPOT textures are going to appear anti-aliased when rendered, due to the interpolation that took place when it was resized into a POT texture. This is especially visible in pixel art graphics. If you notice it and it becomes an issue, the only way to avoid it is to ensure that you provide POT textures for Tile Sprites.
  */
 export const TileSprite = GameObjects.TileSprite as unknown as FC<
-  Props & RecursivePartial<GameObjects.TileSprite>
+  Props<GameObjects.TileSprite> & RecursivePartial<GameObjects.TileSprite>
 >;
 
 /**
@@ -354,7 +356,7 @@ export const TileSprite = GameObjects.TileSprite as unknown as FC<
  * This Game Object is capable of handling playback of a previously loaded video from the Phaser Video Cache, or playing a video based on a given URL. Videos can be either local, or streamed.
  */
 export const Video = GameObjects.Video as unknown as FC<
-  Props & RecursivePartial<GameObjects.Video>
+  Props<GameObjects.Video> & RecursivePartial<GameObjects.Video>
 >;
 
 /**
@@ -365,7 +367,7 @@ export const Video = GameObjects.Video as unknown as FC<
  * Its primary use is for creating Drop Zones and Input Hit Areas and it has a couple of helper methods specifically for this. It is also useful for object overlap checks, or as a base for your own non-displaying Game Objects. The default origin is 0.5, the center of the Zone, the same as with Game Objects.
  */
 export const Zone = GameObjects.Zone as unknown as FC<
-  Props & RecursivePartial<GameObjects.Zone>
+  Props<GameObjects.Zone> & RecursivePartial<GameObjects.Zone>
 >;
 
 /**
@@ -378,7 +380,7 @@ export const Zone = GameObjects.Zone as unknown as FC<
  * Arcs also have an iterations property and corresponding setIterations method. This allows you to control how smooth the shape renders in WebGL, by controlling the number of iterations that take place during construction.
  */
 export const Arc = GameObjects.Arc as unknown as FC<
-  Props & RecursivePartial<GameObjects.Arc>
+  Props<GameObjects.Arc> & RecursivePartial<GameObjects.Arc>
 >;
 
 /**
@@ -391,7 +393,7 @@ export const Arc = GameObjects.Arc as unknown as FC<
  * The Curve shape also has a smoothness property and corresponding setSmoothness method. This allows you to control how smooth the shape renders in WebGL, by controlling the number of iterations that take place during construction. Increase and decrease the default value for smoother, or more jagged, shapes.
  */
 export const Curve = GameObjects.Curve as unknown as FC<
-  Props & RecursivePartial<GameObjects.Curve>
+  Props<GameObjects.Curve> & RecursivePartial<GameObjects.Curve>
 >;
 
 /**
@@ -404,7 +406,7 @@ export const Curve = GameObjects.Curve as unknown as FC<
  * The Ellipse shape also has a smoothness property and corresponding setSmoothness method. This allows you to control how smooth the shape renders in WebGL, by controlling the number of iterations that take place during construction. Increase and decrease the default value for smoother, or more jagged, shapes.
  */
 export const Ellipse = GameObjects.Ellipse as unknown as FC<
-  Props & RecursivePartial<GameObjects.Ellipse>
+  Props<GameObjects.Ellipse> & RecursivePartial<GameObjects.Ellipse>
 >;
 
 /**
@@ -415,7 +417,7 @@ export const Ellipse = GameObjects.Ellipse as unknown as FC<
  * A Grid Shape allows you to display a grid in your game, where you can control the size of the grid as well as the width and height of the grid cells. You can set a fill color for each grid cell as well as an alternate fill color. When the alternate fill color is set then the grid cells will alternate the fill colors as they render, creating a chess-board effect. You can also optionally have an outline fill color. If set, this draws lines between the grid cells in the given color. If you specify an outline color with an alpha of zero, then it will draw the cells spaced out, but without the lines between them.
  */
 export const Grid = GameObjects.Grid as unknown as FC<
-  Props & RecursivePartial<GameObjects.Grid>
+  Props<GameObjects.Grid> & RecursivePartial<GameObjects.Grid>
 >;
 
 /**
@@ -428,7 +430,7 @@ export const Grid = GameObjects.Grid as unknown as FC<
  * You cannot view an IsoBox from under-neath, however you can change the 'angle' by setting the projection property.
  */
 export const IsoBox = GameObjects.IsoBox as unknown as FC<
-  Props & RecursivePartial<GameObjects.IsoBox>
+  Props<GameObjects.IsoBox> & RecursivePartial<GameObjects.IsoBox>
 >;
 
 /**
@@ -441,7 +443,7 @@ export const IsoBox = GameObjects.IsoBox as unknown as FC<
  * You cannot view an IsoTriangle from under-neath, however you can change the 'angle' by setting the projection property. The reversed property controls if the IsoTriangle is rendered upside down or not.
  */
 export const IsoTriangle = GameObjects.IsoTriangle as unknown as FC<
-  Props & RecursivePartial<GameObjects.IsoTriangle>
+  Props<GameObjects.IsoTriangle> & RecursivePartial<GameObjects.IsoTriangle>
 >;
 
 /**
@@ -456,7 +458,7 @@ export const IsoTriangle = GameObjects.IsoTriangle as unknown as FC<
  * Be aware that as with all Game Objects the default origin is 0.5. If you need to draw a Line between two points and want the x1/y1 values to match the x/y values, then set the origin to 0.
  */
 export const Line = GameObjects.Line as unknown as FC<
-  Props & RecursivePartial<GameObjects.Line>
+  Props<GameObjects.Line> & RecursivePartial<GameObjects.Line>
 >;
 
 /**
@@ -475,7 +477,7 @@ export const Line = GameObjects.Line as unknown as FC<
  * By default the x and y coordinates of this Shape refer to the center of it. However, depending on the coordinates of the points provided, the final shape may be rendered offset from its origin.
  */
 export const Polygon = GameObjects.Polygon as unknown as FC<
-  Props & RecursivePartial<GameObjects.Polygon>
+  Props<GameObjects.Polygon> & RecursivePartial<GameObjects.Polygon>
 >;
 
 /**
@@ -486,7 +488,7 @@ export const Polygon = GameObjects.Polygon as unknown as FC<
  * You can change the size of the rectangle by changing the `width` and `height` properties.
  */
 export const Rectangle = GameObjects.Rectangle as unknown as FC<
-  Props & RecursivePartial<GameObjects.Rectangle>
+  Props<GameObjects.Rectangle> & RecursivePartial<GameObjects.Rectangle>
 >;
 
 /**
@@ -499,7 +501,7 @@ export const Rectangle = GameObjects.Rectangle as unknown as FC<
  * You can also control the inner and outer radius, which is how 'long' each point of the star is. Modify these values to create more interesting shapes.
  */
 export const Star = GameObjects.Star as unknown as FC<
-  Props & RecursivePartial<GameObjects.Star>
+  Props<GameObjects.Star> & RecursivePartial<GameObjects.Star>
 >;
 
 /**
@@ -510,7 +512,7 @@ export const Star = GameObjects.Star as unknown as FC<
  * The Triangle consists of 3 lines, joining up to form a triangular shape. You can control the position of each point of these lines. The triangle is always closed and cannot have an open face. If you require that, consider using a Polygon instead.
  */
 export const Triangle = GameObjects.Triangle as unknown as FC<
-  Props & RecursivePartial<GameObjects.Triangle>
+  Props<GameObjects.Triangle> & RecursivePartial<GameObjects.Triangle>
 >;
 
 /**
@@ -523,7 +525,7 @@ export const Triangle = GameObjects.Triangle as unknown as FC<
  * A Ropes origin is always 0.5 x 0.5 and cannot be changed.
  */
 export const Rope = GameObjects.Rope as unknown as FC<
-  Props & RecursivePartial<GameObjects.Rope>
+  Props<GameObjects.Rope> & RecursivePartial<GameObjects.Rope>
 >;
 
 /**
@@ -532,14 +534,14 @@ export const Rope = GameObjects.Rope as unknown as FC<
  * This Game Object allows you to easily add a quad with its own shader into the display list, and manipulate it as you would any other Game Object, including scaling, rotating, positioning and adding to Containers. Shaders can be masked with either Bitmap or Geometry masks and can also be used as a Bitmap Mask for a Camera or other Game Object. They can also be made interactive and used for input events.
  */
 export const Shader = GameObjects.Shader as unknown as FC<
-  Props & RecursivePartial<GameObjects.Shader>
+  Props<GameObjects.Shader> & RecursivePartial<GameObjects.Shader>
 >;
 
 /**
  * A Scene plugin that provides a Phaser.GameObjects.LightsManager for the Light2D pipeline.
  */
 export const Light = GameObjects.Light as unknown as FC<
-  Props & RecursivePartial<GameObjects.Light>
+  Props<GameObjects.Light> & RecursivePartial<GameObjects.Light>
 >;
 
 /**
@@ -560,5 +562,5 @@ export const Light = GameObjects.Light as unknown as FC<
  * The Mesh origin is always 0.5 x 0.5 and cannot be changed.
  */
 export const Mesh = GameObjects.Mesh as unknown as FC<
-  Props & RecursivePartial<GameObjects.Mesh>
+  Props<GameObjects.Mesh> & RecursivePartial<GameObjects.Mesh>
 >;

src/types/props.ts

@@ -3,9 +3,9 @@ import type { JSX } from 'react';
 import type { Events } from './events';
 import type { GameObject } from './phaser';
 
-export interface GameObjectProps extends Partial<Events> {
+export interface GameObjectProps<Type = GameObject> extends Partial<Events> {
   children?: JSX.Element | JSX.Element[] | null;
-  ref?: (gameObject: GameObject) => void;
+  ref?: (gameObject: Type) => void;
 }
 
 export type Props = Record<string, unknown>;