arrmatura 4.2.2 → 5.0.2

package/core/cnodes/elementary.ts

@@ -0,0 +1,45 @@
+import { Platform } from '../Platform';
+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 Platform.instance.createElement(this.node.tag, initials, this);
+  }
+}
+
+export class TextElementComponent extends Component<CTextElementNode> {
+  createImplementation(initials: Hash) {
+    return Platform.instance.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

@@ -0,0 +1,94 @@
+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 {
+      state: { each },
+    } = this;
+    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;
+  }
+}

package/core/cnodes/routing.ts

@@ -0,0 +1,25 @@
+import { CNode } from '../CNode';
+import { compileNode } from '../compileNode';
+import { Component } from '../Component';
+
+export class DynamicTagComponent extends Component<CDynamicTagNode> {
+  get content(): ComponentContent | undefined {
+    const { tag } = this.state;
+    const uid = this.node.uid + ':' + tag;
+    return new Map([[uid, Object.assign(compileNode(Object.assign(this.node.xml, { tag })), { uid })]]);
+  }
+}
+
+export class CDynamicTagNode extends CNode<DynamicTagComponent> {
+  xml: XmlNode & { tag: string };
+
+  constructor(xml: XmlNode, expr: string) {
+    super();
+    this.compileAttribute('tag', expr);
+    this.xml = xml;
+  }
+
+  get ComponentConstructor() {
+    return DynamicTagComponent;
+  }
+}

package/core/compileNode.ts

@@ -0,0 +1,39 @@
+import { CCompositeNode, CFragmentNode, CSlotNode } from './cnodes/composition';
+import { CDynamicTagNode } from './cnodes/routing';
+import { CElementNode, CTextElementNode } from './cnodes/elementary';
+import { CForNode } from './cnodes/iterations';
+import { CIfNode } from './cnodes/conditionals';
+
+export const compileNode = (x: XmlNode): INode => {
+  const { tag, attrs } = x;
+  const each = attrs?.['ui:for'];
+  if (each) {
+    delete attrs['ui:for'];
+    return new CForNode(x, String(each).trim().split(' '));
+  }
+  const when = attrs?.['ui:if'];
+  if (when) {
+    delete attrs['ui:if'];
+    return new CIfNode(x, String(when));
+  }
+  if (tag === 'ui:tag') {
+    const expr = attrs?.['tag'] || tag;
+    delete attrs?.['tag'];
+    return new CDynamicTagNode(x, String(expr));
+  }
+  if (tag === 'ui:slot') {
+    return new CSlotNode(x);
+  }
+  if (tag === 'ui:fragment') {
+    return new CFragmentNode(x);
+  }
+  if (tag === '#text') {
+    return new CTextElementNode(x);
+  }
+  if (tag[0].match(/[A-Z]/)) return new CCompositeNode(x);
+
+  return new CElementNode(x);
+};
+
+export const compileNodes = (x?: XmlNode[] | null): ComponentContent =>
+  new Map<Uid, INode>(x?.map(compileNode).map((c) => [c.uid, c]) || []);

package/core/expression.ts

