@playcanvas/web-components 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playcanvas/web-components",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "author": "PlayCanvas <support@playcanvas.com>",
   "homepage": "https://playcanvas.com",
   "description": "Web Components for the PlayCanvas Engine",
@@ -40,25 +40,25 @@
     "@mediapipe/tasks-vision": "0.10.21",
     "@playcanvas/eslint-config": "2.0.9",
     "@rollup/plugin-commonjs": "28.0.3",
-    "@rollup/plugin-node-resolve": "16.0.0",
+    "@rollup/plugin-node-resolve": "16.0.1",
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "12.1.2",
     "@tweenjs/tween.js": "25.0.0",
-    "@typescript-eslint/eslint-plugin": "8.26.1",
-    "@typescript-eslint/parser": "8.26.1",
+    "@typescript-eslint/eslint-plugin": "8.31.0",
+    "@typescript-eslint/parser": "8.31.0",
     "concurrently": "9.1.2",
     "earcut": "3.0.1",
-    "eslint": "9.22.0",
-    "eslint-import-resolver-typescript": "3.8.4",
+    "eslint": "9.25.1",
+    "eslint-import-resolver-typescript": "4.3.4",
     "globals": "16.0.0",
-    "mp4-muxer": "5.2.0",
+    "mp4-muxer": "5.2.1",
     "opentype.js": "1.3.4",
-    "playcanvas": "2.5.1",
-    "rollup": "4.35.0",
+    "playcanvas": "2.7.1",
+    "rollup": "4.40.0",
     "serve": "14.2.4",
     "tslib": "2.8.1",
-    "typedoc": "0.27.9",
+    "typedoc": "0.28.3",
     "typedoc-plugin-mdn-links": "5.0.1",
-    "typescript": "5.8.2"
+    "typescript": "5.8.3"
   }
 }

package/src/asset.ts

@@ -28,7 +28,7 @@ const extToType = new Map([
 const processBufferView = (
     gltfBuffer: any,
     buffers: Array<any>,
-    continuation: (err: string, result: any) => void
+    continuation: (err: string | null, result: any) => void
 ) => {
     if (gltfBuffer.extensions && gltfBuffer.extensions.EXT_meshopt_compression) {
         const extensionDef = gltfBuffer.extensions.EXT_meshopt_compression;
@@ -103,6 +103,7 @@ class AssetElement extends HTMLElement {
                 }
             });
         } else {
+            // @ts-ignore
             this.asset = new Asset(id, type, { url: src });
         }
 

package/src/components/light-component.ts

@@ -52,6 +52,8 @@ class LightComponentElement extends ComponentElement {
 
     private _vsmBias = 0.01;
 
+    private _vsmBlurSize = 11;
+
     /** @ignore */
     constructor() {
         super('light');
@@ -72,7 +74,8 @@ class LightComponentElement extends ComponentElement {
             shadowResolution: this._shadowResolution,
             shadowType: shadowTypes.get(this._shadowType),
             type: this._type,
-            vsmBias: this._vsmBias
+            vsmBias: this._vsmBias,
+            vsmBlurSize: this._vsmBlurSize
         };
     }
 
@@ -365,6 +368,25 @@ class LightComponentElement extends ComponentElement {
         return this._vsmBias;
     }
 
+    /**
+     * Sets the VSM blur size of the light. Minimum is 1, maximum is 25. Default is 11.
+     * @param value - The VSM blur size.
+     */
+    set vsmBlurSize(value: number) {
+        this._vsmBlurSize = value;
+        if (this.component) {
+            this.component.vsmBlurSize = value;
+        }
+    }
+
+    /**
+     * Gets the VSM blur size of the light.
+     * @returns The VSM blur size.
+     */
+    get vsmBlurSize() {
+        return this._vsmBlurSize;
+    }
+
     static get observedAttributes() {
         return [
             ...super.observedAttributes,
@@ -381,7 +403,8 @@ class LightComponentElement extends ComponentElement {
             'shadow-resolution',
             'shadow-type',
             'type',
-            'vsm-bias'
+            'vsm-bias',
+            'vsm-blur-size'
         ];
     }
 
@@ -431,6 +454,9 @@ class LightComponentElement extends ComponentElement {
             case 'vsm-bias':
                 this.vsmBias = Number(newValue);
                 break;
+            case 'vsm-blur-size':
+                this.vsmBlurSize = Number(newValue);
+                break;
         }
     }
 }

package/src/components/splat-component.ts

@@ -12,7 +12,9 @@ import { AssetElement } from '../asset';
  * @category Components
  */
 class SplatComponentElement extends ComponentElement {
-    private _asset: string = '';
+    private _asset = '';
+
+    private _castShadows = false;
 
     /** @ignore */
     constructor() {
@@ -21,7 +23,8 @@ class SplatComponentElement extends ComponentElement {
 
     getInitialComponentData() {
         return {
-            asset: AssetElement.get(this._asset)
+            asset: AssetElement.get(this._asset),
+            castShadows: this._castShadows
         };
     }
 
@@ -53,8 +56,31 @@ class SplatComponentElement extends ComponentElement {
         return this._asset;
     }
 
+    /**
+     * Sets whether the splat casts shadows.
+     * @param value - Whether the splat casts shadows.
+     */
+    set castShadows(value: boolean) {
+        this._castShadows = value;
+        if (this.component) {
+            this.component.castShadows = value;
+        }
+    }
+
+    /**
+     * Gets whether the splat casts shadows.
+     * @returns Whether the splat casts shadows.
+     */
+    get castShadows() {
+        return this._castShadows;
+    }
+
     static get observedAttributes() {
-        return [...super.observedAttributes, 'asset'];
+        return [
+            ...super.observedAttributes,
+            'asset',
+            'cast-shadows'
+        ];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
@@ -64,6 +90,9 @@ class SplatComponentElement extends ComponentElement {
             case 'asset':
                 this.asset = newValue;
                 break;
+            case 'cast-shadows':
+                this.castShadows = this.hasAttribute('cast-shadows');
+                break;
         }
     }
 }

package/src/module.ts

@@ -17,22 +17,15 @@ class ModuleElement extends HTMLElement {
 
     private async loadModule(): Promise<void> {
         const name = this.getAttribute('name')!;
-        const glue = this.getAttribute('glue')!;
-        const wasm = this.getAttribute('wasm')!;
-        const fallback = this.getAttribute('fallback')!;
+        const glueUrl = this.getAttribute('glue')!;
+        const wasmUrl = this.getAttribute('wasm')!;
+        const fallbackUrl = this.getAttribute('fallback')!;
+        const config = { glueUrl, wasmUrl, fallbackUrl };
 
         if (name === 'Basis') {
-            basisInitialize({
-                glueUrl: glue,
-                wasmUrl: wasm,
-                fallbackUrl: fallback
-            });
+            basisInitialize(config);
         } else {
-            WasmModule.setConfig(name, {
-                glueUrl: glue,
-                wasmUrl: wasm,
-                fallbackUrl: fallback
-            });
+            WasmModule.setConfig(name, config);
 
             await new Promise<void>((resolve) => {
                 WasmModule.getInstance(name, () => resolve());