@playcanvas/web-components 0.12.0 → 0.13.1

package/src/app.ts

@@ -1,10 +1,10 @@
-import type { CameraComponent, GraphNode, GSplatComponent, Entity } from 'playcanvas';
+import type { CameraComponent, GraphicsDevice, GraphNode, GSplatComponent, Entity } from 'playcanvas';
 import {
     AppBase,
     AppOptions,
     createGraphicsDevice,
     ElementInput,
-    FILLMODE_FILL_WINDOW,
+    FILLMODE_NONE,
     Keyboard,
     Mouse,
     Picker,
@@ -76,16 +76,45 @@ import { parseBool, parseEnum, parseNumber } from './parse';
 /** The pointer event types the application synthesizes on `<pc-entity>` elements via picking. */
 const pointerEventTypes = ['pointermove', 'pointerdown', 'pointerup', 'pointerenter', 'pointerleave'] as const;
 
+/**
+ * Gives `pc-app` the sizing contract of a replaced element (`<video>`, `<img>`): a block-level
+ * box that the page's CSS sizes, defaulting to the canvas's own 300x150 intrinsic size, with the
+ * canvas and loading bar anchored to it. `:where()` keeps every declaration at zero specificity,
+ * so any page rule - however plain - overrides these defaults.
+ */
+const ensureBaseStyles = () => {
+    const id = 'pc-app-styles';
+    if (document.getElementById(id)) {
+        return;
+    }
+    const style = document.createElement('style');
+    style.id = id;
+    style.textContent = ':where(pc-app) { display: block; position: relative; width: 300px; height: 150px; }';
+    document.head.appendChild(style);
+};
+
 /**
  * The AppElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-app/ | `<pc-app>`} elements.
  * The AppElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
+ * The element is sized like a replaced element such as `<video>`: a block-level box that the
+ * page's CSS controls, 300x150 by default. The application's canvas always fills the element,
+ * and the drawing buffer resolution follows the element's size (capped by `max-pixel-ratio`),
+ * tracked live via a ResizeObserver — so the element can be embedded at any size, resized by
+ * its container, or made fullscreen with ordinary CSS such as `width: 100vw; height: 100dvh`.
+ *
  * @fires {ProgressEvent} progress - Fired while the application preloads its assets. `loaded` and
  * `total` are asset counts, not bytes, and an asset that fails to load still counts as loaded.
  * Fired at least once per boot, and the final event always has `loaded` equal to `total`. Does
  * not bubble.
+ *
+ * @fires {ErrorEvent} error - Fired when the application cannot boot because no graphics device
+ * could be created (for example, a browser with WebGL disabled). `message` names the requested
+ * backends and `error` holds the underlying failure. The element never becomes ready
+ * and `app` stays `null` — listen for this event to show a fallback UI. Removing the element and
+ * re-inserting it retries the boot with its current attributes. Does not bubble.
  */
 class AppElement extends AsyncElement {
     /**
@@ -165,6 +194,13 @@ class AppElement extends AsyncElement {
 
     private _loadProgress = 0;
 
+    /**
+     * Tracks the element's box so the drawing buffer and picker follow it. Created per boot once
+     * the application exists, and disconnected on teardown. `null` where ResizeObserver is
+     * unavailable (jsdom), where the boot-time resolution set is the only sizing that happens.
+     */
+    private _resizeObserver: ResizeObserver | null = null;
+
     /**
      * The PlayCanvas application instance. `null` until the element is ready, and again once it
      * has been removed from the document — await {@link whenReady} or the element's `ready()`
@@ -194,9 +230,6 @@ class AppElement extends AsyncElement {
     constructor() {
         super();
 
-        // Bind methods to maintain 'this' context
-        this._onWindowResize = this._onWindowResize.bind(this);
-
         // Track pointer listeners being added to and removed from descendant entities.
         // Registered once here rather than on every boot - the handlers no-op while there is no
         // canvas, and a re-booted element must not stack a second set.
@@ -209,6 +242,10 @@ class AppElement extends AsyncElement {
     async connectedCallback() {
         const generation = ++this._bootGeneration;
 
+        // Installed before the loading bar is created: the bar anchors to this element, which
+        // these styles make a positioned block box
+        ensureBaseStyles();
+
         // Created before the first await, so the bar is visible while modules and the graphics
         // device are created, and exists before any disconnect could need to clean it up
         if (this._loadingBar && !this._bar) {
@@ -227,8 +264,11 @@ class AppElement extends AsyncElement {
             return;
         }
 
-        // Create and append the canvas to the element
+        // Create and append the canvas, filling the element's content box - the page sizes the
+        // element, and everything else follows. touch-action: none keeps touch drags driving the
+        // engine's input handlers instead of scrolling the page.
         this._canvas = document.createElement('canvas');
+        this._canvas.style.cssText = 'display: block; width: 100%; height: 100%; touch-action: none;';
         this.appendChild(this._canvas);
 
         // Configure device types based on backend selection
@@ -241,14 +281,46 @@ class AppElement extends AsyncElement {
 
         this._optionsLocked = true;
 
-        const device = await createGraphicsDevice(this._canvas, {
-            // @ts-ignore - alpha needs to be documented
-            alpha: this._alpha,
-            antialias: this._antialias,
-            depth: this._depthBuffer,
-            deviceTypes: deviceTypes,
-            stencil: this._stencilBuffer
-        });
+        // createGraphicsDevice appends its final null-device fallback to the array in place, so
+        // the requested list is captured now for the failure message.
+        const requested = deviceTypes.join(', ');
+
+        let device: GraphicsDevice;
+        try {
+            device = await createGraphicsDevice(this._canvas, {
+                // @ts-ignore - alpha needs to be documented
+                alpha: this._alpha,
+                antialias: this._antialias,
+                depth: this._depthBuffer,
+                deviceTypes: deviceTypes,
+                stencil: this._stencilBuffer
+            });
+        } catch (error) {
+            // The element may have been removed while device creation was failing. The teardown
+            // has already cleaned up, and the failure belongs to a boot that no longer owns the
+            // element.
+            if (generation !== this._bootGeneration) {
+                return;
+            }
+
+            // Return the element to its pre-boot state - no dead canvas, no loading bar stuck at
+            // zero - before announcing the failure. Readiness deliberately stays pending: nothing
+            // it would announce (the app, the entity hierarchy) exists, so a device-less element
+            // joins the documented never-ready cases and the failure surfaces through the error
+            // event instead.
+            if (this._canvas && this.contains(this._canvas)) {
+                this.removeChild(this._canvas);
+            }
+            this._canvas = null;
+            this._bar?.destroy();
+            this._bar = null;
+
+            const reason = error instanceof Error ? error.message : String(error);
+            const message = `pc-app failed to create a graphics device (${requested}) - ${reason}`;
+            console.error(message, error);
+            this.dispatchEvent(new ErrorEvent('error', { message, error }));
+            return;
+        }
 
         // The element may have been removed while the device was created. disconnectedCallback
         // has already cleaned up the canvas; the device was created inside the await, so it is
@@ -332,11 +404,22 @@ class AppElement extends AsyncElement {
         this._app = app;
         app.init(createOptions);
 
-        app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+        // FILLMODE_NONE leaves the canvas's CSS sizing alone (the engine's other fill modes
+        // stamp window-derived pixel sizes onto it); RESOLUTION_AUTO sizes the drawing buffer
+        // from the canvas's client size
+        app.setCanvasFillMode(FILLMODE_NONE);
         app.setCanvasResolution(RESOLUTION_AUTO);
 
         this._pickerCreate();
 
+        // Track the element's box rather than the window: containers resize without any window
+        // event (splitter drags, flex reflow, animations). Guarded because jsdom has no
+        // ResizeObserver - there, the resolution set above is the only sizing that happens.
+        if (typeof ResizeObserver !== 'undefined') {
+            this._resizeObserver = new ResizeObserver(() => this._syncCanvasSize());
+            this._resizeObserver.observe(this);
+        }
+
         // Get all pc-asset elements that are direct children of the pc-app element
         const assetElements = this.querySelectorAll<AssetElement>(':scope > pc-asset');
         for (const assetElement of Array.from(assetElements)) {
@@ -426,9 +509,6 @@ class AppElement extends AsyncElement {
             // first rAF tick
             app.once('frameend', () => this._bar?.complete());
 
-            // Handle window resize to keep the canvas responsive
-            window.addEventListener('resize', this._onWindowResize);
-
             this._onReady();
         });
     }
@@ -458,8 +538,9 @@ class AppElement extends AsyncElement {
         this._hierarchyReady = false;
         this._resetReady();
 
-        // Remove event listeners
-        window.removeEventListener('resize', this._onWindowResize);
+        // Stop tracking the element's size
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
 
         // Remove the canvas
         if (this._canvas && this.contains(this._canvas)) {
@@ -468,10 +549,18 @@ class AppElement extends AsyncElement {
         }
     }
 
-    private _onWindowResize() {
-        if (this.app) {
-            this.app.resizeCanvas();
+    /**
+     * Syncs the drawing buffer and the picker to the canvas's current CSS size. The picker must
+     * track the buffer, or picks would land at stale coordinates after a resize. Skipped while
+     * an XR session presents - the session owns the buffer size.
+     */
+    private _syncCanvasSize() {
+        if (!this.app || this.app.xr?.active) {
+            return;
         }
+        this.app.updateCanvasSize();
+        const { width, height } = this.app.graphicsDevice;
+        this._picker?.resize(width, height);
     }
 
     private _pickerCreate() {
@@ -495,9 +584,9 @@ class AppElement extends AsyncElement {
         // created from onpointer* attributes when their elements were first upgraded, or
         // listeners carried over from before a re-boot)
         pointerEventTypes.forEach((type) => {
-            const anyListeners = Array.from(
-                this.querySelectorAll<EntityBaseElement>('pc-entity, pc-node')
-            ).some((entity) => entity._hasListeners(type));
+            const anyListeners = Array.from(this.querySelectorAll<EntityBaseElement>('pc-entity, pc-node')).some(
+                (entity) => entity._hasListeners(type)
+            );
             if (anyListeners) {
                 this._onPointerListenerAdded(type);
             }
@@ -603,22 +692,68 @@ class AppElement extends AsyncElement {
         return null;
     }
 
-    // New helper to convert CSS coordinates to canvas (picker) coordinates
-    private _getPickerCoordinates(event: PointerEvent): { x: number; y: number } {
-        // Get the canvas' bounding rectangle in CSS pixels.
-        const canvasRect = this._canvas!.getBoundingClientRect();
-        // Compute scale factors based on canvas actual resolution vs. its CSS display size.
-        const scaleX = this._canvas!.width / canvasRect.width;
-        const scaleY = this._canvas!.height / canvasRect.height;
-        // Convert the client coordinates accordingly.
-        const x = (event.clientX - canvasRect.left) * scaleX;
-        const y = (event.clientY - canvasRect.top) * scaleY;
-        return { x, y };
+    /**
+     * Converts a pointer event's client coordinates into drawing-buffer coordinates - the space
+     * the pick buffer and the camera viewports are laid out in. When the canvas has no CSS box
+     * to map through (jsdom; a hidden canvas receives no pointer events in a browser), the
+     * client coordinates are passed through unmapped and `mapped` is false, so callers know the
+     * coordinates correspond to no real geometry.
+     *
+     * @param event - The pointer event to convert.
+     * @param canvas - The canvas the event was dispatched on.
+     * @returns The buffer-space coordinates, and whether they were actually mapped.
+     */
+    private _getPickerCoordinates(
+        event: PointerEvent,
+        canvas: HTMLCanvasElement
+    ): { x: number; y: number; mapped: boolean } {
+        const canvasRect = canvas.getBoundingClientRect();
+        if (canvasRect.width === 0 || canvasRect.height === 0) {
+            return { x: event.clientX, y: event.clientY, mapped: false };
+        }
+        const scaleX = canvas.width / canvasRect.width;
+        const scaleY = canvas.height / canvasRect.height;
+        return {
+            x: (event.clientX - canvasRect.left) * scaleX,
+            y: (event.clientY - canvasRect.top) * scaleY,
+            mapped: true
+        };
+    }
+
+    /**
+     * Whether a camera's viewport contains the point. A camera renders into its normalized
+     * `rect`, whose origin is the bottom-left of the canvas while buffer coordinates run from
+     * the top-left - so the vertical test flips, as the engine's ElementInput flips it for UI
+     * input. The right and bottom edges are exclusive: a viewport rasterizes the half-open
+     * pixel range [left, right) x [top, bottom), so a coordinate on a shared edge belongs to
+     * the viewport whose first pixel it is - never to the one it just left, whose pick buffer
+     * holds nothing there.
+     *
+     * @param camera - The camera to test.
+     * @param x - The x coordinate, in buffer space.
+     * @param y - The y coordinate, in buffer space.
+     * @param canvas - The canvas the coordinates are relative to.
+     * @returns Whether the camera's viewport contains the point.
+     */
+    private _cameraContains(camera: CameraComponent, x: number, y: number, canvas: HTMLCanvasElement): boolean {
+        const rect = camera.rect;
+        const left = rect.x * canvas.width;
+        const bottom = (1 - rect.y) * canvas.height;
+        const top = bottom - rect.w * canvas.height;
+        return x >= left && x < left + rect.z * canvas.width && y >= top && y < bottom;
     }
 
     /**
      * Picks the scene under the pointer and returns the graph node that was hit, or `null`.
      *
+     * The camera is resolved the way the engine's ElementInput resolves it for UI input:
+     * enabled cameras are tried topmost-first (they render in ascending `priority` order),
+     * skipping cameras that render to a texture and cameras whose viewport `rect` does not
+     * contain the pointer. A camera that picks nothing ends the search if it clears the color
+     * buffer - its background visually owns the pixel - and otherwise cedes to the cameras
+     * beneath it, so an overlay camera only intercepts picks where it actually drew something.
+     * The pick buffer is prepared per camera, so each camera picks from its own layers.
+     *
      * The read back is asynchronous because the synchronous {@link Picker.getSelection} is not
      * supported on WebGPU, where it returns an empty selection rather than failing - which
      * silently disabled every `onpointer*` handler once WebGPU became the resolved backend. The
@@ -628,17 +763,44 @@ class AppElement extends AsyncElement {
      * @returns The graph node under the pointer, or `null` if nothing was hit.
      */
     private async _pickNode(event: PointerEvent): Promise<GraphNode | null> {
-        const camera = this.app!.root.findComponent('camera') as CameraComponent;
-        if (!camera) return null;
+        const app = this.app;
+        const picker = this._picker;
+        const canvas = this._canvas;
+        if (!app || !picker || !canvas) return null;
+
+        const { x, y, mapped } = this._getPickerCoordinates(event, canvas);
+
+        // Walked from the end: the array is sorted by ascending priority, so the last camera
+        // renders last and sits on top. Read through .at() because a pick handler may remove
+        // cameras while an earlier iteration's read back is in flight.
+        const cameras = app.systems.camera?.cameras ?? [];
+        for (let i = cameras.length - 1; i >= 0; i--) {
+            const camera = cameras.at(i);
+
+            // A camera rendering to a texture is not on the canvas.
+            if (!camera || camera.renderTarget) continue;
 
-        const { x, y } = this._getPickerCoordinates(event);
+            // Coordinates that could not be mapped cannot be tested for containment.
+            if (mapped && !this._cameraContains(camera, x, y, canvas)) continue;
 
-        this._picker!.prepare(camera, this.app!.scene);
-        const selection = await this._picker!.getSelectionAsync(x, y);
-        if (selection.length === 0) return null;
+            picker.prepare(camera, app.scene);
+            const selection = await picker.getSelectionAsync(x, y);
 
-        const item = selection[0];
-        return item instanceof MeshInstance ? item.node : (item as GSplatComponent).entity;
+            // The element may have disconnected while the read back was in flight.
+            if (!this._picker || !this.app) return null;
+
+            if (selection.length > 0) {
+                const item = selection[0];
+                return item instanceof MeshInstance ? item.node : (item as GSplatComponent).entity;
+            }
+
+            // Nothing hit. A camera that clears the color buffer paints its background over
+            // everything beneath it, so the miss is final; one that does not is an overlay
+            // that the cameras beneath show through, so they get their turn.
+            if (camera.clearColorBuffer) return null;
+        }
+
+        return null;
     }
 
     private async _onPointerMove(event: PointerEvent) {
@@ -718,9 +880,9 @@ class AppElement extends AsyncElement {
     }
 
     private _onPointerListenerRemoved(type: string) {
-        const hasListeners = Array.from(
-            this.querySelectorAll<EntityBaseElement>('pc-entity, pc-node')
-        ).some((entity) => entity._hasListeners(type));
+        const hasListeners = Array.from(this.querySelectorAll<EntityBaseElement>('pc-entity, pc-node')).some((entity) =>
+            entity._hasListeners(type)
+        );
 
         if (!hasListeners && this._canvas) {
             this._hasPointerListeners[type] = false;
@@ -862,7 +1024,7 @@ class AppElement extends AsyncElement {
         this._maxPixelRatio = value;
         if (this.app) {
             this.app.graphicsDevice.maxPixelRatio = value;
-            this.app.resizeCanvas();
+            this._syncCanvasSize();
         }
     }
 

package/src/asset.ts

@@ -153,6 +153,10 @@ const processBufferView = (
  * 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.
  *
+ * A `lazy` asset loads on first use: the first time any element resolves it by `id` — a model,
+ * a material map, a sky, a script `asset:` reference — or when the `lazy` attribute is removed,
+ * whichever comes first. Until then it stays registered and unloaded.
+ *
  * For `texture` and `textureatlas` assets, the texture options (`address-u`, `address-v`,
  * `min-filter`, `mag-filter`, `anisotropy`, `mipmaps`, `srgb`, `flip-y`) apply when the texture is
  * created and — like `lazy` — are observed: changing one updates a texture that has already
@@ -385,7 +389,9 @@ class AssetElement extends AsyncElement {
             data = data ?? {};
 
             // Resolve the referenced texture atlas to its (numeric) asset id. The atlas must be
-            // declared before the sprite so its asset already exists in the registry.
+            // declared before the sprite so its asset already exists in the registry. Resolved
+            // with get, not useAsset: creation-time wiring is not a use, and the engine's
+            // sprite handler loads the atlas when the sprite itself loads.
             const atlas = this.getAttribute('atlas') ?? data.textureAtlasAsset;
             if (typeof atlas === 'string') {
                 const atlasAsset = AssetElement.get(atlas);
@@ -564,13 +570,18 @@ class AssetElement extends AsyncElement {
     }
 
     /**
-     * Sets whether the asset should be loaded lazily.
+     * Sets whether the asset should be loaded lazily. A lazy asset is registered without being
+     * loaded; it loads on first use - the first time any element resolves it by `id` - or when
+     * this flag is cleared on a registered asset, whichever comes first.
      * @param value - The lazy loading flag.
      */
     set lazy(value: boolean) {
         this._lazy = value;
         if (this.asset) {
             this.asset.preload = !value;
+            if (!value) {
+                this.asset.registry?.load(this.asset);
+            }
         }
     }
 
@@ -760,4 +771,25 @@ class AssetElement extends AsyncElement {
 
 customElements.define('pc-asset', AssetElement);
 
+/**
+ * Resolves an asset reference for use: {@link AssetElement.get}, plus starting the load of a
+ * registered asset that has not begun one - a `lazy` asset. Every element that consumes assets
+ * resolves its references here, which is what makes `lazy` mean load on first use without any
+ * consumer having to remember the load. The load is asynchronous - callers observe the asset's
+ * `load` event for the resource.
+ *
+ * @param id - The `id` of the `<pc-asset>` element.
+ * @returns The asset, or `undefined`.
+ * @internal
+ */
+export const useAsset = (id: string) => {
+    const asset = AssetElement.get(id);
+    // load() ignores an asset that is already loaded or loading, so repeated resolution
+    // costs nothing.
+    if (asset) {
+        asset.registry?.load(asset);
+    }
+    return asset;
+};
+
 export { AssetElement };

package/src/async-element.ts

@@ -96,7 +96,8 @@ type AsyncElementTagName = {
 /**
  * Waits for the first element matching the given tag name to be fully initialized. Note that the
  * promise never settles if the element cannot finish initializing (for example, a `<pc-script>`
- * that is not a direct child of `<pc-scripts>`). A component element outside a `<pc-entity>` is
+ * that is not a direct child of `<pc-scripts>`, or a `<pc-app>` that could not create a graphics
+ * device — listen for its `error` event instead). A component element outside a `<pc-entity>` is
  * the exception: it still becomes ready, but its `component` is `null`. Either way, a misplaced
  * element logs a warning naming the parent it requires.
  * @param target - The tag name of the element to wait for (e.g. `'pc-app'`).
@@ -120,7 +121,8 @@ function whenReady<T extends AsyncElement>(target: T): Promise<T>;
 /**
  * Waits for the first element matching the given CSS selector to be fully initialized. Note that
  * the promise never settles if the element cannot finish initializing (for example, a `<pc-script>`
- * that is not a direct child of `<pc-scripts>`). A component element outside a `<pc-entity>` is
+ * that is not a direct child of `<pc-scripts>`, or a `<pc-app>` that could not create a graphics
+ * device — listen for its `error` event instead). A component element outside a `<pc-entity>` is
  * the exception: it still becomes ready, but its `component` is `null`. Either way, a misplaced
  * element logs a warning naming the parent it requires.
  * @param target - A CSS selector matching the element to wait for (e.g. `'#my-app'`).

package/src/components/button-component.ts

@@ -1,7 +1,7 @@
 import type { ButtonComponent } from 'playcanvas';
 import { BUTTON_TRANSITION_MODE_SPRITE_CHANGE, BUTTON_TRANSITION_MODE_TINT, Color, Vec4 } from 'playcanvas';
 
-import { AssetElement } from '../asset';
+import { useAsset } from '../asset';
 import { getEntity, parseBool, parseColor, parseEnum, parseNumber, parseVec4 } from '../parse';
 
 import { ComponentElement } from './component';
@@ -74,17 +74,17 @@ class ButtonComponentElement extends ComponentElement {
             data.imageEntity = imageEntity;
         }
 
-        const hoverSpriteAsset = AssetElement.get(this._hoverSpriteAsset);
+        const hoverSpriteAsset = useAsset(this._hoverSpriteAsset);
         if (hoverSpriteAsset) {
             data.hoverSpriteAsset = hoverSpriteAsset.id;
         }
 
-        const pressedSpriteAsset = AssetElement.get(this._pressedSpriteAsset);
+        const pressedSpriteAsset = useAsset(this._pressedSpriteAsset);
         if (pressedSpriteAsset) {
             data.pressedSpriteAsset = pressedSpriteAsset.id;
         }
 
-        const inactiveSpriteAsset = AssetElement.get(this._inactiveSpriteAsset);
+        const inactiveSpriteAsset = useAsset(this._inactiveSpriteAsset);
         if (inactiveSpriteAsset) {
             data.inactiveSpriteAsset = inactiveSpriteAsset.id;
         }
@@ -265,7 +265,7 @@ class ButtonComponentElement extends ComponentElement {
      */
     set hoverSpriteAsset(value: string) {
         this._hoverSpriteAsset = value;
-        const asset = AssetElement.get(value);
+        const asset = useAsset(value);
         if (this.component && asset) {
             this.component.hoverSpriteAsset = asset.id as any;
         }
@@ -305,7 +305,7 @@ class ButtonComponentElement extends ComponentElement {
      */
     set pressedSpriteAsset(value: string) {
         this._pressedSpriteAsset = value;
-        const asset = AssetElement.get(value);
+        const asset = useAsset(value);
         if (this.component && asset) {
             this.component.pressedSpriteAsset = asset.id as any;
         }
@@ -345,7 +345,7 @@ class ButtonComponentElement extends ComponentElement {
      */
     set inactiveSpriteAsset(value: string) {
         this._inactiveSpriteAsset = value;
-        const asset = AssetElement.get(value);
+        const asset = useAsset(value);
         if (this.component && asset) {
             this.component.inactiveSpriteAsset = asset.id as any;
         }

package/src/components/element-component.ts

@@ -1,7 +1,7 @@
 import type { ElementComponent } from 'playcanvas';
 import { Color, Vec2, Vec4 } from 'playcanvas';
 
-import { AssetElement } from '../asset';
+import { useAsset } from '../asset';
 import { parseBool, parseColor, parseEnum, parseNumber, parseVec2, parseVec4 } from '../parse';
 
 import { ComponentElement } from './component';
@@ -118,17 +118,17 @@ class ElementComponentElement extends ComponentElement {
 
         // Asset references are resolved from `<pc-asset>` element ids to engine asset ids. They are
         // only included when they resolve, so image/group elements (with no font) don't error.
-        const fontAsset = AssetElement.get(this._fontAsset);
+        const fontAsset = useAsset(this._fontAsset);
         if (fontAsset) {
             data.fontAsset = fontAsset.id;
         }
 
-        const spriteAsset = AssetElement.get(this._spriteAsset);
+        const spriteAsset = useAsset(this._spriteAsset);
         if (spriteAsset) {
             data.spriteAsset = spriteAsset.id;
         }
 
-        const textureAsset = AssetElement.get(this._textureAsset);
+        const textureAsset = useAsset(this._textureAsset);
         if (textureAsset) {
             data.textureAsset = textureAsset.id;
         }
@@ -257,7 +257,7 @@ class ElementComponentElement extends ComponentElement {
      */
     set fontAsset(value: string) {
         this._fontAsset = value;
-        const asset = AssetElement.get(value);
+        const asset = useAsset(value);
         if (this.component && asset) {
             this.component.fontAsset = asset.id;
         }
@@ -430,7 +430,7 @@ class ElementComponentElement extends ComponentElement {
      */
     set spriteAsset(value: string) {
         this._spriteAsset = value;
-        const asset = AssetElement.get(value);
+        const asset = useAsset(value);
         if (this.component && asset) {
             this.component.spriteAsset = asset.id;
         }
@@ -488,7 +488,7 @@ class ElementComponentElement extends ComponentElement {
      */
     set textureAsset(value: string) {
         this._textureAsset = value;
-        const asset = AssetElement.get(value);
+        const asset = useAsset(value);
         if (this.component && asset) {
             this.component.textureAsset = asset.id;
         }

package/src/components/gsplat-component.ts

@@ -1,6 +1,6 @@
 import type { GSplatComponent } from 'playcanvas';
 
-import { AssetElement } from '../asset';
+import { useAsset } from '../asset';
 import { parseBool, parseNumber } from '../parse';
 
 import { ComponentElement } from './component';
@@ -33,7 +33,7 @@ class GSplatComponentElement extends ComponentElement {
 
     protected getInitialComponentData() {
         return {
-            asset: AssetElement.get(this._asset),
+            asset: useAsset(this._asset),
             castShadows: this._castShadows,
             lodBaseDistance: this._lodBaseDistance,
             lodMultiplier: this._lodMultiplier,
@@ -56,7 +56,7 @@ class GSplatComponentElement extends ComponentElement {
      */
     set asset(value: string) {
         this._asset = value;
-        const asset = AssetElement.get(value);
+        const asset = useAsset(value);
         if (this.component && asset) {
             this.component.asset = asset;
         }