onSet/onRemove cleanups

packages/engine/src/avatar/components/AvatarAnimationComponent.ts

@@ -34,9 +34,8 @@ import {
   useComponent,
   useOptionalComponent
 } from '@etherealengine/ecs/src/ComponentFunctions'
-import { Entity } from '@etherealengine/ecs/src/Entity'
 import { createEntity, entityExists, removeEntity, useEntityContext } from '@etherealengine/ecs/src/EntityFunctions'
-import { getMutableState, matches, none, useHookstate } from '@etherealengine/hyperflux'
+import { getMutableState, matches, useHookstate } from '@etherealengine/hyperflux'
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
 import { addObjectToGroup } from '@etherealengine/spatial/src/renderer/components/GroupComponent'
 import { setObjectLayers } from '@etherealengine/spatial/src/renderer/components/ObjectLayerComponent'
@@ -101,7 +100,6 @@ export const AvatarRigComponent = defineComponent({
       rawRig: null! as VRMHumanBones,
       /** contains ik solve data */
       ikMatrices: {} as Record<VRMHumanBoneName, Matrices>,
-      helperEntity: null as Entity | null,
       /** The VRM model */
       vrm: null! as VRM,
       avatarURL: null as string | null
@@ -138,7 +136,6 @@ export const AvatarRigComponent = defineComponent({
       const helperEntity = createEntity()
       setVisibleComponent(helperEntity, true)
       addObjectToGroup(helperEntity, helper)
-      rigComponent.helperEntity.set(helperEntity)
       setComponent(helperEntity, NameComponent, helper.name)
       setObjectLayers(helper, ObjectLayers.AvatarHelper)
 
@@ -152,7 +149,6 @@ export const AvatarRigComponent = defineComponent({
 
       return () => {
         removeEntity(helperEntity)
-        rigComponent.helperEntity.set(none)
       }
     }, [visible, debugEnabled, pending, rigComponent.normalizedRig])
 

packages/spatial/src/common/NameComponent.ts

@@ -23,9 +23,10 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import { defineComponent } from '@etherealengine/ecs/src/ComponentFunctions'
+import { useEntityContext } from '@etherealengine/ecs'
+import { defineComponent, useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { Entity } from '@etherealengine/ecs/src/Entity'
-import { hookstate, none } from '@etherealengine/hyperflux'
+import { useImmediateEffect } from '@etherealengine/hyperflux'
 
 const entitiesByName = {} as Record<string, Entity[]>
 
@@ -36,30 +37,28 @@ export const NameComponent = defineComponent({
 
   onSet: (entity, component, name?: string) => {
     if (typeof name !== 'string') throw new Error('NameComponent expects a non-empty string')
-    // remove the entity from the previous name state
-    if (component.value && entitiesByName[component.value]) {
-      const index = entitiesByName[component.value].indexOf(entity)
-      NameComponent.entitiesByNameState[component.value][index].set(none)
-      if (!entitiesByName[component.value].length) NameComponent.entitiesByNameState[component.value].set(none)
-    }
-    // set the new name
     component.set(name)
-    // add the entity to the new name state
-    const exists = NameComponent.entitiesByName[name]
-    const entitiesByNameState = NameComponent.entitiesByNameState
-    if (exists) {
-      if (!exists.includes(entity)) entitiesByNameState.merge({ [name]: [...exists, entity] })
-    } else entitiesByNameState.merge({ [name]: [entity] })
   },
 
-  onRemove: (entity, component) => {
-    const name = component.value
-    const namedEntities = NameComponent.entitiesByNameState[name]
-    const isSingleton = namedEntities.length === 1
-    isSingleton && namedEntities.set(none)
-    !isSingleton && namedEntities.set(namedEntities.value.filter((namedEntity) => namedEntity !== entity))
+  reactor: () => {
+    const entity = useEntityContext()
+    const nameComponent = useComponent(entity, NameComponent)
+
+    useImmediateEffect(() => {
+      const name = nameComponent.value
+      if (!entitiesByName[name]) {
+        entitiesByName[name] = []
+      }
+
+      entitiesByName[name].push(entity)
+      return () => {
+        const index = entitiesByName[name].indexOf(entity)
+        entitiesByName[name].splice(index, 1)
+      }
+    }, [nameComponent.value])
+
+    return null
   },
 
-  entitiesByNameState: hookstate(entitiesByName),
   entitiesByName: entitiesByName as Readonly<typeof entitiesByName>
 })

packages/spatial/src/renderer/components/lights/AmbientLightComponent.ts

@@ -24,12 +24,13 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import { useEffect } from 'react'
-import { AmbientLight, Color } from 'three'
+import { AmbientLight, ColorRepresentation } from 'three'
 
 import { defineComponent, setComponent, useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { useEntityContext } from '@etherealengine/ecs/src/EntityFunctions'
 import { matches } from '@etherealengine/hyperflux'
 
+import { matchesColor } from '../../../common/functions/MatchesUtils'
 import { useDisposable } from '../../../resources/resourceHooks'
 import { addObjectToGroup, removeObjectFromGroup } from '../GroupComponent'
 import { LightTagComponent } from './LightTagComponent'
@@ -40,16 +41,14 @@ export const AmbientLightComponent = defineComponent({
 
   onInit: (entity) => {
     return {
-      // todo, maybe we want to reference light.color instead of creating a new Color?
-      color: new Color(),
+      color: 0xffffff as ColorRepresentation,
       intensity: 1
     }
   },
 
   onSet: (entity, component, json) => {
     if (!json) return
-    if (matches.object.test(json.color) && json.color.isColor) component.color.set(json.color)
-    if (matches.string.test(json.color)) component.color.value.set(json.color)
+    if (matchesColor.test(json.color)) component.color.set(json.color)
     if (matches.number.test(json.intensity)) component.intensity.set(json.intensity)
   },
 

packages/spatial/src/renderer/components/lights/HemisphereLightComponent.ts

@@ -24,7 +24,7 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import { useEffect } from 'react'
-import { Color, HemisphereLight } from 'three'
+import { ColorRepresentation, HemisphereLight } from 'three'
 
 import {
   defineComponent,
@@ -37,6 +37,7 @@ import { useEntityContext } from '@etherealengine/ecs/src/EntityFunctions'
 import { matches, useMutableState } from '@etherealengine/hyperflux'
 
 import { LightHelperComponent } from '../../../common/debug/LightHelperComponent'
+import { matchesColor } from '../../../common/functions/MatchesUtils'
 import { useDisposable } from '../../../resources/resourceHooks'
 import { RendererState } from '../../RendererState'
 import { addObjectToGroup, removeObjectFromGroup } from '../GroupComponent'
@@ -48,20 +49,16 @@ export const HemisphereLightComponent = defineComponent({
 
   onInit: (entity) => {
     return {
-      skyColor: new Color(),
-      groundColor: new Color(),
+      skyColor: 0xffffff as ColorRepresentation,
+      groundColor: 0xffffff as ColorRepresentation,
       intensity: 1
     }
   },
 
   onSet: (entity, component, json) => {
     if (!json) return
-    if (matches.object.test(json.skyColor) && json.skyColor.isColor) component.skyColor.set(json.skyColor)
-    if (matches.string.test(json.skyColor) || matches.number.test(json.skyColor))
-      component.skyColor.value.set(json.skyColor)
-    if (matches.object.test(json.groundColor) && json.groundColor.isColor) component.groundColor.set(json.groundColor)
-    if (matches.string.test(json.groundColor) || matches.number.test(json.groundColor))
-      component.groundColor.value.set(json.groundColor)
+    if (matchesColor.test(json.skyColor)) component.skyColor.set(json.skyColor)
+    if (matchesColor.test(json.groundColor)) component.groundColor.set(json.groundColor)
     if (matches.number.test(json.intensity)) component.intensity.set(json.intensity)
   },
 

packages/spatial/src/renderer/components/lights/PointLightComponent.ts

@@ -24,7 +24,7 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import { useEffect } from 'react'
-import { Color, PointLight } from 'three'
+import { ColorRepresentation, PointLight } from 'three'
 
 import {
   defineComponent,
@@ -38,6 +38,7 @@ import { useEntityContext } from '@etherealengine/ecs/src/EntityFunctions'
 import { matches, useMutableState } from '@etherealengine/hyperflux'
 
 import { LightHelperComponent } from '../../../common/debug/LightHelperComponent'
+import { matchesColor } from '../../../common/functions/MatchesUtils'
 import { useDisposable } from '../../../resources/resourceHooks'
 import { isMobileXRHeadset } from '../../../xr/XRState'
 import { RendererState } from '../../RendererState'
@@ -50,7 +51,7 @@ export const PointLightComponent = defineComponent({
 
   onInit: (entity) => {
     return {
-      color: new Color(),
+      color: 0xffffff as ColorRepresentation,
       intensity: 1,
       range: 0,
       decay: 2,
@@ -63,8 +64,7 @@ export const PointLightComponent = defineComponent({
 
   onSet: (entity, component, json) => {
     if (!json) return
-    if (matches.object.test(json.color) && json.color.isColor) component.color.set(json.color)
-    if (matches.string.test(json.color) || matches.number.test(json.color)) component.color.value.set(json.color)
+    if (matchesColor.test(json.color)) component.color.set(json.color)
     if (matches.number.test(json.intensity)) component.intensity.set(json.intensity)
     if (matches.number.test(json.range)) component.range.set(json.range)
     if (matches.number.test(json.decay)) component.decay.set(json.decay)

packages/spatial/src/renderer/components/lights/SpotLightComponent.ts

@@ -24,7 +24,7 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import { useEffect } from 'react'
-import { Color, SpotLight } from 'three'
+import { ColorRepresentation, SpotLight } from 'three'
 
 import {
   defineComponent,
@@ -37,10 +37,11 @@ import { useEntityContext } from '@etherealengine/ecs/src/EntityFunctions'
 import { matches, useMutableState } from '@etherealengine/hyperflux'
 
 import { LightHelperComponent } from '../../../common/debug/LightHelperComponent'
+import { matchesColor } from '../../../common/functions/MatchesUtils'
 import { useDisposable } from '../../../resources/resourceHooks'
 import { isMobileXRHeadset } from '../../../xr/XRState'
-import { useUpdateLight } from '../../functions/useUpdateLight'
 import { RendererState } from '../../RendererState'
+import { useUpdateLight } from '../../functions/useUpdateLight'
 import { addObjectToGroup, removeObjectFromGroup } from '../GroupComponent'
 import { LightTagComponent } from './LightTagComponent'
 
@@ -57,7 +58,7 @@ export const SpotLightComponent = defineComponent({
 
   onInit: (entity) => {
     return {
-      color: new Color(),
+      color: 0xffffff as ColorRepresentation,
       intensity: 10,
       range: 0,
       decay: 2,
@@ -71,8 +72,7 @@ export const SpotLightComponent = defineComponent({
 
   onSet: (entity, component, json) => {
     if (!json) return
-    if (matches.object.test(json.color) && json.color.isColor) component.color.set(json.color)
-    if (matches.string.test(json.color) || matches.number.test(json.color)) component.color.value.set(json.color)
+    if (matchesColor.test(json.color)) component.color.set(json.color)
     if (matches.number.test(json.intensity)) component.intensity.set(json.intensity)
     if (matches.number.test(json.range)) component.range.set(json.range)
     if (matches.number.test(json.decay)) component.decay.set(json.decay)

packages/spatial/src/transform/components/DistanceComponents.ts

@@ -25,8 +25,10 @@ Ethereal Engine. All Rights Reserved.
 
 import { Types } from 'bitecs'
 
+import { useEntityContext } from '@etherealengine/ecs'
 import { defineComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { Entity } from '@etherealengine/ecs/src/Entity'
+import { useLayoutEffect } from 'react'
 
 export const DistanceComponentSchema = { squaredDistance: Types.f32 }
 
@@ -44,9 +46,14 @@ export const FrustumCullCameraComponent = defineComponent({
   name: 'FrustumCullCameraComponent',
   schema: FrustumCullCameraSchema,
 
-  onRemove(entity, component) {
-    // reset upon removing the component
-    FrustumCullCameraComponent.isCulled[entity] = 0
+  reactor: () => {
+    const entity = useEntityContext()
+    useLayoutEffect(() => {
+      return () => {
+        // reset upon removing the component
+        FrustumCullCameraComponent.isCulled[entity] = 0
+      }
+    }, [])
   }
 })
 

packages/spatial/src/xrui/components/PointerComponent.ts

@@ -23,7 +23,7 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import { useEffect } from 'react'
+import { useEffect, useLayoutEffect } from 'react'
 import {
   BufferGeometry,
   Float32BufferAttribute,
@@ -73,14 +73,9 @@ export const PointerComponent = defineComponent({
 
   onSet: (entity, component, json) => {
     if (!json) return
-
     if (matches.object.test(json.inputSource)) component.inputSource.set(json.inputSource)
   },
 
-  onRemove: (entity, component) => {
-    PointerComponent.pointers.delete(component.inputSource.value as XRInputSource)
-  },
-
   reactor: () => {
     const entity = useEntityContext()
     const pointerComponentState = useComponent(entity, PointerComponent)
@@ -98,6 +93,13 @@ export const PointerComponent = defineComponent({
       }
     })
 
+    useLayoutEffect(() => {
+      const inputSource = pointerComponentState.inputSource.value as XRInputSource
+      return () => {
+        PointerComponent.pointers.delete(inputSource)
+      }
+    }, [])
+
     useEffect(() => {
       const inputSource = pointerComponentState.inputSource.value
       const pointer = createPointer(inputSource as XRInputSource)