arrmatura 5.0.1 → 5.0.5

package/README.md

@@ -1,36 +1,40 @@
 # Arrmatura
 
-`Arrmatura` is a ultimate `specification-as-a-code` component framework.
+`Arrmatura` is a mimimalistic component framework that designed to be:
 
 - declarative and codeless
+- reactive and functional
 - non-obtrusive, platform-independent
-- reactive and functional oriented
 - easy to learn and get started.
 
 # Get Started
 
     npm i arrmatura
 
-```javascript
-import { launchWeb } from 'arrmatura';
-
-const components = `
+./templates.xml
 
+```xml
 <component id="Application">
     <Main name="Joe"/>
 </component>
 
 <component id="Main">
-    <Button title="{:greeting}, {name|upper}">
+    <Button title="{:greeting}, {name|upper}!">
 </component>
-`;
+```
+
+index.ts
+
+```javascript
+import { arrmatura } from 'arrmatura';
+import templates from './templates.xml';
 
-launchWeb('<Application />', {
-  types: [components],
+arrmatura('<Application />', {
+  types: [templates],
   resources: {
-    greeting: 'Hello!',
+    greeting: 'Hello',
   },
-  pipes: {
+  functions: {
     upper: (x) => x.toUpperCase(),
   },
 });
@@ -44,6 +48,7 @@ launchWeb('<Application />', {
 
 # Samples
 
-- [TodoMVC](https://alitskevich.github.io/arrmatura/todo.html)
-- [Tasks](https://alitskevich.github.io/arrmatura/task.html)
-- [TicTacToe](https://alitskevich.github.io/arrmatura/tictactoe.html)
+- [TodoMVC](https://alitskevich.github.io/arrmatura/todo.html) ([source](https://github.com/alitskevich/arrmatura/blob/master/docs/todo.html))
+- [Tasks list](https://alitskevich.github.io/arrmatura/task.html) ([source](https://github.com/alitskevich/arrmatura/tree/master/app-task))
+- [Game Solver](https://dlitskevich.github.io/solver/) ([source](https://github.com/dlitskevich/solver/tree/master/app))
+- [Input Templates](https://alitskevich.github.io/templain/) ([source](https://github.com/alitskevich/templain/tree/master/app))

package/commons/components/viewport.xml

@@ -19,7 +19,7 @@
 <component id="Sidebar">
   <div class="off-canvas off-canvas-sidebar-show">
     <a class="off-canvas-toggle btn btn-primary btn-action show-lg" href="#sidebar">
-      <Icon type="bars" />
+      <Icon type="menu" />
     </a>
     <div id="sidebar" class="off-canvas-sidebar">
       <Aside caption="{caption}">

package/commons/pipes/showCounts.ts

@@ -1,4 +1,4 @@
-export const showCounts = (counts: Obj, nicNema = '⭕ Nic nema', neZnojdzeno = '⭕ Ne znojdzena') => {
+export const showCounts = (counts: Obj, nicNema = '⭕', neZnojdzeno = '⭕') => {
   if (!counts) {
     return '…';
   }

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/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);
+  }
+}