mount-observer 0.0.111 → 0.1.0

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

package/slotkin/beKindred.js

@@ -1,45 +0,0 @@
-import { toQuery } from './toQuery.js';
-import { MountObserver } from '../MountObserver.js';
-import { prep, clone } from './affine.js';
-const previousObservers = new WeakMap();
-export function beKindred(fragment, el) {
-    if (!fragment.isConnected)
-        throw 'too soon, use affine';
-    const qry = toQuery(el);
-    const previousObserversOfFragment = previousObservers.get(fragment);
-    if (previousObserversOfFragment !== undefined) {
-        const staleObservers = previousObserversOfFragment.filter(x => el.matches(x[0]));
-        const nonStaleObservers = previousObserversOfFragment.filter(x => !el.matches(x[0]));
-        if (staleObservers !== undefined && staleObservers.length > 0) {
-            for (const staleObserver of staleObservers) {
-                staleObserver[1].disconnect(fragment);
-            }
-        }
-        previousObservers.set(fragment, nonStaleObservers);
-    }
-    const { elFragment, map } = prep(el);
-    const mo = new MountObserver({
-        on: qry,
-        do: {
-            mount: (matchingElement) => {
-                clone(matchingElement, elFragment, map);
-                // 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);
-                //     }
-                // }
-            }
-        }
-    });
-    mo.observe(fragment);
-    if (previousObservers.has(fragment)) {
-        previousObservers.get(fragment).push([qry, mo]);
-    }
-    else {
-        previousObservers.set(fragment, [[qry, mo]]);
-    }
-    return mo;
-}

package/slotkin/beKindred.ts

@@ -1,55 +0,0 @@
-import {toQuery} from './toQuery.js';
-import {splitRefs} from '../refid/splitRefs.js';
-import {MountObserver} from '../MountObserver.js';
-import {prep, clone} from './affine.js';
-
-type OnMountObserver = [string, MountObserver];
-const previousObservers = new WeakMap<DocumentFragment | Element, Array<OnMountObserver>>();
-
-export function beKindred(
-    fragment: DocumentFragment | Element, 
-    el: Element,
-){
-    if(!fragment.isConnected) throw 'too soon, use affine';
-    const qry = toQuery(el);
-    const previousObserversOfFragment = previousObservers.get(fragment);
-    if(previousObserversOfFragment !== undefined){
-        const staleObservers = previousObserversOfFragment.filter(x => el.matches(x[0]));
-        const nonStaleObservers = previousObserversOfFragment.filter(x => !el.matches(x[0]));
-        if(staleObservers !== undefined && staleObservers.length > 0){
-            for(const staleObserver of staleObservers){
-                staleObserver[1].disconnect(fragment);
-            }
-        }
-        previousObservers.set(fragment, nonStaleObservers);
-    }
-
-
-
-    const {elFragment, map} = prep(el);
-
-    const mo = new MountObserver({
-        on: qry,
-        do: {
-            mount: (matchingElement) => {
-                clone(matchingElement, elFragment, map);
-                // 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);
-                //     }
-                // }
-            }
-        }
-    });
-    mo.observe(fragment);
-    if(previousObservers.has(fragment)){
-        previousObservers.get(fragment)!.push([qry, mo]);
-    }else{
-        previousObservers.set(fragment, [[qry, mo]]);
-    }
-    return mo;
-
-}

package/slotkin/getBreadth.js

@@ -1,19 +0,0 @@
-export function getBreadth(innerEl, base) {
-    const priors = [];
-    let ps = innerEl.previousSibling;
-    while (ps !== null && !(ps.nodeType === Node.COMMENT_NODE && ps.data.includes(` ${base} `))) {
-        priors.push(ps);
-        ps = ps.previousSibling;
-    }
-    if (ps !== null)
-        priors.push(ps);
-    const nexts = [];
-    let ns = innerEl.nextSibling;
-    while (ns !== null && !(ns.nodeType === Node.COMMENT_NODE && ns.data.includes(` /${base} `))) {
-        nexts.push(ns);
-        ns = ns.nextSibling;
-    }
-    if (ns !== null)
-        nexts.push(ns);
-    return [...priors.reverse(), ...nexts];
-}

