@playcanvas/web-components 0.8.2 → 0.10.0

package/README.md

@@ -38,6 +38,24 @@ See PlayCanvas Web Components in action here: https://playcanvas.github.io/web-c
 
 Please see the [Getting Started Guide](https://developer.playcanvas.com/user-manual/web-components/getting-started/) for installation and usage instructions.
 
+## Editor Support
+
+The package ships a [Custom Elements Manifest](https://github.com/webcomponents/custom-elements-manifest), which editors use to offer tag and attribute completions, valid attribute values and hover documentation when authoring HTML.
+
+**VS Code** — add the following to your workspace `.vscode/settings.json`:
+
+```json
+{
+  "html.customData": [
+    "./node_modules/@playcanvas/web-components/dist/vscode.html-custom-data.json"
+  ]
+}
+```
+
+**JetBrains IDEs** (WebStorm, IntelliJ IDEA) — no setup required. The IDE discovers the bundled `web-types.json` automatically.
+
+**Other tooling** — the manifest itself is at `@playcanvas/web-components/dist/custom-elements.json` and is declared in the package's `customElements` field, which is how tools such as `lit-analyzer` and Storybook locate it.
+
 ## Development 
 
 ### Setting Up Local Development

package/dist/app.d.ts

@@ -22,10 +22,13 @@ declare class AppElement extends AsyncElement {
     private _hasPointerListeners;
     private _hoveredEntity;
     private _pointerHandlers;
+    private _app;
     /**
-     * The PlayCanvas application instance.
+     * The PlayCanvas application instance. Available once the element is ready — await
+     * {@link whenReady} or the element's `ready()` promise before accessing it.
+     * @returns The application instance.
      */
-    app: AppBase | null;
+    get app(): AppBase;
     /**
      * Creates a new AppElement instance.
      *
@@ -64,7 +67,8 @@ declare class AppElement extends AsyncElement {
      */
     get antialias(): boolean;
     /**
-     * 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');
@@ -111,6 +115,11 @@ declare class AppElement extends AsyncElement {
      */
     get stencil(): boolean;
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-app': AppElement;
+    }
 }
 export { AppElement };

package/dist/asset.d.ts

@@ -1,16 +1,41 @@
 import { Asset } from 'playcanvas';
+import { AsyncElement } from './async-element';
 /**
  * The AssetElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-asset/ | `<pc-asset>`} elements.
  * The AssetElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
+ *
+ * The element becomes ready once the containing application has started and the asset is in the
+ * state declared by the markup: loaded for preloaded assets (even if loading failed — check the
+ * asset's `resource`), or registered and awaiting a load for `lazy` assets. Elements inserted
+ * 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.
  */
-declare class AssetElement extends HTMLElement {
+declare class AssetElement extends AsyncElement {
     private _lazy;
     /**
-     * The asset that is loaded.
+     * The asset that is loaded. Available once the element is ready — await
+     * {@link whenReady} or the element's `ready()` promise before accessing it.
      */
     asset: Asset | null;
+    connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     createAsset(): void;
     /**
@@ -34,6 +59,11 @@ declare class AssetElement extends HTMLElement {
     get lazy(): boolean;
     static get(id: string): Asset | null | undefined;
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: string, _newValue: string): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-asset': AssetElement;
+    }
 }
 export { AssetElement };

package/dist/async-element.d.ts

@@ -2,6 +2,9 @@ import { AppElement } from './app';
 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.
  */
 declare class AsyncElement extends HTMLElement {
     private _readyPromise;
@@ -11,14 +14,61 @@ declare class AsyncElement extends HTMLElement {
     get closestApp(): AppElement;
     get closestEntity(): EntityElement;
     /**
-     * Called when the element is fully initialized and ready.
-     * Subclasses should call this when they're ready.
+     * Called when the element is fully initialized and ready. Subclasses should call this when
+     * they're ready. Resolves the ready promise and dispatches a bubbling, composed `ready`
+     * event.
      */
     protected _onReady(): void;
     /**
-     * Returns a promise that resolves with this element when it's ready.
+     * Returns a promise that resolves with this element when it's ready. This is the low-level
+     * primitive underlying {@link whenReady}, which is the recommended way to wait for elements.
      * @returns A promise that resolves with this element when it's ready.
      */
     ready(): Promise<this>;
 }
-export { AsyncElement };
+/**
+ * A union of the tag names of all elements that initialize asynchronously (i.e. elements whose
+ * classes extend {@link AsyncElement}).
+ */
+type AsyncElementTagName = {
+    [K in keyof HTMLElementTagNameMap]: HTMLElementTagNameMap[K] extends AsyncElement ? K : never;
+}[keyof HTMLElementTagNameMap];
+/**
+ * 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
+ * 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'`).
+ * @returns A promise that resolves with the element once it's ready.
+ * @example
+ * const { app } = await whenReady('pc-app');
+ */
+declare function whenReady<K extends AsyncElementTagName>(target: K): Promise<HTMLElementTagNameMap[K]>;
+/**
+ * Waits for the given element to be fully initialized. Note that the promise never settles if
+ * the element cannot finish initializing (for example, an element that is never added to the
+ * document).
+ * @param target - The element to wait for.
+ * @returns A promise that resolves with the element once it's ready.
+ * @example
+ * const appElement = document.createElement('pc-app');
+ * document.body.appendChild(appElement);
+ * const { app } = await whenReady(appElement);
+ */
+declare 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
+ * 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'`).
+ * @returns A promise that resolves with the element once it's ready.
+ * @example
+ * // In TypeScript, supply the element type when using an arbitrary selector
+ * const { entity } = await whenReady<EntityElement>('pc-entity[name="camera"]');
+ */
+declare function whenReady<T extends AsyncElement = AsyncElement, S extends string = string>(target: S extends Exclude<keyof HTMLElementTagNameMap, AsyncElementTagName> ? never : S): Promise<T>;
+export { AsyncElement, whenReady };
+export type { AsyncElementTagName };

package/dist/components/button-component.d.ts

@@ -30,7 +30,7 @@ declare class ButtonComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas button component.
      * @returns The button component.
      */
-    get component(): ButtonComponent | null;
+    get component(): ButtonComponent;
     /**
      * Sets whether the button is active and responds to input.
      * @param value - Whether the button is active.
@@ -63,15 +63,16 @@ declare class ButtonComponentElement extends ComponentElement {
      */
     get hitPadding(): Vec4;
     /**
-     * Sets how the button reacts to being hovered/pressed. Can be `tint` (0) or `sprite` (1).
+     * Sets how the button reacts to being hovered/pressed. Can be `tint` or `sprite`. Defaults to
+     * `tint`.
      * @param value - The transition mode.
      */
-    set transitionMode(value: number);
+    set transitionMode(value: 'tint' | 'sprite');
     /**
      * Gets how the button reacts to being hovered/pressed.
      * @returns The transition mode.
      */
-    get transitionMode(): number;
+    get transitionMode(): "tint" | "sprite";
     /**
      * Sets the tint color applied to the image entity when the button is hovered (tint transition
      * mode).
@@ -179,6 +180,11 @@ declare class ButtonComponentElement extends ComponentElement {
      */
     get inactiveSpriteFrame(): number;
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-button': ButtonComponentElement;
+    }
 }
 export { ButtonComponentElement };

package/dist/components/camera-component.d.ts

@@ -42,14 +42,14 @@ declare class CameraComponentElement extends ComponentElement {
         gammaCorrection: 0 | 1;
         horizontalFov: boolean;
         nearClip: number;
-        orthographic: boolean;
+        projection: 0 | 1;
         orthoHeight: number;
         priority: number;
         rect: Vec4;
         scissorRect: Vec4;
-        toneMapping: 0 | 3 | 1 | 2 | 4 | 5 | 6 | undefined;
+        toneMapping: number | undefined;
     };
-    get xrAvailable(): boolean | null | undefined;
+    get xrAvailable(): boolean | null;
     /**
      * Starts the camera in XR mode.
      * @param type - The type of XR mode to start.
@@ -64,7 +64,7 @@ declare class CameraComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas camera component.
      * @returns The camera component.
      */
-    get component(): CameraComponent | null;
+    get component(): CameraComponent;
     /**
      * Sets the clear color of the camera.
      * @param value - The clear color.
@@ -247,6 +247,11 @@ declare class CameraComponentElement extends ComponentElement {
      */
     get tonemap(): 'none' | 'linear' | 'filmic' | 'hejl' | 'aces' | 'aces2' | 'neutral';
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-camera': CameraComponentElement;
+    }
 }
 export { CameraComponentElement };

