refactor(components): eliminate ComponentData classes and engine schema usage

src/framework/components/anim/system.js

@@ -1,17 +1,11 @@
 import { AnimTrack } from '../../anim/evaluator/anim-track.js';
-import { Component } from '../component.js';
 import { ComponentSystem } from '../system.js';
 import { AnimComponent } from './component.js';
-import { AnimComponentData } from './data.js';
 
 /**
  * @import { AppBase } from '../../app-base.js'
  */
 
-const _schema = [
-    'enabled'
-];
-
 /**
  * The AnimComponentSystem manages creating and deleting AnimComponents.
  *
@@ -30,16 +24,13 @@ class AnimComponentSystem extends ComponentSystem {
         this.id = 'anim';
 
         this.ComponentType = AnimComponent;
-        this.DataType = AnimComponentData;
-
-        this.schema = _schema;
 
         this.on('beforeremove', this.onBeforeRemove, this);
         this.app.systems.on('animationUpdate', this.onAnimationUpdate, this);
     }
 
     initializeComponentData(component, data, properties) {
-        super.initializeComponentData(component, data, _schema);
+        super.initializeComponentData(component, data);
         const complexProperties = ['animationAssets', 'stateGraph', 'layers', 'masks'];
         Object.keys(data).forEach((key) => {
             // these properties will be initialized manually below
@@ -93,9 +84,8 @@ class AnimComponentSystem extends ComponentSystem {
         for (const id in components) {
             if (components.hasOwnProperty(id)) {
                 const component = components[id].entity.anim;
-                const componentData = component.data;
 
-                if (componentData.enabled && component.entity.enabled && component.playing) {
+                if (component.enabled && component.entity.enabled && component.playing) {
                     component.update(dt);
                 }
             }
@@ -151,6 +141,4 @@ class AnimComponentSystem extends ComponentSystem {
     }
 }
 
-Component._buildAccessors(AnimComponent.prototype, _schema);
-
 export { AnimComponentSystem };

src/framework/components/animation/system.js

@@ -1,17 +1,11 @@
-import { Component } from '../component.js';
 import { ComponentSystem } from '../system.js';
 import { AnimationComponent } from './component.js';
-import { AnimationComponentData } from './data.js';
 
 /**
  * @import { AppBase } from '../../app-base.js'
  * @import { Entity } from '../../entity.js'
  */
 
-const _schema = [
-    'enabled'
-];
-
 /**
  * The AnimationComponentSystem manages creating and deleting AnimationComponents.
  *
@@ -30,9 +24,6 @@ class AnimationComponentSystem extends ComponentSystem {
         this.id = 'animation';
 
         this.ComponentType = AnimationComponent;
-        this.DataType = AnimationComponentData;
-
-        this.schema = _schema;
 
         this.on('beforeremove', this.onBeforeRemove, this);
         this.app.systems.on('update', this.onUpdate, this);
@@ -60,7 +51,7 @@ class AnimationComponentSystem extends ComponentSystem {
             }
         }
 
-        super.initializeComponentData(component, data, _schema);
+        super.initializeComponentData(component, data);
     }
 
     /**
@@ -119,10 +110,10 @@ class AnimationComponentSystem extends ComponentSystem {
 
         for (const id in components) {
             if (components.hasOwnProperty(id)) {
-                const component = components[id];
+                const { entity } = components[id];
 
-                if (component.data.enabled && component.entity.enabled) {
-                    component.entity.animation.update(dt);
+                if (entity.animation.enabled && entity.enabled) {
+                    entity.animation.update(dt);
                 }
             }
         }
@@ -135,6 +126,4 @@ class AnimationComponentSystem extends ComponentSystem {
     }
 }
 
-Component._buildAccessors(AnimationComponent.prototype, _schema);
-
 export { AnimationComponentSystem };

src/framework/components/audio-listener/system.js

@@ -1,15 +1,11 @@
 import { Debug } from '../../../core/debug.js';
-import { Component } from '../component.js';
 import { ComponentSystem } from '../system.js';
 import { AudioListenerComponent } from './component.js';
-import { AudioListenerComponentData } from './data.js';
 
 /**
  * @import { AppBase } from '../../app-base.js'
  */
 