package/slotkin/getBreadth.ts

@@ -1,21 +0,0 @@
-export function getBreadth(
-    innerEl: Element, 
-    base: string,
-){
-    const priors: Array<Node> = [];
-    let ps = innerEl.previousSibling as Comment | null;
-    while(ps !== null && !(ps.nodeType === Node.COMMENT_NODE && (ps as Comment).data.includes( ` ${base} `))){
-        priors.push(ps);
-        ps = ps.previousSibling as Comment | null;
-    }
-    if(ps !== null) priors.push(ps);
-    const nexts: Array<Node> = [];
-    let ns = innerEl.nextSibling as Comment | null; 
-    while(ns !== null && !(ns.nodeType === Node.COMMENT_NODE && (ns as Comment).data.includes( ` /${base} `))){
-        nexts.push(ns);
-        ns = ns.nextSibling as Comment | null;
-    }
-    if(ns !== null) nexts.push(ns);
-    return [...priors.reverse(), ...nexts];
-        
-}

package/slotkin/getFrag.js

@@ -1,22 +0,0 @@
-export function getFrag(templ, base) {
-    let openComment = templ.nextSibling;
-    if (openComment === null || openComment.nodeType !== Node.COMMENT_NODE)
-        return null;
-    if (base !== undefined && !openComment.data.includes(` ${base} `))
-        return null;
-    if (base === undefined) {
-        base = openComment.data.trim().split(' ')[1];
-        if (base === undefined)
-            return null;
-    }
-    const returnArr = [openComment];
-    let ns = openComment.nextSibling;
-    while (ns !== null && !(ns.nodeType === Node.COMMENT_NODE && ns.data.includes(` /${base} `))) {
-        returnArr.push(ns);
-        ns = ns.nextSibling;
-    }
-    if (ns === null)
-        return null;
-    returnArr.push(ns);
-    return returnArr;
-}

package/slotkin/getFrag.ts

@@ -1,21 +0,0 @@
-export function getFrag(
-    templ: HTMLTemplateElement, 
-    base?: string,
-){
-    let openComment = templ.nextSibling as Comment | null;
-    if(openComment === null || openComment.nodeType !== Node.COMMENT_NODE) return null;
-    if(base !== undefined && !openComment.data.includes(` ${base} `)) return null;
-    if(base === undefined){
-        base = openComment.data.trim().split(' ')[1];
-        if(base === undefined) return null;
-    }
-    const returnArr: Array<Node> = [openComment];
-    let ns = openComment.nextSibling;
-    while(ns !== null && !(ns.nodeType === Node.COMMENT_NODE && (ns as Comment).data.includes( ` /${base} `))){
-        returnArr.push(ns);
-        ns = ns.nextSibling;
-    }
-    if(ns === null) return null;
-    returnArr.push(ns);
-    return returnArr;
-}

package/slotkin/toQuery.js

@@ -1,12 +0,0 @@
-export function toQuery(el) {
-    //from the element el, create a selector that matches all the classes and parts of the element el, as 
-    //well as the values of all the attributes of el.
-    const classes = Array.from(el.classList).map(c => `.${c}`).join('');
-    const parts = Array.from(el.part).map(p => `[part~="${p}"`).join('');
-    const attributes = Array.from(el.attributes)
-        .filter(attr => attr.name !== '-i')
-        .map(attr => `[${attr.name}="${attr.value}"]`)
-        .join('');
-    const { localName } = el;
-    return `${localName}${classes}${parts}${attributes}`;
-}

package/slotkin/toQuery.ts

@@ -1,13 +0,0 @@
-
-export function toQuery(el: Element): string {
-    //from the element el, create a selector that matches all the classes and parts of the element el, as 
-    //well as the values of all the attributes of el.
-    const classes = Array.from(el.classList).map(c => `.${c}`).join('');
-    const parts = Array.from(el.part).map(p => `[part~="${p}"`).join('');
-    const attributes = Array.from(el.attributes)
-        .filter(attr => attr.name !== '-i')
-        .map(attr => `[${attr.name}="${attr.value}"]`)
-        .join('');
-    const {localName} = el;
-    return `${localName}${classes}${parts}${attributes}`;
-}

