mount-observer 0.0.64 → 0.0.66

package/Newish.js

@@ -9,20 +9,22 @@ export class Newish {
     isResolved = false;
     #ce;
     #ref;
-    //#assigner: undefined | Assigner = undefined;
     #options;
+    #args;
     constructor(enhancedElement, target, itemscope, options) {
+        this.#args = [enhancedElement, target, itemscope];
         this.#options = options || { assigner: Object.assign };
         this.#ref = new WeakRef(enhancedElement);
-        this.#do(enhancedElement, target, itemscope);
     }
-    handleEvent(event) {
+    handleEvent() {
         const enhancedElement = this.#ref.deref();
         if (!enhancedElement)
             return;
         this.#attachItemrefs(enhancedElement);
     }
-    async #do(enhancedElement, target, itemscope) {
+    async do() {
+        const [enhancedElement, target, itemscope] = this.#args;
+        this.#args = undefined;
         if (enhancedElement[attached] === true)
             return;
         enhancedElement[attached] = true;
@@ -32,12 +34,6 @@ export class Newish {
         if (ctr === undefined) {
             const foundCtr = await getIsh(enhancedElement.isConnected ? enhancedElement : target, itemscope);
             const initPropVals = enhancedElement['ish'];
-            // if(enhancedElement instanceof HTMLElement){
-            //     if(enhancedElement.dataset.ish){
-            //         const parsedHostProps = JSON.parse(enhancedElement.dataset.ish);
-            //         this.queue.push(parsedHostProps);
-            //     }
-            // }
             const resolvedConstructor = foundCtr.constructor.name === 'AsyncFunction' ? await foundCtr() : foundCtr;
             const isInstance = initPropVals instanceof resolvedConstructor;
             ce = isInstance ? initPropVals : new resolvedConstructor();
@@ -49,8 +45,8 @@ export class Newish {
             if (initPropVals !== undefined)
                 this.queue.push(initPropVals);
         }
-        if ('<mount>' in ce && typeof ce['<mount>'] === 'function') {
-            await ce['<mount>'](ce, enhancedElement, this.#options);
+        if ('tbd' in ce && typeof ce['tbd'] === 'function') {
+            await ce['tbd'](ce, enhancedElement, this.#options);
         }
         this.#ce = ce;
         const self = this;
@@ -67,12 +63,16 @@ export class Newish {
             enumerable: true,
             configurable: true,
         });
-        this.#assignGingerly(true);
+        await this.#assignGingerly(true);
+        if ('<mount>' in ce && typeof ce['<mount>'] === 'function') {
+            await ce['<mount>'](ce, enhancedElement, this.#options);
+        }
         //attach any itemref references
         this.#attachItemrefs(enhancedElement);
         const et = ObsAttr(enhancedElement, 'itemref');
         et.addEventListener('attr-changed', this);
         this.isResolved = true;
+        return ce;
     }
     #alreadyAttached = new Set();
     #attachItemrefs(enhancedElement) {
@@ -104,14 +104,18 @@ export class Newish {
         if (ce === undefined) {
             throw 500;
         }
+        let foundArray = false;
+        const hasArrFilter = 'arr=>' in ce && typeof ce['arr=>'] === 'function';
+        const ref = this.#ref.deref();
         while (this.queue.length > 0) {
             const fi = this.queue.shift();
             //TODO: Provide support for a virtual slice of a very large list
             //TODO:  Maybe should check if iterable rather than an array?
             if (Array.isArray(fi)) {
+                foundArray = true;
                 let filtered = fi;
-                if ('arr=>' in ce && typeof ce['arr=>'] === 'function') {
-                    filtered = await ce['arr=>'](ce, fi, this.#options);
+                if (hasArrFilter) {
+                    filtered = await (ce['arr=>'])(ce, fi, ref, this.#options);
                 }
                 ce[arr] = filtered;
                 actions.add('ishListAssigned');
@@ -122,7 +126,13 @@ export class Newish {
                 actions.add('ishAssigned');
             }
         }
-        const ref = this.#ref.deref();
+        if (fromDo && !foundArray) {
+            const filtered = await (ce['arr=>'])(ce, undefined, ref, this.#options);
+            if (filtered !== undefined) {
+                ce[arr] = filtered;
+                actions.add('ishListAssigned');
+            }
+        }
         if (ref) {
             ref.dispatchEvent(new IshEvent(Array.from(actions)));
         }

package/Newish.ts

@@ -1,4 +1,4 @@
-import { BindishOptions, Ishcycle } from './ts-refs/mount-observer/types.js';
+import { BindishOptions, HasIsh, Ishcycle } from './ts-refs/mount-observer/types.js';
 
 export {waitForEvent} from './waitForEvent.js';
 import {ObsAttr} from './ObsAttr.js';
@@ -12,27 +12,27 @@ export class Newish implements EventListenerObject {
     #ce: Ishcycle | undefined;
     #ref: WeakRef<Element>;
 
-    //#assigner: undefined | Assigner = undefined;
     #options: BindishOptions;
-
-    constructor(enhancedElement: Element,
+    #args: [enhancedElement: Element, target: Node, itemscope: string] | undefined;
+    constructor(
+        enhancedElement: Element,
         target: Node,
-        itemscope: string, options?: BindishOptions){
+        itemscope: string, 
+        options?: BindishOptions
+    ){
+        this.#args = [enhancedElement, target, itemscope];
         this.#options = options || {assigner: Object.assign};
         this.#ref = new WeakRef(enhancedElement);
-        this.#do(enhancedElement, target, itemscope);
     }
-    handleEvent(event: Event): void {
+    handleEvent(): void {
        const enhancedElement = this.#ref.deref();
        if(!enhancedElement) return;
        this.#attachItemrefs(enhancedElement);
     }
 
-    async #do(
-        enhancedElement: Element,
-        target: Node, 
-        itemscope: string
-    ){
+    async do(){
+        const [enhancedElement, target, itemscope] = this.#args!;
+        this.#args = undefined;
         if((<any>enhancedElement)[attached] === true) return;
         (<any>enhancedElement)[attached] = true;
         const options = this.#options;
@@ -42,14 +42,7 @@ export class Newish implements EventListenerObject {
             const foundCtr = await getIsh(enhancedElement.isConnected ? enhancedElement :target, itemscope)! as any;
 
             const initPropVals =  (<any>enhancedElement)['ish'];
-            // if(enhancedElement instanceof HTMLElement){
-            //     if(enhancedElement.dataset.ish){
-            //         const parsedHostProps = JSON.parse(enhancedElement.dataset.ish);
-            //         this.queue.push(parsedHostProps);
-            //     }
-            // }
-            
-            
+
             const resolvedConstructor = foundCtr.constructor.name === 'AsyncFunction' ? await foundCtr() : foundCtr;
             const isInstance = initPropVals instanceof resolvedConstructor
             ce = isInstance ? initPropVals : new resolvedConstructor() as Ishcycle;
@@ -58,13 +51,10 @@ export class Newish implements EventListenerObject {
             ce = new ctr();
             if(initPropVals !== undefined) this.queue.push(initPropVals);
         }
-
-       
-
-        if('<mount>' in ce && typeof ce['<mount>'] === 'function'){
-            await ce['<mount>'](ce, enhancedElement, this.#options)
+        if('tbd' in ce && typeof ce['tbd'] === 'function'){
+            await ce['tbd'](ce, enhancedElement, this.#options);
         }
-        
+
         this.#ce = ce;
         const self = this;
         Object.defineProperty(enhancedElement, 'ish', {
@@ -79,12 +69,16 @@ export class Newish implements EventListenerObject {
             enumerable: true,
             configurable: true,
         });
-        this.#assignGingerly(true);
+        await this.#assignGingerly(true);
+            if('<mount>' in ce && typeof ce['<mount>'] === 'function'){
+            await ce['<mount>'](ce, enhancedElement as HasIsh & Element, this.#options)
+        }
         //attach any itemref references
         this.#attachItemrefs(enhancedElement);
         const et = ObsAttr(enhancedElement, 'itemref');
         et.addEventListener('attr-changed', this);
         this.isResolved = true;
+        return ce;
     }
 
     
@@ -120,14 +114,18 @@ export class Newish implements EventListenerObject {
         if(ce === undefined){
             throw 500;
         }
+        let foundArray = false;
+        const hasArrFilter = 'arr=>' in ce && typeof ce['arr=>'] === 'function';
+        const ref = this.#ref.deref();
         while(this.queue.length > 0 ){
             const fi = this.queue.shift();
             //TODO: Provide support for a virtual slice of a very large list
             //TODO:  Maybe should check if iterable rather than an array?
             if(Array.isArray(fi)){
-                let filtered = fi;
-                if('arr=>' in ce && typeof ce['arr=>'] === 'function'){
-                    filtered = await ce['arr=>'](ce, fi, this.#options);
+                foundArray = true;
+                let filtered = fi as any | undefined;
+                if(hasArrFilter){
+                    filtered = await (ce['arr=>']!)(ce, fi, ref! as HasIsh & Element, this.#options);
                 }
                 (<any>ce)[arr] = filtered;
                 actions.add('ishListAssigned');
@@ -138,7 +136,14 @@ export class Newish implements EventListenerObject {
             }
             
         }
-        const ref = this.#ref.deref();
+        if(fromDo && !foundArray){
+            const filtered = await (ce['arr=>']!)(ce, undefined, ref! as HasIsh &  Element, this.#options);
+            if(filtered !== undefined){
+                (<any>ce)[arr] = filtered;
+                actions.add('ishListAssigned');
+            }
+        }
+        
         if(ref){
             ref.dispatchEvent(new IshEvent(Array.from(actions)));
         }   

package/bindish.js

@@ -8,7 +8,8 @@ export async function bindishIt(scopes, target, options) {
         const itemscope = scope.getAttribute('itemscope');
         if (itemscope && !(scope.ish instanceof HTMLElement)) {
             const { Newish } = await import('./Newish.js');
-            new Newish(scope, target, itemscope, options);
+            const newIsh = new Newish(scope, target, itemscope, options);
+            await newIsh.do();
         }
     }
 }

package/bindish.ts

@@ -15,7 +15,8 @@ export async function bindishIt(scopes: Array<Element>, target: Node, options?:
         const itemscope = scope.getAttribute('itemscope');
         if(itemscope && !((<any>scope).ish instanceof HTMLElement)){
             const {Newish} = await import('./Newish.js');
-            new Newish(scope, target, itemscope, options);
+            const newIsh = new Newish(scope, target, itemscope, options);
+            await newIsh.do()
         }
     }
 }

package/package.json

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

package/refid/regIsh.js

@@ -23,5 +23,11 @@ export function regIsh(scope, name, ctr) {
             }
         };
     };
+    ctr.prototype['#arr='] = function (newArr) {
+        if (newArr === undefined) {
+            return this[arr];
+        }
+        this[arr] = newArr;
+    };
     document.dispatchEvent(new Event(guid));
 }

package/refid/regIsh.ts

@@ -26,5 +26,11 @@ export function regIsh(scope: Element | ShadowRoot | Document, name: string, ctr
             }
         };
     };
+    ctr.prototype['#arr='] = function(newArr?: any[]){
+        if(newArr === undefined){
+            return this[arr];
+        }
+        this[arr] = newArr;
+    }
     document.dispatchEvent(new Event(guid));
 }

package/ts-refs/mount-observer/types.d.ts

@@ -220,10 +220,16 @@ export interface BindishOptions{
     initPropVals?: any,
 }
 
+//TODO:  move to mount observer
+export interface HasIsh {
+    ish: any;
+}
+
 export interface Ishcycle{
-    '<mount>'?(self: Ishcycle, el: Element, options: BindishOptions): Promise<void>;
+    '<mount>'?(self: Ishcycle, el: Element & HasIsh, options: BindishOptions): Promise<void>;
     //'</dismount>'?(self: IshFace, el: Element): Promise<void>;
-    '<inScope>'?(self: Ishcycle, el: Element, options: BindishOptions): Promise<void>;
+    '<inScope>'?(self: Ishcycle, el: Element & HasIsh, options: BindishOptions): Promise<void>;
+    'arr=>'?(self: Ishcycle, arr: any[] | undefined, el: Element & HasIsh, options: BindishOptions): Promise<void | any[]>;
     //'</outOfScope>'?(self: IshFace, el: Element): Promise<void>;
 }
 

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

@@ -184,10 +184,7 @@ export interface PIP<TProp = any, TElement = Element> extends EventListenerObjec
     readonly outEvtName: string;
 }
 
-//TODO:  move to mount observer
-export interface HasIsh {
-    ish: EventTarget;
-}
+
 
 export interface HasIshList {
     ishList: Array<any>;