arrmatura 4.2.2 → 5.0.2

package/commons/services/GSheetsService.ts

@@ -0,0 +1,92 @@
+import { arrayToObject } from 'arrayToObject';
+import { urlAppendParams } from 'urls';
+import { JsonpService } from './JsonpService';
+import { LocalStorage } from './LocalStorage';
+import { Service } from './Service';
+
+export class GSheetsService extends Service {
+  url: string = '';
+  kind: string = 'sheet';
+  remote = new JsonpService();
+  persistence: 'local' | 'transient' = 'transient';
+  local?: LocalStorage;
+
+  init() {
+    this.local = new LocalStorage(this.persistence);
+    return this.syncAll();
+  }
+
+  syncAll() {
+    const now = Date.now();
+    const { since, items: items0 = {} } = this.local?.get(this.kind) || { since: 0, items: {} };
+    return !this.url
+      ? null
+      : {
+          isLoading: true,
+          '*': fetch(urlAppendParams(this.url, { since }), { redirect: 'follow' })
+            .then((res) => res.json())
+            .then(({ items: items1, error }) => {
+              if (error) throw error;
+
+              this.log('sync' + this.kind, now, items1);
+              const items = { ...items0, ...arrayToObject(items1) };
+              this.local?.set(this.kind, { since: now, items });
+              return { items, isLoading: false };
+            })
+            .catch((err) => {
+              this.toast({ mode: 'error', message: 'Ошибка: ' + JSON.stringify(err?.message || err || 'unknown') });
+              return { isLoading: false };
+            }),
+        };
+  }
+
+  getAll() {
+    const { items } = this.local?.get(this.kind) || {};
+    return items;
+  }
+
+  getItems() {
+    let items = this.getAll();
+    return Object.values(items || {});
+  }
+
+  async update(delta: Delta) {
+    const now = Date.now();
+    const { since, items: items0 = [] } = this.local?.get(this.kind) || { since: 0, items: {} };
+
+    this.log('update', delta);
+
+    return {
+      busy: true,
+      '*': fetch(this.url, {
+        method: 'POST',
+        mode: 'cors',
+        redirect: 'follow',
+        body: JSON.stringify({ action: 'upsert', delta }),
+      })
+        .then((res) => res.json())
+        .then(({ error, ...item }) => {
+          if (error) throw error;
+          // items: items1 }
+          this.log('update sync' + this.kind, now, item.id);
+          const items = { ...items0, [item.id]: item };
+          this.toast('Сохранено успешно');
+
+          this.local?.set(this.kind, { since, items });
+          return { busy: false }; //items,
+        })
+        .catch((err) => {
+          this.toast({ mode: 'error', message: 'Ошибка: update ' + JSON.stringify(err?.message || err || 'unknown') });
+          return { busy: false };
+        }),
+    };
+  }
+
+  async onUpsert(data) {
+    return this.update(data);
+  }
+
+  async onDelete({ id }) {
+    return this.update({ [id]: { status: 'deleted' } });
+  }
+}

package/commons/services/HeartbeatService.ts

@@ -0,0 +1,35 @@
+export class HeartbeatService {
+  interval: any;
+  watcher?: Procedure;
+
+  constructor(watcher?: Procedure) {
+    this.setWatcher(watcher);
+  }
+
+  setWatcher(watcher?: Procedure) {
+    this.watcher = watcher;
+  }
+
+  startWatch() {
+    if (!this.interval) {
+      this.interval = setInterval(() => {
+        this.watcher?.();
+      }, 1000);
+    }
+  }
+
+  stopWatch() {
+    if (this.interval) {
+      clearInterval(this.interval);
+      this.interval = 0;
+    }
+  }
+
+  setActive(active: boolean) {
+    if (!active) {
+      this.stopWatch();
+    } else {
+      this.startWatch();
+    }
+  }
+}

package/commons/services/Invoke.ts

@@ -0,0 +1,13 @@
+export class Invoke {
+  init() {
+    if (this.delay) {
+      setTimeout(() => {
+        if (!this.isDone) {
+          this.action(this.data);
+        }
+      }, this.delay * 1000);
+    } else {
+      this.action(this.data);
+    }
+  }
+}

package/commons/services/JsonpService.ts

