arrmatura 5.0.4 → 5.2.0

package/commons/services/ToastService.ts

@@ -3,15 +3,24 @@ import { Service } from './Service';
 
 export type Toast = {
   message: string;
+  link?: string;
   mode: 'error' | 'warning' | 'info' | '';
   id: string;
   ttl: number;
+  timeout?: number;
+  counter?: number;
 };
 
+export class ToastSender extends Service {
+  onData(data: Delta) {
+    this.emit('toaster.send', data);
+  }
+}
+
 export class ToastService extends Service {
   items: Toast[] = [];
 
-  heartbeat = new HeartbeatService(() => this.emit('this.tick'));
+  heartbeat = new HeartbeatService(() => this.emit('this.tick', {}));
 
   setItems(items: Toast[]) {
     this.heartbeat.setActive(!!items.length);
@@ -27,11 +36,14 @@ export class ToastService extends Service {
       mode: data?.message?.startsWith('error') ? 'error' : data.mode,
       id,
       close,
-      ttl: now + 3000,
+      ttl: now + (data.timeout || 6000),
     };
-
+    const prev = items.find((e) => e.id === id);
+    if (prev) {
+      toast.counter = 1 + (prev.counter || 1);
+    }
     return {
-      items: [toast, ...items.filter((e) => e.id !== id)],
+      items: [toast, ...items.filter((e) => e !== prev)],
     };
   }
 

package/commons/services/index.ts

@@ -6,9 +6,8 @@ export { Loader } from './Loader';
 export { Invoke } from './Invoke';
 export { ErrorHandlingService } from './ErrorHandlingService';
 export { FormController } from '../forms/FormController';
+export * from './MetadataService';
 export * from './GSheetsService';
-export * from '../forms/ItemCollection';
-export * from '../forms/ItemController';
+export * from './ApiClientService';
 export * from './FirebaseService';
-export * from '../forms/MetadataService';
-export * from '../forms/MultivalueController';
+export * from './MetadataService';

package/core/Arrmatura.ts

@@ -1,7 +1,7 @@
 import { CNode } from './CNode';
 import { compileNodes } from './compileNode';
 import { Component } from './Component';
-import { xmlParse } from '../lib/xml';
+import { xmlParse } from '../lib/parsing/xml';
 import { registerTypes } from './register';
 
 export class Arrmatura extends Component<CArrmaturaNode> implements IArrmatura {
@@ -11,9 +11,6 @@ export class Arrmatura extends Component<CArrmaturaNode> implements IArrmatura {
   get displayName(): string {
     return 'Arrmatura';
   }
-  get arrmatura(): IArrmatura {
-    return this;
-  }
 
   get platform(): IPlatform {
     return this.node.platform;
@@ -74,11 +71,9 @@ export class CArrmaturaNode extends CNode<Arrmatura> {
     return Arrmatura;
   }
 
-  launch() {
-    const arrmatura = this.createComponent() as Arrmatura;
-
-    arrmatura.up({}, true);
+  launch(config = {}) {
+    const arrmatura = this.createComponent();
 
-    console.log(arrmatura.toString());
+    arrmatura.up(config, true);
   }
 }

package/core/CNode.ts

@@ -1,5 +1,4 @@
-import { nextId } from 'nextId';
-import { identity } from 'noop';
+import { nextId, identity } from '../lib';
 import { Component } from './Component';
 import { compileExpression, compilePipeExpression } from './expression';
 

package/core/Component.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { applyValue, methodName, stringifyState } from './utils';
-import { scalarParse } from 'scalar';
-import { createListeners } from 'createListeners';
+import { scalarParse } from '../lib';
+import { createListeners } from 'support/createListeners';
 
 /**
  * Runtime Component class.
@@ -13,6 +13,7 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
 
   readonly $scope: IScope;
   readonly #parent?: IComponent;
+  readonly arrmatura: IArrmatura;
   #isInited: boolean = false;
   #isDone: boolean = false;
   #listeners?: Listeners<void>;
@@ -24,6 +25,7 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
   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) {
@@ -31,10 +33,6 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
     }
   }
 
-  get parent(): IComponent {
-    return this.#parent || this;
-  }
-
   get node(): T {
     return this._node as T;
   }
@@ -43,10 +41,6 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
     return '🔹';
   }
 
-  get arrmatura(): IArrmatura {
-    return this.parent.arrmatura;
-  }
-
   get uid() {
     return this.node.uid;
   }
@@ -61,20 +55,19 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
     return this.node.resolveInitialProps(this);
   }
 
-  up(Δ: Delta | Promise<any> = {}, force: boolean = false): void {
-    if (this.#isDone) {
-      return;
+  up(Δ: Delta | Promise<any>, force: boolean = false): null | Promise<any> {
+    if (!Δ || this.#isDone) {
+      return null;
     }
     if (Δ.then && Δ.catch) {
-      this.upAsync(Δ as Promise<any>);
-      return;
+      return this.upAsync(Δ as Promise<any>);
     }
-
+    let prom: Promise<any>[] | null = null;
     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);
+      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);
       }
@@ -87,16 +80,19 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
         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) {
+  upAsync(promise: Promise<any>, key?: string): Promise<any> {
     const racer = this.raceCondition('set:' + key);
-    const up = (r: Delta) => racer(() => this.up(r));
-    if (key && key !== '*') {
+    if (key && key[0] !== '*') {
       const akey = key.replace('Promise', '');
-      promise.then((val) => up({ [akey]: val }));
+      promise.then((val) => racer(() => this.up({ [akey]: val })));
     } else {
-      promise.then(up);
+      promise.then((r: Delta) => racer(() => this.up(r)));
     }
     return promise;
   }
@@ -180,11 +176,10 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
 
   // --- Right Arrow.
 
-  emit(key: string, data: Delta): void {
+  emit(key: string, data: Delta): null | Promise<any> {
     if (!key || !key.includes('.')) {
-      this.up(key ? { [key]: data } : data);
       this.log('update:' + key, data, this.$impl);
-      return;
+      return this.up(key ? { [key]: data } : data);
     }
 
     const [refId, target] = key.split('.');
@@ -206,11 +201,13 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
 
       this.log(refId + ':' + propId, result, data, impl);
       if (result) {
-        ref.up(result);
+        const ret = ref.up(result);
+        return ret;
       }
     } catch (ex) {
       this.logError('emit ' + key + ':', ex);
     }
+    return null;
   }
 
   // --- Life-cycle hooks.
@@ -386,7 +383,7 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
     return (fn: Procedure) => {
       if (counter === COUNTERS.get(key)) {
         counter = 0;
-        fn();
+        return fn();
       }
     };
   }
@@ -397,8 +394,9 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
     }
   }
 
-  log(...args: unknown[]) {
-    console.log('' + this.displayName + ':' + this.uid, ...args);
+  log(val: any, ...args: unknown[]) {
+    console.log('' + this.displayName + ':' + this.uid, val, ...args);
+    return val;
   }
 
   logError(...args: unknown[]) {

package/core/cnodes/conditionals.ts

@@ -6,7 +6,7 @@ import { Component } from '../Component';
 
 class IfComponent extends Component<CIfNode> {
   get content() {
-    return this.$impl.condition ? this.node.then : this.node.else;
+    return !!this.$impl.condition ? this.node.then : this.node.else;
   }
 }
 
@@ -45,7 +45,8 @@ export class CIfNode extends CNode<IfComponent> {
       // 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');
+      const resolver = compileExpression(expr[0] === '{' ? expr : `{${expr}}`);
+      this.addPropertyResolver((c) => !!resolver(c), 'condition');
     }
   }
 }

package/core/expression.ts

@@ -1,4 +1,4 @@
-import { scalarParse } from 'scalar';
+import { scalarParse } from '../lib';
 
 const RE_SINGLE_PLACEHOLDER = /^\{([^}]+)\}$/;
 

package/core/register.ts

@@ -1,5 +1,5 @@
 import { compileNodes } from './compileNode';
-import { xmlParse } from 'xml';
+import { xmlParse } from '../lib';
 import { fnName } from './utils';
 
 export class ComponentDefinition {

package/core/utils.ts

@@ -1,6 +1,4 @@
-import { nextId } from 'nextId';
-import { identity } from 'noop';
-import { attributesToString } from 'xml';
+import { nextId, identity, attributesToString } from '../lib';
 
 export const applyValue = (value: any, fn = identity) => (value?.then ? value.then(fn) : fn(value));
 

package/core-web/attributes.ts

@@ -1,4 +1,4 @@
-import { DomNode, IElement } from './type';
+import type { DomNode, IElement } from './type';
 
 const camelize = (key: string, sep = '_', jn = ' ') =>
   ('' + key)
@@ -6,13 +6,14 @@ const camelize = (key: string, sep = '_', jn = ' ') =>
     .map((s, i) => (i ? s[0].toUpperCase() + s.slice(1) : s))
     .join(jn);
 
-const setListener = ($: IElement, key: string, e: DomNode, v: unknown) => {
+const setListener = ($: IElement, key: string, e: DomNode, fn: unknown) => {
   const fnKey = key.split(':')[0];
-  if (!v) {
+  if (!fn) {
     setAttribute($, key, null);
   } else {
-    setAttribute($, key, (ev: Event) => {
-      $[fnKey]({ ...e.$dataset }, ev);
+    setAttribute($, key, (domEvent: Event) => {
+      // indirect reference. could be changed along the time.
+      $[fnKey]({ ...e.$dataset }, domEvent);
       return false;
     });
   }
@@ -74,11 +75,38 @@ export const ATTR_SETTERS: Hash<($: IElement, e: DomNode, v: unknown) => void> =
     }
   },
 
-  click: ($, e, v) => setListener($, 'click:click', e, v),
+  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:blur', e, v),
-  dblclick: ($, e, v) => setListener($, 'dblclick:dblclick', e, v),
-  scroll: ($, e, v) => setListener($, 'scroll:scroll', 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
@@ -166,7 +194,7 @@ export const ATTR_SETTERS: Hash<($: IElement, e: DomNode, v: unknown) => void> =
   change: function ($, e, v) {
     setAttribute(
       $,
-      'change:change',
+      'change',
       !v
         ? null
         : (ev: Event) => {

package/core-web/elements.ts

@@ -1,11 +1,12 @@
+import { decodeXmlEntities } from '../lib';
 import { ATTR_SETTERS, setAttribute } from './attributes';
-import { DomNode, IElement } from './type';
+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;
 
@@ -20,10 +21,21 @@ export class DomElement implements IComponentImplementation, IElement {
   }
 
   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)
-    changes.forEach((value, key) => {
+    this.$changes.forEach((value, key) => {
       if (key[0] === '$') return;
       if (value !== attrs[key]) {
         const setter = ATTR_SETTERS[key];
@@ -40,11 +52,13 @@ export class DomElement implements IComponentImplementation, IElement {
       }
       attrs[key] = value;
     });
+    this.$changes.clear();
   }
 }
 
 export class DomTextElement implements IComponentImplementation {
   $element: Text;
+  $string: string | null = null;
   [key: string]: unknown;
 
   constructor(attrs: Hash) {
@@ -57,7 +71,11 @@ export class DomTextElement implements IComponentImplementation {
 
   stateChanged(changes: Map<string, any>) {
     if (changes.has('text')) {
-      this.$element.textContent = changes.get('text');
+      this.$string = decodeXmlEntities(changes.get('text'));
     }
   }
+
+  applyStateChanges() {
+    this.$element.textContent = this.$string;
+  }
 }

package/core-web/index.ts

@@ -1,5 +1,10 @@
 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;
@@ -7,10 +12,17 @@ export type ArrmaturaOptionsForWeb = ArrmaturaOptions & {
 
 export function arrmatura(
   template: string,
-  { rootElement, pipes, functions = pipes, types, resources }: ArrmaturaOptionsForWeb & { pipes: Hash<Pipe> }
+  { rootElement, pipes, functions = pipes, types = [], resources }: ArrmaturaOptionsForWeb & { pipes: Hash<Pipe> }
 ) {
-  const node = new CArrmaturaNode(template, { functions, types, resources }, new WebPlatform(rootElement));
+  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,4 +1,5 @@
-import { DomNode } from './type';
+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;
@@ -18,6 +19,7 @@ export function reflow($: IComponent, parent: DomNode | HTMLElement, cursor?: Do
       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);

package/core-web/support.ts

@@ -0,0 +1,27 @@
+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) {}
+    },
+});