Refactor Script and useScript types (#72)

* Refactor Script and useScript to enforce type safety for script constructors

* Add __name property to AutoRotator class for better identification

* Refactor Script and useScript to improve type definitions and remove unused code

Author: marklundin

packages/lib/src/components/Script.tsx

@@ -1,10 +1,18 @@
-import { Script as PcScript } from "playcanvas";
+import { AppBase, Entity, Script as PcScript } from "playcanvas";
 import { useScript } from "../hooks"
 import { FC, memo, useMemo } from "react";
 import { shallowEquals } from "../utils/shallow-equals";
 
+// type PcScriptWithoutPrivateName = Omit<typeof PcScript, '__name'> & {
+//     __name: string;
+// };
+// type PcScriptWithoutPrivateName = {
+//     new (args: { app: AppBase; entity: Entity; }): PcScript
+//     __name: string;
+// };
+
 interface ScriptProps {
-    script: new (...args: unknown[]) => PcScript;
+    script: new (args: { app: AppBase; entity: Entity; }) => PcScript;
     [key: string]: unknown;
 }
 

packages/lib/src/hooks/use-script.tsx

@@ -1,15 +1,27 @@
 import { useEffect, useRef } from 'react';
 import { useParent } from './use-parent';
 import { useApp } from './use-app';
-import { Application, Entity, Script, ScriptComponent } from 'playcanvas';
+import { AppBase, Application, Entity, Script, ScriptComponent } from 'playcanvas';
 
 const toLowerCamelCase = (str: string) : string => str[0].toLowerCase() + str.substring(1);
 
 interface Props {
   [key: string]: unknown;
 }
 
-export const useScript = (scriptConstructor:  new (...args: unknown[]) => Script, props: Props) : void  => {
+// type PcScriptWithName = Omit<typeof Script, '__name'> & {
+//   __name: string;
+// } & { 
+//   __name: string, 
+//   name: string
+// };
+// type PcScriptWithName = {
+//   new (args: { app: AppBase; entity: Entity; }): Script
+//   __name: string;
+// }
+
+
+export const useScript = (scriptConstructor: new (args: { app: AppBase; entity: Entity; }) => Script, props: Props) : void  => {
   const parent: Entity = useParent();
   const app: Application = useApp();
   const scriptName: string = toLowerCamelCase(scriptConstructor.name);
@@ -29,7 +41,7 @@ export const useScript = (scriptConstructor:  new (...args: unknown[]) => Script
     if (!scriptRef.current) {
       // Create the script instance with the provided attributes
       const scriptComponent : ScriptComponent = parent.script as ScriptComponent;
-      const scriptInstance = scriptComponent.create(scriptConstructor as typeof Script, {
+      const scriptInstance = scriptComponent.create(scriptConstructor as unknown as typeof Script, {
         properties: { ...props },
         preloading: false,
       });

packages/lib/src/scripts/auto-rotator/auto-rotator.tsx

@@ -5,7 +5,6 @@ const smoothStep = (x: number): number =>
 
 
 class AutoRotator extends Script {
-
   speed: number = 4;
   pitchSpeed: number = 0;
   pitchAmount: number = 1;

packages/lib/src/scripts/orbit-controls/index.tsx

@@ -1,4 +1,4 @@
-import { Entity, Vec3, Script as PcScript } from "playcanvas";
+import { Entity, Vec3 } from "playcanvas";
 import { Script } from "../../components/Script";
 import { OrbitCamera, OrbitCameraInputMouse, OrbitCameraInputTouch } from "./orbit-camera";
 
@@ -24,8 +24,6 @@ type OrbitControls = OrbitCameraProps & {
     touch?: OrbitCameraInputProps;
 };
 
-type PcScriptType = new (...args: unknown[]) => PcScript
-
 export const OrbitControls = ({ 
     distanceMax = 20, distanceMin = 18, pitchAngleMax = 90, pitchAngleMin = 0, inertiaFactor = 0.0, focusEntity = null, pivotPoint = new Vec3(), frameOnStart = true, distance = 0,
     mouse = { orbitSensitivity: 0.3, distanceSensitivity: 0.15 }, 
@@ -35,8 +33,8 @@ export const OrbitControls = ({
     const orbitCameraProps : OrbitCameraProps = { distanceMax, distanceMin, pitchAngleMax, pitchAngleMin, inertiaFactor, focusEntity, pivotPoint, frameOnStart, distance }
 
     return <>
-        <Script script={OrbitCamera as PcScriptType} {...orbitCameraProps}/>
-        <Script script={OrbitCameraInputMouse as PcScriptType} {...mouse}/>
-        <Script script={OrbitCameraInputTouch as PcScriptType} {...touch} />
+        <Script script={OrbitCamera} {...orbitCameraProps}/>
+        <Script script={OrbitCameraInputMouse} {...mouse}/>
+        <Script script={OrbitCameraInputTouch} {...touch} />
     </>
 }