mount-observer 0.1.11 → 0.1.13

package/EnhanceMountedElementHandler.js

@@ -1,95 +1,96 @@
-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) {
-        // 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;
-    }
-}
+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;
+    }
+}

package/Events.js

@@ -8,62 +8,62 @@ export const mediaunmatchEventName = 'mediaunmatch';
 export class MountEvent extends Event {
     mountedElement;
     modules;
-    MountConfig;
+    mountConfig;
     mountContext;
     static eventName = mountEventName;
-    constructor(mountedElement, modules, MountConfig, mountContext) {
+    constructor(mountedElement, modules, mountConfig, mountContext) {
         super(MountEvent.eventName);
         this.mountedElement = mountedElement;
         this.modules = modules;
-        this.MountConfig = MountConfig;
+        this.mountConfig = mountConfig;
         this.mountContext = mountContext;
     }
 }
 export class DismountEvent extends Event {
     mountedElement;
     reason;
-    MountConfig;
+    mountConfig;
     static eventName = dismountEventName;
-    constructor(mountedElement, reason, MountConfig) {
+    constructor(mountedElement, reason, mountConfig) {
         super(DismountEvent.eventName);
         this.mountedElement = mountedElement;
         this.reason = reason;
-        this.MountConfig = MountConfig;
+        this.mountConfig = mountConfig;
     }
 }
 export class DisconnectEvent extends Event {
     mountedElement;
-    MountConfig;
+    mountConfig;
     static eventName = disconnectEventName;
-    constructor(mountedElement, MountConfig) {
+    constructor(mountedElement, mountConfig) {
         super(DisconnectEvent.eventName);
         this.mountedElement = mountedElement;
-        this.MountConfig = MountConfig;
+        this.mountConfig = mountConfig;
     }
 }
 export class LoadEvent extends Event {
     modules;
-    MountConfig;
+    mountConfig;
     static eventName = loadEventName;
-    constructor(modules, MountConfig) {
+    constructor(modules, mountConfig) {
         super(LoadEvent.eventName);
         this.modules = modules;
-        this.MountConfig = MountConfig;
+        this.mountConfig = mountConfig;
     }
 }
 export class MediaMatchEvent extends Event {
-    MountConfig;
+    mountConfig;
     static eventName = mediamatchEventName;
-    constructor(MountConfig) {
+    constructor(mountConfig) {
         super(MediaMatchEvent.eventName);
-        this.MountConfig = MountConfig;
+        this.mountConfig = mountConfig;
     }
 }
 export class MediaUnmatchEvent extends Event {
-    MountConfig;
+    mountConfig;
     static eventName = mediaunmatchEventName;
-    constructor(MountConfig) {
+    constructor(mountConfig) {
         super(MediaUnmatchEvent.eventName);
-        this.MountConfig = MountConfig;
+        this.mountConfig = mountConfig;
     }
 }

package/Events.ts

@@ -15,7 +15,7 @@ export class MountEvent extends Event implements IMountEvent {
     constructor(
         public mountedElement: Element, 
         public modules: any[], 
-        public MountConfig: MountConfig,
+        public mountConfig: MountConfig,
         public mountContext: MountContext
     ) {
         super(MountEvent.eventName);
@@ -25,7 +25,7 @@ export class MountEvent extends Event implements IMountEvent {
 export class DismountEvent extends Event implements IDismountEvent {
     static eventName: typeof dismountEventName = dismountEventName;
     
-    constructor(public mountedElement: Element, public reason: DismountReason, public MountConfig: MountConfig) {
+    constructor(public mountedElement: Element, public reason: DismountReason, public mountConfig: MountConfig) {
         super(DismountEvent.eventName);
     }
 }
@@ -33,7 +33,7 @@ export class DismountEvent extends Event implements IDismountEvent {
 export class DisconnectEvent extends Event {
     static eventName: typeof disconnectEventName = disconnectEventName;
     
-    constructor(public mountedElement: Element, public MountConfig: MountConfig) {
+    constructor(public mountedElement: Element, public mountConfig: MountConfig) {
         super(DisconnectEvent.eventName);
     }
 }
@@ -41,7 +41,7 @@ export class DisconnectEvent extends Event {
 export class LoadEvent extends Event {
     static eventName: typeof loadEventName = loadEventName;
     
-    constructor(public modules: any[], public MountConfig: MountConfig) {
+    constructor(public modules: any[], public mountConfig: MountConfig) {
         super(LoadEvent.eventName);
     }
 }
@@ -49,7 +49,7 @@ export class LoadEvent extends Event {
 export class MediaMatchEvent extends Event {
     static eventName: typeof mediamatchEventName = mediamatchEventName;
     
-    constructor(public MountConfig: MountConfig) {
+    constructor(public mountConfig: MountConfig) {
         super(MediaMatchEvent.eventName);
     }
 }
@@ -57,7 +57,7 @@ export class MediaMatchEvent extends Event {
 export class MediaUnmatchEvent extends Event {
     static eventName: typeof mediaunmatchEventName = mediaunmatchEventName;
     
-    constructor(public MountConfig: MountConfig) {
+    constructor(public mountConfig: MountConfig) {
         super(MediaUnmatchEvent.eventName);
     }
 }

package/EvtRt.js

@@ -1,34 +1,41 @@
 import { DismountEvent, MountEvent, DisconnectEvent, dismountEventName, disconnectEventName, mountEventName } from './Events.js';
+import { MountObserver } from './MountObserver.js';
 export class EvtRt {
+    #ac;
     constructor(mountedElement, ctx) {
-        const { observer, MountConfig } = ctx;
+        const { observer, mountConfig } = ctx;
+        this.#ac = new AbortController();
         const et = observer.getNotifier(mountedElement);
-        et.addEventListener(mountEventName, this);
-        et.addEventListener(disconnectEventName, this);
-        et.addEventListener(dismountEventName, this);
-        this.mount(mountedElement, MountConfig, ctx);
+        et.addEventListener(mountEventName, this, { signal: this.#ac.signal });
+        et.addEventListener(disconnectEventName, this, { signal: this.#ac.signal });
+        et.addEventListener(dismountEventName, this, { signal: this.#ac.signal });
+        this.mount(mountedElement, mountConfig, ctx);
     }
-    mount(mountedElement, MountConfig, context) {
-        console.log({ mountedElement, MountConfig, context });
+    abort() {
+        this.#ac.abort();
     }
-    disconnect(mountedElement, MountConfig) {
-        console.log({ mountedElement, MountConfig });
+    mount(mountedElement, mountConfig, context) {
+        console.log({ mountedElement, mountConfig, context });
     }
-    dismount(mountedElement, MountConfig) {
-        console.log({ mountedElement, MountConfig });
+    disconnect(mountedElement, mountConfig) {
+        console.log({ mountedElement, mountConfig });
+    }
+    dismount(mountedElement, mountConfig) {
+        console.log({ mountedElement, mountConfig });
     }
     handleEvent(evt) {
         if (evt instanceof MountEvent) {
-            const { mountedElement, mountContext, MountConfig } = evt;
-            this.mount(mountedElement, MountConfig, mountContext);
+            const { mountedElement, mountContext, mountConfig } = evt;
+            this.mount(mountedElement, mountConfig, mountContext);
         }
         else if (evt instanceof DismountEvent) {
-            const { mountedElement, MountConfig } = evt;
-            this.dismount(mountedElement, MountConfig);
+            const { mountedElement, mountConfig } = evt;
+            this.dismount(mountedElement, mountConfig);
         }
         else if (evt instanceof DisconnectEvent) {
-            const { mountedElement, MountConfig } = evt;
-            this.disconnect(mountedElement, MountConfig);
+            const { mountedElement, mountConfig } = evt;
+            this.disconnect(mountedElement, mountConfig);
         }
     }
 }
+MountObserver.define('builtIns.logToConsole', EvtRt);

package/EvtRt.ts

@@ -4,39 +4,51 @@ import {
     DismountEvent, MountEvent, DisconnectEvent,
     dismountEventName, disconnectEventName, mountEventName 
 } from './Events.js';
+import { MountObserver } from './MountObserver.js';
 export class EvtRt implements EventListenerObject{
+
+    
+    #ac: AbortController;
+
     constructor(mountedElement: Element, ctx: MountContext ){
-        const {observer, MountConfig} = ctx;
+        const {observer, mountConfig} = ctx;
+        this.#ac = new AbortController();
         const et = observer.getNotifier(mountedElement);
-        et.addEventListener(mountEventName, this);
-        et.addEventListener(disconnectEventName, this);
-        et.addEventListener(dismountEventName, this);
-        this.mount(mountedElement, MountConfig, ctx);
+        et.addEventListener(mountEventName, this, {signal: this.#ac.signal});
+        et.addEventListener(disconnectEventName, this, {signal: this.#ac.signal});
+        et.addEventListener(dismountEventName, this, {signal: this.#ac.signal});
+        this.mount(mountedElement, mountConfig, ctx);
 
     }
 
-    mount(mountedElement: Element, MountConfig: MountConfig, context: MountContext){
-        console.log({mountedElement, MountConfig, context});
+    abort(){
+        this.#ac.abort();
     }
 
-    disconnect(mountedElement: Element, MountConfig: MountConfig){
-        console.log({mountedElement, MountConfig});
+    mount(mountedElement: Element, mountConfig: MountConfig, context: MountContext){
+        console.log({mountedElement, mountConfig, context});
     }
 
-    dismount(mountedElement: Element, MountConfig: MountConfig){
-        console.log({mountedElement, MountConfig});
+    disconnect(mountedElement: Element, mountConfig: MountConfig){
+        console.log({mountedElement, mountConfig});
+    }
+
+    dismount(mountedElement: Element, mountConfig: MountConfig){
+        console.log({mountedElement, mountConfig});
     }
 
     handleEvent(evt: Event): void {
         if(evt instanceof MountEvent){
-            const {mountedElement, mountContext, MountConfig} = evt;
-            this.mount(mountedElement, MountConfig, mountContext);
+            const {mountedElement, mountContext, mountConfig} = evt;
+            this.mount(mountedElement, mountConfig, mountContext);
         }else if(evt instanceof DismountEvent){
-            const {mountedElement, MountConfig} = evt;
-            this.dismount(mountedElement, MountConfig);
+            const {mountedElement, mountConfig} = evt;
+            this.dismount(mountedElement, mountConfig);
         }else if(evt instanceof DisconnectEvent){
-            const {mountedElement, MountConfig} = evt;
-            this.disconnect(mountedElement, MountConfig);
+            const {mountedElement, mountConfig} = evt;
+            this.disconnect(mountedElement, mountConfig);
         }
     }
-}
+}
+
+MountObserver.define('builtIns.logToConsole', EvtRt);