mount-observer 0.1.14 → 0.1.15

package/{DefineCustomElementHandler.js → handlers/DefineCustomElement.js}

@@ -1,99 +1,103 @@
-import { EvtRt } from './EvtRt.js';
-export class DefineCustomElementHandler extends EvtRt {
-    mount(mountedElement, MountConfig, context) {
-        this.abort();
-        // Check if modules are specified
-        if (!context.modules || context.modules.length === 0) {
-            throw new Error('Must specify an ES Module');
-        }
-        const module = context.modules[0];
-        const tagName = mountedElement.localName;
-        // Check if already defined
-        if (customElements.get(tagName)) {
-            return;
-        }
-        // Find suitable class
-        const ElementClass = this.findSuitableClass(module);
-        // Validate that ElementClass is a constructor
-        if (typeof ElementClass !== 'function') {
-            throw new Error(`Found class is not a constructor: ${typeof ElementClass}`);
-        }
-        // Create wrapper class to allow reuse
-        // Use anonymous class expression which works across all browsers
-        const WrapperClass = class extends ElementClass {
-        };
-        // Define the custom element using the define method
-        this.define(tagName, WrapperClass, mountedElement);
-    }
-    /**
-     * Define the custom element in the appropriate registry.
-     * Override this method in subclasses to use scoped registries.
-     * @param tagName - The custom element tag name
-     * @param ElementClass - The element class constructor
-     * @param mountedElement - The mounted element (used for scoped registry access)
-     */
-    define(tagName, ElementClass, mountedElement) {
-        customElements.define(tagName, ElementClass);
-    }
-    findSuitableClass(module) {
-        // Check default export first
-        const defaultExport = module.default;
-        if (defaultExport && this.extendsHTMLElement(defaultExport)) {
-            return defaultExport;
-        }
-        // Find all exports that extend HTMLElement
-        const htmlElementClasses = Object.values(module)
-            .filter(exp => typeof exp === 'function' && this.extendsHTMLElement(exp));
-        if (htmlElementClasses.length === 0) {
-            throw new Error('No suitable class found in module');
-        }
-        if (htmlElementClasses.length > 1) {
-            throw new Error('More than one class found in module');
-        }
-        return htmlElementClasses[0];
-    }
-    extendsHTMLElement(cls) {
-        try {
-            // Must be a function
-            if (typeof cls !== 'function') {
-                return false;
-            }
-            // Handle direct HTMLElement export
-            if (cls === HTMLElement) {
-                return true;
-            }
-            // Check if it has a prototype and extends HTMLElement
-            if (cls.prototype && cls.prototype instanceof HTMLElement) {
-                return true;
-            }
-            return false;
-        }
-        catch {
-            return false;
-        }
-    }
-}
-/**
- * Handler for defining custom elements in scoped registries.
- * Uses the element's customElementRegistry property to define elements
- * in the appropriate scoped registry instead of the global registry.
- */
-export class DefineScopedCustomElementHandler extends DefineCustomElementHandler {
-    /**
-     * Define the custom element in the element's scoped registry.
-     * @param tagName - The custom element tag name
-     * @param ElementClass - The element class constructor
-     * @param mountedElement - The mounted element with customElementRegistry
-     */
-    define(tagName, ElementClass, mountedElement) {
-        const registry = mountedElement.customElementRegistry;
-        if (!registry) {
-            throw new Error('Element does not have a customElementRegistry. Scoped registries require Chrome 146+ or latest WebKit/Safari.');
-        }
-        // Check if already defined in this scoped registry
-        if (registry.get(tagName)) {
-            return;
-        }
-        registry.define(tagName, ElementClass);
-    }
-}
+import { EvtRt } from '../EvtRt.js';
+export class DefineCustomElementHandler extends EvtRt {
+    mount(mountedElement, MountConfig, context) {
+        this.abort();
+        // Check if modules are specified
+        if (!context.modules || context.modules.length === 0) {
+            throw new Error('Must specify an ES Module');
+        }
+        const module = context.modules[0];
+        const tagName = mountedElement.localName;
+        // Check if already defined
+        if (customElements.get(tagName)) {
+            return;
+        }
+        // Find suitable class
+        const ElementClass = this.findSuitableClass(module);
+        // Validate that ElementClass is a constructor
+        if (typeof ElementClass !== 'function') {
+            throw new Error(`Found class is not a constructor: ${typeof ElementClass}`);
+        }
+        // Create wrapper class to allow reuse
+        // Use anonymous class expression which works across all browsers
+        const WrapperClass = class extends ElementClass {
+        };
+        // Define the custom element using the define method
+        this.define(tagName, WrapperClass, mountedElement);
+    }
+    /**
+     * Define the custom element in the appropriate registry.
+     * Override this method in subclasses to use scoped registries.
+     * @param tagName - The custom element tag name
+     * @param ElementClass - The element class constructor
+     * @param mountedElement - The mounted element (used for scoped registry access)
+     */
+    define(tagName, ElementClass, mountedElement) {
+        customElements.define(tagName, ElementClass);
+    }
+    findSuitableClass(module) {
+        // Check default export first
+        const defaultExport = module.default;
+        if (defaultExport && this.extendsHTMLElement(defaultExport)) {
+            return defaultExport;
+        }
+        // Find all exports that extend HTMLElement
+        const htmlElementClasses = Object.values(module)
+            .filter(exp => typeof exp === 'function' && this.extendsHTMLElement(exp));
+        if (htmlElementClasses.length === 0) {
+            throw new Error('No suitable class found in module');
+        }
+        if (htmlElementClasses.length > 1) {
+            throw new Error('More than one class found in module');
+        }
+        return htmlElementClasses[0];
+    }
+    extendsHTMLElement(cls) {
+        try {
+            // Must be a function
+            if (typeof cls !== 'function') {
+                return false;
+            }
+            // Handle direct HTMLElement export
+            if (cls === HTMLElement) {
+                return true;
+            }
+            // Check if it has a prototype and extends HTMLElement
+            if (cls.prototype && cls.prototype instanceof HTMLElement) {
+                return true;
+            }
+            return false;
+        }
+        catch {
+            return false;
+        }
+    }
+}
+/**
+ * Handler for defining custom elements in scoped registries.
+ * Uses the element's customElementRegistry property to define elements
+ * in the appropriate scoped registry instead of the global registry.
+ */
+export class DefineScopedCustomElementHandler extends DefineCustomElementHandler {
+    /**
+     * Define the custom element in the element's scoped registry.
+     * @param tagName - The custom element tag name
+     * @param ElementClass - The element class constructor
+     * @param mountedElement - The mounted element with customElementRegistry
+     */
+    define(tagName, ElementClass, mountedElement) {
+        const registry = mountedElement.customElementRegistry;
+        if (!registry) {
+            throw new Error('Element does not have a customElementRegistry. Scoped registries require Chrome 146+ or latest WebKit/Safari.');
+        }
+        // Check if already defined in this scoped registry
+        if (registry.get(tagName)) {
+            return;
+        }
+        registry.define(tagName, ElementClass);
+    }
+}
+// Register built-in handlers
+import { MountObserver } from '../MountObserver.js';
+MountObserver.define('builtIns.defineCustomElement', DefineCustomElementHandler);
+MountObserver.define('buildIns.defineScopedCustomElement', DefineScopedCustomElementHandler);

