saasufy-components 1.1.0 → 1.1.1

package/{static-router.js → app-router.js}

@@ -1,6 +1,7 @@
 import { getSafeHTML } from './utils.js';
+import { renderTemplate } from './utils.js';
 
-export class StaticRouter extends HTMLElement {
+export class AppRouter extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
@@ -74,13 +75,7 @@ export class StaticRouter extends HTMLElement {
       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;
+    routerViewport.innerHTML = renderTemplate(pageTemplate.innerHTML, routeArgs);
   }
 
   render() {
@@ -91,4 +86,4 @@ export class StaticRouter extends HTMLElement {
   }
 }
 
-window.customElements.define('static-router', StaticRouter);
+window.customElements.define('app-router', AppRouter);

package/collection-browser.js

@@ -155,7 +155,7 @@ class CollectionBrowser extends SocketConsumer {
     let items = [];
 
     for (let modelItem of this.collection.value) {
-      let itemString = renderTemplate(itemTemplate.innerHTML, this.collection.type, modelItem);
+      let itemString = renderTemplate(itemTemplate.innerHTML, modelItem, this.collection.type);
       items.push(itemString);
     }
     let noItemTemplate = this.shadowRoot.querySelector('slot[name="no-item"]').assignedNodes()[0];

package/package.json

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

package/utils.js

@@ -165,14 +165,14 @@ let templateFormatters = {
   }
 };
 
-export function renderTemplate(templateString, dataType, data) {
+export function renderTemplate(templateString, data, dataType) {
   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');
+      let formatRegExp = new RegExp(`{{${formatName}:${dataType ? dataType + '.' : ''}${field}}}`, 'g');
       templateString = templateString.replace(formatRegExp, formatFunction(safeValue));
     }
-    let regExp = new RegExp(`{{${dataType}.${field}}}`, 'g');
+    let regExp = new RegExp(`{{${dataType ? dataType + '.' : ''}${field}}}`, 'g');
     templateString = templateString.replace(regExp, safeValue);
   }
   return templateString;

package/collection-router.js

@@ -1,156 +0,0 @@
-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);