web-manager 4.0.0 → 4.0.2

package/CHANGELOG.md

@@ -15,6 +15,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - `Security` in case of vulnerabilities.
 
 ---
+## [4.0.0] - 2025-09-11
+### BREAKING
+- Updated to ITW 3.0 standard.
+
 ## [3.2.74] - 2025-07-17
 ### Added
 - Now looks for `build.json` in the `/@output/build/` directory to ensure it works with Vite's output structure.

package/README.md

@@ -270,10 +270,10 @@ Web Manager includes a powerful data binding system that automatically updates y
 #### Basic Text Binding
 ```html
 <!-- Display user email -->
-<span data-wm-bind="user.email"></span>
+<span data-wm-bind="auth.user.email"></span>
 
 <!-- Display nested properties -->
-<div data-wm-bind="account.subscription.plan"></div>
+<div data-wm-bind="auth.account.subscription.plan"></div>
 
 <!-- Works with inputs too -->
 <input data-wm-bind="settings.theme" />
@@ -282,14 +282,14 @@ Web Manager includes a powerful data binding system that automatically updates y
 #### Conditional Visibility
 ```html
 <!-- Show element when condition is true -->
-<div data-wm-bind="@show user">Welcome!</div>
-<div data-wm-bind="@show user.emailVerified">Email is verified</div>
+<div data-wm-bind="@show auth.user">Welcome!</div>
+<div data-wm-bind="@show auth.user.emailVerified">Email is verified</div>
 
 <!-- Hide element when condition is true -->
-<div data-wm-bind="@hide user">Please log in</div>
+<div data-wm-bind="@hide auth.user">Please log in</div>
 
 <!-- Comparisons -->
-<div data-wm-bind="@show subscription.plan === 'premium'">Premium features</div>
+<div data-wm-bind="@show auth.account.subscription.plan === 'premium'">Premium features</div>
 <div data-wm-bind="@hide settings.notifications === false">Notifications enabled</div>
 ```
 
@@ -297,7 +297,7 @@ Web Manager includes a powerful data binding system that automatically updates y
 ```javascript
 // Auth data is automatically bound when using auth().listen()
 Manager.auth().listen({ account: true }, (result) => {
-  // user and account data are automatically bound to the DOM
+  // auth.user and auth.account data are automatically bound to the DOM
 });
 
 // Update bindings with custom data

package/_legacy/service-worker copy.js

