mount-observer 0.1.1 → 0.1.2

package/README.md

@@ -5,6 +5,44 @@
 
 Note that much of what is described below has not yet been polyfilled.
 
+## Implementation Status
+
+The following features have been implemented and tested:
+
+### Core Functionality
+- ✅ **whereElementMatches**: CSS selector-based element matching
+- ✅ **whereAttr**: Complex attribute-based matching with:
+  - Built-in vs custom element distinction
+  - Attribute prefix variations (data-, enh-, data-enh-)
+  - Hierarchical attribute branches with customizable delimiters
+  - Coordinate system for attribute mapping
+- ✅ **whereInstanceOf**: Constructor-based element filtering (single or array)
+- ✅ **whereMediaMatches**: Media query-based conditional mounting (string or MediaQueryList)
+- ✅ **whereOutside**: Donut hole scoping (exclude elements inside matching ancestors)
+
+### Lifecycle & Events
+- ✅ **mount/dismount/disconnect events**: Element lifecycle tracking
+- ✅ **attrchange event**: Attribute change notifications with batching
+- ✅ **mediamatch/mediaunmatch events**: Media query state change notifications (with `getPlayByPlay` option)
+- ✅ **load event**: Import completion notification
+
+### Advanced Features
+- ✅ **Dynamic imports**: Lazy loading of JavaScript modules
+- ✅ **assignGingerly**: Property assignment on mount
+- ✅ **do callbacks**: Mount/dismount/disconnect/reconnect lifecycle hooks
+- ✅ **map configuration**: Metadata mapping for attribute coordinates
+- ✅ **once option**: Fire attrchange event only once per attribute
+- ✅ **Shared MutationObserver**: Efficient observer sharing across instances
+- ✅ **Code splitting**: Conditional features loaded on-demand
+- ✅ **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.
 
 Author:  Bruce B. Anderson (with valuable feedback from @doeixd )
@@ -102,7 +140,7 @@ The "observer" constant above is a class instance that inherits from EventTarget
 
 In fact, I have encountered statements made by the browser vendors that some queries supported by css can't be evaluated simply by looking at the layout of the HTML, but has to be made after rendering and performing style calculations.  This necessitates having to delay the notification, which would be unacceptable.
 
-If the developer has a simple query in mind that needs no such nuance, I'm thinking it might be helpful to provide an alternative key to "on" that is used specifically for (a subset?) of queries supported by the existing "matches" method that elements support.
+If the developer has a simple query in mind that needs no such nuance, I'm thinking it might be helpful to provide an alternative key to "select" that is used specifically for (a subset?) of queries supported by the existing "matches" method that elements support, maybe even after the browser vendors every provide a selector-observer (if ever).
 
 So the developer could use:
 
@@ -110,8 +148,8 @@ So the developer could use:
 
 ```JavaScript
 const observer = new MountObserver({
-   import: './my-element.js',
    whereElementMatches:'my-element',
+   import: './my-element.js',
    do: ({localName}, {modules, observer, observeInfo}) => {
       if(!customElements.get(localName)) {
          customElements.define(localName, modules[0].MyElement);
@@ -123,10 +161,12 @@ const observer = new MountObserver({
 observer.observe(document);
 ```
 
-and could perhaps expect faster binding as a result of the more limited supported expressions.  Since "select" is not specified, it is assumed to be "*"
+and could perhaps expect faster binding as a result of the more limited supported expressions.  Since "select" is not specified, it is assumed to be "*".
 
 This polyfill in fact only supports this latter option ("whreElementMatches"), and leaves "select" for such a time as when a selector observer is available in the platform.
 
+[Implemented as Requirement 1](requirements/Requirement1.md).
+
 ##  The import key
 
 This proposal has been amended to support multiple imports, including of different types:
@@ -154,7 +194,9 @@ The do function won't be invoked until all the imports have been successfully co
 
 Previously, this proposal called for allowing arrow functions as well, thinking that could be a good interim way to support bundlers, as well as multiple imports.  But the valuable input provided by [doeixd](https://github.com/doeixd) makes me think that that interim support could more effectively be done by the developer in the do methods.
 
-This proposal would also include support for JSON and HTML module imports (really, all types). 
+This proposal would also include support for JSON and HTML module imports (really, all types).
+
+[Implemented as Requirement 1](requirements/Requirement1.md).
 
 ## Preemptive downloading
 
@@ -301,7 +343,7 @@ This would allow developers to create "stylesheet" like capabilities.
 
 ## Applying properties with assignGingerly
 
-For the common use case of setting properties on matching elements, MountObserver provides built-in support for the [assignGingerly](https://github.com/bahrus/assign-gingerly) library. This allows you to declaratively specify properties to apply to elements without writing custom mount callbacks:
+For the common use case of setting properties on matching elements, MountObserver provides built-in support for the [assignGingerly](https://github.com/bahrus/assign-gingerly) library. This allows us to declaratively specify properties to apply to elements without writing custom mount callbacks:
 
 ```JavaScript
 const observer = new MountObserver({
@@ -317,23 +359,29 @@ observer.observe(document);
 
 This will automatically apply the specified properties to all matching input elements, both existing ones and those added dynamically.
 
+[Implemented as [Requirement2](requirements/Requirement2.md)]
+
 ### Nested properties with dataset
 
-The `assignGingerly` library supports nested property assignment using the `?.` notation. This is particularly useful for setting data attributes:
+The `assignGingerly` library supports nested property assignment using the `?.` notation. This is particularly useful for setting data attributes and style:
 
 ```JavaScript
 const observer = new MountObserver({
    whereElementMatches: 'button',
    assignGingerly: {
       disabled: false,
-      '?.dataset.action': 'submit',
-      '?.dataset.trackingId': '12345'
+      '?.dataset?.action': 'submit',
+      '?.dataset?.trackingId': '12345',
+      '?.style': {
+         color: 'white',
+         height: '25px',
+      }
    }
 });
 observer.observe(document);
 ```
 
-The `?.` prefix tells assignGingerly to create nested properties if they don't exist. In this example, `?.dataset.action` will set the `data-action` attribute on the button elements.
+The `?.` prefix tells assignGingerly to create nested properties if they don't exist. In this example, `?.dataset?.action` will set the `data-action` attribute on the button elements.
 
 ### Combining with imports
 
@@ -345,7 +393,7 @@ const observer = new MountObserver({
    import: './my-element.js',
    assignGingerly: {
       theme: 'dark',
-      '?.dataset.initialized': 'true'
+      '?.dataset?.initialized': 'true'
    },
    do: ({localName}, {modules}) => {
       if(!customElements.get(localName)) {
@@ -367,6 +415,254 @@ Using `assignGingerly` provides several benefits:
 3. **Declarative**: No need to write custom mount callbacks for simple property assignments
 4. **Consistent**: The same property values are applied uniformly across all matching elements
 
+### Dynamically updating assignGingerly configuration
+
+The `MountObserver` class provides a public `assignGingerly()` method that allows you to merge new updates into the  observer. This is useful for responding to user actions or application state changes:
+
+```JavaScript
+const observer = new MountObserver({
+   whereElementMatches: 'input',
+   assignGingerly: {
+      disabled: true,
+      value: 'Initial value'
+   }
+});
+observer.observe(document);
+
+// Later, update the configuration
+await observer.assignGingerly({
+   title: 'Updated tooltip',
+   placeholder: 'New placeholder'
+});
+```
+
+**Key behaviors:**
+
+1. **Merging**: New properties are merged with existing configuration. In the example above, future elements will receive all properties: `disabled`, `value`, `title`, and `placeholder`.
+
+2. **Applies to existing elements**: The new properties are immediately applied to all currently mounted elements.
+
+3. **Applies to future elements**: Future elements that mount will receive the merged configuration.
+
+4. **Starting without initial config**: You can call the method even if no `assignGingerly` was specified in the constructor:
+
+```JavaScript
+const observer = new MountObserver({
+   whereElementMatches: 'input'
+});
+observer.observe(document);
+
+// Set configuration later
+await observer.assignGingerly({
+   disabled: true,
+   value: 'Set via method'
+});
+```
+
+5. **Clearing configuration**: Pass `undefined` to clear the configuration for future elements (already-mounted elements keep their properties):
+
+```JavaScript
+await observer.assignGingerly(undefined);
+// Future elements will not have properties applied
+// Existing elements retain their current properties
+```
+
+**Method signature:**
+```TypeScript
+async assignGingerly(config: Record<string, any> | undefined): Promise<void>
+```
+
+The method is async because the assign-gingerly library is loaded dynamically when needed.
+
+[Implemented as [Requirement9](requirements/Requirement9.md)]
+
+## Emitting events from mounted elements
+
+MountObserver can automatically dispatch custom events from elements when they mount. This is useful for:
+
+1. **Signaling readiness**: Notify parent components or listeners that an element is ready
+2. **Initialization events**: Trigger workflows when elements appear in the DOM
+3. **Decoupled communication**: Allow elements to announce their presence without tight coupling
+
+### Basic event emission
+
+```JavaScript
+const observer = new MountObserver({
+   whereElementMatches: 'button[data-action]',
+   mountedElemEmits: {
+      event: 'Event',
+      args: 'custom-ready'
+   }
+});
+observer.observe(document);
+```
+
+This dispatches a `custom-ready` event from each matching button element when it mounts. Events bubble by default, so you can listen at the document level:
+
+```JavaScript
+document.addEventListener('custom-ready', (e) => {
+   console.log('Button ready:', e.target);
+});
+```
+
+### Event constructors
+
+You can specify any event constructor available in `globalThis`:
+
+```JavaScript
+mountedElemEmits: {
+   event: 'CustomEvent',
+   args: ['element-ready', { detail: { timestamp: Date.now() } }]
+}
+```
+
+Or pass a constructor directly:
+
+```JavaScript
+mountedElemEmits: {
+   event: CustomEvent,
+   args: ['element-ready', { detail: { timestamp: Date.now() } }]
+}
+```
+
+### Magic string substitution
+
+Use magic strings to inject dynamic values into event data:
+
+- `{{mountedElement}}` - The element that just mounted
+- `{{mountInit}}` - The MountInit configuration object
+
+```JavaScript
+const observer = new MountObserver({
+   whereElementMatches: 'button[data-test]',
+   mountedElemEmits: {
+      event: 'CustomEvent',
+      args: ['element-mounted', { 
+         detail: { 
+            element: '{{mountedElement}}',
+            config: '{{mountInit}}'
+         }
+      }]
+   }
+});
+```
+
+Magic strings work at any depth in nested objects and arrays:
+
+```JavaScript
+mountedElemEmits: {
+   event: 'CustomEvent',
+   args: ['data-ready', {
+      detail: {
+         nested: {
+            deep: {
+               element: '{{mountedElement}}'
+            }
+         }
+      }
+   }]
+}
+```
+
+### Multiple events
+
+Emit multiple events in sequence by providing an array:
+
+```JavaScript
+const observer = new MountObserver({
+   whereElementMatches: 'my-component',
+   mountedElemEmits: [
+      { event: 'Event', args: 'component-loading' },
+      { event: 'Event', args: 'component-ready' },
+      { event: 'CustomEvent', args: ['component-initialized', { detail: { version: '1.0' } }] }
+   ]
+});
+```
+
+Events are dispatched in the order specified.
+
+### Event properties with eventProps
+
+Apply additional properties to the event object using `eventProps`:
+
+```JavaScript
+mountedElemEmits: {
+   event: 'CustomEvent',
+   args: ['ready', { detail: {} }],
+   eventProps: {
+      timestamp: Date.now(),
+      source: 'mount-observer',
+      element: '{{mountedElement}}'
+   }
+}
+```
+
+Properties are applied using the [assignGingerly](https://github.com/bahrus/assign-gingerly) library, which supports nested property assignment with the `?.` notation.
+
+### Fire once per element
+
+Use `oncePerMountedElement` to ensure an event only fires the first time an element mounts:
+
+```JavaScript
+const observer = new MountObserver({
+   whereElementMatches: 'button[data-once]',
+   mountedElemEmits: {
+      event: 'Event',
+      args: 'initialized',
+      oncePerMountedElement: true
+   }
+});
+```
+
+If the element is removed and re-added to the DOM, the event will not fire again. This is useful for initialization events that should only happen once per element instance.
+
+### Performance considerations
+
+The event emission logic is code-split into a separate module (`emitEvents.js`) that is only loaded when `mountedElemEmits` is configured. This keeps the core MountObserver lean for users who don't need this feature.
+
+### Complete example
+
+```JavaScript
+const observer = new MountObserver({
+   whereElementMatches: 'my-widget',
+   import: './my-widget.js',
+   mountedElemEmits: [
+      {
+         event: 'CustomEvent',
+         args: ['widget-loading', { 
+            detail: { 
+               element: '{{mountedElement}}',
+               timestamp: Date.now()
+            }
+         }],
+         oncePerMountedElement: true
+      },
+      {
+         event: 'Event',
+         args: 'widget-ready'
+      }
+   ],
+   do: ({localName}, {modules}) => {
+      if(!customElements.get(localName)) {
+         customElements.define(localName, modules[0].MyWidget);
+      }
+   }
+});
+
+// Listen for events
+document.addEventListener('widget-loading', (e) => {
+   console.log('Widget loading:', e.detail.element);
+});
+
+document.addEventListener('widget-ready', (e) => {
+   console.log('Widget ready:', e.target);
+});
+
+observer.observe(document);
+```
+
+[Implemented as [Requirement10](requirements/Requirement10.md)]
+
 
 ##  Extra lazy loading
 
@@ -376,7 +672,7 @@ However, we could make the loading even more lazy by specifying intersection opt
 
 ```JavaScript
 const observer = new MountObserver({
-   select: 'my-element',
+   select: 'my-element', //not supported by polyfill
    whereElementIntersectsWith:{
       rootMargin: "0px",
       threshold: 1.0,
@@ -397,7 +693,7 @@ const observer = new MountObserver({
    whereContainerHas: '[itemprop=isActive][value="true"]',
    whereInstanceOf: [HTMLMarqueeElement], //or ['HTMLMarqueeElement']
    whereLangIn: ['en-GB'],
-   whereConnectiselect:{
+   whereConnectionHas:{
       effectiveTypeIn: ["slow-2g"],
    },
    import: ['./my-element-small.css', {type: 'css'}],
@@ -421,9 +717,13 @@ const observer = new MountObserver({
 });
 ```
 
+[whereInstanceOf implemented as [Requirement5](requirements/Requirement5.md)]
+
+[whereMediaMatches implemented as [Requirement6](requirements/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.  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.
+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.
 
@@ -473,6 +773,8 @@ observer.addEventListener('forget', e => {
 });
 ```
 
+[mount, dismount, disconnect] events implemented
+
 ## Explanation of all states / events
 
 Normally, an element stays in its place in the DOM tree, but the conditions that the MountObserver instance is monitoring for can change for the element, based on modifications to the attributes of the element itself, or its custom state, or to other peer elements within the shadowRoot, if any, or window resizing, etc.  As the element meets or doesn't meet all the conditions, the mountObserver will first call the corresponding mount/dismount callback, and then dispatch event "mount" or "dismount" according to whether the criteria are all met or not.
@@ -506,6 +808,8 @@ I'm on the fence on that one.   I think the benefits either way to DX are so sma
 
 ## Dismounting
 
+[TODO] This section is out of date
+
 In many cases, it will be critical to inform the developer **why** the element no longer satisfies all the criteria.  For example, we may be using an intersection observer, and when we've scrolled away from view, we can "shut down" until the element is (nearly) scrolled back into view.  We may also be displaying things differently depending on the network speed.  How we should respond when one of the original conditions, but not the other, no longer applies, is of paramount importance.
 
 So the dismount event should provide a "checklist" of all the conditions, and their current value:
@@ -538,6 +842,8 @@ So I believe the prudent thing to do is wait for all the conditions to be satisf
 
 The alternative to providing this feature, which I'm leaning towards, is to just ask the developer to create "specialized" mountObserver construction arguments, that turn on and off precisely when the developer needs to know.
 
+[Implemented with [Requirement6](requirements/Requirement6.md)]
+
 
 ## Support for "donut hole scoping"
 
@@ -550,14 +856,19 @@ For the polyfill, we need to support it as follows:
 ```html
 <div id=myTest itemscope>
    <span itemprop=name>
+    <div itemscope>
+        <data itemprop=ssn>
+    </div>
 </div>
 ```
 
+We want to find all elements with attribute itemprop outside any itemscope, so the span and not the data element.
+
 ```JavaScript
-const oElement = document.getElementById('myTest');
+const oContainerNode = document.getElementById('myTest');
 const observer = new MountObserver({
-   select:'[itemprop]',
-   outside: '[itemscope]'
+   whereElementMatches:'[itemprop]',
+   whereOutside: '[itemscope]'
    do: {
       mount: ({localName}, {modules, observer}) => {
         ...
@@ -565,21 +876,30 @@ const observer = new MountObserver({
    },
    disconnectedSignal: new AbortController().signal
 });
-observer.observe(oElement);
+observer.observe(oContainerNode);
 ```
 
-The check for "outside" is done via script:
+The check for "whereOutside" is done via script:
 
 ```JavaScript
-outsideCheck(oElement: Element, matchCandidate: Element, outside: string){
-   const elementsToExclude = Array.from(oElement.querySelectorAll(outside));
-   for(const elementToExclude of elementsToExclude){
-      if(elementToExclude === matchCandidate || elementToExclude.contains(matchCandidate)) return false;
-   }
-   return true;
+import {whereOutside} from 'mount-observer/whereOutside.js';
+whereOutside(oContainerNode: Node, matchCandidate: Element, outside: string){
+    let current = matchCandidate.parentElement;
+    
+    while (current && current !== oContainerNode) {
+        if (current.matches(outside)) {
+            return false;  // Found an excluding ancestor
+        }
+        current = current.parentElement;
+    }
+    
+    return true;  // No excluding ancestors found
 }
+
 ```
 
+[Implemented as [Requirement7](requirements/Requirement7.md)]
+
 ## A tribute to attributes
 
 Attributes of DOM elements are tricky.  They've been around since the get-go of the Web, and they've survived multiple eras of web development, where different philosophies have prevailed, so prepare yourself for some esoteric discussions in what follows.

package/attrChanges.js

@@ -0,0 +1,70 @@
+/**
+ * Checks for attribute changes on a mounted element.
+ * This module is dynamically loaded only when whereAttr is configured.
+ */
+export function checkAttrChanges(element, mountInit, buildAttrCoordinateMapFn, elementAttrStates, elementOnceAttrs) {
+    if (!mountInit.whereAttr || !buildAttrCoordinateMapFn) {
+        return [];
+    }
+    const isCustomElement = element.tagName.toLowerCase().includes('-');
+    const attrCoordMap = buildAttrCoordinateMapFn(mountInit.whereAttr, isCustomElement);
+    // Get or create the attribute state for this element
+    let attrState = elementAttrStates.get(element);
+    if (!attrState) {
+        attrState = new Map();
+        elementAttrStates.set(element, attrState);
+    }
+    const changes = [];
+    const currentAttrs = new Set();
+    // Check all possible attributes from the coordinate map
+    for (const attrName of Object.keys(attrCoordMap)) {
+        const coordinate = attrCoordMap[attrName];
+        const currentValue = element.getAttribute(attrName);
+        const previousValue = attrState.get(attrName);
+        if (currentValue !== null) {
+            currentAttrs.add(attrName);
+        }
+        // Check if this attribute has "once: true" in its map entry
+        const mapEntry = mountInit.map?.[coordinate] || null;
+        const isOnce = mapEntry?.once === true;
+        // If "once" is true, check if we've already seen this attribute
+        if (isOnce) {
+            let onceAttrs = elementOnceAttrs.get(element);
+            if (!onceAttrs) {
+                onceAttrs = new Set();
+                elementOnceAttrs.set(element, onceAttrs);
+            }
+            // If we've already seen this attribute, skip it
+            if (onceAttrs.has(attrName)) {
+                continue;
+            }
+            // Mark this attribute as seen if it currently has a value
+            if (currentValue !== null) {
+                onceAttrs.add(attrName);
+            }
+        }
+        // Include if: currently has value OR previously had value but now removed
+        if (currentValue !== null || (previousValue !== undefined && currentValue === null)) {
+            // Check if value changed
+            if (currentValue !== previousValue) {
+                const attrNode = currentValue !== null ? element.getAttributeNode(attrName) : null;
+                changes.push({
+                    value: currentValue,
+                    attrNode,
+                    mapEntry,
+                    attrName,
+                    coordinate,
+                    element
+                });
+                // Update state
+                if (currentValue !== null) {
+                    attrState.set(attrName, currentValue);
+                }
+                else {
+                    attrState.delete(attrName);
+                }
+            }
+        }
+    }
+    return changes;
+}

package/attrChanges.ts

@@ -0,0 +1,90 @@
+import type { AttrChange, MountInit } from './types.d.ts';
+
+/**
+ * Checks for attribute changes on a mounted element.
+ * This module is dynamically loaded only when whereAttr is configured.
+ */
+export function checkAttrChanges(
+    element: Element,
+    mountInit: MountInit,
+    buildAttrCoordinateMapFn: (whereAttr: any, isCustomElement: boolean) => any,
+    elementAttrStates: WeakMap<Element, Map<string, string | null>>,
+    elementOnceAttrs: WeakMap<Element, Set<string>>
+): AttrChange[] {
+    if (!mountInit.whereAttr || !buildAttrCoordinateMapFn) {
+        return [];
+    }
+    
+    const isCustomElement = element.tagName.toLowerCase().includes('-');
+    const attrCoordMap = buildAttrCoordinateMapFn(mountInit.whereAttr, isCustomElement);
+    
+    // Get or create the attribute state for this element
+    let attrState = elementAttrStates.get(element);
+    if (!attrState) {
+        attrState = new Map<string, string | null>();
+        elementAttrStates.set(element, attrState);
+    }
+    
+    const changes: AttrChange[] = [];
+    const currentAttrs = new Set<string>();
+    
+    // Check all possible attributes from the coordinate map
+    for (const attrName of Object.keys(attrCoordMap)) {
+        const coordinate = attrCoordMap[attrName];
+        const currentValue = element.getAttribute(attrName);
+        const previousValue = attrState.get(attrName);
+        
+        if (currentValue !== null) {
+            currentAttrs.add(attrName);
+        }
+        
+        // Check if this attribute has "once: true" in its map entry
+        const mapEntry = mountInit.map?.[coordinate] || null;
+        const isOnce = mapEntry?.once === true;
+        
+        // If "once" is true, check if we've already seen this attribute
+        if (isOnce) {
+            let onceAttrs = elementOnceAttrs.get(element);
+            if (!onceAttrs) {
+                onceAttrs = new Set<string>();
+                elementOnceAttrs.set(element, onceAttrs);
+            }
+            
+            // If we've already seen this attribute, skip it
+            if (onceAttrs.has(attrName)) {
+                continue;
+            }
+            
+            // Mark this attribute as seen if it currently has a value
+            if (currentValue !== null) {
+                onceAttrs.add(attrName);
+            }
+        }
+        
+        // Include if: currently has value OR previously had value but now removed
+        if (currentValue !== null || (previousValue !== undefined && currentValue === null)) {
+            // Check if value changed
+            if (currentValue !== previousValue) {
+                const attrNode = currentValue !== null ? element.getAttributeNode(attrName) : null;
+                
+                changes.push({
+                    value: currentValue,
+                    attrNode,
+                    mapEntry,
+                    attrName,
+                    coordinate,
+                    element
+                });
+                
+                // Update state
+                if (currentValue !== null) {
+                    attrState.set(attrName, currentValue);
+                } else {
+                    attrState.delete(attrName);
+                }
+            }
+        }
+    }
+    
+    return changes;
+}