animl 0.0.0-stage → 0.1.1

package/modules/bind/core/expression.js

@@ -0,0 +1,165 @@
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+import { lerpColor, parseHex } from "../../../packages/core/src/color.js";
+import { compare } from "../../../packages/core/src/cond.js";
+const functions = /* @__PURE__ */ new Map();
+function registerFunction(name, arity, run) {
+  functions.set(name, { arity, run });
+}
+class BindError extends Error {
+  code;
+  at;
+  constructor(code, at, message) {
+    super(message);
+    this.code = code;
+    this.at = at;
+  }
+}
+function expression(source, types) {
+  let pos = 0, token = "", at = 0, depth = 0, count = 0;
+  const inputs = /* @__PURE__ */ new Set();
+  const fail = (code = "bind-syntax", message = V && "expected an expression", where = at) => {
+    throw new BindError(code, where, message || "");
+  };
+  const next = () => {
+    while (/\s/.test(source[pos] ?? "")) pos++;
+    at = pos;
+    const match = /^(?:\$[a-zA-Z][\w-]*(?::[a-zA-Z][\w-]*)?(?:\.[\w-]+)*|"(?:[^"\\]|\\.)*"|#[\da-fA-F]+|(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?|[a-z][\w-]*(?:\.[\w-]+)*|[=!<>]=|[<>+*/(),-])/.exec(
+      source.slice(pos)
+    );
+    token = match?.[0] ?? "";
+    if (token && ++count > 512) fail(void 0, V && "expression exceeds 512 tokens");
+    if (!token && pos < source.length)
+      fail(void 0, V && `unsupported token ${JSON.stringify(source[pos])}`);
+    pos += token.length;
+  };
+  const close = () => {
+    if (token !== ")") fail(void 0, V && "expected )");
+    next();
+  };
+  const node = (type, at2, evaluate2) => ({
+    type,
+    at: at2,
+    inputs,
+    evaluate: evaluate2
+  });
+  const numeric = (e) => {
+    if (e.type === "string" || e.type === "color")
+      fail("bind-type", V && "expected a number or bool", e.at);
+  };
+  const parse = (minimum = 0) => {
+    if (++depth > 64) fail(void 0, V && "expression nesting exceeds 64");
+    const start = at, word = token;
+    next();
+    let left;
+    if (word === "(") {
+      left = parse();
+      close();
+    } else if (word === "not") {
+      const e = parse(3);
+      if (e.type !== "bool") fail("bind-type", V && "expected bool", start);
+      left = node("bool", start, (s) => !e.evaluate(s));
+    } else if (word === "-" || word === "+") {
+      const e = parse(6);
+      numeric(e);
+      left = node("number", start, (s) => (word === "-" ? -1 : 1) * +evaluate(e, s));
+    } else if (/^\d/.test(word)) {
+      const value = +word;
+      if (!isFinite(value)) fail(void 0, V && "number must be finite", start);
+      left = node("number", start, () => value);
+    } else if (word[0] === "#") {
+      const value = parseHex(word);
+      if (!value) fail(void 0, V && "expected #rgb, #rrggbb or #rrggbbaa", start);
+      left = node("color", start, () => value);
+    } else if (word[0] === '"') {
+      const value = JSON.parse(word);
+      left = node("string", start, () => value);
+    } else if (/^[a-z$]/.test(word)) {
+      if (token === "(") {
+        const fn = functions.get(word);
+        const arity = fn?.arity ?? { min: 2, max: 2, clamp: 3, mix: 3, floor: 1, mod: 2, contains: 2, lower: 1 }[word];
+        if (fn?.run.enabled?.() === false) fail();
+        if (arity === void 0) fail(void 0, V && "unknown function", start);
+        next();
+        const args = token === ")" ? [] : [parse()];
+        while (token === ",") {
+          next();
+          args.push(parse());
+        }
+        close();
+        if (args.length !== arity) fail(void 0, V && "wrong argument count", start);
+        const [a, b, c] = args;
+        const color = word === "mix" && a.type === "color" && b.type === "color";
+        const string = word === "contains" || word === "lower";
+        (color ? [c] : args).forEach((e) => {
+          if (string) {
+            if (e.type !== "string") fail("bind-type", V && "expected string", e.at);
+          } else numeric(e);
+        });
+        left = node(
+          string ? word === "lower" ? "string" : "bool" : color ? "color" : "number",
+          start,
+          (s) => {
+            if (string) {
+              const text = a.evaluate(s);
+              return word === "lower" ? text.toLowerCase() : text.includes(b.evaluate(s));
+            }
+            if (color)
+              return lerpColor(
+                a.evaluate(s),
+                b.evaluate(s),
+                +evaluate(c, s)
+              );
+            if (fn) return fn.run(...args.map((a2) => +evaluate(a2, s)));
+            const x = +evaluate(a, s);
+            if (word === "floor") return Math.floor(x);
+            const y = +evaluate(b, s);
+            if (word === "mod") return x - y * Math.floor(x / y);
+            return word === "min" ? Math.min(x, y) : word === "max" ? Math.max(x, y) : word === "clamp" ? Math.min(Math.max(x, y), +evaluate(c, s)) : x + (y - x) * +evaluate(c, s);
+          }
+        );
+      } else {
+        const type = types.get(word);
+        if (!type) fail("unknown-input", V && `unknown input ${word}`, start);
+        if (!["number", "bool", "color", "string"].includes(type))
+          fail("bind-type", V && "triggers are not binding values", start);
+        inputs.add(word);
+        left = node(type, start, (s) => s.get(word));
+      }
+    } else fail(void 0, V && "expected a value", start);
+    while (true) {
+      const op = token, precedence = op === "or" ? 1 : op === "and" ? 2 : /^[=!<>]/.test(op) ? 4 : op === "+" || op === "-" ? 5 : op === "*" || op === "/" ? 6 : 0;
+      if (precedence <= minimum) break;
+      next();
+      const a = left, b = parse(precedence);
+      if (precedence <= 2 ? a.type !== "bool" || b.type !== "bool" : precedence === 4 ? a.type !== b.type || !["==", "!="].includes(op) && a.type !== "number" : false)
+        fail("bind-type", V && "operator and operand types do not match", a.at);
+      if (precedence > 4) [a, b].forEach(numeric);
+      left = node(precedence <= 4 ? "bool" : "number", a.at, (s) => {
+        const x = evaluate(a, s);
+        if (precedence <= 2) return op === "and" ? !!x && !!b.evaluate(s) : !!x || !!b.evaluate(s);
+        const y = evaluate(b, s);
+        if (precedence === 4)
+          return a.type === "color" ? compare("" + x, "" + y, op) : compare(x, y, op);
+        const n = +x, m = +y;
+        return op === "+" ? n + m : op === "-" ? n - m : op === "*" ? n * m : n / m;
+      });
+    }
+    depth--;
+    return left;
+  };
+  next();
+  const result = parse();
+  if (token) fail(void 0, V && `unsupported token ${JSON.stringify(token)}`);
+  return result;
+}
+function evaluate(e, scope) {
+  const v = e.evaluate(scope);
+  return typeof v === "number" && !isFinite(v) ? 0 : v;
+}
+export {
+  BindError,
+  evaluate,
+  expression,
+  functions,
+  registerFunction
+};

