@playcanvas/web-components 0.14.0 → 0.16.0

package/src/entity.ts

@@ -4,6 +4,33 @@ import { Entity, Vec3 } from 'playcanvas';
 import { EntityBaseElement, POINTER_ATTRIBUTES } from './entity-base';
 import { parseBool, parseTags, parseVec3 } from './parse';
 
+/**
+ * Creates and parents the entities of every descendant `<pc-entity>` of `root`, in two passes so
+ * that no parent's existence depends on document order. Called wherever a subtree could not build
+ * itself: an element inserted into an application that is already running, and a `<pc-node>` whose
+ * children waited for it to bind.
+ *
+ * Descendants that are not yet custom elements are skipped, because there is nothing useful to do
+ * for them and reaching for `_createEntity` would throw. A subtree cloned from a `<template>`
+ * arrives entirely unupgraded — template content lives in an inert document, where custom element
+ * definitions are never looked up — and appending the clone upgrades its elements in tree order,
+ * an element before its descendants. So a sweep from an element's own `connectedCallback` sees
+ * plain `HTMLElement`s below it. Each becomes an `EntityElement` moments later and its own
+ * `connectedCallback` creates and parents it, by which time the ancestor it parents under has its
+ * entity — the same guarantee tree order gives this sweep.
+ *
+ * @param root - The element whose descendant entities to build.
+ * @param app - The application to create the entities in.
+ * @internal
+ */
+export const buildDescendantEntities = (root: Element, app: AppBase) => {
+    const children = Array.from(root.querySelectorAll('pc-entity')).filter(
+        (child): child is EntityElement => child instanceof EntityElement
+    );
+    children.forEach((child) => child._createEntity(app));
+    children.forEach((child) => child._buildHierarchy(app));
+};
+
 /**
  * The EntityElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-entity/ | `<pc-entity>`} elements.
@@ -172,13 +199,7 @@ class EntityElement extends EntityBaseElement {
             this._buildHierarchy(app);
 
             // Handle any child entities that might exist
-            const childEntities = this.querySelectorAll<EntityElement>('pc-entity');
-            childEntities.forEach((child) => {
-                child._createEntity(app);
-            });
-            childEntities.forEach((child) => {
-                child._buildHierarchy(app);
-            });
+            buildDescendantEntities(this, app);
         }
     }
 

package/src/index.ts

@@ -15,12 +15,15 @@ import { ModuleElement } from './module';
 import { AppElement } from './app';
 import { EntityElement } from './entity';
 import { AssetElement } from './asset';
+import { AnimComponentElement } from './components/anim-component';
+import { AnimClipElement } from './components/anim-clip';
 import { ListenerComponentElement } from './components/listener-component';
 import { ButtonComponentElement } from './components/button-component';
 import { CameraComponentElement } from './components/camera-component';
 import { CollisionComponentElement } from './components/collision-component';
 import { ComponentElement } from './components/component';
 import { ElementComponentElement } from './components/element-component';
+import { JointComponentElement } from './components/joint-component';
 import { LayoutChildComponentElement } from './components/layoutchild-component';
 import { LayoutGroupComponentElement } from './components/layoutgroup-component';
 import { LightComponentElement } from './components/light-component';
@@ -50,12 +53,15 @@ import type {
 
 declare global {
     interface HTMLElementEventMap {
+        break: CustomEvent;
         scriptattributeschange: ScriptAttributesChangeEvent;
         scriptenablechange: ScriptEnableChangeEvent;
         scriptnamechange: ScriptNameChangeEvent;
     }
 
     interface HTMLElementTagNameMap {
+        'pc-anim': AnimComponentElement;
+        'pc-anim-clip': AnimClipElement;
         'pc-app': AppElement;
         'pc-asset': AssetElement;
         'pc-button': ButtonComponentElement;
@@ -64,6 +70,7 @@ declare global {
         'pc-element': ElementComponentElement;
         'pc-entity': EntityElement;
         'pc-gsplat': GSplatComponentElement;
+        'pc-joint': JointComponentElement;
         'pc-layoutchild': LayoutChildComponentElement;
         'pc-layoutgroup': LayoutGroupComponentElement;
         'pc-light': LightComponentElement;
@@ -93,11 +100,14 @@ export {
     AppElement,
     EntityElement,
     AssetElement,
+    AnimComponentElement,
+    AnimClipElement,
     ButtonComponentElement,
     CameraComponentElement,
     CollisionComponentElement,
     ComponentElement,
     ElementComponentElement,
+    JointComponentElement,
     LayoutChildComponentElement,
     LayoutGroupComponentElement,
     ParticleSystemComponentElement,

package/src/model.ts

@@ -252,13 +252,6 @@ class ModelElement extends AsyncElement {
         const entity = container.instantiateRenderEntity();
         this._entity = entity;
 
-        // @ts-ignore
-        if (container.animations.length > 0) {
-            entity.addComponent('anim');
-            // @ts-ignore
-            entity.anim.assignAnimation('animation', container.animations[0].resource);
-        }
-
         // The parent's readiness re-arms when it is torn down, so these can resume in a later
         // connection cycle. The entity is captured above and the generation re-checked, so a
         // stale resume cannot parent an entity a newer cycle has already destroyed.

package/src/node.ts

@@ -2,6 +2,7 @@ import type { Entity, EventHandle, GraphNode, Material, MeshInstance, Quat, Rend
 import { Vec3 } from 'playcanvas';
 
 import { ComponentElement } from './components/component';
+import { buildDescendantEntities } from './entity';
 import type { EntityElement } from './entity';
 import { EntityBaseElement, POINTER_ATTRIBUTES } from './entity-base';
 import { MaterialElement } from './material';
@@ -490,13 +491,7 @@ class NodeElement extends EntityBaseElement {
         if (!app) {
             return;
         }
-        const childEntities = this.querySelectorAll<EntityElement>('pc-entity');
-        childEntities.forEach((child) => {
-            child._createEntity(app);
-        });
-        childEntities.forEach((child) => {
-            child._buildHierarchy(app);
-        });
+        buildDescendantEntities(this, app);
     }
 
     /**