mount-observer 0.0.59 → 0.0.61

package/MountObserver.js

@@ -219,7 +219,7 @@ export class MountObserver extends EventTarget {
                     this.dispatchEvent(new AttrChangeEvent(key, value));
                 }
             }
-            this.#filterAndMount(elsToInspect, true, false);
+            this.#filterAndMount(elsToInspect, within, true, false);
             for (const el of elsToInspect) {
                 await this.#inspectWithin(el, false);
             }
@@ -371,7 +371,7 @@ export class MountObserver extends EventTarget {
         const { whereSatisfies, whereInstanceOf } = this.#mountInit;
         const match = await this.#selector();
         const els = Array.from(document.querySelectorAll(match));
-        this.#filterAndMount(els, false, true);
+        this.#filterAndMount(els, document.body, false, true);
     }
     async #filterAndDismount() {
         const returnSet = new Set();
@@ -396,7 +396,7 @@ export class MountObserver extends EventTarget {
         this.#mountedList = Array.from(returnSet).map(x => new WeakRef(x));
         return returnSet;
     }
-    async #filterAndMount(els, checkMatch, initializing) {
+    async #filterAndMount(els, target, checkMatch, initializing) {
         const { whereSatisfies, whereInstanceOf, assigner } = this.#mountInit;
         const match = await this.#selector();
         const elsToMount = els.filter(x => {
@@ -419,15 +419,15 @@ export class MountObserver extends EventTarget {
                 await this.#compose(elToMount, 0);
             }
         }
-        await bindishIt(els, { assigner });
+        await bindishIt(els, target, { assigner });
         this.#mount(elsToMount, initializing);
     }
     async #inspectWithin(within, initializing) {
-        await bindish(within, { assigner: this.#mountInit.assigner });
+        await bindish(within, within, { assigner: this.#mountInit.assigner });
         await this.composeFragment(within, 0);
         const match = await this.#selector();
         const els = Array.from(within.querySelectorAll(match));
-        this.#filterAndMount(els, false, initializing);
+        this.#filterAndMount(els, within, false, initializing);
     }
 }
 export function waitForIdleNodes(nodes, idleTimeout) {

package/MountObserver.ts

@@ -234,7 +234,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
                     this.dispatchEvent(new AttrChangeEvent(key, value))
                 }
             }
-            this.#filterAndMount(elsToInspect, true, false);
+            this.#filterAndMount(elsToInspect, within, true, false);
             for(const el of elsToInspect){
                 await this.#inspectWithin(el, false);
             }
@@ -392,7 +392,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
         const {whereSatisfies, whereInstanceOf} = this.#mountInit;
         const match = await this.#selector();
         const els = Array.from(document.querySelectorAll(match));
-        this.#filterAndMount(els, false, true);
+        this.#filterAndMount(els, document.body, false, true);
     }
 
     async #filterAndDismount(): Promise<Set<Element>>{
@@ -416,7 +416,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
         return returnSet;
     }
 
-    async #filterAndMount(els: Array<Element>, checkMatch: boolean, initializing: boolean){
+    async #filterAndMount(els: Array<Element>, target: Node, checkMatch: boolean, initializing: boolean){
         const {whereSatisfies, whereInstanceOf, assigner} = this.#mountInit;
         const match = await this.#selector();
         const elsToMount = els.filter(x => {
@@ -437,16 +437,16 @@ export class MountObserver extends EventTarget implements IMountObserver{
             }
             
         }
-        await bindishIt(els, {assigner});
+        await bindishIt(els, target, {assigner});
         this.#mount(elsToMount, initializing);
     }
 
     async #inspectWithin(within: Node, initializing: boolean){
