mount-observer 0.0.53 → 0.0.55

package/Newish.js

@@ -1,15 +1,25 @@
 export { waitForEvent } from './waitForEvent.js';
+import { ObsAttr } from './ObsAttr.js';
+import { splitRefs } from './itemRefUtils/splitRefs.js';
 export const attached = Symbol.for('xyyspnstnU+CDrNVa0VnxA');
 export class Newish {
     queue = [];
     isResolved = false;
     #ce;
+    #ref;
     //#assigner: undefined | Assigner = undefined;
     #options;
     constructor(enhancedElement, itemscope, options) {
         this.#options = options || { assigner: Object.assign };
+        this.#ref = new WeakRef(enhancedElement);
         this.#do(enhancedElement, itemscope);
     }
+    handleEvent(event) {
+        const enhancedElement = this.#ref.deref();
+        if (!enhancedElement)
+            return;
+        this.#attachItemrefs(enhancedElement);
+    }
     async #do(enhancedElement, itemscope) {
         if (enhancedElement[attached] === true)
             return;
@@ -43,26 +53,32 @@ export class Newish {
         });
         this.#assignGingerly();
         //attach any itemref references
+        this.#attachItemrefs(enhancedElement);
+        const et = ObsAttr(enhancedElement, 'itemref');
+        et.addEventListener('attr-changed', this);
+        this.isResolved = true;
+        enhancedElement.dispatchEvent(new Event('ishAttached'));
+    }
+    #alreadyAttached = new Set();
+    #attachItemrefs(enhancedElement) {
+        //TODO:  watch for already attached itemrefs to be removed and remove them from the set
+        // and call outOfScopeCallback on them
         if (enhancedElement.hasAttribute('itemref')) {
             const itemref = enhancedElement.getAttribute('itemref');
-            const itemrefList = itemref.split(' ');
-            let nextSibling = enhancedElement.nextElementSibling;
-            while (nextSibling) {
-                if (itemrefList.includes(nextSibling.id)) {
-                    this.#ce.inScopeCallback(nextSibling);
-                    itemrefList.splice(itemrefList.indexOf(nextSibling.id), 1);
+            const itemrefList = splitRefs(itemref); // itemref.split(' ').map((id) => id.trim()).filter((id) => id.length > 0);
+            if (itemrefList.length === 0)
+                return;
+            const rn = enhancedElement.getRootNode();
+            for (const id of itemrefList) {
+                if (this.#alreadyAttached.has(id))
+                    continue;
+                const itemrefElement = rn.getElementById(id);
+                if (itemrefElement) {
+                    this.#ce.inScopeCallback(itemrefElement);
+                    this.#alreadyAttached.add(id);
                 }
-                if (itemrefList.length === 0)
-                    break;
-                nextSibling = nextSibling.nextElementSibling;
-            }
-            if (itemrefList.length > 0) {
-                //TODO add an observer queue for the id found elsewhere
-                throw 'NI';
             }
         }
-        this.isResolved = true;
-        enhancedElement.dispatchEvent(new Event('ishAttached'));
     }
     async #assignGingerly() {
         let ce = this.#ce;

package/Newish.ts

@@ -1,19 +1,28 @@
 import { Assigner, BindishOptions } from './ts-refs/mount-observer/types.js';
 
 export {waitForEvent} from './waitForEvent.js';
+import {ObsAttr} from './ObsAttr.js';
+import {splitRefs} from './itemRefUtils/splitRefs.js';
 export const attached = Symbol.for('xyyspnstnU+CDrNVa0VnxA');
-export class Newish{
+export class Newish implements EventListenerObject {
     queue: Array<any> = [];
     isResolved = false;
     #ce: HTMLElement | undefined;
+    #ref: WeakRef<Element>;
 
     //#assigner: undefined | Assigner = undefined;
     #options: BindishOptions;
 
     constructor(enhancedElement: Element, itemscope: string, options?: BindishOptions){
         this.#options = options || {assigner: Object.assign};
+        this.#ref = new WeakRef(enhancedElement);
         this.#do(enhancedElement, itemscope);
     }
+    handleEvent(event: Event): void {
+       const enhancedElement = this.#ref.deref();
+       if(!enhancedElement) return;
+       this.#attachItemrefs(enhancedElement);
+    }
 
     async #do(enhancedElement: Element, itemscope: string){
         if((<any>enhancedElement)[attached] === true) return;
@@ -46,25 +55,35 @@ export class Newish{
         });
         this.#assignGingerly();
         //attach any itemref references
+        this.#attachItemrefs(enhancedElement);
+        const et = ObsAttr(enhancedElement, 'itemref');
+        et.addEventListener('attr-changed', this);
+        this.isResolved = true;
+        enhancedElement.dispatchEvent(new Event('ishAttached'));
+    }
+
+    
+
+    #alreadyAttached = new Set<string>();
+
+    #attachItemrefs(enhancedElement: Element){
+        //TODO:  watch for already attached itemrefs to be removed and remove them from the set
+        // and call outOfScopeCallback on them
         if(enhancedElement.hasAttribute('itemref')){
             const itemref = enhancedElement.getAttribute('itemref')!;
-            const itemrefList = itemref.split(' ');
-            let nextSibling = enhancedElement.nextElementSibling;
-            while(nextSibling){
-                if(itemrefList.includes(nextSibling.id)){
-                    (<any>this.#ce).inScopeCallback(nextSibling);
-                    itemrefList.splice(itemrefList.indexOf(nextSibling.id), 1);
+            const itemrefList = splitRefs(itemref);// itemref.split(' ').map((id) => id.trim()).filter((id) => id.length > 0);
+            if(itemrefList.length === 0) return;
+            const rn = enhancedElement.getRootNode() as Document | ShadowRoot;
+            for(const id of itemrefList){
+                if(this.#alreadyAttached.has(id)) continue;
+                const itemrefElement = rn.getElementById(id);
+                if(itemrefElement){
+                    (<any>this.#ce).inScopeCallback(itemrefElement);
+                    this.#alreadyAttached.add(id);
                 }
-                if(itemrefList.length === 0) break;
-                nextSibling = nextSibling.nextElementSibling;
-            }
-            if(itemrefList.length > 0){
-                //TODO add an observer queue for the id found elsewhere
-                throw 'NI';
             }
         }
-        this.isResolved = true;
-        enhancedElement.dispatchEvent(new Event('ishAttached'));
+
     }
 
     async #assignGingerly(){

package/ObsAttr.js

@@ -0,0 +1,18 @@
+export function ObsAttr(element, attr) {
+    const eventTarget = new EventTarget();
+    const obs = new MutationObserver((mutations) => {
+        eventTarget.dispatchEvent(new Event('attr-changed'));
+        // for(const mutation of mutations){
+        //     if(mutation.type === 'attributes' && mutation.attributeName === attr){
+        //         obs.disconnect();
+        //         eventTarget.dispatchEvent(new Event('obsAttr'));
+        //         break;
+        //     }
+        // }
+    });
+    obs.observe(element, {
+        attributes: true,
+        attributeFilter: [attr],
+    });
+    return eventTarget;
+}

package/ObsAttr.ts

@@ -0,0 +1,18 @@
+export function ObsAttr(element: Element, attr: string): EventTarget{
+    const eventTarget = new EventTarget();
+    const obs = new MutationObserver((mutations) => {
+        eventTarget.dispatchEvent(new Event('attr-changed'));
+        // for(const mutation of mutations){
+        //     if(mutation.type === 'attributes' && mutation.attributeName === attr){
+        //         obs.disconnect();
+        //         eventTarget.dispatchEvent(new Event('obsAttr'));
+        //         break;
+        //     }
+        // }
+    });
+    obs.observe(element, {
+        attributes: true,
+        attributeFilter: [attr],
+    });
+    return eventTarget;
+}

package/itemRefUtils/splitRefs.js

@@ -0,0 +1,6 @@
+export function splitRefs(refs) {
+    return refs
+        .split(' ')
+        .map(s => s.trim())
+        .filter(s => !!s);
+}

package/itemRefUtils/splitRefs.ts

@@ -0,0 +1,6 @@
+export function splitRefs(refs: string){
+    return refs
+    .split(' ')
+    .map(s => s.trim())
+    .filter(s => !!s);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
@@ -21,6 +21,10 @@
       "default": "./Newish.js",
       "types": "./Newish.ts"
     },
+    "./ObsAttr.js": {
+      "default": "./ObsAttr.js",
+      "types": "./ObsAttr.ts"
+    },
     "./Synthesizer.js": {
       "default": "./Synthesizer.js",
       "types": "./Synthesizer.ts"
@@ -40,12 +44,17 @@
     "./waitForIsh.js": {
       "default": "./waitForIsh.js",
       "types": "./waitForIsh.ts"
+    },
+    "./itemRefUtils/splitRefs.js": {
+      "default": "./itemRefUtils/splitRefs.js",
+      "types": "./itemRefUtils/splitRefs.ts"
     }
   },
   "files": [
     "*.js",
     "*.ts",
-    "./ts-refs/*"
+    "./ts-refs/*",
+    "./itemRefUtils/*"
   ],
   "types": "./ts-refs/mount-observer/types.d.ts",
   "scripts": {

package/ts-refs/be-scoped/types.d.ts

@@ -0,0 +1,23 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+
+export interface EndUserProps extends IEnhancement{
+    names: string;
+}
+
+export interface AllProps extends EndUserProps{
+    parsedNames: string[];
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AP & BEAllProps;
+
+export interface Actions{
+    parse(self: BAP): PAP;
+    hydrate(self: BAP): ProPAP;
+    retire(self: BAP): void;
+}

package/ts-refs/trans-render/be/types.d.ts

@@ -116,6 +116,8 @@ export interface EnhancementMountConfig<TBranches = any, TProps = any>{
 
     mapEnhKeyTo?: keyof TProps,
 
+    mapEmcTo?: keyof TProps,
+
     allowedMutations?: {[key: CSSQuery]: []}
 
     top?: EnhancementMountConfig<TBranches, TProps>,

package/ts-refs/trans-render/froop/types.d.ts

@@ -1,7 +1,7 @@
 import { IMountObserver } from '../../mount-observer/types';
 import { Scope} from '../lib/types';
 import { WrapperConfig } from '../XV/types';
-import {XForm} from '../types';
+import {CSSQuery, XForm} from '../types';
 
 export interface IEventConfig<MCProps = any, MCActions = MCProps, TAction = Action>{
     on?: string,
@@ -189,7 +189,7 @@ export interface IshConfig<TProps = any, TActions = TProps, ETProps = TProps>{
     
     isSleepless?: boolean;
     xform?: XForm<TProps, TActions>;
-    inScopeXForms?: Array<XForm<TProps, TActions>>;
+    inScopeXForms?: {[key: CSSQuery]: XForm<TProps, TActions>};
 }
 export interface OConfig<TProps = any, TActions = TProps, ETProps = TProps> extends IshConfig<TProps, TActions, ETProps>{
     mainTemplate?: string | HTMLTemplateElement;