mount-observer 0.0.111 → 0.1.0

package/doCleanup.js

@@ -1,31 +0,0 @@
-export function doCleanup(htmlSrc, clone, options = {
-    removeInner: '[itemprop]:not([itemscope])',
-    removeOuter: '[itemprop][itemscope]'
-}) {
-    const removeInner = htmlSrc.getAttribute('remove-inner') || options.removeInner;
-    if (removeInner) {
-        const removeInnerEls = clone.querySelectorAll(removeInner);
-        for (const removeInnerEl of removeInnerEls) {
-            if ('href' in removeInnerEl) {
-                removeInnerEl.href = '';
-            }
-            else if ('value' in removeInnerEl) {
-                removeInnerEl.value = '';
-            }
-            else if ('datetime' in removeInnerEl) {
-                removeInnerEl.datetime = '';
-            }
-            else {
-                //any other exceptions?                       
-                removeInnerEl.textContent = '';
-            }
-        }
-    }
-    const removeOuter = htmlSrc.getAttribute('remove-outer') || options.removeOuter;
-    if (removeOuter) {
-        const removeOuterEls = clone.querySelectorAll(removeOuter);
-        for (const removeOuterEl of removeOuterEls) {
-            removeOuterEl.remove();
-        }
-    }
-}

package/doCleanup.ts

@@ -1,34 +0,0 @@
-interface doCleanUpOptions {
-    removeInner?: string;
-    removeOuter?: string;
-}
-
-export function doCleanup(htmlSrc: HTMLElement, clone: DocumentFragment, options: doCleanUpOptions = {
-    removeInner: '[itemprop]:not([itemscope])',
-    removeOuter: '[itemprop][itemscope]'
-}){
-    const removeInner = htmlSrc.getAttribute('remove-inner') || options.removeInner;
-    if(removeInner){
-        const removeInnerEls = clone.querySelectorAll(removeInner);
-        for(const removeInnerEl of removeInnerEls){
-            if('href' in removeInnerEl){
-                removeInnerEl.href = '';
-            } else if ('value' in removeInnerEl){
-                removeInnerEl.value = '';
-            }else if('datetime' in removeInnerEl){
-                removeInnerEl.datetime = '';
-            }else{ 
-                //any other exceptions?                       
-                removeInnerEl.textContent = '';
-            }
-        }
-    }
-    const removeOuter = htmlSrc.getAttribute('remove-outer') || options.removeOuter;
-    if(removeOuter){
-        const removeOuterEls = clone.querySelectorAll(removeOuter);
-        for(const removeOuterEl of removeOuterEls){
-            removeOuterEl.remove();
-        }
-    }
-
-}

package/getWhereAttrSelector.js

@@ -1,83 +0,0 @@
-export async function getWhereAttrSelector(whereAttr, withoutAttrs) {
-    const { hasBase, hasBranchIn, hasRootIn } = whereAttr;
-    let fullListOfAttrs = [];
-    const partitionedAttrs = [];
-    if (hasBase !== undefined) {
-        const hasRootInGuaranteed = hasRootIn || [{
-                start: '',
-                context: 'Both'
-            }];
-        let prefixLessMatches = [];
-        const hasBaseIsString = typeof hasBase === 'string';
-        const baseSelector = hasBaseIsString ? hasBase : hasBase[1];
-        const rootToBaseDelimiter = hasBaseIsString ? '-' : hasBase[0];
-        if (hasBranchIn !== undefined) {
-            let baseToBranchDelimiter = '-';
-            let branches;
-            if (hasBranchIn.length === 2 && Array.isArray(hasBranchIn[1])) {
-                baseToBranchDelimiter = hasBranchIn[0];
-                branches = hasBranchIn[1];
-            }
-            else {
-                branches = hasBranchIn;
-            }
-            prefixLessMatches = branches.map(x => ({
-                rootToBaseDelimiter,
-                base: baseSelector,
-                baseToBranchDelimiter: x ? baseToBranchDelimiter : '',
-                branch: x
-            }));
-        }
-        else {
-            prefixLessMatches.push({
-                rootToBaseDelimiter,
-                base: baseSelector,
-            });
-        }
-        for (const rootCnfg of hasRootInGuaranteed) {
-            const { start } = rootCnfg;
-            for (const match of prefixLessMatches) {
-                const { base, baseToBranchDelimiter, branch, rootToBaseDelimiter } = match;
-                let branchIdx = 0;
-                for (const prefixLessMatch of prefixLessMatches) {
-                    const { base, baseToBranchDelimiter, branch } = prefixLessMatch;
-                    const startAndRootToBaseDelimiter = start ? `${start}${rootToBaseDelimiter}` : '';
-                    //TODO:  could probably reduce the size of the code below
-                    if (branch) {
-                        //will always have branch?
-                        const name = `${startAndRootToBaseDelimiter}${base}${baseToBranchDelimiter}${branch}`;
-                        fullListOfAttrs.push(name);
-                        partitionedAttrs.push({
-                            root: start,
-                            name,
-                            base,
-                            branch,
-                            branchIdx,
-                            rootCnfg
-                        });
-                    }
-                    else {
-                        const name = `${startAndRootToBaseDelimiter}${base}`;
-                        fullListOfAttrs.push(name);
-                        partitionedAttrs.push({
-                            root: start,
-                            name,
-                            base,
-                            rootCnfg,
-                            branchIdx
-                        });
-                    }
-                    branchIdx++;
-                }
-            }
-        }
-    }
-    fullListOfAttrs = Array.from(new Set(fullListOfAttrs));
-    const listOfSelectors = fullListOfAttrs.map(s => `${withoutAttrs}[${s}]`);
-    const calculatedSelector = listOfSelectors.join(',');
-    return {
-        fullListOfAttrs,
-        calculatedSelector,
-        partitionedAttrs,
-    };
-}