@@ -0,0 +1,18 @@
+import { urlAppendParams } from 'urls';
+
+let count = 0;
+
+export class JsonpService {
+  fetch(url: string) {
+    return new Promise((resolve, reject) => {
+      const jsonp: string = 'jsonp_' + ++count;
+      const a = window.document.createElement('script');
+      a.async = true;
+      a.onerror = reject;
+      a.src = urlAppendParams(url, { jsonp });
+      window[jsonp] = resolve;
+      const m = window.document.getElementsByTagName('body')[0];
+      m?.parentNode?.insertBefore(a, m);
+    });
+  }
+}

package/commons/services/Loader.ts

@@ -0,0 +1,17 @@
+export class Loader {
+  init() {
+    this.reload();
+  }
+
+  setTrigger(val) {
+    this.trigger = val;
+    this.reload();
+  }
+
+  reload() {
+    const { from, data, into } = this;
+    if (from && into) {
+      from({ data, callback: (error, result) => into({ error, ...result }) });
+    }
+  }
+}

package/commons/services/LocalStorage.ts

@@ -0,0 +1,46 @@
+const parse = (s: string | null) => (s ? JSON.parse(s) : undefined);
+
+class MemoryStore {
+  map = new Map<string, string>();
+
+  getItem(key: string) {
+    return this.map.get(key) || null;
+  }
+
+  setItem(key: string, value: string): void {
+    this.map.set(key, value);
+  }
+  removeItem(key: string): void {
+    this.map.delete(key);
+  }
+}
+
+export class LocalStorage {
+  cache: Hash = {};
+  storage: MemoryStore | Storage;
+
+  constructor(mode?: 'local' | 'transient') {
+    this.storage = mode === 'local' ? window.localStorage : new MemoryStore();
+  }
+
+  get(key: string) {
+    return this.cache[key] || (this.cache[key] = parse(this.storage.getItem(key)));
+  }
+
+  set(key: string, val: unknown) {
+    this.cache[key] = val;
+    if (val) {
+      this.storage.setItem(key, JSON.stringify(val));
+    } else {
+      this.storage.removeItem(key);
+    }
+  }
+
+  assign(delta: Delta) {
+    Object.entries(delta).forEach(([key, val = null]) => this.set(key, val));
+  }
+
+  transform(key: string, fn: Pipe) {
+    return this.set(key, fn(this.get(key)));
+  }
+}

package/commons/services/NavigationService.ts

@@ -0,0 +1,55 @@
+import { urlParse, urlStringify } from 'urls';
+import { Service } from './Service';
+
+export class NavigationService extends Service {
+  prevHash: string = '';
+  host: any;
+  path: any;
+  params: any;
+
+  init() {
+    this.prevHash;
+    window.addEventListener('hashchange', () => this.hashchange());
+    setTimeout(() => this.hashchange(), 0);
+  }
+
+  hashchange() {
+    const hash = window.location.hash.slice(1);
+    if (hash[0] === '/' && hash !== this.prevHash) {
+      this.emit('this.hash', { value: hash.slice(1) });
+      this.prevHash = hash;
+    } else if (!this.prevHash) {
+      this.emit('this.hash', { value: 'main' });
+    }
+  }
+
+  done() {
+    window.removeEventListener('hashchange', this.hashchange);
+  }
+
+  setHash(d) {
+    const { host, path = ['*'], params } = urlParse('/' + d);
+    const state = {
+      host: (!host || host === '*' ? this.host : host) || 'main',
+      path: path[0] === '*' ? this.path : path,
+      params: params.reset ? { ...params, reset: null } : { ...this.params, ...params },
+    };
+    window.location.hash = this.prevHash = urlStringify(state).slice(1);
+    this.up(state);
+  }
+
+  getRoute() {
+    return {
+      host: this.host,
+      path: this.path,
+      params: this.params,
+    };
+  }
+
+  onHash({ value }) {
+    this.setHash('/' + value);
+  }
+  onParams(params) {
+    this.setHash({ params: { ...params, data: null } });
+  }
+}

package/commons/services/Service.ts

