Fix Script cleanup in useScript hook

packages/examples/src/utils/hooks.js

@@ -7,7 +7,7 @@ export const useAsset = (src, type, props) => {
     const app = useApp();
 
     return useQuery({ 
-        queryKey: [src],
+        queryKey: [app.root?.getGuid(), src, type, props],
         queryFn: () => app && fetchAsset(app, src, type, props)
     })
 }

packages/lib/src/Container.tsx

@@ -15,7 +15,7 @@ export const Container: FC<ContainerProps> = ({ asset, ...props }) => {
     const app = useApp();
 
     useLayoutEffect(() => {
-        if (asset && entityRef.current) {
+        if (app && asset?.resource && entityRef.current) {
             const assetEntity = asset.resource.instantiateRenderEntity();
             entityRef.current.addChild(assetEntity);
             assetEntityRef.current = assetEntity;
@@ -26,13 +26,14 @@ export const Container: FC<ContainerProps> = ({ asset, ...props }) => {
 
             entityRef.current.removeChild(assetEntityRef.current);
             assetEntityRef.current.destroy();
+            asset.resource?.destroy();
+
             entityRef.current = null;
             assetEntityRef.current = null;
 
         };
-    }, [app, parent, asset]);
+    }, [app, parent, asset, asset.resource]);
 
-    if (!asset) return null;
 
     return <Entity ref={entityRef} {...props}/>;
 };

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

@@ -25,10 +25,14 @@ export const useComponent = (ctype: string, props: ComponentProps): void => {
     }
 
     return () => {
-      if (componentRef.current) {
+      const comp = componentRef.current
+      componentRef.current = null;
+
+      if(!app || !app.root) return;
+
+      if (comp) {
         type SystemKeys = keyof typeof app.systems;
         if (app.systems[ctype as SystemKeys]) parent.removeComponent(ctype);
-        componentRef.current = null;
       }
     };
   }, [app, parent, ctype]);

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

@@ -41,17 +41,16 @@ export const useScript = (ScriptConstructor: typeof Script, props: Props) : void
 
     // Cleanup function to remove the script when the component is unmounted
     return () => {
-      if(!app) return;
       const scriptComponent = scriptComponentRef.current;
       const script = scriptRef.current;
-      if (script && scriptComponent) {
-        scriptComponent.destroy(scriptRef.current);
-      } else {
-        console.log('Script not found on parent entity', parent?.script, scriptRef.current);
-        script.fire('destroy');
-      }
       scriptRef.current = null;
       scriptComponentRef.current = null;
+
+      if (app && app.root && script && scriptComponent) {
+        scriptComponent.destroy(script);
+      } else if (script) {
+        script.fire('destroy');
+      }
     };
   }, [app, parent, ScriptConstructor]);
 

packages/lib/src/scripts/orbit-controls/orbit-camera.js

@@ -484,10 +484,10 @@ export class OrbitCameraInputMouse extends Script {
 
             // Remove the listeners so if this entity is destroyed
             this.on('destroy', function () {
-                this.app.mouse.off(EVENT_MOUSEDOWN, this.onMouseDown, this);
-                this.app.mouse.off(EVENT_MOUSEUP, this.onMouseUp, this);
-                this.app.mouse.off(EVENT_MOUSEMOVE, this.onMouseMove, this);
-                this.app.mouse.off(EVENT_MOUSEWHEEL, this.onMouseWheel, this);
+                this.app.mouse?.off(EVENT_MOUSEDOWN, this.onMouseDown, this);
+                this.app.mouse?.off(EVENT_MOUSEUP, this.onMouseUp, this);
+                this.app.mouse?.off(EVENT_MOUSEMOVE, this.onMouseMove, this);
+                this.app.mouse?.off(EVENT_MOUSEWHEEL, this.onMouseWheel, this);
 
                 window.removeEventListener('mouseout', onMouseOut, false);
             });
@@ -619,10 +619,10 @@ export class OrbitCameraInputTouch extends Script {
             this.app.touch.on(EVENT_TOUCHMOVE, this.onTouchMove, this);
 
             this.on('destroy', function () {
-                this.app.touch.off(EVENT_TOUCHSTART, this.onTouchStartEndCancel, this);
-                this.app.touch.off(EVENT_TOUCHEND, this.onTouchStartEndCancel, this);
-                this.app.touch.off(EVENT_TOUCHCANCEL, this.onTouchStartEndCancel, this);
-                this.app.touch.off(EVENT_TOUCHMOVE, this.onTouchMove, this);
+                this.app.touch?.off(EVENT_TOUCHSTART, this.onTouchStartEndCancel, this);
+                this.app.touch?.off(EVENT_TOUCHEND, this.onTouchStartEndCancel, this);
+                this.app.touch?.off(EVENT_TOUCHCANCEL, this.onTouchStartEndCancel, this);
+                this.app.touch?.off(EVENT_TOUCHMOVE, this.onTouchMove, this);
             });
         }
     }

packages/lib/src/scripts/post/index.js

@@ -362,7 +362,7 @@ class CameraFrame extends Script {
         this.cameraComponent.renderPasses?.forEach((renderPass) => {
             renderPass.destroy();
         });
-        this.cameraComponent.renderPasses = [];
+        if (this.app.system) this.cameraComponent.renderPasses = [];
         this.cameraComponent.rendering = null;
 
         this.cameraComponent.jitter = 0;

packages/lib/src/scripts/shadow-catcher/index.js

@@ -92,7 +92,7 @@ class ShadowCatcher extends Script {
             this.material.destroy();
             layers.remove(this.layer);
 
-            const camera = this.app.root.findOne(node => node?.camera?.enabled)?.camera;
+            const camera = this.app.root?.findOne(node => node?.camera?.enabled)?.camera;
             if (!camera) return;
 
             camera.layers = camera.layers.filter(layer => layer !== this.layer.id);

packages/lib/src/utils/picker.tsx

@@ -125,6 +125,7 @@ export const usePicker = (app: AppBase | null, el: HTMLElement | null) => {
 
         el.addEventListener('pointerup', onInteractionEvent);
         el.addEventListener('pointerdown', onInteractionEvent);
+        el.addEventListener('mouseup', onInteractionEvent);
         el.addEventListener('click', onInteractionEvent);
         el.addEventListener('pointermove', onPointerMove);
         app.on('update', onFrameUpdate);