package/handlers/DefineCustomElement.ts

@@ -0,0 +1,123 @@
+import { EvtRt } from '../EvtRt.js';
+import { MountConfig, MountContext } from '../types/mount-observer/types.js';
+
+export class DefineCustomElementHandler extends EvtRt {
+    mount(mountedElement: Element, MountConfig: MountConfig, context: MountContext): void {
+        this.abort();
+        // Check if modules are specified
+        if (!context.modules || context.modules.length === 0) {
+            throw new Error('Must specify an ES Module');
+        }
+        
+        const module = context.modules[0];
+        const tagName = mountedElement.localName;
+        
+        // Check if already defined
+        if (customElements.get(tagName)) {
+            return;
+        }
+        
+        // Find suitable class
+        const ElementClass = this.findSuitableClass(module);
+        
+        // Validate that ElementClass is a constructor
+        if (typeof ElementClass !== 'function') {
+            throw new Error(`Found class is not a constructor: ${typeof ElementClass}`);
+        }
+        
+        // Create wrapper class to allow reuse
+        // Use anonymous class expression which works across all browsers
+        const WrapperClass = class extends ElementClass {};
+        
+        // Define the custom element using the define method
+        this.define(tagName, WrapperClass, mountedElement);
+    }
+    
+    /**
+     * Define the custom element in the appropriate registry.
+     * Override this method in subclasses to use scoped registries.
+     * @param tagName - The custom element tag name
+     * @param ElementClass - The element class constructor
+     * @param mountedElement - The mounted element (used for scoped registry access)
+     */
+    protected define(tagName: string, ElementClass: CustomElementConstructor, mountedElement: Element): void {
+        customElements.define(tagName, ElementClass);
+    }
+    
+    private findSuitableClass(module: any): typeof HTMLElement {
+        // Check default export first
+        const defaultExport = module.default;
+        
+        if (defaultExport && this.extendsHTMLElement(defaultExport)) {
+            return defaultExport;
+        }
+        
+        // Find all exports that extend HTMLElement
+        const htmlElementClasses = Object.values(module)
+            .filter(exp => typeof exp === 'function' && this.extendsHTMLElement(exp));
+        
+        if (htmlElementClasses.length === 0) {
+            throw new Error('No suitable class found in module');
+        }
+        
+        if (htmlElementClasses.length > 1) {
+            throw new Error('More than one class found in module');
+        }
+        
+        return htmlElementClasses[0] as typeof HTMLElement;
+    }
+    
+    private extendsHTMLElement(cls: any): boolean {
+        try {
+            // Must be a function
+            if (typeof cls !== 'function') {
+                return false;
+            }
+            // Handle direct HTMLElement export
+            if (cls === HTMLElement) {
+                return true;
+            }
+            // Check if it has a prototype and extends HTMLElement
+            if (cls.prototype && cls.prototype instanceof HTMLElement) {
+                return true;
+            }
+            return false;
+        } catch {
+            return false;
+        }
+    }
+}
+
+/**
+ * Handler for defining custom elements in scoped registries.
+ * Uses the element's customElementRegistry property to define elements
+ * in the appropriate scoped registry instead of the global registry.
+ */
+export class DefineScopedCustomElementHandler extends DefineCustomElementHandler {
+    /**
+     * Define the custom element in the element's scoped registry.
+     * @param tagName - The custom element tag name
+     * @param ElementClass - The element class constructor
+     * @param mountedElement - The mounted element with customElementRegistry
+     */
+    protected define(tagName: string, ElementClass: CustomElementConstructor, mountedElement: Element): void {
+        const registry = (mountedElement as any).customElementRegistry;
+        
+        if (!registry) {
+            throw new Error('Element does not have a customElementRegistry. Scoped registries require Chrome 146+ or latest WebKit/Safari.');
+        }
+        
+        // Check if already defined in this scoped registry
+        if (registry.get(tagName)) {
+            return;
+        }
+        
+        registry.define(tagName, ElementClass);
+    }
+}
+
+// Register built-in handlers
+import { MountObserver } from '../MountObserver.js';
+
+MountObserver.define('builtIns.defineCustomElement', DefineCustomElementHandler);
+MountObserver.define('buildIns.defineScopedCustomElement', DefineScopedCustomElementHandler);