@@ -0,0 +1,73 @@
+import { scalarParse } from 'scalar';
+
+const RE_SINGLE_PLACEHOLDER = /^\{([^}]+)\}$/;
+
+const RE_PLACEHOLDER = /\{([^}]+)\}/g;
+
+const withNoPipes = (_: unknown, v: unknown) => v;
+
+const splitExpression = (v: Expression) => {
+  return v.split('|').map((s) => s.trim());
+};
+
+export function withPipes(pipes: string[]) {
+  return !pipes.length
+    ? withNoPipes
+    : (c: IComponent, initialValue: unknown) => pipes.reduce((r, pk) => c.applyPipe(pk, r), initialValue);
+}
+
+export function compilePipeExpression(v: Expression) {
+  const [key, ...pipes] = splitExpression(v);
+  return { key, pipec: withPipes(pipes) };
+}
+
+function stringInterpolation(v: string, fnx: Array<(c: IComponent) => unknown> = []) {
+  const pattern = v.trim().replace(RE_PLACEHOLDER, (_: string, expr: string) => {
+    fnx.push(placeholder(expr));
+    return '{{' + (fnx.length - 1) + '}}';
+  });
+  return !fnx.length
+    ? (_: IComponent) => pattern
+    : (c: IComponent) =>
+        pattern
+          .replace(/\{\{(\d+)\}\}/g, (_: string, idx: string) => {
+            const r = fnx[Number(idx)](c);
+            return !r && r !== 0 ? '' : String(r);
+          })
+          .replace(/\s+/g, ' ');
+}
+
+function resourceExpression(expr: string) {
+  const { key, pipec } = compilePipeExpression(expr);
+  const intrpltn = stringInterpolation(key);
+  return !pipec.length ? (c: IComponent) => c.res(intrpltn(c)) : (c: IComponent) => pipec(c, c.res(intrpltn(c)));
+}
+
+function placeholder(expr: string) {
+  const { key, pipec } = compilePipeExpression(expr);
+  const fn =
+    key[0] === ':'
+      ? (
+          (k) => (c: IComponent) =>
+            c.res(k)
+        )(key.slice(1))
+      : (c: IComponent) => c.getFromScope(key);
+  return !pipec.length ? fn : (c: IComponent) => pipec(c, fn(c));
+}
+
+export function compileExpression(v: unknown) {
+  if (typeof v !== 'string') {
+    return () => v;
+  }
+  if (v[0] === ':') {
+    return resourceExpression(v.slice(1).trim());
+  }
+  if (!v.includes('{')) {
+    const vv = scalarParse(v);
+    return () => vv;
+  }
+  if (v.match(RE_SINGLE_PLACEHOLDER)) {
+    return placeholder(v.slice(1, -1).trim());
+  }
+  return stringInterpolation(v);
+}

package/core/index.ts

@@ -0,0 +1,2 @@
+export * from './Arrmatura';
+export * from './Platform';

package/core/register.ts

@@ -0,0 +1,43 @@
+import { compileNodes } from './compileNode';
+import { xmlParse } from 'xml';
+import { fnName } from './utils';
+
+export class ComponentDefinition {
+  tag: string;
+  template?: string;
+  Ctor: any;
+  $templateContent?: ComponentContent;
+
+  constructor({ tag, template, Ctor }: ComponentDefinitionInfo) {
+    this.tag = tag;
+    this.template = template;
+    this.Ctor = Ctor || function () {};
+  }
+
+  get content() {
+    return this.$templateContent || (this.$templateContent = compileNodes(xmlParse(this.template)));
+  }
+}
+
+export const REGISTRY = new Map<string, ComponentDefinition>();
+
+const notFound = (tag: string): ComponentDefinition =>
+  new ComponentDefinition({ tag, template: '<b>??' + tag + '??</b>' });
+
+const setInfo = (ctr: ComponentDefinitionInfo) => REGISTRY.set(ctr.tag, new ComponentDefinition(ctr));
+
+const registerType = (ctr: string | ComponentDefinitionInfo | Constructor) => {
+  if (typeof ctr === 'string') {
+    ctr.replace(/<component\s+id="(.+)">([\s\S]*?)<\/component>/gm, (_, tag, template) => {
+      setInfo({ tag, template: template.trim() });
+      return '';
+    });
+  } else {
+    setInfo(typeof ctr === 'function' ? { Ctor: ctr, tag: ctr.name || fnName(ctr) } : ctr);
+  }
+};
+
+export const registerTypes = (types?: Array<string | ComponentDefinitionInfo | Constructor>) =>
+  types?.forEach(registerType);
+
+export const getByTag = (tag: string) => REGISTRY.get(tag) || notFound(tag);

package/core/utils.ts

