@playcanvas/web-components 0.12.0 → 0.13.1

package/src/components/particlesystem-component.ts

@@ -1,6 +1,6 @@
 import type { ParticleSystemComponent } from 'playcanvas';
 
-import { AssetElement } from '../asset';
+import { useAsset } from '../asset';
 
 import { ComponentElement } from './component';
 
@@ -21,14 +21,15 @@ class ParticleSystemComponentElement extends ComponentElement {
     }
 
     protected getInitialComponentData() {
-        const asset = AssetElement.get(this._asset);
-        if (!asset) {
+        const asset = useAsset(this._asset);
+        // A lazy config has no resource yet - _loadAsset applies it once the load completes
+        if (!asset || !asset.resource) {
             return {};
         }
 
         if ((asset.resource as any).colorMapAsset) {
             const id = (asset.resource as any).colorMapAsset;
-            const colorMapAsset = AssetElement.get(id)?.id;
+            const colorMapAsset = useAsset(id)?.id;
             if (colorMapAsset) {
                 (asset.resource as any).colorMapAsset = colorMapAsset;
             }
@@ -59,10 +60,9 @@ class ParticleSystemComponentElement extends ComponentElement {
     }
 
     private async _loadAsset() {
-        const appElement = await this.closestApp?.ready();
-        const app = appElement?.app;
+        await this.closestApp?.ready();
 
-        const asset = AssetElement.get(this._asset);
+        const asset = useAsset(this._asset);
         if (!asset) {
             return;
         }
@@ -73,7 +73,6 @@ class ParticleSystemComponentElement extends ComponentElement {
             asset.once('load', () => {
                 this.applyConfig(asset.resource);
             });
-            app!.assets.load(asset);
         }
     }
 

package/src/components/script-component.ts

@@ -1,7 +1,7 @@
 import type { ScriptComponent, Script } from 'playcanvas';
 import { Color, Quat, Vec2, Vec3, Vec4 } from 'playcanvas';
 
-import { AssetElement } from '../asset';
+import { useAsset } from '../asset';
 import {
     getEntity,
     parseBool,
@@ -119,7 +119,7 @@ type Conversion = (rest: string, raw: string) => any;
  * @returns The asset, or `raw`.
  */
 const assetConversion: Conversion = (rest, raw) => {
-    const asset = AssetElement.get(rest);
+    const asset = useAsset(rest);
     if (asset) {
         return asset;
     }

package/src/components/sound-slot.ts

@@ -1,6 +1,6 @@
 import type { SoundSlot } from 'playcanvas';
 
-import { AssetElement } from '../asset';
+import { useAsset } from '../asset';
 import { AsyncElement } from '../async-element';
 import { parseBool, parseNumber } from '../parse';
 
@@ -120,7 +120,7 @@ class SoundSlotElement extends AsyncElement {
     set asset(value: string) {
         this._asset = value;
         if (this.soundSlot) {
-            const id = AssetElement.get(value)?.id;
+            const id = useAsset(value)?.id;
             if (id) {
                 this.soundSlot.asset = id;
             }

package/src/loading-bar.ts

@@ -28,9 +28,9 @@ class LoadingBar {
         this._track.setAttribute('aria-label', 'Loading');
         this._track.setAttribute('aria-valuemin', '0');
         this._track.setAttribute('aria-valuemax', '100');
-        // Fixed positioning matches the canvas, which always fills the window (FILLMODE_FILL_WINDOW)
+        // Anchored to the pc-app element, which the library's base styles make a positioned box
         this._track.style.cssText = [
-            'position: fixed',
+            'position: absolute',
             'top: 0',
             'left: 0',
             'width: 100%',

package/src/material.ts

@@ -26,7 +26,7 @@ import {
 import type { EventHandle, Texture } from 'playcanvas';
 
 import type { AppElement } from './app';
-import { AssetElement } from './asset';
+import { useAsset } from './asset';
 import { parseBool, parseColor, parseEnum, parseNumber, parseVec2 } from './parse';
 
 type BlendType =
@@ -523,7 +523,7 @@ class MaterialElement extends HTMLElement {
             return;
         }
 
-        const asset = AssetElement.get(id);
+        const asset = useAsset(id);
         if (!asset) return;
 
         if (asset.loaded) {

package/src/model.ts

@@ -1,6 +1,6 @@
 import type { ContainerResource, Entity, EventHandle } from 'playcanvas';
 
-import { AssetElement } from './asset';
+import { useAsset } from './asset';
 import { AsyncElement } from './async-element';
 
 /**
@@ -154,9 +154,7 @@ class ModelElement extends AsyncElement {
             return;
         }
 
-        const app = appElement.app;
-
-        const asset = AssetElement.get(this._asset);
+        const asset = useAsset(this._asset);
         if (!asset) {
             // An empty id is a legitimate transient (the asset may be assigned later); a
             // non-empty one that resolves to nothing is a dead end - say so rather than staying
@@ -194,7 +192,6 @@ class ModelElement extends AsyncElement {
                 );
                 this._onReady();
             });
-            app!.assets.load(asset);
         }
     }
 

package/src/module.ts

@@ -1,13 +1,21 @@
 import { basisInitialize, WasmModule } from 'playcanvas';
 
+import { AsyncElement } from './async-element';
+
 /**
  * The ModuleElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-module/ | `<pc-module>`} elements.
- * The ModuleElement interface also inherits the properties and methods of the
- * {@link HTMLElement} interface.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-module/ | `<pc-module>`}
+ * elements. The ModuleElement interface also inherits the properties and methods of the
+ * {@link AsyncElement} interface.
+ *
+ * The attributes are read once, when the module starts loading - on the element's first
+ * connection, or earlier if a containing `<pc-app>` boots first and collects it - so changing
+ * them later has no effect. The element becomes ready once the module has loaded. WebAssembly
+ * modules configure engine-global state that never unloads, so readiness is not re-armed by
+ * removing the element, and a re-inserted element does not load again.
  *
- * Note that these attributes are read once when the element is created, so changing them later
- * has no effect.
+ * A `<pc-module>` without a `name` warns and never becomes ready; a containing `<pc-app>` still
+ * boots.
  *
  * @attribute {string} name - The name of the WebAssembly module to configure, e.g. `Basis` or
  * `Ammo`.
@@ -16,21 +24,25 @@ import { basisInitialize, WasmModule } from 'playcanvas';
  * @attribute {string} fallback - The URL of the module's asm.js fallback script, used when
  * WebAssembly is unavailable.
  */
-class ModuleElement extends HTMLElement {
-    private loadPromise: Promise<void>;
+class ModuleElement extends AsyncElement {
+    private _loadPromise: Promise<void> | null = null;
 
-    /** @ignore */
-    constructor() {
-        super();
-        this.loadPromise = this.loadModule();
+    connectedCallback() {
+        this._getLoadPromise();
     }
 
-    private async loadModule(): Promise<void> {
-        const name = this.getAttribute('name')!;
-        const glueUrl = this.getAttribute('glue')!;
-        const wasmUrl = this.getAttribute('wasm')!;
-        const fallbackUrl = this.getAttribute('fallback')!;
-        const config = { glueUrl, wasmUrl, fallbackUrl };
+    private async _loadModule(): Promise<void> {
+        const name = this.getAttribute('name');
+        if (!name) {
+            console.warn("pc-module requires a 'name' attribute - no module was configured");
+            return;
+        }
+
+        const config = {
+            glueUrl: this.getAttribute('glue') ?? undefined,
+            wasmUrl: this.getAttribute('wasm') ?? undefined,
+            fallbackUrl: this.getAttribute('fallback') ?? undefined
+        };
 
         if (name === 'Basis') {
             basisInitialize(config);
@@ -41,17 +53,24 @@ class ModuleElement extends HTMLElement {
                 WasmModule.getInstance(name, () => resolve());
             });
         }
+
+        this._onReady();
     }
 
     /**
-     * Returns the promise that settles when the module has loaded. Awaited by the containing
-     * `<pc-app>` element before it creates its graphics device.
+     * Returns the promise that settles when the module has loaded, starting the load if it has
+     * not already started - a containing `<pc-app>` boots in document order, so it may collect
+     * this element before the element's own connectedCallback has run. A missing `name` resolves
+     * the promise without configuring anything, so a misconfigured module never blocks the app.
      *
      * @returns The load promise.
      * @internal
      */
     _getLoadPromise(): Promise<void> {
-        return this.loadPromise;
+        if (!this._loadPromise) {
+            this._loadPromise = this._loadModule();
+        }
+        return this._loadPromise;
     }
 }
 

package/src/sky.ts

@@ -2,7 +2,7 @@ import type { Asset, EventHandle, Scene, Texture } from 'playcanvas';
 import { EnvLighting, LAYERID_SKYBOX, Quat, Vec3 } from 'playcanvas';
 
 import type { AppElement } from './app';
-import { AssetElement } from './asset';
+import { useAsset } from './asset';
 import { AsyncElement } from './async-element';
 import { parseBool, parseEnum, parseNumber, parseVec3 } from './parse';
 
@@ -116,7 +116,7 @@ class SkyElement extends AsyncElement {
 
         this._appElement = appElement;
 
-        const asset = AssetElement.get(this._asset);
+        const asset = useAsset(this._asset);
         if (!asset) {
             return;
         }
@@ -136,7 +136,6 @@ class SkyElement extends AsyncElement {
                 }
                 this._generateSkybox(asset);
             });
-            app.assets.load(asset);
         }
     }