@playcanvas/web-components 0.11.0 → 0.12.0

package/src/components/gsplat-component.ts

@@ -1,9 +1,10 @@
-import { GSplatComponent } from 'playcanvas';
+import type { GSplatComponent } from 'playcanvas';
 
-import { ComponentElement } from './component';
 import { AssetElement } from '../asset';
 import { parseBool, parseNumber } from '../parse';
 
+import { ComponentElement } from './component';
+
 /**
  * The GSplatComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-gsplat/ | `<pc-gsplat>`} elements.
@@ -30,7 +31,7 @@ class GSplatComponentElement extends ComponentElement {
         super('gsplat');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         return {
             asset: AssetElement.get(this._asset),
             castShadows: this._castShadows,
@@ -216,10 +217,4 @@ class GSplatComponentElement extends ComponentElement {
 
 customElements.define('pc-gsplat', GSplatComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-gsplat': GSplatComponentElement;
-    }
-}
-
 export { GSplatComponentElement };

package/src/components/layoutchild-component.ts

@@ -1,8 +1,9 @@
-import { LayoutChildComponent } from 'playcanvas';
+import type { LayoutChildComponent } from 'playcanvas';
 
-import { ComponentElement } from './component';
 import { parseBool, parseNumber } from '../parse';
 
+import { ComponentElement } from './component';
+
 /**
  * The LayoutChildComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-layoutchild/ | `<pc-layoutchild>`} elements.
@@ -31,7 +32,7 @@ class LayoutChildComponentElement extends ComponentElement {
         super('layoutchild');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         return {
             minWidth: this._minWidth,
             minHeight: this._minHeight,
@@ -230,10 +231,4 @@ class LayoutChildComponentElement extends ComponentElement {
 
 customElements.define('pc-layoutchild', LayoutChildComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-layoutchild': LayoutChildComponentElement;
-    }
-}
-
 export { LayoutChildComponentElement };

package/src/components/layoutgroup-component.ts

@@ -1,8 +1,19 @@
-import { FITTING_NONE, FITTING_STRETCH, FITTING_SHRINK, FITTING_BOTH, LayoutGroupComponent, ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL, Vec2, Vec4 } from 'playcanvas';
+import type { LayoutGroupComponent } from 'playcanvas';
+import {
+    FITTING_NONE,
+    FITTING_STRETCH,
+    FITTING_SHRINK,
+    FITTING_BOTH,
+    ORIENTATION_HORIZONTAL,
+    ORIENTATION_VERTICAL,
+    Vec2,
+    Vec4
+} from 'playcanvas';
 
-import { ComponentElement } from './component';
 import { parseBool, parseEnum, parseVec2, parseVec4 } from '../parse';
 
+import { ComponentElement } from './component';
+
 const orientations = new Map<'horizontal' | 'vertical', number>([
     ['horizontal', ORIENTATION_HORIZONTAL],
     ['vertical', ORIENTATION_VERTICAL]
@@ -47,7 +58,7 @@ class LayoutGroupComponentElement extends ComponentElement {
         super('layoutgroup');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         return {
             orientation: orientations.get(this._orientation),
             reverseX: this._reverseX,
@@ -295,10 +306,4 @@ class LayoutGroupComponentElement extends ComponentElement {
 
 customElements.define('pc-layoutgroup', LayoutGroupComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-layoutgroup': LayoutGroupComponentElement;
-    }
-}
-
 export { LayoutGroupComponentElement };

package/src/components/light-component.ts

@@ -1,9 +1,25 @@
-import { Color, LightComponent, SHADOW_PCF1_16F, SHADOW_PCF1_32F, SHADOW_PCF3_16F, SHADOW_PCF3_32F, SHADOW_PCF5_16F, SHADOW_PCF5_32F, SHADOW_PCSS_32F, SHADOW_VSM_16F, SHADOW_VSM_32F } from 'playcanvas';
+import type { LightComponent } from 'playcanvas';
+import {
+    Color,
+    SHADOW_PCF1_16F,
+    SHADOW_PCF1_32F,
+    SHADOW_PCF3_16F,
+    SHADOW_PCF3_32F,
+    SHADOW_PCF5_16F,
+    SHADOW_PCF5_32F,
+    SHADOW_PCSS_32F,
+    SHADOW_VSM_16F,
+    SHADOW_VSM_32F
+} from 'playcanvas';
 
-import { ComponentElement } from './component';
 import { parseBool, parseColor, parseEnum, parseNumber } from '../parse';
 
-const shadowTypes = new Map<'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f', number>([
+import { ComponentElement } from './component';
+
+const shadowTypes = new Map<
+    'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f',
+    number
+>([
     ['pcf1-16f', SHADOW_PCF1_16F],
     ['pcf1-32f', SHADOW_PCF1_32F],
     ['pcf3-16f', SHADOW_PCF3_16F],
@@ -46,7 +62,16 @@ class LightComponentElement extends ComponentElement {
 
     private _shadowResolution = 1024;
 
-    private _shadowType: 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f' = 'pcf3-32f';
+    private _shadowType:
+        | 'pcf1-16f'
+        | 'pcf1-32f'
+        | 'pcf3-16f'
+        | 'pcf3-32f'
+        | 'pcf5-16f'
+        | 'pcf5-32f'
+        | 'vsm-16f'
+        | 'vsm-32f'
+        | 'pcss-32f' = 'pcf3-32f';
 
     private _type: 'directional' | 'omni' | 'spot' = 'directional';
 
@@ -67,7 +92,7 @@ class LightComponentElement extends ComponentElement {
         super('light');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         return {
             castShadows: this._castShadows,
             color: this._color,
@@ -322,7 +347,18 @@ class LightComponentElement extends ComponentElement {
      * - `vsm-32f` - Variance shadow map with 32-bit depth.
      * - `pcss-32f` - Percentage-closer soft shadow with 32-bit depth.
      */