@@ -0,0 +1,25 @@
+import { nextId } from 'nextId';
+import { identity } from 'noop';
+import { attributesToString } from 'xml';
+
+export const applyValue = (value: any, fn = identity) => (value?.then ? value.then(fn) : fn(value));
+
+export const fnName = (ctor: object) => (/^function\s+([\w$]+)\s*\(/.exec(ctor.toString()) || [])[1] || nextId('C');
+
+export const methodName = (x: unknown, pre = '') => {
+  const s = `${x || ''}`;
+  return pre + s[0].toUpperCase() + s.slice(1);
+};
+
+export const stringifyState = (attrs?: object | Hash) => {
+  if (!attrs) {
+    return '';
+  }
+  const r: string[] = [];
+  Object.entries(attrs).forEach(([k, v]) => {
+    if (v) {
+      r.push(' ' + k + '="' + attributesToString(v) + '"');
+    }
+  });
+  return r.length ? r.join('') : '';
+};

package/core-web/WebPlatform.ts

@@ -0,0 +1,25 @@
+import { DomElement, DomTextElement } from './elements';
+import { reflow } from './reflow';
+
+export class WebPlatform implements IPlatform {
+  rootElement: HTMLElement;
+
+  constructor(root: HTMLElement | string = 'root') {
+    if (typeof root === 'string') {
+      root = document.getElementById(root) || window.document.body;
+    }
+    this.rootElement = root || window.document.body;
+  }
+
+  createTextElement(initials: Hash, _: IComponent): IComponentImplementation {
+    return new DomTextElement(initials);
+  }
+
+  createElement(tag: string, initials: Hash, owner: IComponent): IComponentImplementation {
+    return new DomElement(tag, initials, owner);
+  }
+
+  reflow(root: IComponent) {
+    reflow(root, this.rootElement);
+  }
+}

package/core-web/attributes.ts

@@ -0,0 +1,197 @@
+import { DomNode, IElement } from './type';
+
+const camelize = (key: string, sep = '_', jn = ' ') =>
+  ('' + key)
+    .split(sep)
+    .map((s, i) => (i ? s[0].toUpperCase() + s.slice(1) : s))
+    .join(jn);
+
+const setListener = ($: IElement, key: string, e: DomNode, v: unknown) => {
+  const fnKey = key.split(':')[0];
+  if (!v) {
+    setAttribute($, key, null);
+  } else {
+    setAttribute($, key, (ev: Event) => {
+      $.$attributes[fnKey]({ ...e.$dataset }, ev);
+      return false;
+    });
+  }
+};
+export function setAttribute($: IElement, key: string, value: null | string | Function) {
+  if (value != null) {
+    if (typeof value === 'function') {
+      const fnValue = (...args: unknown[]) => {
+        if (!$.isDone) {
+          value(...args);
+        }
+      };
+      if (!$.listeners) {
+        $.listeners = new Map();
+      }
+      if (!$.listeners.has(key)) {
+        const [akey, ekey = akey] = key.split(':');
+        $.element.addEventListener(ekey, fnValue, false);
+        $.listeners.set(key, fnValue);
+      }
+    } else {
+      $.element.setAttribute(key, value);
+    }
+  } else {
+    if ($.listeners?.has(key)) {
+      const [akey, ekey = akey] = key.split(':');
+      $.element.removeEventListener(ekey, $.listeners.get(key));
+      $.listeners.delete(key);
+    } else {
+      $.element.removeAttribute(key);
+    }
+  }
+}
+
+// DOM
+export const ATTR_SETTERS: Hash<($: IElement, e: DomNode, v: unknown) => void> = {
+  disabled: (_, e, v) => (e.disabled = v ? true : null),
+  class: (_, e, v) => {
+    e.className = String(v || '');
+  },
+  selected: (_, e, v) => (e.selected = v ? true : null),
+  value: (_, e, v) => (e.value = v == null ? '' : v),
+  checked: (_, e, v) => (e.checked = !!v),
+
+  init: ($, e, v) => {
+    const fn = v as Function;
+    $.init = () => fn(e, $);
+  },
+  data: function (_, e, u) {
+    const v = u as Hash;
+    if (v && e.$dataset) {
+      Object.keys(e.$dataset).forEach((k) => {
+        if (v[k] == null) {
+          e.dataset[camelize(k, '-', '')] = null;
+        }
+      });
+      e.$dataset = { ...e.$dataset, ...v };
+    } else {
+      e.$dataset = v ? { ...v } : e.$dataset || {};
+    }
+    if (v) {
+      Object.keys(v).forEach((k) => {
+        e.dataset[camelize(k, '-', '')] = v[k];
+      });
+    }
+  },
+
+  click: ($, e, v) => setListener($, 'click:click', e, v),
+  ['bubble-click']: ($, e, v) => setListener($, 'bubble-click:click', e, v),
+  blur: ($, e, v) => setListener($, 'blur:blur', e, v),
+  dblclick: ($, e, v) => setListener($, 'dblclick:dblclick', e, v),
+  scroll: ($, e, v) => setListener($, 'scroll:scroll', e, v),
+
+  touchstart: function ($, e, v) {
+    const h = !v
+      ? null
+      : (ev: TouchEvent & { pageX: number; pageY: number }) => {
+          $.$attributes.touchstart(
+            {
+              ...e.$dataset,
+              x: ev.pageX || ev.changedTouches[0].screenX,
+              y: ev.pageY || ev.changedTouches[0].screenY,
+            },
+            ev
+          );
+          return false;
+        };
+    setAttribute($, 'touchstart:touchstart', h);
+    setAttribute($, 'touchstart:mousedown', h);
+  },
+  touch: function ($, e, v) {
+    const data = { ...e.$dataset };
+    const hs = !v
+      ? null
+      : (ev: TouchEvent & { pageX: number; pageY: number }) => {
+          data.active = true;
+          data.x = ev.pageX || ev.changedTouches[0].screenX;
+          data.y = ev.pageY || ev.changedTouches[0].screenY;
+          return false;
+        };
+    setAttribute($, 'touch:touchstart', hs);
+    setAttribute($, 'touch:mousedown', hs);
+    const h = !v
+      ? () => null
+      : (stop: boolean = false) =>
+          (ev: TouchEvent & { pageX: number; pageY: number }) => {
+            if (data.active) {
+              data.active = !stop;
+
+              data.xx = ev.pageX || ev.changedTouches[0].screenX;
+              data.yy = ev.pageY || ev.changedTouches[0].screenY;
+              data.dx = data.xx - data.x;
+              data.dy = data.yy - data.y;
+              $.$attributes.touch(data, ev);
+            }
+
+            return false;
+          };
+    setAttribute($, 'touch:touchcancel', h(true));
+    setAttribute($, 'touch:touchend', h(true));
+    setAttribute($, 'touch:mouseup', h(true));
+    setAttribute($, 'touch:touchmove', h(false));
+    setAttribute($, 'touch:mousemove', h(false));
+  },
+  keypress: function ($, e, v) {
+    setAttribute(
+      $,
+      'keypress:keyup',
+      !v
+        ? null
+        : (ev: KeyboardEvent) => {
+            if (ev.keyCode !== 13 && ev.keyCode !== 27) {
+              const fn = $.$attributes.keypress;
+              fn && fn({ value: e.value, ...e.$dataset }, ev);
+              setTimeout(() => e.focus(), 0);
+            }
+            return false;
+          }
+    );
+  },
+  enter: function ($, e, v) {
+    setAttribute(
+      $,
+      'enter:keyup',
+      !v
+        ? null
+        : (ev: KeyboardEvent) => {
+            if (ev.keyCode === 13) {
+              $.$attributes.enter({ value: e.value, ...e.$dataset }, ev);
+            }
+            if (ev.keyCode === 13 || ev.keyCode === 27) {
+              e.blur();
+            }
+            return false;
+          }
+    );
+  },
+  change: function ($, e, v) {
+    setAttribute(
+      $,
+      'change:change',
+      !v
+        ? null
+        : (ev: Event) => {
+            $.$attributes.change({ value: e.value, ...e.$dataset }, ev);
+            return false;
+          }
+    );
+  },
+  toggle: function ($, e, v) {
+    setAttribute(
+      $,
+      'toggle:change',
+      !v
+        ? null
+        : (ev: Event) => {
+            $.$attributes.toggle({ value: e.checked, ...e.$dataset }, ev);
+            return false;
+          }
+    );
+  },
+};

package/core-web/elements.ts

@@ -0,0 +1,64 @@
+import { ATTR_SETTERS, setAttribute } from './attributes';
+import { DomNode, IElement } from './type';
+
+export class DomElement implements IComponentImplementation, IElement {
+  $: IComponent;
+  $attributes?: Hash;
+  element: DomNode;
+  [key: string]: unknown;
+  isDone: boolean = false;
+  listeners: any;
+  init?: () => any;
+
+  constructor(tag: string, _: Hash, $: IComponent) {
+    this.$ = $;
+    this.element = document.createElement(tag) as DomNode;
+    this.element.impl = this;
+  }
+
+  done() {
+    this.element?.parentElement?.removeChild(this.element);
+    this.$attributes = undefined;
+  }
+
+  stateChanged(changes: Map<string, any>) {
+    const attrs: Hash = this.$attributes || (this.$attributes = {});
+    const e = this.element;
+    // this.$.log('changes', changes)
+    changes.forEach((value, key) => {
+      if (value !== attrs[key]) {
+        const setter = ATTR_SETTERS[key];
+        if (setter) {
+          setter(this, e, value);
+        } else if (key.slice(0, 5) === 'data-') {
+          ATTR_SETTERS.data(this, e, {
+            ...e.$dataset,
+            [key.slice(5)]: value,
+          });
+        } else {
+          setAttribute(this, key, value);
+        }
+      }
+      attrs[key] = value;
+    });
+  }
+}
+
+export class DomTextElement implements IComponentImplementation {
+  element: Text;
+  [key: string]: unknown;
+
+  constructor(attrs: Hash) {
+    this.element = document.createTextNode(String(attrs.text || ''));
+  }
+
+  done() {
+    this.element.parentElement?.removeChild(this.element);
+  }
+
+  stateChanged(changes: Map<string, any>) {
+    if (changes.has('text')) {
+      this.element.textContent = changes.get('text');
+    }
+  }
+}

package/core-web/index.ts

@@ -0,0 +1,19 @@
+import { CArrmaturaNode, Platform } from '../core';
+import { WebPlatform } from './WebPlatform';
+
+export type ArrmaturaOptionsForWeb = ArrmaturaOptions & {
+  rootElement?: HTMLElement;
+};
+
+export function arrmatura(
+  template: string,
+  { rootElement, pipes, functions = pipes, types, resources }: ArrmaturaOptionsForWeb
+) {
+  Platform.instance = new WebPlatform(rootElement);
+
+  const node = new CArrmaturaNode(template, { functions, types, resources });
+
+  node.launch();
+}
+
+Object.defineProperty(window, 'arrmatura', { value: arrmatura });

package/core-web/reflow.ts

@@ -0,0 +1,30 @@
+import { DomNode } from './type';
+
+function appendElt(e: DomNode, p: DomNode | HTMLElement, cursor?: DomNode): DomNode {
+  const before = cursor ? cursor.nextSibling : p.firstChild;
+  if (!before) {
+    if (p !== e.parentElement) {
+      p.appendChild(e);
+    }
+  } else if (e !== before) {
+    p.insertBefore(e, before);
+  }
+  return e;
+}
+
+export function reflow($: IComponent, parent: DomNode | HTMLElement, cursor?: DomNode) {
+  if ($.children) {
+    for (let p of $.children.values()) {
+      const e = p.impl.element as DomNode;
+      if (e) {
+        if (e) {
+          reflow(p, e);
+          cursor = appendElt(e, parent, cursor);
+        }
+      } else {
+        cursor = reflow(p, parent, cursor);
+      }
+    }
+  }
+  return cursor;
+}