arrmatura 5.2.0 → 6.2.1

package/core/Component.ts

@@ -1,424 +0,0 @@
-/* eslint-disable no-console */
-import { applyValue, methodName, stringifyState } from './utils';
-import { scalarParse } from '../lib';
-import { createListeners } from 'support/createListeners';
-
-/**
- * Runtime Component class.
- */
-export class Component<T extends INode = INode> implements IComponent, IScope {
-  readonly $impl: IComponentImplementation;
-
-  $children?: Map<Uid, IComponent>;
-
-  readonly $scope: IScope;
-  readonly #parent?: IComponent;
-  readonly arrmatura: IArrmatura;
-  #isInited: boolean = false;
-  #isDone: boolean = false;
-  #listeners?: Listeners<void>;
-  #defered?: Array<ComponentProcedure> = [];
-  #weak?: Map<any, any>;
-  #refs?: Hash<Component>;
-  #propFnMap?: Hash<Procedure>;
-
-  constructor(readonly _node: INode, _parent?: IComponent, scope?: IScope) {
-    this.$scope = scope || this;
-    this.#parent = _parent;
-    this.arrmatura = _parent?.arrmatura || (this as unknown as IArrmatura);
-    this.$impl = this.createImplementation(this.getInitialState());
-
-    if (this.refId) {
-      this.$scope.addComponentReference(this.refId, this);
-    }
-  }
-
-  get node(): T {
-    return this._node as T;
-  }
-
-  get displayName(): string {
-    return '🔹';
-  }
-
-  get uid() {
-    return this.node.uid;
-  }
-
-  createImplementation(initials: Hash): IComponentImplementation {
-    return { ...initials };
-  }
-
-  // --- State
-
-  getInitialState(): Hash {
-    return this.node.resolveInitialProps(this);
-  }
-
-  up(Δ: Delta | Promise<any>, force: boolean = false): null | Promise<any> {
-    if (!Δ || this.#isDone) {
-      return null;
-    }
-    if (Δ.then && Δ.catch) {
-      return this.upAsync(Δ as Promise<any>);
-    }
-    let prom: Promise<any>[] | null = null;
-    const changes = new Map<string, unknown>();
-    Object.entries(Δ).forEach(([k, v]) => {
-      if (v && v.then && v.catch) {
-        const pv = v as Promise<any>;
-        (prom || (prom = [])).push(this.upAsync(pv, k));
-      } else if (k && typeof v !== 'undefined' && v !== this.$impl[k]) {
-        changes.set(k, v);
-      }
-    });
-
-    if (changes.size || force) {
-      this.stateChanged(changes);
-      this.recontent();
-      if (this.refId) {
-        this.notify();
-      }
-    }
-    if (prom) {
-      return Promise.all(prom).then((arr: object[]) => arr.reduce((a, b) => ({ ...a, ...b }), {}));
-    }
-    return null;
-  }
-
-  upAsync(promise: Promise<any>, key?: string): Promise<any> {
-    const racer = this.raceCondition('set:' + key);
-    if (key && key[0] !== '*') {
-      const akey = key.replace('Promise', '');
-      promise.then((val) => racer(() => this.up({ [akey]: val })));
-    } else {
-      promise.then((r: Delta) => racer(() => this.up(r)));
-    }
-    return promise;
-  }
-
-  stateChanged(changes: Map<string, unknown>) {
-    if (this.$impl.stateChanged) {
-      this.$impl.stateChanged(changes);
-    } else {
-      changes.forEach((v, k) => {
-        const setter = this.$impl[methodName(k, 'set')];
-        if (typeof setter === 'function') {
-          setter.call(this.$impl, v);
-        } else {
-          this.$impl[k] = v;
-        }
-      });
-    }
-  }
-
-  get(propId: string): unknown {
-    const map = this.#propFnMap || (this.#propFnMap = {});
-    let fn = map[propId];
-    if (fn) {
-      return fn();
-    }
-
-    const impl = this.$impl;
-    const instant = impl[propId];
-    if (instant && typeof instant === 'function') {
-      const bound = instant.bind(impl);
-      fn = () => bound;
-    } else {
-      const [pk, ...path] = propId.split('.');
-      const gettr = impl[methodName(pk, 'get')];
-
-      const fn0 = typeof gettr === 'function' ? () => gettr.call(impl) : () => impl[pk];
-
-      fn = !path.length ? fn0 : () => path.reduce((r, p) => (r && p in r ? r[p] : undefined), fn0());
-    }
-
-    map[propId] = fn;
-
-    return fn();
-  }
-
-  getFromScope(propId: string): unknown {
-    return this.$scope.get(propId);
-  }
-
-  // --- Left Arrow.
-
-  notify() {
-    this.#listeners?.notify();
-  }
-
-  subscribe(target: Component, fn: (src: Component) => Delta): ComponentSubsription {
-    const listeners = this.#listeners || (this.#listeners = createListeners());
-    return {
-      payload: fn(this),
-      cancel: listeners.add(() => {
-        try {
-          const r = fn(this);
-          // this.log('subscribe', r);
-          target.up(r);
-        } catch (ex) {
-          this.logError('Notify ', ex);
-        }
-      }),
-    };
-  }
-
-  connect(key: string, applicator: (x: unknown) => unknown): undefined | ComponentSubsription {
-    const [refId, propId = '*'] = key.split('.');
-    const ref = this.$scope.getByRef(refId) as Component;
-    if (!ref) {
-      this.logError('Connect: No such ref: ' + refId);
-      return;
-    }
-    return ref.subscribe(this, (c: Component) => applyValue(propId === '*' ? c.$impl : c.get(propId), applicator));
-  }
-
-  // --- Right Arrow.
-
-  emit(key: string, data: Delta): null | Promise<any> {
-    if (!key || !key.includes('.')) {
-      this.log('update:' + key, data, this.$impl);
-      return this.up(key ? { [key]: data } : data);
-    }
-
-    const [refId, target] = key.split('.');
-    try {
-      const ref = this.getByRef(refId);
-      if (!ref) {
-        throw new Error('No such reference: ' + refId);
-      }
-
-      const propId = methodName(target, 'on');
-      const impl = ref.$impl;
-
-      const method = impl[propId];
-      if (!method || !(typeof method === 'function')) {
-        throw new Error('No such method ' + refId + '.' + propId);
-      }
-
-      const result = method.call(impl, data, impl, ref);
-
-      this.log(refId + ':' + propId, result, data, impl);
-      if (result) {
-        const ret = ref.up(result);
-        return ret;
-      }
-    } catch (ex) {
-      this.logError('emit ' + key + ':', ex);
-    }
-    return null;
-  }
-
-  // --- Life-cycle hooks.
-
-  init(initials: Delta) {
-    if (this.#isDone || this.#isInited) {
-      return;
-    }
-    this.#isInited = true;
-    const all: Array<Promise<any>> = [];
-    const initializers = this.node.initializers;
-    if (initializers?.length) {
-      initializers
-        .map((f) => f(this))
-        .forEach((r) => {
-          if (!r) return;
-          const { payload, cancel } = r;
-          if (cancel) {
-            this.defer(cancel);
-          }
-          if (payload && payload.then) {
-            all.push(payload as unknown as Promise<any>);
-          } else {
-            Object.assign(initials, payload);
-          }
-        });
-    }
-
-    if (all.length) {
-      Promise.all(all).then((args) => {
-        this.up(
-          args.reduce((r, e) => Object.assign(r, e), initials),
-          true
-        );
-        if (this.$impl.init) {
-          const d = this.$impl.init(this);
-          if (d) {
-            this.up(d);
-          }
-        }
-      });
-    } else {
-      this.up(initials, true);
-      if (this.$impl.init) {
-        const d = this.$impl.init(this);
-        if (d) {
-          this.up(d);
-        }
-      }
-    }
-    return this;
-  }
-
-  done() {
-    if (this.#isDone) {
-      return;
-    }
-    this.#isDone = true;
-
-    this.$impl.done?.(this);
-
-    const parent = this.#parent;
-    this.#parent = undefined;
-
-    this.$children?.forEach((c) => c.done());
-
-    parent?.$children?.delete(this.uid);
-
-    this.#defered?.forEach((f) => f(this));
-    this.#defered = undefined;
-
-    this.$impl.$ = null;
-  }
-
-  // -- Contents --------------------------------------------------------
-
-  get content(): ComponentContent | undefined {
-    return this.node.content;
-  }
-
-  get recontentScope(): IScope {
-    return this.$scope;
-  }
-
-  setupChildren(children: ComponentChildren) {
-    this.$children = children;
-
-    children.forEach((e) => e.settleAsChild());
-  }
-
-  settleAsChild() {
-    if (!this.#isInited) {
-      this.init(this.node.resolveInitialProps(this));
-    } else {
-      this.up(this.node.resolveProps(this), true);
-    }
-  }
-
-  recontent() {
-    const scope = this.recontentScope;
-    const nodes = this.content;
-
-    this.arrmatura.requestReflow();
-
-    this.$children?.forEach((e, uid) => {
-      if (!nodes?.get(uid)) {
-        e.done();
-      }
-    });
-
-    const children = new Map<Uid, IComponent>();
-
-    nodes?.forEach((node, uid) => {
-      const e = this.$children?.get(uid) || node.createComponent(this, scope);
-      children.set(e.uid, e);
-    });
-
-    this.setupChildren(children);
-  }
-
-  // --- Referencing.
-
-  get refId() {
-    return this._node.refId;
-  }
-
-  get refs(): Hash<Component> {
-    return this.#refs || (this.#refs = {});
-  }
-
-  getByRef(refId: string): Component | null {
-    if (refId === 'this') {
-      return this;
-    }
-    const local = this.refs[refId] || null;
-    if (local) {
-      return local as Component;
-    }
-    const ref = this === this.$scope ? null : this.$scope.getByRef(refId);
-    return ref as Component;
-  }
-
-  addComponentReference(refId: string, c: Component) {
-    this.refs[refId] = c;
-  }
-
-  // --- Pipes ----------------------------------------------------------------
-
-  pipe(key: string) {
-    return this.arrmatura.pipe(key);
-  }
-
-  applyPipe(key: string, value: unknown) {
-    try {
-      const [id, ...args] = key.split(':');
-      const fn = this.pipe(id);
-      return fn.apply(this, [
-        value,
-        ...args.map((a) => (a[0] === '@' ? this.getFromScope(a.slice(1)) : scalarParse(a))),
-      ]);
-    } catch (ex) {
-      this.logError('ERROR: pipe ' + key, ex);
-      return value;
-    }
-  }
-
-  // --- Routines -------------------------
-
-  raceCondition(key: string) {
-    const COUNTERS = this.#weak || (this.#weak = new Map());
-    let counter = 1 + (COUNTERS.get(key) || 0);
-    COUNTERS.set(key, counter);
-    return (fn: Procedure) => {
-      if (counter === COUNTERS.get(key)) {
-        counter = 0;
-        return fn();
-      }
-    };
-  }
-
-  defer(fn: ComponentProcedure) {
-    if (fn && typeof fn === 'function') {
-      (this.#defered || (this.#defered = [])).push(fn);
-    }
-  }
-
-  log(val: any, ...args: unknown[]) {
-    console.log('' + this.displayName + ':' + this.uid, val, ...args);
-    return val;
-  }
-
-  logError(...args: unknown[]) {
-    console.error('⛔ ERROR: ' + this.displayName + ':' + this.uid, ...args);
-  }
-
-  res(key: string) {
-    return this.arrmatura.res(key);
-  }
-
-  stringify(tab = '') {
-    const { uid, displayName: tag = uid, $impl: impl, $children: children } = this;
-    if (tag === '#text') {
-      return `${tab}` + impl.text;
-    }
-    const ssubs: string = children?.size
-      ? [...children.values()].map((c) => (c as Component).stringify(`  ${tab}`)).join('\n')
-      : '';
-    return `${tab}<${tag}${stringifyState(impl)}` + (!ssubs ? '/>' : `>\n${ssubs}\n${tab}</${tag}>`);
-  }
-
-  toString() {
-    return this.stringify();
-  }
-}

package/core/cnodes/composition.ts

@@ -1,100 +0,0 @@
-import { CNode } from '../CNode';
-import { compileNodes } from '../compileNode';
-import { Component } from '../Component';
-import { ComponentDefinition, getByTag } from '../register';
-
-const compileSlots = (tag: string, nodes?: XmlNode[]) => {
-  const slots =
-    nodes?.reduce((groups, e) => {
-      const isSlot = e.tag.startsWith(tag + ':');
-      const gId = isSlot ? e.tag.split(':')[1] : 'default';
-      groups[gId] = (groups[gId] || []).concat(isSlot ? e.nodes || [] : e);
-      return groups;
-    }, {} as Hash<XmlNode[]>) || {};
-
-  return Object.entries(slots).reduce((groups, [gId, nodes]) => {
-    groups[gId] = compileNodes(nodes);
-    return groups;
-  }, {} as Hash<ComponentContent>);
-};
-
-export class SlotComponent extends Component {
-  get displayName(): string {
-    return '🔸';
-  }
-
-  get compositeScope(): CompositeComponent {
-    return this.$scope as CompositeComponent;
-  }
-
-  get content(): ComponentContent {
-    return this.compositeScope.slotContent((this.node as CSlotNode).id);
-  }
-
-  get recontentScope(): IScope {
-    return this.compositeScope.$scope;
-  }
-}
-
-export class CSlotNode extends CNode<SlotComponent> {
-  id?: string;
-
-  constructor(x: XmlNode) {
-    super();
-    this.id = x.attrs?.id as string;
-  }
-
-  get ComponentConstructor() {
-    return SlotComponent;
-  }
-}
-
-export class CompositeComponent extends Component<CCompositeNode> {
-  get displayName(): string {
-    return '💠' + this.node.definition.tag;
-  }
-
-  get content() {
-    return this.node.definition.content;
-  }
-
-  get recontentScope(): Component {
-    return this;
-  }
-
-  slotContent(slotId?: string): ComponentContent {
-    return this.node.slotContent[slotId || 'default'];
-  }
-
-  createImplementation(initials: Hash) {
-    return new this.node.definition.Ctor(initials, this);
-  }
-}
-
-export class CCompositeNode extends CNode<CompositeComponent> {
-  Ctor: any;
-  slotContent: Hash<ComponentContent>;
-  definition: ComponentDefinition;
-
-  constructor({ tag, attrs, nodes }: XmlNode) {
-    super();
-    this.definition = getByTag(tag);
-    this.compileAttributes(attrs);
-    this.slotContent = compileSlots(tag, nodes);
-  }
-
-  get ComponentConstructor() {
-    return CompositeComponent;
-  }
-}
-
-export class CFragmentNode extends CNode<Component> {
-  constructor({ nodes }: XmlNode) {
-    super();
-    this.content = compileNodes(nodes);
-  }
-
-  get ComponentConstructor() {
-    return Component;
-  }
-}

package/core/cnodes/conditionals.ts

@@ -1,52 +0,0 @@
-import { CNode } from '../CNode';
-import { compileExpression } from '../expression';
-import { compileNodes } from '../compileNode';
-import { CompositeComponent } from './composition';
-import { Component } from '../Component';
-
-class IfComponent extends Component<CIfNode> {
-  get content() {
-    return !!this.$impl.condition ? this.node.then : this.node.else;
-  }
-}
-
-export class CIfNode extends CNode<IfComponent> {
-  else?: ComponentContent;
-  then?: ComponentContent;
-  constructor(x: XmlNode, expr: string) {
-    super();
-    this.compileCondition(expr);
-    this.compileBranches(x);
-  }
-  get ComponentConstructor() {
-    return IfComponent;
-  }
-  compileBranches(x: XmlNode) {
-    const { nodes } = x;
-
-    let $then: XmlNode[] | undefined = [x];
-    if (nodes?.length) {
-      const ifElse = nodes.find((e) => e.tag === 'ui:else');
-      const ifThen = nodes.find((e) => e.tag === 'ui:then');
-      if (ifElse) {
-        this.else = compileNodes(ifElse.nodes);
-        $then = ifThen ? ifThen.nodes : [Object.assign(x, { nodes: nodes.filter((e) => e !== ifElse) })];
-      } else if (ifThen) {
-        $then = ifThen.nodes;
-      }
-    }
-    this.then = compileNodes($then);
-  }
-  compileCondition(expr: string): void {
-    if (expr[0] === '<' && expr[1] === '-') {
-      this.addPropertyConnector(expr.slice(2), (condition: unknown) => ({ condition }));
-    } else if (expr.slice(0, 5) === 'slot(') {
-      const slotId = expr.slice(5, -1);
-      // DO NOT place inside iterations.
-      this.addPropertyResolver((c: IComponent) => (c.$scope as CompositeComponent).slotContent?.(slotId), 'condition');
-    } else {
-      const resolver = compileExpression(expr[0] === '{' ? expr : `{${expr}}`);
-      this.addPropertyResolver((c) => !!resolver(c), 'condition');
-    }
-  }
-}

package/core/cnodes/elementary.ts

@@ -1,44 +0,0 @@
-import { CNode } from '../CNode';
-import { compileNodes } from '../compileNode';
-import { Component } from '../Component';
-
-export class ElementComponent extends Component<CElementNode> {
-  get displayName(): string {
-    return this.node.tag;
-  }
-
-  createImplementation(initials: Hash): IComponentImplementation {
-    return this.arrmatura.platform.createElement(this.node.tag, initials, this);
-  }
-}
-
-export class TextElementComponent extends Component<CTextElementNode> {
-  createImplementation(initials: Hash) {
-    return this.arrmatura.platform.createTextElement(initials, this);
-  }
-}
-
-export class CElementNode extends CNode<ElementComponent> {
-  constructor(x: XmlNode) {
-    super();
-    this.tag = x.tag;
-    this.content = compileNodes(x.nodes);
-    this.compileAttributes(x.attrs);
-  }
-
-  get ComponentConstructor() {
-    return ElementComponent;
-  }
-}
-
-export class CTextElementNode extends CNode<TextElementComponent> {
-  constructor(x: XmlNode) {
-    super();
-    this.tag = x.tag;
-    this.compileAttributes(x.attrs);
-  }
-
-  get ComponentConstructor() {
-    return TextElementComponent;
-  }
-}

package/core/cnodes/iterations.ts

@@ -1,92 +0,0 @@
-import { CNode } from '../CNode';
-import { compileNodes } from '../compileNode';
-import { Component } from '../Component';
-
-class ForComponent extends Component<CForNode> {
-  pkHash: Hash<Datum> = {};
-
-  get displayName(): string {
-    return '🔹';
-  }
-
-  get content() {
-    const each: any = this.$impl.each;
-    const itemNode = this.node.itemNode;
-    const nodes: ComponentContent = new Map();
-    this.pkHash = {};
-    if (each?.length) {
-      if (!each.forEach) {
-        throw new Error('[ui:for] Items has no forEach() ' + each);
-      }
-      each.forEach((datum: Datum) => {
-        const id = datum.id;
-        if (id == null) {
-          console.error('ERROR: empty item id: ', datum);
-          return;
-        }
-        const pk = String(id);
-        if (this.pkHash[pk]) {
-          console.error('ERROR: duplicate item id: ' + pk, datum);
-          return;
-        }
-        this.pkHash[pk] = datum;
-        const inode = itemNode.cloneWithDatum(datum).addPropertyResolver(() => this.pkHash[pk], itemNode.itemName);
-        nodes.set(inode.uid, inode);
-      });
-    }
-    return nodes;
-  }
-}
-
-export class CForNode extends CNode<ForComponent> {
-  itemNode: CItemNode;
-  constructor(x: XmlNode, [itemName, prep, expr = prep]: string[]) {
-    super();
-    this.itemNode = new CItemNode(itemName, compileNodes([x]));
-    this.compileAttribute('each', '{:<'.includes(expr[0]) ? expr : `{${expr}}`);
-  }
-
-  get ComponentConstructor() {
-    return ForComponent;
-  }
-}
-
-class ItemComponent extends Component<CItemNode> {
-  get displayName(): string {
-    return '🔹';
-  }
-  get recontentScope(): Component {
-    return this;
-  }
-
-  emit(key: string, data: Delta): void {
-    return this.$scope.emit(key, data);
-  }
-
-  get(propId: string) {
-    const iName: string = this.node.itemName;
-    const value = propId.startsWith(iName + '.') || propId === iName ? super.get(propId) : this.$scope.get(propId);
-    // this.log(propId, value);
-    return value;
-  }
-}
-
-export class CItemNode extends CNode<ItemComponent> {
-  itemName: string;
-  constructor(itemName: string, content?: ComponentContent) {
-    super();
-    this.itemName = itemName;
-    this.content = content;
-  }
-
-  cloneWithDatum(datum: Datum) {
-    const uid = this.uid + '#' + datum.id;
-    return Object.assign(new CItemNode(this.itemName, this.content), {
-      uid,
-    });
-  }
-
-  get ComponentConstructor() {
-    return ItemComponent;
-  }
-}