package/modules/bind/core/index.d.ts

@@ -0,0 +1,7 @@
+import type { Module } from '../../../packages/core/src/modules.js';
+import { expression, registerFunction } from './expression.js';
+export { BindError, expression, evaluate, type Expression, type InputScope, registerFunction, functions, } from './expression.js';
+export declare const bind: Module & {
+    registerFunction: typeof registerFunction;
+    parse: typeof expression;
+};

package/modules/bind/core/index.js

@@ -0,0 +1,143 @@
+import { entries } from "../capabilities/data-bind-listener-actions/registry.js";
+import { after } from "../manifest.js";
+import { resolveAddress } from "../../../packages/core/src/load.js";
+import { ptr } from "../../../packages/core/src/diag.js";
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+import { BindError, expression, evaluate, registerFunction } from "./expression.js";
+import {
+  BindError as BindError2,
+  expression as expression2,
+  evaluate as evaluate2,
+  registerFunction as registerFunction2,
+  functions
+} from "./expression.js";
+let resolve = resolveAddress;
+const bind = {
+  registerFunction,
+  parse: expression,
+  name: "bind",
+  after,
+  init(_modules, shared) {
+    resolve = shared.resolveAddress;
+    return { ...bind, init: void 0 };
+  },
+  expression(source, types, expected, pointer, diag, read) {
+    try {
+      const e = expression(source, types);
+      if (e.type !== expected && !(expected === "number" && e.type === "bool"))
+        throw new BindError("bind-type", e.at, V ? `expected ${expected}, got ${e.type}` : "");
+      for (const name of e.inputs) {
+        read?.(name);
+        const i = diag.list.findIndex(
+          (d) => d.code === "unused-input" && d.pointer === ptr("/inputs", name)
+        );
+        if (i >= 0) diag.list.splice(i, 1);
+      }
+      const run = (scope) => expected === "number" ? Number(evaluate(e, scope)) : evaluate(e, scope);
+      run.toString = () => source;
+      return run;
+    } catch (err) {
+      if (!(err instanceof BindError)) throw err;
+      diag.err(
+        err.code,
+        pointer,
+        V && `${err.message} at character ${err.at + 1}`,
+        V && (err.code === "bind-syntax" ? `check token ${JSON.stringify(source.slice(err.at).match(/^\S+/)?.[0] ?? "end of expression")}; use values, arithmetic, comparisons, and/or/not or registered calls` : "use declared non-trigger inputs and an expression matching the target type")
+      );
+    }
+  },
+  entries: [
+    ...entries,
+    {
+      target: "document",
+      shapes: { bind: { k: "map", of: { k: "str" } } },
+      elements: {
+        bind: {
+          shape: {
+            k: "obj",
+            p: { target: { k: "str" }, value: { k: "str" } },
+            req: ["target", "value"],
+            feature: "bind"
+          }
+        }
+      }
+    }
+  ],
+  load(model, raw, diag) {
+    if (!raw.bind && !raw.requires?.includes("motion")) return;
+    const bindings = Object.entries(raw.bind ?? {}).filter(
+      ([key, value]) => key !== "$comment" && typeof value === "string" && !(raw.requires?.includes("data") && (value.includes("$") || value.includes(".properties.")))
+    );
+    const types = new Map([...model.inputs].map(([name, input]) => [name, input.type]));
+    if (raw.requires?.includes("motion"))
+      for (const layer of model.layers)
+        for (const state of layer.states) {
+          const source = raw.machine.layers[layer.name].states[state.name].time;
+          if (source === void 0) continue;
+          const pointer = ptr(ptr("/machine/layers", layer.name) + "/states", state.name) + "/time";
+          const run = this.expression(source, types, "number", pointer, diag);
+          if (run) (model.timeBindings ??= /* @__PURE__ */ new Map()).set(state, run);
+        }
+    const dependencies = new Map(
+      bindings.map(([a, src]) => [a, src.match(/[a-z][a-zA-Z0-9-]*(?:\.[a-zA-Z0-9-]+)+/g) ?? []])
+    );
+    const cyclic = (a) => {
+      const pending = [...dependencies.get(a) ?? []], seen = /* @__PURE__ */ new Set();
+      while (pending.length) {
+        const at = pending.pop();
+        if (at === a) return true;
+        if (seen.has(at)) continue;
+        seen.add(at);
+        for (const next of dependencies.get(at) ?? []) pending.push(next);
+      }
+      return false;
+    };
+    for (const [address, source] of bindings) {
+      const pointer = ptr("/bind", address);
+      try {
+        if (cyclic(address))
+          throw new BindError("bind-cycle", 0, V ? "cyclic binding reference" : "");
+        const addr = resolve(address, model.nodes, model.ids);
+        if (Array.isArray(addr)) {
+          diag.err(
+            addr[0],
+            pointer,
+            addr[1],
+            addr[2] || V && "choose an animatable node property"
+          );
+          continue;
+        }
+        if (addr.prop.feature && !raw.requires?.includes(addr.prop.feature)) {
+          diag.err(
+            "undeclared-feature",
+            pointer,
+            V && "binding target requires a module",
+            V && `add "${addr.prop.feature}" to "requires"`
+          );
+          continue;
+        }
+        const run = this.expression(source, types, addr.prop.type, pointer, diag);
+        if (run) {
+          model.addrs.set(address, addr);
+          (model.bindings ??= /* @__PURE__ */ new Map()).set(address, run);
+        }
+      } catch (err) {
+        if (!(err instanceof BindError)) throw err;
+        diag.err(
+          err.code,
+          pointer,
+          V && `${err.message} at character ${err.at + 1}`,
+          V && "use input names, numbers, hex colours, arithmetic, min/max/clamp/mix"
+        );
+      }
+    }
+  }
+};
+export {
+  BindError2 as BindError,
+  bind,
+  evaluate2 as evaluate,
+  expression2 as expression,
+  functions,
+  registerFunction2 as registerFunction
+};