package/slotkin/wrap.js

@@ -1,13 +0,0 @@
-export const wrapped = Symbol.for('50tzQZt95ECXUtHF7a40og');
-export function wrap(templ, base, force = false) {
-    const wasWrapped = templ[wrapped];
-    if (!wasWrapped) {
-        templ[wrapped] = base;
-        if (force || templ.content.childElementCount > 1) {
-            const start = document.createComment(` ${base} `);
-            templ.content.prepend(start);
-            const end = document.createComment(` /${base} `);
-            templ.content.appendChild(end);
-        }
-    }
-}

package/slotkin/wrap.ts

@@ -1,18 +0,0 @@
-export const wrapped = Symbol.for('50tzQZt95ECXUtHF7a40og');
-
-export function wrap(
-    templ: HTMLTemplateElement, 
-    base: string,
-    force: boolean = false,
-){
-    const wasWrapped = (<any>templ)[wrapped];
-    if (!wasWrapped) {
-        (<any>templ)[wrapped] = base;
-        if (force || templ.content.childElementCount > 1) {
-            const start = document.createComment(` ${base} `);
-            templ.content.prepend(start);
-            const end = document.createComment(` /${base} `);
-            templ.content.appendChild(end);
-        }
-    }
-}

package/ts-refs/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Bruce B. Anderson
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/ts-refs/README.md

