arrmatura 5.2.0 → 6.2.1

package/core/cnodes/routing.ts

@@ -1,25 +0,0 @@
-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.$impl.tag;
-    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

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

@@ -1,73 +0,0 @@
-import { scalarParse } from '../lib';
-
-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

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

package/core/register.ts

@@ -1,43 +0,0 @@
-import { compileNodes } from './compileNode';
-import { xmlParse } from '../lib';
-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

@@ -1,23 +0,0 @@
-import { nextId, identity, attributesToString } from '../lib';
-
-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 && k[0] !== '$') {
-      r.push(' ' + k + '="' + attributesToString(v) + '"');
-    }
-  });
-  return r.length ? r.join('') : '';
-};

package/core-web/WebPlatform.ts

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

@@ -1,218 +0,0 @@
-import type { 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, fn: unknown) => {
-  const fnKey = key.split(':')[0];
-  if (!fn) {
-    setAttribute($, key, null);
-  } else {
-    setAttribute($, key, (domEvent: Event) => {
-      // indirect reference. could be changed along the time.
-      $[fnKey]({ ...e.$dataset }, domEvent);
-      return false;
-    });
-  }
-};
-export function setAttribute($: IElement, key: string, value: null | string | ((ev: any) => any)) {
-  if (value != null) {
-    if (typeof value === 'function') {
-      if (!$.$listeners) {
-        $.$listeners = new Map();
-      }
-      if (!$.$listeners.has(key)) {
-        const [akey, ekey = akey] = key.split(':');
-        $.$element.addEventListener(ekey, value, false);
-        $.$listeners.set(key, value);
-      }
-    } 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: () => {
-    // do nothing
-  },
-  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', e, v),
-  click2: ($, e, v) => setListener($, 'click2:click', e, v),
-  ['bubble-click']: ($, e, v) => setListener($, 'bubble-click:click', e, v),
-  blur: ($, e, v) => setListener($, 'blur', e, v),
-  focus: ($, e, v) => setListener($, 'focus', e, v),
-  dblclick: ($, e, v) => setListener($, 'dblclick', e, v),
-  scroll: ($, e, v) =>
-    setAttribute(
-      $,
-      'scroll',
-      !v
-        ? null
-        : (ev) => {
-            $.scroll({ value: e.scrollTop }, ev);
-          }
-    ),
-  scrolledDown: ($, element, v) =>
-    setAttribute(
-      $,
-      'scrolledDown:scroll',
-      !v
-        ? null
-        : (ev) => {
-            const gap = $.scrolledDownGap || 10;
-            const offset = element.clientHeight + element.scrollTop;
-            const isDown = Math.abs(element.scrollHeight - offset) < gap;
-            if (isDown && offset > ($._maxScrolledDownOffset || 0)) {
-              $._maxScrolledDownOffset = offset;
-              $.scrolledDown({ offset }, ev);
-            }
-          }
-    ),
-
-  touchstart: function ($, e, v) {
-    const h = !v
-      ? null
-      : (ev: TouchEvent & { pageX: number; pageY: number }) => {
-          $.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;
-              $.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) {
-              $.keypress?.({ 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) {
-              $.enter({ value: e.value, ...e.$dataset }, ev);
-            }
-            if (ev.keyCode === 13 || ev.keyCode === 27) {
-              e.blur();
-            }
-            return false;
-          }
-    );
-  },
-  change: function ($, e, v) {
-    setAttribute(
-      $,
-      'change',
-      !v
-        ? null
-        : (ev: Event) => {
-            $.change({ value: e.value, ...e.$dataset }, ev);
-            return false;
-          }
-    );
-  },
-  toggle: function ($, e, v) {
-    setAttribute(
-      $,
-      'toggle:change',
-      !v
-        ? null
-        : (ev: Event) => {
-            $.toggle({ value: e.checked, ...e.$dataset }, ev);
-            return false;
-          }
-    );
-  },
-};

package/core-web/elements.ts

@@ -1,81 +0,0 @@
-import { decodeXmlEntities } from '../lib';
-import { ATTR_SETTERS, setAttribute } from './attributes';
-import type { DomNode, IElement } from './type';
-
-export class DomElement implements IComponentImplementation, IElement {
-  $: IComponent;
-  $element: DomNode;
-  $listeners: any;
-  $changes: Map<string, any> = new Map();
-  init?: () => any;
-  [key: string]: unknown;
-
-  constructor(tag: string, _: Hash, $: IComponent) {
-    this.$ = $;
-    this.$element = document.createElement(tag) as DomNode;
-    this.$element.impl = this;
-  }
-
-  done() {
-    this.$element?.parentElement?.removeChild(this.$element);
-  }
-
-  stateChanged(changes: Map<string, any>) {
-    const attrs = this;
-    changes.forEach((value, key) => {
-      if (key[0] === '$') return;
-      if (value !== attrs[key]) {
-        this.$changes?.set(key, value);
-      }
-    });
-  }
-
-  applyStateChanges() {
-    const attrs = this;
-    const e = this.$element;
-    if (!this.$changes.size) return;
-    // this.$.log('changes', changes)
-    this.$changes.forEach((value, key) => {
-      if (key[0] === '$') return;
-      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;
-    });
-    this.$changes.clear();
-  }
-}
-
-export class DomTextElement implements IComponentImplementation {
-  $element: Text;
-  $string: string | null = null;
-  [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.$string = decodeXmlEntities(changes.get('text'));
-    }
-  }
-
-  applyStateChanges() {
-    this.$element.textContent = this.$string;
-  }
-}

