mesh-avatar-element 0.1.0 → 0.1.1

package/README.md

@@ -2,6 +2,8 @@
 
 Embed an animated 2D avatar with a `<mesh-avatar>` HTML element. Uses the [mesh-avatar](https://github.com/shinshin86/mesh-avatar-studio/tree/main/packages/runtime) WebGL runtime, with no framework required.
 
+For React and Next.js, use [mesh-avatar-react](https://github.com/shinshin86/mesh-avatar-studio/tree/main/packages/react).
+
 <p align="center">
   <img src="https://raw.githubusercontent.com/shinshin86/mesh-avatar-studio/main/docs/images/face-tracking.gif" width="400" alt="A Mesh Avatar Studio avatar following a face through a webcam">
 </p>
@@ -67,7 +69,7 @@ The element defaults to `display: block; aspect-ratio: 1 / 1`. Set its width in
 | `no-idle` | Boolean attribute; presence disables automatic idle motion | Absent |
 | `label` | Accessible canvas label | `Avatar` |
 
-Attributes can be changed after loading. Changing `src` or `fit` destroys the current avatar and loads a new one. After `load(source)`, changing `fit` reloads that source; changing `src` switches back to the attribute URL. A failed load leaves the element empty; listen for `error` to show a fallback. Unknown expression, emotion or fit values warn once per attribute/value pair rather than throwing.
+Attributes can be changed after loading. Connection and `src` / `fit` changes in the same task are combined into one load in a microtask; `load(source)` starts immediately. Changing `src` or `fit` destroys the current avatar and loads a new one. After `load(source)`, changing `fit` reloads that source; changing `src` switches back to the attribute URL. A failed load leaves the element empty; listen for `error` to show a fallback. Unknown expression, emotion or fit values warn once per attribute/value pair rather than throwing.
 
 ## Properties, methods and events
 

package/dist/index.js

@@ -42,21 +42,22 @@ class b extends m {
   #s;
   #t = null;
   #e = new f();
-  #o = 0;
+  #h = 0;
   #r = !1;
+  #n = null;
   #c;
-  #n = 0;
+  #o = 0;
   #d = 0;
-  #p = !0;
+  #m = !0;
   #l = null;
   #u = null;
-  #m = /* @__PURE__ */ new Set();
+  #b = /* @__PURE__ */ new Set();
   constructor() {
     super();
     const t = this.attachShadow({ mode: "open" }), s = document.createElement("style");
     s.textContent = p, this.#s = document.createElement("canvas"), this.#s.setAttribute("role", "img"), this.#s.setAttribute("aria-label", "Avatar"), t.append(s, this.#s), this.#e.start(), this.#s.addEventListener("webglcontextlost", (e) => {
       e.preventDefault(), this.#a();
-    }), this.#s.addEventListener("webglcontextrestored", () => this.#h());
+    }), this.#s.addEventListener("webglcontextrestored", () => this.#f());
   }
   /** The loaded runtime avatar, or null while loading. Every `mesh-avatar` method is available on it. */
   get avatar() {
@@ -68,7 +69,7 @@ class b extends m {
   }
   /** Loads a file, archive or URL without changing `src`. A changed `src` replaces this source. */
   load(t) {
-    return this.#c = t, this.#h(), this.ready;
+    return this.#n = null, this.#c = t, this.#f(), this.ready;
   }
   get src() {
     return this.getAttribute("src") ?? "";
@@ -114,62 +115,69 @@ class b extends m {
   }
   connectedCallback() {
     this.#l ??= new IntersectionObserver((t) => {
-      this.#p = t.at(-1)?.isIntersecting ?? !0, this.#i();
-    }), this.#l.observe(this), document.addEventListener("visibilitychange", this.#i), !this.#t && !this.#r ? this.#h() : this.#i();
+      this.#m = t.at(-1)?.isIntersecting ?? !0, this.#i();
+    }), this.#l.observe(this), document.addEventListener("visibilitychange", this.#i), !this.#t && !this.#r ? this.#g() : this.#i();
   }
   disconnectedCallback() {
     this.#l?.disconnect(), document.removeEventListener("visibilitychange", this.#i), this.#a(), queueMicrotask(() => {
-      this.isConnected || this.#v();
+      this.isConnected || this.#A();
     });
   }
   attributeChangedCallback(t, s, e) {
-    s !== e && (t === "src" || t === "fit" ? (t === "src" && (this.#c = void 0), t === "fit" && n(e) === void 0 && this.#f(t, e), this.isConnected && this.#h()) : t === "label" ? this.#s.setAttribute("aria-label", e || "Avatar") : t === "paused" ? this.#i() : this.#t && this.#b(this.#t, t));
+    s !== e && (t === "src" || t === "fit" ? (t === "src" && (this.#c = void 0), t === "fit" && n(e) === void 0 && this.#p(t, e), this.isConnected && this.#g()) : t === "label" ? this.#s.setAttribute("aria-label", e || "Avatar") : t === "paused" ? this.#i() : this.#t && this.#v(this.#t, t));
   }
-  #b(t, s) {
+  #v(t, s) {
     if (s === "expression") {
       const e = d(this.getAttribute("expression"));
-      e ? t.setExpression(e) : this.#f(s, this.getAttribute(s));
+      e ? t.setExpression(e) : this.#p(s, this.getAttribute(s));
     } else if (s === "emotion") {
       const e = l(this.getAttribute("emotion"));
-      e !== void 0 ? t.setEmotion(e) : this.#f(s, this.getAttribute(s));
+      e !== void 0 ? t.setEmotion(e) : this.#p(s, this.getAttribute(s));
     } else s === "no-idle" && t.setAutoIdle(!this.hasAttribute("no-idle"));
   }
-  async #h(t = this.#c ?? (this.getAttribute("src") || a)) {
-    const s = ++this.#o;
-    this.#v(!1), this.#r = !0, this.#e.start();
+  #g() {
+    if (this.#e.start(), this.#n) return;
+    const t = this.#n = {};
+    queueMicrotask(() => {
+      this.#n === t && (this.#n = null, this.isConnected && this.#f());
+    });
+  }
+  async #f(t = this.#c ?? (this.getAttribute("src") || a)) {
+    const s = ++this.#h;
+    this.#A(!1), this.#r = !0, this.#e.start();
     try {
       const e = await h(this.#s, t, { manual: !0, fit: this.fit });
-      if (s !== this.#o) {
+      if (s !== this.#h) {
         e.destroy();
         return;
       }
       this.#r = !1, this.#t = e;
       for (const r of ["expression", "emotion", "no-idle"])
-        (r !== "emotion" || this.hasAttribute(r)) && this.#b(e, r);
+        (r !== "emotion" || this.hasAttribute(r)) && this.#v(e, r);
       this.#u !== null && e.setVoiceLevel(this.#u), matchMedia("(prefers-reduced-motion: reduce)").matches && e.setSwayGain(0.5), e.onMotion((r) => this.dispatchEvent(new CustomEvent("motion", { detail: { id: r } }))), e.advance(0), this.#e.resolve(e), this.dispatchEvent(new CustomEvent("load", { detail: { avatar: e } })), this.#i();
     } catch (e) {
-      if (s !== this.#o) return;
+      if (s !== this.#h) return;
       this.#r = !1, this.#e.reject(e), this.dispatchEvent(new CustomEvent("error", { detail: { error: e } }));
     }
   }
   /** Destroys the avatar. Without `cancel = false` it also abandons a load in progress. */
-  #v(t = !0) {
-    t && (this.#o++, this.#r = !1), this.#a(), this.#t?.destroy(), this.#t = null;
+  #A(t = !0) {
+    t && (this.#h++, this.#r = !1), this.#a(), this.#t?.destroy(), this.#t = null;
   }
   #i = () => {
-    const t = this.#t && this.isConnected && this.#p && !document.hidden && !this.paused;
-    t && !this.#n ? (this.#d = performance.now(), this.#n = requestAnimationFrame(this.#g)) : t || this.#a();
+    const t = this.#t && this.isConnected && this.#m && !document.hidden && !this.paused;
+    t && !this.#o ? (this.#d = performance.now(), this.#o = requestAnimationFrame(this.#y)) : t || this.#a();
   };
-  #g = (t) => {
+  #y = (t) => {
     const s = u(t, this.#d);
-    this.#d = t, this.#t?.advance(s, 1 / s), this.#n = requestAnimationFrame(this.#g);
+    this.#d = t, this.#t?.advance(s, 1 / s), this.#o = requestAnimationFrame(this.#y);
   };
   #a() {
-    cancelAnimationFrame(this.#n), this.#n = 0;
+    cancelAnimationFrame(this.#o), this.#o = 0;
   }
-  #f(t, s) {
+  #p(t, s) {
     const e = `${t}=${s}`;
-    this.#m.has(e) || (this.#m.add(e), console.warn(`<mesh-avatar> ignores ${t}="${s}".`));
+    this.#b.has(e) || (this.#b.add(e), console.warn(`<mesh-avatar> ignores ${t}="${s}".`));
   }
 }
 typeof customElements < "u" && !customElements.get("mesh-avatar") && customElements.define("mesh-avatar", b);

package/dist/standalone.js

@@ -2658,21 +2658,22 @@ class lr extends or {
   #a;
   #e = null;
   #t = new ir();
-  #s = 0;
+  #o = 0;
   #n = !1;
+  #i = null;
   #h;
-  #i = 0;
+  #s = 0;
   #u = 0;
-  #d = !0;
+  #p = !0;
   #c = null;
   #f = null;
-  #p = /* @__PURE__ */ new Set();
+  #g = /* @__PURE__ */ new Set();
   constructor() {
     super();
     const e = this.attachShadow({ mode: "open" }), t = document.createElement("style");
     t.textContent = sr, this.#a = document.createElement("canvas"), this.#a.setAttribute("role", "img"), this.#a.setAttribute("aria-label", "Avatar"), e.append(t, this.#a), this.#t.start(), this.#a.addEventListener("webglcontextlost", (r) => {
       r.preventDefault(), this.#l();
-    }), this.#a.addEventListener("webglcontextrestored", () => this.#o());
+    }), this.#a.addEventListener("webglcontextrestored", () => this.#m());
   }
   /** The loaded runtime avatar, or null while loading. Every `mesh-avatar` method is available on it. */
   get avatar() {
@@ -2684,7 +2685,7 @@ class lr extends or {
   }
   /** Loads a file, archive or URL without changing `src`. A changed `src` replaces this source. */
   load(e) {
-    return this.#h = e, this.#o(), this.ready;
+    return this.#i = null, this.#h = e, this.#m(), this.ready;
   }
   get src() {
     return this.getAttribute("src") ?? "";
@@ -2730,62 +2731,69 @@ class lr extends or {
   }
   connectedCallback() {
     this.#c ??= new IntersectionObserver((e) => {
-      this.#d = e.at(-1)?.isIntersecting ?? !0, this.#r();
-    }), this.#c.observe(this), document.addEventListener("visibilitychange", this.#r), !this.#e && !this.#n ? this.#o() : this.#r();
+      this.#p = e.at(-1)?.isIntersecting ?? !0, this.#r();
+    }), this.#c.observe(this), document.addEventListener("visibilitychange", this.#r), !this.#e && !this.#n ? this.#b() : this.#r();
   }
   disconnectedCallback() {
     this.#c?.disconnect(), document.removeEventListener("visibilitychange", this.#r), this.#l(), queueMicrotask(() => {
-      this.isConnected || this.#y();
+      this.isConnected || this.#v();
     });
   }
   attributeChangedCallback(e, t, r) {
-    t !== r && (e === "src" || e === "fit" ? (e === "src" && (this.#h = void 0), e === "fit" && Tt(r) === void 0 && this.#m(e, r), this.isConnected && this.#o()) : e === "label" ? this.#a.setAttribute("aria-label", r || "Avatar") : e === "paused" ? this.#r() : this.#e && this.#g(this.#e, e));
+    t !== r && (e === "src" || e === "fit" ? (e === "src" && (this.#h = void 0), e === "fit" && Tt(r) === void 0 && this.#d(e, r), this.isConnected && this.#b()) : e === "label" ? this.#a.setAttribute("aria-label", r || "Avatar") : e === "paused" ? this.#r() : this.#e && this.#y(this.#e, e));
   }
-  #g(e, t) {
+  #y(e, t) {
     if (t === "expression") {
       const r = ar(this.getAttribute("expression"));
-      r ? e.setExpression(r) : this.#m(t, this.getAttribute(t));
+      r ? e.setExpression(r) : this.#d(t, this.getAttribute(t));
     } else if (t === "emotion") {
       const r = rr(this.getAttribute("emotion"));
-      r !== void 0 ? e.setEmotion(r) : this.#m(t, this.getAttribute(t));
+      r !== void 0 ? e.setEmotion(r) : this.#d(t, this.getAttribute(t));
     } else t === "no-idle" && e.setAutoIdle(!this.hasAttribute("no-idle"));
   }
-  async #o(e = this.#h ?? (this.getAttribute("src") || er)) {
-    const t = ++this.#s;
-    this.#y(!1), this.#n = !0, this.#t.start();
+  #b() {
+    if (this.#t.start(), this.#i) return;
+    const e = this.#i = {};
+    queueMicrotask(() => {
+      this.#i === e && (this.#i = null, this.isConnected && this.#m());
+    });
+  }
+  async #m(e = this.#h ?? (this.getAttribute("src") || er)) {
+    const t = ++this.#o;
+    this.#v(!1), this.#n = !0, this.#t.start();
     try {
       const r = await Qa(this.#a, e, { manual: !0, fit: this.fit });
-      if (t !== this.#s) {
+      if (t !== this.#o) {
         r.destroy();
         return;
       }
       this.#n = !1, this.#e = r;
       for (const i of ["expression", "emotion", "no-idle"])
-        (i !== "emotion" || this.hasAttribute(i)) && this.#g(r, i);
+        (i !== "emotion" || this.hasAttribute(i)) && this.#y(r, i);
       this.#f !== null && r.setVoiceLevel(this.#f), matchMedia("(prefers-reduced-motion: reduce)").matches && r.setSwayGain(0.5), r.onMotion((i) => this.dispatchEvent(new CustomEvent("motion", { detail: { id: i } }))), r.advance(0), this.#t.resolve(r), this.dispatchEvent(new CustomEvent("load", { detail: { avatar: r } })), this.#r();
     } catch (r) {
-      if (t !== this.#s) return;
+      if (t !== this.#o) return;
       this.#n = !1, this.#t.reject(r), this.dispatchEvent(new CustomEvent("error", { detail: { error: r } }));
     }
   }
   /** Destroys the avatar. Without `cancel = false` it also abandons a load in progress. */
-  #y(e = !0) {
-    e && (this.#s++, this.#n = !1), this.#l(), this.#e?.destroy(), this.#e = null;
+  #v(e = !0) {
+    e && (this.#o++, this.#n = !1), this.#l(), this.#e?.destroy(), this.#e = null;
   }
   #r = () => {
-    const e = this.#e && this.isConnected && this.#d && !document.hidden && !this.paused;
-    e && !this.#i ? (this.#u = performance.now(), this.#i = requestAnimationFrame(this.#b)) : e || this.#l();
+    const e = this.#e && this.isConnected && this.#p && !document.hidden && !this.paused;
+    e && !this.#s ? (this.#u = performance.now(), this.#s = requestAnimationFrame(this.#x)) : e || this.#l();
   };
-  #b = (e) => {
+  #x = (e) => {
     const t = nr(e, this.#u);
-    this.#u = e, this.#e?.advance(t, 1 / t), this.#i = requestAnimationFrame(this.#b);
+    this.#u = e, this.#e?.advance(t, 1 / t), this.#s = requestAnimationFrame(this.#x);
   };
   #l() {
-    cancelAnimationFrame(this.#i), this.#i = 0;
+    cancelAnimationFrame(this.#s), this.#s = 0;
   }
-  #m(e, t) {
+  #d(e, t) {
     const r = `${e}=${t}`;
-    this.#p.has(r) || (this.#p.add(r), console.warn(`<mesh-avatar> ignores ${e}="${t}".`));
+    this.#g.has(r) || (this.#g.add(r), console.warn(`<mesh-avatar> ignores ${e}="${t}".`));
   }
 }
 typeof customElements < "u" && !customElements.get("mesh-avatar") && customElements.define("mesh-avatar", lr);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mesh-avatar-element",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "license": "MIT",
   "description": "A <mesh-avatar> custom element: put a Mesh Avatar Studio avatar on any web page with one tag.",