package/getWhereAttrSelector.ts

@@ -1,92 +0,0 @@
-import {AttrParts, RootCnfg, WhereAttr} from './ts-refs/mount-observer/types';
-export async function getWhereAttrSelector(whereAttr: WhereAttr, withoutAttrs: string){
-    const {hasBase, hasBranchIn, hasRootIn} = whereAttr;
-
-    let fullListOfAttrs: Array<string> = [];
-    const partitionedAttrs: Array<AttrParts> = [];
-    if(hasBase !== undefined){
-        const hasRootInGuaranteed: Array<RootCnfg> = hasRootIn || [{
-            start: '',
-            context: 'Both'
-        } as RootCnfg];
-        
-        let prefixLessMatches: Array<{
-            rootToBaseDelimiter: string,
-            base: string,
-            branch?: string,
-            leaf?: string //todo,
-            baseToBranchDelimiter?: string,
-        }> = [];
-        const hasBaseIsString = typeof hasBase === 'string';
-        const baseSelector = hasBaseIsString ? hasBase : hasBase[1];
-        const rootToBaseDelimiter = hasBaseIsString ? '-' : hasBase[0];
-        if(hasBranchIn !== undefined){
-            let baseToBranchDelimiter = '-';
-            let branches: Array<string> | undefined;
-            if(hasBranchIn.length === 2 && Array.isArray(hasBranchIn[1])){
-                baseToBranchDelimiter = hasBranchIn[0];
-                branches = hasBranchIn[1];
-            }else{
-                branches = hasBranchIn as Array<string>;
-            }
-            prefixLessMatches = branches.map(x => ({
-                rootToBaseDelimiter,
-                base: baseSelector,
-                baseToBranchDelimiter: x ? baseToBranchDelimiter : '',
-                branch: x
-            }));
-        }else{
-            prefixLessMatches.push({
-                rootToBaseDelimiter,
-                base: baseSelector,
-            })
-        }
-        for(const rootCnfg of hasRootInGuaranteed){
-            const {start} = rootCnfg;
-            for(const match of prefixLessMatches){
-                const {base, baseToBranchDelimiter, branch, rootToBaseDelimiter} = match;
-                let branchIdx = 0;
-                for(const prefixLessMatch of prefixLessMatches){
-                    const {base, baseToBranchDelimiter, branch} = prefixLessMatch;
-                    const startAndRootToBaseDelimiter = start ? `${start}${rootToBaseDelimiter}` : '';
-                    //TODO:  could probably reduce the size of the code below
-                    if(branch){
-                        //will always have branch?
-                        const name = `${startAndRootToBaseDelimiter}${base}${baseToBranchDelimiter}${branch}`
-                        fullListOfAttrs.push(name);
-                        partitionedAttrs.push({
-                            root: start,
-                            name,
-                            base,
-                            branch,
-                            branchIdx,
-                            rootCnfg
-                        });
-                    }else{
-                        const name = `${startAndRootToBaseDelimiter}${base}`;
-                        fullListOfAttrs.push(name);
-                        partitionedAttrs.push({
-                            root: start,
-                            name,
-                            base,
-                            rootCnfg,
-                            branchIdx
-                        });
-                    }
-                    branchIdx++;
-                }
-                
-            } 
-        }
-    }
-
-    fullListOfAttrs = Array.from(new Set(fullListOfAttrs));
-    const listOfSelectors = fullListOfAttrs.map(s => `${withoutAttrs}[${s}]`);
-    const calculatedSelector = listOfSelectors.join(',');
-    return {
-        fullListOfAttrs,
-        calculatedSelector,
-        partitionedAttrs,
-    };
-        
-}

