mount-observer 0.0.112 → 0.1.1

package/compose.js

@@ -1,148 +0,0 @@
-import { wasItemReffed } from './MountObserver.js';
-//import {prep} from './slotkin/affine.js';
-//goal:  deprecate this key, in favor of comments
-export const childRefsKey = Symbol.for('Wr0WPVh84k+O93miuENdMA');
-export const cloneKey = Symbol.for('LD97VKZYc02CQv23DT/6fQ');
-const autogenKey = Symbol.for('YpP5EP0i1UKcBBBH9tsm0w');
-//const wrapped = Symbol.for('50tzQZt95ECXUtHF7a40og');
-export async function compose(self, el, level, refName, refType) {
-    const src = el.getAttribute('src');
-    if (src === null)
-        return;
-    el.removeAttribute('src');
-    //const templID = src!.substring(1);
-    //const refType = src![0];
-    const fragment = self.objNde?.deref();
-    if (fragment === undefined)
-        return;
-    const templ = await self.findByID(refName, fragment, refType);
-    if (!(templ instanceof HTMLTemplateElement))
-        throw 404;
-    if (refType === '#') {
-        (await import('./slotkin/wrap.js')).wrap(templ, refName);
-    }
-    const clone = templ.content.cloneNode(true);
-    const dataLd = el.dataset.ld;
-    const wasReffed = templ[wasItemReffed];
-    if (wasReffed || dataLd) {
-        const firstElement = clone.firstElementChild;
-        if (wasReffed) {
-            let ns = firstElement.nextElementSibling;
-            const ids = [];
-            let count = window[autogenKey];
-            if (count === undefined) {
-                count = 0;
-            }
-            else {
-                count++;
-            }
-            window[autogenKey] = count;
-            while (ns !== null) {
-                const id = ns.id = `mount-observer-${count}`;
-                ids.push(id);
-                ns = ns.nextElementSibling;
-            }
-            firstElement.setAttribute('itemref', ids.join(' '));
-        }
-        if (dataLd) {
-            const parsed = JSON.parse(dataLd);
-            let type = parsed['@type'];
-            const itemscopeAttr = firstElement.getAttribute('itemscope');
-            if (type && !itemscopeAttr) {
-                firstElement.setAttribute('itemscope', type);
-            }
-            firstElement['ish'] = parsed;
-            delete el.dataset.ld;
-        }
-    }
-    if (el.content.childElementCount > 0) {
-        const { affine } = await import('./slotkin/affine.js');
-        const children = Array.from(el.content.children);
-        for (const child of children) {
-            //TODO support clean up
-            const mo = affine(clone, child);
-        }
-    }
-    await self.composeFragment(clone, level + 1);
-    // if (false) {
-    //     const shadowRootModeOnLoad = el.getAttribute('shadowRootModeOnLoad') as null | ShadowRootMode;
-    //     if (shadowRootModeOnLoad === null && level === 0) {
-    //         const slotMap = el.getAttribute('slotmap');
-    //         let map = slotMap === null ? undefined : JSON.parse(slotMap);
-    //         const slots = clone.querySelectorAll('[slot]');
-    //         for (const slot of slots) {
-    //             if (map !== undefined) {
-    //                 const slotName = slot.slot;
-    //                 for (const key in map) {
-    //                     if (slot.matches(key)) {
-    //                         const targetAttSymbols = map[key] as string;
-    //                         for (const sym of targetAttSymbols) {
-    //                             switch (sym) {
-    //                                 case '|':
-    //                                     slot.setAttribute('itemprop', slotName);
-    //                                     break;
-    //                                 case '$':
-    //                                     slot.setAttribute('itemscope', '');
-    //                                     slot.setAttribute('itemprop', slotName);
-    //                                     break;
-    //                                 case '@':
-    //                                     slot.setAttribute('name', slotName);
-    //                                     break;
-    //                                 case '.':
-    //                                     slot.classList.add(slotName);
-    //                                     break;
-    //                                 case '%':
-    //                                     slot.part.add(slotName);
-    //                                     break;
-    //                             }
-    //                         }
-    //                     }
-    //                 }
-    //             }
-    //             slot.removeAttribute('slot');
-    //         }
-    //         el.dispatchEvent(new LoadEvent(clone));
-    //     }
-    // }
-    if (level === 0) {
-        const refs = [];
-        for (const child of clone.children) {
-            refs.push(new WeakRef(child));
-        }
-        el[childRefsKey] = refs;
-    }
-    //if template has itemscope attribute, assume want to do some data binding before instantiating into
-    //DOM fragment.
-    let cloneStashed = false;
-    if (el.hasAttribute('itemscope')) {
-        el[cloneKey] = clone;
-        cloneStashed = true;
-    }
-    else {
-        // if (false /*shadowRootModeOnLoad !== null */) {
-        //     const parent = el.parentElement;
-        //     if (parent === null) throw 404;
-        //     if (parent.shadowRoot === null) parent.attachShadow({ mode: shadowRootModeOnLoad });
-        //     parent.shadowRoot?.append(clone);
-        // } else {
-        el.after(clone);
-        //}
-    }
-    //moving the code down here broke be-inclusive Example2.html (but maybe it caused something else to work, so will need to revisit)
-    //check to make sure the progresive loading of css-charts works as before.
-    // if(level === 0){
-    //     el.dispatchEvent(new LoadEvent(clone));
-    // }
-    if (!cloneStashed) {
-        if (level !== 0 || el.attributes.length === 0)
-            el.remove();
-    }
-}
-export class LoadEvent extends Event {
-    clone;
-    static eventName = 'load';
-    constructor(clone) {
-        super(LoadEvent.eventName);
-        this.clone = clone;
-    }
-}

