web-manager 4.0.19 → 4.0.21

package/README.md

@@ -314,6 +314,71 @@ const context = Manager.bindings().getContext();
 Manager.bindings().clear();
 ```
 
+#### Attribute Actions
+```html
+<!-- Set an attribute value -->
+<img data-wm-bind="@attr src auth.user.photoURL" />
+<a data-wm-bind="@attr href settings.profileUrl">Profile</a>
+
+<!-- Multiple attributes on same element -->
+<img data-wm-bind="@attr src auth.user.photoURL, @attr alt auth.user.displayName" />
+```
+
+#### Multiple Actions
+You can combine multiple actions on a single element by separating them with commas:
+
+```html
+<!-- Set text AND show/hide -->
+<div data-wm-bind="@show auth.user, @text auth.user.displayName"></div>
+
+<!-- Set text AND multiple attributes -->
+<img data-wm-bind="@text auth.user.displayName, @attr src auth.user.photoURL, @attr title auth.user.email" />
+
+<!-- Multiple attributes -->
+<a data-wm-bind="@attr href settings.url, @attr target settings.target, @text settings.linkText"></a>
+```
+
+#### Skeleton Loaders
+Add the `wm-binding-skeleton` class to show a loading skeleton while data is being bound:
+
+```html
+<!-- Shows a shimmer loading effect until data is bound -->
+<span data-wm-bind="auth.user.displayName" class="wm-binding-skeleton"></span>
+
+<!-- Profile card with multiple skeleton loaders -->
+<div class="profile-card">
+  <img data-wm-bind="@attr src auth.user.photoURL" class="wm-binding-skeleton">
+  <h3 data-wm-bind="auth.user.displayName" class="wm-binding-skeleton"></h3>
+  <p data-wm-bind="auth.user.email" class="wm-binding-skeleton"></p>
+</div>
+
+<!-- Elements without the class won't show skeleton loaders -->
+<span data-wm-bind="settings.theme"></span>
+```
+
+The skeleton loader automatically:
+- Displays a shimmer animation while the element is unbound
+- Hides the text content during loading
+- Prevents interaction until data is loaded
+- Fades in smoothly when data arrives
+- Adapts to dark themes
+- Respects `prefers-reduced-motion` accessibility settings
+
+#### Visual Feedback
+When an element is bound, Web Manager automatically adds the `wm-bound` class to it. You can use this class for styling or debugging:
+
+```css
+/* Add a subtle indicator for bound elements in development */
+.wm-bound {
+  outline: 1px dashed rgba(0, 123, 255, 0.3);
+}
+
+/* Custom styling after binding */
+.wm-bound {
+  /* Element has been successfully bound */
+}
+```
+
 #### Supported Actions
 - **`@text`** (default): Sets the text content of the element
 - **`@show`**: Shows the element when condition is true

package/dist/modules/bindings.js

@@ -35,82 +35,106 @@ class Bindings {
     bindElements.forEach(element => {
       const bindValue = element.getAttribute('data-wm-bind');
 
-      // Parse action and expression
+      // Split by comma to support multiple actions
+      const bindings = this._parseBindings(bindValue);
+
+      // Execute each action
+      bindings.forEach(({ action, expression }) => {
+        this._executeAction(element, action, expression, context);
+      });
+
+      // Add bound class to indicate element has been processed
+      if (!element.classList.contains('wm-bound')) {
+        element.classList.add('wm-bound');
+      }
+    });
+  }
+
+  // Parse binding string into separate actions
+  _parseBindings(bindValue) {
+    const bindings = [];
+
+    // Split by comma, but be smart about it
+    // We need to handle cases where commas might be inside expressions
+    const parts = bindValue.split(',').map(p => p.trim());
+
+    parts.forEach(part => {
       let action = '@text'; // Default action
-      let expression = bindValue;
+      let expression = part;
 
       // Check if it starts with an action keyword
-      if (bindValue.startsWith('@')) {
-        const spaceIndex = bindValue.indexOf(' ');
+      if (part.startsWith('@')) {
+        const spaceIndex = part.indexOf(' ');
         if (spaceIndex > -1) {
-          action = bindValue.slice(0, spaceIndex);
-          expression = bindValue.slice(spaceIndex + 1);
+          action = part.slice(0, spaceIndex);
+          expression = part.slice(spaceIndex + 1).trim();
         } else {
           // No space means it's just an action with no expression (like @hide)
-          action = bindValue;
+          action = part;
           expression = '';
         }
       }
 
-      // Execute the action
-      switch (action) {
-        case '@show':
-          // Show element if condition is true (or always if no condition)
-          const shouldShow = expression ? this._evaluateCondition(expression, context) : true;
-          if (shouldShow) {
-            element.removeAttribute('hidden');
-          } else {
-            element.setAttribute('hidden', '');
-          }
-          break;
-
-        case '@hide':
-          // Hide element if condition is true (or always if no condition)
-          const shouldHide = expression ? this._evaluateCondition(expression, context) : true;
-          if (shouldHide) {
-            element.setAttribute('hidden', '');
-          } else {
-            element.removeAttribute('hidden');
-          }
-          break;
-
-        case '@attr':
-          // Set attribute value
-          // Format: @attr attributeName expression
-          const attrParts = expression.split(' ');
-          const attrName = attrParts[0];
-          const attrExpression = attrParts.slice(1).join(' ');
-          const attrValue = this._resolvePath(context, attrExpression) || '';
-
-          if (attrValue) {
-            element.setAttribute(attrName, attrValue);
-          } else {
-            element.removeAttribute(attrName);
-          }
-          break;
-
-        case '@text':
-        default:
-          // Set text content (default behavior)
-          const value = this._resolvePath(context, expression) || '';
-
-          if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
-            element.value = value;
-          } else {
-            element.textContent = value;
-          }
-          break;
-
-        // Future actions can be added here:
-        // case '@class':
-        // case '@style':
-      }
-
-      // Add bound class to indicate element has been processed
-      if (!element.classList.contains('wm-bound')) {
-        element.classList.add('wm-bound');
-      }
+      bindings.push({ action, expression });
     });
+
+    return bindings;
+  }
+
+  // Execute a single action on an element
+  _executeAction(element, action, expression, context) {
+    switch (action) {
+      case '@show':
+        // Show element if condition is true (or always if no condition)
+        const shouldShow = expression ? this._evaluateCondition(expression, context) : true;
+        if (shouldShow) {
+          element.removeAttribute('hidden');
+        } else {
+          element.setAttribute('hidden', '');
+        }
+        break;
+
+      case '@hide':
+        // Hide element if condition is true (or always if no condition)
+        const shouldHide = expression ? this._evaluateCondition(expression, context) : true;
+        if (shouldHide) {
+          element.setAttribute('hidden', '');
+        } else {
+          element.removeAttribute('hidden');
+        }
+        break;
+
+      case '@attr':
+        // Set attribute value
+        // Format: @attr attributeName expression
+        const attrParts = expression.split(' ');
+        const attrName = attrParts[0];
+        const attrExpression = attrParts.slice(1).join(' ');
+        const attrValue = this._resolvePath(context, attrExpression) || '';
+
+        if (attrValue) {
+          element.setAttribute(attrName, attrValue);
+        } else {
+          element.removeAttribute(attrName);
+        }
+        break;
+
+      case '@text':
+      default:
+        // Set text content (default behavior)
+        const value = this._resolvePath(context, expression) || '';
+
+        if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+          element.value = value;
+        } else {
+          element.textContent = value;
+        }
+        break;
+
+      // Future actions can be added here:
+      // case '@class':
+      // case '@style':
+    }
   }
 
   // Resolve nested object path

package/firebase-debug.log

@@ -6,3 +6,11 @@
 [debug] [2025-10-20T10:38:46.422Z] > authorizing via signed-in user (ian.wiedenman@gmail.com)
 [debug] [2025-10-20T10:38:46.422Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
 [debug] [2025-10-20T10:38:46.422Z] > authorizing via signed-in user (ian.wiedenman@gmail.com)
+[debug] [2025-10-20T11:33:46.238Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
+[debug] [2025-10-20T11:33:46.237Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
+[debug] [2025-10-20T11:33:46.239Z] > authorizing via signed-in user (ian.wiedenman@gmail.com)
+[debug] [2025-10-20T11:33:46.240Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
+[debug] [2025-10-20T11:33:46.240Z] > authorizing via signed-in user (ian.wiedenman@gmail.com)
+[debug] [2025-10-20T11:33:46.239Z] > authorizing via signed-in user (ian.wiedenman@gmail.com)
+[debug] [2025-10-20T11:33:46.240Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
+[debug] [2025-10-20T11:33:46.240Z] > authorizing via signed-in user (ian.wiedenman@gmail.com)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-manager",
-  "version": "4.0.19",
+  "version": "4.0.21",
   "description": "Easily access important variables such as the query string, current domain, and current page in a single object.",
   "main": "dist/index.js",
   "module": "src/index.js",