package/dist/components/collision-component.d.ts

@@ -27,13 +27,13 @@ declare class CollisionComponentElement extends ComponentElement {
         height: number;
         linearOffset: Vec3;
         radius: number;
-        type: string;
+        type: "box" | "capsule" | "compound" | "cone" | "cylinder" | "mesh" | "sphere";
     };
     /**
      * Gets the underlying PlayCanvas collision component.
      * @returns The collision component.
      */
-    get component(): CollisionComponent | null;
+    get component(): CollisionComponent;
     set angularOffset(value: Quat);
     get angularOffset(): Quat;
     set axis(value: number);
@@ -48,9 +48,14 @@ declare class CollisionComponentElement extends ComponentElement {
     get linearOffset(): Vec3;
     set radius(value: number);
     get radius(): number;
-    set type(value: string);
-    get type(): string;
+    set type(value: 'box' | 'capsule' | 'compound' | 'cone' | 'cylinder' | 'mesh' | 'sphere');
+    get type(): "box" | "capsule" | "compound" | "cone" | "cylinder" | "mesh" | "sphere";
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-collision': CollisionComponentElement;
+    }
 }
 export { CollisionComponentElement };

package/dist/components/component.d.ts

@@ -9,6 +9,7 @@ declare class ComponentElement extends AsyncElement {
     private _componentName;
     private _enabled;
     private _component;
+    private _appElement;
     /**
      * Creates a new ComponentElement instance.
      *
@@ -21,7 +22,12 @@ declare class ComponentElement extends AsyncElement {
     initComponent(): void;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
-    get component(): Component | null;
+    /**
+     * The PlayCanvas component instance. Available once the element is ready — await
+     * {@link whenReady} or the element's `ready()` promise before accessing it.
+     * @returns The component instance.
+     */
+    get component(): Component;
     /**
      * Sets the enabled state of the component.
      * @param value - The enabled state of the component.
@@ -33,6 +39,6 @@ declare class ComponentElement extends AsyncElement {
      */
     get enabled(): boolean;
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
 }
 export { ComponentElement };

