Minor fixes

neki-dev · Nov 3, 2023 · 103a637 · 103a637
1 parent b9220cd
commit 103a637
Show file tree

Hide file tree

Showing 20 changed files with 48 additions and 34 deletions.
diff --git a/dist/context/scene.d.ts b/dist/context/scene.d.ts
@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type Phaser from 'phaser';
-export declare const SceneContext: import("react").Context<Phaser.Scene>;
-export declare const SceneProvider: import("react").Provider<Phaser.Scene>;
+export declare const SceneContext: import("react").Context<Phaser.Scene | null>;
+export declare const SceneProvider: import("react").Provider<Phaser.Scene | null>;
diff --git a/dist/hooks/use-match-media.d.ts b/dist/hooks/use-match-media.d.ts
@@ -3,4 +3,4 @@
  *
  * @param query - Media query
  */
-export declare function useMatchMedia(query: string): any;
+export declare function useMatchMedia(query: string): boolean | null;
diff --git a/dist/hooks/use-relative-position.d.ts b/dist/hooks/use-relative-position.d.ts
@@ -8,4 +8,4 @@ import { RelativePositionProps } from '../types/relative-position';
  * @param props.y - World position Y
  * @param props.camera - Camera
  */
-export declare function useRelativePosition<T extends HTMLElement>({ x, y, camera, }: RelativePositionProps): import("react").MutableRefObject<T>;
+export declare function useRelativePosition<T extends HTMLElement>({ x, y, camera, }: RelativePositionProps): import("react").RefObject<T>;
diff --git a/dist/hooks/use-relative-scale.d.ts b/dist/hooks/use-relative-scale.d.ts
@@ -9,4 +9,4 @@ import { RelativeScaleProps } from '../types/relative-scale';
  * @param props.max - Max scale
  * @param props.round - Rounding
  */
-export declare function useRelativeScale<T extends HTMLElement>({ target, min, max, round, }: RelativeScaleProps): import("react").MutableRefObject<T>;
+export declare function useRelativeScale<T extends HTMLElement>({ target, min, max, round, }: RelativeScaleProps): import("react").RefObject<T>;
diff --git a/dist/hooks/use-texture.d.ts b/dist/hooks/use-texture.d.ts
@@ -3,4 +3,4 @@
  *
  * @param key - Texture key
  */
