mount-observer 0.1.12 → 0.1.14

package/DefineCustomElementHandler.js

@@ -1,99 +1,99 @@
-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);
+    }
+}

package/ElementMountExtension.js

@@ -3,22 +3,100 @@
  * This finds the appropriate scoped registry container and observes it.
  */
 import { MountObserver } from './MountObserver.js';
-import { getRootRegistryContainer } from './getRootRegistryContainer.js';
+import { getRegistryRoot } from './getRegistryRoot.js';
+import { getOrInsertObserverEntry } from './RegistryMountCoordinator.js';
 /**
- * Adds a mount method to Element.prototype that:
+ * Registry for tracking MountConfig objects associated with a CustomElementRegistry.
+ * This enables coordination of mount observers across multiple DOM scopes that share
+ * the same registry.
+ */
+export class MountConfigRegistry extends EventTarget {
+    #items = new Set();
+    get items() {
+        return Array.from(this.#items);
+    }
+    push(items) {
+        if (Array.isArray(items)) {
+            for (const item of items) {
+                this.#items.add(item);
+            }
+        }
+        else {
+            this.#items.add(items);
+        }
+    }
+}
+// Add mountConfigRegistry property to CustomElementRegistry prototype
+if (typeof CustomElementRegistry !== 'undefined') {
+    Object.defineProperty(CustomElementRegistry.prototype, 'mountConfigRegistry', {
+        get: function () {
+            // Create a new MountConfigRegistry instance on first access and cache it
+            const registry = new MountConfigRegistry();
+            // Replace the getter with the actual value
+            Object.defineProperty(this, 'mountConfigRegistry', {
+                value: registry,
+                writable: true,
+                enumerable: false,
+                configurable: true,
+            });
+            return registry;
+        },
+        enumerable: false,
+        configurable: true,
+    });
+}
+/**
+ * Adds a mount method to Node.prototype that works for Element, ShadowRoot, and Document.
+ * This provides a unified API for mounting observers on any node type.
+ *
+ * For Elements:
  * 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
+ * 3. Observes that scope with registry coordination
+ * 4. Returns the node for chaining
+ *
+ * For ShadowRoot and Document:
+ * 1. Observes the node directly (no registry coordination)
+ * 2. Returns the node for chaining
  */
-Object.defineProperty(Element.prototype, 'mount', {
+Object.defineProperty(Node.prototype, 'mount', {
     value: async function (config, options = {}) {
-        const scope = options.scope ?? 'registry';
+        // For ShadowRoot and Document, observe directly
+        if (this instanceof ShadowRoot || this instanceof Document) {
+            const mo = new MountObserver(config, options);
+            await mo.observe(this);
+            return this;
+        }
+        // For Element, use the robust registry-aware logic
+        if (!(this instanceof Element)) {
+            throw new Error('mount() can only be called on Element, ShadowRoot, or Document');
+        }
+        const scope = options.scope ?? 'registry'; // NEW DEFAULT
         let thingToObserve;
         if (scope === 'registry') {
-            const registryContainer = getRootRegistryContainer(this);
+            // Find this element's registry root
+            const registryContainer = getRegistryRoot(this);
+            if (!registryContainer) {
+                throw new Error('Could not find registry root');
+            }
+            thingToObserve = registryContainer;
+            // Get the registry for coordination
+            const registry = this.customElementRegistry;
+            // Register with coordinator if registry exists
+            if (registry) {
+                await getOrInsertObserverEntry(registry, config, thingToObserve);
+            }
+            else {
+                // No registry, just create a standalone observer
+                const mo = new MountObserver(config, options);
+                await mo.observe(thingToObserve);
+            }
+            return this;
+        }
+        else if (scope === 'registryRoot') {
+            const registryContainer = getRegistryRoot(this);
             if (!registryContainer) {
-                throw new Error('Could not find root registry container');
+                throw new Error('Could not find registry root');
             }
             thingToObserve = registryContainer;
         }
@@ -47,3 +125,100 @@ Object.defineProperty(Element.prototype, 'mount', {
     enumerable: false,
     configurable: true,
 });
+/**
+ * Adds a mountScope method to Element.prototype that:
+ * 1. Finds the registry root for this element
+ * 2. Gets all active configs for this registry
+ * 3. Creates new MountObservers for each config to observe this scope
+ */
+Object.defineProperty(Element.prototype, 'mountScope', {
+    value: async function () {
+        const registry = this.customElementRegistry;
+        if (!registry) {
+            return;
+        }
+        // Find the root of this scope
+        const registryRoot = getRegistryRoot(this);
+        if (!registryRoot) {
+            return;
+        }
+        // Get all configs for this registry
+        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);
+        }
+    },
+    writable: true,
+    enumerable: false,
+    configurable: true,
+});
+/**
+ * Adds a mountGlobally method to Node.prototype that works for Element, ShadowRoot, and Document.
+ *
+ * For Elements:
+ * 1. Mounts the config in the current registry
+ * 2. Creates propagators to automatically mount in:
+ *    - Elements with different custom element registries
+ *    - Shadow roots within the same registry
+ *
+ * For ShadowRoot and Document:
+ * 1. Mounts in the current node
+ * 2. Creates propagators for child registries and shadow roots
+ *
+ * This enables "viral" propagation of mount observers across registry boundaries,
+ * useful for bootstrapping core handlers like builtIns.mountObserverScript.
+ */
+Object.defineProperty(Node.prototype, 'mountGlobally', {
+    value: async function (config, options = {}) {
+        // Mount in current node first
+        await this.mount(config, options);
+        // Propagator 1: Watch for elements in different registries
+        const crossCustomElementRegistryPropagator = new MountObserver({
+            matching: '*',
+            whereDifferentCustomElementRegistry: true,
+            do: async (el) => {
+                // Wait for custom element to be defined so it has the chance to add shadowRoot
+                const { localName } = el;
+                if (localName.includes('-')) {
+                    const registry = el.customElementRegistry;
+                    if (registry && typeof registry.whenDefined === 'function') {
+                        await registry.whenDefined(localName);
+                    }
+                }
+                const shadowRoot = el.shadowRoot;
+                if (shadowRoot) {
+                    // Use mountGlobally to propagate recursively
+                    await shadowRoot.mountGlobally(config, options);
+                }
+                else {
+                    // No shadow root, mount on element
+                    await el.mount(config, options);
+                }
+            }
+        }, options);
+        await crossCustomElementRegistryPropagator.observe(this);
+        // Propagator 2: Watch for shadow roots within the same registry
+        const crossShadowRootPropagator = new MountObserver({
+            matching: '*',
+            whereLocalNameMatches: /-/,
+            do: async (el) => {
+                const { localName } = el;
+                const registry = el.customElementRegistry;
+                if (registry && typeof registry.whenDefined === 'function') {
+                    await registry.whenDefined(localName);
+                }
+                const shadowRoot = el.shadowRoot;
+                if (shadowRoot === null)
+                    return;
+                // Use mountGlobally to propagate recursively
+                await shadowRoot.mountGlobally(config, options);
+            }
+        }, options);
+        await crossShadowRootPropagator.observe(this);
+        return this;
+    },
+    writable: true,
+    enumerable: false,
+    configurable: true,
+});

package/ElementMountExtension.ts

@@ -4,39 +4,137 @@
  */
 
 import { MountObserver } from './MountObserver.js';
-import { getRootRegistryContainer } from './getRootRegistryContainer.js';
+import { getRegistryRoot } from './getRegistryRoot.js';
+import { getOrInsertObserverEntry } from './RegistryMountCoordinator.js';
 import type { MountConfig, MountObserverOptions } from './types/mount-observer/types.js';
 
 declare global {
-    interface Element {
-        mount<T extends Element>(
+    interface Node {
+        mount<T extends Node>(
             this: T,
             config: MountConfig, 
             options?: MountObserverOptions
         ): Promise<T>;
+        
+        mountGlobally<T extends Node>(
+            this: T,
+            config: MountConfig,
+            options?: MountObserverOptions
+        ): Promise<T>;
+    }
+    
+    interface Element {
+        mountScope(): Promise<void>;
+    }
+    
+    interface CustomElementRegistry {
+        mountConfigRegistry: MountConfigRegistry;
     }
 }
 
 /**
- * Adds a mount method to Element.prototype that:
+ * Registry for tracking MountConfig objects associated with a CustomElementRegistry.
+ * This enables coordination of mount observers across multiple DOM scopes that share
+ * the same registry.
+ */
+export class MountConfigRegistry extends EventTarget {
+    #items: Set<MountConfig> = new Set();
+
+    get items(): MountConfig[] {
+        return Array.from(this.#items);
+    }
+
+    push(items: MountConfig | MountConfig[]): void {
+        if (Array.isArray(items)) {
+            for (const item of items) {
+                this.#items.add(item);
+            }
+        } else {
+            this.#items.add(items);
+        }
+    }
+}
+
+// Add mountConfigRegistry property to CustomElementRegistry prototype
+if (typeof CustomElementRegistry !== 'undefined') {
+    Object.defineProperty(CustomElementRegistry.prototype, 'mountConfigRegistry', {
+        get: function () {
+            // Create a new MountConfigRegistry instance on first access and cache it
+            const registry = new MountConfigRegistry();
+            // Replace the getter with the actual value
+            Object.defineProperty(this, 'mountConfigRegistry', {
+                value: registry,
+                writable: true,
+                enumerable: false,
+                configurable: true,
+            });
+            return registry;
+        },
+        enumerable: false,
+        configurable: true,
+    });
+}
+
+/**
+ * Adds a mount method to Node.prototype that works for Element, ShadowRoot, and Document.
+ * This provides a unified API for mounting observers on any node type.
+ * 
+ * For Elements:
  * 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
+ * 3. Observes that scope with registry coordination
+ * 4. Returns the node for chaining
+ * 
+ * For ShadowRoot and Document:
+ * 1. Observes the node directly (no registry coordination)
+ * 2. Returns the node for chaining
  */
-Object.defineProperty(Element.prototype, 'mount', {
-    value: async function <T extends Element>(
+Object.defineProperty(Node.prototype, 'mount', {
+    value: async function <T extends Node>(
         this: T,
         config: MountConfig, 
         options: MountObserverOptions = {}
     ): Promise<T> {
-        const scope = options.scope ?? 'registry';
+        // For ShadowRoot and Document, observe directly
+        if (this instanceof ShadowRoot || this instanceof Document) {
+            const mo = new MountObserver(config, options);
+            await mo.observe(this);
+            return this;
+        }
+        
+        // For Element, use the robust registry-aware logic
+        if (!(this instanceof Element)) {
+            throw new Error('mount() can only be called on Element, ShadowRoot, or Document');
+        }
+        
+        const scope = options.scope ?? 'registry';  // NEW DEFAULT
         let thingToObserve: Node;
         
         if (scope === 'registry') {
-            const registryContainer = getRootRegistryContainer(this);
+            // Find this element's registry root
+            const registryContainer = getRegistryRoot(this);
             if (!registryContainer) {
-                throw new Error('Could not find root registry container');
+                throw new Error('Could not find registry root');
+            }
+            thingToObserve = registryContainer;
+            
+            // Get the registry for coordination
+            const registry = (this as any).customElementRegistry;
+            
+            // Register with coordinator if registry exists
+            if (registry) {
+                await getOrInsertObserverEntry(registry, config, thingToObserve);
+            } else {
+                // No registry, just create a standalone observer
+                const mo = new MountObserver(config, options);
+                await mo.observe(thingToObserve);
+            }
+            
+            return this;
+        } else if (scope === 'registryRoot') {
+            const registryContainer = getRegistryRoot(this);
+            if (!registryContainer) {
+                throw new Error('Could not find registry root');
             }
             thingToObserve = registryContainer;
         } else if (scope === 'self') {
@@ -62,3 +160,112 @@ Object.defineProperty(Element.prototype, 'mount', {
     enumerable: false,
     configurable: true,
 });
+
+/**
+ * Adds a mountScope method to Element.prototype that:
+ * 1. Finds the registry root for this element
+ * 2. Gets all active configs for this registry
+ * 3. Creates new MountObservers for each config to observe this scope
+ */
+Object.defineProperty(Element.prototype, 'mountScope', {
+    value: async function(): Promise<void> {
+        const registry = (this as any).customElementRegistry;
+        if (!registry) {
+            return;
+        }
+        
+        // Find the root of this scope
+        const registryRoot = getRegistryRoot(this);
+        if (!registryRoot) {
+            return;
+        }
+        
+        // Get all configs for this registry
+        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);
+        }
+    },
+    writable: true,
+    enumerable: false,
+    configurable: true,
+});
+
+/**
+ * Adds a mountGlobally method to Node.prototype that works for Element, ShadowRoot, and Document.
+ * 
+ * For Elements:
+ * 1. Mounts the config in the current registry
+ * 2. Creates propagators to automatically mount in:
+ *    - Elements with different custom element registries
+ *    - Shadow roots within the same registry
+ * 
+ * For ShadowRoot and Document:
+ * 1. Mounts in the current node
+ * 2. Creates propagators for child registries and shadow roots
+ * 
+ * This enables "viral" propagation of mount observers across registry boundaries,
+ * useful for bootstrapping core handlers like builtIns.mountObserverScript.
+ */
+Object.defineProperty(Node.prototype, 'mountGlobally', {
+    value: async function <T extends Node>(
+        this: T,
+        config: MountConfig,
+        options: MountObserverOptions = {}
+    ): Promise<T> {
+        // Mount in current node first
+        await this.mount(config, options);
+        
+        // Propagator 1: Watch for elements in different registries
+        const crossCustomElementRegistryPropagator = new MountObserver({
+            matching: '*',
+            whereDifferentCustomElementRegistry: true,
+            do: async (el: Element) => {
+                // Wait for custom element to be defined so it has the chance to add shadowRoot
+                const { localName } = el;
+                if (localName.includes('-')) {
+                    const registry = (el as any).customElementRegistry;
+                    if (registry && typeof registry.whenDefined === 'function') {
+                        await registry.whenDefined(localName);
+                    }
+                }
+                const shadowRoot = (el as any).shadowRoot;
+                if (shadowRoot) {
+                    // Use mountGlobally to propagate recursively
+                    await shadowRoot.mountGlobally(config, options);
+                } else {
+                    // No shadow root, mount on element
+                    await el.mount(config, options);
+                }
+            }
+        }, options);
+        
+        await crossCustomElementRegistryPropagator.observe(this);
+        
+        // Propagator 2: Watch for shadow roots within the same registry
+        const crossShadowRootPropagator = new MountObserver({
+            matching: '*',
+            whereLocalNameMatches: /-/,
+            do: async (el: Element) => {
+                const { localName } = el;
+                const registry = (el as any).customElementRegistry;
+                if (registry && typeof registry.whenDefined === 'function') {
+                    await registry.whenDefined(localName);
+                }
+                const shadowRoot = (el as any).shadowRoot;
+                if (shadowRoot === null) return;
+                // Use mountGlobally to propagate recursively
+                await shadowRoot.mountGlobally(config, options);
+            }
+        }, options);
+        
+        await crossShadowRootPropagator.observe(this);
+        
+        return this;
+    },
+    writable: true,
+    enumerable: false,
+    configurable: true,
+});