npm - mount-observer - Versions diffs - 0.1.11 → 0.1.12 - Mend

mount-observer 0.1.11 → 0.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/DefineCustomElementHandler.js +1 -0
package/DefineCustomElementHandler.ts +1 -0
package/EnhanceMountedElementHandler.js +3 -2
package/EnhanceMountedElementHandler.ts +3 -2
package/EvtRt.js +8 -3
package/EvtRt.ts +12 -3
package/MountObserver.js +119 -19
package/MountObserver.ts +200 -56
package/README.md +153 -74
package/connectionMonitor.js +116 -0
package/connectionMonitor.ts +164 -0
package/elementIntersection.js +67 -0
package/elementIntersection.ts +96 -0
package/observedRootHas.js +87 -0
package/package.json +1 -1
package/rootSizeObserver.js +124 -0
package/rootSizeObserver.ts +157 -0

package/README.md CHANGED Viewed

@@ -11,8 +11,11 @@ The following features have been implemented and tested:
 ### Core Functionality
 - ✅ **matching**: CSS selector-based element matching
-- ✅ **withInstance**: Constructor-based element filtering (single or array)
+- ✅ **whereInstanceOf**: Constructor-based element filtering (single or array)
 - ✅ **withMediaMatching**: Media query-based conditional mounting (string or MediaQueryList)
+- ✅ **whereObservedRootSizeMatches**: Container query-based conditional mounting (observes root element size)
+- ✅ **whereElementIntersectsWith**: Intersection observer-based conditional mounting (observes element visibility)
+- ✅ **whereConnectionHas**: Network connection-based conditional mounting (observes connection speed/type)
 - ✅ **withScopePerimeter**: Donut hole scoping (exclude elements inside matching ancestors)
 ### Lifecycle & Events
@@ -32,11 +35,7 @@ The following features have been implemented and tested:
 - ✅ **Memory management**: WeakRef usage for DOM node references
 ### Not Yet Implemented
-- ❌ Intersection observer integration
-- ❌ Container query support
-- ❌ Shadow DOM traversal utilities
 - ❌ Reconnect event handling
-- ❌ Multiple import types (CSS, JSON, HTML)
 # The MountObserver API