package/compose.ts

@@ -1,164 +0,0 @@
-import { ILoadEvent, loadEventName, RefType } from './ts-refs/mount-observer/types';
-import { MountObserver, inclTemplQry, wasItemReffed } from './MountObserver.js';
-//import {prep} from './slotkin/affine.js';
-
-//goal:  deprecate this key, in favor of comments
-export const childRefsKey = Symbol.for('Wr0WPVh84k+O93miuENdMA');
-export const cloneKey = Symbol.for('LD97VKZYc02CQv23DT/6fQ');
-const autogenKey = Symbol.for('YpP5EP0i1UKcBBBH9tsm0w');
-//const wrapped = Symbol.for('50tzQZt95ECXUtHF7a40og');
-export async function compose(
-    self: MountObserver,
-    el: HTMLTemplateElement,
-    level: number,
-    refName: string,
-    refType: RefType,
-) {
-    const src = el.getAttribute('src'); if (src === null) return;
-    el.removeAttribute('src');
-    //const templID = src!.substring(1);
-    //const refType = src![0];
-    const fragment = self.objNde?.deref() as DocumentFragment;
-    if (fragment === undefined) return;
-    const templ = await self.findByID(refName, fragment, refType);
-    if (!(templ instanceof HTMLTemplateElement)) throw 404;
-    if (refType === '#') {
-        (await import('./slotkin/wrap.js')).wrap(templ, refName);
-    }
-
-    const clone = templ.content.cloneNode(true) as DocumentFragment;
-    const dataLd = el.dataset.ld;
-    const wasReffed = (<any>templ)[wasItemReffed];
-    if (wasReffed || dataLd) {
-        const firstElement = clone.firstElementChild!;
-        if (wasReffed) {
-            let ns = firstElement.nextElementSibling;
-            const ids = [];
-            let count = (<any>window)[autogenKey];
-            if (count === undefined) {
-                count = 0;
-            } else {
-                count++;
-            }
-            (<any>window)[autogenKey] = count;
-            while (ns !== null) {
-                const id = ns.id = `mount-observer-${count}`;
-                ids.push(id);
-                ns = ns.nextElementSibling;
-            }
-            firstElement.setAttribute('itemref', ids.join(' '));
-        }
-
-        if (dataLd) {
-            const parsed = JSON.parse(dataLd);
-            let type = parsed['@type'];
-            const itemscopeAttr = firstElement.getAttribute('itemscope');
-            if (type && !itemscopeAttr) {
-                firstElement.setAttribute('itemscope', type);
-            }
-            (<any>firstElement)['ish'] = parsed;
-            delete el.dataset.ld;
-        }
-
-    }
-    if (el.content.childElementCount > 0) {
-        const { affine } = await import('./slotkin/affine.js');
-        const children = Array.from(el.content.children);
-        for (const child of children) {
-            //TODO support clean up
-            const mo = affine(clone, child);
-
-        }
-
-    }
-
-
-    await self.composeFragment(clone, level + 1);
-    // if (false) {
-    //     const shadowRootModeOnLoad = el.getAttribute('shadowRootModeOnLoad') as null | ShadowRootMode;
-    //     if (shadowRootModeOnLoad === null && level === 0) {
-
-    //         const slotMap = el.getAttribute('slotmap');
-    //         let map = slotMap === null ? undefined : JSON.parse(slotMap);
-    //         const slots = clone.querySelectorAll('[slot]');
-    //         for (const slot of slots) {
-    //             if (map !== undefined) {
-    //                 const slotName = slot.slot;
-    //                 for (const key in map) {
-    //                     if (slot.matches(key)) {
-    //                         const targetAttSymbols = map[key] as string;
-    //                         for (const sym of targetAttSymbols) {
-    //                             switch (sym) {
-    //                                 case '|':
-    //                                     slot.setAttribute('itemprop', slotName);
-    //                                     break;
-    //                                 case '$':
-    //                                     slot.setAttribute('itemscope', '');
-    //                                     slot.setAttribute('itemprop', slotName);
-    //                                     break;
-    //                                 case '@':
-    //                                     slot.setAttribute('name', slotName);
-    //                                     break;
-    //                                 case '.':
-    //                                     slot.classList.add(slotName);
-    //                                     break;
-    //                                 case '%':
-    //                                     slot.part.add(slotName);
-    //                                     break;
-    //                             }
-    //                         }
-    //                     }
-    //                 }
-    //             }
-    //             slot.removeAttribute('slot');
-    //         }
-    //         el.dispatchEvent(new LoadEvent(clone));
-    //     }
-    // }
-
-    if (level === 0) {
-        const refs: Array<WeakRef<Element>> = [];
-        for (const child of clone.children) {
-            refs.push(new WeakRef(child));
-        }
-        (<any>el)[childRefsKey] = refs;
-
-    }
-    //if template has itemscope attribute, assume want to do some data binding before instantiating into
-    //DOM fragment.
-    let cloneStashed = false;
-    if (el.hasAttribute('itemscope')) {
-        (<any>el)[cloneKey] = clone;
-        cloneStashed = true;
-    } else {
-        // if (false /*shadowRootModeOnLoad !== null */) {
-        //     const parent = el.parentElement;
-        //     if (parent === null) throw 404;
-        //     if (parent.shadowRoot === null) parent.attachShadow({ mode: shadowRootModeOnLoad });
-        //     parent.shadowRoot?.append(clone);
-        // } else {
-            el.after(clone);
-        //}
-    }
-    //moving the code down here broke be-inclusive Example2.html (but maybe it caused something else to work, so will need to revisit)
-    //check to make sure the progresive loading of css-charts works as before.
-    // if(level === 0){
-    //     el.dispatchEvent(new LoadEvent(clone));
-    // }
-
-    if (!cloneStashed) {
-        if (level !== 0 || el.attributes.length === 0) el.remove();
-    }
-
-}
-
-export class LoadEvent extends Event implements ILoadEvent {
-    static eventName: loadEventName = 'load';
-    constructor(public clone: DocumentFragment) {
-        super(LoadEvent.eventName);
-    }
-}
-
-interface HTMLElementEventMap {
-    'load': LoadEvent,
-}

