mount-observer 0.0.112 → 0.1.1

package/readAttrs.ts

@@ -1,60 +0,0 @@
-import { AttrChangeInfo, AttrParts, MountInit } from "./ts-refs/mount-observer/types";
-
-export function readAttrs(
-    match: Element, mountInit: MountInit, branchIndexes?: Set<number>,
-    fullListOfEnhancementAttrs?: string[],
-    attrParts?: AttrParts[],
-){
-        //TODO:  externalize
-        const fullListOfAttrs = fullListOfEnhancementAttrs;
-        const attrChangeInfos: Array<AttrChangeInfo> = [];
-        const oldValue = null;
-        if(fullListOfAttrs !== undefined){
-            
-            
-            for(let idx = 0, ii = fullListOfAttrs.length; idx < ii; idx++){
-                const parts = attrParts![idx];
-                const {branchIdx} = parts;
-                if(branchIndexes !== undefined){
-                    if(!branchIndexes.has(branchIdx)) continue;
-                }
-                const name = fullListOfAttrs[idx];
-                
-                const newValue = match.getAttribute(name);
-                
-                attrChangeInfos.push({
-                    idx,
-                    isSOfTAttr: false,
-                    newValue,
-                    oldValue,
-                    name,
-                    parts
-                });
-            }
-
-        }
-        const {observedAttrsWhenMounted} = mountInit;
-        if(observedAttrsWhenMounted !== undefined){
-            for(const observedAttr of observedAttrsWhenMounted){
-                const attrIsString = typeof observedAttr === 'string';
-                const name = attrIsString ? observedAttr : observedAttr.name;
-                let mapsTo: string | undefined;
-                let newValue = match.getAttribute(name);
-                if(!attrIsString){
-                    const {customParser, instanceOf, mapsTo: mt, valIfNull} = observedAttr;
-                    if(instanceOf || customParser) throw 'NI';
-                    if(newValue === null) newValue = valIfNull;
-                    mapsTo = mt;
-                }
-                attrChangeInfos.push({
-                    isSOfTAttr: true,
-                    newValue,
-                    oldValue,
-                    name,
-                    mapsTo
-                });
-            }
-        }
-
-        return attrChangeInfos;
-    }

package/refid/README.md

