jj 0.1.1 → 2.0.0

package/dist/jj.js

@@ -1,1580 +0,0 @@
-const INDENT = '    ';
-const NEWLINE = '\n';
-
-function isArr(x) {
-    return Array.isArray(x)
-}
-
-function arrFrom(x) {
-    return Array.from(x)
-}
-
-function ind(indentation, addition = 0) {
-    if (indentation < 0) {
-        return ''
-    }
-    indentation += addition;
-    if (ind.cache[indentation] === undefined) {
-        ind.cache[indentation] = INDENT.repeat(indentation);
-    }
-    return ind.cache[indentation]
-}
-ind.cache = ['', INDENT];
-
-function nl(indentation) {
-    return indentation < 0 ? '' : NEWLINE
-}
-
-function mapKeyVal(obj, fn) {
-    return Object.entries(obj).map(([k, v]) => fn(k, v, obj))
-}
-
-function isObj(a) {
-    return a && typeof a === 'object'
-}
-
-function isStr(a, minLength = 0) {
-    return typeof a === 'string' && a.length >= minLength
-}
-
-function isNum(a) {
-    return typeof a === 'number' && Number.isFinite(a)
-}
-
-function isFn(a) {
-    return typeof a === 'function'
-}
-
-function camel2kebab(str) {
-    return str.replace(/([A-Z])/g, ch => '-' + ch.toLowerCase())
-}
-
-function embed(start, end, ...contents) {
-    return start + contents.join('') + end
-}
-
-function qut(...strArr) {
-    const str = strArr.join('').replace('"', '\\"');
-    return embed('"', '"', str)
-}
-
-function ent(entity) {
-    if (isStr(entity)) {
-        return '&' + entity + ';'
-    } else if (isNum(entity) && Number.isInteger(entity)) {
-        return `&#${entity};`
-    }
-    throw new TypeError(`Cannot make HTML entity from ${entity}`)
-}
-
-function sqBra(...strArr) {
-    return embed('[', ']', ...strArr)
-}
-
-function rnd(prefix) {
-    const randomStr = Math.random().toString(36).substr(2);
-    // the resulting string should always start with a letter, otherwise it won't work as class or id
-    return isStr(prefix) ? `${prefix}-${randomStr}` : randomStr
-}
-
-function alias(obj, aliasDic) {
-    const prt = obj.prototype;
-
-    function assignTarget(dst, src) {
-        if (prt[dst] !== undefined) {
-            throw new Error(`${obj.name} already has a method called ${dst}`)
-        }
-        prt[dst] = prt[src];
-    }
-
-    mapKeyVal(aliasDic, (src, dst) => {
-        if (isArr(dst)) {
-            dst.forEach(d => assignTarget(d, src));
-        } else {
-            assignTarget(dst, src);
-        }
-    });
-}
-
-const ranOnce = Symbol('ran once flag');
-function runOnce(fn, ...args) {
-    if (isFn(fn) && !fn[ranOnce]) {
-        fn.apply(undefined, args);
-        fn[ranOnce] = true;
-    }
-}
-
-const doc = {
-    el(tagName, ns) {
-        return isStr(ns) ? document.createElementNS(ns, tagName) : document.createElement(tagName)
-    },
-    frag() {
-        return document.createDocumentFragment()
-    },
-    text(...strArr) {
-        return document.createTextNode(String(strArr.flat().join('')))
-    },
-    comm(...strArr) {
-        return document.createComment(String(strArr.flat().join('')))
-    },
-    get body() {
-        return document.body
-    },
-    get head() {
-        return document.body.head
-    },
-};
-
-function isComponent(obj) {
-    return isObj(obj) && isObj(obj.root)
-}
-
-class Dim {
-    constructor(value, unit) {
-        if (isStr(value)) {
-            this.parse(value);
-        } else {
-            this.value = value;
-            this.unit = unit;
-        }
-    }
-
-    clone() {
-        return new Dim(this.value, this.unit)
-    }
-
-    parse(str) {
-        const parts = str.match(/([-+]?[0-9.]+)([%\w]*)/);
-        if (parts) {
-            const [, value, unit] = parts;
-            this.value = value;
-            this.unit = unit;
-        }
-        throw new SyntaxError(`Could not parse ${str} as a CSS Dimention`)
-    }
-
-    toString() {
-        return `${this.value}${this.unit}`
-    }
-
-    [Symbol.toPrimitive](hint) {
-        if (hint === 'string') {
-            return this.toString()
-        }
-        return this.value
-    }
-}
-
-alias(Dim, {
-    toString: 'toJSON'
-});
-
-function isDim(val) {
-    return val instanceof Dim
-}
-
-function perc(num) {
-    return new Dim(num, '%')
-}
-
-function em(num) {
-    return new Dim(num, 'em')
-}
-
-function rem(num) {
-    return new Dim(num, 'rem')
-}
-
-function px(num) {
-    return new Dim(num, 'px')
-}
-
-function vh(num) {
-    return new Dim(num, 'vh')
-}
-
-function vw(num) {
-    return new Dim(num, 'vw')
-}
-
-function col(r, g, b, a) {
-    if (g === undefined && b === undefined && a === undefined) {
-        if (isStr(r, 1)) {
-            return `#${r}`
-        }
-    }
-    throw new Error('TODO: Use case not implemented yet')
-}
-
-class Selector {
-    constructor(selector = '') {
-        this.selector = selector;
-    }
-
-    toString() {
-        return this.selector
-    }
-
-    css(ruleObj) {
-        return { [this.selector]: ruleObj }
-    }
-
-    clone() {
-        return new Selector(this.selector)
-    }
-
-    append(...str) {
-        if (str.length) {
-            this.selector += str.map(s => isSel(s) ? s.selector : s).join('');
-        }
-        return this
-    }
-
-    at(str) {
-        return this.append('@', str)
-    }
-
-    get _() {
-        return this.append(' ')
-    }
-
-    // [attribute]	[target]	Selects all elements with a target attribute
-    // [attribute=value]	[target=_blank]	Selects all elements with target="_blank"
-    attr(attrName, attrValue) {
-        return attrValue === undefined ?
-            this.append(sqBra(attrName)) :
-            this.append(sqBra(attrName, '=', qut(attrValue)))
-    }
-
-    // [attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word "flower"
-    attrValArrContains(attrName, attrValue) {
-        return this.append(sqBra(attrName, '~=', qut(attrValue)))
-    }
-
-    // [attribute^=value]	a[href^="https"]	Selects every <a> element whose href attribute value begins with "https"
-    attrValStartsWith(attrName, attrValue) {
-        return this.append(sqBra(attrName, '^=', qut(attrValue)))
-    }
-
-    // [attribute$=value]	a[href$=".pdf"]	Selects every <a> element whose href attribute value ends with ".pdf"
-    attrValEndsWith(attrName, attrValue) {
-        return this.append(sqBra(attrName, '$=', qut(attrValue)))
-    }
-
-    // [attribute*=value]	a[href*="w3schools"]	Selects every <a> element whose href attribute value contains the substring "w3schools"
-    attrValContains(attrName, attrValue) {
-        return this.append(sqBra(attrName, '*=', qut(attrValue)))
-    }
-
-    class(...classNames) {
-        classNames.forEach(c => this.append('.', c));
-        return this
-    }
-
-    BEM(block, element, modifier) {
-        this.B(block);
-        if (element !== undefined) {
-            this.E(element);            
-        }
-        if (modifier !== undefined) {
-            this.M(modifier);
-        }
-        return this
-    }
-
-    E(element) {
-        return this.append('__', element)
-    }
-
-    M(modifier) {
-        return this.append('--', modifier)
-    }
-
-    id(idString) {
-        return this.append('#', idString)
-    }
-
-    pClass(pseudo) {
-        return this.append(':', pseudo)
-    }
-
-    pEl(pseudo) {
-        return this.append('::', pseudo)
-    }
-
-    par(...str) {
-        return this.append('(', ...str, ')')
-    }
-
-    prop(prop, val) {
-        return this.par(prop, ':', val)
-    }
-
-    nthChild(str) {
-        return this.pClass(`nth-child(${str})`)
-    }
-
-    firstChild() {
-        return this.pClass(`first-child`)
-    }
-
-    rnd(prefix = '') {
-        return this.append(rnd(prefix))
-    }
-
-    [Symbol.toPrimitive](hint) {
-        if (hint === 'string') {
-            return this.toString()
-        }
-        return this.value
-    }
-}
-
-// B, E, M are for Block Element Modifier: http://getbem.com/introduction/
-alias(Selector, {
-    class: 'B',
-    append: ['add', 'el', 'tag', 'com', 'cond', 'star', 'all', 'sel', 'concat'],
-});
-
-const shortHands = {
-    [Symbol.toPrimitive]: 'toString',
-    '>': ['gt', 'parentOf'],
-    '*': ['star', 'all'],
-    '~': ['tilde', 'precedes'],
-    '+': ['plus', 'followedBy'],
-    ',': ['comma', 'or'],
-    // TODO: there's :not() pseudo-class as well and that one takes a selector
-    'not': ['not'],
-    'only': ['only'],
-    'and': ['and'],
-};
-
-mapKeyVal(shortHands, (str, vals) => {
-    vals.forEach(v => {
-        Selector.prototype[v] = function () {
-            return this.append(str)
-        };
-    });
-});
-
-function isSel(v) {
-    return v instanceof Selector
-}
-
-function _sel(param) {
-    if (isSel(param)) {
-        return param
-    }
-    return new Selector(param)
-}
-
-const sel = new Proxy(_sel, {
-    get(_sel, prop) {
-        const selector = new Selector();
-        if (prop in selector) {
-            return selector[prop]
-        } else {
-            selector.append(prop);
-            return selector
-        }
-    }
-});
-
-function parseRangeArguments(arr) {
-    if (arr.length < 2) {
-        throw new TypeError(`Expected at least 2 arguments but got ${arr}`)
-    }
-    if (!isNum(arr[0])) {
-        throw new TypeError(`The first argument must be a number but got ${arr[0]}`)
-    }
-    if (isFn(arr[1])) {
-        // range(end, fn, ...extraParams)
-        const [ end, fn, ...extraParams ] = arr;
-        return { start: 0, end, step: 1, fn, extraParams }
-    } else if (isFn(arr[2])) {
-        // range(start, end, fn, ...extraParams)
-        const [ start, end, fn, ...extraParams ] = arr;
-        return { start, end, step: 1, fn, extraParams }
-    } else if (isFn(arr[3])) {
-        // // range(start, end, step, fn, ...extraParams)
-        const [ start, end, step, fn, ...extraParams ] = arr;
-        return { start, end, step, fn, extraParams }
-    }
-    throw new TypeError(`Which function do you want to run? Got ${arr}`)
-}
-
-const control = {
-    /**
-     * @remark if inside the function you need to refer to the tag (exposed as `this`), just remember
-     * to use a classic function instead of an arrow function
-     */
-    if(condition, fn, ...extraParams) {
-        if (condition) {
-            return this.run(fn, ...extraParams)
-        }
-        return this
-    },
-
-    forEach(arr, fn, ...extraParams) {
-        arr.forEach(item => {
-            this.run(fn, item, ...extraParams);
-        });
-
-        return this
-    },
-
-    times(n, fn, ...extraParams) {
-        return this.range(1, n + 1, 1, fn, ...extraParams)
-    },
-
-    // range(start, end, step, fn, ...extraParams)
-    // range(start, end, fn, ...extraParams) // step = 1
-    // range(end, fn, ...extraParams) // start = 0, step = 1
-    range() {
-        const { start, end, step, fn, extraParams } = parseRangeArguments(Array.from(arguments));
-        if (!isNum(start) || !isNum(end) || !isNum(step)) {
-            throw new TypeError(`Expected numbers but got: start=${start}, end=${end}, step=${step}`)
-        }
-        if (step === 0) {
-            throw new Error(`The step cannot be zero`)
-        }
-        if ((start < end && step < 0) || (start > end && step > 0)) {
-            throw new Error(`This loop will never end: start=${start}, end=${end}, step=${step}`)
-        }
-        for (let i = start; i < end; i += step) {
-            this.run(fn, i, ...extraParams);
-        }
-        return this
-    },
-
-    run(fn, ...extraParams) {
-        fn.call(this, this, ...extraParams);
-        return this
-    },
-};
-
-const events = {
-    on(eventName, handler) {
-        this.el.addEventListener(eventName, handler);
-        return this
-    },
-
-    once(eventName, handler) {
-        this.el.addEventListener(eventName, handler, { once: true });
-        return this
-    },
-
-    off(eventName, handler) {
-        this.el.removeEventListener(eventName, handler);
-        return this
-    }
-};
-
-function isAtRule(selectorTxt) {
-    return selectorTxt.trimLeft().startsWith('@')
-}
-
-function toValue(val) {
-    if (isStr(val)) {
-        if (val.trim() === '') {
-            return qut(val)
-        }
-        return val
-    }
-    if (isNum(val)) {
-        return String(val)
-    }
-    if (isDim(val)) {
-        return String(val)
-    } else if (isArr(val)) {
-        return val.join(' ')
-    }
-}
-
-function extractRules(selectorTxt, bodyObj) {
-    const baseRule = new SimpleRule(selectorTxt);
-    const ownProps = baseRule.bodyObj;
-    const nestedRules = [baseRule];
-    mapKeyVal(bodyObj, (key, val) => {
-        const v = toValue(val);
-        if (v !== undefined) {
-            ownProps[key] = v;
-        } else if (isAtRule(key)) {
-            nestedRules.push(new WrapperRule(key, { [selectorTxt]: val }));
-        } else {
-            let nestedSelectorTxt = key.replace(/&/g, selectorTxt);
-            if (nestedSelectorTxt === key) {
-                // No & was present, so the replacement didn't do anything. Nest the selectors
-                nestedSelectorTxt = selectorTxt + ' ' + key;
-            }
-            nestedRules.push(new NestedRule(nestedSelectorTxt, val));
-        }
-    });
-    return nestedRules
-}
-
-function propVal(indentation, prop, val) {
-    const colon = indentation < 0 ? ':' : ': ';
-    return camel2kebab(prop)
-        + colon
-        + toValue(val)
-        + ';'
-}
-
-class SimpleRule {
-    constructor(selectorTxt, bodyObj = {}) {
-        this.selectorTxt = selectorTxt;
-        this.bodyObj = bodyObj;
-    }
-
-    get isEmpty() {
-        return Object.keys(this.bodyObj).length === 0
-    }
-
-    toString(indentation = 0) {
-        if (this.isEmpty) {
-            return indentation >= 0 ? ind(indentation) + `/* ${this.selectorTxt} {} */`: ''
-        }
-        let ret = ind(indentation) + this.selectorTxt;
-        if (indentation >= 0) {
-            ret += ' ';
-        }
-        ret += '{' + nl(indentation);
-        const space = ind(indentation, 1);
-        ret += mapKeyVal(this.bodyObj, (key, val) => space + propVal(indentation, key, val))
-            .join(nl(indentation));
-        if (indentation >= 0) {
-            ret += nl(indentation) + ind(indentation);
-        }
-        ret += '}';
-        return ret
-    }
-}
-
-class NestedRule {
-    constructor(selectorTxt, bodyObj) {
-        this.selectorTxt = selectorTxt;
-        this.bodyObj = bodyObj;
-    }
-
-    toString(indentation = 0) {
-        if (isObj(this.bodyObj)) {
-            return extractRules(this.selectorTxt, this.bodyObj)
-                .map(rule => rule.toString(indentation))
-                .join(nl(indentation))
-        }
-        const v = toValue(this.bodyObj);
-        if (v !== undefined) {
-            return ind(indentation) + propVal(indentation, this.selectorTxt, v)
-        }
-        return ind(indentation) + this.selectorTxt
-    }
-}
-
-class WrapperRule {
-    constructor(selectorTxt, ruleSet) {
-        this.selectorTxt = selectorTxt;
-        this.ruleSet = ruleSet;
-    }
-
-    toString(indentation = 0) {
-        let ret = ind(indentation) + this.selectorTxt;
-        if (isObj(this.ruleSet)) {
-            const childIndentation = indentation >= 0 ? indentation + 1 : -1;
-            if (indentation >= 0) {
-                ret += ' ';
-            }
-            ret += '{' + nl(indentation);
-            ret += objToRulesArr(this.ruleSet)
-                .map(rule => rule.toString(childIndentation))
-                .join(nl(indentation));
-            ret += nl(indentation);
-            ret += ind(indentation) + '}';
-        } else {
-            ret += ';';
-        }
-        return ret
-    }
-}
-
-function objToRulesArr(obj) {
-    if (!isObj(obj)){
-        if (isStr(obj)) {
-            obj = { [obj]: null };
-        } else {
-            throw new TypeError(`Invalid style descriptor: ${obj}`)
-        }
-    }
-    return mapKeyVal(obj, (selectorTxt, bodyObj) => {
-        if (isAtRule(selectorTxt)) {
-            return new WrapperRule(selectorTxt, bodyObj)
-        }
-        return new NestedRule(selectorTxt, bodyObj)
-    })
-}
-
-class Window {
-    constructor(windowRef) {
-        this.el = windowRef;
-    }
-}
-
-Object.assign(Window.prototype, events);
-
-const win = new Window(window);
-
-function match(regexp, pathname) {
-    if(isStr(regexp)) {
-        console.log('boo', regexp, pathname);
-        return regexp === pathname
-    }
-    if (regexp instanceof RegExp) {
-        const parseResult = pathname.match(regexp);
-        return parseResult || false
-    } 
-    throw new TypeError(`Invalid route regexp: ${regexp}`)
-}
-
-const rootRouterMap = new WeakMap();
-
-class Router {
-    constructor(root) {
-        if (!isObj(root) || !isFn(root.run)) {
-            throw new Error(`Root must have a run method but got ${root}`)
-        }
-        this.routes = [];
-        this.root = root;
-        this.isMatched = false;
-        rootRouterMap.set(root, this);
-
-        const matchThis = (state) => this.runMatches(state);
-        win.on('popstate', matchThis).on('hashchange', matchThis);
-    }
-
-    addRoute(regexp, handler) {
-        if (isFn(this.defRouteHandler)) {
-            throw new Error(`Cannot add a route after the default route is set`)
-        }
-        if (!isFn(handler)) {
-            throw new TypeError(`Expected a route handler function but got ${handler}`)
-        }
-        const newRoute = { regexp, handler };
-        this.routes.push(newRoute);
-        if (!this.isMatched) {
-            this._runRoute(undefined, newRoute);
-        }
-        return this
-    }
-
-    addDefRoute(handler) {
-        if (isFn(this.defRouteHandler)) {
-            throw new Error(`There is already a default route handler`)
-        }
-        if (!isFn(handler)) {
-            throw new TypeError(`Expected a default route handler function but got ${handler}`)
-        }
-        this.defRouteHandler = handler;
-        if (!this.isMatched) {
-            this._runDefRoute();
-        }
-        return this
-    }
-
-    _runRoute(state, { regexp, handler}, pathname  = window.location.pathname) {
-        const matchResult = match(regexp, pathname);
-        if (matchResult) {
-            this.isMatched = true;
-            this.root.run(handler, state, matchResult);
-        }
-        return !!matchResult
-    }
-
-    _runDefRoute() {
-        this.root.run(this.defRouteHandler);
-        return this
-    }
-
-    runMatches(state, pathname  = window.location.pathname) {
-        const someRouteMatched = this.routes.some(route => this._runRoute(state, route, pathname));
-        if (!someRouteMatched) {
-            return this._runDefRoute()
-        }
-        return this
-    }
-}
-
-function router(root) {
-    if (!isObj(root) || !isFn(root.run)) {
-        throw new TypeError(`root should be a Tag instance. Got ${root}`)
-    }
-    return rootRouterMap.get(root) || new Router(root)
-}
-
-const HTTP_WWW_W3_ORG = 'http://www.w3.org/';
-const SVG_NS = HTTP_WWW_W3_ORG + '2000/svg';
-const MATH_NS = HTTP_WWW_W3_ORG + '1998/mathml';
-const jaTag = Symbol('jaTag');
-
-const STYLE = 'style';
-const HIDDEN = 'hidden';
-const MOUSE = 'mouse';
-
-class Node {
-    constructor(el) {
-        if (isObj(el) && Node.validNodeTypes.includes(el.nodeType)) {
-            this.el = el;
-        } else {
-            throw new TypeError(`Invalid parameter to Node constructor: ${el}`)
-        }
-    }
-
-    mount(rootTagOrEl) {
-        const root = toTag(rootTagOrEl);
-        return root.setChild(this)
-    }
-
-    addTo(targetElement) {
-        toTag(targetElement).append(this);
-        return this
-    }
-
-    addToHead() {
-        return this.appendTo(document.head)
-    }
-
-    addToBody() {
-        return this.appendTo(document.body)
-    }
-
-    preTo(targetElement) {
-        toTag(targetElement).prepend(this);
-        return this
-    }
-
-    addComment(str) {
-        this.append(doc.comm(str));
-        return this.norm()
-    }
-
-    preComment(str) {
-        this.prepend(doc.comm(str));
-        return this.norm()
-    }
-
-    //#region child
-    addChildren(...children) {
-        if (children.length) {
-            this.el.append(toNativeFrag(...children));
-        }
-        return this
-    }
-
-    preChildren(...children) {
-        if (children.length) {
-            this.el.prepend(toNativeFrag(...children));
-        }
-        return this
-    }
-
-    // TODO: Clean data and events
-    // https://github.com/jquery/jquery/blob/438b1a3e8a52d3e4efd8aba45498477038849c97/src/manipulation.js#L355
-    // https://github.com/jquery/jquery/blob/438b1a3e8a52d3e4efd8aba45498477038849c97/src/manipulation.js#L265
-    rmChildren(...children) {
-        if (children.length) {
-            children.map(child => toNativeEl(child)).forEach(nativeChild => this.el.removeChild(nativeChild));
-        } else {
-            while(this.el.firstChild){
-                this.el.removeChild(this.el.firstChild);
-            }
-        }
-        return this
-    }
-    
-    setChildren(...children) {
-        this.empty().addChildren(...children);
-        return this
-    }
-
-    getChildren() {
-        return arrFrom(this.el.childNodes).map(childNode => toTag(childNode))
-    }
-
-    hasChildren(...children) {
-        if (children.length === 0) {
-            return this.el.hasChildren
-        }
-        return children.every(child => this.el.contains(toNativeEl(child)))
-    }
-    //#endregion child
-    
-    //#region text
-    addText(...strings) {
-        strings.flat().forEach(str => this.append(doc.text(str)));
-        return this.norm()
-    }
-
-    preText(...strings) {
-        strings.flat().forEach(str => this.prepend(doc.text(str)));
-        return this.norm()
-    }
-        
-    rmText() {
-        this.childNodes.filter(c => c instanceof Text).forEach(c => c.remove());
-        return this
-    }
-        
-    setText(...strings) {
-        return this.rmText().addText(...strings)
-    }
-        
-    json(obj) {
-        return this.setText(JSON.stringify(obj, null, 2))
-    }
-    
-    getText() {
-        return this.childNodes.map(c => c instanceof Text ? c.wholeText : '').join('')
-    }
-        
-    hasText() {
-        return this.childNodes.some(c => c instanceof Text)
-    }
-
-    normText() {
-        this.el.normalize();
-        return this
-    }
-    //#endregion text
-    
-    //#region query
-    queryId(id) {
-        const result = this.el.getElementById(id);
-        if (result) {
-            return toTag(result)
-        }
-    }
-
-    query(selector) {
-        const result = this.el.querySelector(selector);
-        if (result) {
-            return toTag(result)
-        }
-    }
-
-    queryAll(selector) {
-        const result = arrFrom(this.el.querySelectorAll(selector));
-        if (result) {
-            return result.map(r => toTag(r))
-        }
-    }
-    //#endregion query
-
-    toString() {
-        return this.el.outerHTML
-    }
-}
-
-alias(Node, {
-    addTo: ['appendTo'],
-    addToHead: 'appendToHead',
-    addToBody: 'appendToBody',
-    addComment: 'comment',
-    preTo: ['prependTo'],
-    setChildren: ['setChild'],
-    addChildren: ['append', 'children', 'child', 'addChild'],
-    preChildren: ['prepend', 'prependChildren', 'prependChild'],
-    addText: ['text'],
-    normText: ['norm'],
-    rmChildren: ['empty', 'clear', 'rmChild'],
-    toString: 'stringify',
-});
-
-class Frag extends Node {
-    constructor() {
-        super(doc.frag());
-    }
-
-    clone(deep) {
-        return new Frag(this.el.cloneNode(deep))
-    }
-}
-
-function frag(...children) {
-    const ret = new Frag();
-    ret.append(children);
-    return ret
-}
-
-// See: https://developer.mozilla.org/en-US/docs/Web/API/Node
-Node.validNodeTypes = [1, 9, 11];
-
-class Tag extends Node {
-    constructor(x) {
-        // TODO if x is a Tag, we're essentially creating two tag objects pointing to the same native element!
-        super(x instanceof Tag ? x.el : x);
-    }
-
-    clone(deep) {
-        return new Tag(this.el.cloneNode(deep))
-    }
-
-    get parent() {
-        return toTag(this.el.parentElement)
-    }
-
-    get ns() {
-        return this.el.namespaceURI
-    }
-
-    get classList() {
-        return this.el.classList
-    }
-
-    get childNodes() {
-        return arrFrom(this.el.childNodes)
-    }
-
-    style(styles) {
-        if (isObj(styles)) {
-            mapKeyVal(styles, (k, v) => this.el.style[k] = v);
-        } else {
-            this.rmProp(STYLE);
-        }
-        return this
-    }
-
-    //#region class
-    setClasses(...classNames) {
-        this.el.className = classNames.join(' ');
-    }
-
-    getClass() {
-        return this.el.className
-    }
-
-    getClasses() {
-        return arrFrom(this.el.className)
-    }
-
-    hasClasses(...classNames) {
-        return classNames.every(className => this.classList.contains(className))
-    }
-
-    addClasses(...classNames) {
-        this.classList.add(...classNames);
-        return this
-    }
-
-    rmClasses(...classNames) {
-        this.classList.remove(...classNames);
-        return this
-    }
-
-    mvClass(oldClassName, newClassName) {
-        this.classList.replace(oldClassName, newClassName);
-        return this
-    }
-
-    mvClasses(classNamesDic) {
-        mapKeyVal(classNamesDic, (oldClassName, newClassName) => this.mvClass(oldClassName, newClassName));
-        return this
-    }
-
-    togClass(className, force) {
-        this.classList.toggle(className, force);
-        return this
-    }
-    
-    togClassObj(classNameDic) {
-        mapKeyVal(classNameDic, (className, force) => this.togClass(className, force));
-        return this
-    }
-
-    togClasses(...classNames) {
-        classNames.forEach(className => this.togClass(className));
-        return this
-    }
-    //#endregion class
-
-    //#region attr
-    setAttr(attrName, attrValue) {
-        if (attrName.toLowerCase() === STYLE) {
-            return this.style(attrValue)
-        }
-        if (attrValue === undefined) {
-            attrValue = '';
-        }
-        this.el.setAttribute(attrName, attrValue);
-        return this
-    }
-
-    setAttrs(attrsDic) {
-        if (!isObj(attrsDic)) {
-            throw new TypeError(`Expected an object but got ${attrsDic}`)
-        }
-        mapKeyVal(attrsDic, (attrName, attrValue) => this.setAttr(attrName, attrValue));
-        return this
-    }
-
-    getAttr(attrName) {
-        return this.el.getAttribute(attrName)
-    }
-
-    getAttrs(...attrNames) {
-        return Object.fromEntries(
-            attrNames.map(attrName => [attrName, this.getAttr(attrName)])
-        )
-    }
-
-    hasAttrs(...attrNames) {
-        return attrNames.every(attrName => this.this.el.hasAttribute(attrName))
-    }
-
-    rmAttrs(...attrNames) {
-        attrNames.forEach((attrName) => {
-            this.el.removeAttribute(attrName);
-        });
-        return this
-    }
-
-    togAttr(attrName, force) {
-        this.el.toggleAttribute(attrName, force);
-        return this
-    }
-    //#endregion attr
-
-    //#region prop
-    setProp(propName, propValue) {
-        if (propName.toLowerCase() === STYLE) {
-            return this.style(propValue)
-        }
-        this.el[propName] = propValue;
-        return this
-    }
-
-    setPropsObj(propsDic) {
-        mapKeyVal(propsDic, (propName, propValue) => this.setProp(propName, propValue));
-        return this
-    }
-
-    getProp(propName) {
-        return this.el[propName]
-    }
-
-    getPropsObj(...propNames) {
-        return Object.fromEntries(
-            propNames.map(propName => [propName, this.getProp(propName)])
-        )
-    }
-
-    hasProps(...propNames) {
-        return propNames.every(propName => propName in this.el)
-    }
-
-    rmProps(...propNames) {
-        propNames.forEach((propName) => {
-            try {
-                delete this.el[propName];
-            }
-            catch (e) {
-                this.el[propName] = undefined;
-            }
-        });
-        return this
-    }
-
-    togProp(propName, force = false) {
-        if (arguments.length === 2) {
-            this.setProp(propName, !!force);
-        } else {
-            this.setProp(propName, !!this.getProp(propName));
-        }
-        return this
-    }
-    //#endregion prop
-    
-    //#region data
-    setData(name, value) {
-        this.el.dataset[name] = value;
-        return this
-    }
-
-    setDataObj(dataDic) {
-        mapKeyVal(dataDic, (name, value) => this.setData(name, value));
-        return this
-    }
-
-    getData(name) {
-        return this.el.dataset[name]
-    }
-
-    getDataObj(...names) {
-        return Object.fromEntries(names.map(name => [name, this.getData(name)]))
-    }
-
-    hasData(name) {
-        return name in this.el.dataset
-    }
-
-    rmData(name) {
-        return delete this.el.dataset[name]
-    }
-    //#endregion data
-
-    //#region visibility
-    tog(show) {
-        if (arguments.length === 1) {
-            return this.togProp(HIDDEN, !show)
-        }
-        return this.togProp(HIDDEN)
-    }
-
-    hide() {
-        return this.setProp(HIDDEN, false)
-    }
-    
-    show() {
-        return this.setProp(HIDDEN, true)
-    }    
-    //#endregion visibility
-
-    //#region query
-    closest(selector) {
-        return this.el.closest(selector) || undefined
-    }
-
-    matches(selector) {
-        return this.el.matches(selector)
-    }
-    //#endregion query
-    
-    //#reguin animation
-    animFrame(fn, ...extraParams) {
-        // TODO we should throw if a loop is already running (or merge loops)
-        const runFn = () => {
-            if (this.isAttached()) {
-                this.run(fn, ...extraParams);
-            }
-            scheduleCall();
-        };
-
-        const scheduleCall = () => {
-            this.animFrameRequestId = window.requestAnimationFrame(runFn);
-        };
-
-        scheduleCall();
-        return this
-    }
-
-    clearAnimFrame() {
-        window.requestAnimationFrame(this.animFrameRequestId);
-        return this
-    }
-    //#endregion animation
-
-    //#region routing
-    route(regex, fn) {
-        router(this).addRoute(regex, fn);
-        return this
-    }
-
-    defRoute(fn) {
-        router(this).addDefRoute(fn);
-        return this
-    }
-    //#endregion routing
-
-    css(cssRef, prefix, styles) {
-        if (styles === undefined) {
-            styles = prefix;
-            prefix = undefined;
-        }
-        if (!(cssRef instanceof StyleTag)) {
-            throw new Error(`Expected an instance of StyleTag but got ${cssRef}`)
-        }
-        const rndClassName = rnd(prefix);
-        this.addClass(rndClassName);
-        cssRef.append(
-            sel().class(rndClassName).css(styles)
-        );
-        return this
-    }
-
-    aria(noun, value) {
-        return this.setAttr(`aria-${noun}`, value)
-    }
-
-    wrap(wrapper) {
-        wrapper = toTag(wrapper);
-        return wrapper.append(this)
-    }
-
-    swap(otherTag) {
-        this.el.replaceWith(otherTag.el);
-        return otherTag
-    }
-
-    isAttached() {
-        return document.documentElement.contains(this.el)
-    }
-
-    queryId(id) {
-        const result = this.el.querySelector('#' + id);
-        if (result) {
-            return toTag(result)
-        }
-    }
-
-    toString() {
-        return this.el.outerHTML
-    }
-}
-
-Object.assign(Tag.prototype, control, events);
-
-const attrShorthands = [
-    'alt',
-    'aria-role',
-    'checked',
-    'content',
-    'height',
-    HIDDEN,
-    'href',
-    'htmlFor',
-    'id',
-    'is',
-    'label',
-    'lang',
-    'name',
-    'placeholder',
-    'readonly',
-    'rel',
-    'required',
-    'role',
-    'selected',
-    'src',
-    'title',
-    'type',
-    'value',
-    'width',
-];
-
-attrShorthands.forEach(attrName => {
-    Tag.prototype[attrName] = function (attrValue) {
-        return this.setAttr(attrName, attrValue)
-    };
-});
-
-const eventShorthands = [
-    'attached',
-    'blur',
-    'change',
-    'click',
-    'contextmenu',
-    'dblclick',
-    'detached',
-    'error',
-    'focus',
-    'focusout',
-    'hover',
-    'keydown',
-    'keydpress',
-    'keydup',
-    'load',
-    MOUSE + 'down',
-    MOUSE + 'enter',
-    MOUSE + 'leave',
-    MOUSE + 'move',
-    MOUSE + 'out',
-    MOUSE + 'over',
-    MOUSE + 'up',
-    'resize',
-    'scroll',
-    'select',
-    'submit',
-    'unload',
-];
-
-eventShorthands.forEach(eventName => {
-    Tag.prototype[eventName] = function (...handlers) {
-        this.on(eventName, ...handlers);
-        return this
-    };
-});
-
-alias(Tag, {
-    addClasses: ['addClass', 'class', 'classes'],
-    class: 'className',
-    hasClasses: 'hasClass',
-    rmClasses: 'rmClass',
-    setClasses: 'setClass',
-    togClass: 'toggleClass',
-    
-    hasAttrs: 'hasAttr',
-    rmAttrs: 'rmAttr',
-    setAttr: 'attr',
-    setAttrs: 'attrs',
-    togAttr: 'toggleAttr',
-    
-    hasProps: 'hasProp',
-    rmProps: 'rmProp',
-    setProp: 'prop',
-    setProps: 'props',
-
-    tog: 'toggle',
-    swap: ['swapWith', 'replaceWith', 'replace'],
-    
-    value: 'val',
-    htmlFor: 'for',
-});
-
-class StyleTag {
-    constructor(...rulesetObjArr) {
-        this.rulesetObjArr = rulesetObjArr;
-    }
-
-    get isAttached() {
-        return this._root && this._root.isAttached()
-    }
-
-    get root() {
-        if (!this._root) {
-            this._root = html(STYLE)
-                .type('text/css')
-                .rel('stylesheet')
-                .on('attached', () => this.update());
-        }
-        return this._root
-    }
-
-    appendToHead() {
-        if (!document.head.contains(this.root.el)) {
-            this.root.appendToHead();
-        }
-        return this
-    }
-
-    append(...rulesetObjArr) {
-        if (rulesetObjArr.length) {
-            rulesetObjArr.flat().forEach(r => this.rulesetObjArr.push(r));
-            if (this.isAttached) {
-                return this.update()
-            }
-        }
-        return this
-    }
-
-    get disabled() {
-        return this.root.el.disabled
-    }
-
-    disable(isDisabled = true) {
-        this.root.el.disabled = isDisabled;
-        return this
-    }
-
-    enable(isEnabled = true) {
-        return this.disable(!isEnabled)
-    }
-
-    title(tagTitle) {
-        this.root.el.title = tagTitle;
-        return this
-    }
-
-    rm() {
-        this.root.rm();
-        this._root = undefined;
-        return this
-    }
-
-    minified(val) {
-        this.minified = val;
-        return this
-    }
-
-    toString(minified = this.minified) {
-        const indentation = minified ? -1 : 0;
-        const separator = nl(indentation);
-        return this.rulesetObjArr
-            .map(rule => objToRulesArr(rule)
-                .map(rule => rule.toString(indentation))
-                .join(separator)
-            )
-            .join(separator)
-    }
-
-    update() {
-        const content = this.toString();
-        // Only if successful, empty it
-        this.root.setText(content);
-        return this
-    }
-}
-
-function css(...rulesetObjArr) {
-    return new StyleTag(...rulesetObjArr)
-}
-
-function toTag(x) {
-    if (x instanceof Element) {
-        return x[jaTag] || new Tag(x)
-    }
-    if (x instanceof Tag) {
-        return x
-    }
-    if (isComponent(x)) {
-        return toTag(x.root)
-    }
-    if (isTagObj(x)) {
-        return objToTag(x)
-    }
-    throw new Error(`Invalid Tag or Element instance: ${x}`)
-}
-
-function isTagObj(x) {
-    return isObj(x) && isStr(x.name)
-}
-
-function objToTag(x) {
-    const { name, ns } = x;
-    const el = doc.el(name, ns);
-    const ret = new Tag(el);
-    mapKeyVal(x, (method, param) => {
-        if (method !== 'name' && method !== 'ns' && isFn(ret[method])) {
-            if (isArr(param)) {
-                ret[method](...param);
-            } else {
-                ret[method](param);
-            }
-        }
-    });
-    return ret
-}
-
-function toNativeFrag(...xArr) {
-    const ret = doc.frag();
-    xArr.forEach(x => x !== undefined && ret.appendChild(toNative(x)));
-    return ret
-}
-
-function toNativeEl(x) {
-    if (arguments.length === 0 || x === undefined) {
-        throw new TypeError(`Cannot convert ${x} to native DOM`)
-    }
-    if (x instanceof Element || x instanceof Text || x instanceof DocumentFragment || x instanceof Comment) {
-        return x
-    }
-    if (x instanceof Tag || x instanceof Frag) {
-        return x.el
-    }
-    if (isComponent(x)) {
-        return toNativeEl(x.root)
-    }
-    if (isTagObj(x)) {
-        return objToTag(x).el
-    }
-    // Whatever else will convert to a text node
-    return doc.text(x)
-}
-
-function toNative(x) {
-    if (isArr(x)) {
-        return toNativeFrag(...x)
-    }
-    return toNativeEl(x)
-}
-
-function h(tagName, attrs, children) {
-    return html(tagName).setAttrs(attrs).append(children)
-}
-
-function htmlTag(tagName = 'html') {
-    return toTag(isStr(tagName) ? doc.el(tagName) : tagName)
-}
-
-function svgTag(tagName = 'svg') {
-    return toTag(isStr(tagName) ? doc.el(tagName, SVG_NS) : tagName)
-}
-
-function mathMlTag(tagName = 'math') {
-    return toTag(isStr(tagName) ? doc.el(tagName, MATH_NS) : tagName)
-}
-
-const sugarProxy = {
-    get(target, tagName) {
-        const tag = target(tagName);
-        return function proxiedTag(...children) {
-            return tag.append(...children)
-        }
-    }
-};
-
-const html = new Proxy(htmlTag, sugarProxy);
-const svg = new Proxy(svgTag, sugarProxy);
-const mathMl = new Proxy(mathMlTag, sugarProxy);
-
-function queryId(elementId) {
-    return toTag(document.getElementById(elementId))
-}
-
-function query(selector, root = document.body) {
-    if (isSel(selector)) {
-        selector = selector.selector;
-    }
-    return toTag(root).query(selector)
-}
-
-function queryAll(selector, root = document.body) {
-    if (isSel(selector)) {
-        selector = selector.selector;
-    }
-    return toTag(root).queryAll(selector)
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
-const attachedEvent = new Event('attached');
-const detachedEvent = new Event('detached');
-
-function mutationObservationCb(mutationsList, observer) {
-    for (var mutation of mutationsList) {
-        if (mutation.type == 'childList') {
-            mutation.addedNodes.forEach(n => n.dispatchEvent(attachedEvent));
-            mutation.removedNodes.forEach(n => n.dispatchEvent(detachedEvent));
-        }
-    }
-}
-var mo;
-
-function startObserving(observationRoot = document.documentElement) {
-    // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
-    mo = new MutationObserver(mutationObservationCb);
-    const config = { childList: true, subtree: true };
-    mo.observe(observationRoot, config);    
-}
-
-function stopObserving() {
-    if (mo) {
-        mo.disconnect();
-    }
-}
-
-const DOMContentLoaded = 'DOMContentLoaded';
-
-function ready(fn) {
-    const { document: { readyState } } = window;
-    if (readyState === 'complete' || readyState === 'loaded' || readyState === 'interactive') {
-        fn();
-    } else {
-        function onReady() {
-            win.off(DOMContentLoaded, onReady);
-            fn();
-        }
-        win.on(DOMContentLoaded, onReady);
-    }
-}
-
-win.on('unload', () => stopObserving());
-
-ready(() => startObserving());
-
-export { col, css, doc, em, ent, frag, h, html, isDim, isSel, mathMl, mathMlTag, perc, px, query, queryAll, queryId, qut, ready, rem, rnd, router, runOnce, sel, svg, svgTag, toTag, vh, vw };