package/modules/bind/manifest.d.ts

@@ -0,0 +1,48 @@
+export declare const after: string[];
+declare const _default: {
+    name: string;
+    summary: string;
+    after: string[];
+    core: {
+        entry: string;
+        export: string;
+    };
+    web: ({
+        name: string;
+        buildOrder: number;
+        sizeOrder: number;
+        budget: number;
+        over?: undefined;
+        authoring?: undefined;
+    } | {
+        name: string;
+        buildOrder: number;
+        sizeOrder: number;
+        budget: number;
+        over: string;
+        authoring: boolean;
+    })[];
+    adapters: {
+        'packages/core/src/modules/bind/index.ts': string;
+        'packages/core/src/modules/bind/expression.ts': string;
+        'packages/web/src/bind.ts': string;
+        'packages/web/src/markup-bind.ts': string;
+        'packages/markup/src/bind.ts': string;
+    };
+    exports: {
+        'core:./bind': string;
+        'web:./bind': string;
+        'web:./markup-bind': string;
+        'markup:./bind': string;
+    };
+    markupHook: {
+        browserName: string;
+        slot: string;
+        type: string;
+        value: string;
+    };
+    tests: string[];
+    conformance: string[];
+    docs: string[];
+};
+export default _default;

package/modules/bind/manifest.js

