mount-observer 0.0.58 → 0.0.60

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

@@ -1,6 +1,7 @@
 export { waitForEvent } from './waitForEvent.js';
 import { ObsAttr } from './ObsAttr.js';
 import { splitRefs } from './refid/splitRefs.js';
+import { getIsh } from './refid/getIsh.js';
 export const attached = Symbol.for('xyyspnstnU+CDrNVa0VnxA');
 export class Newish {
     queue = [];
@@ -9,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();
@@ -20,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;
-        await customElements.whenDefined(itemscope);
+        const ctr = getIsh(enhancedElement.isConnected ? enhancedElement : target, itemscope);
         const initPropVals = enhancedElement['ish'];
         if (enhancedElement instanceof HTMLElement) {
             if (enhancedElement.dataset.ish) {
@@ -32,11 +33,13 @@ export class Newish {
                 this.queue.push(parsedHostProps);
             }
         }
-        if (initPropVals !== undefined)
+        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);
-        const ce = document.createElement(itemscope);
-        if ('attachedCallback' in ce && typeof ce.attachedCallback === 'function') {
-            await ce.attachedCallback(enhancedElement, this.#options);
+        if ('<mount>' in ce && typeof ce['<mount>'] === 'function') {
+            await ce['<mount>'](ce, enhancedElement, this.#options);
         }
         this.#ce = ce;
         const self = this;
@@ -45,6 +48,9 @@ export class Newish {
                 return self.#ce;
             },
             set(nv) {
+                if (self.#ce === nv)
+                    return;
+                console.log({ nv });
                 self.queue.push(nv);
                 self.#assignGingerly();
             },
@@ -63,7 +69,7 @@ export class Newish {
     #attachItemrefs(enhancedElement) {
         //TODO:  watch for already attached itemrefs to be removed and remove them from the set
         // and call outOfScopeCallback on them
-        if ('inScopeCallback' in this.#ce && enhancedElement.hasAttribute('itemref')) {
+        if ('<inScope>' in this.#ce && enhancedElement.hasAttribute('itemref')) {
             const itemref = enhancedElement.getAttribute('itemref');
             const itemrefList = splitRefs(itemref); // itemref.split(' ').map((id) => id.trim()).filter((id) => id.length > 0);
             if (itemrefList.length === 0)
@@ -74,7 +80,7 @@ export class Newish {
                     continue;
                 const itemrefElement = rn.getElementById(id);
                 if (itemrefElement) {
-                    this.#ce.inScopeCallback(itemrefElement, this.#options);
+                    this.#ce['<inScope>'](this.#ce, itemrefElement, this.#options);
                     this.#alreadyAttached.add(id);
                 }
             }

package/Newish.ts

@@ -3,6 +3,7 @@ import { Assigner, BindishOptions } 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';
 export const attached = Symbol.for('xyyspnstnU+CDrNVa0VnxA');
 export class Newish implements EventListenerObject {
     queue: Array<any> = [];
@@ -13,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();
@@ -24,10 +27,15 @@ 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;
-        await customElements.whenDefined(itemscope);
+        const ctr = getIsh(enhancedElement.isConnected ? enhancedElement :target, itemscope)! as any;
+
         const initPropVals = (<any>enhancedElement)['ish'];
         if(enhancedElement instanceof HTMLElement){
             if(enhancedElement.dataset.ish){
@@ -35,11 +43,17 @@ export class Newish implements EventListenerObject {
                 this.queue.push(parsedHostProps);
             }
         }
-        if(initPropVals !== undefined) this.queue.push(initPropVals);
-        const ce = document.createElement(itemscope);
-        if('attachedCallback' in ce && typeof ce.attachedCallback === 'function'){
-            await ce.attachedCallback(enhancedElement, this.#options)
+        
+        
+        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)
         }
+        
         this.#ce = ce;
         const self = this;
         Object.defineProperty(enhancedElement, 'ish', {
@@ -47,6 +61,8 @@ export class Newish implements EventListenerObject {
                 return self.#ce;
             },
             set(nv: any){
+                if(self.#ce === nv) return;
+                console.log({nv});
                 self.queue.push(nv);
                 self.#assignGingerly();
             },
@@ -69,7 +85,7 @@ export class Newish implements EventListenerObject {
     #attachItemrefs(enhancedElement: Element){
         //TODO:  watch for already attached itemrefs to be removed and remove them from the set
         // and call outOfScopeCallback on them
-        if('inScopeCallback' in (<any>this.#ce) && enhancedElement.hasAttribute('itemref')){
+        if('<inScope>' in (<any>this.#ce) && enhancedElement.hasAttribute('itemref')){
             const itemref = enhancedElement.getAttribute('itemref')!;
             const itemrefList = splitRefs(itemref);// itemref.split(' ').map((id) => id.trim()).filter((id) => id.length > 0);
             if(itemrefList.length === 0) return;
@@ -78,7 +94,7 @@ export class Newish implements EventListenerObject {
                 if(this.#alreadyAttached.has(id)) continue;
                 const itemrefElement = rn.getElementById(id);
                 if(itemrefElement){
-                    (<any>this.#ce).inScopeCallback(itemrefElement, this.#options);
+                    (<any>this.#ce)['<inScope>'](this.#ce, itemrefElement, this.#options);
                     this.#alreadyAttached.add(id);
                 }
             }

package/bindish.js

@@ -1,14 +1,14 @@
-export const itemscopeQry = '[itemscope*="-"]';
-export async function bindish(fragment, options) {
+export const itemscopeQry = '[itemscope]:not([itemscope=""])';
+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 && itemscope.includes('-') && !(scope.ish instanceof HTMLElement)) {
+        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*="-"]';
-export async function bindish(fragment: DocumentFragment, options?: BindishOptions){
+export const itemscopeQry = '[itemscope]:not([itemscope=""])';
+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 && itemscope.includes('-') && !((<any>scope).ish instanceof HTMLElement)){
+        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.58",
+  "version": "0.0.60",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
@@ -45,6 +45,10 @@
       "default": "./waitForIsh.js",
       "types": "./waitForIsh.ts"
     },
+    "./refid/regIsh.js": {
+      "default": "./refid/regIsh.js",
+      "types": "./refid/regIsh.js"
+    },
     "./refid/splitRefs.js": {
       "default": "./refid/splitRefs.js",
       "types": "./refid/splitRefs.ts"

package/refid/getIsh.js

@@ -0,0 +1,27 @@
+import { sym } from './regIsh.js';
+export function getIsh(scope, name) {
+    let test = scope;
+    while (true) {
+        const map = test[sym];
+        if (map !== undefined) {
+            if (map.has(name)) {
+                return map.get(name);
+            }
+        }
+        if (test === document)
+            throw 404;
+        if (test instanceof ShadowRoot) {
+            test = test.host;
+            continue;
+        }
+        let newTest = test.parentElement;
+        if (newTest) {
+            test = newTest;
+            continue;
+        }
+        const lastTest = test;
+        test = test.getRootNode();
+        if (test === lastTest)
+            throw 404;
+    }
+}

package/refid/getIsh.ts

@@ -0,0 +1,27 @@
+import {sym} from './regIsh.js';
+import {IshCtr} from '../ts-refs/mount-observer/types.js';
+export function getIsh(scope: Element | ShadowRoot | Document | Node, name: string){
+    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);
+            }
+        }
+        if(test === document) throw 404;
+        if(test instanceof ShadowRoot){
+            test = test.host;
+            continue;
+        }
+        let newTest = test.parentElement;
+        if(newTest){
+            test = newTest;
+            continue;
+        }
+        const lastTest = test;
+        test = test.getRootNode();
+        if(test === lastTest) throw 404;
+    }
+}

package/refid/regIsh.js

@@ -0,0 +1,12 @@
+export const sym = Symbol.for('La8Cx9vHsUOd03WomqdnPw');
+export function regIsh(scope, name, ctr) {
+    let map = scope[sym];
+    if (map === undefined) {
+        map = new Map();
+        scope[sym] = map;
+    }
+    if (map.has(name)) {
+        throw 403;
+    }
+    map.set(name, ctr);
+}

package/refid/regIsh.ts

@@ -0,0 +1,14 @@
+import {IshCtr} from '../ts-refs/mount-observer/types';
+export const sym = Symbol.for('La8Cx9vHsUOd03WomqdnPw');
+
+export function regIsh(scope: Element | ShadowRoot | Document, name: string, ctr:IshCtr){
+    let map = (<any>scope)[sym] as Map<string, IshCtr>;
+    if(map === undefined){
+        map = new Map<string, IshCtr>();
+        (<any>scope)[sym] = map;
+    }
+    if(map.has(name)){
+        throw 403;
+    }
+    map.set(name, ctr);
+}

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

@@ -218,6 +218,15 @@ export interface BindishOptions{
     csr?: boolean,
 }
 
+export interface Ishcycle{
+    '<mount>'?(self: Ishcycle, el: Element, options: BindishOptions): Promise<void>;
+    //'</dismount>'?(self: IshFace, el: Element): Promise<void>;
+    '<inScope>'?(self: Ishcycle, el: Element, options: BindishOptions): Promise<void>;
+    //'</outOfScope>'?(self: IshFace, el: Element): Promise<void>;
+}
+
+export type IshCtr = ({new() : Ishcycle}) | (() => Promise<{new() : Ishcycle}>);
+
 //#endregion
 
 

package/ts-refs/per-each/types.d.ts

@@ -2,10 +2,11 @@ import {IEnhancement, BEAllProps} from '../trans-render/be/types';
 import { HasIshList } from '../trans-render/dss/types';
 
 export interface EndUserProps extends IEnhancement{
-    statement: string;
+    each: string;
     mapIdxTo: string;
     idxStart: number;
     idleTimeout: number;
+    options: Partial<EndUserProps>;
 }
 
 export interface AllProps extends EndUserProps{

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

@@ -257,6 +257,8 @@ export interface LogicOp<Props = any>{
 
     delay?: number,
 
+    do?: (x: Props) => (Promise<Partial<Props>> | Partial<Props>)
+
 }
 
 export interface SetLogicOps<Props = any>{
@@ -278,6 +280,8 @@ export interface SetLogicOps<Props = any>{
     debug?: boolean,
 
     delay?: number,
+
+    do?: (x: Props) => (Promise<Partial<Props>> | Partial<Props>),
 }
 
 export interface Action<MCProps = any, MCActions = MCProps> extends LogicOp<MCProps>{

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

@@ -53,7 +53,11 @@ export type DerivationCriteria<TProps, TMethods> = {
     path: string,
     from?: number,
     //TODO
-    as?: ConvertOptions 
+    as?: ConvertOptions,
+    //TODO - applicable to arrays
+    filter?: keyof TModhods & string | ((val: any) => boolean),
+    //TODO
+    //map?: keyof TModhods & string | ((val: any) => any,
 };
 
 export interface TransformOptions{
@@ -144,6 +148,15 @@ export interface ConditionGate<TProps, TMethods, TElement = {}>{
 
 }
 
+export interface ScopingConfig<TProps=any, TMethods = TProps> {
+    name: string;
+    config?: IshConfig<TProps, TMethods>;
+}
+
+export type ScopeInstructions<TProps=any, TMethods=TProps> = 
+    | ScopingConfig
+;
+
 export type WhereConditions = 
     | string //css matches
     | {
@@ -183,6 +196,12 @@ export interface ForEach<TProps, TMethods, TElement = {}>{
     outOfRangeProp?: string,
 }
 
+// export interface MapInstructions<TProps, TMethods, TElement = {}>{
+//     // itemCss: CSSQuery,
+//     // each: string | [string, IshConfig<TProps, TMethods, TElement>],
+//     // in: string | [string, IshConfig<TProps, TMethods, TElement>],
+// }
+
 export interface ForEachInterface{
     init(): Promise<void>;
     update(model: any[]): Promise<void>;
@@ -224,7 +243,7 @@ export interface UnitOfWork<TProps, TMethods = TProps, TElement = {}>{
 
     forEachBinding?: ForEach<any, any, any>
     /**
-     * for each
+     * for each -- deprecated?
      */
     f?: ForEach<any, any, any>,
 
@@ -244,6 +263,7 @@ export interface UnitOfWork<TProps, TMethods = TProps, TElement = {}>{
      */
     invoke?: string,
 
+
     /**
      * modify the model in a (mostly) declarative  way
      */
@@ -303,7 +323,9 @@ export interface UnitOfWork<TProps, TMethods = TProps, TElement = {}>{
      */
     w?: WhereConditions,
 
-    y?: number | YieldSettings<TProps>
+    y?: number | YieldSettings<TProps>,
+
+    $?:  ScopeInstructions<TProps, TMethods>,
 }
 
 export interface YieldSettings<TProps>{
@@ -455,7 +477,7 @@ export interface TransRenderMethods{
     skipInit: boolean,
 }
 
-import {OConfig} from './froop/types';
+import {IshConfig, OConfig} from './froop/types';
 export interface MntCfg<TProps = any, TActions = TProps, ETProps = TProps> extends OConfig<TProps, TActions, ETProps>{
     mainTemplate: string | HTMLTemplateElement,
     /**