@playcanvas/web-components 0.11.0 → 0.11.1

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 };

package/src/components/script-component.ts

@@ -1,9 +1,21 @@
-import { Color, Quat, ScriptComponent, Script, Vec2, Vec3, Vec4 } from 'playcanvas';
+import type { ScriptComponent, Script } from 'playcanvas';
+import { Color, Quat, Vec2, Vec3, Vec4 } from 'playcanvas';
 
 import { AssetElement } from '../asset';
+import {
+    getEntity,
+    parseBool,
+    parseColor,
+    parseComponents,
+    parseNumber,
+    parseQuat,
+    parseVec2,
+    parseVec3,
+    parseVec4
+} from '../parse';
+
 import { ComponentElement } from './component';
 import { ScriptElement } from './script';
-import { getEntity, parseBool, parseColor, parseComponents, parseNumber, parseQuat, parseVec2, parseVec3, parseVec4 } from '../parse';
 
 /**
  * Attributes on `pc-script` that never map to script attributes: the element's own API (derived
@@ -11,10 +23,34 @@ import { getEntity, parseBool, parseColor, parseComponents, parseNumber, parseQu
  */
 const RESERVED_ATTRIBUTES = new Set([
     ...ScriptElement.observedAttributes,
-    'accesskey', 'autocapitalize', 'autofocus', 'class', 'contenteditable', 'dir', 'draggable',
-    'exportparts', 'hidden', 'id', 'inert', 'is', 'itemid', 'itemprop', 'itemref', 'itemscope',
-    'itemtype', 'lang', 'nonce', 'part', 'popover', 'role', 'slot', 'spellcheck', 'style',
-    'tabindex', 'title', 'translate'
+    'accesskey',
+    'autocapitalize',
+    'autofocus',
+    'class',
+    'contenteditable',
+    'dir',
+    'draggable',
+    'exportparts',
+    'hidden',
+    'id',
+    'inert',
+    'is',
+    'itemid',
+    'itemprop',
+    'itemref',
+    'itemscope',
+    'itemtype',
+    'lang',
+    'nonce',
+    'part',
+    'popover',
+    'role',
+    'slot',
+    'spellcheck',
+    'style',
+    'tabindex',
+    'title',
+    'translate'
 ]);
 
 /**
@@ -27,11 +63,13 @@ const RESERVED_ATTRIBUTES = new Set([
  * @returns Whether the attribute name is reserved.
  */
 const isReservedAttribute = (name: string): boolean => {
-    return RESERVED_ATTRIBUTES.has(name) ||
+    return (
+        RESERVED_ATTRIBUTES.has(name) ||
         name.startsWith('data-') ||
         name.startsWith('aria-') ||
         name.startsWith('_') ||
-        (name.startsWith('on') && name in HTMLElement.prototype);
+        (name.startsWith('on') && name in HTMLElement.prototype)
+    );
 };
 
 /**
@@ -39,7 +77,14 @@ const isReservedAttribute = (name: string): boolean => {
  * the (optional, so possibly undefined) lifecycle methods.
  */
 const SCRIPT_API_MEMBERS = new Set([
-    'app', 'entity', 'destroy', 'initialize', 'postInitialize', 'postUpdate', 'swap', 'update'
+    'app',
+    'entity',
+    'destroy',
+    'initialize',
+    'postInitialize',
+    'postUpdate',
+    'swap',
+    'update'
 ]);
 
 /**
@@ -57,7 +102,7 @@ const kebabToCamel = (name: string): string => {
  * @returns The kebab-case name.
  */
 const camelToKebab = (name: string): string => {
-    return name.replace(/[A-Z]/g, char => `-${char.toLowerCase()}`);
+    return name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
 };
 
 /**
@@ -110,7 +155,9 @@ const vectorConversion = (length: 2 | 3 | 4, Ctor: new (components: number[]) =>
         if (components) {
             return new Ctor(components);
         }
-        console.warn(`Invalid script attribute value '${raw}'. Expected ${length} space-separated numbers after 'vec${length}:'.`);
+        console.warn(
+            `Invalid script attribute value '${raw}'. Expected ${length} space-separated numbers after 'vec${length}:'.`
+        );
         return raw;
     };
 };
@@ -183,27 +230,17 @@ const findCaseMatch = (script: any, key: string): string | null => {
     return null;
 };
 
-// Add these interfaces at the top of the file, after the imports
-interface ScriptAttributesChangeEvent extends CustomEvent {
+export type ScriptAttributesChangeEvent = {
     detail: { attributes: Record<string, any> };
-}
+} & CustomEvent;
 
-interface ScriptEnableChangeEvent extends CustomEvent {
+export type ScriptEnableChangeEvent = {
     detail: { enabled: boolean };
-}
-
-interface ScriptNameChangeEvent extends CustomEvent {
-    detail: { oldName: string, newName: string };
-}
+} & CustomEvent;
 
-// Add this interface before the ScriptComponentElement class
-declare global {
-    interface HTMLElementEventMap {
-        'scriptattributeschange': ScriptAttributesChangeEvent;
-        'scriptenablechange': ScriptEnableChangeEvent;
-        'scriptnamechange': ScriptNameChangeEvent;
-    }
-}
+export type ScriptNameChangeEvent = {
+    detail: { oldName: string; newName: string };
+} & CustomEvent;
 
 /**
  * The ScriptComponentElement interface provides properties and methods for manipulating
@@ -237,7 +274,7 @@ class ScriptComponentElement extends ComponentElement {
         return super.connectedCallback();
     }
 
-    initComponent() {
+    protected initComponent() {
         // Handle initial script elements
         this.querySelectorAll<ScriptElement>(':scope > pc-script').forEach((scriptElement) => {
             this.createScript(scriptElement);
@@ -303,7 +340,12 @@ class ScriptComponentElement extends ComponentElement {
             // Only recurse into plain objects. Class instances (Vec3, Color, Asset, Entity...)
             // are leaf values assigned whole, so accessor-typed script attributes receive them
             // through their setters instead of having a getter's returned copy mutated.
-            if (value && typeof value === 'object' && !Array.isArray(value) && Object.getPrototypeOf(value) === Object.prototype) {
+            if (
+                value &&
+                typeof value === 'object' &&
+                !Array.isArray(value) &&
+                Object.getPrototypeOf(value) === Object.prototype
+            ) {
                 if (!current || typeof current !== 'object') {
                     target[key] = {};
                 }
@@ -321,7 +363,13 @@ class ScriptComponentElement extends ComponentElement {
      * @returns Whether the value is a math type.
      */
     private isMathType(value: any): value is Vec2 | Vec3 | Vec4 | Color | Quat {
-        return value instanceof Vec2 || value instanceof Vec3 || value instanceof Vec4 || value instanceof Color || value instanceof Quat;
+        return (
+            value instanceof Vec2 ||
+            value instanceof Vec3 ||
+            value instanceof Vec4 ||
+            value instanceof Color ||
+            value instanceof Quat
+        );
     }
 
     /**
@@ -334,15 +382,22 @@ class ScriptComponentElement extends ComponentElement {
      * @param key - The property name, used in the warning message.
      * @returns The converted value, or `null`.
      */