package/dist/components/element-component.d.ts

@@ -10,13 +10,13 @@ import { ComponentElement } from './component';
  */
 declare class ElementComponentElement extends ComponentElement {
     private _anchor;
-    private _asset;
     private _autoWidth;
     private _autoHeight;
     private _autoFitWidth;
     private _autoFitHeight;
     private _color;
     private _enableMarkup;
+    private _fontAsset;
     private _fontSize;
     private _maxFontSize;
     private _minFontSize;
@@ -43,7 +43,7 @@ declare class ElementComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas element component.
      * @returns The element component.
      */
-    get component(): ElementComponent | null;
+    get component(): ElementComponent;
     /**
      * Sets the anchor of the element component.
      * @param value - The anchor.
@@ -54,16 +54,6 @@ declare class ElementComponentElement extends ComponentElement {
      * @returns The anchor.
      */
     get anchor(): Vec4;
-    /**
-     * Sets the id of the `pc-asset` to use for the font (text elements).
-     * @param value - The asset ID.
-     */
-    set asset(value: string);
-    /**
-     * Gets the id of the `pc-asset` to use for the font.
-     * @returns The asset ID.
-     */
-    get asset(): string;
     /**
      * Sets whether the element component should automatically adjust its width to the text content
      * (text elements only).
@@ -106,6 +96,16 @@ declare class ElementComponentElement extends ComponentElement {
      * @returns Whether markup is enabled.
      */
     get enableMarkup(): boolean;
+    /**
+     * Sets the id of the `pc-asset` to use for the font (text elements).
+     * @param value - The font asset ID.
+     */
+    set fontAsset(value: string);
+    /**
+     * Gets the id of the `pc-asset` to use for the font.
+     * @returns The font asset ID.
+     */
+    get fontAsset(): string;
     /**
      * Sets the font size of the element component.
      * @param value - The font size.
@@ -310,6 +310,11 @@ declare class ElementComponentElement extends ComponentElement {
      */
     get maxFontSize(): number;
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-element': ElementComponentElement;
+    }
 }
 export { ElementComponentElement };

