arrmatura 5.0.1 → 5.0.2

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

package/core-web/type.ts

@@ -0,0 +1,19 @@
+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 {
+  $attributes?: any;
+  init?: () => any;
+  isDone: boolean;
+  listeners: any;
+  element: DomNode;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arrmatura",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "framework",
   "scripts": {
     "start": "npx webpack-dev-server --hot --contentBase docs",
@@ -18,14 +18,15 @@
   "files": [
     "lib",
     "core",
-    "commons",
-    "web"
+    "core-web",
+    "commons"
   ],
   "devDependencies": {
     "@babel/cli": "^7.12.1",
     "@babel/core": "^7.12.3",
     "@babel/preset-env": "^7.12.1",
     "babel-loader": "^8.2.1",
+    "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^7.30.0",
     "@typescript-eslint/eslint-plugin": "^2.27.0",
     "@typescript-eslint/parser": "^2.27.0",
@@ -36,14 +37,11 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
+    "metro-react-native-babel-preset": "^0.66.2",
     "raw-loader": "^4.0.2",
     "typescript": "^4.4.4",
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0"
-  },
-  "dependencies": {
-    "babel-plugin-module-resolver": "^4.1.0",
-    "metro-react-native-babel-preset": "^0.66.2"
   }
 }