animl 0.0.0-stage → 0.1.0

package/modules/layout/manifest.js

@@ -0,0 +1,76 @@
+const after = ["paint", "text", "assets", "components", "data", "bind", "machine"];
+var manifest_default = {
+  ...{
+    name: "layout",
+    summary: "Layout: row and column containers, hug, fill and fixed sizing, padding, gaps and animated reflow.",
+    after: [],
+    core: { entry: "core/index.ts", export: "layout", svg: "core/svg.ts", svgExport: "layoutSVG" },
+    web: [
+      { name: "layout", budget: 4096, over: "layout-svg" },
+      { name: "layout-svg", budget: 256 },
+      { name: "layout-reflow", budget: 1024, over: "layout" },
+      { name: "markup-layout", budget: 512, over: "markup", authoring: true }
+    ],
+    markupHook: {
+      slot: "layoutCompiler",
+      type: "layoutMarkup",
+      value: "layoutMarkup",
+      browserName: "layout"
+    },
+    adapters: {
+      "packages/core/src/modules/layout/index.ts": "core/index.ts",
+      "packages/core/src/modules/layout/svg.ts": "core/svg.ts",
+      "packages/markup/src/markup-layout.ts": "markup/index.ts",
+      "packages/web/src/layout.ts": "web/index.ts",
+      "packages/web/src/layout-svg.ts": "web/svg.ts",
+      "packages/web/src/layout-reflow.ts": "web/reflow.ts",
+      "packages/web/src/markup-layout.ts": "web/markup.ts"
+    },
+    exports: {
+      "core:./layout": "packages/core/src/modules/layout/index.ts",
+      "markup:./layout": "packages/markup/src/markup-layout.ts",
+      "web:./layout-reflow": "packages/web/src/layout-reflow.ts",
+      "web:./layout": "packages/web/src/layout.ts",
+      "web:./layout-svg": "packages/web/src/layout-svg.ts",
+      "web:./markup-layout": "packages/web/src/markup-layout.ts"
+    },
+    tests: [
+      "modules/layout/test/**/*.test.ts",
+      "packages/markup/test/corpus.test.ts",
+      "packages/markup/test/names.test.ts",
+      "packages/markup/test/compile.test.ts",
+      "packages/markup/test/decompile.test.ts"
+    ],
+    conformance: [
+      "layout-text-wrap",
+      "layout-bound-hug",
+      "layout-image-intrinsic",
+      "layout-optional-shapes",
+      "layout-baseline",
+      "layout-fill-bounds-difference",
+      "layout-containers",
+      "layout-flex-direction",
+      "layout-flex-justify",
+      "layout-flex-align-items",
+      "layout-self-alignment",
+      "layout-alignment",
+      "layout-spacing",
+      "layout-fixed-sizing",
+      "layout-hug-sizing",
+      "layout-fill-sizing",
+      "layout-size-bounds",
+      "layout-visibility",
+      "layout-participants",
+      "layout-intrinsic",
+      "layout-paint",
+      "data-bind-layout",
+      "layout-animated-reflow"
+    ],
+    docs: ["spec/SPEC.md", "modules/layout/SPEC.md"]
+  },
+  after
+};
+export {
+  after,
+  manifest_default as default
+};

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

@@ -0,0 +1,5 @@
+import type { ObjShape } from '../../../packages/core/src/registry.js';
+import type { NodeField } from '../../../packages/markup/src/names.js';
+export declare const layoutMarkup: {
+    fields(fields: NodeField[], shape: ObjShape): void;
+};

package/modules/layout/markup/index.js

@@ -0,0 +1,14 @@
+const layoutMarkup = {
+  fields(fields, shape) {
+    const layout = shape.p.layout;
+    if (layout?.k !== "obj") return;
+    for (const [key, shape2] of Object.entries(layout.p))
+      if (!fields.some((f) => f.attr === (shape2.markup ?? key)))
+        fields.push({ attr: shape2.markup ?? key, path: ["layout", key], shape: shape2 });
+    for (const f of fields)
+      if (["gap", "padding", "margin"].includes(f.attr)) f.shape = { k: "arr", of: { k: "num" } };
+  }
+};
+export {
+  layoutMarkup
+};

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

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