package/doCleanup.js

@@ -1,31 +0,0 @@
-export function doCleanup(htmlSrc, clone, options = {
-    removeInner: '[itemprop]:not([itemscope])',
-    removeOuter: '[itemprop][itemscope]'
-}) {
-    const removeInner = htmlSrc.getAttribute('remove-inner') || options.removeInner;
-    if (removeInner) {
-        const removeInnerEls = clone.querySelectorAll(removeInner);
-        for (const removeInnerEl of removeInnerEls) {
-            if ('href' in removeInnerEl) {
-                removeInnerEl.href = '';
-            }
-            else if ('value' in removeInnerEl) {
-                removeInnerEl.value = '';
-            }
-            else if ('datetime' in removeInnerEl) {
-                removeInnerEl.datetime = '';
-            }
-            else {
-                //any other exceptions?                       
-                removeInnerEl.textContent = '';
-            }
-        }
-    }
-    const removeOuter = htmlSrc.getAttribute('remove-outer') || options.removeOuter;
-    if (removeOuter) {
-        const removeOuterEls = clone.querySelectorAll(removeOuter);
-        for (const removeOuterEl of removeOuterEls) {
-            removeOuterEl.remove();
-        }
-    }
-}

package/doCleanup.ts

@@ -1,34 +0,0 @@
-interface doCleanUpOptions {
-    removeInner?: string;
-    removeOuter?: string;
-}
-
-export function doCleanup(htmlSrc: HTMLElement, clone: DocumentFragment, options: doCleanUpOptions = {
-    removeInner: '[itemprop]:not([itemscope])',
-    removeOuter: '[itemprop][itemscope]'
-}){
-    const removeInner = htmlSrc.getAttribute('remove-inner') || options.removeInner;
-    if(removeInner){
-        const removeInnerEls = clone.querySelectorAll(removeInner);
-        for(const removeInnerEl of removeInnerEls){
-            if('href' in removeInnerEl){
-                removeInnerEl.href = '';
-            } else if ('value' in removeInnerEl){
-                removeInnerEl.value = '';
-            }else if('datetime' in removeInnerEl){
-                removeInnerEl.datetime = '';
-            }else{ 
-                //any other exceptions?                       
-                removeInnerEl.textContent = '';
-            }
-        }
-    }
-    const removeOuter = htmlSrc.getAttribute('remove-outer') || options.removeOuter;
-    if(removeOuter){
-        const removeOuterEls = clone.querySelectorAll(removeOuter);
-        for(const removeOuterEl of removeOuterEls){
-            removeOuterEl.remove();
-        }
-    }
-
-}

