mount-observer 0.0.46 → 0.0.48

package/MountObserver.js

@@ -57,6 +57,7 @@ export class MountObserver extends EventTarget {
         this.#calculatedSelector = calculatedSelector;
         return this.#calculatedSelector;
     }
+    //This method is called publicly from outside mount-observer -- keep it public
     async composeFragment(fragment, level) {
         const bis = fragment.querySelectorAll(`${inclTemplQry},${itemscopeQry}`);
         for (const bi of bis) {
@@ -418,9 +419,11 @@ export class MountObserver extends EventTarget {
             if (elToMount.matches(inclTemplQry)) {
                 await this.#compose(elToMount, 0);
             }
-            if (elToMount.matches(itemscopeQry)) {
+        }
+        for (const el of els) {
+            if (el.matches(itemscopeQry)) {
                 const { Newish } = await import('./Newish.js');
-                new Newish(elToMount, elToMount.getAttribute('itemscope'), assigner);
+                new Newish(el, el.getAttribute('itemscope'), assigner);
             }
         }
         this.#mount(elsToMount, initializing);
@@ -433,7 +436,7 @@ export class MountObserver extends EventTarget {
 }
 const refCountErr = 'mount-observer ref count mismatch';
 export const inclTemplQry = 'template[src^="#"]:not([hidden])';
-export const itemscopeQry = '[itemscope~="-"]';
+export const itemscopeQry = '[itemscope*="-"]';
 // https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
 /**
  * The `mutation-event` event represents something that happened.

package/MountObserver.ts

@@ -68,6 +68,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
         return this.#calculatedSelector;
     }
 
+    //This method is called publicly from outside mount-observer -- keep it public
     async composeFragment(fragment: DocumentFragment, level: number){
         const bis = fragment.querySelectorAll(`${inclTemplQry},${itemscopeQry}`) as NodeListOf<HTMLTemplateElement>;
         for(const bi of bis){
@@ -433,9 +434,12 @@ export class MountObserver extends EventTarget implements IMountObserver{
             if(elToMount.matches(inclTemplQry)){
                 await this.#compose(elToMount as HTMLTemplateElement, 0)
             }
-            if(elToMount.matches(itemscopeQry)){
+            
+        }
+        for(const el of els){
+            if(el.matches(itemscopeQry)){
                 const {Newish} = await import('./Newish.js');
-                new Newish(elToMount, elToMount.getAttribute('itemscope')!, assigner);
+                new Newish(el, el.getAttribute('itemscope')!, assigner);
             }
         }
         this.#mount(elsToMount, initializing);
@@ -453,7 +457,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
 
 const refCountErr = 'mount-observer ref count mismatch';
 export const inclTemplQry = 'template[src^="#"]:not([hidden])';
-export const itemscopeQry = '[itemscope~="-"]';
+export const itemscopeQry = '[itemscope*="-"]';
 export interface MountObserver extends IMountObserver{}
 
 // https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080

package/Newish.js

@@ -1,11 +1,10 @@
 export { waitForEvent } from './waitForEvent.js';
-export class Newish extends EventTarget {
+export class Newish {
     queue = [];
     isResolved = false;
     #ce;
     #assigner = undefined;
     constructor(enhancedElement, itemscope, assigner) {
-        super();
         this.#assigner = assigner;
         this.#do(enhancedElement, itemscope);
     }
@@ -42,8 +41,27 @@ export class Newish extends EventTarget {
             });
             this.#assignGingerly();
         }
+        //attach any itemref references
+        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);
+                }
+                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;
-        this.dispatchEvent(new Event('resolved'));
+        enhancedElement.dispatchEvent(new Event('ishAttached'));
     }
     async #assignGingerly() {
         let ce = this.#ce;

package/Newish.ts

@@ -1,5 +1,5 @@
 export {waitForEvent} from './waitForEvent.js';
-export class Newish extends EventTarget{
+export class Newish{
     queue: Array<any> = [];
     isResolved = false;
     #ce: HTMLElement | undefined;
@@ -7,7 +7,6 @@ export class Newish extends EventTarget{
     #assigner: undefined | ((target: any, source: any) => Promise<void>) = undefined;
 
     constructor(enhancedElement: Element, itemscope: string, assigner?: (target: any, source: any) => Promise<void>){
-        super();
         this.#assigner = assigner;
         this.#do(enhancedElement, itemscope);
     }
@@ -44,9 +43,26 @@ export class Newish extends EventTarget{
             });
             this.#assignGingerly();
         }
-        
+        //attach any itemref references
+        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);
+                }
+                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;
-        this.dispatchEvent(new Event('resolved'));
+        enhancedElement.dispatchEvent(new Event('ishAttached'));
     }
 
     async #assignGingerly(){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
@@ -32,6 +32,10 @@
     "./waitForEvent.js": {
       "default": "./waitForEvent.js",
       "types": "./waitForEvent.ts"
+    },
+    "./waitForIsh.js": {
+      "default": "./waitForIsh.js",
+      "types": "./waitForIsh.ts"
     }
   },
   "files": [

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

@@ -0,0 +1,24 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+
+export interface EndUserProps extends IEnhancement{
+    statement: string;
+}
+
+export interface AllProps extends EndUserProps{
+    listProp: string;
+    itemProp: 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;
+}
+

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

@@ -170,10 +170,9 @@ export interface WCConfig<TProps = any, TActions = TProps, TPropInfo = PropInfo,
     
 }
 
-export type PropLookup<TProps = any> = Partial<{[key in keyof TProps]: PropInfo}>;
-
-export interface OConfig<TProps = any, TActions = TProps, ETProps = TProps>{
-
+export type PropLookup<TProps = any, TActions = any> = Partial<{[key in keyof TProps]: PropInfo<TProps, TActions>}>;
+export type IshPropLookup<TProps = any, TActions = any> = Partial<{[key in keyof TProps]: IshPropInfo<TProps, TActions>}>;
+export interface IshConfig<TProps = any, TActions = TProps, ETProps = TProps>{
     propDefaults?: Partial<{[key in keyof TProps]: TProps[key]}>;
     propInfo?: Partial<{[key in keyof TProps]: PropInfo}>;
     wrappers?: Partial<{[key in keyof TProps]: WrapperConfig<TProps>}>;
@@ -186,8 +185,13 @@ export interface OConfig<TProps = any, TActions = TProps, ETProps = TProps>{
     hitch?: Hitches<TProps, TActions>;
     handlers?: Handlers<ETProps, TActions>;
     positractions?: Positractions<TProps, TActions>;
-    mainTemplate?: string | HTMLTemplateElement;
+    
     isSleepless?: boolean;
+    xform?: XForm<TProps, TActions>;
+    inScopeXForms?: Array<XForm<TProps, TActions>>;
+}
+export interface OConfig<TProps = any, TActions = TProps, ETProps = TProps> extends IshConfig<TProps, TActions, ETProps>{
+    mainTemplate?: string | HTMLTemplateElement;
 }
 
 export type Positractions<TProps = any, TActions = TProps> = 
@@ -287,14 +291,26 @@ export interface IActionProcessor{
 }
 
 type PropInfoTypes = "String" | "Number" | "Boolean" | "Object" | "RegExp";
-export interface PropInfo{
+
+export interface IshPropInfo<TProps = any, TActions = any>{
     type?: PropInfoTypes;
     dry?: boolean;
-    parse?: boolean;
     ro?: boolean;
+    propName?: string;
+    /**
+     * Allow for discarding what is passed in favor of a modified value such as a formatted value
+     * or filtered list
+     */
+    adjuster?: 
+        |keyof TActions & string 
+        |((nv: any) => any)
+}
+
+export interface PropInfo<TProps=any, TActions=any> extends IshPropInfo<TProps, TActions>{
+
+    parse?: boolean;
     def?: any;
     attrName?: string;
-    propName?: string;
     /**
      * form associated read only property
      * https://web.dev/articles/more-capable-form-controls#:~:text=Form-associated%20custom%20elements%20aim%20to%20bridge%20the%20gap,associated%20with%20the%20form%2C%20like%20a%20browser-provided%20control.
@@ -317,6 +333,8 @@ export interface PropInfo{
      * examples: role, ariaRole
      */
     ip?: boolean;
+
+
 }
 
 export type ConstString = string;

package/waitForEvent.ts

@@ -9,5 +9,5 @@ export function waitForEvent<TEvent extends Event = Event>(et: EventTarget, even
             },  {once: true});
         }
 