package/modules/layout/web/index.js

@@ -0,0 +1,4 @@
+import { layout } from "../core/index.js";
+import "./svg.js";
+import "../../../packages/web/src/index.js";
+customElements.get("anima-icon").registerModule(layout);

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

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

package/modules/layout/web/markup.js

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

package/modules/layout/web/reflow.d.ts

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

package/modules/layout/web/reflow.js

@@ -0,0 +1,6 @@
+import "./index.js";
+import { reflow, validateReflow } from "../core/reflow.js";
+const Icon = customElements.get("anima-icon");
+const layout = Icon.modules.get("layout");
+layout.reflow ??= reflow;
+layout.validateReflow ??= validateReflow;

package/modules/layout/web/svg.d.ts

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

package/modules/layout/web/svg.js

@@ -0,0 +1,3 @@
+import "../../../packages/web/src/index.js";
+import { layoutSVG } from "../core/svg.js";
+customElements.get("anima-icon").registerSVGBackend("layout", layoutSVG);

package/modules/lists/capabilities/components-list/registry.d.ts

@@ -0,0 +1,2 @@
+import type { ModuleEntry } from '../../../../packages/core/src/modules.js';
+export declare const entries: ModuleEntry[];

package/modules/lists/capabilities/components-list/registry.js

@@ -0,0 +1,26 @@
+const path = { k: "str", re: /^\$[\w:.-]+$/ };
+const entries = [
+  {
+    target: "repeat",
+    node: {},
+    required: ["id", "type", "component"],
+    shapes: {
+      list: path,
+      count: path,
+      component: { k: "alt", of: [{ k: "str" }, { k: "map", of: { k: "str" } }] },
+      dx: { k: "num" },
+      dy: { k: "num" },
+      size: {
+        k: "tup",
+        min: 2,
+        of: [
+          { k: "num", min: 0 },
+          { k: "num", min: 0 }
+        ]
+      }
+    }
+  }
+];
+export {
+  entries
+};

package/modules/lists/core/context.d.ts

@@ -0,0 +1,10 @@
+import type { Model } from '../../../packages/core/src/load.js';
+import type { Player } from '../../../packages/core/src/player.js';
+import type { Diags } from '../../../packages/core/src/diag.js';
+import type { DataModule } from '../../data/core/index.js';
+import type { ComponentModule } from '../../components/core/index.js';
+export declare const parents: WeakMap<Player, Player>;
+export declare const inherited: WeakSet<Model>;
+export declare function install(data: DataModule, components: ComponentModule): void;
+export declare function bindContext(data: DataModule, parent: Player, child: Player, value?: object, index?: number): void;
+export declare function error(d: Diags, code: string, at: string, message: string, hint: string): void;

package/modules/lists/core/context.js

