mount-observer 0.0.24 → 0.0.25

package/MountObserver.js

@@ -31,7 +31,7 @@ export class MountObserver extends EventTarget {
     }
     #calculatedSelector;
     #attrParts;
-    #fullListOfAttrs;
+    #fullListOfEnhancementAttrs;
     //get #attrVals
     async #selector() {
         if (this.#calculatedSelector !== undefined)
@@ -43,7 +43,7 @@ export class MountObserver extends EventTarget {
         const { getWhereAttrSelector } = await import('./getWhereAttrSelector.js');
         const info = await getWhereAttrSelector(whereAttr, withoutAttrs);
         const { fullListOfAttrs, calculatedSelector, partitionedAttrs } = info;
-        this.#fullListOfAttrs = fullListOfAttrs;
+        this.#fullListOfEnhancementAttrs = fullListOfAttrs;
         this.#attrParts = partitionedAttrs;
         this.#calculatedSelector = calculatedSelector;
         return this.#calculatedSelector;
@@ -119,7 +119,7 @@ export class MountObserver extends EventTarget {
             }
         }
         const rootMutObs = mutationObserverLookup.get(within);
-        const fullListOfAttrs = this.#fullListOfAttrs;
+        const fullListOfAttrs = this.#fullListOfEnhancementAttrs;
         rootMutObs.addEventListener('mutation-event', async (e) => {
             //TODO:  disconnected
             if (this.#isComplex) {
@@ -151,6 +151,7 @@ export class MountObserver extends EventTarget {
                                 const newValue = target.getAttribute(attributeName);
                                 const parts = this.#attrParts[idx];
                                 const attrChangeInfo = {
+                                    isSOfTAttr: false,
                                     oldValue,
                                     name: attributeName,
                                     newValue,
@@ -245,8 +246,9 @@ export class MountObserver extends EventTarget {
         }
     }
     readAttrs(match, branchIndexes) {
-        const fullListOfAttrs = this.#fullListOfAttrs;
+        const fullListOfAttrs = this.#fullListOfEnhancementAttrs;
         const attrChangeInfos = [];
+        const oldValue = null;
         if (fullListOfAttrs !== undefined) {
             const attrParts = this.#attrParts;
             for (let idx = 0, ii = fullListOfAttrs.length; idx < ii; idx++) {
@@ -257,17 +259,40 @@ export class MountObserver extends EventTarget {
                         continue;
                 }
                 const name = fullListOfAttrs[idx];
-                const oldValue = null;
                 const newValue = match.getAttribute(name);
                 attrChangeInfos.push({
                     idx,
+                    isSOfTAttr: false,
                     newValue,
                     oldValue,
                     name,
                     parts
                 });
             }
-            //this.dispatchEvent(new AttrChangeEvent(match, attrChangeInfos));
+        }
+        const { observedAttrsWhenMounted } = this.#mountInit;
+        if (observedAttrsWhenMounted !== undefined) {
+            for (const observedAttr of observedAttrsWhenMounted) {
+                const attrIsString = typeof observedAttr === 'string';
+                const name = attrIsString ? observedAttr : observedAttr.name;
+                let mapsTo;
+                let newValue = match.getAttribute(name);
+                if (!attrIsString) {
+                    const { customParser, instanceOf, mapsTo: mt, valIfNull } = observedAttr;
+                    if (instanceOf || customParser)
+                        throw 'NI';
+                    if (newValue === null)
+                        newValue = valIfNull;
+                    mapsTo = mt;
+                }
+                attrChangeInfos.push({
+                    isSOfTAttr: true,
+                    newValue,
+                    oldValue,
+                    name,
+                    mapsTo
+                });
+            }
         }
         return attrChangeInfos;
     }

package/README.md

@@ -337,7 +337,7 @@ We want to be alerted by the discovery of elements adorned by these attributes,
 
 I think it is useful to divide [attributes](https://jakearchibald.com/2024/attributes-vs-properties/) that we would want to observe into two categories:
 
-1.  Invariably named, prefix-less, "top-level" attributes that serve as the "source of the truth" for key features of the DOM element itself.  We will refer to these attributes as "Source of Truth" attributes.
+1.  Invariably named, prefix-less, "top-level" attributes that serve as the "source of truth" for key features of the DOM element itself.  We will refer to these attributes as "Source of Truth" attributes.
 
 Examples are many built-in global attributes, like lang, or contenteditable, or more specialized examples such as "content" for the meta tag.  I think in the vast majority of cases, setting the property values corresponding to these attributes results in directly reflecting those property values to the attributes.  There are exceptions, especially for non-string attributes like the checked property of the input element / type=checkbox. And there are usually no events we can subscribe to in order to know when the property changes. Hijacking the property setter in order to observe changes may not always work or feel very resilient. So monitoring the attribute value is often the most effective way of observing when the property/attribute state for these elements change.  And some attributes (like the microdata attributes such as itemprop) don't even have properties that they pair with! 
   
@@ -722,12 +722,12 @@ Often, we will want to define a large number of "mount observer script elements
 
 This is a problem space that [be-hive](https://github.com/bahrus/be-hive) is grappling with, and is used as an example for this section, to simply make things more concrete.  But we can certainly envision other "frameworks" that could leverage this feature for a variety of purposes, including other families of behaviors/enhancements, or "binding from a distance" syntaxes.  
 
-In particular, *be-hive* supports publishing [enhancements](https://github.com/bahrus/be-enhanced) that take advantage of the DOM filtering ability that the MountObserver provides, that "ties the knot" based on CSS matches in the DOM to behaviors/enhancements that we want to attach directly onto the matching elements.  *be-hive" seeks to take advantage of the inheritable infrastructure that MountObserver script elements provide, but we don't want to burden the developer with having to manually list all these configurations, we want it to happen automatically, only expecting manual intervention when we need some special customizations within a specific ShadowDOM scope.
+In particular, *be-hive* supports publishing [enhancements](https://github.com/bahrus/be-enhanced) that take advantage of the DOM filtering ability that the MountObserver provides, that "ties the knot" based on CSS matches in the DOM to behaviors/enhancements that we want to attach directly onto the matching elements.  *be-hive* seeks to take advantage of the inheritable infrastructure that MOSEs provide, but we don't want to burden the developer with having to manually list all these configurations, we want it to happen automatically, only expecting manual intervention when we need some special customizations within a specific ShadowDOM scope.
 
 To support this, we propose these highlights:
 
 1.  Adding a static "synthesize" method to the MountObserver api.  This would provide a kind of passage-way from the imperative api to the declarative one.  
-2.  As the Synthesize method is called repeatedly from different packages that work with that framework, it creates a cluster of MOSEs wrapped inside a custom element ("be-hive") that the framework developer authors.  It appends script elements with type="mountobserver" to the custom element instance sitting in the DOM, that dispatches events from the synthesizing custom element it gets appended to, so subscribers in child Shadow DOM's don't need to add a general mutation observer in order to know when parent shadow roots had a MOSE inserted that it needs to act on.  This allows the child Shadow DOM's to inherit (in this case) behaviors/enhancements from the parent Shadow DOM.
+2.  As the *synthesize* method is called repeatedly from different packages that work within that framework, it creates a cluster of MOSEs wrapped inside the "synthesizing" custom element ("be-hive") that the framework developer authors.  It appends script elements with type="mountobserver" to the custom element instance sitting in the DOM, that dispatches events from the synthesizing custom element it gets appended to, so subscribers in child Shadow DOM's don't need to add a general mutation observer in order to know when parent shadow roots had a MOSE inserted that it needs to act on.  This allows the child Shadow DOM's to inherit (in this case) behaviors/enhancements from the parent Shadow DOM.
 
 So framework developers can develop a bespoke custom element that inherits from the class "*Synthesizer*" that is part of this package / proposal, that is used to group families of MountObservers together.  
 

package/getWhereAttrSelector.js

@@ -1,6 +1,6 @@
 export async function getWhereAttrSelector(whereAttr, withoutAttrs) {
-    const { hasBase, hasBranchIn, hasRootIn, isIn } = whereAttr;
-    const fullListOfAttrs = isIn !== undefined ? [...isIn] : [];
+    const { hasBase, hasBranchIn, hasRootIn } = whereAttr;
+    const fullListOfAttrs = [];
     const partitionedAttrs = [];
     if (hasBase !== undefined) {
         const hasRootInGuaranteed = hasRootIn || [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",

package/types.d.ts

@@ -2,13 +2,22 @@
 
 export interface JSONSerializableMountInit{
     readonly on?: CSSMatch,
-    observedAttrsWhenMounted?: string[],
+    readonly observedAttrsWhenMounted?: (string | ObservedSourceOfTruthAttribute)[],
     readonly whereAttr?: WhereAttr,  
     readonly whereElementIntersectsWith?: IntersectionObserverInit,
     readonly whereMediaMatches?: MediaQuery,
     readonly import?: ImportString | [ImportString, ImportAssertions] | PipelineProcessor,
 
 }
+
+export interface ObservedSourceOfTruthAttribute  {
+    name: string,
+    mapsTo?: string,
+    valIfNull?: any,
+    instanceOf?: any,
+    customParser?: (newValue: string | null, oldValue: string | null, instance: Element) => any
+}
+
 export interface MountInit extends JSONSerializableMountInit{
     
     readonly withTargetShadowRoot?: ShadowRoot, 
@@ -106,9 +115,11 @@ interface AttrParts{
 interface AttrChangeInfo{
     oldValue: string | null,
     newValue: string | null,
-    idx: number,
+    isSOfTAttr: boolean,
+    idx?: number,
     name: string,
-    parts: AttrParts,
+    parts?: AttrParts,
+    mapsTo?: string,
 }
 
 //#region mount event