saasufy-components 1.0.6 → 1.1.0

package/collection-adder.js

@@ -1,11 +1,11 @@
-import { getSocket } from './socket.js';
+import { SocketConsumer } from './socket.js';
 import AGCollection from '/node_modules/ag-collection/ag-collection.js';
 
-class CollectionAdder extends HTMLElement {
+class CollectionAdder extends SocketConsumer {
   constructor(options) {
     super();
-    options = options || {};
-    this.socket = getSocket(options.socketOptions);
+    this.options = options || {};
+
     this.typeCastFunctions = {
       text: String,
       checkbox: Boolean,
@@ -16,6 +16,7 @@ class CollectionAdder extends HTMLElement {
   }
 
   connectedCallback() {
+    this.socket = this.getSocket();
     this.isReady = true;
     this.render();
   }

package/collection-browser.js

@@ -1,14 +1,13 @@
-import { getSocket } from './socket.js';
+import { SocketConsumer } from './socket.js';
 import AGCollection from '/node_modules/ag-collection/ag-collection.js';
-import { getSafeHTML } from './utils.js';
+import { renderTemplate } from './utils.js';
 
 const DEFAULT_RELOAD_DELAY = 0;
 
-class CollectionBrowser extends HTMLElement {
+class CollectionBrowser extends SocketConsumer {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
-    this.socket = getSocket();
 
     this.handleShowModalEvent = (event) => {
       let modal = this.shadowRoot.querySelector('slot[name="modal"]').assignedNodes()[0];
@@ -40,12 +39,13 @@ class CollectionBrowser extends HTMLElement {
     };
 
     this.handleSlotChangeEvent = () => {
-      this.renderTable();
+      this.renderList();
     };
   }
 
   connectedCallback() {
     this.isReady = true;
+    this.socket = this.getSocket();
     this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
     this.addEventListener('showModal', this.handleShowModalEvent);
     this.addEventListener('crudCreate', this.handleCRUDCreateEvent);
@@ -146,28 +146,23 @@ class CollectionBrowser extends HTMLElement {
     }
   }
 
-  renderTable() {
+  renderList() {
     if (!this.collection || !this.collection.isLoaded) return;
     let itemTemplate = this.shadowRoot.querySelector('slot[name="item"]').assignedNodes()[0];
     if (!itemTemplate) return;
-    let listNode = this.shadowRoot.querySelector('slot[name="list"]').assignedNodes()[0];
-    if (!listNode) return;
+    let viewportNode = this.shadowRoot.querySelector('slot[name="viewport"]').assignedNodes()[0];
+    if (!viewportNode) return;
     let items = [];
 
     for (let modelItem of this.collection.value) {
-      let itemString = itemTemplate.innerHTML;
-
-      for (let [ field, value ] of Object.entries(modelItem)) {
-        let regExp = new RegExp(`{{${field}}}`, 'g');
-        itemString = itemString.replace(regExp, getSafeHTML(value));
-      }
+      let itemString = renderTemplate(itemTemplate.innerHTML, this.collection.type, modelItem);
       items.push(itemString);
     }
     let noItemTemplate = this.shadowRoot.querySelector('slot[name="no-item"]').assignedNodes()[0];
     if (noItemTemplate && !items.length) {
-      listNode.innerHTML = noItemTemplate.innerHTML;
+      viewportNode.innerHTML = noItemTemplate.innerHTML;
     } else {
-      listNode.innerHTML = items.join('');
+      viewportNode.innerHTML = items.join('');
     }
   }
 
@@ -178,6 +173,7 @@ class CollectionBrowser extends HTMLElement {
     let collectionPageSize = this.getAttribute('collection-page-size');
     let collectionViewParams = this.getAttribute('collection-view-params');
     let collectionPageOffset = this.getAttribute('collection-page-offset');
+    let hideErrorLogs = this.hasAttribute('hide-error-logs');
     let collectionReloadDelay = Number(
       this.getAttribute('collection-reload-delay') || DEFAULT_RELOAD_DELAY
     );
@@ -198,7 +194,7 @@ class CollectionBrowser extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <slot name="item"></slot>
       <slot name="no-item"></slot>
-      <slot name="list"></slot>
+      <slot name="viewport"></slot>
       <slot name="previous-page"></slot>
       <slot name="page-number"></slot>
       <slot name="next-page"></slot>
@@ -221,7 +217,7 @@ class CollectionBrowser extends HTMLElement {
     (async () => {
       await this.collection.listener('load').once();
       if (!this.collection.value.length) {
-        this.renderTable();
+        this.renderList();
       }
       this.setAttribute('is-loaded', '');
       this.dispatchEvent(new CustomEvent('load', { bubbles: true }));
@@ -229,10 +225,20 @@ class CollectionBrowser extends HTMLElement {
 
     (async () => {
       for await (let event of this.collection.listener('change')) {
-        this.renderTable();
+        this.renderList();
         this.updatePageButtons();
       }
     })();
+
+    if (!hideErrorLogs) {
+      (async () => {
+        for await (let { error } of this.collection.listener('error')) {
+          console.error(
+            `Collection browser encountered an error: ${error.message}`
+          );
+        }
+      })();
+    }
   }
 }
 

package/collection-router.js

@@ -0,0 +1,156 @@
+import { SocketConsumer } from './socket.js';
+import AGCollection from '/node_modules/ag-collection/ag-collection.js';
+import { renderTemplate } from './utils.js';
+import './static-router.js';
+
+const DEFAULT_RELOAD_DELAY = 0;
+
+export class CollectionRouter extends SocketConsumer {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.pages = {};
+
+    this.handleSlotChangeEvent = () => {
+      let pageTemplates = this.shadowRoot.querySelector('slot[name="page"]').assignedNodes();
+
+      for (let template of pageTemplates) {
+        let routePath = template.getAttribute('route-path');
+        this.pages[routePath] = template;
+      }
+      if (this.collection && this.collection.isLoaded) {
+        this.renderRoutes();
+      }
+    };
+  }
+
+  connectedCallback() {
+    this.isReady = true;
+    this.socket = this.getSocket();
+    this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
+    this.render();
+  }
+
+  disconnectedCallback() {
+    this.shadowRoot.removeEventListener('slotchange', this.handleSlotChangeEvent);
+  }
+
+  static get observedAttributes() {
+    return [
+      'collection-type',
+      'collection-fields',
+      'collection-view',
+      'collection-view-params',
+      'collection-page-size',
+      'collection-page-offset',
+      'hide-route-logs',
+      'hide-error-logs'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isReady) return;
+    if (this.collection && name === 'collection-page-offset') {
+      let newOffset = Number(newValue);
+      if (newOffset !== this.collection.meta.pageOffset) {
+        this.collection.fetchPage(newOffset);
+      }
+    } else {
+      this.render();
+    }
+  }
+
+  renderRoutes() {
+    let hideRouteLogs = this.hasAttribute('hide-route-logs');
+    let viewport = this.shadowRoot.querySelector('slot[name="viewport"]').assignedNodes()[0];
+    if (!viewport) return;
+
+    let pageEntries = Object.entries(this.pages);
+    if (!pageEntries.length) return;
+
+    let routesList = [];
+
+    viewport.innerHTML = `
+      <static-router>
+        ${
+          pageEntries.map(
+            ([ route, template ]) => {
+              let routePath = template.getAttribute('route-path');
+              let pageTemplates = this.collection.value.map(
+                (modelItem) => {
+                  let pagePath = renderTemplate(routePath, this.collection.type, modelItem);
+                  let templateHTML = renderTemplate(template.innerHTML, this.collection.type, modelItem);
+                  routesList.push(pagePath);
+                  return `<template slot="page" route-path="${pagePath}">${templateHTML}</template>`
+                }
+              );
+              return pageTemplates.join('');
+            }
+          ).join('')
+        }
+        <div slot="viewport"></div>
+      </static-router>
+    `;
+
+    if (!hideRouteLogs) console.log(`The following routes have been registered: ${routesList.join(', ')}`);
+  }
+
+  render() {
+    let collectionType = this.getAttribute('collection-type');
+    let collectionFields = this.getAttribute('collection-fields');
+    let collectionView = this.getAttribute('collection-view');
+    let collectionPageSize = this.getAttribute('collection-page-size');
+    let collectionViewParams = this.getAttribute('collection-view-params');
+    let collectionPageOffset = this.getAttribute('collection-page-offset');
+    let hideErrorLogs = this.hasAttribute('hide-error-logs');
+    let collectionReloadDelay = Number(
+      this.getAttribute('collection-reload-delay') || DEFAULT_RELOAD_DELAY
+    );
+    let viewParams = Object.fromEntries(collectionViewParams.split(',').map((pair) => pair.split('=')));
+    if (this.collection) this.collection.destroy();
+
+    this.collection = new AGCollection({
+      socket: this.socket,
+      type: collectionType,
+      fields: collectionFields.split(',').map(field => field.trim()),
+      view: collectionView,
+      viewParams,
+      pageSize: Number(collectionPageSize || 10),
+      pageOffset: Number(collectionPageOffset || 0),
+      changeReloadDelay: collectionReloadDelay
+    });
+
+    this.shadowRoot.innerHTML = `
+      <slot name="page"></slot>
+      <slot name="viewport"></slot>
+    `;
+
+    (async () => {
+      await this.collection.listener('load').once();
+      if (!this.collection.value.length) {
+        this.renderRoutes();
+      }
+      this.setAttribute('is-loaded', '');
+      this.dispatchEvent(new CustomEvent('load', { bubbles: true }));
+    })();
+
+    (async () => {
+      for await (let event of this.collection.listener('change')) {
+        if (!this.collection.isLoaded) continue;
+        this.renderRoutes();
+      }
+    })();
+
+    if (!hideErrorLogs) {
+      (async () => {
+        for await (let { error } of this.collection.listener('error')) {
+          console.error(
+            `Collection router encountered an error: ${error.message}`
+          );
+        }
+      })();
+    }
+  }
+}
+
+window.customElements.define('collection-router', CollectionRouter);

package/model-input.js

@@ -1,13 +1,12 @@
-import { getSocket } from './socket.js';
+import { SocketConsumer } from './socket.js';
 import { getSafeHTML, debouncer } from './utils.js';
 import AGModel from '/node_modules/ag-model/ag-model.js';
 
-class ModelInput extends HTMLElement {
+class ModelInput extends SocketConsumer {
   constructor() {
     super();
     this.isReady = false;
     this.inputElement = null;
-    this.socket = null;
   }
   connectedCallback() {
     this.isReady = true;
@@ -73,6 +72,7 @@ class ModelInput extends HTMLElement {
     let modelField = this.getAttribute('model-field');
     let options = this.getAttribute('options');
     let height = this.getAttribute('height');
+    let hideErrorLogs = this.hasAttribute('hide-error-logs');
     let currentNode = this.parentNode;
     let model;
     let isModelLocal = false;
@@ -80,17 +80,26 @@ class ModelInput extends HTMLElement {
       while (currentNode) {
         model = currentNode[modelInstanceProperty];
         if (model) break;
-        currentNode = currentNode.parentNode;
+        currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }
       if (!model) return;
     } else {
-      this.socket = getSocket();
+      this.socket = this.getSocket();
       model = new AGModel({
         socket: this.socket,
         type: modelType,
         id: modelId,
         fields: [ modelField ]
       });
+      if (!hideErrorLogs) {
+        (async () => {
+          for await (let { error } of model.listener('error')) {
+            console.error(
+              `Model input encountered an error: ${error.message}`
+            );
+          }
+        })();
+      }
       isModelLocal = true;
     }
     if (model.isLoaded) {

package/model-text.js

@@ -1,11 +1,11 @@
-import { getSocket } from './socket.js';
+import { SocketConsumer } from './socket.js';
 import { getSafeHTML } from './utils.js';
+import AGModel from '/node_modules/ag-model/ag-model.js';
 
-class ModelText extends HTMLElement {
+class ModelText extends SocketConsumer {
   connectedCallback() {
     this.isReady = true;
     this.destroy = () => {};
-    this.socket = null;
     this.render();
   }
 
@@ -34,6 +34,7 @@ class ModelText extends HTMLElement {
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelField = this.getAttribute('model-field');
+    let hideErrorLogs = this.hasAttribute('hide-error-logs');
     let currentNode = this.parentNode;
     let model;
     let isModelLocal = false;
@@ -41,17 +42,26 @@ class ModelText extends HTMLElement {
       while (currentNode) {
         model = currentNode[modelInstanceProperty];
         if (model) break;
-        currentNode = currentNode.parentNode;
+        currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }
       if (!model) return;
     } else {
-      this.socket = getSocket();
+      this.socket = this.getSocket();
       model = new AGModel({
         socket: this.socket,
         type: modelType,
         id: modelId,
         fields: [ modelField ]
       });
+      if (!hideErrorLogs) {
+        (async () => {
+          for await (let { error } of model.listener('error')) {
+            console.error(
+              `Model input encountered an error: ${error.message}`
+            );
+          }
+        })();
+      }
       isModelLocal = true;
     }
     if (model.isLoaded) {
@@ -69,7 +79,7 @@ class ModelText extends HTMLElement {
     (async () => {
       for await (let event of changeConsumer) {
         if (event.resourceField !== modelField || !event.isRemote) continue;
-        fieldValue = getSafeHTML(model.value[modelField]);
+        let fieldValue = getSafeHTML(model.value[modelField]);
         this.innerHTML = fieldValue;
       }
     })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {

package/socket.js

@@ -2,19 +2,107 @@ import { create } from '/node_modules/socketcluster-client/socketcluster-client.
 
 const DEFAULT_AUTH_TOKEN_NAME = 'saasufy.authToken';
 
-let socket;
+let globalSocket;
 
-export function createSocket(options) {
-  socket = create({
+let urlPartsRegExp = /(^[^:]+):\/\/([^:\/]*)(:[0-9]*)?(\/.*)/;
+
+export function createGlobalSocket(options) {
+  globalSocket = create({
     authTokenName: DEFAULT_AUTH_TOKEN_NAME,
     ...options
   });
-  return socket;
+  return globalSocket;
+}
+
+export function getGlobalSocket(options) {
+  if (globalSocket) {
+    return globalSocket;
+  }
+  return createGlobalSocket(options);
 }
 
-export function getSocket(options) {
-  if (socket) {
+export class SocketProvider extends HTMLElement {
+  constructor() {
+    super();
+    this.saasufySocket = null;
+    this.isReady = false;
+  }
+
+  connectedCallback() {
+    this.isReady = true;
+    this.getSocket();
+  }
+
+  disconnectedCallback() {
+    this.destroySocket();
+  }
+
+  static get observedAttributes() {
+    return [
+      'url',
+      'auth-token-name'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isReady) return;
+    this.destroySocket();
+    this.getSocket();
+  }
+
+  destroySocket() {
+    if (this.saasufySocket) {
+      this.saasufySocket.disconnect();
+    }
+  }
+
+  getSocket() {
+    if (this.saasufySocket) {
+      return this.saasufySocket;
+    }
+    return this.createSocket();
+  }
+
+  createSocket() {
+    let authTokenName = this.getAttribute('auth-token-name') || DEFAULT_AUTH_TOKEN_NAME;
+    let url = this.getAttribute('url') || '';
+    let urlOptions;
+    let matchedList = url.match(urlPartsRegExp);
+    if (matchedList) {
+      let [ fullMatch, protocolScheme, hostname, port, path ] = matchedList;
+      if (port) {
+        port = port.replace(/^:/, '');
+      }
+      urlOptions = {
+        protocolScheme,
+        hostname,
+        port,
+        path
+      };
+    } else {
+      urlOptions = {};
+    }
+    this.saasufySocket = create({
+      authTokenName,
+      ...urlOptions
+    });
+
+    return this.saasufySocket;
+  }
+}
+
+export class SocketConsumer extends HTMLElement {
+  getSocket() {
+    let socket = null;
+    let currentNode = this.parentNode;
+    while (currentNode) {
+      socket = currentNode.saasufySocket;
+      if (socket) break;
+      currentNode = currentNode.getRootNode().host || currentNode.parentNode;
+    }
     return socket;
   }
-  return createSocket(options);
 }
+
+window.customElements.define('socket-provider', SocketProvider);
+window.customElements.define('socket-consumer', SocketConsumer);

package/static-router.js

@@ -0,0 +1,94 @@
+import { getSafeHTML } from './utils.js';
+
+export class StaticRouter extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    this.pages = {};
+    this.pageRouteInfos = [];
+
+    this.hashStartRegex = /^#/;
+
+    this.handleHashChangeEvent = () => {
+      this.renderCurrentPage();
+    };
+
+    this.handleSlotChangeEvent = () => {
+      let pageTemplates = this.shadowRoot.querySelector('slot[name="page"]').assignedNodes();
+
+      for (let template of pageTemplates) {
+        let routePath = template.getAttribute('route-path');
+        this.pages[routePath] = template;
+      }
+
+      this.pageRouteInfos = Object.keys(this.pages).map((route) => {
+        return {
+          regExp: new RegExp(`^${route.replace(/\/:[^\/]+/g, '/([^/]*)').replace(/\//g, '\\/')}$`, 'g'),
+          route,
+          params: [ ...route.matchAll(/:[^\/]*/g) ].map(paramMatch => paramMatch[0].replace(':', ''))
+        };
+      });
+
+      this.renderCurrentPage();
+    };
+  }
+
+  computeRouteArgs(page, regExp, params) {
+    let match = page.matchAll(regExp).next().value || [];
+    let argEntries = match
+      .slice(1)
+      .map((groupMatch, i) => [ params[i], groupMatch ]);
+    return Object.fromEntries(argEntries);
+  }
+
+  connectedCallback() {
+    window.addEventListener('hashchange', this.handleHashChangeEvent);
+    this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
+    this.render();
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener('hashchange', this.handleHashChangeEvent);
+    this.shadowRoot.removeEventListener('slotchange', this.handleSlotChangeEvent);
+  }
+
+  renderCurrentPage() {
+    let routerViewport = this.shadowRoot.querySelector('slot[name="viewport"]').assignedNodes()[0];
+    if (!routerViewport) return;
+
+    let { hash } = location;
+    let pagePath = hash.replace(this.hashStartRegex, '');
+
+    let { route, regExp, params } = this.pageRouteInfos.find(
+      ({ regExp }) => pagePath.match(regExp)
+    ) || {};
+
+    let pageTemplate = this.pages[route];
+    if (!pageTemplate) return;
+
+    let routeArgs;
+    if (route) {
+      routeArgs = this.computeRouteArgs(pagePath, regExp, params);
+    } else {
+      routeArgs = {};
+    }
+
+    let templateHTML = pageTemplate.innerHTML;
+    for (let [ key, value ] of Object.entries(routeArgs)) {
+      let regExp = new RegExp(`{{${key}}}`, 'g');
+      templateHTML = templateHTML.replace(regExp, getSafeHTML(value));
+    }
+
+    routerViewport.innerHTML = templateHTML;
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <slot name="page"></slot>
+      <slot name="viewport"></slot>
+    `;
+  }
+}
+
+window.customElements.define('static-router', StaticRouter);

package/utils.js

@@ -155,6 +155,29 @@ export function createModel(modelOptions) {
   return model;
 }
 
+let templateFormatters = {
+  url: (value) => String(value).toLowerCase().replace(/ /g, '-'),
+  lowerCase: (value) => String(value).toLowerCase(),
+  upperCase: (value) => String(value).toUpperCase(),
+  capitalize: (value) => {
+    let valueString = String(value);
+    return `${valueString.slice(0, 1).toUpperCase()}${valueString.slice(1)}`;
+  }
+};
+
+export function renderTemplate(templateString, dataType, data) {
+  for (let [ field, value ] of Object.entries(data)) {
+    let safeValue = getSafeHTML(value);
+    for (let [ formatName, formatFunction ] of Object.entries(templateFormatters)) {
+      let formatRegExp = new RegExp(`{{${formatName}:${dataType}.${field}}}`, 'g');
+      templateString = templateString.replace(formatRegExp, formatFunction(safeValue));
+    }
+    let regExp = new RegExp(`{{${dataType}.${field}}}`, 'g');
+    templateString = templateString.replace(regExp, safeValue);
+  }
+  return templateString;
+}
+
 export function wait(duration) {
   return new Promise((resolve) => setTimeout(resolve, duration));
 }