package/getWhereAttrSelector.js

@@ -1,83 +0,0 @@
-export async function getWhereAttrSelector(whereAttr, withoutAttrs) {
-    const { hasBase, hasBranchIn, hasRootIn } = whereAttr;
-    let fullListOfAttrs = [];
-    const partitionedAttrs = [];
-    if (hasBase !== undefined) {
-        const hasRootInGuaranteed = hasRootIn || [{
-                start: '',
-                context: 'Both'
-            }];
-        let prefixLessMatches = [];
-        const hasBaseIsString = typeof hasBase === 'string';
-        const baseSelector = hasBaseIsString ? hasBase : hasBase[1];
-        const rootToBaseDelimiter = hasBaseIsString ? '-' : hasBase[0];
-        if (hasBranchIn !== undefined) {
-            let baseToBranchDelimiter = '-';
-            let branches;
-            if (hasBranchIn.length === 2 && Array.isArray(hasBranchIn[1])) {
-                baseToBranchDelimiter = hasBranchIn[0];
-                branches = hasBranchIn[1];
-            }
-            else {
-                branches = hasBranchIn;
-            }
-            prefixLessMatches = branches.map(x => ({
-                rootToBaseDelimiter,
-                base: baseSelector,
-                baseToBranchDelimiter: x ? baseToBranchDelimiter : '',
-                branch: x
-            }));
-        }
-        else {
-            prefixLessMatches.push({
-                rootToBaseDelimiter,
-                base: baseSelector,
-            });
-        }
-        for (const rootCnfg of hasRootInGuaranteed) {
-            const { start } = rootCnfg;
-            for (const match of prefixLessMatches) {
-                const { base, baseToBranchDelimiter, branch, rootToBaseDelimiter } = match;
-                let branchIdx = 0;
-                for (const prefixLessMatch of prefixLessMatches) {
-                    const { base, baseToBranchDelimiter, branch } = prefixLessMatch;
-                    const startAndRootToBaseDelimiter = start ? `${start}${rootToBaseDelimiter}` : '';
-                    //TODO:  could probably reduce the size of the code below
-                    if (branch) {
-                        //will always have branch?
-                        const name = `${startAndRootToBaseDelimiter}${base}${baseToBranchDelimiter}${branch}`;
-                        fullListOfAttrs.push(name);
-                        partitionedAttrs.push({
-                            root: start,
-                            name,
-                            base,
-                            branch,
-                            branchIdx,
-                            rootCnfg
-                        });
-                    }
-                    else {
-                        const name = `${startAndRootToBaseDelimiter}${base}`;
-                        fullListOfAttrs.push(name);
-                        partitionedAttrs.push({
-                            root: start,
-                            name,
-                            base,
-                            rootCnfg,
-                            branchIdx
-                        });
-                    }
-                    branchIdx++;
-                }
-            }
-        }
-    }
-    fullListOfAttrs = Array.from(new Set(fullListOfAttrs));
-    const listOfSelectors = fullListOfAttrs.map(s => `${withoutAttrs}[${s}]`);
-    const calculatedSelector = listOfSelectors.join(',');
-    return {
-        fullListOfAttrs,
-        calculatedSelector,
-        partitionedAttrs,
-    };
-}