-const _schema = ['enabled'];
-
 /**
  * Component System for adding and removing {@link AudioListenerComponent} objects to Entities.
  *
@@ -28,9 +24,6 @@ class AudioListenerComponentSystem extends ComponentSystem {
         this.id = 'audiolistener';
 
         this.ComponentType = AudioListenerComponent;
-        this.DataType = AudioListenerComponentData;
-
-        this.schema = _schema;
 
         this.manager = app.soundManager;
         Debug.assert(this.manager, 'AudioListenerComponentSystem cannot be created without sound manager');
@@ -40,10 +33,10 @@ class AudioListenerComponentSystem extends ComponentSystem {
         this.app.systems.on('update', this.onUpdate, this);
     }
 
-    initializeComponentData(component, data, properties) {
-        properties = ['enabled'];
-
-        super.initializeComponentData(component, data, properties);
+    cloneComponent(entity, clone) {
+        return this.addComponent(clone, {
+            enabled: entity.audiolistener.enabled
+        });
     }
 
     onUpdate(dt) {
@@ -63,6 +56,4 @@ class AudioListenerComponentSystem extends ComponentSystem {
     }
 }
 
-Component._buildAccessors(AudioListenerComponent.prototype, _schema);
-
 export { AudioListenerComponentSystem };

src/framework/components/button/system.js

@@ -1,14 +1,10 @@
-import { Component } from '../component.js';
 import { ComponentSystem } from '../system.js';
 import { ButtonComponent } from './component.js';
-import { ButtonComponentData } from './data.js';
 
 /**
  * @import { AppBase } from '../../app-base.js'
  */
 
-const _schema = ['enabled'];
-
 const _properties = [
     'imageEntity',
     'active',
@@ -44,9 +40,6 @@ class ButtonComponentSystem extends ComponentSystem {
         this.id = 'button';
 
         this.ComponentType = ButtonComponent;
-        this.DataType = ButtonComponentData;
-
-        this.schema = _schema;
 
         this.on('beforeremove', this._onRemoveComponent, this);
 
@@ -64,7 +57,7 @@ class ButtonComponentSystem extends ComponentSystem {
             }
         }
 
-        super.initializeComponentData(component, data, _schema);
+        super.initializeComponentData(component, data);
     }
 
     cloneComponent(entity, clone) {
@@ -111,6 +104,4 @@ class ButtonComponentSystem extends ComponentSystem {
     }
 }
 
-Component._buildAccessors(ButtonComponent.prototype, _schema);
-
 export { ButtonComponentSystem };

src/framework/components/camera/system.js

@@ -1,17 +1,13 @@
 import { sortPriority } from '../../../core/sort.js';
 import { Color } from '../../../core/math/color.js';
 import { Vec4 } from '../../../core/math/vec4.js';
-import { Component } from '../component.js';
 import { ComponentSystem } from '../system.js';
 import { CameraComponent } from './component.js';
-import { CameraComponentData } from './data.js';
 
 /**
  * @import { AppBase } from '../../app-base.js'
  */
 