@@ -1,18 +0,0 @@
-# ts-refs
-
-The recent typescript [blog post](https://devblogs.microsoft.com/typescript/announcing-typescript-5-5/#the-jsdoc-import-tag) found it amusing, it seems, to imply that developers were all quite aware that the buildless typescript Microsoft supports had support for importing modules from type definition files:
-
-> To avoid this, developers typically had to use import(...) types in JSDoc comments.
-
-Where were developers supposed to learn that such an option even existed?  
-
-[No](https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html) [idea](https://www.google.com/search?q=jsdoc+import+types+from+type+definition+files&sca_esv=f583aec8b3671997&sxsrf=ADLYWILWHAvQOa24i969M3KTSHnvI4CCtQ%3A1722464335667&source=hp&ei=T7iqZu_wJuTzkPIP3NfOsAw&iflsig=AL9hbdgAAAAAZqrGX5766U3yi_U8VDQynbrnqQTG0duO&ved=0ahUKEwiv1PTWp9KHAxXkOUQIHdyrE8YQ4dUDCBg&uact=5&oq=jsdoc+import+types+from+type+definition+files&gs_lp=Egdnd3Mtd2l6Ii1qc2RvYyBpbXBvcnQgdHlwZXMgZnJvbSB0eXBlIGRlZmluaXRpb24gZmlsZXMyBRAhGKABMgUQIRigATIFECEYoAEyBRAhGKABMgUQIRirAjIFECEYqwJIpwpQAFgAcAB4AJABAJgBeqABeqoBAzAuMbgBA8gBAPgBAvgBAZgCAaAChgGYAwCSBwMwLjGgB5wH&sclient=gws-wiz)
-
-Anyway, my experiments with it are promising, and I'm excited to use this feature, in order to avoid adding to the global warming that requiring compiling my ts files has to be adding to.
-
-But I've found that a sticking point to this solution has to do with [lack of full support for bare import specifiers / import maps](https://github.com/microsoft/TypeScript/issues/43326).  This causes problems when importing types from one package, which imports chains of types from another dependent package.
-
-Having gone this far, I feel compelled to find workarounds until that critical issue is sorted out.
-
-So the solution is this interim library, shared by projects that use this feature, via git's [submodules](https://git-scm.com/book/en/v2/Git-Tools-Submodules)
-

package/ts-refs/be-a-beacon/types.d.ts

@@ -1,22 +0,0 @@
-import {IEnhancement, BEAllProps, EMC} from '../trans-render/be/types';
-
-export interface EndUserProps extends IEnhancement{
-    eventName: string, //TODO
-}
-
-export interface AllProps extends EndUserProps{
-    emc: EMC<any, AllProps>,
-}
-
-export type AP = AllProps;
-
-export type PAP = Partial<AP>;
-
-export type ProPAP = Promise<PAP>;
-
-export type BAP = AP & BEAllProps;
-
-export interface Actions{
-    hydrate(self: BAP): PAP;
-    retire(self: BAP): void;
-}

package/ts-refs/be-alit/types.d.ts

@@ -1 +0,0 @@
-//using be-render-neutral for now, but that could change in the future

package/ts-refs/be-based/types.d.ts

@@ -1,32 +0,0 @@
-import {IEnhancement, BEAllProps} from '../trans-render/be/types';
-
-export interface EndUserProps extends IEnhancement{
-    forAll?: Array<string>,
-    base?: string,
-    fileName?: string
-    puntOn?: Array<string>,
-}
-
-export interface AllProps extends EndUserProps{
-    forAll: Array<string>,
-}
-
-
-export interface PuntEvent{
-    count: number,
-    instance: Element,
-}
-
-export type AP = AllProps;
-
-export type PAP = Partial<AP>;
-
-export type ProPAP = Promise<PAP>
-
-
-
-export interface Actions{
-    hydrate(self: AP & BEAllProps): PAP;
-    //finale(): void;
-}
-

package/ts-refs/be-bound/types.d.ts

@@ -1,65 +0,0 @@
-import {IEnhancement, BEAllProps} from '../trans-render/be/types';
-import { Specifier } from "../trans-render/dss/types";
-import {AbsorbingObject, SharingObject} from '../trans-render/asmr/types';
-
-export interface EndUserProps extends IEnhancement{
-    With?: Array<WithStatement>,
-    Between?: Array<BetweenStatement>,
-    with?: Array<WithStatement>,
-    between?: Array<BetweenStatement>,
-}
-
-export interface AllProps extends EndUserProps{
-    bindingRules: Array<BindingRule>,
-    bindings: Array<Binding>,
-    isParsed?: boolean,
-    rawStatements?: Array<string>
-}
-
-export type SignalEnhancement = 'be-value-added' | 'be-propagating' | undefined;
-
-export interface BindingRule {
-    
-    localProp?: string,
-    localEvent?: string,
-    remoteSpecifierString?: string,
-    remoteSpecifier?: Specifier,
-
-
-}
-
-export interface Binding {
-    //new and improved
-    localAbsObj: AbsorbingObject;
-    localShareObj: SharingObject;
-    remoteAbsObj: AbsorbingObject;
-    remoteShareObj: SharingObject;
-    //remoteRef: WeakRef<Element>;
-}
-
-export type AP = AllProps;
-
-export type PAP = Partial<AP>;
-
-export type ProPAP = Promise<PAP>;
-
-export type BAP = AP & BEAllProps;
-
-
-export interface Actions{
-    noAttrs(self: BAP): ProPAP;
-    getBindings(self: BAP): ProPAP;
-    hydrate(self: BAP): ProPAP;
-    onRawStatements(self: BAP): void;
-}
-
-export type WithStatement = string;
-
-export type BetweenStatement = string;
-
-export type TriggerSource = 'local' | 'remote' | 'tie';
-
-export interface SpecificityResult {
-    val?: any,
-    winner?: TriggerSource;
-}

package/ts-refs/be-buttoned-up/types.d.ts

@@ -1,21 +0,0 @@
-import {IEnhancement, BEAllProps} from '../trans-render/be/types';
-
-export interface EndUserProps extends IEnhancement<HTMLButtonElement>{
-    closeOnSelect: boolean;
-    eventName: string;
-}
-
-export interface AllProps extends EndUserProps {}
-
-export type AP = AllProps;
-
-export type PAP = Partial<AP>;
-
-export type ProPAP = Promise<PAP>;
-
-
-export type BAP = AP & BEAllProps;
-
-export interface Actions{
-    hydrate(self: BAP): PAP
-}