@@ -83,6 +82,7 @@ There is quite a bit of functionality this proposal would open up that is exceed
 4. Some CSS selectors, such as the [scope donut hole range](https://css-tricks.com/solved-by-css-donuts-scopes/#aa-donut-scoping-with-scope), aren't supported by oEl.querySelectorAll(...) or oEl.matches(...).
 ###  Most significant use cases
 The amount of code necessary to accomplish these common tasks designed to improve the user experience is significant. Building it into the platform would potentially:
@@ -100,29 +100,26 @@ The extra flexibility this new primitive would provide could be quite useful to
 Before getting into the weeds, let's demonstrate the two most prominent use cases:
-### Use Case 1:  Custom Attribute Enhancement [TODO]: out of date
+### Use Case 1:  Custom Attribute Enhancement
 ```html
 <body>
     <div log-to-console="clicked on a div">hello</div>
     <script type=module>
-        import 'mount-observer/ElementMountExtension.js';
-        document.body.mount([{
-            withAttrs:{base: 'log-to-console'},
-            spawn: function(el){
+        document.body.mount({
+            matching: '[log-to-console]',
+            do: (el) => {
                 el.addEventListener('click', e => {
                   console.log(e.target.getAttribute('log-to-console'));
                 });
-            },
-        }])
+            }
+        })
     </script>
 </body>
 ```
-See [this extending package](https://github.com/bahrus/mount-observer-script-element) that provides for a more declarative approach.
 ### Use Case 2: Lazy Global Custom Element Definition
@@ -153,6 +150,8 @@ document.mount({
 This registers custom elements with the global customElements registry.
+See [this extending package](https://github.com/bahrus/mount-observer-script-element) that provides for a more declarative approach.
 ### Scoped
 To register the class in the same custom element registry as the element which calls the "mount" method (element in this case), use "builtIns.defineScopedCustomElement":
@@ -173,13 +172,13 @@ The `builtIns.enhanceMountedElement` handler automatically enhances mounted elem
 // MyEnhancement.js
 class ButtonEnhancement {
     constructor(element, ctx, initVals) {
-        this.element = element;
+        this.element = new WeakRef(element);
         this.ctx = ctx;
         this.clickCount = 0;
-        element.addEventListener('click', () => {
+        element.addEventListener('click', ({target}) => {
             this.clickCount++;
-            element.setAttribute('data-clicks', this.clickCount);
+            target.setAttribute('data-clicks', this.clickCount);
         });
     }
 }
@@ -189,9 +188,6 @@ export default {
     enhKey: 'buttonEnh'
 };
-// main.js
-import 'mount-observer/ElementMountExtension.js';
 document.mount({
     matching: '.enhance-me',
     import: './MyEnhancement.js',
@@ -421,9 +417,54 @@ reference: [2, 3]  // Both actions1 and actions2 will have their 'do' called if
 [Implemented as [Requirement11](requirements/Done/Requirement11.md)]
-### Referenced withInstance
+## Media / container queries / instanceOf / custom checks [TODO] out of date
+Unlike traditional CSS @import, CSS Modules don't support specifying different imports based on media queries.  That can be another condition we can attach (and why not throw in container queries, based on the rootNode?):
+```JavaScript
+const observer = new MountObserver({
+   select: 'div > p + p ~ span[class$="name"]', // not supported by polyfill
+   withMediaMatching: '(max-width: 1250px)',
+   whereObservedRootSizeMatches: '(min-width: 700px)',
+   whereElementIntersectsWith:{
+      rootMargin: "0px",
+      threshold: 1.0,
+   },
+   whereInstanceOf: [HTMLMarqueeElement], //or 'HTMLMarqueeElement'
+   whereLangIn: ['en-GB'], // Cannot be implemented - see https://github.com/whatwg/html/issues/7039
+   whereConnectionHas:{
+      effectiveTypeIn: ["slow-2g"],
+   },
+   import: ['./my-element-small.css', {type: 'css'}],
+   do: ...
+});
+```
-Similar to the `do` function, the `withInstance` check can also be moved to imported modules for 100% JSON-serializable configuration:
+[whereInstanceOf implemented as [Requirement5](requirements/Done/Requirement5.md)]
+[whereObservedRootSizeMatches implemented]
+[whereElementIntersectsWith implemented]
+[whereConnectionHas implemented]
+[withMediaMatching implemented as [Requirement6](requirements/Done/Requirement6.md)]
+## InstanceOf checks in detail
+Carving out the special "whereInstanceOf" check is provided based on the assumption that there's a performance benefit from doing so. If not, the developer could just add that check inside the "confirm" callback logic (discussed later).  For built-in elements, we can alternatively provide the string name, as indicated in the comment above, which certainly makes it JSON serializable, thus making it easy as pie to include in the MOSE JSON payload.  I don't think there would be any ambiguity in doing so, which means I believe that answers the mystery in my mind whether it could be part of the low-level checklist that could be done within the c++/rust code / thread.
+The picture becomes murkier for custom elements.  The best solution in that case seems to be to utilize customElements.getName(...) as a basis for the match, but at first glance, that could  preclude being able to use base classes which a family of custom elements subclass, if that superclass isn't itself a custom element.  I suppose the solution to this conundrum, when warranted, is simply to burden the developer with defining a custom element for the superclass, and thus assigning it a name, applicable within ShadowDOM scopes as needed, even though it isn't actually necessarily used for any live custom elements. This would require already having imported the base class, only benefitting from lazy loading the code needed for each sub class, which might not always be all that high as a percentage, compared to the base class.
+However, where this support for "whereInstanceOf" would be *most* helpful is when it comes to [*custom enhancements*](https://github.com/WICG/webcomponents/issues/1000) that only wish to lazily layer some heavy lifting functionality on top of certain families of already loaded and upgraded custom elements (possibly in addition to some (specified) built in elements).  Here, the lazy loading of the *entire custom **enhancement***, based on the presence in the DOM of a member of the family of custom elements, would, if my calculations are correct, result in providing a significant benefit.
+<!--
+[TODO] Maybe should also (optionally?) pass back which checks failed and which succeeded on dismount.  Not sure I really see a use case for it, but leaving the thought here for now
+-->
+### Referenced whereInstanceOf
+Similar to the `do` function, the `whereInstanceOf` check can also be moved to imported modules for 100% JSON-serializable configuration:
 ```javascript
 // module mySettings.js
@@ -434,9 +475,9 @@ const doFunction = function({localName}, {modules, observer, MountConfig, rootNo
    observer.disconnectedSignal.abort();
 };
-const withInstance = [HTMLMarqueeElement, SVGElement];
+const whereInstanceOf = [HTMLMarqueeElement, SVGElement];
-export { doFunction as do, withInstance };
+export { doFunction as do, whereInstanceOf };
 // my local module
 const observer = new MountObserver({
@@ -452,15 +493,15 @@ observer.observe(document);
 ```
 **Behavior:**
-- **Combining checks**: If both inline `withInstance` and referenced `withInstance` exist, they are AND'd together (element must match both)
-- **Multiple references**: If multiple referenced modules export `withInstance`, the element must match ALL of them (AND logic)
-- **Validation**: Referenced `withInstance` is validated after imports load. Throws an error if not a Constructor or array of Constructors
-- **Optional export**: If a referenced module doesn't export `withInstance`, it's silently ignored
+- **Combining checks**: If both inline `whereInstanceOf` and referenced `whereInstanceOf` exist, they are AND'd together (element must match both)
+- **Multiple references**: If multiple referenced modules export `whereInstanceOf`, the element must match ALL of them (AND logic)
+- **Validation**: Referenced `whereInstanceOf` is validated after imports load. Throws an error if not a Constructor or array of Constructors
+- **Optional export**: If a referenced module doesn't export `whereInstanceOf`, it's silently ignored
 - **Timing**:
-  - With lazy loading (default): Inline `withInstance` is checked first (before imports), then referenced checks happen after imports load
+  - With lazy loading (default): Inline `whereInstanceOf` is checked first (before imports), then referenced checks happen after imports load
   - With `loadingEagerness: 'eager'`: Both inline and referenced checks happen together after imports are loaded
-This optimization ensures that with lazy loading, elements that don't match the inline `withInstance` won't trigger unnecessary imports.
+This optimization ensures that with lazy loading, elements that don't match the inline `whereInstanceOf` won't trigger unnecessary imports.
 [Implemented as [Requirement12](requirements/Done/Requirement12.md)]
@@ -565,7 +606,7 @@ export { doFunction as do };
 </script>
 ```
-To keep this proposal / polyfill of reasonable size, mount observer script elements has its own [repo / sub-proposal](https://github.com/bahrus/mount-observer-script-element).  There's much more to it, but it is awaiting implementation of scoped custom element registry before finalizing the requirements and (re)-implementing.
+To keep this proposal / polyfill of reasonable size, mount observer script elements has its own [repo / sub-proposal](https://github.com/bahrus/mount-observer-script-element).  There's much more to it, including support for inheritance across containing scoped custom element registries.
 But I think it's important to think about this way of making the mount observer declarative, as it provides one significant reason why we place so much emphasis on making sure that the mount observer settings (MountConfig) is as JSON serializable as possible.
@@ -721,6 +762,83 @@ The handler registry is global and shared across all MountObserver instances, si
 [Implemented as [Requirement14](requirements/Done/Requirement14.md)]
+### Handler defaults with static properties
+Registered handler classes can specify default MountConfig properties using static class properties. When you reference a handler by name, its static properties are automatically merged with your inline configuration, with inline config always taking precedence:
+```JavaScript
+import {EvtRt} from 'mount-observer/EvtRt.js';
+class MyHandler extends EvtRt {
+   static matching = 'div > p + p ~ span[class$="name"]';
+   static whereInstanceOf = HTMLSpanElement;
+   mount(mountedElement, MountConfig, context){
+      mountedElement.textContent = 'hello';
+   }
+   dismount(mountedElement, MountConfig){
+      mountedElement.textContent = 'bye';
+   }
+}
+// Register the handler
+MountObserver.define('myHandler', MyHandler);
+// Use with defaults - will use handler's matching and whereInstanceOf
+const observer1 = new MountObserver({
+   do: 'myHandler'
+});
+observer1.observe(document);
+// Override specific properties - inline config trumps handler defaults
+const observer2 = new MountObserver({
+   matching: 'span.special',  // This overrides the handler's matching
+   do: 'myHandler'            // Still uses handler's whereInstanceOf
+});
+observer2.observe(document);
+```
+**How it works:**
+1. When `do` is a string reference to a registered handler, the handler's static properties are extracted
+2. Static properties are merged with the inline config using object spread
+3. Inline config properties always override handler defaults (inline trumps)
+4. All MountConfig properties can be specified as static properties (matching, whereInstanceOf, withMediaMatching, etc.)
+**Benefits:**
+- **DRY principle**: Define common configuration once in the handler class
+- **Flexibility**: Override any property when needed for specific use cases
+- **Composability**: Handlers become self-contained with their own default behavior
+- **JSON serialization**: Configurations remain JSON-serializable since only the handler name is referenced
+**Example with multiple properties:**
+```JavaScript
+class InputHandler extends EvtRt {
+   static matching = 'input[type="text"]';
+   static whereInstanceOf = HTMLInputElement;
+   static withMediaMatching = '(min-width: 768px)';
+   mount(mountedElement, MountConfig, context){
+      mountedElement.placeholder = 'Enter text...';
+   }
+}
+MountObserver.define('inputHandler', InputHandler);
+// Uses all handler defaults
+const observer = new MountObserver({
+   do: 'inputHandler'
+});
+// Partially override - keeps whereInstanceOf and withMediaMatching from handler
+const observer2 = new MountObserver({
+   matching: 'input[type="email"]',  // Override matching only
+   do: 'inputHandler'
+});
+```
+[Implemented as [SupportWhereCriteriaWithRegisteredActions](requirements/SupportWhereCriteriaWithRegisteredActions.md)]
 ### Built in handlers
 This proposal advocates having the platform provide some built in handlers, that extend EvtRt, that is included with this Polyfill.
@@ -1393,45 +1511,8 @@ const observer = new MountObserver({
 });
 ```
-## Media / container queries / instanceOf / custom checks [TODO] out of date
-Unlike traditional CSS @import, CSS Modules don't support specifying different imports based on media queries.  That can be another condition we can attach (and why not throw in container queries, based on the rootNode?):
-```JavaScript
-const observer = new MountObserver({
-   select: 'div > p + p ~ span[class$="name"]', // not supported by polyfill
-   withMediaMatching: '(max-width: 1250px)',
-   whereSizeOfContainerMatches: '(min-width: 700px)',
-   whereContainerHas: '[itemprop=isActive][value="true"]',
-   withInstance: [HTMLMarqueeElement], //or ['HTMLMarqueeElement']
-   whereLangIn: ['en-GB'],
-   whereConnectionHas:{
-      effectiveTypeIn: ["slow-2g"],
-   },
-   import: ['./my-element-small.css', {type: 'css'}],
-   do: ...
-});
-```
-[withInstance implemented as [Requirement5](requirements/Done/Requirement5.md)]
-[withMediaMatching implemented as [Requirement6](requirements/Done/Requirement6.md)]
-## InstanceOf checks in detail
-Carving out the special "withInstance" check is provided based on the assumption that there's a performance benefit from doing so. If not, the developer could just add that check inside the "confirm" callback logic (discussed later).  For built-in elements, we can alternatively provide the string name, as indicated in the comment above, which certainly makes it JSON serializable, thus making it easy as pie to include in the MOSE JSON payload.  I don't think there would be any ambiguity in doing so, which means I believe that answers the mystery in my mind whether it could be part of the low-level checklist that could be done within the c++/rust code / thread.
-The picture becomes murkier for custom elements.  The best solution in that case seems to be to utilize customElements.getName(...) as a basis for the match, but at first glance, that could  preclude being able to use base classes which a family of custom elements subclass, if that superclass isn't itself a custom element.  I suppose the solution to this conundrum, when warranted, is simply to burden the developer with defining a custom element for the superclass, and thus assigning it a name, applicable within ShadowDOM scopes as needed, even though it isn't actually necessarily used for any live custom elements. This would require already having imported the base class, only benefitting from lazy loading the code needed for each sub class, which might not always be all that high as a percentage, compared to the base class.
-However, where this support for "withInstance" would be *most* helpful is when it comes to [*custom enhancements*](https://github.com/WICG/webcomponents/issues/1000) that only wish to lazily layer some heavy lifting functionality on top of certain families of already loaded and upgraded custom elements (possibly in addition to some (specified) built in elements).  Here, the lazy loading of the *entire custom **enhancement***, based on the presence in the DOM of a member of the family of custom elements, would, if my calculations are correct, result in providing a significant benefit.
-<!--
-[TODO] Maybe should also (optionally?) pass back which checks failed and which succeeded on dismount.  Not sure I really see a use case for it, but leaving the thought here for now
--->
 ## Subscribing
 Subscribing can be done via:
@@ -1514,7 +1595,7 @@ So the dismount event should provide a "checklist" of all the conditions, and th
 mediaMatches: true,
 containerMatches: true,
 satisfiesCustomConditiselect: true,
-whereLangIn: ['en-GB'],
+// whereLangIn: ['en-GB'], // Not implemented - requires platform support
 whereConnectiselect:{
    effectiveTypeMatches: true
 },
@@ -1826,8 +1907,7 @@ Just as it is useful to be able lazy load external imports when needed, it would
    <template mount='{
       "select": ":not([defer-loading])",
       "loadingEagerness": "eager",
-      "withMediaMatching": "(min-width: 700px)",
-      "whereLangIn": ["en-GB"],
+      "withMediaMatching": "(min-width: 700px)"
    }'>
       <div>I don't know why you say <slot name=slot2></slot> I say <slot name=slot1></slot></div>
    </template>
@@ -1835,8 +1915,7 @@ Just as it is useful to be able lazy load external imports when needed, it would
    <template mount='{
       "select": ":not([defer-loading])",
       "loadingEagerness": "lazy",
-      "withMediaMatching": "(max-width: 700px)",
-      "whereLangIn": ["fr"],
+      "withMediaMatching": "(max-width: 700px)"
    }'>
       <div>Je ne sais pas pourquoi tu dis  <slot name=slot2></slot> je dis  <slot name=slot1></slot></div>
    </template>

package/connectionMonitor.js ADDED Viewed

@@ -0,0 +1,116 @@
+import { DismountEvent } from './Events.js';
+export function setupConnectionMonitor(init, rootNodeRef, mountedElements, modules, observer, processNode) {
+    const { whereConnectionHas } = init;
+    if (!whereConnectionHas) {
+        throw new Error('whereConnectionHas is required');
+    }
+    // Get connection object with vendor prefixes
+    const nav = navigator;
+    const connection = nav.connection || nav.mozConnection || nav.webkitConnection;
+    // If Network Information API is not supported, warn and pass the condition
+    if (!connection) {
+        console.warn('Network Information API is not supported in this browser. whereConnectionHas condition will be ignored.');
+        return {
+            conditionMatches: true,
+            cleanup: () => { }
+        };
+    }
+    // Check initial condition
+    let conditionMatches = evaluateConnectionCondition(connection, whereConnectionHas);
+    // Set up change listener
+    const changeHandler = () => {
+        const previousMatches = conditionMatches;
+        conditionMatches = evaluateConnectionCondition(connection, whereConnectionHas);
+        if (conditionMatches && !previousMatches) {
+            // Connection now matches - process elements
+            handleConditionMatch();
+        }
+        else if (!conditionMatches && previousMatches) {
+            // Connection no longer matches - dismount all elements
+            handleConditionUnmatch();
+        }
+    };
+    function handleConditionMatch() {
+        // Process all elements in the observed node
+        const rootNode = rootNodeRef.deref();
+        if (rootNode) {
+            processNode(rootNode);
+        }
+    }
+    function handleConditionUnmatch() {
+        // Dismount all currently mounted elements
+        const rootNode = rootNodeRef.deref();
+        if (!rootNode) {
+            return;
+        }
+        const context = {
+            modules,
+            observer: observer,
+            rootNode,
+            MountConfig: init
+        };
+        // Get all mounted elements from the WeakDual setWeak
+        const mountedElementsList = [];
+        for (const ref of mountedElements.setWeak) {
+            const element = ref.deref();
+            if (element) {
+                mountedElementsList.push(element);
+            }
+        }
+        // Dismount each element
+        for (const element of mountedElementsList) {
+            // Remove from both structures
+            mountedElements.weakSet.delete(element);
+            for (const ref of mountedElements.setWeak) {
+                if (ref.deref() === element) {
+                    mountedElements.setWeak.delete(ref);
+                    break;
+                }
+            }
+            // Dispatch dismount event with reason
+            observer.dispatchEvent(new DismountEvent(element, 'connection-failed', init));
+        }
+    }
+    // Listen for connection changes
+    connection.addEventListener('change', changeHandler);
+    return {
+        conditionMatches,
+        cleanup: () => {
+            connection.removeEventListener('change', changeHandler);
+        }
+    };
+}
+/**
+ * Evaluate if the current connection meets the specified conditions
+ */
+function evaluateConnectionCondition(connection, condition) {
+    // Check effectiveType (e.g., 'slow-2g', '2g', '3g', '4g')
+    if (condition.effectiveTypeIn && condition.effectiveTypeIn.length > 0) {
+        const effectiveType = connection.effectiveType;
+        if (!effectiveType || !condition.effectiveTypeIn.includes(effectiveType)) {
+            return false;
+        }
+    }
+    // Check downlink (bandwidth in Mbps)
+    if (condition.downlinkMin !== undefined) {
+        const downlink = connection.downlink;
+        if (downlink === undefined || downlink < condition.downlinkMin) {
+            return false;
+        }
+    }
+    if (condition.downlinkMax !== undefined) {
+        const downlink = connection.downlink;
+        if (downlink === undefined || downlink > condition.downlinkMax) {
+            return false;
+        }
+    }
+    // Check RTT (round-trip time in ms)
+    if (condition.rttMax !== undefined) {
+        const rtt = connection.rtt;
+        if (rtt === undefined || rtt > condition.rttMax) {
+            return false;
+        }
+    }
+    // All conditions passed
+    return true;
+}

package/connectionMonitor.ts ADDED Viewed

@@ -0,0 +1,164 @@
+// Network connection monitoring for MountObserver
+import type { MountConfig, MountContext, WeakDual, ConnectionCondition } from './types/mount-observer/types.js';
+import { DismountEvent } from './Events.js';
+// Extend Navigator type to include connection properties
+interface NetworkInformation extends EventTarget {
+    downlink?: number;
+    effectiveType?: string;
+    rtt?: number;
+    saveData?: boolean;
+}
+interface NavigatorWithConnection extends Navigator {
+    connection?: NetworkInformation;
+    mozConnection?: NetworkInformation;
+    webkitConnection?: NetworkInformation;
+}
+export function setupConnectionMonitor(
+    init: MountConfig,
+    rootNodeRef: WeakRef<Node>,
+    mountedElements: WeakDual<Element>,
+    modules: any[],
+    observer: EventTarget,
+    processNode: (node: Node) => void
+): {
+    conditionMatches: boolean;
+    cleanup: () => void;
+} {
+    const { whereConnectionHas } = init;
+    if (!whereConnectionHas) {
+        throw new Error('whereConnectionHas is required');
+    }
+    // Get connection object with vendor prefixes
+    const nav = navigator as NavigatorWithConnection;
+    const connection = nav.connection || nav.mozConnection || nav.webkitConnection;
+    // If Network Information API is not supported, warn and pass the condition
+    if (!connection) {
+        console.warn('Network Information API is not supported in this browser. whereConnectionHas condition will be ignored.');
+        return {
+            conditionMatches: true,
+            cleanup: () => {}
+        };
+    }
+    // Check initial condition
+    let conditionMatches = evaluateConnectionCondition(connection, whereConnectionHas);
+    // Set up change listener
+    const changeHandler = () => {
+        const previousMatches = conditionMatches;
+        conditionMatches = evaluateConnectionCondition(connection, whereConnectionHas);
+        if (conditionMatches && !previousMatches) {
+            // Connection now matches - process elements
+            handleConditionMatch();
+        } else if (!conditionMatches && previousMatches) {
+            // Connection no longer matches - dismount all elements
+            handleConditionUnmatch();
+        }
+    };
+    function handleConditionMatch(): void {
+        // Process all elements in the observed node
+        const rootNode = rootNodeRef.deref();
+        if (rootNode) {
+            processNode(rootNode);
+        }
+    }
+    function handleConditionUnmatch(): void {
+        // Dismount all currently mounted elements
+        const rootNode = rootNodeRef.deref();
+        if (!rootNode) {
+            return;
+        }
+        const context: MountContext = {
+            modules,
+            observer: observer as any,
+            rootNode,
+            MountConfig: init
+        };
+        // Get all mounted elements from the WeakDual setWeak
+        const mountedElementsList: Element[] = [];
+        for (const ref of mountedElements.setWeak) {
+            const element = ref.deref();
+            if (element) {
+                mountedElementsList.push(element);
+            }
+        }
+        // Dismount each element
+        for (const element of mountedElementsList) {
+            // Remove from both structures
+            mountedElements.weakSet.delete(element);
+            for (const ref of mountedElements.setWeak) {
+                if (ref.deref() === element) {
+                    mountedElements.setWeak.delete(ref);
+                    break;
+                }
+            }
+            // Dispatch dismount event with reason
+            observer.dispatchEvent(new DismountEvent(element, 'connection-failed', init));
+        }
+    }
+    // Listen for connection changes
+    connection.addEventListener('change', changeHandler);
+    return {
+        conditionMatches,
+        cleanup: () => {
+            connection.removeEventListener('change', changeHandler);
+        }
+    };
+}
+/**
+ * Evaluate if the current connection meets the specified conditions
+ */
+function evaluateConnectionCondition(
+    connection: NetworkInformation,
+    condition: ConnectionCondition
+): boolean {
+    // Check effectiveType (e.g., 'slow-2g', '2g', '3g', '4g')
+    if (condition.effectiveTypeIn && condition.effectiveTypeIn.length > 0) {
+        const effectiveType = connection.effectiveType;
+        if (!effectiveType || !condition.effectiveTypeIn.includes(effectiveType)) {
+            return false;
+        }
+    }
+    // Check downlink (bandwidth in Mbps)
+    if (condition.downlinkMin !== undefined) {
+        const downlink = connection.downlink;
+        if (downlink === undefined || downlink < condition.downlinkMin) {
+            return false;
+        }
+    }
+    if (condition.downlinkMax !== undefined) {
+        const downlink = connection.downlink;
+        if (downlink === undefined || downlink > condition.downlinkMax) {
+            return false;
+        }
+    }
+    // Check RTT (round-trip time in ms)
+    if (condition.rttMax !== undefined) {
+        const rtt = connection.rtt;
+        if (rtt === undefined || rtt > condition.rttMax) {
+            return false;
+        }
+    }
+    // All conditions passed
+    return true;
+}