arrmatura 5.0.2 → 5.0.6

package/core/Arrmatura.ts

@@ -2,7 +2,6 @@ import { CNode } from './CNode';
 import { compileNodes } from './compileNode';
 import { Component } from './Component';
 import { xmlParse } from '../lib/xml';
-import { Platform } from './Platform';
 import { registerTypes } from './register';
 
 export class Arrmatura extends Component<CArrmaturaNode> implements IArrmatura {
@@ -16,10 +15,14 @@ export class Arrmatura extends Component<CArrmaturaNode> implements IArrmatura {
     return this;
   }
 
+  get platform(): IPlatform {
+    return this.node.platform;
+  }
+
   requestReflow() {
     if (this.reflowId) return;
     this.reflowId = setTimeout(() => {
-      Platform.instance.reflow(this);
+      this.platform.reflow(this);
       this.reflowId = undefined;
     }, 10);
   }
@@ -53,14 +56,16 @@ export class Arrmatura extends Component<CArrmaturaNode> implements IArrmatura {
 export class CArrmaturaNode extends CNode<Arrmatura> {
   functions?: Hash;
   resources: Hash<any> | undefined;
+  platform: IPlatform;
 
-  constructor(template: string, { types, functions, resources }: ArrmaturaOptions) {
+  constructor(template: string, { types, functions, resources }: ArrmaturaOptions, platform: IPlatform) {
     super();
 
     registerTypes(types);
 
     this.functions = functions;
     this.resources = resources;
+    this.platform = platform;
 
     this.content = compileNodes(xmlParse(template));
   }

package/core/CNode.ts

@@ -58,7 +58,7 @@ export abstract class CNode<T extends Component = Component> implements INode<T>
   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) },
+      payload: { [k]: (data: unknown) => c.$scope?.emit(key, pipec(c, data) as Delta) },
     }));
   }
 

package/core/Component.ts

@@ -7,18 +7,14 @@ import { createListeners } from 'createListeners';
  * Runtime Component class.
  */
 export class Component<T extends INode = INode> implements IComponent, IScope {
-  impl: IComponentImplementation;
-  element?: any;
+  readonly $impl: IComponentImplementation;
 
-  readonly scope: IScope;
-  children?: Map<Uid, IComponent>;
+  $children?: Map<Uid, IComponent>;
 
-  protected state: any = {};
-
-  private _parent?: IComponent;
+  readonly $scope: IScope;
+  readonly #parent?: IComponent;
   #isInited: boolean = false;
   #isDone: boolean = false;
-  // #notifying: boolean = false;
   #listeners?: Listeners<void>;
   #defered?: Array<ComponentProcedure> = [];
   #weak?: Map<any, any>;
@@ -26,17 +22,17 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
   #propFnMap?: Hash<Procedure>;
 
   constructor(readonly _node: INode, _parent?: IComponent, scope?: IScope) {
-    this.scope = scope || this;
-    this._parent = _parent;
-    this.impl = this.createImplementation(this.getInitialState());
+    this.$scope = scope || this;
+    this.#parent = _parent;
+    this.$impl = this.createImplementation(this.getInitialState());
 
     if (this.refId) {
-      this.scope.addComponentReference(this.refId, this);
+      this.$scope.addComponentReference(this.refId, this);
     }
   }
 
   get parent(): IComponent {
-    return this._parent || this;
+    return this.#parent || this;
   }
 
   get node(): T {
@@ -79,9 +75,8 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
       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]) {
+      } else if (k && typeof v !== 'undefined' && v !== this.$impl[k]) {
         changes.set(k, v);
-        this.state[k] = v;
       }
     });
 
@@ -107,15 +102,15 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
   }
 
   stateChanged(changes: Map<string, unknown>) {
-    if (this.impl.stateChanged) {
-      this.impl.stateChanged(changes);
+    if (this.$impl.stateChanged) {
+      this.$impl.stateChanged(changes);
     } else {
       changes.forEach((v, k) => {
-        const setter = this.impl[methodName(k, 'set')];
+        const setter = this.$impl[methodName(k, 'set')];
         if (typeof setter === 'function') {
-          setter.call(this.impl, v);
+          setter.call(this.$impl, v);
         } else {
-          this.impl[k] = v;
+          this.$impl[k] = v;
         }
       });
     }
@@ -128,7 +123,7 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
       return fn();
     }
 
-    const impl = this.impl;
+    const impl = this.$impl;
     const instant = impl[propId];
     if (instant && typeof instant === 'function') {
       const bound = instant.bind(impl);
@@ -148,7 +143,7 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
   }
 
   getFromScope(propId: string): unknown {
-    return this.scope.get(propId);
+    return this.$scope.get(propId);
   }
 
   // --- Left Arrow.
@@ -175,12 +170,12 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
 
   connect(key: string, applicator: (x: unknown) => unknown): undefined | ComponentSubsription {
     const [refId, propId = '*'] = key.split('.');
-    const ref = this.scope.getByRef(refId) as Component;
+    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));
+    return ref.subscribe(this, (c: Component) => applyValue(propId === '*' ? c.$impl : c.get(propId), applicator));
   }
 
   // --- Right Arrow.