@@ -0,0 +1,347 @@
+class ServiceWorker {
+  constructor(manager) {
+    this.manager = manager;
+    this._registration = null;
+    this._updateCallbacks = [];
+    this._messageHandlers = new Map();
+  }
+
+  // Check if service workers are supported
+  isSupported() {
+    return 'serviceWorker' in navigator;
+  }
+
+  // Register service worker
+  async register(options = {}) {
+    try {
+      if (!this.isSupported()) {
+        console.warn('Service Workers are not supported');
+        return null;
+      }
+
+      const swPath = options.path || this.manager.config.serviceWorker?.config?.path || '/service-worker.js';
+      const scope = options.scope || '/';
+
+      // Build config object to pass to service worker
+      const config = {
+        app: this.manager.config.brand?.id,
+        environment: this.manager.config.environment,
+        buildTime: this.manager.config.buildTime,
+        firebase: this.manager.config.firebase?.app?.config || null
+      };
+
+      // Get service worker URL with just cache breaker
+      const cacheBreaker = config.buildTime || Date.now();
+      const swUrl = `${swPath}?cb=${cacheBreaker}`;
+
+      // Get existing registrations
+      const registrations = await navigator.serviceWorker.getRegistrations();
+
+      // Check if service worker is already registered for this scope
+      let registration = registrations.find(reg =>
+        reg.scope === new URL(scope, window.location.href).href
+      );
+
+      // Always register/re-register to ensure we have the correct URL with config
+      console.log('----WM SW 1');
+
+      if (registration) {
+      console.log('----WM SW 2');
+        console.log('Unregistering existing service worker to update config');
+        await registration.unregister();
+        // Wait a bit for unregistration to complete
+        await new Promise(resolve => setTimeout(resolve, 100));
+      }
+      console.log('----WM SW 3');
+
+      console.log('Registering service worker with cache breaker');
+      registration = await navigator.serviceWorker.register(swUrl, {
+        scope,
+        updateViaCache: options.updateViaCache || 'imports'
+      });
+
+      // Wait for the service worker to be ready
+      await navigator.serviceWorker.ready;
+
+      // Send the full config via postMessage after registration
+      console.log('----WM SW 4');
+      if (registration.active) {
+      console.log('----WM SW 5');
+        try {
+          this.postMessage({
+            command: 'update-config',
+            payload: config
+          });
+        } catch (error) {
+          console.warn('Could not send config to service worker:', error);
+        }
+      }
+
+      this._registration = registration;
+      this.manager.state.serviceWorker = registration;
+      console.log('----WM SW 6');
+
+      // Set up update handlers
+      this._setupUpdateHandlers(registration);
+      console.log('----WM SW 7');
+
+      // Check for updates
+      if (options.checkForUpdate !== false) {
+        registration.update();
+      }
+      console.log('----WM SW 8');
+
+      // Set up message channel
+      if (registration.active) {
+        this._setupMessageChannel();
+      }
+      console.log('----WM SW 9');
+
+      return registration;
+    } catch (error) {
+      console.error('Service Worker registration failed:', error);
+      throw error;
+    }
+  }
+
+  // Unregister service worker
+  async unregister() {
+    try {
+      if (!this._registration) {
+        const registrations = await navigator.serviceWorker.getRegistrations();
+        for (const registration of registrations) {
+          await registration.unregister();
+        }
+      } else {
+        await this._registration.unregister();
+      }
+
+      this._registration = null;
+      this.manager.state.serviceWorker = null;
+
+      return true;
+    } catch (error) {
+      console.error('Service Worker unregistration failed:', error);
+      return false;
+    }
+  }
+
+  // Get current registration
+  getRegistration() {
+    return this._registration;
+  }
+
+  // Check for updates
+  async update() {
+    try {
+      if (!this._registration) {
+        throw new Error('No service worker registered');
+      }
+
+      await this._registration.update();
+      return true;
+    } catch (error) {
+      console.error('Service Worker update failed:', error);
+      return false;
+    }
+  }
+
+  // Post message to service worker
+  postMessage(message, options = {}) {
+    return new Promise((resolve, reject) => {
+      if (!this.isSupported()) {
+        return reject(new Error('Service Workers not supported'));
+      }
+
+      const controller = this._registration?.active || navigator.serviceWorker.controller;
+
+      if (!controller) {
+        return reject(new Error('No active service worker'));
+      }
+
+      const messageChannel = new MessageChannel();
+      const timeout = options.timeout || 5000;
+      let timeoutId;
+
+      // Set up timeout
+      if (timeout > 0) {
+        timeoutId = setTimeout(() => {
+          messageChannel.port1.close();
+          reject(new Error('Service worker message timeout'));
+        }, timeout);
+      }
+
+      // Listen for response
+      messageChannel.port1.onmessage = (event) => {
+        clearTimeout(timeoutId);
+
+        if (event.data.error) {
+          reject(new Error(event.data.error));
+        } else {
+          resolve(event.data);
+        }
+      };
+
+      // Send message
+      controller.postMessage(message, [messageChannel.port2]);
+    });
+  }
+
+  // Listen for messages from service worker
+  onMessage(type, handler) {
+    if (!this.isSupported()) {
+      return () => {};
+    }
+
+    // Store handler
+    if (!this._messageHandlers.has(type)) {
+      this._messageHandlers.set(type, new Set());
+    }
+    this._messageHandlers.get(type).add(handler);
+
+    // Set up global message listener if not already done
+    if (this._messageHandlers.size === 1) {
+      navigator.serviceWorker.addEventListener('message', this._handleMessage.bind(this));
+    }
+
+    // Return unsubscribe function
+    return () => {
+      const handlers = this._messageHandlers.get(type);
+      if (handlers) {
+        handlers.delete(handler);
+        if (handlers.size === 0) {
+          this._messageHandlers.delete(type);
+        }
+      }
+    };
+  }
+
+  // Skip waiting and activate new service worker
+  async skipWaiting() {
+    try {
+      if (!this._registration?.waiting) {
+        throw new Error('No service worker waiting');
+      }
+
+      // Post message to skip waiting
+      await this.postMessage({ action: 'skipWaiting' });
+
+      // Reload page after activation
+      let refreshing = false;
+      navigator.serviceWorker.addEventListener('controllerchange', () => {
+        if (!refreshing) {
+          refreshing = true;
+          window.location.reload();
+        }
+      });
+
+      return true;
+    } catch (error) {
+      console.error('Skip waiting failed:', error);
+      return false;
+    }
+  }
+
+  // Listen for update events
+  onUpdateFound(callback) {
+    this._updateCallbacks.push(callback);
+
+    return () => {
+      const index = this._updateCallbacks.indexOf(callback);
+      if (index > -1) {
+        this._updateCallbacks.splice(index, 1);
+      }
+    };
+  }
+
+  // Get service worker state
+  getState() {
+    if (!this._registration) {
+      return 'none';
+    }
+
+    if (this._registration.installing) {
+      return 'installing';
+    } else if (this._registration.waiting) {
+      return 'waiting';
+    } else if (this._registration.active) {
+      return 'active';
+    }
+
+    return 'unknown';
+  }
+
+  // Private: Set up update handlers
+  _setupUpdateHandlers(registration) {
+    // Listen for updates
+    registration.addEventListener('updatefound', () => {
+      const newWorker = registration.installing;
+
+      if (!newWorker) return;
+
+      newWorker.addEventListener('statechange', () => {
+        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+          // New service worker available
+          this._notifyUpdateCallbacks({
+            type: 'update-available',
+            worker: newWorker
+          });
+
+          // Automatically skip waiting and activate new worker
+          if (this.manager.config.serviceWorker?.autoUpdate !== false) {
+            this.skipWaiting();
+          }
+        }
+      });
+    });
+
+    // Listen for controller changes
+    let refreshing = false;
+    navigator.serviceWorker.addEventListener('controllerchange', () => {
+      if (!refreshing) {
+        this._notifyUpdateCallbacks({
+          type: 'controller-change'
+        });
+      }
+    });
+  }
+
+  // Private: Notify update callbacks
+  _notifyUpdateCallbacks(event) {
+    this._updateCallbacks.forEach(callback => {
+      try {
+        callback(event);
+      } catch (error) {
+        console.error('Update callback error:', error);
+      }
+    });
+  }
+
+  // Private: Handle incoming messages
+  _handleMessage(event) {
+    const { type, ...data } = event.data || {};
+
+    if (!type) return;
+
+    const handlers = this._messageHandlers.get(type);
+    if (handlers) {
+      handlers.forEach(handler => {
+        try {
+          handler(data, event);
+        } catch (error) {
+          console.error('Message handler error:', error);
+        }
+      });
+    }
+  }
+
+  // Private: Set up message channel
+  _setupMessageChannel() {
+    // This ensures we can communicate with the service worker
+    navigator.serviceWorker.ready.then(() => {
+      console.log('Service Worker ready for messaging');
+    });
+  }
+}
+
+export default ServiceWorker;

