arrmatura 5.2.0 → 6.2.1

package/src/utils/stringify.ts

@@ -0,0 +1,39 @@
+import { Hash } from "ultimus";
+const attributesToString = (v?: Hash): string => {
+  if (typeof v === "object") {
+    if (Array.isArray(v)) {
+      return !v.length
+        ? "[]"
+        : `[${attributesToString(v[0]) ?? ""} x${String(v.length)}]`;
+    }
+    return `{${Object.keys(v).toString()}}`;
+  }
+  return v ?? "";
+};
+
+const stringifyState = (attrs?: object | Hash) => {
+  if (!attrs) {
+    return "";
+  }
+
+  const r: string[] = [];
+  Object.entries(attrs).forEach(([k, v]) => {
+    if (v && k[0] !== "$") {
+      r.push(` ${k}="${attributesToString(v)}"`);
+    }
+  });
+
+  return r.length ? r.join("") : "";
+};
+
+export const stringify = (T: any, tab = ""): string => {
+  const { uid, displayName: tag = uid, component: impl, children } = T;
+
+  const ssubs: string = children?.size
+    ? [...children.values()].map((c) => stringify(c, `  ${tab}`)).join("\n")
+    : "";
+
+  return `${tab}<${tag}${stringifyState(impl)}${
+    !ssubs ? "/>" : `>\n${ssubs}\n${tab}</${tag}>`
+  }`;
+};

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2017 Alex Litskevich
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,54 +0,0 @@
-# Arrmatura
-
-`Arrmatura` is a mimimalistic component framework that designed to be:
-
-- declarative and codeless
-- reactive and functional
-- non-obtrusive, platform-independent
-- easy to learn and get started.
-
-# Get Started
-
-    npm i arrmatura
-
-./templates.xml
-
-```xml
-<component id="Application">
-    <Main name="Joe"/>
-</component>
-
-<component id="Main">
-    <Button title="{:greeting}, {name|upper}!">
-</component>
-```
-
-index.ts
-
-```javascript
-import { arrmatura } from 'arrmatura';
-import templates from './templates.xml';
-
-arrmatura('<Application />', {
-  types: [templates],
-  resources: {
-    greeting: 'Hello',
-  },
-  functions: {
-    upper: (x) => x.toUpperCase(),
-  },
-});
-```
-
-# Documentation
-
-- [Glossary](manuals/GLOSSARY.md)
-- [Templates](manuals/TEMPLATE.md)
-- [Custom components](manuals/CUSTOM.md)
-
-# Samples
-
-- [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/auth/AuthService.ts

@@ -1,111 +0,0 @@
-import { Service } from '../services/Service';
-import { Storage } from '../services/Storage';
-
-export class AuthService extends Service {
-  authUrl: string = '';
-  local?: Storage;
-  initialToken: any;
-  $info: unknown;
-  afterSignedOut?: Procedure;
-  persistence: 'local' | 'session' | 'transient' = 'transient';
-
-  init() {
-    this.local = new Storage(this.persistence);
-
-    return !this.initialToken
-      ? null
-      : {
-          token: this.initialToken,
-        };
-  }
-
-  get token() {
-    return this.initialToken || this.local?.get('$auth_token');
-  }
-
-  set token(token: string | null) {
-    this.local?.set('$auth_token', token);
-  }
-
-  get isSignedIn() {
-    return !!this.token;
-  }
-
-  get canSignOut() {
-    return !this.initialToken;
-  }
-
-  signOut() {
-    new Storage('local').clear();
-    new Storage('session').clear();
-    this.initialToken = null;
-    this.token = null;
-    window.location.reload();
-    return null;
-  }
-
-  signIn(creds: any) {
-    const { username, password } = creds || {};
-    return fetch(this.authUrl + '?action=signin', {
-      method: 'POST',
-      mode: 'cors',
-      redirect: 'follow',
-      body: JSON.stringify({ creds: username + ':' + password }),
-    })
-      .then((res) => res.json())
-      .then(({ error, ...rest }) => {
-        if (error) {
-          throw new Error('Invalid credentials');
-        }
-        return rest;
-      });
-  }
-
-  signUp(data: any) {
-    return fetch(this.authUrl + '?action=signup', {
-      method: 'POST',
-      mode: 'cors',
-      redirect: 'follow',
-      body: JSON.stringify({ data }),
-    })
-      .then((res) => res.json())
-      .then(({ error, ...rest }) => {
-        if (error) {
-          throw error;
-        }
-        return rest;
-      });
-  }
-
-  onInvalidateToken() {
-    return this.signOut();
-  }
-
-  onSignIn(creds: Hash) {
-    return {
-      busy: true,
-      '*': this.signIn(creds)
-        .catch((error) => {
-          this.toast('error: ' + error.message);
-          return null;
-        })
-        .then((info) => ({ busy: false, ...info })),
-    };
-  }
-  onSignUp(creds: Hash) {
-    return {
-      busy: true,
-      '*': this.signUp(creds)
-        .catch((error) => {
-          this.toast('error: ' + error.message);
-          return null;
-        })
-        .then((info) => ({ busy: false, ...info })),
-    };
-  }
-
-  onSignOut() {
-    this.signOut();
-    this.afterSignedOut?.();
-  }
-}

package/commons/auth/UserService.ts

@@ -1,57 +0,0 @@
-import { Service } from '../services/Service';
-import { Storage } from '../services/Storage';
-
-export class UserService extends Service {
-  url: string = '';
-  kind: string = '$user';
-  local?: Storage;
-  persistence: 'local' | 'session' | 'transient' = 'transient';
-
-  set info(info: unknown) {
-    this.local?.set(this.kind, info);
-  }
-
-  get info(): Delta {
-    return this.local?.get(this.kind);
-  }
-
-  init() {
-    this.local = new Storage(this.persistence);
-
-    return this.sync();
-  }
-
-  submit(_data: any): Promise<any> {
-    throw new Error('Method not implemented.');
-  }
-
-  sync(delta?: Delta) {
-    const promise = this.submit({ path: `?action=user`, body: { delta } })
-      .then(({ user }) => {
-        this.log('sync ' + this.kind, user);
-        return { isLoading: false, info: user };
-      })
-      .catch((error) => {
-        const message = error?.message || error || 'unknown';
-        this.toast({ id: message, mode: 'error', message: 'Ошибка: ' + message });
-        return { isLoading: false, error: message };
-      });
-
-    return {
-      isLoading: true,
-      info: { ...this.info, ...delta },
-      error: null,
-      '*': promise,
-    };
-  }
-
-  onSave(delta: Delta) {
-    return this.sync(delta);
-  }
-
-  onShowProfile(showProfile = false) {
-    return {
-      showProfile,
-    };
-  }
-}

package/commons/auth/index.ts

@@ -1,5 +0,0 @@
-import userXml from './user.xml';
-export * from './AuthService';
-export * from './UserService';
-
-export const userTemplates = userXml;

package/commons/auth/user.xml

@@ -1,64 +0,0 @@
-<component id="UserBar">
-  <div class="float-right" style="width: 1.5rem;">
-    <NoUserPanel ui:if="<-auth.isSignedIn|not">
-      <ui:else>
-        <UserLoading ui:if="<-user.isLoading">
-          <ui:else>
-            <UserPanel ui:props="<-user.info" defaultImage="assets/person1.png"/>
-          </ui:else>
-        </UserLoading>
-      </ui:else>
-    </NoUserPanel>
-  </div>
-</component>
-
-<component id="UserLoading">
-  <div class="tile tile-centered">
-    <div class="tile-action">
-      <div class="dropdown dropdown-right">
-        <a class="btn btn-link dropdown-toggle" tabindex="0">
-          <div class="mx-2 loading"></div>
-        </a>
-      </div>
-    </div>
-  </div>
-</component>
-
-<component id="UserPanel">
-  <div class="tile tile-centered">
-    <div class="tile-action">
-      <div class="dropdown dropdown-right">
-        <a class="btn btn-link dropdown-toggle p-0" tabindex="0">
-          <figure class="avatar">
-            <img src="{image|or:@defaultImage}" alt="{name}" />
-          </figure>
-        </a>
-        <ul class="menu">
-          <li class="menu-item">
-            <a click="-> user.showProfile|truthy">Profile</a>
-          </li>
-          <li class="menu-item" ui:if="<- auth.canSignOut">
-            <a click="-> auth.signOut">Exit</a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</component>
-
-<component id="NoUserPanel">
-  <div class="tile tile-centered">
-    <div class="tile-action">
-      <a class="btn btn-link dropdown-toggle" click="-> auth.signIn">
-        <Icon type="people"/>
-      </a>
-      <div class="dropdown dropdown-right">
-        <ul class="menu">
-          <li class="menu-item">
-            <a>▶️Vxod</a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</component>

package/commons/components/buttons.xml

@@ -1,25 +0,0 @@
-<component id="Btn">
-  <button class="
-      btn btn-{mode}
-      {primary|then:btn-primary}
-      {disabled|or:@busy|then:disabled}
-      {class}
-      {large|then:btn-lg}
-      {link|then:btn-link}
-      c-hand
-    " style="{style}" data={data} click="{action}">
-    <span ui:if="{busy}" class="mx-2" style="width:18px;">
-      <i class="loading"></i>
-    </span>
-    <Icon ui:if="busy|not|and:@icon" bundle="{iconBundle}" type="{icon}" class="mr-2"/>
-    <span ui:if="{title}" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{title}</span>
-  </button>
-</component>
-
-<component id="FAB">
-  <button class="btn {tooltip|then:tooltip} tooltip-left p-0 fixed s-circle bg-error c-hand {class} {disabled|or:@busy|then:disabled}  {busy|then:loading}" style="position: fixed; border: none; right: 1.5rem; bottom: 1.5rem; width: 2.5rem; height: 2.5rem;" data-tooltip="{tooltip|or:}">
-    <div class="centroid  s-circle" style="width: 2.5rem; height: 2.5rem;" data="{data}" click="{action}">
-      <Icon type="{icon|or:plus}" />
-    </div>
-  </button>
-</component>

package/commons/components/index.ts

@@ -1,13 +0,0 @@
-import buttons from './buttons.xml';
-import table from './table.xml';
-import inputs from './inputs.xml';
-import media from './media.xml';
-import modal from './modal.xml';
-import navigation from './navigation.xml';
-import layouts from './layouts.xml';
-import viewport from './viewport.xml';
-import toasts from './toasts.xml';
-import searchbar from './searchbar.xml';
-import popups from './popups.xml';
-
-export default [buttons, media, table, modal, navigation, toasts, viewport, layouts, inputs, searchbar, popups];

package/commons/components/inputs.xml

@@ -1,33 +0,0 @@
-<component id="Select">
-  <select class="{class}" change="{change}" multiple="{multiple}" disabled="{disabled}" data="{data}">
-    <option selected="{value|not}" value="" ui:if="{value|not|or:@emptyCaption}">{emptyCaption}</option>
-    <option ui:for="option of options" selected="{option.id|equals:@value}" value="{option.id}">{option.name}</option>
-  </select>
-</component>
-
-<component id="RadioGroup">
-  <div class="{class}">
-    <label class="form-radio" ui:for="option of options">
-      <input type="radio" name="{id|or:rg}" value="{option.id}" checked="{option.id|equals:@value}" change="{change}" data="{data}" disabled="{disabled}" />
-      <i class="form-icon"></i>{option.name}
-    </label>
-  </div>
-</component>
-
-<component id="Dropdown">
-  <div class="dropdown">
-    <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
-      {data|selectedName}<i class="icon icon-caret"></i>
-    </a>
-    <!-- menu component -->
-    <ul class="menu" style="right: 0; left: auto">
-      <li ui:for="item of data" class="menu-item {item.id|equals:@value|then:active}" data-id="{item.id}" data-name="{item.name}" click="{change}">
-        <a>{item.name}</a>
-      </li>
-    </ul>
-  </div>
-</component>
-
-<component id="DateTimeInput">
-  <input class="form-input flatpickr-input" init="{:support.initFlatpickr}" disabled="{disabled}" type="text" placeholder="{placeholder}" value="{value|support.setFlatpickrValue}" change="{change}" />
-</component>

package/commons/components/layouts.xml

@@ -1,77 +0,0 @@
-<component id="Panel">
-  <h6 class="mt-2 pt-2 px-2 text-gray" ui:if="caption">{caption}</h6>
-  <div class="panel {class}" style="{style}">
-    <small class="p-2 bg-secondary" ui:if="{hint}">{hint}</small>
-    <div class="panel-header" ui:if="slot(title)">
-      <div class="panel-title">
-        <ui:slot id="title" key="panel-title" />
-      </div>
-    </div>
-    <div class="panel-nav" ui:if="slot(nav)">
-      <ui:slot id="nav" />
-    </div>
-    <div class="panel-body p-2">
-      <ui:slot />
-    </div>
-    <div class="panel-footer" ui:if="slot(footer)">
-      <ui:slot id="footer" />
-    </div>
-  </div>
-</component>
-
-<component id="Tile">
-  <div class="tile {centered|then:tile-centered} m-2 {class}">
-    <div class="tile-icon" ui:if="{image}">
-      <Avatar src="{image}" />
-    </div>
-    <div class="tile-icon" ui:if="{icon}">
-      <Icon type="{icon}" />
-    </div>
-    <div class="tile-content">
-      <div class="tile-title text-bold" ui:if="{title}">{title}</div>
-      <div class="tile-subtitle" ui:if="{subtitle}">{subtitle}</div>
-      <ui:slot />
-    </div>
-    <div class="tile-action btn-group" ui:if="slot(actions)">
-      <ui:slot id="actions" />
-    </div>
-  </div>
-</component>
-
-<component id="Card">
-  <div class="card" style="{style}">
-    <div class="card-image" ui:if="{image}">
-      <img src="{image}" class="img-responsive" />
-    </div>
-    <div class="card-header">
-      <a ui:if="{title}" href="{link}">
-        <h5 class="card-title">{title}</h5>
-      </a>
-      <div ui:if="{subtitle}" class="card-subtitle text-gray">{subtitle}</div>
-      <ui:slot id="header" />
-    </div>
-    <div class="card-body">
-      <ui:slot />
-    </div>
-    <div class="card-footer" ui:if="slot(footer)">
-      <ui:slot id="footer" />
-    </div>
-  </div>
-</component>
-
-<component id="Hero">
-  <div class="hero bg-dark p-0">
-    <div class="hero-body px-2">
-      <h1>{title}</h1>
-    </div>
-  </div>
-</component>
-
-
-<component id="FixedPanel">
-  <div style="position: fixed; right: 0; {bottom|then:bottom:top}: 0; left: 0; z-index:3;">
-    <div class="{class}" style="max-width: 720px; margin: auto; display: flex; {style}">
-      <ui:slot />
-    </div>
-  </div>
-</component>

package/commons/components/media.xml

@@ -1,21 +0,0 @@
-<component id="Icon">
-  <i class="icon icon-{type} {class}" style="{style}" data="{data}" click="{click}"></i>
-</component>
-
-<component id="Img">
-  <img src="{src|or:@default}" alt="{alt}" class="img {class}" style="{style}" />
-</component>
-
-<component id="ImgLogo">
-  <img src="{src}" class="{class}" error="->" data-src="/assets/logo.jpg" />
-</component>
-
-<component id="IFrame">
-  <iframe width="100%" height="450" frameborder="0" style="border: 0;" src="{src}" allowfullscreen="1"></iframe>
-</component>
-
-<component id="Avatar">
-  <figure class="avatar {large|then:avatar-lg}">
-    <img src="{src}" alt="{alt}" default="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
-  </figure>
-</component>

package/commons/components/modal.xml

@@ -1,37 +0,0 @@
-<component id="Modal">
-  <!-- 
-  
-  Modal component:
-
-  Slots:
-    - header
-    - default
-    - footer
-
-  Properties:
-    - open: boolean
-    - close: procedure
-    - title: string
-    - mode: lg|sm
-
-  -->
-  <div class="modal modal-{mode} {open|then:active}" style="padding:0;">
-    <a class="modal-overlay" aria-label="Close" click="{close}" ui:if="mode|equals:lg|not"></a>
-    <div class="modal-container" style="padding:0;max-height: {mode|equals:lg|then:100:70}vh">
-      <div class="modal-header  bg-secondary" style="margin:0">
-        <a class="btn btn-lg btn-clear float-right" aria-label=":close" click="{close}"></a>
-        <div class="modal-title h5" ui:if="{title}">{title}</div>
-        <ui:slot id="header" />
-      </div>
-      <div class="modal-body" style="">
-        <div class="content">
-          <ui:slot />
-        </div>
-      </div>
-      <div class="modal-footer">
-        <ui:slot id="footer" />
-      </div>
-    </div>
-  </div>
-</component>
-

package/commons/components/navigation.xml

@@ -1,73 +0,0 @@
-<component id="Tabs">
-  <ul class="tab tab-block">
-    <li class="tab-item {item.id|equals:@value|then:active} c-hand" ui:for="item of items">
-      <a data-id="{item.id}" click="{change}">
-        <Icon ui:if="{item.icon}" type="{item.icon}" bundle="{item.iconBundle}" class="mx-2" />
-        {item.name|or:@item.id}
-      </a>
-    </li>
-  </ul>
-</component>
-
-<component id="BackButton">
-  <a class="mx-2" style="border: none; width: 1.5rem; z-index: 5" href="{href}">
-    <Icon type="back" />
-  </a>
-</component>
-
-<component id="Navbar">
-  <header class="navbar sticky {class} bg-secondary" style="height: 48px;flex-wrap: nowrap;margin:0;">
-    <section class="navbar-section" style="max-width:100%;">
-      <div class="m-2 d-flex items-center flex-1">
-        <ui:slot id="left" />
-        <div style="flex:1; min-height:1.7rem;display:flex;align-items: center;">
-          <h4 class="text-dark text-ellipsis {badge|then:badge}" style="margin-bottom:0; flex:1;max-width:640px;" data-badge="{badge}" ui:if="{caption}">{caption}</h4>
-        </div>
-      </div>
-    </section>
-    <section class="navbar-section flex-0 mx-2" ui:if="slot(right)">
-      <ui:slot id="right" />
-    </section>
-  </header>
-</component>
-
-<component id="PageRouter">
-  <ui:tag tag="{host|capitalize|or:Loader}Page" path={path} ui:props="{params}" params="{params}" />
-</component>
-
-<component id="LoaderPage">
-  <LoadingIndicator />
-</component>
-
-<component id="NavTree">
-  <ul class="nav">
-    <li class="nav-item {item.class}" ui:for="item of data">
-      <NavLink href="{item.id}">
-        <span>{item.name}</span>
-        <span ui:if="{item.label}" class="label label-error">{item.label}</span>
-      </NavLink>
-      <NavTree ui:if="{item.subs}" data="{item.subs}" />
-    </li>
-  </ul>
-</component>
-
-<component id="NavLink">
-  <a data-value="{href}" click="-> nav.hash" class="c-hand {class}">
-    <ui:slot />
-  </a>
-</component>
-
-<component id="NavListCursor">
-  <div class="d-flex {class}" style="min-width: 6rem;align-items: center;" ui:if="total">
-    <span class="p-2" ui:if="prev.id|not">
-      <Icon type="arrow-left"/>
-    </span>
-    <a class="p-2" href="#/task?itemId={prev.id}" ui:if="prev.id">
-      <Icon type="arrow-left"/>
-    </a>
-    <span class="text-dark text-ellipsis text-bold">{index|plus:1} / {total}</span>
-    <a class="p-2" href="#/task?itemId={next.id}" ui:if="next.id">
-      <Icon type="arrow-right"/>
-    </a>
-  </div>
-</component>

package/commons/components/popups.xml

@@ -1,12 +0,0 @@
-<component id="Popover">
-  <div class="popover popover-right">
-    <ui:slot />
-    <div class="popover-container">
-      <div class="card">
-        <div class="card-header">
-          <ui:slot id="body" />
-        </div>
-      </div>
-    </div>
-  </div>
-</component>