mount-observer 0.0.111 → 0.1.0

package/RootMutObs.ts

@@ -1,58 +0,0 @@
-import {mutationEventName, AddMutationEventListener, MountInit} from './ts-refs/mount-observer/types';
-
-export class RootMutObs extends EventTarget{
-    #idleTimeout: number; //TODO: make this configurable
-    #idlePointer = 0;
-    constructor(rootNode: Node, options: MountInit ){
-        super();
-        this.#idleTimeout = options?.idleTimeout ?? 30;
-        this.#mutationObserver = new MutationObserver(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(){
-        this.#mutationObserver.disconnect();
-    }
-}
-
-
-
-// https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
-
-/**
- * The `mutation-event` event represents something that happened.
- * We can document it here.
- */
-export class MutationEvent extends Event implements MutationEvent {
-    static eventName: mutationEventName = 'mutation-event';
-  
-    constructor(public mutationRecords: Array<MutationRecord>) {
-      // Since these are hard-coded, dispatchers can't get them wrong
-      super(MutationEvent.eventName);
-    }
-}
-
-
-
-

package/Synthesizer.js

@@ -1,125 +0,0 @@
-import { MountObserver } from './MountObserver.js';
-export class Synthesizer extends HTMLElement {
-    #mutationObserver;
-    mountObserverElements = [];
-    mutationCallback(mutationList) {
-        for (const mutation of mutationList) {
-            const { addedNodes } = mutation;
-            for (const node of addedNodes) {
-                if (!(node instanceof HTMLScriptElement) || node.type !== 'mountobserver')
-                    continue;
-                const mose = node;
-                this.mountObserverElements.push(mose);
-                this.activate(mose);
-                const e = new SynthesizeEvent(mose);
-                this.dispatchEvent(e);
-            }
-        }
-    }
-    connectedCallback() {
-        this.hidden = true;
-        const init = {
-            childList: true
-        };
-        this.querySelectorAll('script[type="mountobserver"]').forEach(s => {
-            const mose = s;
-            this.mountObserverElements.push(mose);
-            this.activate(mose);
-        });
-        this.#mutationObserver = new MutationObserver(this.mutationCallback.bind(this));
-        this.#mutationObserver.observe(this, init);
-        this.inherit();
-    }
-    checkIfAllowed(mose) {
-        if (this.hasAttribute('passthrough'))
-            return false;
-        const { id } = mose;
-        if (this.hasAttribute('include')) {
-            const split = this.getAttribute('include').split(' ');
-            if (!split.includes(id))
-                return false;
-        }
-        if (this.hasAttribute('exclude')) {
-            const split = this.getAttribute('exclude').split(' ');
-            if (split.includes(id))
-                return false;
-        }
-        return true;
-    }
-    activate(mose) {
-        if (!this.checkIfAllowed(mose))
-            return;
-        mose.dispatchEvent(new LoadEvent());
-        const { init, do: d } = mose;
-        const mi = {
-            do: d,
-            ...init
-        };
-        const mo = new MountObserver(mi);
-        mose.observer = mo;
-        mo.observe(this.getRootNode());
-    }
-    import(mose) {
-        const { init, do: d, id, synConfig } = mose;
-        const se = document.createElement('script');
-        se.type = 'mountobserver';
-        se.init = { ...init };
-        se.id = id;
-        se.do = { ...d };
-        se.synConfig = { ...synConfig };
-        this.appendChild(se);
-    }
-    inherit() {
-        const rn = this.getRootNode();
-        const host = rn.host;
-        if (!host)
-            return;
-        const parentShadowRealm = host.getRootNode();
-        const { localName } = this;
-        let parentScopeSynthesizer = parentShadowRealm.querySelector(localName);
-        if (parentScopeSynthesizer === null) {
-            parentScopeSynthesizer = document.createElement(localName);
-            if (parentShadowRealm === document) {
-                document.head.appendChild(parentScopeSynthesizer);
-            }
-            else {
-                parentShadowRealm.appendChild(parentScopeSynthesizer);
-            }
-        }
-        ;
-        const { mountObserverElements } = parentScopeSynthesizer;
-        for (const moe of mountObserverElements) {
-            this.import(moe);
-        }
-        parentScopeSynthesizer.addEventListener(SynthesizeEvent.eventName, e => {
-            this.import(e.mountObserverElement);
-        });
-    }
-    disconnectedCallback() {
-        if (this.#mutationObserver !== undefined) {
-            this.#mutationObserver.disconnect();
-        }
-        for (const mose of this.mountObserverElements) {
-            mose.observer.disconnect(this.getRootNode());
-        }
-    }
-}
-// https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
-/**
- * The `mutation-event` event represents something that happened.
- * We can document it here.
- */
-export class SynthesizeEvent extends Event {
-    mountObserverElement;
-    static eventName = 'synthesize';
-    constructor(mountObserverElement) {
-        super(SynthesizeEvent.eventName);
-        this.mountObserverElement = mountObserverElement;
-    }
-}
-export class LoadEvent extends Event {
-    static eventName = 'load';
-    constructor() {
-        super(LoadEvent.eventName);
-    }
-}