package/dist/components/gsplat-component.d.ts

@@ -29,7 +29,7 @@ declare class GSplatComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas gsplat component.
      * @returns The gsplat component.
      */
-    get component(): GSplatComponent | null;
+    get component(): GSplatComponent;
     /**
      * Sets id of the `pc-asset` to use for the splat.
      * @param value - The asset ID.
@@ -103,6 +103,11 @@ declare class GSplatComponentElement extends ComponentElement {
      */
     get lodRangeMax(): number;
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-gsplat': GSplatComponentElement;
+    }
 }
 export { GSplatComponentElement };

package/dist/components/layoutchild-component.d.ts

@@ -31,7 +31,7 @@ declare class LayoutChildComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas layout child component.
      * @returns The layout child component.
      */
-    get component(): LayoutChildComponent | null;
+    get component(): LayoutChildComponent;
     /**
      * Sets the minimum width the element should be laid out with.
      * @param value - The minimum width.
@@ -105,6 +105,11 @@ declare class LayoutChildComponentElement extends ComponentElement {
      */
     get excludeFromLayout(): boolean;
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-layoutchild': LayoutChildComponentElement;
+    }
 }
 export { LayoutChildComponentElement };

package/dist/components/layoutgroup-component.d.ts

@@ -21,31 +21,32 @@ declare class LayoutGroupComponentElement extends ComponentElement {
     /** @ignore */
     constructor();
     getInitialComponentData(): {
-        orientation: number;
+        orientation: number | undefined;
         reverseX: boolean;
         reverseY: boolean;
         alignment: Vec2;
         padding: Vec4;
         spacing: Vec2;
-        widthFitting: number;
-        heightFitting: number;
+        widthFitting: number | undefined;
+        heightFitting: number | undefined;
         wrap: boolean;
     };
     /**
      * Gets the underlying PlayCanvas layout group component.
      * @returns The layout group component.
      */
-    get component(): LayoutGroupComponent | null;
+    get component(): LayoutGroupComponent;
     /**
-     * Sets the orientation of the layout group. Can be `horizontal` (0) or `vertical` (1).
+     * Sets the orientation of the layout group. Can be `horizontal` or `vertical`. Defaults to
+     * `horizontal`.
      * @param value - The orientation.
      */
-    set orientation(value: number);
+    set orientation(value: 'horizontal' | 'vertical');
     /**
      * Gets the orientation of the layout group.
      * @returns The orientation.
      */
-    get orientation(): number;
+    get orientation(): "horizontal" | "vertical";
     /**
      * Sets whether the order of children is reversed along the horizontal axis.
      * @param value - Whether to reverse the horizontal order.
@@ -97,27 +98,27 @@ declare class LayoutGroupComponentElement extends ComponentElement {
      */
     get spacing(): Vec2;
     /**
-     * Sets the fitting mode along the horizontal axis. Can be `none` (0), `stretch` (1), `shrink`
-     * (2) or `both` (3).
+     * Sets the fitting mode along the horizontal axis. Can be `none`, `stretch`, `shrink` or
+     * `both`. Defaults to `none`.
      * @param value - The width fitting mode.
      */
-    set widthFitting(value: number);
+    set widthFitting(value: 'none' | 'stretch' | 'shrink' | 'both');
     /**
      * Gets the fitting mode along the horizontal axis.
      * @returns The width fitting mode.
      */
-    get widthFitting(): number;
+    get widthFitting(): "none" | "stretch" | "shrink" | "both";
     /**
-     * Sets the fitting mode along the vertical axis. Can be `none` (0), `stretch` (1), `shrink` (2)
-     * or `both` (3).
+     * Sets the fitting mode along the vertical axis. Can be `none`, `stretch`, `shrink` or
+     * `both`. Defaults to `none`.
      * @param value - The height fitting mode.
      */
-    set heightFitting(value: number);
+    set heightFitting(value: 'none' | 'stretch' | 'shrink' | 'both');
     /**
      * Gets the fitting mode along the vertical axis.
      * @returns The height fitting mode.
      */
-    get heightFitting(): number;
+    get heightFitting(): "none" | "stretch" | "shrink" | "both";
     /**
      * Sets whether children wrap onto a new line/column when they overflow the group.
      * @param value - Whether to wrap children.
@@ -129,6 +130,11 @@ declare class LayoutGroupComponentElement extends ComponentElement {
      */
     get wrap(): boolean;
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-layoutgroup': LayoutGroupComponentElement;
+    }
 }
 export { LayoutGroupComponentElement };