-const _schema = ['enabled'];
-
 /**
  * Used to add and remove {@link CameraComponent}s from Entities. It also holds an array of all
  * active cameras.
@@ -38,9 +34,6 @@ class CameraComponentSystem extends ComponentSystem {
         this.id = 'camera';
 
         this.ComponentType = CameraComponent;
-        this.DataType = CameraComponentData;
-
-        this.schema = _schema;
 
         this.on('beforeremove', this.onBeforeRemove, this);
         this.app.on('prerender', this.onAppPrerender, this);
@@ -108,7 +101,7 @@ class CameraComponentSystem extends ComponentSystem {
             }
         }
 
-        super.initializeComponentData(component, data, ['enabled']);
+        super.initializeComponentData(component, data);
     }
 
     cloneComponent(entity, clone) {
@@ -179,6 +172,4 @@ class CameraComponentSystem extends ComponentSystem {
     }
 }
 
-Component._buildAccessors(CameraComponent.prototype, _schema);
-
 export { CameraComponentSystem };

src/framework/components/collision/system.js

@@ -5,10 +5,8 @@ import { Vec3 } from '../../../core/math/vec3.js';
 import { SEMANTIC_POSITION } from '../../../platform/graphics/constants.js';
 import { GraphNode } from '../../../scene/graph-node.js';
 import { Model } from '../../../scene/model.js';
-import { Component } from '../component.js';
 import { ComponentSystem } from '../system.js';
 import { CollisionComponent } from './component.js';
-import { CollisionComponentData } from './data.js';
 import { Trigger } from './trigger.js';
 
 /**
@@ -21,8 +19,6 @@ const p2 = new Vec3();
 const quat = new Quat();
 const tempGraphNode = new GraphNode();
 
-const _schema = ['enabled'];
-
 const _properties = [
     'halfExtents',
     'radius',
@@ -633,9 +629,6 @@ class CollisionComponentSystem extends ComponentSystem {
         this.id = 'collision';
 
         this.ComponentType = CollisionComponent;
-        this.DataType = CollisionComponentData;
-
-        this.schema = _schema;
 
         this.implementations = { };
 
@@ -680,7 +673,7 @@ class CollisionComponentSystem extends ComponentSystem {
         const impl = this._createImplementation(component._type);
         impl.beforeInitialize(component);
 
-        super.initializeComponentData(component, data, _schema);
+        super.initializeComponentData(component, data);
 
         impl.afterInitialize(component);
     }
@@ -875,6 +868,4 @@ class CollisionComponentSystem extends ComponentSystem {
     }
 }
 
-Component._buildAccessors(CollisionComponent.prototype, _schema);
-
 export { CollisionComponentSystem };

src/framework/components/component.js

@@ -35,6 +35,14 @@ class Component extends EventHandler {
      */
     entity;
 
+    /**
+     * The enabled state of the component.
+     *
+     * @type {boolean}
+     * @private
+     */
+    _enabled = true;
+
     /**
      * Base constructor for a Component.
      *
@@ -47,7 +55,9 @@ class Component extends EventHandler {
         this.system = system;
         this.entity = entity;
 
-        if (this.system.schema && !this._accessorsBuilt) {
+        // Legacy path for external components (e.g. playcanvas-spine) that define a schema on
+        // their system: build data-backed instance accessors for each schema property
+        if (this.system.schema?.length && !this._accessorsBuilt) {
             this.buildAccessors(this.system.schema);
         }
 
@@ -58,7 +68,12 @@ class Component extends EventHandler {
         this.on('set_enabled', this.onSetEnabled, this);
     }
 
-    /** @ignore */
+    /**
+     * Legacy path for external components (e.g. playcanvas-spine) that store their properties in
+     * a ComponentData object: creates data-backed accessors for each schema property.
+     *
+     * @ignore
+     */
     static _buildAccessors(obj, schema) {
         // Create getter/setter pairs for each property defined in the schema
         schema.forEach((descriptor) => {
@@ -115,7 +130,9 @@ class Component extends EventHandler {
 
     /**
      * Access the component data directly. Usually you should access the data properties via the
-     * individual properties as modifying this data directly will not fire 'set' events.
+     * individual properties as modifying this data directly will not fire 'set' events. This is a
+     * legacy path for external components that still store their properties in a ComponentData
+     * object - engine components no longer store any data here.
      *
      * @type {*}
      * @ignore
@@ -130,7 +147,10 @@ class Component extends EventHandler {
      *
      * @type {boolean}
      */
-    set enabled(arg) {
+    set enabled(value) {
+        const oldValue = this._enabled;
+        this._enabled = value;
+        this.fire('set', 'enabled', oldValue, value);
     }
 
     /**
@@ -139,7 +159,7 @@ class Component extends EventHandler {
      * @type {boolean}
      */
     get enabled() {
-        return true;
+        return this._enabled;
     }
 }