mount-observer 0.0.111 → 0.1.0

package/refid/ism.ts

@@ -1,81 +0,0 @@
-import {upShadowSearch} from '../upShadowSearch.js';
-import {stdVal} from './stdVal.js';
-
-Object.defineProperty(HTMLElement.prototype, 'ism', {
-    get(){
-        const el = this as HTMLElement;
-        if(!el.hasAttribute('itemscope')) return;
-        return parse(el);
-    }
-});
-
-type ScopedLists = {[key: string] : any[]}
-
-const parsedItempropMaps = new WeakMap<HTMLScriptElement, any>();
-
-export function parse(el: HTMLElement, scope: any = {}, scopedLists: ScopedLists = {}){
-    const itemprop = el.getAttribute('itemprop');
-    if(itemprop){
-        scope[itemprop] = stdVal(el); //TODO full logic
-    }
-    const itempropmap = el.getAttribute('itempropmap');
-    if(itempropmap){
-        //const el = document.getElementById(itempropmap);
-        const jsonEl = upShadowSearch(el, itempropmap)
-        if(!jsonEl) throw 500;
-        if(!parsedItempropMaps.has(jsonEl)){
-            parsedItempropMaps.set(jsonEl, JSON.parse(jsonEl.innerHTML));
-        }
-        const parsed =/** @type {ItemPropMap} */  (parsedItempropMaps.get(jsonEl));
-        for(const key in parsed){
-            const attr = el.getAttribute(key);
-            if(attr === null) continue;
-            const rhs = parsed[key];
-            switch(typeof rhs){
-                case 'string':
-                    scope[rhs] = attr;
-                    break;
-                case 'object':
-                    const {instanceOf, mapsTo} = rhs;
-                    switch(instanceOf){
-                        case 'Number':
-                        case Number:
-                            scope[mapsTo] = Number(attr);
-                            break;
-                        case 'Object':
-                        case Object:
-                        case 'Boolean':
-                        case Boolean:
-                            scope[mapsTo] = JSON.parse(attr);
-                            break;
-                        
-
-                    }
-            }
-        }
-
-    }
-    const children = Array.from(el.children);
-    let itemscopeMapToPass = scopedLists;
-    for(const child of children){ 
-        if(!(child instanceof HTMLElement)) continue;
-        const childHasItemScopeAttr = child.hasAttribute('itemscope')
-        const objToPass = childHasItemScopeAttr ? {} : scope;
-        if(childHasItemScopeAttr) {
-            itemscopeMapToPass = {};
-        }
-        parse(child, objToPass, itemscopeMapToPass);
-        const isItemScopeAndChildHasBothItempropAndItemscope = scopedLists && child.hasAttribute('itemprop') && child.hasAttribute('itemscope');
-        if(isItemScopeAndChildHasBothItempropAndItemscope){
-            const itemprops = child.getAttribute('itemprop')!.split(" ").filter(x => x);
-            for(const itemprop of itemprops){
-                if(!scopedLists![itemprop]) scopedLists![itemprop] = [];
-                scopedLists![itemprop].push(objToPass);
-            }
-        }
-    }
-    return {
-        scope,
-        scopedLists
-    };
-}

package/refid/itemprops.js

@@ -1,60 +0,0 @@
-"use strict";
-function getFirst(element, prop) {
-    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();
-const refLookup = new WeakMap();
-Object.defineProperty(Element.prototype, 'itemprops', {
-    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 propManager = new ItempropManager(target, prop);
-                        lookup.set(prop, propManager);
-                        return propManager;
-                    }
-                },
-            };
-            proxies.set(this, new Proxy(this, handler));
-        }
-        return proxies.get(this);
-    }
-});
-class ItempropManager extends EventTarget {
-    #el;
-    #prop;
-    constructor(el, 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/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;
-    }
-}