mount-observer 0.0.52 → 0.0.54

package/MountObserver.js

@@ -1,7 +1,7 @@
 import { RootMutObs } from './RootMutObs.js';
 import { bindish, bindishIt } from './bindish.js';
 export const guid = '5Pv6bHOVH0ae07opRZ8N/g';
-const mutationObserverLookup = new WeakMap();
+export const mutationObserverLookup = new WeakMap();
 const refCount = new WeakMap();
 export class MountObserver extends EventTarget {
     #mountInit;
@@ -419,17 +419,52 @@ export class MountObserver extends EventTarget {
                 await this.#compose(elToMount, 0);
             }
         }
-        await bindishIt(els, assigner);
+        await bindishIt(els, { assigner });
         this.#mount(elsToMount, initializing);
     }
     async #inspectWithin(within, initializing) {
-        await bindish(within, this.#mountInit.assigner);
+        await bindish(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);
     }
 }
+export function waitForIdleNodes(nodes) {
+    return new Promise((resolve) => {
+        const mutObservers = [];
+        for (const node of nodes) {
+            const mutObs = mutationObserverLookup.get(node);
+            if (mutObs !== undefined) {
+                mutObservers.push(mutObs);
+            }
+            else {
+                const currentCount = refCount.get(node) || 0;
+                const newMutObs = new RootMutObs(node);
+                mutationObserverLookup.set(node, newMutObs);
+                refCount.set(node, currentCount + 1);
+                mutObservers.push(newMutObs);
+            }
+        }
+        if (areAllIdle(mutObservers)) {
+            resolve();
+        }
+        for (const obs of mutObservers) {
+            obs.addEventListener('is-idle', () => {
+                if (areAllIdle(mutObservers)) {
+                    resolve();
+                }
+            });
+        }
+    });
+}
+function areAllIdle(mutObs) {
+    for (const mo of mutObs) {
+        if (!mo.isIdle)
+            return false;
+    }
+    return true;
+}
 const refCountErr = 'mount-observer ref count mismatch';
 export const inclTemplQry = 'template[src^="#"]:not([hidden])';
 // https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080

package/MountObserver.ts

@@ -11,7 +11,7 @@ import {bindish, bindishIt} from './bindish.js';
 export {MOSE} from './ts-refs/mount-observer/types';
 export const guid = '5Pv6bHOVH0ae07opRZ8N/g';
 
-const mutationObserverLookup = new WeakMap<Node, RootMutObs>();
+export const mutationObserverLookup = new WeakMap<Node, RootMutObs>();
 const refCount = new WeakMap<Node, number>();
 export class MountObserver extends EventTarget implements IMountObserver{
     
@@ -437,12 +437,12 @@ export class MountObserver extends EventTarget implements IMountObserver{
             }
             
         }
-        await bindishIt(els, assigner);
+        await bindishIt(els, {assigner});
         this.#mount(elsToMount, initializing);
     }
 
     async #inspectWithin(within: Node, initializing: boolean){