package/dist/components/light-component.d.ts

@@ -46,8 +46,8 @@ declare class LightComponentElement extends ComponentElement {
         shadowIntensity: number;
         shadowResolution: number;
         shadowSamples: number;
-        shadowType: 0 | 3 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | undefined;
-        type: string;
+        shadowType: number | undefined;
+        type: "directional" | "omni" | "spot";
         vsmBias: number;
         vsmBlurSize: number;
     };
@@ -55,7 +55,7 @@ declare class LightComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas light component.
      * @returns The light component.
      */
-    get component(): LightComponent | null;
+    get component(): LightComponent;
     /**
      * Sets the cast shadows flag of the light.
      * @param value - The cast shadows flag.
@@ -187,15 +187,16 @@ declare class LightComponentElement extends ComponentElement {
      */
     get shadowType(): "pcf1-16f" | "pcf1-32f" | "pcf3-16f" | "pcf3-32f" | "pcf5-16f" | "pcf5-32f" | "vsm-16f" | "vsm-32f" | "pcss-32f";
     /**
-     * Sets the type of the light.
+     * Sets the type of the light. Can be `directional`, `omni` or `spot`. Defaults to
+     * `directional`.
      * @param value - The type.
      */
-    set type(value: string);
+    set type(value: 'directional' | 'omni' | 'spot');
     /**
      * Gets the type of the light.
      * @returns The type.
      */
-    get type(): string;
+    get type(): "directional" | "omni" | "spot";
     /**
      * Sets the VSM bias of the light.
      * @param value - The VSM bias.
@@ -257,6 +258,11 @@ declare class LightComponentElement extends ComponentElement {
      */
     get shadowBlockerSamples(): number;
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-light': LightComponentElement;
+    }
 }
 export { LightComponentElement };

package/dist/components/listener-component.d.ts

@@ -15,6 +15,11 @@ declare class ListenerComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas audio listener component.
      * @returns The audio listener component.
      */
-    get component(): AudioListenerComponent | null;
+    get component(): AudioListenerComponent;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-listener': ListenerComponentElement;
+    }
 }
 export { ListenerComponentElement };

package/dist/components/particlesystem-component.d.ts

@@ -17,7 +17,7 @@ declare class ParticleSystemComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas particle system component.
      * @returns The particle system component.
      */
-    get component(): ParticleSystemComponent | null;
+    get component(): ParticleSystemComponent;
     private applyConfig;
     private _loadAsset;
     /**
@@ -47,6 +47,11 @@ declare class ParticleSystemComponentElement extends ComponentElement {
      */
     stop(): void;
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-particles': ParticleSystemComponentElement;
+    }
 }
 export { ParticleSystemComponentElement };