web-manager 4.1.37 → 4.1.39

package/CHANGELOG.md

@@ -15,6 +15,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - `Security` in case of vulnerabilities.
 
 ---
+## [4.1.39] - 2026-04-10
+### Changed
+- Converted `Utilities` methods to arrow class fields so `this` is permanently bound to the instance, allowing methods to be destructured, aliased, or passed as callbacks without losing context.
+
+---
+## [4.1.38] - 2026-04-08
+### Added
+- Added `sanitizeURL()` utility method that validates URLs against dangerous URI schemes (javascript:, data:, etc.), allowing only http: and https: protocols.
+
 ## [4.1.37] - 2026-04-05
 ### Added
 - Added `_resolveUsage()` to auth module that merges account usage data with plan limits from config, exposed as a top-level `usage` binding context.

package/CLAUDE.md

@@ -152,7 +152,8 @@ document.body.addEventListener('click', (e) => {
 ### Auth (`auth.js`)
 - **Class**: `Auth`
 - **Key Methods**: `listen(options, callback)`, `isAuthenticated()`, `getUser()`, `signInWithEmailAndPassword()`, `signOut()`, `getIdToken()`, `resolveSubscription(account?)`
-- **Bindings**: Updates `auth.user` and `auth.account` context
+- **Bindings**: Updates `auth` and `usage` context on auth settle
+- **Usage Resolution**: `_resolveUsage(state)` merges `account.usage` (Firestore) with plan limits from `config.payment.plans` to produce the `usage` bindings key (e.g., `{ credits: { monthly: 5, limit: 100 } }`)
 
 #### resolveSubscription(account?)
 Derives calculated subscription fields from raw account data. Returns only fields that require derivation logic — raw data (product.id, status, trial, cancellation) lives on `account.subscription` directly.
@@ -268,9 +269,14 @@ Current test coverage is minimal - focuses on configuration and storage.
 
 ### Modifying Configuration Defaults
 1. Edit `_processConfiguration()` in `src/index.js`
-2. Add to `defaults` object
+2. Add to `defaults` object (e.g., `payment: { processors: {}, plans: [] }`)
 3. Document in README.md Configuration section
 
+### Payment Configuration
+Payment config is set in `_config.yml` under `web_manager.payment` and includes:
+- `processors`: Stripe, PayPal, etc. (publishable keys)
+- `plans`: Array of `{ id, limits: { feature: N } }` used to resolve usage limits on the frontend
+
 ### Adding a Data Binding Action
 1. Edit `_executeAction()` in `src/modules/bindings.js`
 2. Add case for new action (e.g., `@class`)

package/dist/modules/utilities.js

@@ -1,10 +1,16 @@
+// Methods are defined as arrow class fields so `this` is permanently bound to the instance.
+// This means consumers can safely alias or destructure methods without losing context:
+//   const { escapeHTML } = webManager.utilities(); // ✓ works
+//   const escape = webManager.utilities().escapeHTML; // ✓ works
+//   items.map(webManager.utilities().escapeHTML); // ✓ works
+// Safe because webManager.utilities() is a singleton — only one instance ever exists.
 class Utilities {
   constructor(manager) {
     this.manager = manager;
   }
 
   // Copy text to clipboard
-  clipboardCopy(input) {
+  clipboardCopy = (input) => {
     // Get the text from the input
     const text = input && input.nodeType
       ? input.value || input.innerText || input.innerHTML
@@ -38,7 +44,7 @@ class Utilities {
 
   // Escape HTML to prevent XSS
   // Accepts a string, object, or array — walks recursively, escaping all string values
-  escapeHTML(input) {
+  escapeHTML = (input) => {
     // Strings — escape and return
     if (typeof input === 'string') {
       this._shadowElement = this._shadowElement || document.createElement('p');
@@ -81,8 +87,28 @@ class Utilities {
     return input;
   }
 
+  // Sanitize URL to prevent javascript:, data:, and other dangerous URI schemes
+  // Returns the original URL if safe, or '' if rejected
+  sanitizeURL = (url) => {
+    if (!url || typeof url !== 'string') {
+      return '';
+    }
+
+    try {
+      const parsed = new URL(url, window.location.origin);
+
+      if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+        return '';
+      }
+
+      return url;
+    } catch (e) {
+      return '';
+    }
+  }
+
   // Show notification
-  showNotification(message, options = {}) {
+  showNotification = (message, options = {}) => {
     // Handle different input types
     let text = message;
     let type = options.type || 'info';
@@ -128,7 +154,7 @@ class Utilities {
   }
 
   // Get platform (OS)
-  getPlatform() {
+  getPlatform = () => {
     const ua = navigator.userAgent.toLowerCase();
     const platform = (navigator.userAgentData?.platform || navigator.platform || '').toLowerCase();
 
@@ -158,7 +184,7 @@ class Utilities {
   }
 
   // Get browser name
-  getBrowser() {
+  getBrowser = () => {
     const ua = navigator.userAgent;
 
     // Order matters - check more specific browsers first
@@ -197,7 +223,7 @@ class Utilities {
   }
 
   // Get runtime environment
-  getRuntime() {
+  getRuntime = () => {
     // Use config runtime if provided
     if (this.manager?.config?.runtime) {
       return this.manager.config.runtime;
@@ -217,7 +243,7 @@ class Utilities {
   }
 
   // Check if mobile device
-  isMobile() {
+  isMobile = () => {
     try {
       // Try modern API first
       const m = navigator.userAgentData?.mobile;
@@ -237,7 +263,7 @@ class Utilities {
   }
 
   // Get device based on screen width
-  getDevice() {
+  getDevice = () => {
     const width = window.innerWidth;
 
     // Mobile: < 768px (Bootstrap's md breakpoint)
@@ -255,7 +281,7 @@ class Utilities {
   }
 
   // Get context information
-  getContext() {
+  getContext = () => {
     // Return context information
     return {
       client: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-manager",
-  "version": "4.1.37",
+  "version": "4.1.39",
   "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",