@@ -0,0 +1,61 @@
+const after = ["components"];
+var manifest_default = {
+  name: "bind",
+  summary: "Bindings: drive any animatable or bindable address from input expressions (math, comparisons, contains, lower\u2026).",
+  after,
+  core: {
+    entry: "core/index.ts",
+    export: "bind"
+  },
+  web: [
+    {
+      name: "bind",
+      buildOrder: 6,
+      sizeOrder: 8,
+      budget: 2048
+    },
+    {
+      name: "markup-bind",
+      buildOrder: 9,
+      sizeOrder: 5,
+      budget: 192,
+      over: "index",
+      authoring: true
+    }
+  ],
+  adapters: {
+    "packages/core/src/modules/bind/index.ts": "core/index.ts",
+    "packages/core/src/modules/bind/expression.ts": "core/expression.ts",
+    "packages/web/src/bind.ts": "web/index.ts",
+    "packages/web/src/markup-bind.ts": "web/markup.ts",
+    "packages/markup/src/bind.ts": "markup/index.ts"
+  },
+  exports: {
+    "core:./bind": "packages/core/src/modules/bind/index.ts",
+    "web:./bind": "packages/web/src/bind.ts",
+    "web:./markup-bind": "packages/web/src/markup-bind.ts",
+    "markup:./bind": "packages/markup/src/bind.ts"
+  },
+  markupHook: {
+    browserName: "bind",
+    slot: "bindCompiler",
+    type: "bindMarkup",
+    value: "bindMarkup"
+  },
+  tests: [
+    "modules/bind/test/**/*.test.ts",
+    "packages/markup/test/compile.test.ts",
+    "packages/markup/test/corpus.test.ts",
+    "packages/markup/test/decompile.test.ts",
+    "packages/markup/test/format.test.ts",
+    "packages/markup/test/invalid.test.ts",
+    "packages/markup/test/names.test.ts",
+    "modules/components/test/markup/components.test.ts"
+  ],
+  conformance: ["bind-", "data-bind-listener-actions"],
+  docs: ["spec/SPEC.md", "spec/ANIML.md"]
+};
+export {
+  after,
+  manifest_default as default
+};

package/modules/bind/markup/index.d.ts

