@playcanvas/web-components 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playcanvas/web-components",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "author": "PlayCanvas <support@playcanvas.com>",
   "homepage": "https://playcanvas.com",
   "description": "Web Components for the PlayCanvas Engine",
@@ -25,8 +25,11 @@
   },
   "main": "dist/pwc.cjs",
   "module": "dist/pwc.mjs",
-  "browser": "dist/pwc.js",
+  "unpkg": "dist/pwc.min.js",
+  "jsdelivr": "dist/pwc.min.js",
   "types": "dist/index.d.ts",
+  "customElements": "dist/custom-elements.json",
+  "web-types": "dist/web-types.json",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -44,21 +47,31 @@
   "scripts": {
     "prebuild": "node -e \"fs.rmSync('dist', { recursive: true, force: true })\"",
     "build": "rollup -c",
+    "postbuild": "npm run cem",
+    "cem": "cem analyze && node utils/cem/validate.mjs",
     "dev": "concurrently \"npm run watch\" \"npm run serve\"",
     "docs": "typedoc",
-    "lint": "eslint examples/js examples/assets/scripts src",
+    "lint": "eslint examples/js examples/assets/scripts src test vitest.config.ts",
     "serve": "serve",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:unit": "vitest run --project unit",
+    "test:elements": "vitest run --project elements",
+    "test:integration": "vitest run --project integration",
     "publint": "publint",
-    "type-check": "tsc --noEmit",
-    "type-check:watch": "npm run type-check -- --watch",
+    "type-check": "npm run type-check:src && npm run type-check:test",
+    "type-check:src": "tsc --noEmit -p tsconfig.json",
+    "type-check:test": "tsc --noEmit -p tsconfig.test.json",
+    "type-check:watch": "npm run type-check:src -- --watch",
     "watch": "rollup -c -w"
   },
   "peerDependencies": {
     "playcanvas": "^2.20.1"
   },
   "devDependencies": {
-    "@mediapipe/tasks-vision": "1.0.0",
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@mediapipe/tasks-vision": "1.0.1",
     "@playcanvas/eslint-config": "2.1.0",
     "@rollup/plugin-commonjs": "29.0.3",
     "@rollup/plugin-node-resolve": "16.0.3",
@@ -67,20 +80,25 @@
     "@tweenjs/tween.js": "25.0.0",
     "@typescript-eslint/eslint-plugin": "8.65.0",
     "@typescript-eslint/parser": "8.65.0",
+    "@vitest/coverage-v8": "4.1.10",
     "concurrently": "10.0.4",
+    "custom-element-jet-brains-integration": "1.7.0",
+    "custom-element-vs-code-integration": "1.5.0",
     "earcut": "3.2.3",
     "eslint": "9.39.5",
     "eslint-import-resolver-typescript": "4.4.5",
-    "globals": "17.8.0",
-    "mediabunny": "1.51.0",
+    "globals": "17.9.0",
+    "jsdom": "30.0.1",
+    "mediabunny": "1.52.2",
     "opentype.js": "2.0.0",
     "playcanvas": "2.21.3",
     "publint": "0.3.22",
-    "rollup": "4.62.3",
+    "rollup": "4.62.4",
     "serve": "14.2.6",
     "tslib": "2.8.1",
     "typedoc": "0.28.20",
     "typedoc-plugin-mdn-links": "5.1.1",
-    "typescript": "6.0.3"
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
   }
 }

package/src/app.ts

@@ -71,7 +71,7 @@ import { AsyncElement } from './async-element';
 import { EntityElement } from './entity';
 import { MaterialElement } from './material';
 import { ModuleElement } from './module';
