mount-observer 0.0.63 → 0.0.65

package/Newish.js

@@ -2,45 +2,51 @@ export { waitForEvent } from './waitForEvent.js';
 import { ObsAttr } from './ObsAttr.js';
 import { splitRefs } from './refid/splitRefs.js';
 import { getIsh } from './refid/getIsh.js';
-import { sym } from './refid/regIsh.js';
+import { arr } from './refid/secretKeys.js';
 export const attached = Symbol.for('xyyspnstnU+CDrNVa0VnxA');
 export class Newish {
     queue = [];
     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;
-        const ctr = 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 options = this.#options;
+        const { initPropVals, ctr } = options;
+        let ce;
+        if (ctr === undefined) {
+            const foundCtr = await getIsh(enhancedElement.isConnected ? enhancedElement : target, itemscope);
+            const initPropVals = enhancedElement['ish'];
+            const resolvedConstructor = foundCtr.constructor.name === 'AsyncFunction' ? await foundCtr() : foundCtr;
+            const isInstance = initPropVals instanceof resolvedConstructor;
+            ce = isInstance ? initPropVals : new resolvedConstructor();
+            if (initPropVals !== undefined && !isInstance)
+                this.queue.push(initPropVals);
         }
-        const resolvedConstructor = ctr.constructor.name === 'AsyncFunction' ? await ctr() : ctr;
-        const isInstance = initPropVals instanceof resolvedConstructor;
-        const ce = isInstance ? initPropVals : new resolvedConstructor();
-        if (initPropVals !== undefined && !isInstance)
-            this.queue.push(initPropVals);
-        if ('<mount>' in ce && typeof ce['<mount>'] === 'function') {
-            await ce['<mount>'](ce, enhancedElement, this.#options);
+        else {
+            ce = new ctr();
+            if (initPropVals !== undefined)
+                this.queue.push(initPropVals);
+        }
+        if ('tbd' in ce && typeof ce['tbd'] === 'function') {
+            await ce['tbd'](ce, enhancedElement, this.#options);
         }
         this.#ce = ce;
         const self = this;
@@ -57,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) {
@@ -94,12 +104,20 @@ 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)) {
-                ce[sym] = fi;
+                foundArray = true;
+                let filtered = fi;
+                if (hasArrFilter) {
+                    filtered = await (ce['arr=>'])(ce, fi, ref, this.#options);
+                }
+                ce[arr] = filtered;
                 actions.add('ishListAssigned');
             }
             else {
@@ -108,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,60 +1,60 @@
-import { Assigner, BindishOptions } 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';
 import {splitRefs} from './refid/splitRefs.js';
 import {getIsh} from './refid/getIsh.js';
-import {sym} from './refid/regIsh.js';
+import {arr} from './refid/secretKeys.js';
 export const attached = Symbol.for('xyyspnstnU+CDrNVa0VnxA');
 export class Newish implements EventListenerObject {
     queue: Array<any> = [];
     isResolved = false;
-    #ce: HTMLElement | undefined;
+    #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 ctr = 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 options = this.#options;
+        const {initPropVals, ctr} = options;
+        let ce: Ishcycle;
+        if(ctr === undefined){
+            const foundCtr = await getIsh(enhancedElement.isConnected ? enhancedElement :target, itemscope)! as any;
+
+            const initPropVals =  (<any>enhancedElement)['ish'];
+
+            const resolvedConstructor = foundCtr.constructor.name === 'AsyncFunction' ? await foundCtr() : foundCtr;
+            const isInstance = initPropVals instanceof resolvedConstructor
+            ce = isInstance ? initPropVals : new resolvedConstructor() as Ishcycle;
+            if(initPropVals !== undefined && !isInstance) this.queue.push(initPropVals);
+        }else{
+            ce = new ctr();
+            if(initPropVals !== undefined) this.queue.push(initPropVals);
         }
-        
-        
-        const resolvedConstructor = ctr.constructor.name === 'AsyncFunction' ? await ctr() : ctr;
-        const isInstance = initPropVals instanceof resolvedConstructor
-        const ce = isInstance ? initPropVals : new resolvedConstructor();
-        if(initPropVals !== undefined && !isInstance) 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', {
@@ -69,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;
     }
 
     
@@ -110,12 +114,20 @@ 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)){
-                (<any>ce)[sym] = fi;
+                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');
             }else{
                 const {assigner} = this.#options;
@@ -124,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.63",
+  "version": "0.0.65",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",

package/refid/regIsh.js

@@ -1,5 +1,6 @@
 export const guid = 'La8Cx9vHsUOd03WomqdnPw';
 export const sym = Symbol.for(guid);
+import { arr } from './secretKeys.js';
 export function regIsh(scope, name, ctr) {
     let map = scope[sym];
     if (map === undefined) {
@@ -12,7 +13,7 @@ export function regIsh(scope, name, ctr) {
     map.set(name, ctr);
     ctr.prototype[Symbol.iterator] = function () {
         var index = -1;
-        var data = this[sym];
+        var data = this[arr];
         return {
             next: function () {
                 return {

package/refid/regIsh.ts

@@ -1,6 +1,7 @@
 import {IshCtr} from '../ts-refs/mount-observer/types';
 export const guid = 'La8Cx9vHsUOd03WomqdnPw'
 export const sym = Symbol.for(guid);
+import {arr} from './secretKeys.js';
 
 export function regIsh(scope: Element | ShadowRoot | Document, name: string, ctr:IshCtr){
     let map = (<any>scope)[sym] as Map<string, IshCtr>;
@@ -14,7 +15,7 @@ export function regIsh(scope: Element | ShadowRoot | Document, name: string, ctr
     map.set(name, ctr);
     ctr.prototype[Symbol.iterator] = function() {
         var index = -1;
-        var data  = this[sym];
+        var data  = this[arr];
 
         return {
             next: function() {

package/refid/secretKeys.js

@@ -0,0 +1,5 @@
+//using Symbol.for, which is easily hackaable, because if two different entry points 
+//come from different versions of mount-observer, things could get out of sync.
+//Not an issue if this was built into the browser, but it is an issue for a custom a library.
+//Do not make this file exportable, it is only for internal use.
+export const arr = Symbol.for('MHtiI353KU+aKBDlz/jR+A');

package/refid/secretKeys.ts

@@ -0,0 +1,5 @@
+//using Symbol.for, which is easily hackaable, because if two different entry points 
+//come from different versions of mount-observer, things could get out of sync.
+//Not an issue if this was built into the browser, but it is an issue for a custom a library.
+//Do not make this file exportable, it is only for internal use.
+export const arr = Symbol.for('MHtiI353KU+aKBDlz/jR+A');

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

@@ -216,12 +216,20 @@ export interface BindishOptions{
      * to indicate that the initial 
      */
     csr?: boolean,
+    ctr?: {new() : Ishcycle},
+    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>;

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

@@ -190,6 +190,7 @@ export interface IshConfig<TProps = any, TActions = TProps, ETProps = TProps>{
     isSleepless?: boolean;
     xform?: XForm<TProps, TActions>;
     inScopeXForms?: {[key: CSSQuery]: XForm<TProps, TActions>};
+    ishListCountProp?: keyof TProps & string;
 }
 export interface OConfig<TProps = any, TActions = TProps, ETProps = TProps> extends IshConfig<TProps, TActions, ETProps>{
     mainTemplate?: string | HTMLTemplateElement;