package/handlers/EnhanceMountedElement.js

@@ -0,0 +1,99 @@
+import { EvtRt } from '../EvtRt.js';
+//import { buildCSSQuery } from 'assign-gingerly/buildCSSQuery.js';
+import 'assign-gingerly/object-extension.js';
+/**
+ * Handler for automatically enhancing mounted elements using assign-gingerly.
+ * Searches the first imported module for an export with a "spawn" property
+ * and uses element.enh.get() to spawn the enhancement.
+ */
+export class EnhanceMountedElementHandler extends EvtRt {
+    async mount(mountedElement, MountConfig, context) {
+        this.abort();
+        // Check if modules are specified
+        if (!context.modules || context.modules.length === 0) {
+            throw new Error('Must specify an ES Module with import property');
+        }
+        const module = context.modules[0];
+        // Find registry item (object with spawn property)
+        const registryItem = await this._findRegistryItem(module, mountedElement);
+        if (!registryItem) {
+            throw new Error('No registry item found in module. Expected an export with a "spawn" property.');
+        }
+        // Validate spawn is a constructor
+        if (typeof registryItem.spawn !== 'function') {
+            throw new Error('Registry item "spawn" property must be a constructor function');
+        }
+        // Spawn the enhancement
+        this.#spawnEnhancement(mountedElement, registryItem, context);
+    }
+    /**
+     * Spawn the enhancement using element.enh.get().
+     * Polyfills customElementRegistry if needed for browsers without scoped registry support.
+     */
+    #spawnEnhancement(element, registryItem, context) {
+        // Polyfill element.customElementRegistry if it doesn't exist (for browsers without scoped registries)
+        if (!element.customElementRegistry) {
+            Object.defineProperty(element, 'customElementRegistry', {
+                value: customElements,
+                writable: true,
+                enumerable: false,
+                configurable: true
+            });
+        }
+        // Use element.enh.get() to spawn the enhancement
+        const enh = element.enh;
+        if (!enh || typeof enh.get !== 'function') {
+            throw new Error('Element does not have enh.get() method. Make sure assign-gingerly/object-extension.js is loaded.');
+        }
+        enh.get(registryItem, context);
+    }
+    /**
+     * Find a registry item in the module exports.
+     * A registry item is an object with a "spawn" property.
+     * @param module - The imported module
+     * @returns The registry item or null if not found
+     */
+    async _findRegistryItem(module, el) {
+        // Check default export first
+        if (module.default && await this._isRegistryItem(module.default, el)) {
+            return module.default;
+        }
+        // Search all exports for a registry item
+        const exports = Object.values(module);
+        const registryItems = [];
+        for (const e of exports) {
+            const isRegistryItem = await this._isRegistryItem(e, el);
+            if (isRegistryItem)
+                registryItems.push(e);
+        }
+        if (registryItems.length === 0) {
+            return null;
+        }
+        if (registryItems.length > 1) {
+            throw new Error('More than one registry item found in module. Expected exactly one export with a "spawn" property.');
+        }
+        return registryItems[0];
+    }
+    /**
+     * Check if an export is a registry item (has a spawn property).
+     * @param exp - The export to check
+     * @returns True if the export is a registry item
+     */
+    async _isRegistryItem(exp, mountedElement) {
+        let test = exp !== null
+            && typeof exp === 'object'
+            && 'spawn' in exp
+            && typeof exp.spawn === 'function';
+        if (!test)
+            return false;
+        const emc = exp;
+        if (emc.withAttrs !== undefined) {
+            const cssQuery = (await import('assign-gingerly/buildCSSQuery.js')).buildCSSQuery(emc);
+            return mountedElement.matches(cssQuery);
+        }
+        return true;
+    }
+}
+// Register built-in handler
+import { MountObserver } from '../MountObserver.js';
+MountObserver.define('builtIns.enhanceMountedElement', EnhanceMountedElementHandler);