-export declare function useTexture(key: string): string;
+export declare function useTexture(key: string): string | null;
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/render.d.ts b/dist/render.d.ts
@@ -5,7 +5,7 @@ export declare class Interface<T = {}> {
     readonly container: HTMLDivElement;
     readonly root: Root;
     readonly scene: Phaser.Scene;
-    constructor(scene: Phaser.Scene, Component: React.FC<T>, props?: T);
+    constructor(scene: Phaser.Scene, Component: React.FC<T | {}>, props?: T);
     setInteractive(state: boolean): void;
     destroy(): void;
     private configureContainer;

diff --git a/dist/utils/get-modified.d.ts b/dist/utils/get-modified.d.ts
@@ -5,26 +5,26 @@
  * @param target - New array
  * @param keys - Keys to compare
  */
-export declare function getModifiedArray<T>(current: T[], target: T[], keys?: (keyof T)[]): T[];
+export declare function getModifiedArray<T extends {}>(current: T[], target: T[], keys?: (keyof T)[]): T[];
 /**
  * Return callback for safe update state.
  *
  * @param target - New array
  * @param keys - Keys to compare
  */
-export declare function ifModifiedArray<T>(value: T[], keys?: (keyof T)[]): (currentValue: T[]) => T[];
+export declare function ifModifiedArray<T extends {}>(value: T[], keys?: (keyof T)[]): (currentValue: T[]) => T[];
 /**
  * Get modified object between current and target value.
  *
  * @param current - Current object
  * @param target - New object
  * @param keys - Keys to compare
  */
-export declare function getModifiedObject<T>(current: T, target: T, keys?: (keyof T)[]): T;
+export declare function getModifiedObject<T extends {}>(current: T, target: T, keys?: (keyof T)[]): T;
 /**
  * Return callback for safe update state.
  *
  * @param target - New object
  * @param keys - Keys to compare
  */
-export declare function ifModifiedObject<T>(value: T, keys?: (keyof T)[]): (currentValue: T) => T;
+export declare function ifModifiedObject<T extends {}>(value: T, keys?: (keyof T)[]): (currentValue: T) => T;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "phaser-react-ui",
   "description": "React interface render for Phaser engine",
-  "version": "1.14.4",
+  "version": "1.14.5",
   "keywords": [
     "phaser",
     "interface",

diff --git a/src/components/relative-position.tsx b/src/components/relative-position.tsx
@@ -10,7 +10,9 @@ export const RelativePosition: React.FC<Props> = ({ children, ...props }) => {
   const ref = useRelativePosition<HTMLDivElement>(props);
 
   useLayoutEffect(() => {
-    ref.current.style.position = 'absolute';
+    if (ref.current) {
+      ref.current.style.position = 'absolute';
+    }
   }, []);
 
   return <div ref={ref}>{children}</div>;

diff --git a/src/components/relative-scale.tsx b/src/components/relative-scale.tsx
@@ -10,7 +10,9 @@ export const RelativeScale: React.FC<Props> = ({ children, ...props }) => {
   const ref = useRelativeScale<HTMLDivElement>(props);
 
   useLayoutEffect(() => {
-    ref.current.style.position = 'absolute';
+    if (ref.current) {
+      ref.current.style.position = 'absolute';
+    }
   }, []);
 
   return <div ref={ref}>{children}</div>;

diff --git a/src/components/texture.tsx b/src/components/texture.tsx
@@ -9,5 +9,5 @@ type Props = {
 export const Texture: React.FC<Props> = ({ name }) => {
   const imageSrc = useTexture(name);
 
-  return <img src={imageSrc} role="texture" alt={name} />;
+  return imageSrc ? <img src={imageSrc} role="texture" alt={name} /> : null;
 };
diff --git a/src/hooks/use-click.ts b/src/hooks/use-click.ts
@@ -38,9 +38,11 @@ export function useClick(
       event = (type === 'up') ? 'mouseup' : 'mousedown';
     }
 
+    // @ts-ignore
     element.addEventListener(event, onClick);
 
     return () => {
+      // @ts-ignore
       element.removeEventListener(event, onClick);
     };
   }, [type, isMobile, onClick]);

diff --git a/src/hooks/use-match-media.ts b/src/hooks/use-match-media.ts
@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
 export function useMatchMedia(
   query: string,
 ) {
-  const [matched, setMatched] = useState(null);
+  const [matched, setMatched] = useState<boolean | null>(null);
 
   const onChange = (event: MediaQueryListEvent) => {
     setMatched(event.matches);

diff --git a/src/hooks/use-relative-scale.ts b/src/hooks/use-relative-scale.ts
@@ -27,6 +27,11 @@ export function useRelativeScale<T extends HTMLElement>({
     }
 
     const container = game.canvas.parentElement;
+
+    if (!container) {
+      return;
+    }
+
     let zoom = container.clientWidth / target;
 
     if (typeof max === 'number') {

diff --git a/src/hooks/use-texture.ts b/src/hooks/use-texture.ts
@@ -7,7 +7,7 @@ import { HTMLTextureElement } from '../types/texture';
  *
  * @param key - Texture key
  */
-export function useTexture(key: string) {
+export function useTexture(key: string): string | null {
   const game = useGame();
 
   return useMemo(() => {

diff --git a/src/render.tsx b/src/render.tsx
@@ -11,7 +11,13 @@ export class Interface<T = {}> {
 
   readonly scene: Phaser.Scene;
 
-  constructor(scene: Phaser.Scene, Component: React.FC<T>, props?: T) {
+  constructor(scene: Phaser.Scene, Component: React.FC<T | {}>, props?: T) {
+    const parent = scene.game.canvas.parentElement;
+
+    if (!parent) {
+      throw Error('Undefined canvas parent element');
+    }
+
     if (scene.interface) {
       console.warn('Scene already had an existing interface');
       scene.interface.destroy();
@@ -25,23 +31,21 @@ export class Interface<T = {}> {
     this.configureContainer();
     this.setInteractive(false);
 
-    const parent = scene.game.canvas.parentElement;
-
     parent.style.position = 'relative';
     parent.append(this.container);
 
-    const ComponentMiddleware: React.FC<T> = (propsMiddleware: T) => {
+    const ComponentMiddleware: React.FC = () => {
       useEffect(() => {
         scene.events.emit(Phaser.Interface.Events.MOUNT);
       }, []);
 
-      return <Component {...propsMiddleware} />;
+      return <Component {...(props ?? {})} />;
     };
 
     this.root = createRoot(this.container);
     this.root.render(
       <SceneProvider value={scene}>
-        <ComponentMiddleware {...props} />
+        <ComponentMiddleware />
       </SceneProvider>,
     );
 

diff --git a/src/utils/get-modified.ts b/src/utils/get-modified.ts
@@ -5,14 +5,15 @@
  * @param target - New array
  * @param keys - Keys to compare
  */
-export function getModifiedArray<T>(
+export function getModifiedArray<T extends {}>(
   current: T[],
   target: T[],
   keys?: (keyof T)[],
 ) {
   if (!target) {
     return current;
   }
+
   if (!current) {
     return target;
   }
@@ -40,7 +41,7 @@ export function getModifiedArray<T>(
  * @param target - New array
  * @param keys - Keys to compare
  */
-export function ifModifiedArray<T>(value: T[], keys?: (keyof T)[]) {
+export function ifModifiedArray<T extends {}>(value: T[], keys?: (keyof T)[]) {
   return (currentValue: T[]) => getModifiedArray(currentValue, value, keys);
 }
 
@@ -51,14 +52,15 @@ export function ifModifiedArray<T>(value: T[], keys?: (keyof T)[]) {
  * @param target - New object
  * @param keys - Keys to compare
  */
-export function getModifiedObject<T>(
+export function getModifiedObject<T extends {}>(
   current: T,
   target: T,
   keys?: (keyof T)[],
 ) {
   if (!target) {
     return current;
   }
+
   if (!current) {
     return target;
   }
@@ -80,6 +82,6 @@ export function getModifiedObject<T>(
  * @param target - New object
  * @param keys - Keys to compare
  */
-export function ifModifiedObject<T>(value: T, keys?: (keyof T)[]) {
+export function ifModifiedObject<T extends {}>(value: T, keys?: (keyof T)[]) {
   return (currentValue: T) => getModifiedObject(currentValue, value, keys);
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -8,10 +8,7 @@
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "alwaysStrict": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "strictBindCallApply": true,
+    "strict": true,
     "declaration": true
   },
   "include": ["./src/**/*"]