mount-observer 0.0.57 → 0.0.59

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 = [];
@@ -24,7 +25,7 @@ export class Newish {
         if (enhancedElement[attached] === true)
             return;
         enhancedElement[attached] = true;
-        await customElements.whenDefined(itemscope);
+        const ctr = getIsh(enhancedElement, 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);
+        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.#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> = [];
@@ -27,7 +28,8 @@ export class Newish implements EventListenerObject {
     async #do(enhancedElement: Element, itemscope: string){
         if((<any>enhancedElement)[attached] === true) return;
         (<any>enhancedElement)[attached] = true;
-        await customElements.whenDefined(itemscope);
+        const ctr = getIsh(enhancedElement, itemscope)! as any;
+
         const initPropVals = (<any>enhancedElement)['ish'];
         if(enhancedElement instanceof HTMLElement){
             if(enhancedElement.dataset.ish){
@@ -35,11 +37,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 +55,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 +79,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 +88,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/RootMutObs.js

@@ -4,7 +4,6 @@ export class RootMutObs extends EventTarget {
     constructor(rootNode, options) {
         super();
         this.#idleTimeout = options?.idleTimeout ?? 30;
-        console.log(this.#idleTimeout);
         this.#mutationObserver = new MutationObserver(mutationRecords => {
             this.dispatchEvent(new MutationEvent(mutationRecords));
             this.#triggerIsIdle();

package/RootMutObs.ts

@@ -6,7 +6,6 @@ export class RootMutObs extends EventTarget{
     constructor(rootNode: Node, options: MountInit ){
         super();
         this.#idleTimeout = options?.idleTimeout ?? 30;
-        console.log(this.#idleTimeout);
         this.#mutationObserver = new MutationObserver(mutationRecords => {
             this.dispatchEvent(new MutationEvent(mutationRecords));
             this.#triggerIsIdle();

package/bindish.js

@@ -1,4 +1,4 @@
-export const itemscopeQry = '[itemscope*="-"]';
+export const itemscopeQry = '[itemscope]:not([itemscope=""])';
 export async function bindish(fragment, options) {
     const scopes = Array.from(fragment.querySelectorAll(`${itemscopeQry}`));
     await bindishIt(scopes, options);
@@ -6,7 +6,7 @@ export async function bindish(fragment, options) {
 export async function bindishIt(scopes, 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);
         }

package/bindish.ts

@@ -1,6 +1,6 @@
 import { Assigner, BindishOptions } from './ts-refs/mount-observer/types.js';
 
-export const itemscopeQry = '[itemscope*="-"]';
+export const itemscopeQry = '[itemscope]:not([itemscope=""])';
 export async function bindish(fragment: DocumentFragment, options?: BindishOptions){
     const scopes = Array.from(fragment.querySelectorAll(`${itemscopeQry}`));
     await bindishIt(scopes, options);
@@ -9,7 +9,7 @@ export async function bindish(fragment: DocumentFragment, options?: BindishOptio
 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)){
+        if(itemscope && !((<any>scope).ish instanceof HTMLElement)){
             const {Newish} = await import('./Newish.js');
             new Newish(scope, itemscope, options);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.57",
+  "version": "0.0.59",
   "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,24 @@
+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;
+        }
+        test = test.getRootNode();
+    }
+}

package/refid/getIsh.ts

@@ -0,0 +1,25 @@
+import {sym} from './regIsh.js';
+import {IshCtr} from '../ts-refs/mount-observer/types.js';
+export function getIsh(scope: Element | ShadowRoot | Document, 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;
+        }
+        test = test.getRootNode();
+    }
+}

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,
     /**