package/preloadContent.js

@@ -1,44 +0,0 @@
-import { upShadowSearch } from './upShadowSearch.js';
-const remoteTemplElSym = Symbol.for('du3y+tfsAUGFHMG/iHZiMQ');
-Object.defineProperty(HTMLTemplateElement.prototype, 'remoteContent', {
-    get() {
-        const templ = this;
-        const src = templ.getAttribute('src');
-        if (src === null) {
-            const head = document.head;
-            if (window[remoteTemplElSym] === undefined) {
-                window[remoteTemplElSym] = 0;
-            }
-            const id = templ.id || `mount-observer-${window[remoteTemplElSym]++}`;
-            const sourceTempl = document.createElement('template');
-            sourceTempl.id = '' + id;
-            sourceTempl.content.appendChild(templ.content);
-            head.append(sourceTempl);
-            templ.innerHTML = '';
-            templ.setAttribute('src', `#${id}`);
-            templ.setAttribute('rel', 'preload');
-            templ[remoteTemplElSym] = new WeakRef(sourceTempl);
-            return sourceTempl.content;
-        }
-        {
-            const test = templ[remoteTemplElSym]?.deref();
-            if (test !== undefined)
-                return test.content;
-            if (templ.getAttribute('rel') !== 'preload')
-                throw 'NI';
-            const isIntraDoc = src[0] === '#';
-            if (!isIntraDoc)
-                throw 'NI';
-            const id = src.substring(1);
-            const remoteTempl = upShadowSearch(templ, id);
-            if (!(remoteTempl instanceof HTMLTemplateElement))
-                throw 404; //not found
-            templ[remoteTemplElSym] = new WeakRef(remoteTempl);
-            return remoteTempl.content;
-            //templ.dispatchEvent(new Event('load'));
-        }
-    }
-});
-export function preloadContent(templ) {
-    const content = templ.remoteContent;
-}

package/preloadContent.ts

@@ -1,47 +0,0 @@
-import {TemplateWithRemoteContent} from './ts-refs/mount-observer/types.js';
-import {upShadowSearch} from './upShadowSearch.js';
-const remoteTemplElSym = Symbol.for('du3y+tfsAUGFHMG/iHZiMQ');
-
-Object.defineProperty(HTMLTemplateElement.prototype, 'remoteContent', {
-    get(){
-        const templ = this as HTMLTemplateElement;
-        const src = templ.getAttribute('src');
-        if(src === null){
-            const head = document.head;
-            if((<any>window)[remoteTemplElSym] === undefined ){
-                (<any>window)[remoteTemplElSym] = 0;
-            }
-            const id = templ.id || `mount-observer-${(<any>window)[remoteTemplElSym]++}`;
-            const sourceTempl = document.createElement('template');
-            sourceTempl.id = '' + id;
-            sourceTempl.content.appendChild(templ.content);
-            head.append(sourceTempl);
-            templ.innerHTML = '';
-            templ.setAttribute('src', `#${id}`);
-            templ.setAttribute('rel', 'preload');
-            (<any>templ)[remoteTemplElSym] = new WeakRef(sourceTempl);
-            return sourceTempl.content;
-        }
-        {
-            const test = (<any>templ)[remoteTemplElSym]?.deref();
-            if(test !== undefined) return test.content;
-            if(templ.getAttribute('rel') !== 'preload') throw 'NI';
-            const isIntraDoc = src[0] === '#';
-            if(!isIntraDoc) throw 'NI';
-            const id = src.substring(1);
-            const remoteTempl = upShadowSearch(templ, id);
-            if(!(remoteTempl instanceof HTMLTemplateElement)) throw 404; //not found
-            (<any>templ)[remoteTemplElSym] = new WeakRef(remoteTempl);
-            return remoteTempl.content;
-            //templ.dispatchEvent(new Event('load'));
-        }
-
-    }
-})
-
-export function preloadContent(
-    templ: HTMLTemplateElement,
-) {
-    const content = (<any>templ).remoteContent;
-    
-}

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