mount-observer 0.0.112 → 0.1.1

package/Newish.ts

@@ -1,169 +0,0 @@
-import { BindishOptions, HasIsh, Ishcycle } 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';
-import {arr} from './refid/secretKeys.js';
-export const attached = Symbol.for('xyyspnstnU+CDrNVa0VnxA');
-export class Newish implements EventListenerObject {
-    queue: Array<any> = [];
-    isResolved = false;
-    #ce: Ishcycle | undefined;
-    #ref: WeakRef<Element>;
-
-    #options: BindishOptions;
-    #args: [enhancedElement: Element, target: Node, itemscope: string] | undefined;
-    constructor(
-        enhancedElement: Element,
-        target: Node,
-        itemscope: string, 
-        options?: BindishOptions
-    ){
-        this.#args = [enhancedElement, target, itemscope];
-        this.#options = options || {assigner: Object.assign};
-        this.#ref = new WeakRef(enhancedElement);
-    }
-    async handleEvent() {
-       const enhancedElement = this.#ref.deref();
-       if(!enhancedElement) return;
-       await this.#attachItemrefs(enhancedElement);
-    }
-
-    async do(){
-        const [enhancedElement, target, itemscope] = this.#args!;
-        this.#args = undefined;
-        if((<any>enhancedElement)[attached] === true) return;
-        (<any>enhancedElement)[attached] = true;
-        const options = this.#options;
-        const {initPropVals, ctr} = options;
-        let ce: Ishcycle;
-        if(ctr === undefined){
-            const foundCtr = await getIsh(enhancedElement.isConnected ? enhancedElement :target, itemscope)! as any;
-
-            const initPropVals =  (<any>enhancedElement)['ish'];
-
-            const resolvedConstructor = foundCtr.constructor.name === 'AsyncFunction' ? await foundCtr() : foundCtr;
-            const isInstance = initPropVals instanceof resolvedConstructor
-            ce = isInstance ? initPropVals : new resolvedConstructor() as Ishcycle;
-            if(initPropVals !== undefined && !isInstance) this.queue.push(initPropVals);
-        }else{
-            ce = new (ctr as any)();
-            if(initPropVals !== undefined) this.queue.push(initPropVals);
-        }
-        // if('tbd' in ce && typeof ce['tbd'] === 'function'){
-        //     await ce['tbd'](ce, enhancedElement, this.#options);
-        // }
-
-        this.#ce = ce;
-        const self = this;
-        Object.defineProperty(enhancedElement, 'ish', {
-            get(){
-                return self.#ce;
-            },
-            set(nv: any){
-                if(self.#ce === nv) return;
-                self.queue.push(nv);
-                self.#assignGingerly(false);
-            },
-            enumerable: true,
-            configurable: true,
-        });
-        await this.#assignGingerly(true);
-            if('<mount>' in ce && typeof ce['<mount>'] === 'function'){
-            await ce['<mount>'](ce, enhancedElement as HasIsh & Element, this.#options)
-        }
-        //attach any itemref references
-        await this.#attachItemrefs(enhancedElement);
-        const et = ObsAttr(enhancedElement, 'itemref');
-        et.addEventListener('attr-changed', this);
-        this.isResolved = true;
-        return ce;
-    }
-
-    
-
-    #alreadyAttached = new WeakSet<Element>;
-
-    async #attachItemrefs(enhancedElement: Element){
-        //TODO:  watch for already attached itemrefs to be removed and remove them from the set
-        // and call outOfScopeCallback on them
-        if('<inScope>' in (<any>this.#ce) && enhancedElement.hasAttribute('itemref')){
-            await import('./refid/via.js');
-            const itemref = (<any>enhancedElement).via.itemref
-            const refs = itemref.children as Element[];
-            for(const ref of refs){
-                if(this.#alreadyAttached.has(ref)) continue;
-                (<any>this.#ce)['<inScope>'](this.#ce, ref, this.#options);
-            }
-            itemref.addEventListener('change', this);
-
-        }
-
-    }
-
-    async #assignGingerly(fromDo: boolean){
-        const actions = new Set<Action>();
-        if(fromDo){
-            actions.add('attached');
-        }
-        let ce = this.#ce!;
-        if(ce === undefined){
-            throw 500;
-        }
-        let foundArray = false;
-        const hasArrFilter = 'arr=>' in ce && typeof ce['arr=>'] === 'function';
-        const ref = this.#ref.deref();
-        while(this.queue.length > 0 ){
-            const fi = this.queue.shift();
-            //TODO: Provide support for a virtual slice of a very large list
-            //TODO:  Maybe should check if iterable rather than an array?
-            if(Array.isArray(fi)){
-                foundArray = true;
-                let filtered = fi as any | undefined;
-                if(hasArrFilter){
-                    filtered = await (ce['arr=>']!)(ce, fi, ref! as HasIsh & Element, this.#options);
-                }
-                (<any>ce)[arr] = filtered;
-                actions.add('ishListAssigned');
-            }else{
-                let {assigner} = this.#options;
-                if(assigner === undefined){
-                    assigner = Object.assign;
-                }
-                await assigner!(ce, fi);
-                actions.add('ishAssigned');
-            }
-            
-        }
-        if(fromDo && !foundArray && hasArrFilter){
-            const filtered = await (ce['arr=>']!)(ce, undefined, ref! as HasIsh &  Element, this.#options);
-            if(filtered !== undefined){
-                (<any>ce)[arr] = filtered;
-                actions.add('ishListAssigned');
-            }
-        }
-        
-        if(ref){
-            ref.dispatchEvent(new IshEvent(Array.from(actions)));
-        }   
-    }
-
-}
-
-type Action = 
-    | 'attached' 
-    | 'ishAssigned'
-    | 'ishListAssigned'
-
-interface IIshEvent{
-    actions: Array<Action>;
-}
-
-export class IshEvent extends Event implements IIshEvent{
-    static eventName = 'ish';
-
-    constructor(public actions: Array<Action>){
-        super(IshEvent.eventName);
-    }
-}

package/ObsAttr.js

@@ -1,18 +0,0 @@
-export function ObsAttr(element, attr) {
-    const eventTarget = new EventTarget();
-    const obs = new MutationObserver((mutations) => {
-        eventTarget.dispatchEvent(new Event('attr-changed'));
-        // for(const mutation of mutations){
-        //     if(mutation.type === 'attributes' && mutation.attributeName === attr){
-        //         obs.disconnect();
-        //         eventTarget.dispatchEvent(new Event('obsAttr'));
-        //         break;
-        //     }
-        // }
-    });
-    obs.observe(element, {
-        attributes: true,
-        attributeFilter: [attr],
-    });
-    return eventTarget;
-}

package/ObsAttr.ts

@@ -1,18 +0,0 @@
-export function ObsAttr(element: Element, attr: string): EventTarget{
-    const eventTarget = new EventTarget();
-    const obs = new MutationObserver((mutations) => {
-        eventTarget.dispatchEvent(new Event('attr-changed'));
-        // for(const mutation of mutations){
-        //     if(mutation.type === 'attributes' && mutation.attributeName === attr){
-        //         obs.disconnect();
-        //         eventTarget.dispatchEvent(new Event('obsAttr'));
-        //         break;
-        //     }
-        // }
-    });
-    obs.observe(element, {
-        attributes: true,
-        attributeFilter: [attr],
-    });
-    return eventTarget;
-}

package/RootMutObs.js

@@ -1,49 +0,0 @@
-export class RootMutObs extends EventTarget {
-    #idleTimeout; //TODO: make this configurable
-    #idlePointer = 0;
-    constructor(rootNode, options) {
-        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;
-    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 {
-    mutationRecords;
-    static eventName = 'mutation-event';
-    constructor(mutationRecords) {
-        // Since these are hard-coded, dispatchers can't get them wrong
-        super(MutationEvent.eventName);
-        this.mutationRecords = mutationRecords;
-    }
-}

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()
-        }
-    }
-}