saasufy-components 7.8.0 → 7.9.1

package/app-router.js

@@ -140,6 +140,15 @@ export class AppRouter extends SocketConsumer {
     return route;
   }
 
+  replaceLocationHash(pagePath) {
+    let cleanPagePath = pagePath || '';
+    let firstChar = cleanPagePath.charAt(0);
+    if (firstChar !== '#') {
+      cleanPagePath = `#${cleanPagePath}`;
+    }
+    location.replace(cleanPagePath);
+  }
+
   renderCurrentPage() {
     let routerViewport = this.shadowRoot.querySelector('slot[name="viewport"]').assignedNodes()[0];
     if (!routerViewport) return;
@@ -199,7 +208,7 @@ export class AppRouter extends SocketConsumer {
         routeArgs = this.computeRouteArgs(pagePath, regExp, params);
         pagePath = this.substituteRouteAgs(authRedirect, routeArgs);
         if (hardRedirect) {
-          location.hash = pagePath;
+          this.replaceLocationHash(pagePath);
           return;
         }
         let result = this.getMatchingPage(pagePath, 'auth-redirect');
@@ -211,7 +220,7 @@ export class AppRouter extends SocketConsumer {
         routeArgs = this.computeRouteArgs(pagePath, regExp, params);
         pagePath = this.substituteRouteAgs(noAuthRedirect, routeArgs);
         if (hardRedirect) {
-          location.hash = pagePath;
+          this.replaceLocationHash(pagePath);
           return;
         }
         let result = this.getMatchingPage(pagePath, 'no-auth-redirect');
@@ -220,12 +229,12 @@ export class AppRouter extends SocketConsumer {
         regExp = result.regExp;
         params = result.params;
       } else {
+        routeArgs = this.computeRouteArgs(pagePath, regExp, params);
+        pagePath = this.substituteRouteAgs(redirect, routeArgs);
         if (hardRedirect) {
-          location.hash = redirect;
+          this.replaceLocationHash(pagePath);
           return;
         }
-        routeArgs = this.computeRouteArgs(pagePath, regExp, params);
-        pagePath = this.substituteRouteAgs(redirect, routeArgs);
         let result = this.getMatchingPage(pagePath, 'redirect');
         pageTemplate = result.pageTemplate;
         route = result.route;

package/package.json

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

package/utils.js

@@ -484,6 +484,38 @@ export function formatError(error) {
   return error.code === 1009 ? 'Resource exceeded the maximum size' : error.message;
 }
 
+export function logAttributeChanges(...elementSelectors) {
+  let domObserverCallback = (mutationList) => {
+    for (let mutation of mutationList) {
+      let matchingSelector = (elementSelectors || []).find(elementSelector => mutation.target?.matches(elementSelector));
+      let isWatchingElement = !elementSelectors.length || !!matchingSelector;
+      if (mutation.type === 'attributes' && isWatchingElement) {
+        let identifier = mutation.target.id || matchingSelector || mutation.target.nodeName?.toLowerCase();
+        console.log(
+          `[${identifier}] Attribute ${
+            mutation.attributeName
+          } changed to: ${
+            mutation.target.getAttribute(mutation.attributeName)
+          }`
+        );
+      }
+    }
+  };
+
+  let observer = new MutationObserver(domObserverCallback);
+
+  let config = {
+    attributes: true,
+    subtree: true,
+    attributeOldValue: true
+  };
+
+  observer.observe(document, config);
+  return () => {
+    observer.disconnect();
+  };
+}
+
 export function wait(duration) {
   return new Promise((resolve) => setTimeout(resolve, duration));
 }