package/core-web/index.ts

@@ -1,28 +0,0 @@
-import { CArrmaturaNode } from '../core';
-import { WebPlatform } from './WebPlatform';
-import * as lib from '../lib';
-
-import commons from '../commons';
-
-import support from './support';
-
-export type ArrmaturaOptionsForWeb = ArrmaturaOptions & {
-  rootElement?: HTMLElement;
-};
-
-export function arrmatura(
-  template: string,
-  { rootElement, pipes, functions = pipes, types = [], resources }: ArrmaturaOptionsForWeb & { pipes: Hash<Pipe> }
-) {
-  const options: ArrmaturaOptions = {
-    functions: { ...lib, ...support(arrmatura), ...functions },
-    types: [...commons, ...types],
-    resources,
-  };
-  const node = new CArrmaturaNode(template, options, new WebPlatform(rootElement));
-  node.launch();
-}
-
-arrmatura.lib = lib;
-
-Object.defineProperty(window, 'arrmatura', { value: arrmatura });

package/core-web/reflow.ts

@@ -1,30 +0,0 @@
-import { DomElement } from './elements';
-import type { 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) {
-        reflow(p, e);
-        (p.$impl as DomElement).applyStateChanges();
-        cursor = appendElt(e, parent, cursor);
-      } else {
-        cursor = reflow(p, parent, cursor);
-      }
-    }
-  }
-  return cursor;
-}

package/core-web/support.ts

@@ -1,27 +0,0 @@
-const showCounts = (counts: Obj, nicNema = '⭕', neZnojdzeno = '⭕', loading = '…') => {
-  if (!counts) {
-    return loading;
-  }
-  const { total, actual } = counts;
-  if (!total) {
-    return nicNema;
-  }
-  if (!actual) {
-    return neZnojdzeno;
-  }
-  if (actual === total) {
-    return total;
-  }
-  return actual + ' / ' + total;
-};
-
-export default (arrmatura: (m: string, opts: unknown) => void) => ({
-  showCounts,
-
-  sandbox: (markup: string) =>
-    function () {
-      try {
-        arrmatura(`<div>${markup}</div>`, { rootElement: this.$element });
-      } catch (err) {}
-    },
-});

package/core-web/type.ts

@@ -1,18 +0,0 @@
-export interface DomNode extends HTMLElement {
-  disabled: boolean | null;
-  selected: boolean | null;
-  value: unknown;
-  checked: boolean;
-  dataset: any;
-  focus(): void;
-  blur(): void;
-  $dataset: any;
-  impl?: IElement;
-}
-
-export interface IElement {
-  init?: () => any;
-  $listeners: any;
-  $element: DomNode;
-  [key: string]: any;
-}