@@ -0,0 +1,68 @@
+import { Component } from '../../core/Component';
+import { Toast } from './ToastService';
+
+export class Service {
+  $: Component;
+  constructor(state, $: Component) {
+    this.state = state;
+    this.$ = $;
+  }
+
+  /**
+   * Framework
+   */
+  lookupService(ref: string) {
+    return this.$.getByRef(ref);
+  }
+
+  up(...args) {
+    return this.$.up(...args);
+  }
+
+  defer(...args) {
+    return this.$.defer(...args);
+  }
+
+  emit(...args) {
+    return this.$.emit(...args);
+  }
+
+  res(...args) {
+    return this.$.res(...args);
+  }
+
+  log(...args) {
+    console.log(this.$.ref + ': ', ...args);
+    return args[0];
+  }
+
+  /**
+   * Error handling
+   */
+
+  handleError({ message = '', code = '' }) {
+    // may  overriden from props
+    const handler = this.lookupService('errorHandler');
+    if (handler) {
+      handler.handleError({ message, code, source: this.$ });
+    } else {
+      console.error(this.$.ref + ': ERROR: ', message, code);
+    }
+  }
+
+  toast(message: string | Partial<Toast> = 'ok') {
+    // may  overriden from props
+    this.emit('toasters.send', typeof message === 'string' ? { message } : message);
+  }
+
+  safe(p, def) {
+    return p.catch((error) => {
+      this.handleError(error);
+      return def ? def(error) : { error };
+    });
+  }
+
+  onClearError() {
+    return { error: null };
+  }
+}

package/commons/services/ServiceWorker.ts

@@ -0,0 +1,111 @@
+import { Service } from './Service';
+
+export class ServiceWorker extends Service {
+  get api() {
+    return navigator.serviceWorker;
+  }
+
+  init() {
+    try {
+      Function.assert(this.api, 'Service Workers are not supported');
+
+      const { source = '/service-worker.js', scope = '/', push } = this;
+
+      this.api
+        .register(source, { scope })
+        .then((registration) => this.registered(registration))
+        .then(() => this.ready(() => this.log('Service Worker Ready')));
+
+      this.api.addEventListener('message', (ev) => this.onMessage(ev));
+
+      if (push) {
+        this.subscribe();
+      }
+    } catch (error) {
+      this.fallback(error);
+    }
+  }
+
+  // ensures that `fn` executed when api is ready
+  ready(fn) {
+    return this.api.ready.then(fn);
+  }
+
+  fallback(error) {
+    this.log(error);
+  }
+
+  // hook on registered
+  registered(registration) {
+    this.log('Service Worker Registered');
+    return registration;
+  }
+  /**
+   * Push
+   */
+
+  withPushManager(fn) {
+    return this.ready(({ pushManager }) => pushManager).then(fn);
+  }
+
+  unsubscribe() {
+    this.withPushManager((pushManager) => pushManager.getSubscription())
+      .then((ss) => ss && ss.unsubscribe())
+      .then(() => this.saveSubscription())
+      .catch(function (e) {
+        console.log('Error thrown while unsubscribing from  push messaging.', e);
+      });
+  }
+
+  subscribe() {
+    function urlBase64ToUint8Array(base64String) {
+      const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+      const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+
+      const rawData = window.atob(base64);
+      return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)));
+    }
+    if (Notification.permission === 'granted') {
+      /* do our magic */
+    } else if (Notification.permission === 'blocked') {
+      /* the user has previously denied push. Can't reprompt. */
+    } else {
+      /* show a prompt to the user */
+    }
+    const applicationServerKey = urlBase64ToUint8Array(this.vapidPublicKey);
+    this.withPushManager((pushManager) =>
+      pushManager
+        .getSubscription()
+        // .then((ss) => ss && ss.unsubscribe())
+        .then(
+          (ss) =>
+            ss ||
+            pushManager.subscribe({
+              userVisibleOnly: true,
+              applicationServerKey,
+            })
+        )
+        .then((subscription) => this.saveSubscription(subscription.toJSON()))
+        .catch((err) => {
+          if (Notification.permission === 'denied') {
+            this.log('The user has blocked notifications.');
+          }
+          this.handleError(err);
+        })
+    );
+  }
+
+  // to be overriden from props
+  saveSubscription(ss) {
+    this.subscription = ss;
+  }
+
+  /**
+   * Intercommunication between service worker.
+   */
+
+  // handles a message posted from Service worker.
+  onMessage(payload) {
+    this.log('onMessage', payload);
+  }
+}