package/handlers/EnhanceMountedElement.ts

@@ -0,0 +1,116 @@
+import { EvtRt } from '../EvtRt.js';
+import {EnhancementConfig} from '../types/assign-gingerly/types.js';
+import { MountConfig, MountContext } from '../types/mount-observer/types.js';
+//import { buildCSSQuery } from 'assign-gingerly/buildCSSQuery.js';
+import 'assign-gingerly/object-extension.js';
+
+/**
+ * Handler for automatically enhancing mounted elements using assign-gingerly.
+ * Searches the first imported module for an export with a "spawn" property
+ * and uses element.enh.get() to spawn the enhancement.
+ */
+export class EnhanceMountedElementHandler extends EvtRt {
+    async mount(mountedElement: Element, MountConfig: MountConfig, context: MountContext){
+        this.abort();
+        // Check if modules are specified
+        if (!context.modules || context.modules.length === 0) {
+            throw new Error('Must specify an ES Module with import property');
+        }
+        
+        const module = context.modules[0];
+        
+        // Find registry item (object with spawn property)
+        const registryItem = await this._findRegistryItem(module, mountedElement);
+        
+        if (!registryItem) {
+            throw new Error('No registry item found in module. Expected an export with a "spawn" property.');
+        }
+        
+        // Validate spawn is a constructor
+        if (typeof registryItem.spawn !== 'function') {
+            throw new Error('Registry item "spawn" property must be a constructor function');
+        }
+        
+        // Spawn the enhancement
+        this.#spawnEnhancement(mountedElement, registryItem, context);
+    }
+    
+    /**
+     * Spawn the enhancement using element.enh.get().
+     * Polyfills customElementRegistry if needed for browsers without scoped registry support.
+     */
+    #spawnEnhancement(element: Element, registryItem: any, context: MountContext): void {
+        // Polyfill element.customElementRegistry if it doesn't exist (for browsers without scoped registries)
+        if (!(element as any).customElementRegistry) {
+            Object.defineProperty(element, 'customElementRegistry', {
+                value: customElements,
+                writable: true,
+                enumerable: false,
+                configurable: true
+            });
+        }
+        
+        // Use element.enh.get() to spawn the enhancement
+        const enh = (element as any).enh;
+        if (!enh || typeof enh.get !== 'function') {
+            throw new Error('Element does not have enh.get() method. Make sure assign-gingerly/object-extension.js is loaded.');
+        }
+        
+        enh.get(registryItem, context);
+    }
+    
+    /**
+     * Find a registry item in the module exports.
+     * A registry item is an object with a "spawn" property.
+     * @param module - The imported module
+     * @returns The registry item or null if not found
+     */
+    protected async _findRegistryItem(module: any, el: Element): Promise<any | null> {
+        // Check default export first
+        if (module.default && await this._isRegistryItem(module.default, el)) {
+            return module.default;
+        }
+        
+        // Search all exports for a registry item
+        const exports = Object.values(module);
+        const registryItems = [];
+        for(const e of exports){
+            const isRegistryItem = await this._isRegistryItem(e, el);
+            if(isRegistryItem) registryItems.push(e);
+        }
+        
+        if (registryItems.length === 0) {
+            return null;
+        }
+        
+        if (registryItems.length > 1) {
+            throw new Error('More than one registry item found in module. Expected exactly one export with a "spawn" property.');
+        }
+        
+        return registryItems[0];
+    }
+    
+    /**
+     * Check if an export is a registry item (has a spawn property).
+     * @param exp - The export to check
+     * @returns True if the export is a registry item
+     */
+    protected async  _isRegistryItem(exp: any, mountedElement: Element): Promise<boolean> {
+        let test = exp !== null 
+            && typeof exp === 'object' 
+            && 'spawn' in exp 
+            && typeof exp.spawn === 'function';
+        if(!test) return false;
+        const emc = exp as EnhancementConfig;
+        if(emc.withAttrs !== undefined){
+            const cssQuery = (await import('assign-gingerly/buildCSSQuery.js')).buildCSSQuery(emc);
+            return mountedElement.matches(cssQuery);
+        }
+        return true;
+    }
+}
+
+// Register built-in handler
+import { MountObserver } from '../MountObserver.js';
+
+MountObserver.define('builtIns.enhanceMountedElement', EnhanceMountedElementHandler);