-        await bindish(within as DocumentFragment, {assigner: this.#mountInit.assigner});
+        await bindish(within as DocumentFragment, within, {assigner: this.#mountInit.assigner});
         await this.composeFragment(within as DocumentFragment, 0);
         const match = await this.#selector();
         const els = Array.from((within as Element).querySelectorAll(match));
-        this.#filterAndMount(els, false, initializing);
+        this.#filterAndMount(els, within, false, initializing);
     }
 
 }

package/Newish.js

@@ -10,10 +10,10 @@ export class Newish {
     #ref;
     //#assigner: undefined | Assigner = undefined;
     #options;
-    constructor(enhancedElement, itemscope, options) {
+    constructor(enhancedElement, target, itemscope, options) {
         this.#options = options || { assigner: Object.assign };
         this.#ref = new WeakRef(enhancedElement);
-        this.#do(enhancedElement, itemscope);
+        this.#do(enhancedElement, target, itemscope);
     }
     handleEvent(event) {
         const enhancedElement = this.#ref.deref();
@@ -21,11 +21,11 @@ export class Newish {
             return;
         this.#attachItemrefs(enhancedElement);
     }
-    async #do(enhancedElement, itemscope) {
+    async #do(enhancedElement, target, itemscope) {
         if (enhancedElement[attached] === true)
             return;
         enhancedElement[attached] = true;
-        const ctr = getIsh(enhancedElement, itemscope);
+        const ctr = await getIsh(enhancedElement.isConnected ? enhancedElement : target, itemscope);
         const initPropVals = enhancedElement['ish'];
         if (enhancedElement instanceof HTMLElement) {
             if (enhancedElement.dataset.ish) {

package/Newish.ts

@@ -14,10 +14,12 @@ export class Newish implements EventListenerObject {
     //#assigner: undefined | Assigner = undefined;
     #options: BindishOptions;
 
-    constructor(enhancedElement: Element, itemscope: string, options?: BindishOptions){
+    constructor(enhancedElement: Element,
+        target: Node,
+        itemscope: string, options?: BindishOptions){
         this.#options = options || {assigner: Object.assign};
         this.#ref = new WeakRef(enhancedElement);
-        this.#do(enhancedElement, itemscope);
+        this.#do(enhancedElement, target, itemscope);
     }
     handleEvent(event: Event): void {
        const enhancedElement = this.#ref.deref();
@@ -25,10 +27,14 @@ export class Newish implements EventListenerObject {
        this.#attachItemrefs(enhancedElement);
     }
 
-    async #do(enhancedElement: Element, itemscope: string){
+    async #do(
+        enhancedElement: Element,
+        target: Node, 
+        itemscope: string
+    ){
         if((<any>enhancedElement)[attached] === true) return;
         (<any>enhancedElement)[attached] = true;
-        const ctr = getIsh(enhancedElement, itemscope)! as any;
+        const ctr = await getIsh(enhancedElement.isConnected ? enhancedElement :target, itemscope)! as any;
 
         const initPropVals = (<any>enhancedElement)['ish'];
         if(enhancedElement instanceof HTMLElement){

package/bindish.js

@@ -1,14 +1,14 @@
 export const itemscopeQry = '[itemscope]:not([itemscope=""])';
-export async function bindish(fragment, options) {
+export async function bindish(fragment, target, options) {
     const scopes = Array.from(fragment.querySelectorAll(`${itemscopeQry}`));
-    await bindishIt(scopes, options);
+    await bindishIt(scopes, target, options);
 }
-export async function bindishIt(scopes, options) {
+export async function bindishIt(scopes, target, options) {
     for (const scope of scopes) {
         const itemscope = scope.getAttribute('itemscope');
         if (itemscope && !(scope.ish instanceof HTMLElement)) {
             const { Newish } = await import('./Newish.js');
-            new Newish(scope, itemscope, options);
+            new Newish(scope, target, itemscope, options);
         }
     }
 }

package/bindish.ts

@@ -1,17 +1,21 @@
 import { Assigner, BindishOptions } from './ts-refs/mount-observer/types.js';
 
 export const itemscopeQry = '[itemscope]:not([itemscope=""])';
-export async function bindish(fragment: DocumentFragment, options?: BindishOptions){
+export async function bindish(
+    fragment: DocumentFragment,
+    target: Node, 
+    options?: BindishOptions
+){
     const scopes = Array.from(fragment.querySelectorAll(`${itemscopeQry}`));
-    await bindishIt(scopes, options);
+    await bindishIt(scopes, target, options);
 }
 
-export async function bindishIt(scopes: Array<Element>, options?: BindishOptions){
+export async function bindishIt(scopes: Array<Element>, target: Node, options?: BindishOptions){
     for(const scope of scopes){
         const itemscope = scope.getAttribute('itemscope');
         if(itemscope && !((<any>scope).ish instanceof HTMLElement)){
             const {Newish} = await import('./Newish.js');
-            new Newish(scope, itemscope, options);
+            new Newish(scope, target, itemscope, options);
         }
     }
 }

package/package.json

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

package/refid/getIsh.js

@@ -1,5 +1,5 @@
-import { sym } from './regIsh.js';
-export function getIsh(scope, name) {
+import { sym, guid } from './regIsh.js';
+export async function getIsh(scope, name) {
     let test = scope;
     while (true) {
         const map = test[sym];
@@ -8,8 +8,9 @@ export function getIsh(scope, name) {
                 return map.get(name);
             }
         }
-        if (test === document)
-            throw 404;
+        if (test === document) {
+            return await watch(scope, name);
+        }
         if (test instanceof ShadowRoot) {
             test = test.host;
             continue;
@@ -19,6 +20,16 @@ export function getIsh(scope, name) {
             test = newTest;
             continue;
         }
+        const lastTest = test;
         test = test.getRootNode();
+        if (test === lastTest) {
+            return await watch(scope, name);
+        }
+        ;
     }
 }
+async function watch(scope, name) {
+    const { waitForEvent } = await import('../waitForEvent.js');
+    await waitForEvent(document, guid);
+    return await getIsh(scope, name);
+}

package/refid/getIsh.ts

@@ -1,16 +1,18 @@
-import {sym} from './regIsh.js';
+import {sym, guid} from './regIsh.js';
 import {IshCtr} from '../ts-refs/mount-observer/types.js';
-export function getIsh(scope: Element | ShadowRoot | Document, name: string){
+export async function getIsh(scope: Element | ShadowRoot | Document | Node, name: string): Promise<IshCtr>{
     let test = scope as any;
     
     while(true){
         const map = test[sym] as Map<string, IshCtr>;
         if(map !== undefined){
             if(map.has(name)){
-                return map.get(name);
+                return map.get(name)!;
             }
         }
-        if(test === document) throw 404;
+        if(test === document){
+            return await watch(scope, name);
+        }
         if(test instanceof ShadowRoot){
             test = test.host;
             continue;
@@ -20,6 +22,16 @@ export function getIsh(scope: Element | ShadowRoot | Document, name: string){
             test = newTest;
             continue;
         }
+        const lastTest = test;
         test = test.getRootNode();
+        if(test === lastTest) {
+            return await watch(scope, name);
+        };
     }
+}
+
+async function watch(scope: Element | ShadowRoot | Document | Node, name: string){
+    const {waitForEvent} = await import('../waitForEvent.js');
+    await waitForEvent(document, guid);
+    return await getIsh(scope, name);
 }

package/refid/regIsh.js

@@ -1,4 +1,5 @@
-export const sym = Symbol.for('La8Cx9vHsUOd03WomqdnPw');
+export const guid = 'La8Cx9vHsUOd03WomqdnPw';
+export const sym = Symbol.for(guid);
 export function regIsh(scope, name, ctr) {
     let map = scope[sym];
     if (map === undefined) {
@@ -9,4 +10,5 @@ export function regIsh(scope, name, ctr) {
         throw 403;
     }
     map.set(name, ctr);
+    document.dispatchEvent(new Event(guid));
 }

package/refid/regIsh.ts

@@ -1,5 +1,6 @@
 import {IshCtr} from '../ts-refs/mount-observer/types';
-export const sym = Symbol.for('La8Cx9vHsUOd03WomqdnPw');
+export const guid = 'La8Cx9vHsUOd03WomqdnPw'
+export const sym = Symbol.for(guid);
 
 export function regIsh(scope: Element | ShadowRoot | Document, name: string, ctr:IshCtr){
     let map = (<any>scope)[sym] as Map<string, IshCtr>;
@@ -11,4 +12,5 @@ export function regIsh(scope: Element | ShadowRoot | Document, name: string, ctr
         throw 403;
     }
     map.set(name, ctr);
+    document.dispatchEvent(new Event(guid));
 }

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

@@ -57,7 +57,7 @@ export type DerivationCriteria<TProps, TMethods> = {
     //TODO - applicable to arrays
     filter?: keyof TModhods & string | ((val: any) => boolean),
     //TODO
-    map?: keyof TModhods & string | ((val: any) => any,
+    //map?: keyof TModhods & string | ((val: any) => any,
 };
 
 export interface TransformOptions{