-    set shadowType(value: 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f') {
+    set shadowType(
+        value:
+            | 'pcf1-16f'
+            | 'pcf1-32f'
+            | 'pcf3-16f'
+            | 'pcf3-32f'
+            | 'pcf5-16f'
+            | 'pcf5-32f'
+            | 'vsm-16f'
+            | 'vsm-32f'
+            | 'pcss-32f'
+    ) {
         this._shadowType = value;
         if (this.component) {
             this.component.shadowType = shadowTypes.get(value) ?? SHADOW_PCF3_32F;
@@ -563,10 +599,4 @@ class LightComponentElement extends ComponentElement {
 
 customElements.define('pc-light', LightComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-light': LightComponentElement;
-    }
-}
-
 export { LightComponentElement };

package/src/components/listener-component.ts

@@ -1,4 +1,4 @@
-import { AudioListenerComponent } from 'playcanvas';
+import type { AudioListenerComponent } from 'playcanvas';
 
 import { ComponentElement } from './component';
 
@@ -27,10 +27,4 @@ class ListenerComponentElement extends ComponentElement {
 
 customElements.define('pc-listener', ListenerComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-listener': ListenerComponentElement;
-    }
-}
-
 export { ListenerComponentElement };

package/src/components/particlesystem-component.ts

@@ -1,8 +1,9 @@
-import { ParticleSystemComponent } from 'playcanvas';
+import type { ParticleSystemComponent } from 'playcanvas';
 
-import { ComponentElement } from './component';
 import { AssetElement } from '../asset';
 
+import { ComponentElement } from './component';
+
 /**
  * The ParticleSystemComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-particles/ | `<pc-particles>`} elements.
@@ -12,14 +13,14 @@ import { AssetElement } from '../asset';
  * @category Components
  */
 class ParticleSystemComponentElement extends ComponentElement {
-    private _asset: string = '';
+    private _asset = '';
 
     /** @ignore */
     constructor() {
         super('particlesystem');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         const asset = AssetElement.get(this._asset);
         if (!asset) {
             return {};
@@ -51,7 +52,7 @@ class ParticleSystemComponentElement extends ComponentElement {
 
         // Set all the config properties on the component
         for (const key in resource) {
-            if (resource.hasOwnProperty(key)) {
+            if (Object.hasOwn(resource, key)) {
                 (this.component as any)[key] = resource[key];
             }
         }
@@ -133,10 +134,7 @@ class ParticleSystemComponentElement extends ComponentElement {
     }
 
     static get observedAttributes() {
-        return [
-            ...super.observedAttributes,
-            'asset'
-        ];
+        return [...super.observedAttributes, 'asset'];
     }
 
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
@@ -152,10 +150,4 @@ class ParticleSystemComponentElement extends ComponentElement {
 
 customElements.define('pc-particles', ParticleSystemComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-particles': ParticleSystemComponentElement;
-    }
-}
-
 export { ParticleSystemComponentElement };

package/src/components/render-component.ts

@@ -1,9 +1,10 @@
-import { RenderComponent, StandardMaterial } from 'playcanvas';
+import type { RenderComponent, StandardMaterial } from 'playcanvas';
 
-import { ComponentElement } from './component';
 import { MaterialElement } from '../material';
 import { parseBool, parseEnum } from '../parse';
 
+import { ComponentElement } from './component';
+
 /**
  * The RenderComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-render/ | `<pc-render>`} elements.
@@ -19,7 +20,7 @@ import { parseBool, parseEnum } from '../parse';
 class RenderComponentElement extends ComponentElement {
     private _castShadows = true;
 
-    private _material: string = '';
+    private _material = '';
 
     private _receiveShadows = true;
 
@@ -30,7 +31,7 @@ class RenderComponentElement extends ComponentElement {
         super('render');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         return {
             type: this._type,
             castShadows: this._castShadows,
@@ -154,10 +155,4 @@ class RenderComponentElement extends ComponentElement {
 
 customElements.define('pc-render', RenderComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-render': RenderComponentElement;
-    }
-}
-
 export { RenderComponentElement };

package/src/components/rigidbody-component.ts

@@ -1,8 +1,10 @@
-import { RigidBodyComponent, Vec3 } from 'playcanvas';
+import type { RigidBodyComponent } from 'playcanvas';
+import { Vec3 } from 'playcanvas';
 
-import { ComponentElement } from './component';
 import { parseEnum, parseNumber, parseVec3 } from '../parse';
 
+import { ComponentElement } from './component';
+
 /**
  * The RigidBodyComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-rigidbody/ | `<pc-rigidbody>`} elements.
@@ -15,7 +17,7 @@ class RigidBodyComponentElement extends ComponentElement {
     /**
      * The angular damping of the rigidbody.
      */
-    private _angularDamping: number = 0;
+    private _angularDamping = 0;
 
     /**
      * The angular factor of the rigidbody.
@@ -25,12 +27,12 @@ class RigidBodyComponentElement extends ComponentElement {
     /**
      * The friction of the rigidbody.
      */
-    private _friction: number = 0.5;
+    private _friction = 0.5;
 
     /**
      * The linear damping of the rigidbody.
      */
-    private _linearDamping: number = 0;
+    private _linearDamping = 0;
 
     /**
      * The linear factor of the rigidbody.
@@ -40,17 +42,17 @@ class RigidBodyComponentElement extends ComponentElement {
     /**
      * The mass of the rigidbody.
      */
-    private _mass: number = 1;
+    private _mass = 1;
 
     /**
      * The restitution of the rigidbody.
      */
-    private _restitution: number = 0;
+    private _restitution = 0;
 
     /**
      * The rolling friction of the rigidbody.
      */
-    private _rollingFriction: number = 0;
+    private _rollingFriction = 0;
 
     /**
      * The type of the rigidbody.
@@ -62,7 +64,7 @@ class RigidBodyComponentElement extends ComponentElement {
         super('rigidbody');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         return {
             angularDamping: this._angularDamping,
             angularFactor: this._angularFactor,
@@ -184,7 +186,18 @@ class RigidBodyComponentElement extends ComponentElement {
     }
 
     static get observedAttributes() {
-        return [...super.observedAttributes, 'angular-damping', 'angular-factor', 'friction', 'linear-damping', 'linear-factor', 'mass', 'restitution', 'rolling-friction', 'type'];
+        return [
+            ...super.observedAttributes,
+            'angular-damping',
+            'angular-factor',
+            'friction',
+            'linear-damping',
+            'linear-factor',
+            'mass',
+            'restitution',
+            'rolling-friction',
+            'type'
+        ];
     }
 
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
@@ -224,10 +237,4 @@ class RigidBodyComponentElement extends ComponentElement {
 
 customElements.define('pc-rigidbody', RigidBodyComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-rigidbody': RigidBodyComponentElement;
-    }
-}
-
 export { RigidBodyComponentElement };

package/src/components/screen-component.ts

@@ -1,8 +1,10 @@
-import { SCALEMODE_BLEND, SCALEMODE_NONE, ScreenComponent, Vec2 } from 'playcanvas';
+import type { ScreenComponent } from 'playcanvas';
+import { SCALEMODE_BLEND, SCALEMODE_NONE, Vec2 } from 'playcanvas';
 
-import { ComponentElement } from './component';
 import { parseBool, parseEnum, parseNumber, parseVec2 } from '../parse';
 
+import { ComponentElement } from './component';
+
 // The engine's SCALEMODE_* constants are the strings 'none' and 'blend', so this map happens to be
 // an identity. It is still the right shape: it supplies parseEnum's valid-name list, it is what the
 // manifest generator reads the enum values from, and it keeps the attribute vocabulary independent
@@ -38,7 +40,7 @@ class ScreenComponentElement extends ComponentElement {
         super('screen');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         return {
             priority: this._priority,
             referenceResolution: this._referenceResolution,
@@ -184,10 +186,4 @@ class ScreenComponentElement extends ComponentElement {
 
 customElements.define('pc-screen', ScreenComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-screen': ScreenComponentElement;
-    }
-}
-
 export { ScreenComponentElement };