@@ -0,0 +1,94 @@
+import { ptr } from "../../../packages/core/src/diag.js";
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+import { inputFor } from "../../data/core/storage.js";
+const pending = /* @__PURE__ */ new WeakMap();
+const parents = /* @__PURE__ */ new WeakMap();
+const inherited = /* @__PURE__ */ new WeakSet();
+function install(data, components) {
+  const previousKey = components.componentKey;
+  const previousLoad = components.loadComponent;
+  components.componentKey = (model, name) => {
+    const c = data.compiled.get(model);
+    return (previousKey?.(model, name) ?? name) + ":" + c?.document.instances?.[c.defaultName]?.model + ":" + [...c?.refs.keys() ?? []].filter((p) => p.startsWith("$parent")).map((p) => p + ":" + c.refs.get(p).input.type).join(",");
+  };
+  components.loadComponent = (p, _name, doc, shares, run, itemModel) => {
+    if (shares && doc.data && typeof doc.data !== "string") {
+      const c = data.compiled.get(p);
+      if (c)
+        doc = {
+          ...doc,
+          data: { ...doc.data, model: itemModel ?? c.document.instances[c.defaultName].model }
+        };
+    }
+    const load = (document) => {
+      pending.set(document, { parent: p, inherit: shares });
+      return run(document);
+    };
+    return previousLoad ? previousLoad(p, _name, doc, shares, load, itemModel) : load(doc);
+  };
+  data.prepareContext = (model, d) => {
+    if (!model.doc.requires?.includes("lists")) return;
+    const c = data.compiled.get(model);
+    if (!c) return;
+    const { parent, inherit } = pending.get(model.doc) ?? {};
+    for (const [name, def] of Object.entries(c.document.models))
+      for (const key of ["index", "parent"])
+        if (Object.hasOwn(def.properties, key))
+          error(
+            d,
+            "reserved-name",
+            ptr("/data/models", name) + "/properties/" + key,
+            key + " is a reserved context name",
+            "rename the property"
+          );
+    const add = (path, ref) => {
+      c.refs.set(path, ref);
+      model.inputs.set(path, ref.input);
+    };
+    if (parent) {
+      if (inherit) inherited.add(model);
+      const outer = data.compiled.get(parent);
+      for (const [path, ref] of outer?.refs ?? [])
+        if (path.startsWith("$") && !path.includes(":")) {
+          const name = "$parent." + path.slice(1);
+          add(name, {
+            ...ref,
+            readonly: true,
+            instance: "@" + ref.instance,
+            input: { ...ref.input, name, readonly: true }
+          });
+        }
+    }
+    const property = { type: "number" };
+    add("$index", {
+      instance: "@index",
+      keys: ["value"],
+      property,
+      readonly: true,
+      input: inputFor(property, 0, "$index", true)
+    });
+  };
+}
+function bindContext(data, parent, child, value, index) {
+  const a = data.dataState(parent), b = data.dataState(child);
+  if (!a || !b) return;
+  parents.set(child, parent);
+  for (const [key, object] of Object.entries(a.instances)) b.instances["@" + key] = object;
+  b.instances["@index"] = { value: index ?? Number(a.get("$index") ?? 0) };
+  if (value) b.instances[b.compiled.defaultName] = value;
+  const nested = child.nested;
+  for (const [id, grandchild] of nested?.players ?? []) {
+    const node = child.model.nodes.find((n) => n.id === id);
+    if (node) child.model.bindData?.(child, grandchild, node);
+  }
+}
+function error(d, code, at, message, hint) {
+  d.err(code, at, V && message, V && hint);
+}
+export {
+  bindContext,
+  error,
+  inherited,
+  install,
+  parents
+};

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

@@ -0,0 +1,35 @@
+import type { Module } from '../../../packages/core/src/modules.js';
+import type { Model } from '../../../packages/core/src/load.js';
+import type { Player } from '../../../packages/core/src/player.js';
+import { type DrawTree } from '../../../packages/core/src/draw.js';
+import { parents } from './context.js';
+interface Repeat {
+    node: number;
+    path: string;
+    count: boolean;
+    choices: Map<string, Model>;
+    of?: string;
+}
+interface Item {
+    key: object | number;
+    player: Player;
+    model: Model;
+    index: number;
+}
+interface Run {
+    spec: Repeat;
+    items: Item[];
+}
+export interface ListState {
+    runs: Run[];
+    warnings: import('../../../packages/core/src/diag.js').Diagnostic[];
+}
+export declare const listState: (p: Player) => ListState | undefined;
+export declare const dynamicTrees: WeakSet<DrawTree>;
+export declare const lists: Module & {
+    listState: typeof listState;
+    parents: typeof parents;
+    dynamicTrees: typeof dynamicTrees;
+    beforeDraw?: (player: Player) => void;
+};
+export {};