-import { parseBool, parseEnum } from './utils';
+import { parseBool, parseEnum } from './parse';
 
 /**
  * The AppElement interface provides properties and methods for manipulating
@@ -87,7 +87,7 @@ class AppElement extends AsyncElement {
 
     private _alpha = true;
 
-    private _backend: 'webgpu' | 'webgl2' | 'null' = 'webgl2';
+    private _backend: 'webgpu' | 'webgl2' | 'null' = 'webgpu';
 
     private _antialias = true;
 
@@ -528,7 +528,8 @@ class AppElement extends AsyncElement {
     }
 
     /**
-     * Sets the graphics backend.
+     * Sets the graphics backend. Defaults to 'webgpu', which falls back to 'webgl2' if WebGPU
+     * is not supported by the browser.
      * @param value - The graphics backend ('webgpu', 'webgl2', or 'null').
      */
     set backend(value: 'webgpu' | 'webgl2' | 'null') {
@@ -608,7 +609,7 @@ class AppElement extends AsyncElement {
         return ['alpha', 'antialias', 'backend', 'depth', 'stencil', 'high-resolution'];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         switch (name) {
             case 'alpha':
                 this.alpha = parseBool(newValue, true);
@@ -617,7 +618,7 @@ class AppElement extends AsyncElement {
                 this.antialias = parseBool(newValue, true);
                 break;
             case 'backend':
-                this.backend = parseEnum(newValue, ['webgpu', 'webgl2', 'null'], 'webgl2', name);
+                this.backend = parseEnum(newValue, ['webgpu', 'webgl2', 'null'], 'webgpu', name);
                 break;
             case 'depth':
                 this.depth = parseBool(newValue, true);

package/src/asset.ts

@@ -1,7 +1,7 @@
 import { Asset, SPRITE_RENDERMODE_SIMPLE, SPRITE_RENDERMODE_SLICED, SPRITE_RENDERMODE_TILED } from 'playcanvas';
 
 import { AsyncElement } from './async-element';
-import { parseBool, parseEnum, parseNumber } from './utils';
+import { parseBool, parseEnum, parseNumber } from './parse';
 import { MeshoptDecoder } from '../lib/meshopt_decoder.module.js';
 
 const renderModes = new Map<'simple' | 'sliced' | 'tiled', number>([
@@ -16,11 +16,13 @@ const extToType = new Map([
     ['frag', 'shader'],
     ['glb', 'container'],
     ['glsl', 'shader'],
+    ['gltf', 'container'],
     ['hdr', 'texture'],
     ['html', 'html'],
     ['jpg', 'texture'],
     ['js', 'script'],
     ['json', 'json'],
+    ['ktx2', 'texture'],
     ['mp3', 'audio'],
     ['mjs', 'script'],
     ['ply', 'gsplat'],
@@ -82,6 +84,21 @@ const processBufferView = (
  * while the application is running are created and registered on insertion, and begin loading
  * immediately unless `lazy`. A `pc-asset` must be a direct child of `pc-app` — elements placed
  * elsewhere, or with an unsupported asset type, never become ready.
+ *
+ * Apart from `lazy`, these attributes are read once when the asset is created, so changing them
+ * later has no effect.
+ *
+ * @attribute {string} id - The identifier used to reference the asset from other elements.
+ * @attribute {string} src - The URL of the asset to load.
+ * @attribute {string} type - The asset type. Inferred from the `src` file extension when omitted.
+ * @attribute {string} data - Additional asset data, as a JSON object.
+ * @attribute {string} atlas - For a `sprite` asset, the `id` of the texture atlas asset it uses.
+ * The atlas must be declared before the sprite.
+ * @attribute {string} frame-keys - For a `sprite` asset, the atlas frame keys it uses, separated
+ * by spaces or commas.
+ * @attribute {number} pixels-per-unit - For a `sprite` asset, the number of pixels per world unit.
+ * @attribute {'simple' | 'sliced' | 'tiled'} render-mode - For a `sprite` asset, how the sprite is
+ * rendered when resized.
  */
 class AssetElement extends AsyncElement {
     private _lazy: boolean = false;
@@ -267,7 +284,7 @@ class AssetElement extends AsyncElement {
         return ['lazy'];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         if (name === 'lazy') {
             this.lazy = parseBool(newValue, false);
         }

package/src/async-element.ts

@@ -3,6 +3,9 @@ import { EntityElement } from './entity';
 
 /**
  * Base class for all PlayCanvas Web Components that initialize asynchronously.
+ *
+ * @fires {CustomEvent} ready - Fired once the element is fully initialized. Bubbles and is
+ * composed.
  */
 class AsyncElement extends HTMLElement {
     private _readyPromise: Promise<void>;

package/src/components/button-component.ts

@@ -2,7 +2,7 @@ import { BUTTON_TRANSITION_MODE_SPRITE_CHANGE, BUTTON_TRANSITION_MODE_TINT, Butt
 
 import { AssetElement } from '../asset';
 import { ComponentElement } from './component';
-import { getEntity, parseBool, parseColor, parseEnum, parseNumber, parseVec4 } from '../utils';
+import { getEntity, parseBool, parseColor, parseEnum, parseNumber, parseVec4 } from '../parse';
 
 const transitionModes = new Map<'tint' | 'sprite', number>([
     ['tint', BUTTON_TRANSITION_MODE_TINT],
@@ -396,7 +396,7 @@ class ButtonComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
@@ -404,7 +404,7 @@ class ButtonComponentElement extends ComponentElement {
                 this.active = parseBool(newValue, true);
                 break;
             case 'image':
-                this.image = newValue;
+                this.image = newValue ?? '';
                 break;
             case 'hit-padding':
                 this.hitPadding = parseVec4(newValue, Vec4.ZERO, name);
@@ -425,19 +425,19 @@ class ButtonComponentElement extends ComponentElement {
                 this.fadeDuration = parseNumber(newValue, 0, name);
                 break;
             case 'hover-sprite-asset':
-                this.hoverSpriteAsset = newValue;
+                this.hoverSpriteAsset = newValue ?? '';
                 break;
             case 'hover-sprite-frame':
                 this.hoverSpriteFrame = parseNumber(newValue, 0, name);
                 break;
             case 'pressed-sprite-asset':
-                this.pressedSpriteAsset = newValue;
+                this.pressedSpriteAsset = newValue ?? '';
                 break;
             case 'pressed-sprite-frame':
                 this.pressedSpriteFrame = parseNumber(newValue, 0, name);
                 break;
             case 'inactive-sprite-asset':
-                this.inactiveSpriteAsset = newValue;
+                this.inactiveSpriteAsset = newValue ?? '';
                 break;
             case 'inactive-sprite-frame':
                 this.inactiveSpriteFrame = parseNumber(newValue, 0, name);

package/src/components/camera-component.ts

@@ -1,7 +1,7 @@
 import { CameraComponent, Color, Vec4, GAMMA_NONE, GAMMA_SRGB, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, TONEMAP_LINEAR, TONEMAP_FILMIC, TONEMAP_NEUTRAL, TONEMAP_ACES2, TONEMAP_ACES, TONEMAP_HEJL, TONEMAP_NONE, XRTYPE_VR } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseBool, parseColor, parseEnum, parseNumber, parseVec4 } from '../utils';
+import { parseBool, parseColor, parseEnum, parseNumber, parseVec4 } from '../parse';
 
 const tonemaps = new Map<'none' | 'linear' | 'filmic' | 'hejl' | 'aces' | 'aces2' | 'neutral', number>([
     ['none', TONEMAP_NONE],
@@ -490,7 +490,7 @@ class CameraComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/collision-component.ts

@@ -1,7 +1,7 @@
 import { CollisionComponent, Quat, Vec3 } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseBool, parseEnum, parseNumber, parseQuat, parseVec3 } from '../utils';
+import { parseBool, parseEnum, parseNumber, parseQuat, parseVec3 } from '../parse';
 
 /**
  * The CollisionComponentElement interface provides properties and methods for manipulating
@@ -146,7 +146,7 @@ class CollisionComponentElement extends ComponentElement {
         return [...super.observedAttributes, 'angular-offset', 'axis', 'convex-hull', 'half-extents', 'height', 'linear-offset', 'radius', 'type'];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/component.ts

@@ -2,7 +2,7 @@ import { Component } from 'playcanvas';
 
 import { AppElement } from '../app';
 import { AsyncElement } from '../async-element';
-import { parseBool } from '../utils';
+import { parseBool } from '../parse';
 
 /**
  * Represents a component in the PlayCanvas engine.
@@ -104,7 +104,7 @@ class ComponentElement extends AsyncElement {
         return ['enabled'];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         switch (name) {
             case 'enabled':
                 this.enabled = parseBool(newValue, true);

package/src/components/element-component.ts

@@ -2,7 +2,7 @@ import { Color, ElementComponent, Vec2, Vec4 } from 'playcanvas';
 
 import { AssetElement } from '../asset';
 import { ComponentElement } from './component';
-import { parseBool, parseColor, parseEnum, parseNumber, parseVec2, parseVec4 } from '../utils';
+import { parseBool, parseColor, parseEnum, parseNumber, parseVec2, parseVec4 } from '../parse';
 
 /**
  * The ElementComponentElement interface provides properties and methods for manipulating
@@ -686,7 +686,7 @@ class ElementComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
@@ -712,7 +712,7 @@ class ElementComponentElement extends ComponentElement {
                 this.enableMarkup = parseBool(newValue, false);
                 break;
             case 'font-asset':
-                this.fontAsset = newValue;
+                this.fontAsset = newValue ?? '';
                 break;
             case 'font-size':
                 this.fontSize = parseNumber(newValue, 32, name);
@@ -745,16 +745,16 @@ class ElementComponentElement extends ComponentElement {
                 this.pixelsPerUnit = parseNumber(newValue, null, name);
                 break;
             case 'sprite-asset':
-                this.spriteAsset = newValue;
+                this.spriteAsset = newValue ?? '';
                 break;
             case 'sprite-frame':
                 this.spriteFrame = parseNumber(newValue, 0, name);
                 break;
             case 'text':
-                this.text = newValue;
+                this.text = newValue ?? '';
                 break;
             case 'texture-asset':
-                this.textureAsset = newValue;
+                this.textureAsset = newValue ?? '';
                 break;
             case 'type':
                 this.type = parseEnum(newValue, ['group', 'image', 'text'], 'group', name);

package/src/components/gsplat-component.ts

@@ -2,7 +2,7 @@ import { GSplatComponent } from 'playcanvas';
 
 import { ComponentElement } from './component';
 import { AssetElement } from '../asset';
-import { parseBool, parseNumber } from '../utils';
+import { parseBool, parseNumber } from '../parse';
 
 /**
  * The GSplatComponentElement interface provides properties and methods for manipulating
@@ -188,12 +188,12 @@ class GSplatComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
             case 'asset':
-                this.asset = newValue;
+                this.asset = newValue ?? '';
                 break;
             case 'cast-shadows':
                 this.castShadows = parseBool(newValue, false);

package/src/components/layoutchild-component.ts

@@ -1,7 +1,7 @@
 import { LayoutChildComponent } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseBool, parseNumber } from '../utils';
+import { parseBool, parseNumber } from '../parse';
 
 /**
  * The LayoutChildComponentElement interface provides properties and methods for manipulating
@@ -199,7 +199,7 @@ class LayoutChildComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/layoutgroup-component.ts

@@ -1,7 +1,7 @@
 import { FITTING_NONE, FITTING_STRETCH, FITTING_SHRINK, FITTING_BOTH, LayoutGroupComponent, ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL, Vec2, Vec4 } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseBool, parseEnum, parseVec2, parseVec4 } from '../utils';
+import { parseBool, parseEnum, parseVec2, parseVec4 } from '../parse';
 
 const orientations = new Map<'horizontal' | 'vertical', number>([
     ['horizontal', ORIENTATION_HORIZONTAL],
@@ -258,7 +258,7 @@ class LayoutGroupComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/light-component.ts

@@ -1,7 +1,7 @@
 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 { ComponentElement } from './component';
-import { parseBool, parseColor, parseEnum, parseNumber } from '../utils';
+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>([
     ['pcf1-16f', SHADOW_PCF1_16F],
@@ -496,7 +496,7 @@ class LightComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/particlesystem-component.ts

@@ -139,12 +139,12 @@ class ParticleSystemComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
             case 'asset':
-                this.asset = newValue;
+                this.asset = newValue ?? '';
                 break;
         }
     }

package/src/components/render-component.ts

@@ -2,7 +2,7 @@ import { RenderComponent, StandardMaterial } from 'playcanvas';
 
 import { ComponentElement } from './component';
 import { MaterialElement } from '../material';
-import { parseBool, parseEnum } from '../utils';
+import { parseBool, parseEnum } from '../parse';
 
 /**
  * The RenderComponentElement interface provides properties and methods for manipulating
@@ -91,8 +91,13 @@ class RenderComponentElement extends ComponentElement {
      */
     set material(value: string) {
         this._material = value;
-        if (this.component) {
-            this.component.material = MaterialElement.get(value) as StandardMaterial;
+        const material = MaterialElement.get(value);
+        // Guarded like every other reference attribute in the library. Assigning an unresolved
+        // lookup used to write `undefined` straight through to every mesh instance, and the
+        // engine's MeshInstance setter takes that literally - it clears the material and skips
+        // the ref/transparency/key bookkeeping, leaving the mesh with no material at all.
+        if (this.component && material) {
+            this.component.material = material as StandardMaterial;
         }
     }
 
@@ -127,7 +132,7 @@ class RenderComponentElement extends ComponentElement {
         return [...super.observedAttributes, 'cast-shadows', 'material', 'receive-shadows', 'type'];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
@@ -135,7 +140,7 @@ class RenderComponentElement extends ComponentElement {
                 this.castShadows = parseBool(newValue, true);
                 break;
             case 'material':
-                this.material = newValue;
+                this.material = newValue ?? '';
                 break;
             case 'receive-shadows':
                 this.receiveShadows = parseBool(newValue, true);

package/src/components/rigidbody-component.ts

@@ -1,7 +1,7 @@
 import { RigidBodyComponent, Vec3 } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseEnum, parseNumber, parseVec3 } from '../utils';
+import { parseEnum, parseNumber, parseVec3 } from '../parse';
 
 /**
  * The RigidBodyComponentElement interface provides properties and methods for manipulating
@@ -187,7 +187,7 @@ class RigidBodyComponentElement extends ComponentElement {
         return [...super.observedAttributes, 'angular-damping', 'angular-factor', 'friction', 'linear-damping', 'linear-factor', 'mass', 'restitution', 'rolling-friction', 'type'];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/screen-component.ts

@@ -1,7 +1,7 @@
 import { SCALEMODE_BLEND, SCALEMODE_NONE, ScreenComponent, Vec2 } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseBool, parseNumber, parseVec2 } from '../utils';
+import { parseBool, parseNumber, parseVec2 } from '../parse';
 
 /**
  * The ScreenComponentElement interface provides properties and methods for manipulating
@@ -126,7 +126,7 @@ class ScreenComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/script-component.ts

@@ -3,7 +3,7 @@ import { Color, Quat, ScriptComponent, Script, Vec2, Vec3, Vec4 } from 'playcanv
 import { AssetElement } from '../asset';
 import { ComponentElement } from './component';
 import { ScriptElement } from './script';
-import { getEntity, parseBool, parseColor, parseComponents, parseNumber, parseQuat, parseVec2, parseVec3, parseVec4 } from '../utils';
+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
@@ -131,7 +131,7 @@ const colorConversion: Conversion = (rest, raw) => {
 };
 
 /**
- * The conversion prefixes recognised in script attribute values, mapped to the conversion each
+ * The conversion prefixes recognized in script attribute values, mapped to the conversion each
  * performs. These keys are the single source of truth for the prefix vocabulary: they drive both
  * the conversion in `convertAttributes` and the has-a-prefix test in `setScriptProperty`, so a
  * prefix added here is automatically known to both.
@@ -148,10 +148,10 @@ const CONVERSIONS = new Map<string, Conversion>([
 /**
  * Matches a value against the conversion prefixes. A prefix is the text before the first colon,
  * so a value whose remainder itself contains colons (`asset:a:b`) still resolves, and a value
- * with an unrecognised prefix (`https://...`) or no colon does not match.
+ * with an unrecognized prefix (`https://...`) or no colon does not match.
  * @param value - The value to inspect.
  * @returns The matching converter and the text after the prefix, or `null` if the value carries
- * no recognised prefix.
+ * no recognized prefix.
  */
 const matchConversion = (value: string) => {
     const index = value.indexOf(':');

package/src/components/script.ts

@@ -1,7 +1,7 @@
 import { Script } from 'playcanvas';
 
 import { AsyncElement } from '../async-element';
-import { parseBool } from '../utils';
+import { parseBool } from '../parse';
 
 /**
  * The ScriptElement interface provides properties and methods for manipulating
@@ -28,6 +28,13 @@ import { parseBool } from '../utils';
  *
  * The element becomes ready once its script instance has been created by the parent
  * `<pc-scripts>` element.
+ *
+ * @fires {CustomEvent} scriptattributeschange - Fired when the script's attributes change. The
+ * `detail` carries the new `attributes` object. Bubbles.
+ * @fires {CustomEvent} scriptenablechange - Fired when the script's enabled state changes. The
+ * `detail` carries the new `enabled` state. Bubbles.
+ * @fires {CustomEvent} scriptnamechange - Fired when the script is renamed on a live element. The
+ * `detail` carries `oldName` and `newName`. Bubbles.
  */
 class ScriptElement extends AsyncElement {
     private _attributes: Record<string, any> = {};
@@ -148,7 +155,7 @@ class ScriptElement extends AsyncElement {
         return ['attributes', 'enabled', 'name'];
     }
 
-    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
         switch (name) {
             case 'attributes':
                 if (newValue === null) {

package/src/components/scrollbar-component.ts

@@ -1,7 +1,7 @@
 import { ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL, ScrollbarComponent } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { getEntity, parseEnum, parseNumber } from '../utils';
+import { getEntity, parseEnum, parseNumber } from '../parse';
 
 const orientations = new Map<'horizontal' | 'vertical', number>([
     ['horizontal', ORIENTATION_HORIZONTAL],
@@ -142,7 +142,7 @@ class ScrollbarComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
@@ -156,7 +156,7 @@ class ScrollbarComponentElement extends ComponentElement {
                 this.handleSize = parseNumber(newValue, 0.5, name);
                 break;
             case 'handle':
-                this.handle = newValue;
+                this.handle = newValue ?? '';
                 break;
         }
     }