@awflow/avatar-element 1.0.0 → 1.1.0

package/README.md

@@ -43,7 +43,9 @@ Methods: `react(name)`, `pulse(strength?)`, `setVoice(fn | null)`,
 Properties `ring`, `gaze`, `reaction` and `reactKey` accept objects directly.
 
 `defineAvatarElements(prefix = 'awf')` registers the tags under another prefix.
-Importing in Node is safe and defines nothing.
+Importing in Node (SSR, tests) is safe from 1.0.1 and defines nothing; the
+1.0.0 build was broken (its `dist/index.js` lacked the definitions), so use
+1.0.1 or later.
 
 ## Docs
 

package/dist/index.js

@@ -1,3 +1,364 @@
+// src/element.ts
+import { LATEST } from "@awflow/avatar";
+import {
+  mount
+} from "@awflow/avatar/adapter";
+
+// src/group.ts
+function createGroup() {
+  const members = [];
+  let speaker;
+  const aim = () => {
+    const at = members.find((m) => m.name === speaker)?.handle ?? null;
+    for (const m of members)
+      m.handle.lookAt(m.handle === at ? null : at);
+  };
+  return {
+    registerMember(name, handle) {
+      const m = { name, handle };
+      members.push(m);
+      aim();
+      return () => {
+        const i = members.indexOf(m);
+        if (i < 0)
+          return;
+        members.splice(i, 1);
+        if (m.name === speaker)
+          aim();
+      };
+    },
+    setSpeaker(name) {
+      speaker = name;
+      aim();
+    }
+  };
+}
+
+// src/parse.ts
+var BOOLEANS = new Set(["animate", "dress", "riso", "square"]);
+var NUMBERS = new Set(["size", "version"]);
+var STRINGS = [
+  "name",
+  "theme",
+  "framing",
+  "frame",
+  "expression",
+  "activity",
+  "shape",
+  "color",
+  "eyes",
+  "brows",
+  "mouth",
+  "cheeks",
+  "trait",
+  "motif",
+  "headwear",
+  "eyewear",
+  "neckwear",
+  "face",
+  "prop",
+  "character",
+  "reaction"
+];
+var ATTRIBUTES = {
+  ...Object.fromEntries([...NUMBERS, ...BOOLEANS, ...STRINGS, "gaze", "fx", "ring"].map((k) => [
+    k,
+    k
+  ])),
+  "react-key": "reactKey",
+  label: "title"
+};
+var clamp = (n) => Math.max(-1, Math.min(1, n));
+function parseGaze(text) {
+  const t = text.trim();
+  if (t === "pointer")
+    return "pointer";
+  const parts = t.split(",");
+  if (parts.length !== 2 || parts.some((p) => p.trim() === ""))
+    return;
+  const [x, y] = parts.map((p) => Number(p));
+  if (Number.isNaN(x) || Number.isNaN(y))
+    return;
+  return [clamp(x), clamp(y)];
+}
+function parseAttribute(attr, text) {
+  const key = ATTRIBUTES[attr];
+  if (!key)
+    return;
+  if (text === null) {
+    return { key, value: undefined };
+  }
+  if (BOOLEANS.has(attr))
+    return { key, value: text !== "false" };
+  if (NUMBERS.has(attr)) {
+    if (text.trim() === "")
+      return;
+    const n = Number(text);
+    return Number.isNaN(n) ? undefined : { key, value: n };
+  }
+  if (attr === "gaze") {
+    const g = parseGaze(text);
+    return g === undefined ? undefined : { key, value: g };
+  }
+  if (attr === "ring") {
+    try {
+      const v = JSON.parse(text);
+      return v && typeof v === "object" && !Array.isArray(v) ? { key, value: v } : undefined;
+    } catch {
+      return;
+    }
+  }
+  if (attr === "fx") {
+    return {
+      key,
+      value: text === "false" ? false : text === "" || text === "true" ? true : text
+    };
+  }
+  if (attr === "label")
+    return { key, value: text === "false" ? false : text };
+  return { key, value: text };
+}
+
+// src/element.ts
+var HANDLE = Symbol.for("awflow.avatar.element.handle");
+var JOIN = Symbol.for("awflow.avatar.element.join");
+var LEAVE = Symbol.for("awflow.avatar.element.leave");
+var GROUP = Symbol.for("awflow.avatar.element.group");
+var NOTIFY = Symbol.for("awflow.avatar.element.notify");
+var AIM = Symbol.for("awflow.avatar.element.aim");
+var serial = 0;
+function domId(n, version) {
+  const v = typeof version === "number" ? version : LATEST;
+  return `${v >= 2 ? "awf" : "peek"}-e${n}`;
+}
+function upgradeProperties(el, keys) {
+  for (const k of keys) {
+    if (!Object.hasOwn(el, k))
+      continue;
+    const v = el[k];
+    delete el[k];
+    el[k] = v;
+  }
+}
+var isAvatar = (x) => typeof x === "object" && x !== null && (HANDLE in x);
+var isGroup = (x) => typeof x === "object" && x !== null && (GROUP in x);
+function createElements() {
+
+  class Avatar extends HTMLElement {
+    static get observedAttributes() {
+      return Object.keys(ATTRIBUTES);
+    }
+    opts = {};
+    mounted = null;
+    leaveGroup = null;
+    lookTarget = null;
+    rendered = false;
+    serial = ++serial;
+    [NOTIFY] = new Set;
+    constructor() {
+      super();
+      upgradeProperties(this, ["ring", "gaze", "reaction", "reactKey"]);
+    }
+    [AIM]() {
+      const t = this.lookTarget;
+      this.mounted?.lookAt(isAvatar(t) ? t[HANDLE] : t);
+    }
+    changed() {
+      for (const w of this[NOTIFY])
+        w[AIM]();
+    }
+    get handle() {
+      return this.mounted;
+    }
+    get [HANDLE]() {
+      return this.mounted;
+    }
+    connectedCallback() {
+      for (const attr of Object.keys(ATTRIBUTES)) {
+        const p = this.hasAttribute(attr) ? parseAttribute(attr, this.getAttribute(attr)) : undefined;
+        if (p && !(p.key in this.opts))
+          this.opts[p.key] = p.value;
+      }
+      if (isAvatar(this.lookTarget))
+        this.lookTarget[NOTIFY].add(this);
+      this.mountNow();
+    }
+    disconnectedCallback() {
+      if (isAvatar(this.lookTarget))
+        this.lookTarget[NOTIFY].delete(this);
+      this[LEAVE]();
+      this.mounted?.destroy();
+      this.mounted = null;
+      this.changed();
+    }
+    attributeChangedCallback(attr, _old, value) {
+      const p = parseAttribute(attr, value);
+      if (!p)
+        return;
+      this.apply({ [p.key]: p.value });
+    }
+    apply(input) {
+      Object.assign(this.opts, input);
+      if (!this.isConnected)
+        return;
+      const patch = "version" in input ? { ...input, id: domId(this.serial, this.opts.version) } : input;
+      if (patch.name !== undefined || this.opts.name === undefined) {
+        if (patch.name === undefined) {
+          this.unmount();
+          return;
+        }
+        if (this.mounted) {
+          this.mounted.set(patch);
+          this[LEAVE]();
+          this[JOIN]();
+          return;
+        }
+        this.mountNow();
+        return;
+      }
+      this.mounted?.set(patch);
+    }
+    mountNow() {
+      this.mounted?.destroy();
+      this.mounted = null;
+      if (typeof this.opts.name !== "string") {
+        this.unmount();
+        return;
+      }
+      this.mounted = mount(this, {
+        ...this.opts,
+        id: domId(this.serial, this.opts.version)
+      });
+      this.rendered = true;
+      this[AIM]();
+      this[JOIN]();
+      this.changed();
+    }
+    unmount() {
+      this[LEAVE]();
+      this.mounted?.destroy();
+      this.mounted = null;
+      if (this.rendered)
+        this.replaceChildren();
+      this.rendered = false;
+      this.changed();
+    }
+    [JOIN]() {
+      this[LEAVE]();
+      const handle = this.mounted;
+      if (!handle)
+        return;
+      for (let p = this.parentElement;p; p = p.parentElement) {
+        if (isGroup(p)) {
+          const off = p[GROUP].registerMember(String(this.opts.name ?? ""), handle);
+          this.leaveGroup = off;
+          return;
+        }
+      }
+    }
+    [LEAVE]() {
+      if (!this.leaveGroup)
+        return;
+      this.leaveGroup();
+      this.leaveGroup = null;
+      this[AIM]();
+    }
+    react(name) {
+      this.mounted?.react(name);
+    }
+    pulse(strength) {
+      this.mounted?.pulse(strength);
+    }
+    setVoice(source) {
+      this.mounted?.setVoice(source);
+    }
+    lookAt(target) {
+      if (isAvatar(this.lookTarget))
+        this.lookTarget[NOTIFY].delete(this);
+      this.lookTarget = target;
+      if (isAvatar(target) && this.isConnected)
+        target[NOTIFY].add(this);
+      this[AIM]();
+    }
+    get ring() {
+      return this.opts.ring;
+    }
+    set ring(v) {
+      this.apply({ ring: v ?? undefined });
+    }
+    get gaze() {
+      return this.opts.gaze;
+    }
+    set gaze(v) {
+      this.apply({ gaze: v ?? undefined });
+    }
+    get reaction() {
+      return this.opts.reaction;
+    }
+    set reaction(v) {
+      this.apply({ reaction: v ?? undefined });
+    }
+    get reactKey() {
+      return this.opts.reactKey;
+    }
+    set reactKey(v) {
+      this.apply({ reactKey: v });
+    }
+  }
+
+  class AvatarGroup extends HTMLElement {
+    static get observedAttributes() {
+      return ["speaker"];
+    }
+    [GROUP] = createGroup();
+    constructor() {
+      super();
+      upgradeProperties(this, ["speaker"]);
+    }
+    get speaker() {
+      return this.getAttribute("speaker");
+    }
+    set speaker(v) {
+      if (v === null)
+        this.removeAttribute("speaker");
+      else
+        this.setAttribute("speaker", v);
+    }
+    attributeChangedCallback(_attr, _old, value) {
+      this[GROUP].setSpeaker(value ?? undefined);
+    }
+    connectedCallback() {
+      for (const el of Array.from(this.querySelectorAll("*")))
+        if (isAvatar(el))
+          el[JOIN]();
+    }
+    disconnectedCallback() {
+      for (const el of Array.from(this.querySelectorAll("*")))
+        if (isAvatar(el))
+          el[LEAVE]();
+    }
+  }
+  return {
+    Avatar,
+    Group: AvatarGroup
+  };
+}
+
+// src/define.ts
+function defineAvatarElements(prefix = "awf") {
+  if (typeof customElements === "undefined" || typeof HTMLElement === "undefined")
+    return;
+  const avatar = `${prefix}-avatar`;
+  const group = `${prefix}-avatar-group`;
+  if (customElements.get(avatar) && customElements.get(group))
+    return;
+  const { Avatar, Group } = createElements();
+  if (!customElements.get(avatar))
+    customElements.define(avatar, Avatar);
+  if (!customElements.get(group))
+    customElements.define(group, Group);
+}
+
 // src/index.ts
 defineAvatarElements();
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awflow/avatar-element",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "sideEffects": [
@@ -19,7 +19,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@awflow/avatar": "^1.0.0"
+    "@awflow/avatar": "^1.1.0"
   },
   "description": "Deterministic SVG avatars from a name, as <awf-avatar> custom elements.",
   "license": "MIT",