arrmatura 4.2.2 → 5.0.2

package/core/CNode.ts

@@ -0,0 +1,112 @@
+import { nextId } from 'nextId';
+import { identity } from 'noop';
+import { Component } from './Component';
+import { compileExpression, compilePipeExpression } from './expression';
+
+/**
+ * Design-time Component class.
+ */
+export abstract class CNode<T extends Component = Component> implements INode<T> {
+  content?: ComponentContent;
+  uid: Uid = nextId('N');
+  refId?: string;
+  private propertyResolvers: Array<PropertyResolver> = [];
+  private initialState?: Hash;
+  initializers: Array<(c: IComponent) => undefined | ComponentSubsription> = [];
+  tag: any;
+
+  abstract get ComponentConstructor(): new (node: INode<T>, parent?: IComponent, scope?: IScope) => T;
+
+  createComponent(parent?: IComponent, scope?: Component): T {
+    return new this.ComponentConstructor(this as INode<T>, parent, scope);
+  }
+
+  addInitialState(values: Hash) {
+    this.initialState = Object.entries(values).reduce((acc, [key, val]) => {
+      acc[key] = val;
+      return acc;
+    }, this.initialState || {});
+    return this;
+  }
+
+  addPropertyResolver(getter: PropertyGetter, propKey: string) {
+    this.propertyResolvers.push((c: IComponent, delta: Delta) => {
+      delta[propKey] = getter(c);
+      return delta;
+    });
+    return this;
+  }
+
+  addPropertiesResolver(getter: PropertyGetter) {
+    this.propertyResolvers.push((c: IComponent, delta: Delta) => {
+      const value = getter(c);
+      if (value && typeof value === 'object') {
+        Object.entries(value).forEach(([key, val]) => {
+          delta[key] = val;
+        });
+      }
+      return delta;
+    });
+    return this;
+  }
+
+  addPropertyConnector(expr: Expression, getter: (x: unknown) => unknown) {
+    const { key, pipec } = compilePipeExpression(expr);
+    this.initializers.push((c: IComponent) => c.connect(key, (rr: unknown) => getter(pipec(c, rr))));
+  }
+
+  addEmitter(expr: Expression, k: PropertyKey) {
+    const { key, pipec } = compilePipeExpression(expr);
+    this.initializers.push((c) => ({
+      payload: { [k]: (data: unknown) => c.scope?.emit(key, pipec(c, data) as Delta) },
+    }));
+  }
+
+  resolveInitialProps(c: IComponent) {
+    return this.resolveProps(c, { ...this.initialState });
+  }
+
+  resolveProps(c: IComponent, props: Delta = {}) {
+    return this.propertyResolvers.reduce((delta, resolver) => resolver(c, delta), props);
+  }
+
+  compileAttribute(k: string, v: unknown) {
+    if (k === 'id') {
+      this.addInitialState({ [k]: v });
+    } else if (k.startsWith('ui:')) {
+      const sv = String(v);
+      if (k === 'ui:ref') {
+        this.refId = sv;
+      } else if (k === 'ui:props') {
+        if (sv[0] === '<' && sv[1] === '-') {
+          this.addPropertyConnector(sv.slice(2), identity);
+        } else {
+          this.addPropertiesResolver(compileExpression(v));
+        }
+      }
+    } else {
+      if (typeof v !== 'string') {
+        this.addInitialState({ [k]: v });
+      } else {
+        if (v[0] === '<' && v[1] === '-') {
+          this.addPropertyConnector(v.slice(2), (rr) => ({ [k]: rr }));
+        } else if (v[0] === '-' && v[1] === '>') {
+          this.addEmitter(v.slice(2), k);
+        } else {
+          if (!v.includes('{') && v[0] !== ':') {
+            this.addInitialState({ [k]: v });
+          } else {
+            this.addPropertyResolver(compileExpression(v), k);
+          }
+        }
+      }
+    }
+    return this;
+  }
+
+  compileAttributes(attrs?: Hash) {
+    if (attrs) {
+      Object.entries(attrs).forEach((keyValue) => this.compileAttribute(...keyValue));
+    }
+  }
+}