package/commons/services/ToastService.ts

@@ -0,0 +1,49 @@
+import { HeartbeatService } from './HeartbeatService';
+import { Service } from './Service';
+
+export type Toast = {
+  message: string;
+  mode: 'error' | 'warning' | 'info' | '';
+  id: string;
+  ttl: number;
+};
+
+export class ToastService extends Service {
+  items: Toast[] = [];
+
+  heartbeat = new HeartbeatService(() => this.emit('this.tick'));
+
+  setItems(items: Toast[]) {
+    this.heartbeat.setActive(!!items.length);
+    this.items = items;
+  }
+
+  onSend(data: Toast, { items }: this) {
+    const now = Date.now();
+    const id = String(data.id || now);
+    const close = () => this.emit('this.close', { id });
+    const toast = {
+      ...data,
+      mode: data?.message?.startsWith('error') ? 'error' : data.mode,
+      id,
+      close,
+      ttl: now + 3000,
+    };
+
+    return {
+      items: [toast, ...items.filter((e) => e.id !== id)],
+    };
+  }
+
+  onTick(_: unknown, { items }: this) {
+    const now = Date.now();
+
+    return { items: items.filter((e: Toast) => e.ttl > now) };
+  }
+
+  onClose({ id }: Datum, { items }: this) {
+    return {
+      items: items.filter((e) => e.id !== id),
+    };
+  }
+}

package/commons/services/index.ts

@@ -0,0 +1,14 @@
+export { NavigationService } from './NavigationService';
+export { ServiceWorker } from './ServiceWorker';
+export { Service } from './Service';
+export { ToastService } from './ToastService';
+export { Loader } from './Loader';
+export { Invoke } from './Invoke';
+export { ErrorHandlingService } from './ErrorHandlingService';
+export { FormController } from '../forms/FormController';
+export * from './GSheetsService';
+export * from '../forms/ItemCollection';
+export * from '../forms/ItemController';
+export * from './FirebaseService';
+export * from '../forms/MetadataService';
+export * from '../forms/MultivalueController';

package/core/Arrmatura.ts

@@ -0,0 +1,79 @@
+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 {
+  rootElement: any;
+  reflowId?: unknown;
+
+  get displayName(): string {
+    return 'Arrmatura';
+  }
+  get arrmatura(): IArrmatura {
+    return this;
+  }
+
+  requestReflow() {
+    if (this.reflowId) return;
+    this.reflowId = setTimeout(() => {
+      Platform.instance.reflow(this);
+      this.reflowId = undefined;
+    }, 10);
+  }
+
+  res(key: string): any {
+    const [id, ...deep] = key.split('.');
+    const { resources = {} } = this.node;
+    const target = id ? resources?.[id] : resources;
+    if (!target || deep.length === 0) {
+      return target;
+    }
+    if (deep.length === 1) {
+      return target[deep[0]];
+    }
+    return deep.reduce((r, k) => (r ? r[k] : null), target);
+  }
+
+  pipe(key: string) {
+    const [id, ...deep] = key.split('.');
+    const target = this.node.functions?.[id];
+    if (!target || deep.length === 0) {
+      return target;
+    }
+    if (deep.length === 1) {
+      return (target as Hash)[deep[0]];
+    }
+    return deep.reduce((r, k) => (r ? (r as Hash)[k] : null), target);
+  }
+}
+
+export class CArrmaturaNode extends CNode<Arrmatura> {
+  functions?: Hash;
+  resources: Hash<any> | undefined;
+
+  constructor(template: string, { types, functions, resources }: ArrmaturaOptions) {
+    super();
+
+    registerTypes(types);
+
+    this.functions = functions;
+    this.resources = resources;
+
+    this.content = compileNodes(xmlParse(template));
+  }
+
+  get ComponentConstructor() {
+    return Arrmatura;
+  }
+
+  launch() {
+    const arrmatura = this.createComponent() as Arrmatura;
+
+    arrmatura.up({}, true);
+
+    console.log(arrmatura.toString());
+  }
+}