-    private arrayToMathType(current: Vec2 | Vec3 | Vec4 | Color | Quat, value: any[], key: string): Vec2 | Vec3 | Vec4 | Color | Quat | null {
-        if (value.every(component => typeof component === 'number' && Number.isFinite(component))) {
+    private arrayToMathType(
+        current: Vec2 | Vec3 | Vec4 | Color | Quat,
+        value: any[],
+        key: string
+    ): Vec2 | Vec3 | Vec4 | Color | Quat | null {
+        if (value.every((component) => typeof component === 'number' && Number.isFinite(component))) {
             if (current instanceof Vec2 && value.length === 2) return new Vec2(value);
             if (current instanceof Vec3 && value.length === 3) return new Vec3(value);
             if (current instanceof Vec4 && value.length === 4) return new Vec4(value);
             if (current instanceof Color && (value.length === 3 || value.length === 4)) return new Color(value);
-            if (current instanceof Quat && value.length === 3) return new Quat().setFromEulerAngles(value[0], value[1], value[2]);
+            if (current instanceof Quat && value.length === 3)
+                return new Quat().setFromEulerAngles(value[0], value[1], value[2]);
         }
-        console.warn(`Cannot convert script attribute '${key}' array [${value}] to ${current.constructor.name}. Keeping the current value.`);
+        console.warn(
+            `Cannot convert script attribute '${key}' array [${value}] to ${current.constructor.name}. Keeping the current value.`
+        );
         return null;
     }
 
@@ -540,7 +595,9 @@ class ScriptComponentElement extends ComponentElement {
             const current = script[key];
 
             if (typeof current === 'function' || SCRIPT_API_MEMBERS.has(key)) {
-                console.warn(`Ignoring attribute '${attributeName}' on pc-script '${scriptName}' - '${key}' is part of the Script API.`);
+                console.warn(
+                    `Ignoring attribute '${attributeName}' on pc-script '${scriptName}' - '${key}' is part of the Script API.`
+                );
                 return;
             }
 
@@ -570,14 +627,20 @@ class ScriptComponentElement extends ComponentElement {
             } else {
                 const match = findCaseMatch(script, key);
                 if (match) {
-                    console.warn(`Script '${scriptName}' has no attribute '${key}' - did you mean '${camelToKebab(match)}'? Attribute names are kebab-case.`);
+                    console.warn(
+                        `Script '${scriptName}' has no attribute '${key}' - did you mean '${camelToKebab(match)}'? Attribute names are kebab-case.`
+                    );
                     return;
                 }
-                console.warn(`Script '${scriptName}' has no typed attribute '${key}' - assigning the raw string from '${attributeName}'.`);
+                console.warn(
+                    `Script '${scriptName}' has no typed attribute '${key}' - assigning the raw string from '${attributeName}'.`
+                );
                 script[key] = value;
             }
         } catch (error) {
-            console.warn(`Error applying attribute '${attributeName}' to script '${scriptName}': ${(error as Error).message}`);
+            console.warn(
+                `Error applying attribute '${attributeName}' to script '${scriptName}': ${(error as Error).message}`
+            );
         }
     }
 
@@ -616,7 +679,12 @@ class ScriptComponentElement extends ComponentElement {
             mutation.removedNodes.forEach((node) => {
                 if (node instanceof ScriptElement) {
                     const scriptName = node.getAttribute('name');
-                    if (scriptName && node._script && this.component && this.component.get(scriptName) === node._script) {
+                    if (
+                        scriptName &&
+                        node._script &&
+                        this.component &&
+                        this.component.get(scriptName) === node._script
+                    ) {
                         this.destroyScript(scriptName);
                     }
                     node._script = null;
@@ -648,10 +716,4 @@ class ScriptComponentElement extends ComponentElement {
 
 customElements.define('pc-scripts', ScriptComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-scripts': ScriptComponentElement;
-    }
-}
-
 export { ScriptComponentElement };