-        await bindish(within as DocumentFragment, this.#mountInit.assigner);
+        await bindish(within as DocumentFragment, {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));
@@ -451,6 +451,40 @@ export class MountObserver extends EventTarget implements IMountObserver{
 
 }
 
+export function waitForIdleNodes(nodes: Array<Node>): Promise<void>{
+    return new Promise((resolve) => {
+        const mutObservers: Array<RootMutObs> = [];
+        for(const node of nodes){
+            const mutObs = mutationObserverLookup.get(node);
+            if(mutObs !== undefined){
+                mutObservers.push(mutObs);
+            }else{
+                const currentCount = refCount.get(node) || 0;
+                const newMutObs = new RootMutObs(node);
+                mutationObserverLookup.set(node, newMutObs);
+                refCount.set(node, currentCount + 1);
+                mutObservers.push(newMutObs);
+            }
+        }
+        if(areAllIdle(mutObservers)){
+            resolve();
+        }
+        for(const obs of mutObservers){
+            obs.addEventListener('is-idle', () => {
+                if(areAllIdle(mutObservers)){
+                    resolve();
+                }
+            });
+        }
+    });
+}
+
+function areAllIdle(mutObs: Array<RootMutObs>){
+    for(const mo of mutObs){
+        if(!mo.isIdle) return false;
+    }
+    return true;
+}   
 
 
 const refCountErr = 'mount-observer ref count mismatch';

package/Newish.js

@@ -1,74 +1,87 @@
 export { waitForEvent } from './waitForEvent.js';
+import { ObsAttr } from './ObsAttr.js';
+export const attached = Symbol.for('xyyspnstnU+CDrNVa0VnxA');
 export class Newish {
     queue = [];
     isResolved = false;
     #ce;
-    #assigner = undefined;
-    constructor(enhancedElement, itemscope, assigner) {
-        this.#assigner = assigner;
+    #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(Object.hasOwn(enhancedElement, 'host')) return;
+        if (enhancedElement[attached] === true)
+            return;
+        enhancedElement[attached] = true;
         await customElements.whenDefined(itemscope);
         const initPropVals = enhancedElement['ish'];
-        //check to make sure it didn't already get attached while waiting
-        if (initPropVals === undefined || customElements.getName(initPropVals.constructor) !== itemscope) {
-            if (enhancedElement instanceof HTMLElement) {
-                if (enhancedElement.dataset.ish) {
-                    const parsedHostProps = JSON.parse(enhancedElement.dataset.ish);
-                    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);
+        if (enhancedElement instanceof HTMLElement) {
+            if (enhancedElement.dataset.ish) {
+                const parsedHostProps = JSON.parse(enhancedElement.dataset.ish);
+                this.queue.push(parsedHostProps);
             }
-            this.#ce = ce;
-            const self = this;
-            Object.defineProperty(enhancedElement, 'ish', {
-                get() {
-                    return self.#ce;
-                },
-                set(nv) {
-                    self.queue.push(nv);
-                    self.#assignGingerly();
-                },
-                enumerable: true,
-                configurable: true,
-            });
-            this.#assignGingerly();
         }
+        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.#ce = ce;
+        const self = this;
+        Object.defineProperty(enhancedElement, 'ish', {
+            get() {
+                return self.#ce;
+            },
+            set(nv) {
+                self.queue.push(nv);
+                self.#assignGingerly();
+            },
+            enumerable: true,
+            configurable: true,
+        });
+        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 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;
         if (ce === undefined) {
             throw 500;
         }
-        //const {assignGingerly} = await import('../lib/assignGingerly.js');
         while (this.queue.length > 0) {
             const fi = this.queue.shift();
             //TODO: Provide support for a virtual slice of a very large list
@@ -76,12 +89,8 @@ export class Newish {
                 ce.$ = fi;
             }
             else {
-                if (this.#assigner !== undefined) {
-                    await this.#assigner(ce, fi);
-                }
-                else {
-                    Object.assign(ce, fi);
-                }
+                const { assigner } = this.#options;
+                await assigner(ce, fi);
             }
         }
     }

package/Newish.ts

@@ -1,70 +1,87 @@
-import { Assigner } from './ts-refs/mount-observer/types.js';
+import { Assigner, BindishOptions } from './ts-refs/mount-observer/types.js';
 
 export {waitForEvent} from './waitForEvent.js';
-export class Newish{
+import {ObsAttr} from './ObsAttr.js';
+export const attached = Symbol.for('xyyspnstnU+CDrNVa0VnxA');
+export class Newish implements EventListenerObject {
     queue: Array<any> = [];
     isResolved = false;
     #ce: HTMLElement | undefined;
+    #ref: WeakRef<Element>;
 
-    #assigner: undefined | Assigner = undefined;
+    //#assigner: undefined | Assigner = undefined;
+    #options: BindishOptions;
 
-    constructor(enhancedElement: Element, itemscope: string, assigner?: Assigner){
-        this.#assigner = assigner;
+    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(Object.hasOwn(enhancedElement, 'host')) return;
+        if((<any>enhancedElement)[attached] === true) return;
+        (<any>enhancedElement)[attached] = true;
         await customElements.whenDefined(itemscope);
         const initPropVals = (<any>enhancedElement)['ish'];
-        //check to make sure it didn't already get attached while waiting
-        if(initPropVals === undefined ||  customElements.getName(initPropVals.constructor) !== itemscope){
-            if(enhancedElement instanceof HTMLElement){
-                if(enhancedElement.dataset.ish){
-                    const parsedHostProps = JSON.parse(enhancedElement.dataset.ish);
-                    this.queue.push(parsedHostProps);
-                }
+        if(enhancedElement instanceof HTMLElement){
+            if(enhancedElement.dataset.ish){
+                const parsedHostProps = JSON.parse(enhancedElement.dataset.ish);
+                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.#ce = ce;
-            const self = this;
-            Object.defineProperty(enhancedElement, 'ish', {
-                get(){
-                    return self.#ce;
-                },
-                set(nv: any){
-                    self.queue.push(nv);
-                    self.#assignGingerly();
-                },
-                enumerable: true,
-                configurable: true,
-            });
-            this.#assignGingerly();
         }
+        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.#ce = ce;
+        const self = this;
+        Object.defineProperty(enhancedElement, 'ish', {
+            get(){
+                return self.#ce;
+            },
+            set(nv: any){
+                self.queue.push(nv);
+                self.#assignGingerly();
+            },
+            enumerable: true,
+            configurable: true,
+        });
+        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 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(){
@@ -72,18 +89,15 @@ export class Newish{
         if(ce === undefined){
             throw 500;
         }
-        //const {assignGingerly} = await import('../lib/assignGingerly.js');
         while(this.queue.length > 0 ){
             const fi = this.queue.shift();
             //TODO: Provide support for a virtual slice of a very large list
             if(Array.isArray(fi)){
                 (<any>ce).$ = fi;
             }else{
-                if(this.#assigner !== undefined){
-                    await this.#assigner(ce, fi);
-                }else{
-                    Object.assign(ce, fi);
-                }
+                const {assigner} = this.#options;
+                await assigner!(ce, fi);
+
             }
             
         }

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/RootMutObs.js

@@ -1,8 +1,11 @@
 export class RootMutObs extends EventTarget {
+    #idleTimeout = 20; //TODO: make this configurable
+    #idlePointer = 0;
     constructor(rootNode) {
         super();
         this.#mutationObserver = new MutationObserver(mutationRecords => {
             this.dispatchEvent(new MutationEvent(mutationRecords));
+            this.#triggerIsIdle();
         });
         this.#mutationObserver.observe(rootNode, {
             subtree: true,
@@ -10,6 +13,19 @@ export class RootMutObs extends EventTarget {
             attributes: true,
             attributeOldValue: true,
         });
+        this.#triggerIsIdle();
+    }
+    #isIdle = false;
+    get isIdle() {
+        return this.#isIdle;
+    }
+    #triggerIsIdle() {
+        this.#isIdle = false;
+        clearTimeout(this.#idlePointer);
+        this.#idlePointer = setTimeout(() => {
+            this.#isIdle = true;
+            this.dispatchEvent(new Event('is-idle'));
+        }, this.#idleTimeout);
     }
     #mutationObserver;
     disconnect() {

package/RootMutObs.ts

@@ -1,17 +1,34 @@
 import {mutationEventName, AddMutationEventListener} from './ts-refs/mount-observer/types';
 
 export class RootMutObs extends EventTarget{
+    #idleTimeout = 20; //TODO: make this configurable
+    #idlePointer = 0;
     constructor(rootNode: Node ){
         super();
+        
         this.#mutationObserver = new MutationObserver(mutationRecords => {
-            this.dispatchEvent(new MutationEvent(mutationRecords))
-        })
+            this.dispatchEvent(new MutationEvent(mutationRecords));
+            this.#triggerIsIdle();
+        });
         this.#mutationObserver.observe(rootNode, {
             subtree: true,
             childList: true,
             attributes: true,
             attributeOldValue: true,
         });
+        this.#triggerIsIdle();
+    }
+    #isIdle = false;
+    get isIdle(){
+        return this.#isIdle;
+    }
+    #triggerIsIdle(){
+        this.#isIdle = false;
+        clearTimeout(this.#idlePointer);
+        this.#idlePointer = setTimeout(()=>{
+            this.#isIdle = true;
+            this.dispatchEvent(new Event('is-idle'));
+        }, this.#idleTimeout)
     }
     #mutationObserver: MutationObserver;
     disconnect(){
@@ -38,3 +55,4 @@ export class MutationEvent extends Event implements MutationEvent {
 
 
 
+

package/bindish.js

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

package/bindish.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.52",
+  "version": "0.0.54",
   "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"

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/mount-observer/types.d.ts

@@ -1,4 +1,3 @@
-//import { MountObserver } from "./MountObserver";
 
 export interface JSONSerializableMountInit{
     readonly on?: CSSMatch,
@@ -208,6 +207,11 @@ export interface MOSE<TSynConfig=any>
 
 }
 
+export interface BindishOptions{
+    assigner?: Assigner,
+    waitFor?: string,
+}
+
 //#endregion
 
 

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

@@ -11,6 +11,8 @@ export interface AllProps extends EndUserProps{
     listProp: string;
     itemProp: string;
     ish: EventTarget & HasIshList;
+    itemTemplate: HTMLTemplateElement;
+    emc: any;
     //updateCnt: number;
 }
 

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;