@@ -188,7 +183,7 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
   emit(key: string, data: Delta): void {
     if (!key || !key.includes('.')) {
       this.up(key ? { [key]: data } : data);
-      this.log('update:' + key, data, this.impl);
+      this.log('update:' + key, data, this.$impl);
       return;
     }
 
@@ -200,7 +195,7 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
       }
 
       const propId = methodName(target, 'on');
-      const impl = ref.impl;
+      const impl = ref.$impl;
 
       const method = impl[propId];
       if (!method || !(typeof method === 'function')) {
@@ -250,8 +245,8 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
           args.reduce((r, e) => Object.assign(r, e), initials),
           true
         );
-        if (this.impl.init) {
-          const d = this.impl.init(this);
+        if (this.$impl.init) {
+          const d = this.$impl.init(this);
           if (d) {
             this.up(d);
           }
@@ -259,8 +254,8 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
       });
     } else {
       this.up(initials, true);
-      if (this.impl.init) {
-        const d = this.impl.init(this);
+      if (this.$impl.init) {
+        const d = this.$impl.init(this);
         if (d) {
           this.up(d);
         }
@@ -275,19 +270,19 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
     }
     this.#isDone = true;
 
-    this.impl.done?.(this);
+    this.$impl.done?.(this);
 
-    const parent = this._parent;
-    this._parent = undefined;
+    const parent = this.#parent;
+    this.#parent = undefined;
 
-    this.children?.forEach((c) => c.done());
+    this.$children?.forEach((c) => c.done());
 
-    parent?.children?.delete(this.uid);
+    parent?.$children?.delete(this.uid);
 
     this.#defered?.forEach((f) => f(this));
     this.#defered = undefined;
 
-    this.impl.$ = null;
+    this.$impl.$ = null;
   }
 
   // -- Contents --------------------------------------------------------
@@ -297,11 +292,11 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
   }
 
   get recontentScope(): IScope {
-    return this.scope;
+    return this.$scope;
   }
 
   setupChildren(children: ComponentChildren) {
-    this.children = children;
+    this.$children = children;
 
     children.forEach((e) => e.settleAsChild());
   }
@@ -320,7 +315,7 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
 
     this.arrmatura.requestReflow();
 