-    })
+    });
 }

package/waitForIsh.js

@@ -0,0 +1,21 @@
+export function waitForIsh(el) {
+    return new Promise((resolve, reject) => {
+        const ish = el['ish']; // [TODO] should we make this something that can
+        // be passed in, more generic function -- waitForProperty?
+        if (ish) {
+            resolve(ish);
+        }
+        else {
+            // If the element is not yet defined, wait for it to be defined
+            el.addEventListener('ishAttached', () => {
+                const ish = el['ish'];
+                if (ish) {
+                    resolve(ish);
+                }
+                else {
+                    reject(new Error('ish not found'));
+                }
+            }, { once: true });
+        }
+    });
+}

package/waitForIsh.ts

@@ -0,0 +1,20 @@
+export function waitForIsh(el: Element){
+    return new Promise((resolve, reject) => {
+        const ish = (<any>el)['ish']; // [TODO] should we make this something that can
+        // be passed in, more generic function -- waitForProperty?
+        if (ish) {
+            resolve(ish);
+        } else {
+            // If the element is not yet defined, wait for it to be defined
+            el.addEventListener('ishAttached', () => {
+                const ish = (<any>el)['ish'];
+                if (ish) {
+                    resolve(ish);
+                } else {
+                    reject(new Error('ish not found'));
+                }
+            }, { once: true });
+            
+        }
+    });
+}