web-manager 4.3.1 → 4.3.3

package/src/modules/bindings.js

@@ -0,0 +1,314 @@
+class Bindings {
+  constructor(manager) {
+    this.manager = manager;
+    this._context = {};
+  }
+
+  // Update bindings with new data
+  update(data = {}) {
+    // Merge new data with existing context
+    // Whatever keys are provided will overwrite existing values
+    this._context = {
+      ...this._context,
+      ...data
+    };
+
+    // Get the top-level keys that were updating
+    const updatedKeys = Object.keys(data);
+
+    this._updateBindings(this._context, updatedKeys);
+  }
+
+  // Get current context
+  getContext() {
+    return this._context;
+  }
+
+  // Clear all context
+  clear() {
+    this._context = {};
+    this._updateBindings(this._context, null); // null = update all bindings
+  }
+
+  // Main binding update system
+  _updateBindings(context, updatedKeys = null) {
+    // Find all elements with data-wm-bind attribute
+    const bindElements = document.querySelectorAll('[data-wm-bind]');
+
+    /* @dev-only:start */
+    {
+      console.log('[Bindings] Updating bindings', context, updatedKeys);
+    }
+    /* @dev-only:end */
+
+    bindElements.forEach(element => {
+      const bindValue = element.getAttribute('data-wm-bind');
+
+      // Split by comma to support multiple actions
+      const bindings = this._parseBindings(bindValue);
+
+      // Execute each action, track if any were actually processed
+      let anyProcessed = false;
+      bindings.forEach(({ action, expression }) => {
+        if (this._executeAction(element, action, expression, context, updatedKeys)) {
+          anyProcessed = true;
+        }
+      });
+
+      // Only remove skeleton if at least one binding was actually processed
+      if (!anyProcessed) return;
+
+      // Add bound class to trigger fade out
+      element.classList.add('wm-bound');
+
+      // Remove skeleton class after fade completes
+      setTimeout(() => {
+        element.classList.remove('wm-binding-skeleton');
+      }, 300);
+    });
+  }
+
+  // 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 = part;
+
+      // Check if it starts with an action keyword
+      if (part.startsWith('@')) {
+        const spaceIndex = part.indexOf(' ');
+        if (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 = part;
+          expression = '';
+        }
+      }
+
+      bindings.push({ action, expression });
+    });
+
+    return bindings;
+  }
+
+  // Execute a single action on an element
+  // Returns true if the action was processed, false if skipped
+  _executeAction(element, action, expression, context, updatedKeys = null) {
+    switch (action) {
+      case '@show':
+        // Show element if condition is true (or always if no condition)
+
+        // Check if this path should be updated
+        if (!this._shouldUpdatePath(expression, updatedKeys)) {
+          return false;
+        }
+
+        const shouldShow = expression ? this._evaluateCondition(expression, context) : true;
+        if (shouldShow) {
+          element.removeAttribute('hidden');
+        } else {
+          element.setAttribute('hidden', '');
+        }
+        return true;
+
+      case '@hide':
+        // Hide element if condition is true (or always if no condition)
+
+        // Check if this path should be updated
+        if (!this._shouldUpdatePath(expression, updatedKeys)) {
+          return false;
+        }
+
+        const shouldHide = expression ? this._evaluateCondition(expression, context) : true;
+        if (shouldHide) {
+          element.setAttribute('hidden', '');
+        } else {
+          element.removeAttribute('hidden');
+        }
+        return true;
+
+      case '@attr':
+        // Set attribute value
+        // Format: @attr attributeName expression
+        const attrParts = expression.split(' ');
+        const attrName = attrParts[0];
+        const attrExpression = attrParts.slice(1).join(' ');
+
+        // Check if this path should be updated
+        if (!this._shouldUpdatePath(attrExpression, updatedKeys)) {
+          return false;
+        }
+
+        const attrValue = this._resolvePath(context, attrExpression) || '';
+
+        if (attrValue) {
+          // Block javascript: protocol on URL attributes to prevent XSS
+          const URL_ATTRS = ['href', 'src', 'action', 'formaction'];
+          if (URL_ATTRS.includes(attrName.toLowerCase())
+            && /^\s*javascript\s*:/i.test(String(attrValue))) {
+            console.warn(`[Bindings] Blocked javascript: URL in @attr ${attrName}`);
+            return true;
+          }
+
+          element.setAttribute(attrName, attrValue);
+        } else {
+          element.removeAttribute(attrName);
+        }
+        return true;
+
+      case '@style':
+        // Set CSS custom property or style
+        // Format: @style propertyName expression
+        const styleParts = expression.split(' ');
+        const styleName = styleParts[0];
+        const styleExpression = styleParts.slice(1).join(' ');
+
+        // Check if this path should be updated
+        if (!this._shouldUpdatePath(styleExpression, updatedKeys)) {
+          return false;
+        }
+
+        const styleValue = this._resolvePath(context, styleExpression);
+
+        if (styleValue !== null && styleValue !== undefined && styleValue !== '') {
+          // If it starts with --, it's a CSS custom property
+          if (styleName.startsWith('--')) {
+            element.style.setProperty(styleName, styleValue);
+          } else {
+            // Regular style property
+            element.style[styleName] = styleValue;
+          }
+        } else {
+          // Remove the style if value is empty
+          if (styleName.startsWith('--')) {
+            element.style.removeProperty(styleName);
+          } else {
+            element.style[styleName] = '';
+          }
+        }
+        return true;
+
+      case '@value':
+        // Set input/textarea value explicitly
+        // Check if this path should be updated
+        if (!this._shouldUpdatePath(expression, updatedKeys)) {
+          return false;
+        }
+
+        const inputValue = this._resolvePath(context, expression) ?? '';
+        element.value = inputValue;
+        return true;
+
+      case '@text':
+      default:
+        // Set text content (default behavior)
+
+        // Check if this path should be updated
+        if (!this._shouldUpdatePath(expression, updatedKeys)) {
+          return false;
+        }
+
+        const textValue = this._resolvePath(context, expression) ?? '';
+        element.textContent = textValue;
+        return true;
+    }
+  }
+
+  // Check if a path should be updated based on updatedKeys
+  _shouldUpdatePath(path, updatedKeys) {
+    // If no updatedKeys filter, always update
+    if (updatedKeys === null || !path) {
+      return true;
+    }
+
+    // Strip negation operator if present before extracting root key
+    const cleanPath = path.trim().replace(/^!/, '');
+
+    // Extract the root key from the path
+    const rootKey = cleanPath.split('.')[0];
+
+    // Only update if the root key is in updatedKeys
+    return updatedKeys.includes(rootKey);
+  }
+
+  // Resolve nested object path
+  _resolvePath(obj, path) {
+    if (!obj || !path) return null;
+
+    return path.split('.').reduce((current, key) => {
+      return current?.[key];
+    }, obj);
+  }
+
+  // Safely evaluate simple conditions
+  _evaluateCondition(condition, context) {
+    try {
+      // Replace context references with actual values
+      // Support: auth.user.field, auth.account.field, simple comparisons
+
+      // Check for negation operator at the start
+      if (condition.trim().startsWith('!')) {
+        const expression = condition.trim().slice(1).trim();
+        const value = this._resolvePath(context, expression);
+        return !value;
+      }
+
+      // Parse the condition to extract left side, operator, and right side
+      const comparisonMatch = condition.match(/^(.+?)\s*(===|!==|==|!=|>|<|>=|<=)\s*(.+)$/);
+
+      if (comparisonMatch) {
+        const [, leftPath, operator, rightValue] = comparisonMatch;
+
+        // Get the left side value
+        const leftValue = this._resolvePath(context, leftPath.trim());
+
+        // Parse the right side (could be string, number, boolean)
+        let right = rightValue.trim();
+
+        // Remove quotes if it's a string
+        if ((right.startsWith("'") && right.endsWith("'")) ||
+            (right.startsWith('"') && right.endsWith('"'))) {
+          right = right.slice(1, -1);
+        } else if (right === 'true') {
+          right = true;
+        } else if (right === 'false') {
+          right = false;
+        } else if (right === 'null') {
+          right = null;
+        } else if (!isNaN(right)) {
+          right = Number(right);
+        }
+
+        // Evaluate based on operator
+        switch (operator) {
+          case '===': return leftValue === right;
+          case '!==': return leftValue !== right;
+          case '==': return leftValue == right;
+          case '!=': return leftValue != right;
+          case '>': return leftValue > right;
+          case '<': return leftValue < right;
+          case '>=': return leftValue >= right;
+          case '<=': return leftValue <= right;
+          default: return false;
+        }
+      } else {
+        // Simple truthy check (e.g., "auth.user.emailVerified" or "auth.account")
+        const value = this._resolvePath(context, condition.trim());
+        return !!value;
+      }
+    } catch (error) {
+      console.warn('Failed to evaluate condition:', condition, error);
+      return false;
+    }
+  }
+}
+
+export default Bindings;