-    this.children?.forEach((e, uid) => {
+    this.$children?.forEach((e, uid) => {
       if (!nodes?.get(uid)) {
         e.done();
       }
@@ -329,7 +324,7 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
     const children = new Map<Uid, IComponent>();
 
     nodes?.forEach((node, uid) => {
-      const e = this.children?.get(uid) || node.createComponent(this, scope);
+      const e = this.$children?.get(uid) || node.createComponent(this, scope);
       children.set(e.uid, e);
     });
 
@@ -354,7 +349,7 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
     if (local) {
       return local as Component;
     }
-    const ref = this === this.scope ? null : this.scope.getByRef(refId);
+    const ref = this === this.$scope ? null : this.$scope.getByRef(refId);
     return ref as Component;
   }
 
@@ -372,7 +367,7 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
     try {
       const [id, ...args] = key.split(':');
       const fn = this.pipe(id);
-      return fn.apply(this.impl, [
+      return fn.apply(this, [
         value,
         ...args.map((a) => (a[0] === '@' ? this.getFromScope(a.slice(1)) : scalarParse(a))),
       ]);
@@ -415,14 +410,14 @@ export class Component<T extends INode = INode> implements IComponent, IScope {
   }
 
   stringify(tab = '') {
-    const { uid, displayName: tag = uid, state, children } = this;
+    const { uid, displayName: tag = uid, $impl: impl, $children: children } = this;
     if (tag === '#text') {
-      return `${tab}` + state.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(state)}` + (!ssubs ? '/>' : `>\n${ssubs}\n${tab}</${tag}>`);
+    return `${tab}<${tag}${stringifyState(impl)}` + (!ssubs ? '/>' : `>\n${ssubs}\n${tab}</${tag}>`);
   }
 
   toString() {

package/core/cnodes/composition.ts

@@ -24,7 +24,7 @@ export class SlotComponent extends Component {
   }
 
   get compositeScope(): CompositeComponent {
-    return this.scope as CompositeComponent;
+    return this.$scope as CompositeComponent;
   }
 
   get content(): ComponentContent {
@@ -32,7 +32,7 @@ export class SlotComponent extends Component {
   }
 
   get recontentScope(): IScope {
-    return this.compositeScope.scope;
+    return this.compositeScope.$scope;
   }
 }
 

package/core/cnodes/conditionals.ts

@@ -6,7 +6,7 @@ import { Component } from '../Component';
 
 class IfComponent extends Component<CIfNode> {
   get content() {
-    return this.state.condition ? this.node.then : this.node.else;
+    return this.$impl.condition ? this.node.then : this.node.else;
   }
 }
 
@@ -43,7 +43,7 @@ export class CIfNode extends CNode<IfComponent> {
     } 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');
+      this.addPropertyResolver((c: IComponent) => (c.$scope as CompositeComponent).slotContent?.(slotId), 'condition');
     } else {
       this.addPropertyResolver(compileExpression(expr[0] === '{' ? expr : `{${expr}}`), 'condition');
     }

package/core/cnodes/elementary.ts

@@ -1,4 +1,3 @@
-import { Platform } from '../Platform';
 import { CNode } from '../CNode';
 import { compileNodes } from '../compileNode';
 import { Component } from '../Component';
@@ -9,13 +8,13 @@ export class ElementComponent extends Component<CElementNode> {
   }
 
   createImplementation(initials: Hash): IComponentImplementation {
-    return Platform.instance.createElement(this.node.tag, initials, this);
+    return this.arrmatura.platform.createElement(this.node.tag, initials, this);
   }
 }
 
 export class TextElementComponent extends Component<CTextElementNode> {
   createImplementation(initials: Hash) {
-    return Platform.instance.createTextElement(initials, this);
+    return this.arrmatura.platform.createTextElement(initials, this);
   }
 }
 

package/core/cnodes/iterations.ts

@@ -10,9 +10,7 @@ class ForComponent extends Component<CForNode> {
   }
 
   get content() {
-    const {
-      state: { each },
-    } = this;
+    const each: any = this.$impl.each;
     const itemNode = this.node.itemNode;
     const nodes: ComponentContent = new Map();
     this.pkHash = {};
@@ -62,12 +60,12 @@ class ItemComponent extends Component<CItemNode> {
   }
 
   emit(key: string, data: Delta): void {
-    return this.scope.emit(key, data);
+    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);
+    const value = propId.startsWith(iName + '.') || propId === iName ? super.get(propId) : this.$scope.get(propId);
     // this.log(propId, value);
     return value;
   }

package/core/cnodes/routing.ts

@@ -4,7 +4,7 @@ import { Component } from '../Component';
 
 export class DynamicTagComponent extends Component<CDynamicTagNode> {
   get content(): ComponentContent | undefined {
-    const { tag } = this.state;
+    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 })]]);
   }

package/core/index.ts

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

package/core/utils.ts

@@ -17,7 +17,7 @@ export const stringifyState = (attrs?: object | Hash) => {
   }
   const r: string[] = [];
   Object.entries(attrs).forEach(([k, v]) => {
-    if (v) {
+    if (v && k[0] !== '$') {
       r.push(' ' + k + '="' + attributesToString(v) + '"');
     }
   });

package/core-web/attributes.ts

@@ -12,37 +12,32 @@ const setListener = ($: IElement, key: string, e: DomNode, v: unknown) => {
     setAttribute($, key, null);
   } else {
     setAttribute($, key, (ev: Event) => {
-      $.$attributes[fnKey]({ ...e.$dataset }, ev);
+      $[fnKey]({ ...e.$dataset }, ev);
       return false;
     });
   }
 };
-export function setAttribute($: IElement, key: string, value: null | string | Function) {
+export function setAttribute($: IElement, key: string, value: null | string | ((ev: any) => any)) {
   if (value != null) {
     if (typeof value === 'function') {
-      const fnValue = (...args: unknown[]) => {
-        if (!$.isDone) {
-          value(...args);
-        }
-      };
-      if (!$.listeners) {
-        $.listeners = new Map();
+      if (!$.$listeners) {
+        $.$listeners = new Map();
       }
-      if (!$.listeners.has(key)) {
+      if (!$.$listeners.has(key)) {
         const [akey, ekey = akey] = key.split(':');
-        $.element.addEventListener(ekey, fnValue, false);
-        $.listeners.set(key, fnValue);
+        $.$element.addEventListener(ekey, value, false);
+        $.$listeners.set(key, value);
       }
     } else {
-      $.element.setAttribute(key, value);
+      $.$element.setAttribute(key, value);
     }
   } else {
-    if ($.listeners?.has(key)) {
+    if ($.$listeners?.has(key)) {
       const [akey, ekey = akey] = key.split(':');
-      $.element.removeEventListener(ekey, $.listeners.get(key));
-      $.listeners.delete(key);
+      $.$element.removeEventListener(ekey, $.$listeners.get(key));
+      $.$listeners.delete(key);
     } else {
-      $.element.removeAttribute(key);
+      $.$element.removeAttribute(key);
     }
   }
 }
@@ -57,9 +52,8 @@ export const ATTR_SETTERS: Hash<($: IElement, e: DomNode, v: unknown) => void> =
   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, $);
+  init: () => {
+    // do nothing
   },
   data: function (_, e, u) {
     const v = u as Hash;
@@ -90,7 +84,7 @@ export const ATTR_SETTERS: Hash<($: IElement, e: DomNode, v: unknown) => void> =
     const h = !v
       ? null
       : (ev: TouchEvent & { pageX: number; pageY: number }) => {
-          $.$attributes.touchstart(
+          $.touchstart(
             {
               ...e.$dataset,
               x: ev.pageX || ev.changedTouches[0].screenX,
@@ -126,7 +120,7 @@ export const ATTR_SETTERS: Hash<($: IElement, e: DomNode, v: unknown) => void> =
               data.yy = ev.pageY || ev.changedTouches[0].screenY;
               data.dx = data.xx - data.x;
               data.dy = data.yy - data.y;
-              $.$attributes.touch(data, ev);
+              $.touch(data, ev);
             }
 
             return false;
@@ -145,8 +139,7 @@ export const ATTR_SETTERS: Hash<($: IElement, e: DomNode, v: unknown) => void> =
         ? null
         : (ev: KeyboardEvent) => {
             if (ev.keyCode !== 13 && ev.keyCode !== 27) {
-              const fn = $.$attributes.keypress;
-              fn && fn({ value: e.value, ...e.$dataset }, ev);
+              $.keypress?.({ value: e.value, ...e.$dataset }, ev);
               setTimeout(() => e.focus(), 0);
             }
             return false;
@@ -161,7 +154,7 @@ export const ATTR_SETTERS: Hash<($: IElement, e: DomNode, v: unknown) => void> =
         ? null
         : (ev: KeyboardEvent) => {
             if (ev.keyCode === 13) {
-              $.$attributes.enter({ value: e.value, ...e.$dataset }, ev);
+              $.enter({ value: e.value, ...e.$dataset }, ev);
             }
             if (ev.keyCode === 13 || ev.keyCode === 27) {
               e.blur();
@@ -177,7 +170,7 @@ export const ATTR_SETTERS: Hash<($: IElement, e: DomNode, v: unknown) => void> =
       !v
         ? null
         : (ev: Event) => {
-            $.$attributes.change({ value: e.value, ...e.$dataset }, ev);
+            $.change({ value: e.value, ...e.$dataset }, ev);
             return false;
           }
     );
@@ -189,7 +182,7 @@ export const ATTR_SETTERS: Hash<($: IElement, e: DomNode, v: unknown) => void> =
       !v
         ? null
         : (ev: Event) => {
-            $.$attributes.toggle({ value: e.checked, ...e.$dataset }, ev);
+            $.toggle({ value: e.checked, ...e.$dataset }, ev);
             return false;
           }
     );

package/core-web/elements.ts

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

package/core-web/index.ts

@@ -1,4 +1,4 @@
-import { CArrmaturaNode, Platform } from '../core';
+import { CArrmaturaNode } from '../core';
 import { WebPlatform } from './WebPlatform';
 
 export type ArrmaturaOptionsForWeb = ArrmaturaOptions & {
@@ -7,12 +7,9 @@ export type ArrmaturaOptionsForWeb = ArrmaturaOptions & {
 
 export function arrmatura(
   template: string,
-  { rootElement, pipes, functions = pipes, types, resources }: ArrmaturaOptionsForWeb
+  { rootElement, pipes, functions = pipes, types, resources }: ArrmaturaOptionsForWeb & { pipes: Hash<Pipe> }
 ) {
-  Platform.instance = new WebPlatform(rootElement);
-
-  const node = new CArrmaturaNode(template, { functions, types, resources });
-
+  const node = new CArrmaturaNode(template, { functions, types, resources }, new WebPlatform(rootElement));
   node.launch();
 }
 

package/core-web/reflow.ts

@@ -13,14 +13,12 @@ function appendElt(e: DomNode, p: DomNode | HTMLElement, cursor?: DomNode): DomN
 }
 
 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 ($.$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);
-        }
+        reflow(p, e);
+        cursor = appendElt(e, parent, cursor);
       } else {
         cursor = reflow(p, parent, cursor);
       }

package/core-web/type.ts

@@ -11,9 +11,8 @@ export interface DomNode extends HTMLElement {
 }
 
 export interface IElement {
-  $attributes?: any;
   init?: () => any;
-  isDone: boolean;
-  listeners: any;
-  element: DomNode;
+  $listeners: any;
+  $element: DomNode;
+  [key: string]: any;
 }