mount-observer 0.0.15 → 0.0.16

package/README.md

@@ -284,9 +284,9 @@ So let's say we want to insist that on custom elements, we must have the data- p
 
 And we want to support an alternative, more semantic sounding prefix to data, say enh-*, endorsed by [this proposal](https://github.com/WICG/webcomponents/issues/1000).
 
-Here's what the api provides:
+Here's what the api **doesn't** provide:
 
-## Option 1 -- The carpal syndrome syntax
+## Rejected option -- The carpal syndrome syntax
 
 ```JavaScript
 import {MountObserver} from '../MountObserver.js';
@@ -320,7 +320,7 @@ const mo = new MountObserver({
 });
 ```
 
-## Option 2 -- The DRY Way
+## Supported -- The DRY Way
 
 ```JavaScript
 import {MountObserver} from '../MountObserver.js';
@@ -360,16 +360,18 @@ MountObserver provides a breakdown of the matching attribute when encountered:
       console.log(e);
       // {
       //    matchingElement,
-      //    attrChangeInfo:{
-      //       name: 'data-my-enhancement-first-aspect-wow-this-is-deep'
-      //       root: 'data',
-      //       base: 'my-enhancement',
-      //       branch: 'first-aspect',
-      //       leaf: 'wow-this-is-deep',
-      //       oldValue: null,
-      //       newValue: 'good-bye'
+      //    attrChangeInfo:[{
       //       idx: 0,
-      //    }
+      //       oldValue: null,
+      //       newValue: 'good-bye',
+      //       parts:{
+      //          name: 'data-my-enhancement-first-aspect-wow-this-is-deep'
+      //          root: 'data',
+      //          base: 'my-enhancement',
+      //          branch: 'first-aspect',
+      //          leaf: 'wow-this-is-deep',
+      //       }
+      //    }]
       // }
    });
    mo.observe(div);

package/package.json

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

package/types.d.ts

@@ -5,7 +5,7 @@ export interface MountInit{
     readonly whereAttr?: WhereAttr,  
     readonly whereElementIntersectsWith?: IntersectionObserverInit,
     readonly whereMediaMatches?: MediaQuery,
-    readonly whereInstanceOf?: Array<typeof Node>, //[TODO] What's the best way to type this?,
+    readonly whereInstanceOf?: Array<{new(): Element}>,
     readonly whereSatisfies?: PipelineProcessor<boolean>,
     readonly import?: ImportString | [ImportString, ImportAssertions] | PipelineProcessor,
     readonly do?: {
@@ -21,13 +21,18 @@ export interface MountInit{
     //  */
     // readonly ignoreInitialMatches?: boolean,
 }
+
+export interface RootCnfg{
+    start: string,
+    context: 'BuiltIn' | 'CustomElement' | 'Both'
+}
+
+//export type RootAttrOptions = Array<string | RootCnfg>;
+export type delimiter = string;
 export interface WhereAttr{
-    hasBase: string | [string, string],
-    hasBranchIn?: Array<string> | [string, Array<string>],
-    hasRootIn?: Array<string | {
-        path: string,
-        context: 'BuiltIn' | 'CustomElement' | 'Both'
-    }>,
+    hasBase: string | [delimiter, string],
+    hasBranchIn?: Array<string> | [delimiter, Array<string>],
+    hasRootIn?: Array<RootCnfg>,
 }
 type CSSMatch = string;
 type ImportString = string;
@@ -70,15 +75,20 @@ export interface AddMutationEventListener {
 }
 //#endregion
 
-interface AttrChangeInfo{
+interface AttrParts{
     name: string,
     root?: string,
     base?: string,
     branch?: string,
     leaf?: string, //TODO
+    rootCnfg?: RootCnfg
+}
+
+interface AttrChangeInfo{
     oldValue: string | null,
     newValue: string | null,
     idx: number,
+    parts: AttrParts,
     //parsedNewValue?: any,
 }
 
@@ -123,7 +133,7 @@ export interface AddDisconnectEventListener {
 //#region attribute change event
 export type attrChangeEventName = 'attr-change';
 export interface IAttrChangeEvent extends IMountEvent {
-    attrChangeInfo: AttrChangeInfo,
+    attrChangeInfos: Array<AttrChangeInfo>,
 }
 export type attrChangeEventHandler = (e: IAttrChangeEvent) => void;
 export interface AddAttrChangeEventListener{

package/doWhereAttr.js

@@ -1,43 +0,0 @@
-import { AttrChangeEvent } from "./MountObserver.js";
-export function doWhereAttr(whereAttr, attributeName, target, oldValue, mo) {
-    const { hasRootIn, hasBase, hasBranchIn } = whereAttr;
-    const name = attributeName;
-    let restOfName = name;
-    let root;
-    let branch;
-    let idx = 0;
-    const hasBaseIsString = typeof hasBase === 'string';
-    const baseSelector = hasBaseIsString ? hasBase : hasBase[1];
-    const rootToBaseDelimiter = hasBaseIsString ? '-' : hasBase[0];
-    if (hasRootIn !== undefined) {
-        for (const rootTest in hasRootIn) {
-            if (restOfName.startsWith(rootTest)) {
-                root = rootTest;
-                restOfName = restOfName.substring(root.length + rootToBaseDelimiter.length);
-                break;
-            }
-        }
-    }
-    if (!restOfName.startsWith(baseSelector))
-        return;
-    restOfName = restOfName.substring(hasBase.length);
-    if (hasBranchIn) {
-        for (const branchTest in hasBranchIn) {
-            if (restOfName.startsWith(branchTest)) {
-                branch = branchTest;
-                break;
-            }
-        }
-    }
-    const newValue = target.getAttribute(attributeName);
-    const attrChangeInfo = {
-        name,
-        root,
-        base: baseSelector,
-        branch,
-        oldValue,
-        newValue,
-        idx
-    };
-    mo.dispatchEvent(new AttrChangeEvent(target, attrChangeInfo));
-}