package/Synthesizer.ts

@@ -1,130 +0,0 @@
-import {MountInit, MOSE} from './ts-refs/mount-observer/types';
-import {MountObserver} from './MountObserver.js';
-
-export abstract class Synthesizer extends HTMLElement{
-    #mutationObserver: MutationObserver | undefined;
-
-    mountObserverElements: Array<MOSE> = [];
-
-    mutationCallback(mutationList: Array<MutationRecord>){
-        for (const mutation of mutationList) {
-            const {addedNodes} = mutation;
-            for(const node of addedNodes){
-                if(!(node instanceof HTMLScriptElement) || node.type !== 'mountobserver') continue;
-                const mose = node as MOSE;
-                this.mountObserverElements.push(mose);
-                this.activate(mose);
-                const e = new SynthesizeEvent(mose);
-                this.dispatchEvent(e);
-            }
-            
-        }
-    }
-
-    connectedCallback(){
-        this.hidden = true;
-        const init: MutationObserverInit = {
-            childList: true
-        };
-        this.querySelectorAll('script[type="mountobserver"]').forEach(s => {
-            const mose = s as MOSE;
-            this.mountObserverElements.push(mose);
-            this.activate(mose);
-        });
-        this.#mutationObserver = new MutationObserver(this.mutationCallback.bind(this));
-        this.#mutationObserver.observe(this, init);
-        this.inherit();
-    }
-
-    checkIfAllowed(mose: MOSE){
-        if(this.hasAttribute('passthrough')) return false;
-        const {id} = mose;
-        if(this.hasAttribute('include')){
-            const split = this.getAttribute('include')!.split(' ');
-            if(!split.includes(id)) return false;
-        }
-        if(this.hasAttribute('exclude')){
-            const split = this.getAttribute('exclude')!.split(' ');
-            if(split.includes(id)) return false;
-        }
-        return true;
-    }
-
-    activate(mose: MOSE){
-        if(!this.checkIfAllowed(mose)) return;
-        mose.dispatchEvent(new LoadEvent());
-        const {init, do: d} = mose;
-        const mi: MountInit = {
-            do: d,
-            ...init
-        };
-        const mo = new MountObserver(mi);
-        mose.observer = mo;
-        mo.observe(this.getRootNode());
-    }
-
-    import(mose: MOSE){
-        const {init, do: d, id, synConfig} = mose;
-        const se = document.createElement('script') as MOSE;
-        se.type='mountobserver';
-        se.init = {...init};
-        se.id = id;
-        se.do = {...d};
-        se.synConfig = {...synConfig};
-        this.appendChild(se);
-    }
-
-    inherit(){
-        const rn = this.getRootNode();
-        const host = (<any>rn).host;
-        if(!host) return;
-        const parentShadowRealm = host.getRootNode();
-        const {localName} = this;
-        let parentScopeSynthesizer = parentShadowRealm.querySelector(localName) as Synthesizer;
-        if(parentScopeSynthesizer === null) {
-            parentScopeSynthesizer = document.createElement(localName) as Synthesizer;
-            if(parentShadowRealm === document) {
-                document.head.appendChild(parentScopeSynthesizer);
-            }else{
-                parentShadowRealm.appendChild(parentScopeSynthesizer);
-            }
-        };
-        const {mountObserverElements} = parentScopeSynthesizer;
-        for(const moe of mountObserverElements){
-            this.import(moe);
-        }
-        parentScopeSynthesizer.addEventListener(SynthesizeEvent.eventName, e => {
-            this.import((e as SynthesizeEvent).mountObserverElement)
-        })
-
-    }
-    disconnectedCallback(){
-        if(this.#mutationObserver !== undefined){
-            this.#mutationObserver.disconnect();
-        }
-        for(const mose of this.mountObserverElements){
-            mose.observer.disconnect(this.getRootNode());
-        }
-    }
-}
-
-// https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
-/**
- * The `mutation-event` event represents something that happened.
- * We can document it here.
- */
-export class SynthesizeEvent extends Event{
-    static eventName = 'synthesize';
-  
-    constructor(public mountObserverElement: MOSE) {
-      super(SynthesizeEvent.eventName);
-    }
-}
-
-export class LoadEvent extends Event {
-    static eventName = 'load';
-
-    constructor(){
-        super(LoadEvent.eventName);
-    }
-}

package/bindish.js

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

package/bindish.ts

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

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,
-}