@@ -0,0 +1,6 @@
+import type { Compiler } from '../../../packages/markup/src/compile.js';
+import type { Element, Attr } from '../../../packages/markup/src/xml.js';
+export declare const bindMarkup: {
+    build(a: Map<string, Attr>): string;
+    rootChild(compiler: Compiler, c: Element, o: Record<string, unknown>, p: string): boolean;
+};

package/modules/bind/markup/index.js

@@ -0,0 +1,21 @@
+import { ptr } from "animl";
+const bindMarkup = {
+  build(a) {
+    return a.get("value")?.value ?? "";
+  },
+  rootChild(compiler, c, o, p) {
+    if (c.name === "bind") {
+      const target = c.attrs.find((a) => a.name === "target");
+      const value = c.attrs.find((a) => a.name === "value");
+      const map = compiler.container(o, "bind", p, c.at);
+      const key = compiler.address(target?.value.trim() ?? "");
+      compiler.addNamed(map, key, c, p + "/bind", target?.valueAt ?? c.at);
+      compiler.map.set(ptr(p + "/bind", key), value?.valueAt ?? c.at);
+      return true;
+    }
+    return false;
+  }
+};
+export {
+  bindMarkup
+};

package/modules/bind/web/index.d.ts

@@ -0,0 +1 @@
+import '../../../packages/web/src/index.js';

package/modules/bind/web/index.js

@@ -0,0 +1,3 @@
+import { bind } from "animl/bind";
+import "../../../packages/web/src/index.js";
+customElements.get("anima-icon").registerModule(bind);

package/modules/bind/web/markup.d.ts

@@ -0,0 +1 @@
+import '../../../packages/web/src/index.js';

package/modules/bind/web/markup.js

@@ -0,0 +1,3 @@
+import { bindMarkup } from "animl/markup/bind";
+import "../../../packages/web/src/index.js";
+customElements.get("anima-icon").registerMarkup("bind", bindMarkup);

package/modules/canvas/web/index.d.ts

@@ -0,0 +1,12 @@
+import '../../text/web/canvas.js';
+import '../../../packages/web/src/index.js';
+import { CanvasRenderer } from './renderer.js';
+declare module '../../../packages/web/src/index.ts' {
+    namespace AnimaIcon {
+        let canvasBox: (icon: AnimaIcon, bounds: [number, number, number, number]) => DOMRect | undefined;
+    }
+    interface AnimaIcon {
+        readonly devicePixelRatioUsed: number | undefined;
+    }
+}
+export { CanvasRenderer };

package/modules/canvas/web/index.js

@@ -0,0 +1,19 @@
+import "../../text/web/canvas.js";
+import "../../../packages/web/src/index.js";
+import { CanvasRenderer } from "./renderer.js";
+const Icon = customElements.get("anima-icon");
+const renderers = /* @__PURE__ */ new WeakMap();
+Icon.renderers.canvas = (icon) => {
+  const renderer = new CanvasRenderer(icon);
+  renderers.set(icon, renderer);
+  return renderer;
+};
+Icon.canvasBox = (icon, bounds) => icon.getAttribute("renderer") === "canvas" ? renderers.get(icon)?.nodeBox(bounds) : void 0;
+Object.defineProperty(Icon.prototype, "devicePixelRatioUsed", {
+  get() {
+    return this.getAttribute("renderer") === "canvas" ? renderers.get(this)?.pixelRatio : void 0;
+  }
+});
+export {
+  CanvasRenderer
+};

package/modules/canvas/web/renderer.d.ts

@@ -0,0 +1,18 @@
+import type { AnimaIcon, IconRenderer } from '../../../packages/web/src/index.js';
+import type { DrawFrame } from 'animl';
+export declare class CanvasRenderer implements IconRenderer {
+    #private;
+    readonly canvas: HTMLCanvasElement;
+    draws: number;
+    get ready(): Promise<unknown[]>;
+    constructor(icon: AnimaIcon);
+    connect(): void;
+    disconnect(): void;
+    destroy(): void;
+    get pixelRatio(): number;
+    layout(): void;
+    point(x: number, y: number): DOMPoint;
+    /** Map a resolved world node box through this backend's current viewport. */
+    nodeBox([x, y, w, h]: [number, number, number, number]): DOMRect;
+    draw(f: DrawFrame, force: boolean): void;
+}