@@ -1,259 +0,0 @@
-# Auto generated id polyfill
-
-*mount-observer* has a polyfill for [this proposal](https://github.com/whatwg/html/issues/11585), but with some differences due to the limited ability a polyfill can provide compared to the platform.
-
-## Installation
-
-Any DOM fragment that gets observed by the MountObserver class instance will automatically apply  the rules discussed below.
-
-In the absence of such observing, call:
-
-```JavaScript
-import {genIds} from 'mount-observer/refid/genIds.js';
-genIds(oElementContainer);
-```
-
-## Activation
-
-To activate a scoped id generation, add attribute -id to the last streamed element inside either the fieldset element, or an element adorned by the itemscope attribute, or the (Shadow) root.  
-
-If the -id attribute is not added to the last streamed element, but elsewhere, then the functionality will likely work the same, but may possibly miss some elements after the attribute, in the unlikely event that the auto generated id's are created prior to some additional elements streaming in.
-
-## Example 1
-
-```html
-<fieldset disabled>
-    <label>
-        LHS: <input data-id={{lhs}}>
-    </label>
-    
-    <label for=rhs>
-        RHS: <input data-id={{rhs}}>
-    </label>
-    
-    <template -id defer-🎚️ 🎚️='on if isEqual, based on #{{lhs}} and #{{rhs}}.'>
-        <div>LHS === RHS</div>
-    </template>
-</fieldset>
-```
-
-adjusts the DOM so as to become:
-
-```html
-<fieldset>
-    <label>
-        LHS: <input id=gid-0 data-id=lhs>
-    </label>
-    
-    <label for=rhs>
-        RHS: <input id=gid-1 data-id=rhs>
-    </label>
-    
-    <template 🎚️='on if isEqual, based on #gid-0 and #gid-1.'>
-        <div>LHS === RHS</div>
-    </template>
-</fieldset>
-```
-
-Note that the numbers after gid- will vary depending on previous DOM elements that may have been processed by the ID generator.
-
-Note the use of the "disabled" attribute on the fieldset element, and the defer-🎚️ attributes, both of which get removed after the id auto generation completes.  The idea is that while the live DOM tree has these attributes, allowing user interactivity could be problematic before the id's are generated, so at a minimum, we should disable input elements, and prevent [enhancements from loading](https://github.com/WICG/webcomponents/issues/1000) until the id connection is established, scoped preferably by fieldset elements, or itemscope attributes, or the root document as a last resort.
-
-The reason why we keep the names lhs, rhs in the data-id attribute after stripping away curly braces and other side-effect inducing symbols, is that some libraries will want to refer to the name that was used to generate the id's.
-
-
-## Creating id references with global or built in attributes
-
-Again, because 1. unlike the platform, we can't manipulate the server-streamed DOM before the browser sees it, and 2.  we don't want to "confuse" the browser by creating nonsensical id reference connections that aren't valid, even temporarily, this polyfill opts to use data-* attributes as a way of staging the dynamic attribute adjustments.  So for example:
-
-```html
-<fieldset disabled>
-    <scratch-box>
-        <label slot=label data-for={{createDemo}}>Create demo</label>
-        <input data-id="{{@ createDemo}}" type=checkbox>
-    </scratch-box>
-    <scratch-box>
-        <label slot=label data-for={{writeArticle}}>Write article</label>
-        <input data-id="{{@ writeArticle}}" type=checkbox>
-    </scratch-box>
-    <scratch-box>
-        <label slot=label data-for={{exercise}}>Exercise</label>
-        <input -id data-id="{{@ exercise}}" type=checkbox>
-    </scratch-box>
-</fieldset>
-```
-
-becomes
-
-```html
-<fieldset disabled>
-    <scratch-box enh-be-importing=scratch-box/root.mjs>
-        <label slot=label for=gid-0>Create demo</label>
-        <input id=gid-0 name=createDemo data-id=createDemo type=checkbox>
-    </scratch-box>
-    <scratch-box>
-        <label slot=label for=gid-1>Write article</label>
-        <input id=gid-1 name=writeArticle data-id=writeArticle type=checkbox>
-    </scratch-box>
-    <scratch-box>
-        <label slot=label for=gid-2>Exercise</label>
-        <input id=gid-2 name=exercise data-id=exercise type=checkbox>
-    </scratch-box>
-</fieldset>
-```
-
-It is often the case that the name we want to use to auto generate the unique id's will match the "name" attribute we want to assign the element, and/or the itemprop and/or the class and/or the part.  This can be done in a few ways.
-
-## Side Effects from dynamic data-id attribute
-
-```html
-<form>
-    <fieldset disabled>
-        <label>
-            LHS: <input class=my-class data-id="{{@. lhs}}">
-        </label>
-        
-        <label for=rhs>
-            RHS: <span contenteditable part=my-part data-id="{{|% rhs}}">
-        </label>
-        
-        <template -id defer-🎚️ 🎚️='on if isEqual, based on #{{lhs}} and #{{rhs}}.'>
-            <div>LHS === RHS</div>
-        </template>
-    </fieldset>
-</form>
-```
-
-results in
-
-```html
-<form>
-    <fieldset>
-        <label>
-            LHS: <input name=lhs class="my-part lhs" id=gid-0  data-id=lhs>
-        </label>
-        
-        <label for=rhs>
-            RHS: <span itemprop=rhs part="my-part rhs" id=gid-1 data-id=rhs>
-        </label>
-        
-        <template 🎚️='on if isEqual, based on #gid-0 and #gid-1.'>
-            <div>LHS === RHS</div>
-        </template>
-    </fieldset>
-</form>
-```
-
-So we are using some special symbols to correspond with key attributes:
-
- Symbol | Translates to         | Connection / meaning                                                                                                                             |
-|--------|-----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
-| #      | id                    | # used by css for id, also bookmarks in urls that points to id's                                                                                 |
-| \|     | itemprop              | "Pipe" is kind of close to itemprop, and is half of a dollar sign, and it kind of looks like an I                                                |
-| @      | name                  | Second letter of name. Also, common in social media sites/github to type this letter in order to select someone's name.                          |
-| $      | itemscope + itemprop  | Combination of S for Scope and Pipe which resembles itemprop a bit                                                                               |
-| %      | part                  | Starts with p, percent is used for indicating what proportion something is.                                                                      |
-| .      | class                 | css selector                                                                                                                                     |
-
-These match the symbols used in the [template instantiation productivity proposal](https://github.com/WICG/webcomponents/issues/1013#issuecomment-2257557589).
-
-The examples that follow go in the opposite direction -- we "infer" the id generating name based on either the name of the element, or one of the key attributes
-
-## By tag name
-
-Id's based on the element name
-
-```html
-<ways-of-science itemscope>
-    <carrot-nosed-woman #></carrot-nosed-woman>
-    <a-duck #></a-duck>
-    <template -id defer-🎚️
-        🎚️="on based on #{{carrot-nosed-woman}}::weight-change and #{{a-duck}}::molting."
-        onchange="event.r = Math.abs(event.args[0] - event.args[1]) < 10"
-    >
-        <div>A witch!</div>
-        <div>Burn her!</div>
-    </template>
-</ways-of-science>
-```
-
-results in:
-
-```html
-<ways-of-science itemscope>
-    <carrot-nosed-woman id=gid-0 data-id=carrot-nosed-woman></carrot-nosed-woman>
-    <a-duck id=gid-1 data-id=a-duck></a-duck>
-    <template
-        🎚️="on based on #gid-0::weight-change and #gid-1::molting."
-        onchange="event.r = Math.abs(event.args[0] - event.args[1]) < 10"
-    >
-        <div>A witch!</div>
-        <div>Burn her!</div>
-    </template>
-</ways-of-science>
-```
-
-## By N@me
-
-```html
-<form>
-    <fieldset disabled>
-        <input name=isHappy type="checkbox" @>
-        <template -id defer-🎚️ 🎚️='on when #{{isHappy}}.'>
-            <my-content></my-content>
-        </template>
-    </fieldset>
-</form>
-```
-
-results in:
-
-```html
-<form>
-    <fieldset>
-        <input name=isHappy id=gid-0 data-id=isHappy type="checkbox">
-        <template 🎚️='on when #gid-0.'>
-            <my-content></my-content>
-        </template>
-    </fieldset>
-</form>
-```
-
-## By |temprop
-
-```html
-<form>
-    <fieldset disabled>
-        <data value=true itemprop=isHappy hidden |></data>
-        <template -id defer-🎚️ 🎚️='on when #{{isHappy}}.'>
-            <my-content></my-content>
-        </template>
-    </fieldset>
-</form>
-```
-
-results in:
-
-```html
-<form>
-    <fieldset>
-        <data value=true data-id=isHappy id=gid-0 itemprop=isHappy hidden></data>
-        <template 🎚️='on when #gid-0.'>
-            <my-content></my-content>
-        </template>
-    </fieldset>
-</form>
-```
-
-<!--
-## By Itemscope
-
-```html
-<table>
-    <tbody>
-        <tr itemscope=myRowHandler #>
-        </tr>
-    </tbody>
-</table>
-```
--->

package/refid/arr.js

@@ -1,4 +0,0 @@
-export function arr(inp) {
-    return inp === undefined ? []
-        : Array.isArray(inp) ? inp : [inp];
-}

package/refid/arr.ts

@@ -1,4 +0,0 @@
-export function arr<T = any>(inp: T | T[] | undefined) : T[] {
-    return inp === undefined ? []
-        : Array.isArray(inp) ? inp : [inp];
-}

package/refid/camelToKebab.js

@@ -1,4 +0,0 @@
-const ctlRe = /(?=[A-Z])/;
-export function camelToKebab(s) {
-    return s.split(ctlRe).join('-').toLowerCase();
-}

package/refid/camelToKebab.ts

@@ -1,4 +0,0 @@
-const ctlRe = /(?=[A-Z])/;
-export function camelToKebab(s: string) {
-    return s.split(ctlRe).join('-').toLowerCase();
-}

package/refid/genIds.js

@@ -1,190 +0,0 @@
-import { nudge } from './nudge.js';
-import { getCount } from './getCount.js';
-const attrMap = {
-    '@': 'name',
-    '|': 'itemprop',
-};
-const scopeMatches = '[itemscope],fieldset';
-export function inScope(scopeFragment, el) {
-    const closest = el.closest(scopeMatches); //TODO account for itemref?
-    if (closest === null)
-        return true;
-    if (scopeFragment === closest)
-        return true;
-    if (scopeFragment.contains(closest))
-        return false;
-    return true;
-}
-export function genIds(enhancedElement) {
-    // const {parentElement} = enhancedElement;
-    // if(parentElement === null) throw 404;
-    const scopeFragment = (enhancedElement.closest(scopeMatches) || enhancedElement.getRootNode());
-    //first find all elements with attribute #
-    const hashTest = '[\\#]';
-    const hashIds = Array.from(scopeFragment.querySelectorAll(hashTest)).filter(x => inScope(scopeFragment, x));
-    if (scopeFragment instanceof Element && scopeFragment.matches(hashTest))
-        hashIds.push(scopeFragment);
-    const uniqueCheck = new Set();
-    for (const hi of hashIds) {
-        if (!(hi instanceof HTMLElement))
-            continue;
-        const idName = hi.getAttribute('itemscope') || hi.localName;
-        if (uniqueCheck.has(idName))
-            throw 500;
-        uniqueCheck.add(idName);
-        let sideEffects = '';
-        const hashValue = hi.getAttribute('#');
-        if (hashValue) {
-            sideEffects = `${hashValue} `;
-        }
-        hi.dataset.id = `{{${sideEffects}${idName}}}`;
-        hi.removeAttribute('#');
-    }
-    //now find all elements with attribute @
-    const nameTest = '[name]:not([name=""])[\\@]';
-    const names = Array.from(scopeFragment.querySelectorAll(nameTest)).filter(x => inScope(scopeFragment, x));
-    if (scopeFragment instanceof Element && scopeFragment.matches(nameTest))
-        names.push(scopeFragment);
-    for (const nameEl of names) {
-        if (!(nameEl instanceof HTMLElement))
-            continue;
-        const val = nameEl.getAttribute('name');
-        if (uniqueCheck.has(val))
-            throw 500;
-        uniqueCheck.add(val);
-        let sideEffects = '';
-        const nameValue = nameEl.getAttribute('@');
-        if (nameValue) {
-            sideEffects = `${nameValue} `;
-        }
-        nameEl.dataset.id = `{{${sideEffects}${val}}}`;
-        nameEl.removeAttribute('@');
-    }
-    //now find all elements with attribute |
-    const itemScopeTest = '[itemprop]:not([itemprop=""])[\\|]';
-    const itemprops = Array.from(scopeFragment.querySelectorAll(itemScopeTest)).filter(x => inScope(scopeFragment, x));
-    if (scopeFragment instanceof Element && scopeFragment.matches(itemScopeTest))
-        itemprops.push(scopeFragment);
-    for (const itempropEl of itemprops) {
-        if (!(itempropEl instanceof HTMLElement))
-            continue;
-        const val = itempropEl.getAttribute('itemprop');
-        if (uniqueCheck.has(val))
-            throw 500;
-        uniqueCheck.add(val);
-        let sideEffects = '';
-        const nameValue = itempropEl.getAttribute('|');
-        if (nameValue) {
-            sideEffects = `${nameValue} `;
-        }
-        itempropEl.dataset.id = `{{${sideEffects}${val}}}`;
-        itempropEl.removeAttribute('|');
-    }
-    const dataIdTest = '[data-id^="{{"][data-id$="}}"]';
-    const dataIds = Array.from(scopeFragment.querySelectorAll(dataIdTest)).filter(x => inScope(scopeFragment, x));
-    if (scopeFragment instanceof Element && scopeFragment.matches(dataIdTest))
-        dataIds.push(scopeFragment);
-    const ids = [];
-    for (const di of dataIds) {
-        if (!(di instanceof HTMLElement))
-            continue;
-        const unparsedID = di.dataset.id;
-        const inner = unparsedID?.substring(2, unparsedID.length - 2);
-        if (!inner)
-            continue;
-        const split = inner.split(' ');
-        const id = split.length === 2 ? split[1] : split[0];
-        if (ids.includes(id))
-            throw 500;
-        ids.push(id);
-    }
-    if (ids.length === 0)
-        return;
-    const allChildren = Array.from(scopeFragment.querySelectorAll('*')).filter(x => inScope(scopeFragment, x));
-    if (scopeFragment instanceof Element)
-        allChildren.push(scopeFragment);
-    const idLookup = {};
-    const base = 'gid';
-    for (const child of allChildren) {
-        const attrs = child.attributes;
-        for (const attr of attrs) {
-            const { name, value } = attr;
-            if (!name.startsWith('data-'))
-                continue;
-            if (name === 'data-id') {
-                if (!value.startsWith('{{') || !value.endsWith('}}'))
-                    continue;
-                const inner = value.substring(2, value.length - 2);
-                const split = inner.split(' ');
-                const id = split.length === 2 ? split[1] : split[0];
-                if (!(id in idLookup)) {
-                    idLookup[id] = `${base}-${getCount(base)}`;
-                }
-                if (split.length === 2) {
-                    const sideEffects = split[0];
-                    for (const char of sideEffects) {
-                        switch (char) {
-                            case '@':
-                            case '|':
-                                child.setAttribute(attrMap[char], id);
-                                break;
-                            case '%':
-                                child.part.add(id);
-                                break;
-                            case '.':
-                                child.classList.add(id);
-                                break;
-                        }
-                    }
-                }
-                child.id = idLookup[id];
-                child.setAttribute('data-id', id);
-            }
-            else {
-                let newValue = value;
-                for (const id of ids) {
-                    const token = `{{${id}}}`;
-                    if (!newValue.includes(token))
-                        continue;
-                    if (!(id in idLookup)) {
-                        idLookup[id] = `${base}-${getCount(base)}`;
-                    }
-                    newValue = newValue.replaceAll(token, idLookup[id]);
-                }
-                if (newValue === value)
-                    continue;
-                child.setAttribute(name.substring(5), newValue);
-                child.removeAttribute(name);
-            }
-        }
-        for (const attr of attrs) {
-            const { name, value } = attr;
-            if (!name.startsWith('defer-'))
-                continue;
-            const nameWithoutDefer = name.substring(6);
-            const attrWithoutDefer = child.getAttributeNode(nameWithoutDefer);
-            if (attrWithoutDefer === null)
-                continue;
-            const valueWithoutDefer = attrWithoutDefer.value;
-            let newValue = valueWithoutDefer;
-            let changeMade = false;
-            for (const id of ids) {
-                const token = `{{${id}}}`;
-                if (!newValue.includes(token))
-                    continue;
-                if (!(id in idLookup)) {
-                    idLookup[id] = `${base}-${getCount(base)}`;
-                }
-                newValue = newValue.replaceAll(token, idLookup[id]);
-                changeMade = true;
-            }
-            //child.setAttribute(nameWithoutDefer, newValue);
-            if (changeMade)
-                attrWithoutDefer.value = newValue;
-            nudge(child, name);
-        }
-    }
-    if (scopeFragment instanceof Element && 'disabled' in scopeFragment) {
-        nudge(scopeFragment);
-    }
-}