package/dist/index.js

@@ -86,7 +86,7 @@ class Manager {
 
       // Initialize service worker if enabled
       if (this.config.serviceWorker?.enabled) {
-        await this._serviceWorker.register({
+        this._serviceWorker.register({
           path: this.config.serviceWorker?.config?.path
         });
       }

package/dist/modules/auth.js

@@ -1,8 +1,11 @@
+import resolveAccount from 'resolve-account';
+
 class Auth {
   constructor(manager) {
     this.manager = manager;
     this._authStateCallbacks = [];
     this._readyCallbacks = [];
+    this._hasProcessedStateChange = false;
   }
 
   // Check if user is authenticated
@@ -67,8 +70,14 @@ class Auth {
 
     // If Firebase is not enabled, call callback immediately with null
     if (!this.manager.config.firebase?.app?.enabled) {
-      callback({ user: null, account: null });
-      return () => {}; // Return empty unsubscribe function
+      // Call callback with null user and empty account
+      callback({
+        user: null,
+        account: resolveAccount({}, {})
+      });
+
+      // Return empty unsubscribe function
+      return () => {};
     }
 
     // Function to get current state and call callback
@@ -77,18 +86,33 @@ class Auth {
       const state = { user: this.getUser() };
 
       // Then, add account data if requested and user exists
-      if (options.account && user && this.manager.firebaseFirestore) {
+      // if (options.account && user && this.manager.firebaseFirestore) {
+      // Fetch account if the user is logged in AND Firestore is available
+      if (user && this.manager.firebaseFirestore) {
         try {
           state.account = await this._getAccountData(user.uid);
         } catch (error) {
-          state.account = null;
+          // Pass error to Sentry
+          this.manager.sentry().captureException(new Error('Failed to get account data', { cause: error }));
         }
-      } else {
-        state.account = null;
       }
 
-      // Update bindings with auth data
-      this.manager.bindings().update(state);
+      // Always ensure account is at least a default resolved object
+      state.account = state.account || resolveAccount({}, { uid: user?.uid });
+
+      // Process state change (update bindings and storage) only once across all callbacks
+      // Now ONLY the first listener will process the state change until the next auth state change
+      if (!this._hasProcessedStateChange) {
+        // Run update - nest state under 'auth' key for consistent access
+        this.manager.bindings().update({ auth: state });
+
+        // Save to storage
+        const storage = this.manager.storage();
+        storage.set('auth', state);
+
+        // Mark that we've processed this state change
+        this._hasProcessedStateChange = true;
+      }
 
       // Call the provided callback with the state
       callback(state);
@@ -97,15 +121,27 @@ class Auth {
     let hasCalledback = false;
 
     // Set up listener for auth state changes
-    return this.onAuthStateChanged((user) => {
+    const unsubscribe = this.onAuthStateChanged((user) => {
+      // If once option is set, unsubscribe
+      // We have to do this here because unsubscribe is only available after this call
+      if (options.once && unsubscribe) {
+        unsubscribe();
+        return;
+      }
+
       // Wait for settled state before first callback
       if (!hasCalledback && !this.manager._firebaseAuthInitialized) {
         return; // Auth state not yet determined
       }
 
+      // Mark that we've called back at least once
       hasCalledback = true;
+
+      // Get current state and call the callback
       getStateAndCallback(user);
     });
+
+    return unsubscribe;
   }
 
   // Listen for auth state changes
@@ -128,11 +164,8 @@ class Auth {
 
   // Internal method to handle auth state changes
   _handleAuthStateChange(user) {
-    // Always update bindings when auth state changes (basic update without account)
-    this.manager.bindings().update({
-      user: this.getUser(),
-      account: null
-    });
+    // Reset state processing flag for new auth state
+    this._hasProcessedStateChange = false;
 
     // Call all registered callbacks
     this._authStateCallbacks.forEach(callback => {
@@ -173,6 +206,22 @@ class Auth {
     }
   }
 
+  // Sign in with email and password
+  async signInWithEmailAndPassword(email, password) {
+    try {
+      if (!this.manager.firebaseAuth) {
+        throw new Error('Firebase Auth is not initialized');
+      }
+
+      const { signInWithEmailAndPassword } = await import('firebase/auth');
+      const userCredential = await signInWithEmailAndPassword(this.manager.firebaseAuth, email, password);
+      return userCredential.user;
+    } catch (error) {
+      console.error('Sign in with email and password error:', error);
+      throw error;
+    }
+  }
+
   // Sign out the current user
   async signOut() {
     try {
@@ -193,7 +242,6 @@ class Auth {
       }
 
       const { doc, getDoc } = await import('firebase/firestore');
-      const resolveAccount = (await import('resolve-account')).default;
 
       const accountDoc = doc(this.manager.firebaseFirestore, 'users', uid);
       const snapshot = await getDoc(accountDoc);

package/dist/modules/bindings.js

@@ -81,14 +81,14 @@ class Bindings {
           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)
@@ -121,7 +121,7 @@ class Bindings {
   _evaluateCondition(condition, context) {
     try {
       // Replace context references with actual values
-      // Support: user.field, account.field, simple comparisons
+      // Support: auth.user.field, auth.account.field, simple comparisons
 
       // Check for negation operator at the start
       if (condition.trim().startsWith('!')) {
@@ -169,7 +169,7 @@ class Bindings {
           default: return false;
         }
       } else {
-        // Simple truthy check (e.g., "user.emailVerified" or "account")
+        // Simple truthy check (e.g., "auth.user.emailVerified" or "auth.account")
         const value = this._resolvePath(context, condition.trim());
         return !!value;
       }

package/dist/modules/dom.js

@@ -12,21 +12,16 @@ export function loadScript(options) {
       defer = false,
       crossorigin = false,
       integrity = null,
-      attributes = [],
+      attributes = {},
       timeout = 60000,
-      retries = 0
+      retries = 0,
+      parent = null
     } = options;
 
     if (!src) {
       return reject(new Error('Script source is required'));
     }
 
-    // Check if script already exists
-    const existingScript = document.querySelector(`script[src="${src}"]`);
-    if (existingScript) {
-      return resolve({ script: existingScript, cached: true });
-    }
-
     let timeoutId;
     let retryCount = 0;
 
@@ -45,10 +40,8 @@ export function loadScript(options) {
       }
 
       // Add custom attributes
-      attributes.forEach(attr => {
-        if (attr.name && attr.value !== undefined) {
-          script.setAttribute(attr.name, attr.value);
-        }
+      Object.keys(attributes).forEach(name => {
+        script.setAttribute(name, attributes[name]);
       });
 
       // Set up timeout
@@ -68,11 +61,12 @@ export function loadScript(options) {
       script.onerror = (error) => {
         clearTimeout(timeoutId);
         script.remove();
-        handleError(new Error(`Failed to load script: ${src}`));
+        handleError(new Error(`Failed to load script ${src}`, { cause: error }));
       };
 
       // Append to document
-      (document.head || document.documentElement).appendChild(script);
+      const $targetParent = parent || document.head || document.documentElement;
+      $targetParent.appendChild(script);
     }
 
     function handleError(error) {

package/dist/modules/service-worker.js

@@ -11,6 +11,22 @@ class ServiceWorker {
     return 'serviceWorker' in navigator;
   }
 
+  // Return promise that resolves when service worker is ready
+  async ready() {
+    if (!this.isSupported()) {
+      throw new Error('Service Workers not supported');
+    }
+
+    // If already registered and active
+    if (this._registration?.active) {
+      return this._registration;
+    }
+
+    // Wait for service worker to be ready
+    const registration = await navigator.serviceWorker.ready;
+    return registration;
+  }
+
   // Register service worker
   async register(options = {}) {
     try {
@@ -30,30 +46,11 @@ class ServiceWorker {
         firebase: this.manager.config.firebase?.app?.config || null
       };
 
-      // Get service worker URL with config
-      const swUrl = `${swPath}?config=${encodeURIComponent(JSON.stringify(config))}`;
-
-      // Get existing registrations
-      const registrations = await navigator.serviceWorker.getRegistrations();
-
-      // Check if service worker is already registered for this scope
-      let registration = registrations.find(reg =>
-        reg.scope === new URL(scope, window.location.href).href
-      );
-
-      // This helps the .register() method NOT HANG FOREVER
-      if (registration) {
-        console.log('Using existing service worker registration');
-        // Check for updates on existing registration
-        registration.update();
-      } else {
-        console.log('Registering new service worker');
-        // Register with config in URL
-        registration = await navigator.serviceWorker.register(swUrl, {
-          scope,
-          updateViaCache: options.updateViaCache || 'imports'
-        });
-      }
+      // Register and handle everything
+      const registration = await navigator.serviceWorker.register(swPath, {
+        scope,
+        updateViaCache: 'none' // Always check server for updates
+      });
 
       this._registration = registration;
       this.manager.state.serviceWorker = registration;
@@ -61,16 +58,27 @@ class ServiceWorker {
       // Set up update handlers
       this._setupUpdateHandlers(registration);
 
-      // Check for updates
-      if (options.checkForUpdate !== false) {
-        registration.update();
-      }
-
-      // Set up message channel
+      // Wait for service worker to be ready and send config
+      await navigator.serviceWorker.ready;
+      
       if (registration.active) {
+        try {
+          this.postMessage({
+            command: 'update-config',
+            payload: config
+          });
+        } catch (error) {
+          console.warn('Could not send config to service worker:', error);
+        }
+        
         this._setupMessageChannel();
       }
 
+      // Check for updates (this will detect if service worker file changed)
+      if (options.checkForUpdate !== false) {
+        registration.update();
+      }
+
       return registration;
     } catch (error) {
       console.error('Service Worker registration failed:', error);
@@ -260,7 +268,7 @@ class ServiceWorker {
             type: 'update-available',
             worker: newWorker
           });
-          
+
           // Automatically skip waiting and activate new worker
           if (this.manager.config.serviceWorker?.autoUpdate !== false) {
             this.skipWaiting();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-manager",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "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",
@@ -41,14 +41,13 @@
     "replace": {}
   },
   "dependencies": {
-    "@sentry/browser": "^10.8.0",
-    "firebase": "^12.2.1",
+    "@sentry/browser": "^10.15.0",
+    "firebase": "^12.3.0",
     "itwcw-package-analytics": "^1.0.6",
     "lodash": "^4.17.21",
-    "resolve-account": "^2.0.0"
+    "resolve-account": "^2.0.1"
   },
   "devDependencies": {
-    "lodash": "^4.17.21",
     "mocha": "^8.4.0",
     "prepare-package": "^1.2.2"
   }