mount-observer 0.1.1 → 0.1.3

package/DefineCustomElementHandler.js

@@ -0,0 +1,64 @@
+import { EvtRt } from './EvtRt.js';
+export class DefineCustomElementHandler extends EvtRt {
+    mount(mountedElement, mountInit, context) {
+        // 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
+        customElements.define(tagName, WrapperClass);
+    }
+    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;
+        }
+    }
+}

package/DefineCustomElementHandler.ts

@@ -0,0 +1,77 @@
+import { EvtRt } from './EvtRt.js';
+import { MountInit, MountContext } from './types.js';
+
+export class DefineCustomElementHandler extends EvtRt {
+    mount(mountedElement: Element, mountInit: MountInit, context: MountContext): void {
+        // 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
+        customElements.define(tagName, WrapperClass);
+    }
+    
+    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;
+        }
+    }
+}

package/Events.js

@@ -7,36 +7,38 @@ export const attrchangeEventName = 'attrchange';
 export const mediamatchEventName = 'mediamatch';
 export const mediaunmatchEventName = 'mediaunmatch';
 export class MountEvent extends Event {
-    matchingElement;
+    mountedElement;
     modules;
     mountInit;
+    mountContext;
     static eventName = mountEventName;
-    constructor(matchingElement, modules, mountInit) {
+    constructor(mountedElement, modules, mountInit, mountContext) {
         super(MountEvent.eventName);
-        this.matchingElement = matchingElement;
+        this.mountedElement = mountedElement;
         this.modules = modules;
         this.mountInit = mountInit;
+        this.mountContext = mountContext;
     }
 }
 export class DismountEvent extends Event {
-    matchingElement;
+    mountedElement;
     reason;
     mountInit;
     static eventName = dismountEventName;
-    constructor(matchingElement, reason, mountInit) {
+    constructor(mountedElement, reason, mountInit) {
         super(DismountEvent.eventName);
-        this.matchingElement = matchingElement;
+        this.mountedElement = mountedElement;
         this.reason = reason;
         this.mountInit = mountInit;
     }
 }
 export class DisconnectEvent extends Event {
-    matchingElement;
+    mountedElement;
     mountInit;
     static eventName = disconnectEventName;
-    constructor(matchingElement, mountInit) {
+    constructor(mountedElement, mountInit) {
         super(DisconnectEvent.eventName);
-        this.matchingElement = matchingElement;
+        this.mountedElement = mountedElement;
         this.mountInit = mountInit;
     }
 }

package/Events.ts

@@ -1,5 +1,5 @@
 // Event classes for MountObserver
-import type { IMountEvent, IDismountEvent, IAttrChangeEvent, AttrChange, MountInit, DismountReason } from './types.js';
+import type { IMountEvent, IDismountEvent, IAttrChangeEvent, AttrChange, MountInit, DismountReason, MountContext } from './types.js';
 
 // Event name constants
 export const loadEventName = 'load';
@@ -13,7 +13,12 @@ export const mediaunmatchEventName = 'mediaunmatch';
 export class MountEvent extends Event implements IMountEvent {
     static eventName: typeof mountEventName = mountEventName;
     
-    constructor(public matchingElement: Element, public modules: any[], public mountInit: MountInit) {
+    constructor(
+        public mountedElement: Element, 
+        public modules: any[], 
+        public mountInit: MountInit,
+        public mountContext: MountContext
+    ) {
         super(MountEvent.eventName);
     }
 }
@@ -21,7 +26,7 @@ export class MountEvent extends Event implements IMountEvent {
 export class DismountEvent extends Event implements IDismountEvent {
     static eventName: typeof dismountEventName = dismountEventName;
     
-    constructor(public matchingElement: Element, public reason: DismountReason, public mountInit: MountInit) {
+    constructor(public mountedElement: Element, public reason: DismountReason, public mountInit: MountInit) {
         super(DismountEvent.eventName);
     }
 }
@@ -29,7 +34,7 @@ export class DismountEvent extends Event implements IDismountEvent {
 export class DisconnectEvent extends Event {
     static eventName: typeof disconnectEventName = disconnectEventName;
     
-    constructor(public matchingElement: Element, public mountInit: MountInit) {
+    constructor(public mountedElement: Element, public mountInit: MountInit) {
         super(DisconnectEvent.eventName);
     }
 }

package/EvtRt.js

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

package/EvtRt.ts

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