mount-observer 0.1.4 → 0.1.6

package/DefineCustomElementHandler.js

@@ -1,6 +1,6 @@
 import { EvtRt } from './EvtRt.js';
 export class DefineCustomElementHandler extends EvtRt {
-    mount(mountedElement, mountInit, context) {
+    mount(mountedElement, MountConfig, context) {
         // Check if modules are specified
         if (!context.modules || context.modules.length === 0) {
             throw new Error('Must specify an ES Module');
@@ -21,8 +21,18 @@ export class DefineCustomElementHandler extends EvtRt {
         // Use anonymous class expression which works across all browsers
         const WrapperClass = class extends ElementClass {
         };
-        // Define the custom element
-        customElements.define(tagName, WrapperClass);
+        // 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
@@ -62,3 +72,27 @@ export class DefineCustomElementHandler extends EvtRt {
         }
     }
 }
+/**
+ * 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);
+    }
+}

package/DefineCustomElementHandler.ts

@@ -1,8 +1,8 @@
 import { EvtRt } from './EvtRt.js';
-import { MountInit, MountContext } from './types.js';
+import { MountConfig, MountContext } from './types.js';
 
 export class DefineCustomElementHandler extends EvtRt {
-    mount(mountedElement: Element, mountInit: MountInit, context: MountContext): void {
+    mount(mountedElement: Element, MountConfig: MountConfig, context: MountContext): void {
         // Check if modules are specified
         if (!context.modules || context.modules.length === 0) {
             throw new Error('Must specify an ES Module');
@@ -28,8 +28,19 @@ export class DefineCustomElementHandler extends EvtRt {
         // Use anonymous class expression which works across all browsers
         const WrapperClass = class extends ElementClass {};
         
-        // Define the custom element
-        customElements.define(tagName, WrapperClass);
+        // 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 {
@@ -75,3 +86,31 @@ export class DefineCustomElementHandler extends EvtRt {
         }
     }
 }
+
+/**
+ * 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);
+    }
+}

package/ElementMountExtension.js

@@ -0,0 +1,49 @@
+/**
+ * Extension to Element.prototype to support mounting observers directly on elements.
+ * This finds the appropriate scoped registry container and observes it.
+ */
+import { MountObserver } from './MountObserver.js';
+import { getRootRegistryContainer } from './getRootRegistryContainer.js';
+/**
+ * Adds a mount method to Element.prototype that:
+ * 1. Determines the observation scope based on options.scope
+ * 2. Creates a MountObserver with the provided config
+ * 3. Observes that scope
+ * 4. Returns the element for chaining
+ */
+Object.defineProperty(Element.prototype, 'mount', {
+    value: async function (config, options = {}) {
+        const scope = options.scope ?? 'registry';
+        let thingToObserve;
+        if (scope === 'registry') {
+            const registryContainer = getRootRegistryContainer(this);
+            if (!registryContainer) {
+                throw new Error('Could not find root registry container');
+            }
+            thingToObserve = registryContainer;
+        }
+        else if (scope === 'self') {
+            thingToObserve = this;
+        }
+        else if (scope === 'root') {
+            thingToObserve = this.getRootNode();
+        }
+        else if (scope === 'shadow') {
+            const shadowRoot = this.shadowRoot;
+            if (!shadowRoot) {
+                throw new Error('Element does not have a shadowRoot');
+            }
+            thingToObserve = shadowRoot;
+        }
+        else {
+            // scope is an Element
+            thingToObserve = scope;
+        }
+        const mo = new MountObserver(config, options);
+        await mo.observe(thingToObserve);
+        return this;
+    },
+    writable: true,
+    enumerable: false,
+    configurable: true,
+});

package/ElementMountExtension.ts

@@ -0,0 +1,65 @@
+/**
+ * Extension to Element.prototype to support mounting observers directly on elements.
+ * This finds the appropriate scoped registry container and observes it.
+ */
+
+import { MountObserver } from './MountObserver.js';
+import { getRootRegistryContainer } from './getRootRegistryContainer.js';
+import type { MountConfig, MountObserverOptions } from './types.js';
+import type { EnhancementConfig } from 'assign-gingerly/types.js';
+
+declare global {
+    interface Element {
+        mount<T extends Element>(
+            this: T,
+            config: MountConfig | EnhancementConfig[], 
+            options?: MountObserverOptions
+        ): Promise<T>;
+    }
+}
+
+/**
+ * Adds a mount method to Element.prototype that:
+ * 1. Determines the observation scope based on options.scope
+ * 2. Creates a MountObserver with the provided config
+ * 3. Observes that scope
+ * 4. Returns the element for chaining
+ */
+Object.defineProperty(Element.prototype, 'mount', {
+    value: async function <T extends Element>(
+        this: T,
+        config: MountConfig | EnhancementConfig[], 
+        options: MountObserverOptions = {}
+    ): Promise<T> {
+        const scope = options.scope ?? 'registry';
+        let thingToObserve: Node;
+        
+        if (scope === 'registry') {
+            const registryContainer = getRootRegistryContainer(this);
+            if (!registryContainer) {
+                throw new Error('Could not find root registry container');
+            }
+            thingToObserve = registryContainer;
+        } else if (scope === 'self') {
+            thingToObserve = this;
+        } else if (scope === 'root') {
+            thingToObserve = this.getRootNode();
+        } else if (scope === 'shadow') {
+            const shadowRoot = (this as any).shadowRoot;
+            if (!shadowRoot) {
+                throw new Error('Element does not have a shadowRoot');
+            }
+            thingToObserve = shadowRoot;
+        } else {
+            // scope is an Element
+            thingToObserve = scope;
+        }
+        
+        const mo = new MountObserver(config, options);
+        await mo.observe(thingToObserve);
+        return this;
+    },
+    writable: true,
+    enumerable: false,
+    configurable: true,
+});

package/Events.js

@@ -3,78 +3,67 @@ export const loadEventName = 'load';
 export const mountEventName = 'mount';
 export const dismountEventName = 'dismount';
 export const disconnectEventName = 'disconnect';
-export const attrchangeEventName = 'attrchange';
 export const mediamatchEventName = 'mediamatch';
 export const mediaunmatchEventName = 'mediaunmatch';
 export class MountEvent extends Event {
     mountedElement;
     modules;
-    mountInit;
+    MountConfig;
     mountContext;
     static eventName = mountEventName;
-    constructor(mountedElement, modules, mountInit, mountContext) {
+    constructor(mountedElement, modules, MountConfig, mountContext) {
         super(MountEvent.eventName);
         this.mountedElement = mountedElement;
         this.modules = modules;
-        this.mountInit = mountInit;
+        this.MountConfig = MountConfig;
         this.mountContext = mountContext;
     }
 }
 export class DismountEvent extends Event {
     mountedElement;
     reason;
-    mountInit;
+    MountConfig;
     static eventName = dismountEventName;
-    constructor(mountedElement, reason, mountInit) {
+    constructor(mountedElement, reason, MountConfig) {
         super(DismountEvent.eventName);
         this.mountedElement = mountedElement;
         this.reason = reason;
-        this.mountInit = mountInit;
+        this.MountConfig = MountConfig;
     }
 }
 export class DisconnectEvent extends Event {
     mountedElement;
-    mountInit;
+    MountConfig;
     static eventName = disconnectEventName;
-    constructor(mountedElement, mountInit) {
+    constructor(mountedElement, MountConfig) {
         super(DisconnectEvent.eventName);
         this.mountedElement = mountedElement;
-        this.mountInit = mountInit;
+        this.MountConfig = MountConfig;
     }
 }
 export class LoadEvent extends Event {
     modules;
-    mountInit;
+    MountConfig;
     static eventName = loadEventName;
-    constructor(modules, mountInit) {
+    constructor(modules, MountConfig) {
         super(LoadEvent.eventName);
         this.modules = modules;
-        this.mountInit = mountInit;
-    }
-}
-export class AttrChangeEvent extends Event {
-    changes;
-    mountInit;
-    static eventName = attrchangeEventName;
-    constructor(changes, mountInit) {
-        super(AttrChangeEvent.eventName);
-        this.changes = changes;
-        this.mountInit = mountInit;
+        this.MountConfig = MountConfig;
     }
 }
 export class MediaMatchEvent extends Event {
-    mountInit;
+    MountConfig;
     static eventName = mediamatchEventName;
-    constructor(mountInit) {
+    constructor(MountConfig) {
         super(MediaMatchEvent.eventName);
-        this.mountInit = mountInit;
+        this.MountConfig = MountConfig;
     }
 }
 export class MediaUnmatchEvent extends Event {
-    mountInit;
+    MountConfig;
     static eventName = mediaunmatchEventName;
-    constructor(mountInit) {
+    constructor(MountConfig) {
         super(MediaUnmatchEvent.eventName);
-        this.mountInit = mountInit;
+        this.MountConfig = MountConfig;
     }
 }

package/Events.ts

@@ -1,12 +1,11 @@
 // Event classes for MountObserver
-import type { IMountEvent, IDismountEvent, IAttrChangeEvent, AttrChange, MountInit, DismountReason, MountContext } from './types.js';
+import type { IMountEvent, IDismountEvent, MountConfig, DismountReason, MountContext } from './types.js';
 
 // Event name constants
 export const loadEventName = 'load';
 export const mountEventName = 'mount';
 export const dismountEventName = 'dismount';
 export const disconnectEventName = 'disconnect';
-export const attrchangeEventName = 'attrchange';
 export const mediamatchEventName = 'mediamatch';
 export const mediaunmatchEventName = 'mediaunmatch';
 
@@ -16,7 +15,7 @@ export class MountEvent extends Event implements IMountEvent {
     constructor(
         public mountedElement: Element, 
         public modules: any[], 
-        public mountInit: MountInit,
+        public MountConfig: MountConfig,
         public mountContext: MountContext
     ) {
         super(MountEvent.eventName);
@@ -26,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 mountInit: MountInit) {
+    constructor(public mountedElement: Element, public reason: DismountReason, public MountConfig: MountConfig) {
         super(DismountEvent.eventName);
     }
 }
@@ -34,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 mountInit: MountInit) {
+    constructor(public mountedElement: Element, public MountConfig: MountConfig) {
         super(DisconnectEvent.eventName);
     }
 }
@@ -42,23 +41,15 @@ export class DisconnectEvent extends Event {
 export class LoadEvent extends Event {
     static eventName: typeof loadEventName = loadEventName;
     
-    constructor(public modules: any[], public mountInit: MountInit) {
+    constructor(public modules: any[], public MountConfig: MountConfig) {
         super(LoadEvent.eventName);
     }
 }
 
-export class AttrChangeEvent extends Event implements IAttrChangeEvent {
-    static eventName: typeof attrchangeEventName = attrchangeEventName;
-    
-    constructor(public changes: AttrChange[], public mountInit: MountInit) {
-        super(AttrChangeEvent.eventName);
-    }
-}
-
 export class MediaMatchEvent extends Event {
     static eventName: typeof mediamatchEventName = mediamatchEventName;
     
-    constructor(public mountInit: MountInit) {
+    constructor(public MountConfig: MountConfig) {
         super(MediaMatchEvent.eventName);
     }
 }
@@ -66,7 +57,7 @@ export class MediaMatchEvent extends Event {
 export class MediaUnmatchEvent extends Event {
     static eventName: typeof mediaunmatchEventName = mediaunmatchEventName;
     
-    constructor(public mountInit: MountInit) {
+    constructor(public MountConfig: MountConfig) {
         super(MediaUnmatchEvent.eventName);
     }
 }

package/EvtRt.js

@@ -1,34 +1,34 @@
 import { DismountEvent, MountEvent, DisconnectEvent, dismountEventName, disconnectEventName, mountEventName } from './Events.js';
 export class EvtRt {
     constructor(mountedElement, ctx) {
-        const { observer, mountInit } = ctx;
+        const { observer, MountConfig } = ctx;
         const et = observer.getNotifier(mountedElement);
         et.addEventListener(mountEventName, this);
         et.addEventListener(disconnectEventName, this);
         et.addEventListener(dismountEventName, this);
-        this.mount(mountedElement, mountInit, ctx);
+        this.mount(mountedElement, MountConfig, ctx);
     }
-    mount(mountedElement, mountInit, context) {
-        console.log({ mountedElement, mountInit, context });
+    mount(mountedElement, MountConfig, context) {
+        console.log({ mountedElement, MountConfig, context });
     }
-    disconnect(mountedElement, mountInit) {
-        console.log({ mountedElement, mountInit });
+    disconnect(mountedElement, MountConfig) {
+        console.log({ mountedElement, MountConfig });
     }
-    dismount(mountedElement, mountInit) {
-        console.log({ mountedElement, mountInit });
+    dismount(mountedElement, MountConfig) {
+        console.log({ mountedElement, MountConfig });
     }
     handleEvent(evt) {
         if (evt instanceof MountEvent) {
-            const { mountedElement, mountContext, mountInit } = evt;
-            this.mount(mountedElement, mountInit, mountContext);
+            const { mountedElement, mountContext, MountConfig } = evt;
+            this.mount(mountedElement, MountConfig, mountContext);
         }
         else if (evt instanceof DismountEvent) {
-            const { mountedElement, mountInit } = evt;
-            this.dismount(mountedElement, mountInit);
+            const { mountedElement, MountConfig } = evt;
+            this.dismount(mountedElement, MountConfig);
         }
         else if (evt instanceof DisconnectEvent) {
-            const { mountedElement, mountInit } = evt;
-            this.disconnect(mountedElement, mountInit);
+            const { mountedElement, MountConfig } = evt;
+            this.disconnect(mountedElement, MountConfig);
         }
     }
 }

package/EvtRt.ts

@@ -1,4 +1,4 @@
-import {MountContext, MountInit} from './types.js';
+import {MountContext, MountConfig} from './types.js';
 
 import { 
     DismountEvent, MountEvent, DisconnectEvent,
@@ -6,37 +6,37 @@ import {
 } from './Events.js';
 export class EvtRt implements EventListenerObject{
     constructor(mountedElement: Element, ctx: MountContext ){
-        const {observer, mountInit} = ctx;
+        const {observer, MountConfig} = ctx;
         const et = observer.getNotifier(mountedElement);
         et.addEventListener(mountEventName, this);
         et.addEventListener(disconnectEventName, this);
         et.addEventListener(dismountEventName, this);
-        this.mount(mountedElement, mountInit, ctx);
+        this.mount(mountedElement, MountConfig, ctx);
 
     }
 
-    mount(mountedElement: Element, mountInit: MountInit, context: MountContext){
-        console.log({mountedElement, mountInit, context});
+    mount(mountedElement: Element, MountConfig: MountConfig, context: MountContext){
+        console.log({mountedElement, MountConfig, context});
     }
 
-    disconnect(mountedElement: Element, mountInit: MountInit){
-        console.log({mountedElement, mountInit});
+    disconnect(mountedElement: Element, MountConfig: MountConfig){
+        console.log({mountedElement, MountConfig});
     }
 
-    dismount(mountedElement: Element, mountInit: MountInit){
-        console.log({mountedElement, mountInit});
+    dismount(mountedElement: Element, MountConfig: MountConfig){
+        console.log({mountedElement, MountConfig});
     }
 
     handleEvent(evt: Event): void {
         if(evt instanceof MountEvent){
-            const {mountedElement, mountContext, mountInit} = evt;
-            this.mount(mountedElement, mountInit, mountContext);
+            const {mountedElement, mountContext, MountConfig} = evt;
+            this.mount(mountedElement, MountConfig, mountContext);
         }else if(evt instanceof DismountEvent){
-            const {mountedElement, mountInit} = evt;
-            this.dismount(mountedElement, mountInit);
+            const {mountedElement, MountConfig} = evt;
+            this.dismount(mountedElement, MountConfig);
         }else if(evt instanceof DisconnectEvent){
-            const {mountedElement, mountInit} = evt;
-            this.disconnect(mountedElement, mountInit);
+            const {mountedElement, MountConfig} = evt;
+            this.disconnect(mountedElement, MountConfig);
         }
     }
 }