package/getWhereAttrSelector.ts

@@ -1,92 +0,0 @@
-import {AttrParts, RootCnfg, WhereAttr} from './ts-refs/mount-observer/types';
-export async function getWhereAttrSelector(whereAttr: WhereAttr, withoutAttrs: string){
-    const {hasBase, hasBranchIn, hasRootIn} = whereAttr;
-
-    let fullListOfAttrs: Array<string> = [];
-    const partitionedAttrs: Array<AttrParts> = [];
-    if(hasBase !== undefined){
-        const hasRootInGuaranteed: Array<RootCnfg> = hasRootIn || [{
-            start: '',
-            context: 'Both'
-        } as RootCnfg];
-        
-        let prefixLessMatches: Array<{
-            rootToBaseDelimiter: string,
-            base: string,
-            branch?: string,
-            leaf?: string //todo,
-            baseToBranchDelimiter?: string,
-        }> = [];
-        const hasBaseIsString = typeof hasBase === 'string';
-        const baseSelector = hasBaseIsString ? hasBase : hasBase[1];
-        const rootToBaseDelimiter = hasBaseIsString ? '-' : hasBase[0];
-        if(hasBranchIn !== undefined){
-            let baseToBranchDelimiter = '-';
-            let branches: Array<string> | undefined;
-            if(hasBranchIn.length === 2 && Array.isArray(hasBranchIn[1])){
-                baseToBranchDelimiter = hasBranchIn[0];
-                branches = hasBranchIn[1];
-            }else{
-                branches = hasBranchIn as Array<string>;
-            }
-            prefixLessMatches = branches.map(x => ({
-                rootToBaseDelimiter,
-                base: baseSelector,
-                baseToBranchDelimiter: x ? baseToBranchDelimiter : '',
-                branch: x
-            }));
-        }else{
-            prefixLessMatches.push({
-                rootToBaseDelimiter,
-                base: baseSelector,
-            })
-        }
-        for(const rootCnfg of hasRootInGuaranteed){
-            const {start} = rootCnfg;
-            for(const match of prefixLessMatches){
-                const {base, baseToBranchDelimiter, branch, rootToBaseDelimiter} = match;
-                let branchIdx = 0;
-                for(const prefixLessMatch of prefixLessMatches){
-                    const {base, baseToBranchDelimiter, branch} = prefixLessMatch;
-                    const startAndRootToBaseDelimiter = start ? `${start}${rootToBaseDelimiter}` : '';
-                    //TODO:  could probably reduce the size of the code below
-                    if(branch){
-                        //will always have branch?
-                        const name = `${startAndRootToBaseDelimiter}${base}${baseToBranchDelimiter}${branch}`
-                        fullListOfAttrs.push(name);
-                        partitionedAttrs.push({
-                            root: start,
-                            name,
-                            base,
-                            branch,
-                            branchIdx,
-                            rootCnfg
-                        });
-                    }else{
-                        const name = `${startAndRootToBaseDelimiter}${base}`;
-                        fullListOfAttrs.push(name);
-                        partitionedAttrs.push({
-                            root: start,
-                            name,
-                            base,
-                            rootCnfg,
-                            branchIdx
-                        });
-                    }
-                    branchIdx++;
-                }
-                
-            } 
-        }
-    }
-
-    fullListOfAttrs = Array.from(new Set(fullListOfAttrs));
-    const listOfSelectors = fullListOfAttrs.map(s => `${withoutAttrs}[${s}]`);
-    const calculatedSelector = listOfSelectors.join(',');
-    return {
-        fullListOfAttrs,
-        calculatedSelector,
-        partitionedAttrs,
-    };
-        
-}