package/src/modules/dom.js

@@ -0,0 +1,96 @@
+// Load external script dynamically
+export function loadScript(options) {
+  return new Promise((resolve, reject) => {
+    // Handle simple string parameter
+    if (typeof options === 'string') {
+      options = { src: options };
+    }
+
+    const {
+      src,
+      async = true,
+      defer = false,
+      crossorigin = false,
+      integrity = null,
+      attributes = {},
+      timeout = 60000,
+      retries = 0,
+      parent = null
+    } = options;
+
+    if (!src) {
+      return reject(new Error('Script source is required'));
+    }
+
+    let timeoutId;
+    let retryCount = 0;
+
+    function createAndLoadScript() {
+      const script = document.createElement('script');
+      script.src = src;
+      script.async = async;
+      script.defer = defer;
+
+      if (crossorigin) {
+        script.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous';
+      }
+
+      if (integrity) {
+        script.integrity = integrity;
+      }
+
+      // Add custom attributes
+      Object.keys(attributes).forEach(name => {
+        script.setAttribute(name, attributes[name]);
+      });
+
+      // Set up timeout
+      if (timeout > 0) {
+        timeoutId = setTimeout(() => {
+          script.remove();
+          handleError(new Error(`Script load timeout: ${src}`));
+        }, timeout);
+      }
+
+      // Event handlers
+      script.onload = () => {
+        clearTimeout(timeoutId);
+        resolve({ script, cached: false });
+      };
+
+      script.onerror = (error) => {
+        clearTimeout(timeoutId);
+        script.remove();
+        handleError(new Error(`Failed to load script ${src}`, { cause: error }));
+      };
+
+      // Append to document
+      const $targetParent = parent || document.head || document.documentElement;
+      $targetParent.appendChild(script);
+    }
+
+    function handleError(error) {
+      if (retryCount < retries) {
+        retryCount++;
+        setTimeout(createAndLoadScript, 1000 * retryCount);
+      } else {
+        reject(error);
+      }
+    }
+
+    createAndLoadScript();
+  });
+}
+
+// Return promise that resolves when DOM is ready
+export function ready() {
+  return new Promise((resolve) => {
+    if (document.readyState === 'loading') {
+      // Wait for DOM if still loading
+      document.addEventListener('DOMContentLoaded', resolve);
+    } else {
+      // DOM is already ready
+      resolve();
+    }
+  });
+}

