@webqit/webflo 0.20.39 → 0.20.41

package/package.json

@@ -12,7 +12,7 @@
     "vanila-javascript"
   ],
   "homepage": "https://webqit.io/tooling/webflo",
-  "version": "0.20.39",
+  "version": "0.20.41",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/webflo-runtime/webflo-client/DeviceViewport.js

@@ -69,11 +69,14 @@ export class DeviceViewport {
     #render() {
         const state = this.peek();
         const viewportDirectives = [];
-        const activeKeys = new Set(Object.keys(state).filter(k => !k.startsWith('_')));
+        const activeKeys = new Set(Object.keys(state).filter(k => k !== 'id' && !k.startsWith('_')));
 
         // 1. Handle Title
         if ('title' in state) {
-            document.title = state.title || '';
+            const val = state.title || '';
+            if (document.title !== val) {
+                document.title = val;
+            }
             activeKeys.delete('title');
         }
 
@@ -118,31 +121,27 @@ export class DeviceViewport {
         });
 
         const vContent = viewportDirectives.join(', ');
-        const vEl = this.#elements.viewport || (vContent ? this.#getOrCreate('viewport') : null);
-        if (vEl) {
-            vEl.setAttribute('content', vContent);
-            if (!vContent && this.#ownedElements.has(vEl)) {
-                vEl.remove();
-                delete this.#elements.viewport;
-            }
-        }
+        this.#setAttr('viewport', vContent);
     }
 
-    #setAttr(jsKey, val, media = null) {
-        const cacheKey = media ? `${jsKey}-${media}` : jsKey;
+    #setAttr(jsKey, val, media = '') {
         const config = this.#specials[jsKey];
+        const attrName = config?.type === 'link' ? 'href' : 'content';
 
         if (val !== undefined && val !== null) {
             const el = this.#getOrCreate(jsKey, media);
-            el.setAttribute(config.type === 'link' ? 'href' : 'content', val);
+            if (el.getAttribute(attrName) !== val) {
+                el.setAttribute(attrName, val);
+            }
         } else {
+            const cacheKey = media ? `${jsKey}-${media}` : jsKey;
             const el = this.#elements[cacheKey];
             if (el) {
                 if (this.#ownedElements.has(el)) {
                     el.remove();
                     delete this.#elements[cacheKey];
-                } else {
-                    el.setAttribute(config.type === 'link' ? 'href' : 'content', '');
+                } else if (el.getAttribute(attrName) !== '') {
+                    el.setAttribute(attrName, '');
                 }
             }
         }
@@ -150,7 +149,7 @@ export class DeviceViewport {
 
     #parseViewport = (c) => Object.fromEntries(c.split(',').filter(Boolean).map(s => {
         const [k, v] = s.split('=').map(p => p.trim());
-        return [k.replace(/-([a-z])/g, g => g.toUpperCase()), v || true];
+        return [k.replace(/-([a-z])/g, g => g[1].toUpperCase()), v || true];
     }));
 
     push(id, config) {
@@ -160,13 +159,15 @@ export class DeviceViewport {
         this.#scheduleRender();
     }
 
-    pop(id) {
-        if (!id) throw new Error("pop() requires a target ID");
-        const idx = this.#stack.findIndex(e => e.id === id);
-        if (idx > 0) { // Never pop the initial state at index 0
-            this.#stack.splice(idx, 1);
-            this.#scheduleRender();
-        }
+    pop(...ids) {
+        if (!ids.length) throw new Error("pop() requires a target ID");
+        ids.forEach((id) => {
+            const idx = this.#stack.findIndex(e => e.id === id);
+            if (idx > 0) { // Never pop the initial state at index 0
+                this.#stack.splice(idx, 1);
+            }
+        });
+        this.#scheduleRender();
     }
 
     peek() { return this.#stack[this.#stack.length - 1]; }