fix(hooks): use the engine-registered script name on useScript cleanup

.changeset/tidy-script-cleanup.md

@@ -0,0 +1,5 @@
+---
+"@playcanvas/react": patch
+---
+
+Fix Script cleanup for scripts whose class name differs from their registered name (such as an explicit static `scriptName` after bundling or minification), so unmounting removes the script and remounting no longer warns about a duplicate.

packages/lib/src/components/Script.test.tsx

@@ -170,6 +170,50 @@ describe('Script Component', () => {
     });
 
     describe('Cleanup', () => {
+        class _OrbitCamera extends PcScript {
+            static scriptName = 'orbitCamera';
+        }
+
+        class FallbackScript extends PcScript {}
+
+        it.each([
+            ['explicit scriptName', _OrbitCamera, 'orbitCamera'],
+            ['class-name fallback', FallbackScript, 'fallbackScript']
+        ] as const)('should clean up and remount using %s', async (_label, script, scriptName) => {
+            const scriptRef = React.createRef<PcScript>();
+            const Container = ({ mounted }: { mounted: boolean }) => (
+                <Application deviceTypes={['null']}>
+                    <Entity>{mounted && <Script script={script} ref={scriptRef} />}</Entity>
+                </Application>
+            );
+
+            const { rerender } = render(<Container mounted />);
+            await waitFor(() => expect(scriptRef.current).toBeInstanceOf(script));
+            const firstInstance = scriptRef.current!;
+            const entity = firstInstance.entity;
+            expect(entity.script![scriptName]).toBe(firstInstance);
+
+            rerender(<Container mounted={false} />);
+            expect(scriptRef.current).toBeNull();
+            expect(entity.script).toBeDefined();
+            expect(entity.script![scriptName]).toBeUndefined();
+
+            const warnSpy = vi.spyOn(console, 'warn');
+            try {
+                rerender(<Container mounted />);
+                await waitFor(() => expect(scriptRef.current).toBeInstanceOf(script));
+                expect(scriptRef.current).not.toBe(firstInstance);
+                expect(scriptRef.current!.entity).toBe(entity);
+                expect(entity.script![scriptName]).toBe(scriptRef.current);
+                expect(warnSpy).not.toHaveBeenCalled();
+            } finally {
+                warnSpy.mockRestore();
+            }
+
+            rerender(<Container mounted={false} />);
+            expect(entity.script![scriptName]).toBeUndefined();
+        });
+
         it('should clean up script instance on unmount', async () => {
             const destroySpy = vi.fn();
 

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

@@ -20,7 +20,6 @@ import { useParent } from './use-parent.tsx';
 export const useScript = (scriptConstructor: SubclassOf<Script>, props: Props, ref: ForwardedRef<Script>): void => {
     const parent: Entity = useParent();
     const app: Application = useApp();
-    const scriptName: string = toLowerCamelCase(scriptConstructor.name);
     const scriptRef = useRef<Script | null>(null);
     const scriptComponentRef = useRef<ScriptComponent | null>(null);
 
@@ -63,7 +62,7 @@ export const useScript = (scriptConstructor: SubclassOf<Script>, props: Props, r
             scriptComponentRef.current = null;
 
             if (app && app.root && script && scriptComponent) {
-                scriptComponent.destroy(scriptName);
+                scriptComponent.destroy(scriptConstructor as unknown as Parameters<ScriptComponent['destroy']>[0]);
 
                 if (ref) {
                     if (typeof ref === 'function') {
@@ -89,8 +88,6 @@ export const useScript = (scriptConstructor: SubclassOf<Script>, props: Props, r
     }, [props]);
 };
 
-const toLowerCamelCase = (str: string): string => str[0].toLowerCase() + str.substring(1);
-
 /* eslint-disable @typescript-eslint/consistent-indexed-object-style, @typescript-eslint/consistent-type-definitions -- preserve the existing index signature */
 interface Props {
     [key: string]: unknown;