mount-observer 0.0.89 → 0.0.90

package/MountObserver.js

@@ -503,6 +503,14 @@ export class MountObserver extends EventTarget {
         //getting into a catch-22 scenario frequently, blocking the code for resuming.
         //This was observed with per-each package, demo/ScopeScript.html, clicking refresh a few times
         //one will see the inconsistent behavior if await is added below.
+        const genids = Array.from(within.querySelectorAll('[genids]'));
+        if (genids[0]) {
+            const { genIds } = await import('./refid/genIds.js');
+            for (const el of genids) {
+                genIds(el);
+                el.removeAttribute('genid');
+            }
+        }
         bindish(within, within, { assigner: this.#mountInit.assigner });
         await this.composeFragment(within, 0);
         const match = await this.#selector();

package/MountObserver.ts

@@ -533,11 +533,20 @@ export class MountObserver extends EventTarget implements IMountObserver{
         //getting into a catch-22 scenario frequently, blocking the code for resuming.
         //This was observed with per-each package, demo/ScopeScript.html, clicking refresh a few times
         //one will see the inconsistent behavior if await is added below.
+        const genids = Array.from((within as DocumentFragment).querySelectorAll('[genids]'))
+        if(genids[0]){
+            const {genIds} = await import('./refid/genIds.js');
+            for(const el of genids){
+                genIds(el);
+                el.removeAttribute('genid');
+            }
+        }
         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, within, false, initializing);
+
     }
 
 }

package/README.md

@@ -399,7 +399,7 @@ Callbacks like we saw in our earlier examples above are useful for tight couplin
 
 However, since these rules may be of interest to multiple parties, it is useful to also provide the ability for multiple parties to subscribe to these DOM filtering events.
 
-If the performance isn't impacted, I think it would be most convenient for the developer if, at a minimum, the second argument of the callbacks above in fact precisely match the loosely coupled events.  The callback would get the first dibs on the event, and have the opportunity to prevent the event from going any further before getting dispatched, using something like preventDefault. I don't yet have any compelling use cases for that scenario, but I think there probably are some.
+If the performance isn't impacted, I think it would be most convenient for the developer if, at a minimum, the second argument of the callbacks above in fact precisely match the loosely coupled events.  The callback would get the first dibs on the event, and have the opportunity to prevent the event from going any further before getting dispatched, using something like stopPropagation. I don't yet have any compelling use cases for that scenario, but I think there probably are some.
 
 In which case the argument becomes quite strong that the inconsistency of making the callback methods above  have a separate parameter where the matching element is passed is unwise. Simply making the matching element be part of the event payload, as is done for the loosely coupled events discussed above, would reduce the learning curve, and make it easier to share logic between the two.  
 
@@ -927,7 +927,7 @@ This proposal (and polyfill) also supports the option to utilize ShadowDOM / slo
 
 The discussion there leads to an open question whether a processing instruction would be better.  I think the compose tag would make much more sense, vs a processing instruction, as it could then support slotted children (behaving similar to the Beatles' example above).  Or maybe another tag should be introduced that is the equivalent of the slot, to avoid confusion. But I strongly suspect supporting intra document HTML imports could significantly reduce the payload size of some documents, if we can reuse blocks of HTML, inserting sections of customized content for each instance.
 
-The [add src attribute to template to load a template from file](https://github.com/whatwg/html/issues/10571) and an interesting proposal that is [coming from](https://github.com/htmlcomponents/declarative-shadow-imports/blob/main/examples/02-explainer-proposal/02-html.html) the Edge team [seem quite compatible](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md#proposal-inline-declarative-css-module-scripts) with this idea.
+The [add src attribute to template to load a template from file](https://github.com/whatwg/html/issues/10571) and an interesting [declarative shadow imports proposal that is coming from](https://github.com/htmlcomponents/declarative-shadow-imports/blob/main/examples/02-explainer-proposal/02-html.html) the Edge team [seem quite compatible](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md#proposal-inline-declarative-css-module-scripts) with this idea.  Also [declarative partial updates](https://github.com/WICG/declarative-partial-updates).  Here's to hoping something actually lands in the browser.
 
 ## Applying DRY to templates
 
@@ -1120,7 +1120,7 @@ And we can give each inheriting ShadowRoot a personality of its own by customizi
 </be-hive>
 ```
 
-## Creating an Element-To-RefID DOM passageway
+## Creating an Element-To-RefID DOM traversal API
 
 The platform provides some nice help with managing forms, including IDREF dependency support:
 
@@ -1217,5 +1217,26 @@ Again, because of the mount-observer being the "first point of contact" with the
 </script>
 ```
 
+One quirk to consider:
+
+In the case of multiple elements being linked to a "mother ship" element forming a concept of "children" like we've seen before, the "mother ship" element is the one that points outward to the children.
+
+The one exception (or are there others?) is the form element, where outside elements can say "hey, I want to be considered part of the form".
+
+To keep the api uniform, we hide this discrepancy by pretending the form element is like the others [TODO]:
+
+```html
+<input id=field2 name=field2 form=myForm>
+
+<form id=myForm>
+   <input name="field1">
+</form>
+<script>
+   console.log(myForm.via.form.children);
+   // includes both field1 and field2
+   
+</script>
+```
+
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.89",
+  "version": "0.0.90",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",

package/refid/arr.js

@@ -0,0 +1,4 @@
+export function arr(inp) {
+    return inp === undefined ? []
+        : Array.isArray(inp) ? inp : [inp];
+}

package/refid/arr.ts

@@ -0,0 +1,4 @@
+export function arr<T = any>(inp: T | T[] | undefined) : T[] {
+    return inp === undefined ? []
+        : Array.isArray(inp) ? inp : [inp];
+}

package/refid/genIds.js

@@ -0,0 +1,130 @@
+import { nudge } from './nudge.js';
+import { getCount } from './getCount.js';
+const attrMap = {
+    '@': 'name',
+    '|': 'itemprop',
+};
+export function genIds(enhancedElement) {
+    const { parentElement } = enhancedElement;
+    if (parentElement === null)
+        throw 404;
+    //first find all elements with attribute #
+    const hashIds = Array.from(parentElement.querySelectorAll('[\\#]'));
+    const uniqueCheck = new Set();
+    for (const hi of hashIds) {
+        if (!(hi instanceof HTMLElement))
+            continue;
+        const { localName } = hi;
+        if (uniqueCheck.has(localName))
+            throw 500;
+        uniqueCheck.add(localName);
+        let sideEffects = '';
+        const hashValue = hi.getAttribute('#');
+        if (hashValue) {
+            sideEffects = `${hashValue} `;
+        }
+        hi.dataset.id = `{{${sideEffects}${localName}}}`;
+        hi.removeAttribute('#');
+    }
+    const dataIds = Array.from(parentElement.querySelectorAll('[data-id^="{{"][data-id$="}}"]'));
+    const ids = [];
+    for (const di of dataIds) {
+        if (!(di instanceof HTMLElement))
+            continue;
+        const unparsedID = di.dataset.id;
+        const inner = unparsedID?.substring(2, unparsedID.length - 2);
+        if (!inner)
+            continue;
+        const split = inner.split(' ');
+        const id = split.length === 2 ? split[1] : split[0];
+        if (ids.includes(id))
+            throw 500;
+        ids.push(id);
+    }
+    const allChildren = Array.from(parentElement.querySelectorAll('*'));
+    allChildren.push(parentElement);
+    const idLookup = {};
+    const base = 'gid';
+    for (const child of allChildren) {
+        const attrs = child.attributes;
+        for (const attr of attrs) {
+            const { name, value } = attr;
+            if (!name.startsWith('data-'))
+                continue;
+            if (name === 'data-id') {
+                if (!value.startsWith('{{') || !value.endsWith('}}'))
+                    continue;
+                const inner = value.substring(2, value.length - 2);
+                const split = inner.split(' ');
+                const id = split.length === 2 ? split[1] : split[0];
+                if (!(id in idLookup)) {
+                    idLookup[id] = `${base}-${getCount(base)}`;
+                }
+                if (split.length === 2) {
+                    const sideEffects = split[0];
+                    for (const char of sideEffects) {
+                        switch (char) {
+                            case '@':
+                            case '|':
+                                child.setAttribute(attrMap[char], id);
+                                break;
+                            case '%':
+                                child.part.add(id);
+                                break;
+                            case '.':
+                                child.classList.add(id);
+                                break;
+                        }
+                    }
+                }
+                child.id = idLookup[id];
+                child.setAttribute('data-id', id);
+            }
+            else {
+                let newValue = value;
+                for (const id of ids) {
+                    const token = `{{${id}}}`;
+                    if (!newValue.includes(token))
+                        continue;
+                    if (!(id in idLookup)) {
+                        idLookup[id] = `${base}-${getCount(base)}`;
+                    }
+                    newValue = newValue.replaceAll(token, idLookup[id]);
+                }
+                if (newValue === value)
+                    continue;
+                child.setAttribute(name.substring(5), newValue);
+                child.removeAttribute(name);
+            }
+        }
+        for (const attr of attrs) {
+            const { name, value } = attr;
+            if (!name.startsWith('defer-'))
+                continue;
+            const nameWithoutDefer = name.substring(6);
+            const attrWithoutDefer = child.getAttributeNode(nameWithoutDefer);
+            if (attrWithoutDefer === null)
+                continue;
+            const valueWithoutDefer = attrWithoutDefer.value;
+            let newValue = valueWithoutDefer;
+            let changeMade = false;
+            for (const id of ids) {
+                const token = `{{${id}}}`;
+                if (!newValue.includes(token))
+                    continue;
+                if (!(id in idLookup)) {
+                    idLookup[id] = `${base}-${getCount(base)}`;
+                }
+                newValue = newValue.replaceAll(token, idLookup[id]);
+                changeMade = true;
+            }
+            //child.setAttribute(nameWithoutDefer, newValue);
+            if (changeMade)
+                attrWithoutDefer.value = newValue;
+            nudge(child, name);
+        }
+    }
+    if ('disabled' in parentElement) {
+        nudge(parentElement);
+    }
+}

package/refid/genIds.ts

@@ -0,0 +1,126 @@
+import {nudge} from './nudge.js';
+import {getCount} from './getCount.js';
+
+const attrMap = {
+    '@': 'name',
+    '|': 'itemprop',
+};
+
+export function genIds(enhancedElement: Element){
+    const {parentElement} = enhancedElement;
+    if(parentElement === null) throw 404;
+
+    //first find all elements with attribute #
+    const hashIds = Array.from(parentElement.querySelectorAll('[\\#]'));
+    const uniqueCheck = new Set();
+    for(const hi of hashIds){
+        if(!(hi instanceof HTMLElement)) continue;
+        const {localName} = hi;
+        if(uniqueCheck.has(localName)) throw 500;
+        uniqueCheck.add(localName);
+        let sideEffects = '';
+        const hashValue = hi.getAttribute('#');
+        if(hashValue){
+            sideEffects = `${hashValue} `;
+        }
+        hi.dataset.id = `{{${sideEffects}${localName}}}`;
+        hi.removeAttribute('#');
+    }
+
+    const dataIds = Array.from(parentElement.querySelectorAll('[data-id^="{{"][data-id$="}}"]'));
+    const ids: Array<string> = [];
+    for(const di of dataIds){
+        if(!(di instanceof HTMLElement)) continue;
+        const unparsedID = di.dataset.id;
+        const inner = unparsedID?.substring(2, unparsedID.length - 2);
+        if(!inner) continue;
+        const split = inner.split(' ');
+        const id = split.length === 2 ? split[1] : split[0];
+        if(ids.includes(id)) throw 500;
+        ids.push(id);
+    }
+
+    const allChildren = Array.from(parentElement.querySelectorAll('*'));
+    allChildren.push(parentElement);
+
+    const idLookup: {[key: string]: string}  = {};
+    const base = 'gid';
+    for(const child of allChildren){
+        const attrs = child.attributes;
+        for(const attr of attrs){
+            const {name, value} = attr;
+            if(!name.startsWith('data-')) continue;
+            if(name === 'data-id'){
+                if(!value.startsWith('{{') || !value.endsWith('}}')) continue;
+                const inner = value.substring(2, value.length - 2);
+                const split = inner.split(' ');
+                const id = split.length === 2 ? split[1] : split[0];
+                if(!(id in idLookup)){
+                    idLookup[id] = `${base}-${getCount(base)}`;
+                }
+                if(split.length === 2){
+                    const sideEffects = split[0];
+                    for(const char of sideEffects){
+                        switch(char){
+                            case '@':
+                            case '|':
+                                child.setAttribute(attrMap[char], id);
+                                break;
+                            case '%':
+                                child.part.add(id);
+                                break;
+                            case '.':
+                                child.classList.add(id);
+                                break;
+
+                        }
+                    }
+                }
+                child.id = idLookup[id];
+                child.setAttribute('data-id', id);
+            }else{
+                let newValue = value;
+                for(const id of ids){
+                    const token = `{{${id}}}`;
+                    if(!newValue.includes(token)) continue;
+                    if(!(id in idLookup)){
+                        idLookup[id] = `${base}-${getCount(base)}`;
+                    }
+                    newValue = newValue.replaceAll(token, idLookup[id]);
+                    
+                }
+                if(newValue === value) continue;
+                child.setAttribute(name.substring(5), newValue);
+                child.removeAttribute(name);
+            }
+            
+        }
+        for(const attr of attrs){
+            const {name, value} = attr;
+            if(!name.startsWith('defer-')) continue;
+            const nameWithoutDefer = name.substring(6);
+            const attrWithoutDefer = child.getAttributeNode(nameWithoutDefer);
+            if(attrWithoutDefer === null) continue;
+            const valueWithoutDefer = attrWithoutDefer.value;
+            
+            let newValue = valueWithoutDefer;
+            let changeMade = false;
+            for(const id of ids){
+                const token = `{{${id}}}`;
+                if(!newValue.includes(token)) continue;
+                if(!(id in idLookup)){
+                    idLookup[id] = `${base}-${getCount(base)}`;
+                }
+                newValue = newValue.replaceAll(token, idLookup[id]);
+                changeMade = true;
+                
+            }
+            //child.setAttribute(nameWithoutDefer, newValue);
+            if(changeMade) attrWithoutDefer.value = newValue;
+            nudge(child, name);
+        }
+    }
+    if('disabled' in parentElement){
+        nudge(parentElement);
+    }
+}

package/refid/getCount.js

@@ -0,0 +1,8 @@
+const ttGuid = '0j9qIjjR+UWYLrZ3FskVig';
+export function getCount(baseID) {
+    const key = Symbol.for(ttGuid + baseID);
+    let returnCnt = window[key] || 0;
+    const nextCnt = returnCnt + 1;
+    window[key] = nextCnt;
+    return returnCnt;
+}

package/refid/getCount.ts

@@ -0,0 +1,8 @@
+const ttGuid = '0j9qIjjR+UWYLrZ3FskVig'
+export function getCount(baseID: string){
+    const key = Symbol.for(ttGuid + baseID);
+    let returnCnt = (<any>window)[key] || 0;
+    const nextCnt = returnCnt + 1;
+    (<any>window)[key] = nextCnt;
+    return returnCnt;
+}

package/refid/nudge.js

@@ -0,0 +1,23 @@
+import { arr } from './arr.js';
+/**
+ * Decrement "disabled" counter, remove when reaches 0
+ * @param el
+ * Optional select the attribute or attributes to remove or decrement
+ * @param attr
+ */
+export function nudge(el, attr = 'disabled') {
+    const attrs = arr(attr);
+    for (const attr of attrs) {
+        const da = el.getAttribute(attr);
+        if (da !== null) {
+            if (da.length === 0 || da === "1") {
+                el.removeAttribute(attr);
+                if (attr === 'disabled')
+                    el.disabled = false;
+            }
+            else {
+                el.setAttribute(attr, (parseInt(da) - 1).toString());
+            }
+        }
+    }
+}

package/refid/nudge.ts

@@ -0,0 +1,23 @@
+import {arr} from './arr.js';
+/**
+ * Decrement "disabled" counter, remove when reaches 0
+ * @param el
+ * Optional select the attribute or attributes to remove or decrement
+ * @param attr 
+ */
+ export function nudge(el: Element, attr: string | Array<string> = 'disabled') { //TODO:  Share with be-observant
+    const attrs = arr(attr);
+    for(const attr of attrs){
+        const da = el.getAttribute(attr);
+        if (da !== null) {
+            if (da.length === 0 || da === "1") {
+                el.removeAttribute(attr);
+                if(attr === 'disabled') (<any>el).disabled = false;
+            }
+            else {
+                el.setAttribute(attr, (parseInt(da) - 1).toString());
+            }
+        }
+    }
+
+}

package/ts-refs/be-a-beacon/types.d.ts

@@ -1,10 +1,12 @@
-import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+import {IEnhancement, BEAllProps, EMC} from '../trans-render/be/types';
 
 export interface EndUserProps extends IEnhancement{
     eventName: string, //TODO
 }
 
-export interface AllProps extends EndUserProps{}
+export interface AllProps extends EndUserProps{
+    emc: EMC<any, AllProps>,
+}
 
 export type AP = AllProps;
 

package/ts-refs/be-enhancing/types.d.ts

@@ -5,7 +5,7 @@ export interface EndUserProps extends IEnhancement{
 }
 
 export interface AllProps extends EndUserProps{
-    parsedStatements: Array<ResolvingParameters>,
+    parsedStatements: Array<EnhancingParameters>,
     rawStatements?: Array<string>
 }
 
@@ -21,7 +21,7 @@ export interface Actions{
     hydrate(self: BAP): ProPAP;
 }
 
-export interface ResolvingParameters{
+export interface EnhancingParameters{
     remoteSpecifierString: string;
     remoteSpecifier: Specifier;
     enhancementBase: string;

package/ts-refs/be-giddy/types.d.ts

@@ -0,0 +1,26 @@
+import {IEnhancement, BEAllProps, EMC} from '../trans-render/be/types';
+
+export interface EndUserProps extends IEnhancement{
+    idString: string;
+}
+
+export interface AllProps extends EndUserProps{
+    ids: string[];
+    emc: EMC<any, AllProps>,
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AP & BEAllProps;
+
+export interface Actions{
+    parseIdString(self: AP & BEAllProps): PAP;
+
+    autoGen(self: AP & BEAllProps): PAP;
+
+    retire(self: AP & BEAllProps): void;
+}

package/ts-refs/be-switched/types.d.ts

@@ -4,7 +4,7 @@ import {BEAllProps, EMC, IEnhancement} from '../trans-render/be/types';
 //import {AP as BPAP, ISignal, Actions as BPActions} from 'be-propagating/types';
 //import {ElTypes, SignalRefType} from 'be-linked/types';
 //import { Propagator } from "../trans-render/froop/PropSvc";
-import {Specifier} from '../trans-render/dss/types';
+import {IPE, Specifier} from '../trans-render/dss/types';
 
 export interface EndUserProps extends IEnhancement<HTMLTemplateElement>{
     lhs?: any,
@@ -58,8 +58,7 @@ export type SwitchStatement = string;
 
 export interface OneValueSwitch{
     ifPart: string,
-    specifier: Specifier,
-    //signal?: WeakRef<SignalRefType>,
+    ipe: IPE,
     req?: boolean,
 }
 
@@ -73,12 +72,10 @@ export interface TwoPartOpStatement{
 }
 
 export interface TwoValueSwitch{
-    lhsSpecifier: Specifier,
-    rhsSpecifier: Specifier,
-    withinSpecifier?: Specifier,
+    lhsIPE: IPE,
+    rhsIPE: IPE,
     req?: boolean,
     op?: Op,
-    //negate?: boolean,
     lhs?: ISide,
     rhs?: ISide,
     onOrOff: 
@@ -89,7 +86,7 @@ export interface TwoValueSwitch{
 
 }
 
-export interface Dependency extends Specifier{}
+export interface Dependency extends IPE{}
 
 export interface CanBeSwitchedOn {
     switchedOn?: boolean,

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

@@ -3,20 +3,25 @@ import { HasIshList } from '../trans-render/dss/types';
 
 export interface EndUserProps extends IEnhancement{
     each: string;
+    
+
     mapIdxTo: string;
     idxStart: number;
     idleTimeout: number;
     options: Partial<EndUserProps>;
+    // parsedStatements: Array<LoopingStatement>,
+    // rawStatements?: Array<string>,
 }
 
 export interface AllProps extends EndUserProps{
-    listProp: string;
-    itemProp: string;
-    ish: HasIshList;
-    ishContainer: Element;
-    itemTemplate: HTMLTemplateElement;
+    listScope: string;
+    //itemProp: string;
+    itemScopes: Array<string>;
+    itemTemplates: Array<HTMLTemplateElement>;
     emc: any;
-    //updateCnt: number;
+    //loopingParameters: Array<LoopingParameters>,
+    ish: any;
+    ishContainer: Element;
 }
 
 export type AP = AllProps;
@@ -33,3 +38,14 @@ export interface Actions{
     hydrate(self: BAP)
 }
 
+// export interface LoopingStatement {
+//     listProp?: string;
+//     itemProp: string;
+// }
+
+// export interface LoopingParameters extends LoopingStatement {
+//     listProp: string;
+//     ish: any;
+//     ishContainer: Element;
+// }
+

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

@@ -47,7 +47,9 @@ export type AttrSigils =
 
 export type ElementSigils = '/' | '~';
 
-export type Sigils = AttrSigils | ElementSigils;
+export type ScopeSigils = '';
+
+export type Sigils = AttrSigils | ElementSigils | ScopeSigils;
 
 export type asOptions = 
     | 'number'
@@ -69,6 +71,7 @@ export interface $ScopeHierarchy {
     satellites?: Array<Element>;
 }
 
+// deprecated
 export interface Specifier {
     /** Directional Scope Sigil */
     dss?: DirectionalScopeSigils,
@@ -150,6 +153,14 @@ export interface Specifier {
     enhBase?: string;
 }
 
+export interface IPE {
+    id?: string,
+    path?: SubPropPath,
+    evtName?: string,
+    as?: asOptions,
+    constVal?: any;
+}
+
 export type Modulo = 'aria-rowindex' | 'aria-colindex' | 'aria-rowindextext'
 
 export type InferredPropName = string;

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

@@ -25,9 +25,13 @@ export interface ElO {
 export interface RegExpExt<TStatementGroup = any>{
     regExp: RegExp | string,
     defaultVals: Partial<TStatementGroup>,
+    // deprecated
     dssKeys?: [string, string][],
+    // deprecated
     dssArrayKeys?: [string, string][],
-    statementPartParser?: StatementPartParser
+    statementPartParser?: StatementPartParser,
+    ipeKeys?: [string, string][];
+    ipeArrayKeys?: [string, string][];
 }
 
 export interface StatementPartParser {

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

@@ -65,6 +65,7 @@ export interface TransformOptions{
     propagatorIsReady?: boolean,
     skipInit?: boolean,
     useViewTransition?: boolean,
+    outside?: string,
 }
 
 export type Derivative<TProps, TMethods, TElement = {}> = 
@@ -354,6 +355,8 @@ export type ValueFromElement<TProps, TMethods, TElement = {}> =
 
 export interface ModificationUnitOfWork<TProps, TMethods, TElement = {}>{
     on: string,
+    //Double check that the event is the type expected
+    instanceOf?: any,
     /**
      * Increment
      */
@@ -385,6 +388,7 @@ export interface ModificationUnitOfWork<TProps, TMethods, TElement = {}>{
     to?: any,
     toValFrom?: string | ValueFromElement<TProps, TMethods, TElement>;
     toggle?: keyof TProps & string,
+    stopPropagation?: boolean,
 }
 
 export interface QuenitOfWork<TProps, TMethods, TElement = {}> extends UnitOfWork<TProps, TMethods, TElement>{
@@ -456,7 +460,7 @@ export interface ITransformer<TProps, TMethods, TElement = {}>{
     model: TProps & TMethods,
     xform: XForm<TProps, TMethods, TElement> & Info,
     options: TransformOptions,
-    initializedMods: Set<ModificationUnitOfWork<TProps, TMethods, TElement>>
+    initializedMods: Set<ModificationUnitOfWork<TProps, TMethods, TElement>>,
     //propagator?: EventTarget,
 }
 
@@ -566,11 +570,11 @@ export interface Clone$Options{
     ishContainer: Element,
     seedEl: Element,
     idxStart: number,
-    itemProp: string,
+    itemScopes: Array<string>,
     mapIdxTo?: string,
-    itemTemplate: HTMLTemplateElement;
+    itemTemplates: Array<HTMLTemplateElement>;
     baseCrumb: string,
     idleTimeout: number,
     //model?: any,
-    listProp?: string,
+    //listScope: string
 }

package/waitForIsh.ts

@@ -1,4 +1,4 @@
-export function waitForIsh(el: Element) : Promise<EventTarget> {
+export function waitForIsh(el: Element) : Promise<any> {
     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?
@@ -7,7 +7,7 @@ export function waitForIsh(el: Element) : Promise<EventTarget> {
         } else {
             // If the element is not yet defined, wait for it to be defined
             el.addEventListener('ish', () => {
-                const ish = (<any>el)['ish'] as EventTarget;
+                const ish = (<any>el)['ish'];
                 if (ish) {
                     resolve(ish);
                 } else {