package/preloadContent.js

@@ -1,44 +0,0 @@
-import { upShadowSearch } from './upShadowSearch.js';
-const remoteTemplElSym = Symbol.for('du3y+tfsAUGFHMG/iHZiMQ');
-Object.defineProperty(HTMLTemplateElement.prototype, 'remoteContent', {
-    get() {
-        const templ = this;
-        const src = templ.getAttribute('src');
-        if (src === null) {
-            const head = document.head;
-            if (window[remoteTemplElSym] === undefined) {
-                window[remoteTemplElSym] = 0;
-            }
-            const id = templ.id || `mount-observer-${window[remoteTemplElSym]++}`;
-            const sourceTempl = document.createElement('template');
-            sourceTempl.id = '' + id;
-            sourceTempl.content.appendChild(templ.content);
-            head.append(sourceTempl);
-            templ.innerHTML = '';
-            templ.setAttribute('src', `#${id}`);
-            templ.setAttribute('rel', 'preload');
-            templ[remoteTemplElSym] = new WeakRef(sourceTempl);
-            return sourceTempl.content;
-        }
-        {
-            const test = templ[remoteTemplElSym]?.deref();
-            if (test !== undefined)
-                return test.content;
-            if (templ.getAttribute('rel') !== 'preload')
-                throw 'NI';
-            const isIntraDoc = src[0] === '#';
-            if (!isIntraDoc)
-                throw 'NI';
-            const id = src.substring(1);
-            const remoteTempl = upShadowSearch(templ, id);
-            if (!(remoteTempl instanceof HTMLTemplateElement))
-                throw 404; //not found
-            templ[remoteTemplElSym] = new WeakRef(remoteTempl);
-            return remoteTempl.content;
-            //templ.dispatchEvent(new Event('load'));
-        }
-    }
-});
-export function preloadContent(templ) {
-    const content = templ.remoteContent;
-}

package/preloadContent.ts

@@ -1,47 +0,0 @@
-import {TemplateWithRemoteContent} from './ts-refs/mount-observer/types.js';
-import {upShadowSearch} from './upShadowSearch.js';
-const remoteTemplElSym = Symbol.for('du3y+tfsAUGFHMG/iHZiMQ');
-
-Object.defineProperty(HTMLTemplateElement.prototype, 'remoteContent', {
-    get(){
-        const templ = this as HTMLTemplateElement;
-        const src = templ.getAttribute('src');
-        if(src === null){
-            const head = document.head;
-            if((<any>window)[remoteTemplElSym] === undefined ){
-                (<any>window)[remoteTemplElSym] = 0;
-            }
-            const id = templ.id || `mount-observer-${(<any>window)[remoteTemplElSym]++}`;
-            const sourceTempl = document.createElement('template');
-            sourceTempl.id = '' + id;
-            sourceTempl.content.appendChild(templ.content);
-            head.append(sourceTempl);
-            templ.innerHTML = '';
-            templ.setAttribute('src', `#${id}`);
-            templ.setAttribute('rel', 'preload');
-            (<any>templ)[remoteTemplElSym] = new WeakRef(sourceTempl);
-            return sourceTempl.content;
-        }
-        {
-            const test = (<any>templ)[remoteTemplElSym]?.deref();
-            if(test !== undefined) return test.content;
-            if(templ.getAttribute('rel') !== 'preload') throw 'NI';
-            const isIntraDoc = src[0] === '#';
-            if(!isIntraDoc) throw 'NI';
-            const id = src.substring(1);
-            const remoteTempl = upShadowSearch(templ, id);
-            if(!(remoteTempl instanceof HTMLTemplateElement)) throw 404; //not found
-            (<any>templ)[remoteTemplElSym] = new WeakRef(remoteTempl);
-            return remoteTempl.content;
-            //templ.dispatchEvent(new Event('load'));
-        }
-
-    }
-})
-
-export function preloadContent(
-    templ: HTMLTemplateElement,
-) {
-    const content = (<any>templ).remoteContent;
-    
-}