mount-observer 0.0.112 → 0.1.1

package/refid/itemprops.ts

@@ -1,67 +0,0 @@
-function getFirst(element: Element, prop: string): Element | null {
-    for(const child of element.children){
-        const itemprop = child.getAttribute('itemprop');
-        if(itemprop === prop){
-            return child;
-        }
-        if(!child.hasAttribute('itemscope')){
-            const found = getFirst(child, prop);
-            if(found) return found;
-        }
-    }
-    return null;
-}
-const proxies = new WeakMap<Element, ProxyConstructor>();
-const refLookup = new WeakMap<Element, PropManagerLookup>();
-Object.defineProperty(Element.prototype, 'itemprops', {
-
-    get(){
-        if(!proxies.has(this)){
-            const handler = {
-                get(target: Element, prop: string) {
-                    let lookup: PropManagerLookup;
-                    if(refLookup.has(target)){
-                        lookup = refLookup.get(target)!;
-                    }else{
-                        lookup = new Map<Prop, ItempropManager>();
-                        refLookup.set(target, lookup);
-                    }
-                    if(lookup.has(prop)){
-                        return lookup.get(prop);
-                    }else{
-                        const propManager = new ItempropManager(target, prop as string);
-                        lookup.set(prop, propManager);
-                        return propManager;
-                    }
-                },
-                
-            };
-            proxies.set(this, new Proxy(this, handler));
-        }
-
-
-        return proxies.get(this); 
-    }
-});
-
-type Prop = string;
-
-type PropManagerLookup = Map<Prop, ItempropManager>;
-
-class ItempropManager extends EventTarget {
-    #el: WeakRef<Element>;
-    #prop: Prop;
-    constructor(el: Element, prop: Prop){
-        super();
-        this.#el = new WeakRef(el);
-        this.#prop = prop;
-    }
-
-    get first(){
-        const el = this.#el.deref();
-        if(el === undefined) return null;
-        return getFirst(el, this.#prop);
-    }
-    
-}
-

package/refid/joinMatching.js

@@ -1,56 +0,0 @@
-import { camelToKebab } from './camelToKebab.js';
-const proxies = new WeakMap();
-Object.defineProperty(Element.prototype, 'joinMatching', {
-    get() {
-        if (!proxies.has(this)) {
-            const handler = {
-                get(target, prop) {
-                    const jm = new JoinMatching(target, prop);
-                    return jm;
-                },
-            };
-            proxies.set(this, new Proxy(this, handler));
-        }
-        return proxies.get(this);
-    },
-});
-export class JoinMatching {
-    #proxy;
-    elRef;
-    attr;
-    constructor(el, prop) {
-        this.elRef = new WeakRef(el);
-        this.attr = camelToKebab(prop);
-    }
-    get fromClosest() {
-        const handler = {
-            get(self, closestQry) {
-                const { elRef, attr } = self;
-                const el = elRef.deref();
-                if (el === undefined)
-                    return [];
-                const attrVal = el.getAttribute(attr);
-                const tryClosestQry = camelToKebab(closestQry);
-                let closest = el.closest(tryClosestQry);
-                if (closest === null)
-                    closest = el.closest(closestQry);
-                if (closest === null)
-                    throw 404;
-                return Array.from(closest.querySelectorAll(`[${attr}="${attrVal}"]`));
-                //console.log({self, closestQry, prop, el});
-            }
-        };
-        return new Proxy(this, handler);
-    }
-    get fromParent() {
-        const { elRef, attr } = this;
-        const el = elRef.deref();
-        if (el === undefined)
-            return [];
-        const { parentElement } = el;
-        if (parentElement === null)
-            return [];
-        const attrVal = el.getAttribute(attr);
-        return Array.from(parentElement.querySelectorAll(`[${attr}="${attrVal}"]`));
-    }
-}

package/refid/joinMatching.ts

@@ -1,54 +0,0 @@
-import {camelToKebab} from './camelToKebab.js';
-const proxies = new WeakMap<Element, ProxyConstructor>();
-Object.defineProperty(Element.prototype, 'joinMatching', {
-    get(){
-        if(!proxies.has(this)){
-            const handler = {
-                get(target: Element, prop: string) {
-                    const jm = new JoinMatching(target, prop);
-                    return jm;
-                },
-            }
-            proxies.set(this, new Proxy(this, handler));
-        }
-        return proxies.get(this);
-    },
-});
-
-export class JoinMatching {
-    #proxy: ProxyConstructor | undefined;
-    elRef: WeakRef<Element>;
-    attr: string;
-    constructor(el: Element, prop: string){
-        this.elRef = new WeakRef(el);
-        this.attr = camelToKebab(prop);
-    }
-
-    get fromClosest(){
-        const handler = {
-            get(self: JoinMatching, closestQry: string){
-                const {elRef, attr} = self;
-                const el = elRef.deref();
-                if(el === undefined) return [];
-                const attrVal = el.getAttribute(attr);
-                const tryClosestQry = camelToKebab(closestQry);
-                let closest = el.closest(tryClosestQry);
-                if(closest === null) closest = el.closest(closestQry);
-                if(closest === null) throw 404;
-                return Array.from(closest.querySelectorAll(`[${attr}="${attrVal}"]`))
-                //console.log({self, closestQry, prop, el});
-            }
-        }
-        return new Proxy(this, handler);
-    }
-
-    get fromParent(){
-        const {elRef, attr} = this;
-        const el = elRef.deref();
-        if(el === undefined) return [];
-        const {parentElement} = el;
-        if(parentElement === null) return [];
-        const attrVal = el.getAttribute(attr);
-        return Array.from(parentElement.querySelectorAll(`[${attr}="${attrVal}"]`));
-    }
-}

package/refid/nudge.js

@@ -1,23 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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/refid/regIsh.js

@@ -1,27 +0,0 @@
-export const guid = 'La8Cx9vHsUOd03WomqdnPw';
-export const sym = Symbol.for(guid);
-import { arr } from './secretKeys.js';
-export function regIsh(scope, name, ctr) {
-    let map = scope[sym];
-    if (map === undefined) {
-        map = new Map();
-        scope[sym] = map;
-    }
-    if (map.has(name)) {
-        throw 403;
-    }
-    map.set(name, ctr);
-    ctr.prototype[Symbol.iterator] = function () {
-        var index = -1;
-        var data = this[arr];
-        return {
-            next: function () {
-                return {
-                    value: data === undefined ? undefined : data[++index],
-                    done: data === undefined || !(index in data)
-                };
-            }
-        };
-    };
-    document.dispatchEvent(new Event(guid));
-}

package/refid/regIsh.ts

@@ -1,31 +0,0 @@
-import {IshCtr} from '../ts-refs/mount-observer/types';
-export const guid = 'La8Cx9vHsUOd03WomqdnPw'
-export const sym = Symbol.for(guid);
-import {arr} from './secretKeys.js';
-
-export function regIsh(scope: Element | ShadowRoot | Document, name: string, ctr:IshCtr){
-    let map = (<any>scope)[sym] as Map<string, IshCtr>;
-    if(map === undefined){
-        map = new Map<string, IshCtr>();
-        (<any>scope)[sym] = map;
-    }
-    if(map.has(name)){
-        throw 403;
-    }
-    map.set(name, ctr);
-    ctr.prototype[Symbol.iterator] = function() {
-        var index = -1;
-        var data  = this[arr];
-
-        return {
-            next: function() {
-                return { 
-                    value: data === undefined ? undefined : data[++index], 
-                    done: data ===  undefined || !(index in data) 
-                }
-            }
-        };
-    };
-
-    document.dispatchEvent(new Event(guid));
-}

package/refid/secretKeys.js

@@ -1,5 +0,0 @@
-//using Symbol.for, which is easily hackaable, because if two different entry points 
-//come from different versions of mount-observer, things could get out of sync.
-//Not an issue if this was built into the browser, but it is an issue for a custom a library.
-//Do not make this file exportable, it is only for internal use.
-export const arr = Symbol.for('MHtiI353KU+aKBDlz/jR+A');

package/refid/secretKeys.ts

@@ -1,5 +0,0 @@
-//using Symbol.for, which is easily hackaable, because if two different entry points 
-//come from different versions of mount-observer, things could get out of sync.
-//Not an issue if this was built into the browser, but it is an issue for a custom a library.
-//Do not make this file exportable, it is only for internal use.
-export const arr = Symbol.for('MHtiI353KU+aKBDlz/jR+A');

package/refid/splitRefs.js

@@ -1,6 +0,0 @@
-export function splitRefs(refs) {
-    return refs
-        .split(' ')
-        .map(s => s.trim())
-        .filter(s => !!s);
-}

package/refid/splitRefs.ts

@@ -1,6 +0,0 @@
-export function splitRefs(refs: string){
-    return refs
-    .split(' ')
-    .map(s => s.trim())
-    .filter(s => !!s);
-}

package/refid/stdVal.js

@@ -1,15 +0,0 @@
-export function stdVal(el) {
-    const { localName } = el;
-    switch (localName) {
-        case 'form':
-            throw 'NI';
-        case 'input':
-            throw 'NI';
-        case 'a':
-            return el.href;
-        case 'data':
-            return JSON.parse(el.value);
-        default:
-            return el.textContent;
-    }
-}

package/refid/stdVal.ts

@@ -1,15 +0,0 @@
-export function stdVal(el: Element){
-    const {localName} = el;
-    switch(localName){
-        case 'form':
-            throw 'NI';
-        case 'input':
-            throw 'NI';
-        case 'a':
-            return (el as HTMLAnchorElement).href;
-        case 'data':
-            return JSON.parse((el as HTMLDataElement).value);
-        default:
-            return el.textContent;
-    }
-}

package/refid/via.js

@@ -1,114 +0,0 @@
-import { splitRefs } from './splitRefs.js';
-import { MountObserver } from '../MountObserver.js';
-import { camelToKebab } from './camelToKebab.js';
-const proxies = new WeakMap();
-const refLookup = new WeakMap();
-Object.defineProperty(Element.prototype, 'via', {
-    get() {
-        if (!proxies.has(this)) {
-            const handler = {
-                get(target, prop) {
-                    let lookup;
-                    if (refLookup.has(target)) {
-                        lookup = refLookup.get(target);
-                    }
-                    else {
-                        lookup = new Map();
-                        refLookup.set(target, lookup);
-                    }
-                    if (lookup.has(prop)) {
-                        return lookup.get(prop);
-                    }
-                    else {
-                        const refManager = new RefManager(target, prop);
-                        lookup.set(prop, refManager);
-                        return refManager;
-                    }
-                    //return Reflect.get(target, prop);
-                },
-            };
-            proxies.set(this, new Proxy(this, handler));
-        }
-        return proxies.get(this);
-    }
-});
-class RefManager extends EventTarget {
-    #el;
-    #children;
-    #attr;
-    #lastAttrVal = '';
-    //#parents: Array<WeakRef<Element>> | undefined;
-    constructor(el, prop) {
-        super();
-        this.#attr = camelToKebab(prop);
-        this.#el = new WeakRef(el);
-    }
-    get children() {
-        const el = this.#el.deref();
-        if (el === undefined)
-            return [];
-        const attr = el.getAttribute(this.#attr);
-        if (this.#children === undefined || attr !== this.#lastAttrVal) {
-            if (!attr)
-                return [];
-            this.#lastAttrVal = attr;
-            const refIds = splitRefs(attr);
-            const qry = refIds.map(id => `#${id}`).join(',');
-            const rn = el.getRootNode();
-            const refsArr = Array.from(rn.querySelectorAll(qry));
-            const refs = new Map();
-            for (const ref of refsArr) {
-                refs.set(ref.id, new WeakRef(ref));
-            }
-            this.#children = refs;
-            const mo = new MountObserver({
-                on: qry,
-                do: {
-                    mount: (el) => {
-                        const id = el.id;
-                        if (id && !this.#children?.has(id)) {
-                            this.#children?.set(id, new WeakRef(el));
-                            this.dispatchEvent(new ChangeEvent([el], []));
-                        }
-                    },
-                    dismount: (el) => {
-                        const id = el.id;
-                        if (id && this.#children?.has(id)) {
-                            this.#children?.delete(id);
-                            this.dispatchEvent(new ChangeEvent([], [el]));
-                        }
-                    }
-                }
-            });
-            mo.observe(rn);
-            this.dispatchEvent(new ChangeEvent((refsArr), []));
-        }
-        return Array.from(this.#children?.values().map(ref => ref.deref()).filter(el => el !== undefined)) || [];
-    }
-    get parents() {
-        //for now, hold off on caching parents until a use case arises
-        //if(this.#parents === undefined){
-        const el = this.#el.deref();
-        if (el === undefined)
-            return [];
-        if (el.id === '')
-            return [];
-        const rn = el.getRootNode();
-        const qry = `[${this.#attr}~="${el.id}"]`;
-        const parents = Array.from(rn.querySelectorAll(qry));
-        //this.#parents = parents.map(parent => new WeakRef(parent));
-        return parents;
-        //}
-        //return this.#parents.map(ref => ref.deref()).filter(el => el !== undefined) || [];
-    }
-}
-export class ChangeEvent extends Event {
-    addedChildren;
-    removedChildren;
-    static eventName = 'change';
-    constructor(addedChildren, removedChildren) {
-        super(ChangeEvent.eventName);
-        this.addedChildren = addedChildren;
-        this.removedChildren = removedChildren;
-    }
-}

package/refid/via.ts

@@ -1,113 +0,0 @@
-import {splitRefs} from './splitRefs.js';
-import {MountObserver} from '../MountObserver.js';
-import {camelToKebab} from './camelToKebab.js';
-const proxies = new WeakMap<Element, ProxyConstructor>();
-const refLookup = new WeakMap<Element, RefLookup>();
-Object.defineProperty(Element.prototype, 'via', {
-    get(){
-        if(!proxies.has(this)){
-            const handler = {
-                get(target: Element, prop: string) {
-                    let lookup: RefLookup;
-                    if(refLookup.has(target)){
-                        lookup = refLookup.get(target)!;
-                    }else{
-                        lookup = new Map<attr, RefManager>();
-                        refLookup.set(target, lookup);
-                    }
-                    if(lookup.has(prop)){
-                        return lookup.get(prop);
-                    }else{
-                        const refManager = new RefManager(target, prop as string);
-                        lookup.set(prop, refManager);
-                        return refManager;
-                    }
-                    //return Reflect.get(target, prop);
-                },
-                
-            };
-            proxies.set(this, new Proxy(this, handler));
-        }
-        return proxies.get(this);
-    }
-});
-
-type attr = string;
-
-type RefLookup = Map<attr, RefManager>;
-
-class RefManager extends EventTarget {
-    #el: WeakRef<Element>;
-    #children: Map<string, WeakRef<Element>> | undefined;
-    #attr: string;
-    #lastAttrVal: string = '';
-    //#parents: Array<WeakRef<Element>> | undefined;
-    constructor(el: Element, prop: string){
-        super();
-        this.#attr = camelToKebab(prop);
-        this.#el = new WeakRef(el);
-    }
-    get children(){
-        const el = this.#el.deref();
-        if(el === undefined) return [];
-        const attr = el.getAttribute(this.#attr);
-        if(this.#children === undefined || attr !== this.#lastAttrVal){
-            if(!attr) return [];
-            this.#lastAttrVal = attr;
-            const refIds = splitRefs(attr);
-            const qry = refIds.map(id => `#${id}`).join(',');
-            const rn = el.getRootNode() as DocumentFragment;
-            const refsArr = Array.from(rn.querySelectorAll(qry));
-            const refs = new Map<string, WeakRef<Element>>();
-            for(const ref of refsArr){
-                refs.set(ref.id, new WeakRef(ref));
-            }
-            this.#children = refs;
-            const mo = new MountObserver({
-                on: qry,
-                do: {
-                    mount: (el) => {
-                        const id = el.id;
-                        if(id && !this.#children?.has(id)){
-                            this.#children?.set(id, new WeakRef(el));
-                            this.dispatchEvent(new ChangeEvent([el], []));
-                        }
-                    },
-                    dismount: (el) => {
-                        const id = el.id;
-                        if(id && this.#children?.has(id)){
-                            this.#children?.delete(id);
-                            this.dispatchEvent(new ChangeEvent([], [el]));
-                        }
-                    }
-                }
-            });
-            mo.observe(rn);
-            this.dispatchEvent(new ChangeEvent((refsArr), []));
-        }
-        return Array.from(this.#children?.values().map(ref => ref.deref()).filter(el => el !== undefined)) || [];
-    }
-
-    get parents(){
-        //for now, hold off on caching parents until a use case arises
-        //if(this.#parents === undefined){
-            const el = this.#el.deref();
-            if(el === undefined) return [];
-            if(el.id === '') return [];
-            const rn = el.getRootNode() as DocumentFragment;
-            const qry = `[${this.#attr}~="${el.id}"]`;
-            const parents = Array.from(rn.querySelectorAll(qry));
-            //this.#parents = parents.map(parent => new WeakRef(parent));
-            return parents;
-        //}
-        //return this.#parents.map(ref => ref.deref()).filter(el => el !== undefined) || [];
-        
-    }
-}
-
-export class ChangeEvent extends Event {
-    static eventName = 'change';
-    constructor(public addedChildren: Array<Element>, public removedChildren: Array<Element>){ 
-        super(ChangeEvent.eventName);
-    }
-}

package/slotkin/affine.js

@@ -1,39 +0,0 @@
-import { toQuery } from './toQuery.js';
-import { splitRefs } from '../refid/splitRefs.js';
-export function affine(fragment, el) {
-    const qry = toQuery(el);
-    const { elFragment, map } = prep(el);
-    const matches = Array.from(fragment.querySelectorAll(qry));
-    for (const match of matches) {
-        clone(match, elFragment, map);
-    }
-}
-export function prep(el) {
-    const elFragment = new DocumentFragment();
-    const clone = el.cloneNode(true);
-    for (const child of clone.childNodes) {
-        elFragment.appendChild(child);
-    }
-    const insertAttrs = el.getAttribute('-i');
-    let map = null;
-    if (insertAttrs !== null) {
-        const attrs = splitRefs(insertAttrs);
-        map = {};
-        for (const attr of attrs) {
-            map[attr] = el.getAttribute(attr);
-        }
-    }
-    return {
-        elFragment, map
-    };
-}
-export function clone(matchingElement, elFragment, map) {
-    const fragmentClone = elFragment.cloneNode(true);
-    matchingElement.replaceChildren(fragmentClone);
-    if (map !== null) {
-        for (const key in map) {
-            const value = map[key];
-            matchingElement.setAttribute(key, value);
-        }
-    }
-}

package/slotkin/affine.ts

@@ -1,46 +0,0 @@
-import {toQuery} from './toQuery.js';
-import {splitRefs} from '../refid/splitRefs.js';
-
-export function affine(fragment: DocumentFragment | Element, 
-    el: Element){
-    const qry = toQuery(el);
-    const {elFragment, map} = prep(el);
-    const matches = Array.from(fragment.querySelectorAll(qry));
-    for(const match of matches){
-        clone(match, elFragment, map);
-    }
-}
-
-export function prep(el: Element){
-    const elFragment = new DocumentFragment();
-    const clone = el.cloneNode(true);
-    for(const child of clone.childNodes){
-        elFragment.appendChild(child);
-    }
-    const insertAttrs = el.getAttribute('-i');
-    let map: {[key: string]: string} | null = null;
-    if(insertAttrs !== null){
-        const attrs = splitRefs(insertAttrs);
-        map = {};
-        for(const attr of attrs){
-            map[attr] = el.getAttribute(attr)!;
-        }
-    }
-    return {
-        elFragment, map
-    }
-}
-
-export function clone(
-    matchingElement: Element, 
-    elFragment: DocumentFragment, 
-    map: {[key: string]: string} | null){
-    const fragmentClone = elFragment.cloneNode(true) as DocumentFragment;
-    matchingElement.replaceChildren(fragmentClone);
-    if(map !== null){
-        for(const key in map){
-            const value = map[key]!;
-            matchingElement.setAttribute(key, value);
-        }
-    }
-}