mount-observer 0.1.14 → 0.1.16

package/ElementMountExtension.js

@@ -71,6 +71,9 @@ Object.defineProperty(Node.prototype, 'mount', {
         if (!(this instanceof Element)) {
             throw new Error('mount() can only be called on Element, ShadowRoot, or Document');
         }
+        if (this instanceof HTMLScriptElement) {
+            options.mose = new WeakRef(this);
+        }
         const scope = options.scope ?? 'registry'; // NEW DEFAULT
         let thingToObserve;
         if (scope === 'registry') {
@@ -84,7 +87,7 @@ Object.defineProperty(Node.prototype, 'mount', {
             const registry = this.customElementRegistry;
             // Register with coordinator if registry exists
             if (registry) {
-                await getOrInsertObserverEntry(registry, config, thingToObserve);
+                await getOrInsertObserverEntry(registry, config, thingToObserve, options);
             }
             else {
                 // No registry, just create a standalone observer
@@ -146,7 +149,7 @@ Object.defineProperty(Element.prototype, 'mountScope', {
         const configs = registry.mountConfigRegistry.items;
         // For each config, ensure an observer exists for this registry root
         for (const config of configs) {
-            await getOrInsertObserverEntry(registry, config, registryRoot);
+            await getOrInsertObserverEntry(registry, config, registryRoot, {});
         }
     },
     writable: true,

package/ElementMountExtension.ts

@@ -95,6 +95,7 @@ Object.defineProperty(Node.prototype, 'mount', {
         config: MountConfig, 
         options: MountObserverOptions = {}
     ): Promise<T> {
+
         // For ShadowRoot and Document, observe directly
         if (this instanceof ShadowRoot || this instanceof Document) {
             const mo = new MountObserver(config, options);
@@ -106,6 +107,10 @@ Object.defineProperty(Node.prototype, 'mount', {
         if (!(this instanceof Element)) {
             throw new Error('mount() can only be called on Element, ShadowRoot, or Document');
         }
+
+        if(this instanceof HTMLScriptElement) {
+            options.mose = new WeakRef(this);
+        }
         
         const scope = options.scope ?? 'registry';  // NEW DEFAULT
         let thingToObserve: Node;
@@ -123,7 +128,7 @@ Object.defineProperty(Node.prototype, 'mount', {
             
             // Register with coordinator if registry exists
             if (registry) {
-                await getOrInsertObserverEntry(registry, config, thingToObserve);
+                await getOrInsertObserverEntry(registry, config, thingToObserve, options);
             } else {
                 // No registry, just create a standalone observer
                 const mo = new MountObserver(config, options);
@@ -185,7 +190,7 @@ Object.defineProperty(Element.prototype, 'mountScope', {
         
         // For each config, ensure an observer exists for this registry root
         for (const config of configs) {
-            await getOrInsertObserverEntry(registry, config, registryRoot);
+            await getOrInsertObserverEntry(registry, config, registryRoot, {});
         }
     },
     writable: true,

package/MountObserver.js

@@ -13,6 +13,9 @@ export class MountObserver extends EventTarget {
     }
     #init;
     #options;
+    get options() {
+        return { ...this.#options };
+    }
     #abortController;
     #modules = [];
     #configFromPromise;

package/MountObserver.ts

@@ -37,6 +37,9 @@ export class MountObserver<TKeys extends string = string> extends EventTarget im
     
     #init: MountConfig;
     #options: MountObserverOptions;
+    get options(): MountObserverOptions {
+        return { ...this.#options };
+    }
     #abortController: AbortController;
     #modules: any[] = [];
     #configFromPromise: Promise<void> | undefined;

package/RegistryMountCoordinator.js

@@ -55,10 +55,10 @@ if (typeof WeakMap.prototype.getOrInsertComputed !== 'function') {
  * Helper to create an observer entry asynchronously.
  * Separated to handle async operations cleanly.
  */
-async function createObserverEntry(config, registryRoot) {
+async function createObserverEntry(config, registryRoot, options) {
     // Dynamically import to avoid circular dependency
     const { MountObserver: MountObserverClass } = await import('./MountObserver.js');
-    const observer = new MountObserverClass(config);
+    const observer = new MountObserverClass(config, options);
     await observer.observe(registryRoot);
     return {
         config,
@@ -76,7 +76,7 @@ async function createObserverEntry(config, registryRoot) {
  *
  * @returns The ObserverEntry for the requested combination
  */
-export async function getOrInsertObserverEntry(registry, config, registryRoot) {
+export async function getOrInsertObserverEntry(registry, config, registryRoot, options) {
     // Add config to the registry's config list (if not already there)
     registry.mountConfigRegistry.push(config);
     // Get or create the nested map structure
@@ -85,7 +85,7 @@ export async function getOrInsertObserverEntry(registry, config, registryRoot) {
     // Get or create the observer for this specific registry root
     let observerEntry = nodeToObserverMap.get(registryRoot);
     if (!observerEntry) {
-        observerEntry = await createObserverEntry(config, registryRoot);
+        observerEntry = await createObserverEntry(config, registryRoot, options);
         nodeToObserverMap.set(registryRoot, observerEntry);
     }
     // Track this registry root in the scopes set
@@ -116,7 +116,7 @@ export async function getOrInsertObserverEntry(registry, config, registryRoot) {
             const confObserverMap = mountConfigMap.getOrInsertComputed(conf, () => new WeakMap());
             let existingEntry = confObserverMap.get(regRoot);
             if (!existingEntry) {
-                existingEntry = await createObserverEntry(conf, regRoot);
+                existingEntry = await createObserverEntry(conf, regRoot, options);
                 confObserverMap.set(regRoot, existingEntry);
             }
         }

package/RegistryMountCoordinator.ts

@@ -4,7 +4,7 @@
  * where all scopes with the same registry share mount observers.
  */
 
-import type { MountConfig, WeakDual } from './types/mount-observer/types.js';
+import type { MountConfig, MountObserverOptions, WeakDual } from './types/mount-observer/types.js';
 import type { MountObserver } from './MountObserver.js';
 
 /**
@@ -98,11 +98,12 @@ if (typeof WeakMap.prototype.getOrInsertComputed !== 'function') {
  */
 async function createObserverEntry(
     config: MountConfig,
-    registryRoot: Node
+    registryRoot: Node,
+    options: MountObserverOptions
 ): Promise<ObserverEntry> {
     // Dynamically import to avoid circular dependency
     const { MountObserver: MountObserverClass } = await import('./MountObserver.js');
-    const observer = new MountObserverClass(config);
+    const observer = new MountObserverClass(config, options);
     await observer.observe(registryRoot);
     return {
         config,
@@ -124,7 +125,8 @@ async function createObserverEntry(
 export async function getOrInsertObserverEntry(
     registry: CustomElementRegistry, 
     config: MountConfig,
-    registryRoot: Node
+    registryRoot: Node,
+    options: MountObserverOptions
 ): Promise<ObserverEntry> {
     // Add config to the registry's config list (if not already there)
     (registry as any).mountConfigRegistry.push(config);
@@ -136,7 +138,7 @@ export async function getOrInsertObserverEntry(
     // Get or create the observer for this specific registry root
     let observerEntry = nodeToObserverMap.get(registryRoot);
     if (!observerEntry) {
-        observerEntry = await createObserverEntry(config, registryRoot);
+        observerEntry = await createObserverEntry(config, registryRoot, options);
         nodeToObserverMap.set(registryRoot, observerEntry);
     }
     
@@ -171,7 +173,7 @@ export async function getOrInsertObserverEntry(
             const confObserverMap = mountConfigMap.getOrInsertComputed(conf, () => new WeakMap());
             let existingEntry = confObserverMap.get(regRoot);
             if (!existingEntry) {
-                existingEntry = await createObserverEntry(conf, regRoot);
+                existingEntry = await createObserverEntry(conf, regRoot, options);
                 confObserverMap.set(regRoot, existingEntry);
             }
         }

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);