package/handlers/Events.js

@@ -0,0 +1,110 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResolvedEvent = exports.MediaUnmatchEvent = exports.MediaMatchEvent = exports.LoadEvent = exports.DisconnectEvent = exports.DismountEvent = exports.MountEvent = exports.resolvedEventName = exports.mediaunmatchEventName = exports.mediamatchEventName = exports.disconnectEventName = exports.dismountEventName = exports.mountEventName = exports.loadEventName = void 0;
+// Event name constants
+exports.loadEventName = 'load';
+exports.mountEventName = 'mount';
+exports.dismountEventName = 'dismount';
+exports.disconnectEventName = 'disconnect';
+exports.mediamatchEventName = 'mediamatch';
+exports.mediaunmatchEventName = 'mediaunmatch';
+exports.resolvedEventName = 'resolved';
+var MountEvent = /** @class */ (function (_super) {
+    __extends(MountEvent, _super);
+    function MountEvent(mountedElement, modules, mountConfig, mountContext) {
+        var _this = _super.call(this, MountEvent.eventName) || this;
+        _this.mountedElement = mountedElement;
+        _this.modules = modules;
+        _this.mountConfig = mountConfig;
+        _this.mountContext = mountContext;
+        return _this;
+    }
+    MountEvent.eventName = exports.mountEventName;
+    return MountEvent;
+}(Event));
+exports.MountEvent = MountEvent;
+var DismountEvent = /** @class */ (function (_super) {
+    __extends(DismountEvent, _super);
+    function DismountEvent(mountedElement, reason, mountConfig) {
+        var _this = _super.call(this, DismountEvent.eventName) || this;
+        _this.mountedElement = mountedElement;
+        _this.reason = reason;
+        _this.mountConfig = mountConfig;
+        return _this;
+    }
+    DismountEvent.eventName = exports.dismountEventName;
+    return DismountEvent;
+}(Event));
+exports.DismountEvent = DismountEvent;
+var DisconnectEvent = /** @class */ (function (_super) {
+    __extends(DisconnectEvent, _super);
+    function DisconnectEvent(mountedElement, mountConfig) {
+        var _this = _super.call(this, DisconnectEvent.eventName) || this;
+        _this.mountedElement = mountedElement;
+        _this.mountConfig = mountConfig;
+        return _this;
+    }
+    DisconnectEvent.eventName = exports.disconnectEventName;
+    return DisconnectEvent;
+}(Event));
+exports.DisconnectEvent = DisconnectEvent;
+var LoadEvent = /** @class */ (function (_super) {
+    __extends(LoadEvent, _super);
+    function LoadEvent(modules, mountConfig) {
+        var _this = _super.call(this, LoadEvent.eventName) || this;
+        _this.modules = modules;
+        _this.mountConfig = mountConfig;
+        return _this;
+    }
+    LoadEvent.eventName = exports.loadEventName;
+    return LoadEvent;
+}(Event));
+exports.LoadEvent = LoadEvent;
+var MediaMatchEvent = /** @class */ (function (_super) {
+    __extends(MediaMatchEvent, _super);
+    function MediaMatchEvent(mountConfig) {
+        var _this = _super.call(this, MediaMatchEvent.eventName) || this;
+        _this.mountConfig = mountConfig;
+        return _this;
+    }
+    MediaMatchEvent.eventName = exports.mediamatchEventName;
+    return MediaMatchEvent;
+}(Event));
+exports.MediaMatchEvent = MediaMatchEvent;
+var MediaUnmatchEvent = /** @class */ (function (_super) {
+    __extends(MediaUnmatchEvent, _super);
+    function MediaUnmatchEvent(mountConfig) {
+        var _this = _super.call(this, MediaUnmatchEvent.eventName) || this;
+        _this.mountConfig = mountConfig;
+        return _this;
+    }
+    MediaUnmatchEvent.eventName = exports.mediaunmatchEventName;
+    return MediaUnmatchEvent;
+}(Event));
+exports.MediaUnmatchEvent = MediaUnmatchEvent;
+var ResolvedEvent = /** @class */ (function (_super) {
+    __extends(ResolvedEvent, _super);
+    function ResolvedEvent(exportValue) {
+        var _this = _super.call(this, ResolvedEvent.eventName) || this;
+        _this.export = exportValue;
+        return _this;
+    }
+    ResolvedEvent.eventName = exports.resolvedEventName;
+    return ResolvedEvent;
+}(Event));
+exports.ResolvedEvent = ResolvedEvent;