package/core/Component.ts

@@ -0,0 +1,431 @@
+/* eslint-disable no-console */
+import { applyValue, methodName, stringifyState } from './utils';
+import { scalarParse } from 'scalar';
+import { createListeners } from 'createListeners';
+
+/**
+ * Runtime Component class.
+ */
+export class Component<T extends INode = INode> implements IComponent, IScope {
+  impl: IComponentImplementation;
+  element?: any;
+
+  readonly scope: IScope;
+  children?: Map<Uid, IComponent>;
+
+  protected state: any = {};
+
+  private _parent?: IComponent;
+  #isInited: boolean = false;
+  #isDone: boolean = false;
+  // #notifying: 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.impl = this.createImplementation(this.getInitialState());
+
+    if (this.refId) {
+      this.scope.addComponentReference(this.refId, this);
+    }
+  }
+
+  get parent(): IComponent {
+    return this._parent || this;
+  }
+
+  get node(): T {
+    return this._node as T;
+  }
+
+  get displayName(): string {
+    return '🔹';
+  }
+
+  get arrmatura(): IArrmatura {
+    return this.parent.arrmatura;
+  }
+
+  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): void {
+    if (this.#isDone) {
+      return;
+    }
+    if (Δ.then && Δ.catch) {
+      this.upAsync(Δ as Promise<any>);
+      return;
+    }
+
+    const changes = new Map<string, unknown>();
+    Object.entries(Δ).forEach(([k, v]) => {
+      const pv = v as Promise<any>;
+      if (v && pv.then && pv.catch) {
+        this.upAsync(pv, k);
+      } else if (k && typeof v !== 'undefined' && v !== this.state[k]) {
+        changes.set(k, v);
+        this.state[k] = v;
+      }
+    });
+
+    if (changes.size || force) {
+      this.stateChanged(changes);
+      this.recontent();
+      if (this.refId) {
+        this.notify();
+      }
+    }
+  }
+
+  upAsync(promise: Promise<any>, key?: string) {
+    const racer = this.raceCondition('set:' + key);
+    const up = (r: Delta) => racer(() => this.up(r));
+    if (key && key !== '*') {
+      const akey = key.replace('Promise', '');
+      promise.then((val) => up({ [akey]: val }));
+    } else {
+      promise.then(up);
+    }
+    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): void {
+    if (!key || !key.includes('.')) {
+      this.up(key ? { [key]: data } : data);
+      this.log('update:' + key, data, this.impl);
+      return;
+    }
+
+    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) {
+        ref.up(result);
+      }
+    } catch (ex) {
+      this.logError('emit ' + key + ':', ex);
+    }
+  }
+
+  // --- 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.impl, [
+        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;
+        fn();
+      }
+    };
+  }
+
+  defer(fn: ComponentProcedure) {
+    if (fn && typeof fn === 'function') {
+      (this.#defered || (this.#defered = [])).push(fn);
+    }
+  }
+
+  log(...args: unknown[]) {
+    console.log('' + this.displayName + ':' + this.uid, ...args);
+  }
+
+  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, state, children } = this;
+    if (tag === '#text') {
+      return `${tab}` + state.text;
+    }
+    const ssubs: string = children?.size
+      ? [...children.values()].map((c) => (c as Component).stringify(`  ${tab}`)).join('\n')
+      : '';
+    return `${tab}<${tag}${stringifyState(state)}` + (!ssubs ? '/>' : `>\n${ssubs}\n${tab}</${tag}>`);
+  }
+
+  toString() {
+    return this.stringify();
+  }
+}

package/core/Platform.ts

@@ -0,0 +1,3 @@
+export class Platform {
+  static instance: IPlatform;
+}

package/core/cnodes/composition.ts

@@ -0,0 +1,100 @@
+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

@@ -0,0 +1,51 @@
+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.state.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 {
+      this.addPropertyResolver(compileExpression(expr[0] === '{' ? expr : `{${expr}}`), 'condition');
+    }
+  }
+}