package/src/modules/firestore.js

@@ -0,0 +1,306 @@
+class Firestore {
+  constructor(manager) {
+    this.manager = manager;
+    this._db = null;
+    this._initialized = false;
+    this._initPromise = null;
+  }
+
+  async _ensureInitialized() {
+    if (this._initialized) {
+      return this._db;
+    }
+
+    if (!this._initPromise) {
+      this._initPromise = this._initializeFirestore();
+    }
+
+    return this._initPromise;
+  }
+
+  async _initializeFirestore() {
+    try {
+      // Check if Firebase app is initialized
+      if (!this.manager._firebaseApp) {
+        throw new Error('Firebase app not initialized. Please initialize Firebase first.');
+      }
+
+      // Dynamically import Firestore
+      const { getFirestore, doc: firestoreDoc, collection: firestoreCollection, getDoc, setDoc, updateDoc, deleteDoc, getDocs, query, where, orderBy, limit, startAt, endAt, onSnapshot } = await import('firebase/firestore');
+
+      // Store references for later use
+      this._firestoreMethods = {
+        doc: firestoreDoc,
+        collection: firestoreCollection,
+        getDoc,
+        setDoc,
+        updateDoc,
+        deleteDoc,
+        getDocs,
+        query,
+        where,
+        orderBy,
+        limit,
+        startAt,
+        endAt,
+        onSnapshot,
+      };
+
+      // Reuse the Firestore instance already initialized in index.js
+      this._db = getFirestore(this.manager._firebaseApp);
+
+      // Connect to Firestore emulator in development
+      if (this.manager.isDevelopment() && this.manager.config.env?.FIREBASE_EMULATOR_CONNECT) {
+        console.log('[Firestore] Connecting to emulator at localhost:8080');
+        const { connectFirestoreEmulator } = await import('firebase/firestore');
+        connectFirestoreEmulator(this._db, 'localhost', 8080);
+        console.log('[Firestore] Emulator connected');
+      }
+
+      this._initialized = true;
+
+      return this._db;
+    } catch (error) {
+      console.error('Failed to initialize Firestore:', error);
+      throw error;
+    }
+  }
+
+  // Main doc() method - supports both 'path/to/doc' and ('collection', 'docId')
+  doc(...args) {
+    const self = this;
+    let docPath;
+
+    // Handle different argument patterns
+    if (args.length === 1 && typeof args[0] === 'string') {
+      // Single path string: doc('users/userId')
+      docPath = args[0];
+    } else if (args.length === 2 && typeof args[0] === 'string' && typeof args[1] === 'string') {
+      // Collection and doc ID: doc('users', 'userId')
+      docPath = `${args[0]}/${args[1]}`;
+    } else {
+      throw new Error('Invalid arguments for doc(). Use doc("path/to/doc") or doc("collection", "docId")');
+    }
+
+    return {
+      async get() {
+        await self._ensureInitialized();
+        const docRef = self._firestoreMethods.doc(self._db, docPath);
+        const docSnap = await self._firestoreMethods.getDoc(docRef);
+
+        return {
+          exists: () => docSnap.exists(),
+          data: () => docSnap.data(),
+          id: docSnap.id,
+          ref: docRef
+        };
+      },
+
+      async set(data, options = {}) {
+        await self._ensureInitialized();
+        const docRef = self._firestoreMethods.doc(self._db, docPath);
+        return await self._firestoreMethods.setDoc(docRef, data, options);
+      },
+
+      async update(data) {
+        await self._ensureInitialized();
+        const docRef = self._firestoreMethods.doc(self._db, docPath);
+        return await self._firestoreMethods.updateDoc(docRef, data);
+      },
+
+      async delete() {
+        await self._ensureInitialized();
+        const docRef = self._firestoreMethods.doc(self._db, docPath);
+        return await self._firestoreMethods.deleteDoc(docRef);
+      },
+
+      onSnapshot(callback, errorCallback) {
+        let unsubscribe = function () {};
+
+        self._ensureInitialized().then(function () {
+          const docRef = self._firestoreMethods.doc(self._db, docPath);
+
+          unsubscribe = self._firestoreMethods.onSnapshot(docRef, function (docSnap) {
+            callback({
+              exists: () => docSnap.exists(),
+              data: () => docSnap.data(),
+              id: docSnap.id,
+              ref: docRef,
+            });
+          }, errorCallback);
+        });
+
+        return function () { unsubscribe(); };
+      }
+    };
+  }
+
+  // Collection method for queries
+  collection(collectionPath) {
+    const self = this;
+
+    return {
+      async get() {
+        await self._ensureInitialized();
+        const collRef = self._firestoreMethods.collection(self._db, collectionPath);
+        const querySnapshot = await self._firestoreMethods.getDocs(collRef);
+
+        return {
+          docs: querySnapshot.docs.map(doc => ({
+            id: doc.id,
+            data: () => doc.data(),
+            exists: () => doc.exists(),
+            ref: doc.ref
+          })),
+          size: querySnapshot.size,
+          empty: querySnapshot.empty,
+          forEach: (callback) => querySnapshot.forEach(callback)
+        };
+      },
+
+      where(field, operator, value) {
+        return self._buildQuery(collectionPath, [{ type: 'where', field, operator, value }]);
+      },
+
+      orderBy(field, direction = 'asc') {
+        return self._buildQuery(collectionPath, [{ type: 'orderBy', field, direction }]);
+      },
+
+      limit(count) {
+        return self._buildQuery(collectionPath, [{ type: 'limit', count }]);
+      },
+
+      doc(docId) {
+        if (docId) {
+          return self.doc(`${collectionPath}/${docId}`);
+        }
+        // Auto-generate ID if not provided
+        return self.doc(`${collectionPath}/${self._generateId()}`);
+      }
+    };
+  }
+
+  // Build chainable query
+  _buildQuery(collectionPath, constraints = []) {
+    const self = this;
+
+    const queryBuilder = {
+      where(field, operator, value) {
+        constraints.push({ type: 'where', field, operator, value });
+        return queryBuilder;
+      },
+
+      orderBy(field, direction = 'asc') {
+        constraints.push({ type: 'orderBy', field, direction });
+        return queryBuilder;
+      },
+
+      limit(count) {
+        constraints.push({ type: 'limit', count });
+        return queryBuilder;
+      },
+
+      startAt(...values) {
+        constraints.push({ type: 'startAt', values });
+        return queryBuilder;
+      },
+
+      endAt(...values) {
+        constraints.push({ type: 'endAt', values });
+        return queryBuilder;
+      },
+
+      async get() {
+        return self._executeQuery(collectionPath, constraints);
+      },
+
+      onSnapshot(callback, errorCallback) {
+        let unsubscribe = function () {};
+
+        self._ensureInitialized().then(function () {
+          const collRef = self._firestoreMethods.collection(self._db, collectionPath);
+          const queryConstraints = self._buildConstraints(constraints);
+          const q = self._firestoreMethods.query(collRef, ...queryConstraints);
+
+          unsubscribe = self._firestoreMethods.onSnapshot(q, function (querySnapshot) {
+            callback({
+              docs: querySnapshot.docs.map(doc => ({
+                id: doc.id,
+                data: () => doc.data(),
+                exists: () => doc.exists(),
+                ref: doc.ref,
+              })),
+              size: querySnapshot.size,
+              empty: querySnapshot.empty,
+              forEach: (cb) => querySnapshot.forEach(cb),
+            });
+          }, errorCallback);
+        });
+
+        return function () { unsubscribe(); };
+      }
+    };
+
+    return queryBuilder;
+  }
+
+  // Build query constraint objects from constraint descriptors
+  _buildConstraints(constraints) {
+    const queryConstraints = [];
+
+    for (const constraint of constraints) {
+      switch (constraint.type) {
+        case 'where':
+          queryConstraints.push(this._firestoreMethods.where(constraint.field, constraint.operator, constraint.value));
+          break;
+        case 'orderBy':
+          queryConstraints.push(this._firestoreMethods.orderBy(constraint.field, constraint.direction));
+          break;
+        case 'limit':
+          queryConstraints.push(this._firestoreMethods.limit(constraint.count));
+          break;
+        case 'startAt':
+          queryConstraints.push(this._firestoreMethods.startAt(...constraint.values));
+          break;
+        case 'endAt':
+          queryConstraints.push(this._firestoreMethods.endAt(...constraint.values));
+          break;
+      }
+    }
+
+    return queryConstraints;
+  }
+
+  // Execute a query and return formatted results
+  async _executeQuery(collectionPath, constraints) {
+    await this._ensureInitialized();
+    const collRef = this._firestoreMethods.collection(this._db, collectionPath);
+    const queryConstraints = this._buildConstraints(constraints);
+    const q = this._firestoreMethods.query(collRef, ...queryConstraints);
+    const querySnapshot = await this._firestoreMethods.getDocs(q);
+
+    return {
+      docs: querySnapshot.docs.map(doc => ({
+        id: doc.id,
+        data: () => doc.data(),
+        exists: () => doc.exists(),
+        ref: doc.ref,
+      })),
+      size: querySnapshot.size,
+      empty: querySnapshot.empty,
+      forEach: (callback) => querySnapshot.forEach(callback),
+    };
+  }
+
+  // Helper to generate document IDs (similar to Firebase auto-generated IDs)
+  _generateId() {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let id = '';
+    for (let i = 0; i < 20; i++) {
+      id += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return id;
+  }
+}
+
+export default Firestore;