@taybart/corvid 0.1.31 → 0.2.2

package/dist/index.js

@@ -29,9 +29,12 @@ __webpack_require__.d(strings_namespaceObject, {
 var style_namespaceObject = {};
 __webpack_require__.r(style_namespaceObject);
 __webpack_require__.d(style_namespaceObject, {
+    css: ()=>css,
     cssVar: ()=>cssVar,
+    eject: ()=>eject,
     gradient: ()=>gradient,
     handleThemeSwitch: ()=>handleThemeSwitch,
+    inject: ()=>inject,
     isDarkMode: ()=>isDarkMode,
     onDarkMode: ()=>onDarkMode,
     render: ()=>render,
@@ -40,13 +43,18 @@ __webpack_require__.d(style_namespaceObject, {
 var dom_namespaceObject = {};
 __webpack_require__.r(dom_namespaceObject);
 __webpack_require__.d(dom_namespaceObject, {
+    component: ()=>component,
+    create: ()=>create,
     default: ()=>dom,
     el: ()=>dom_el,
     els: ()=>els,
     interpolate: ()=>interpolate,
     on: ()=>on,
+    onBlur: ()=>onBlur,
+    onFocus: ()=>onFocus,
     onKey: ()=>onKey,
-    ready: ()=>ready
+    ready: ()=>ready,
+    registerElement: ()=>registerElement
 });
 var network_namespaceObject = {};
 __webpack_require__.r(network_namespaceObject);
@@ -123,6 +131,105 @@ function render(style) {
     Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}:${v};`);
     return s;
 }
+function splitSelectors(selector) {
+    const out = [];
+    let depth = 0;
+    let quote = '';
+    let current = '';
+    for (const ch of selector){
+        if (quote) {
+            if (ch === quote) quote = '';
+        } else if ('"' === ch || "'" === ch) quote = ch;
+        else if ('(' === ch || '[' === ch) depth++;
+        else if (')' === ch || ']' === ch) depth--;
+        else if (',' === ch && 0 === depth) {
+            if (current.trim()) out.push(current.trim());
+            current = '';
+            continue;
+        }
+        current += ch;
+    }
+    if (current.trim()) out.push(current.trim());
+    return out;
+}
+function resolve(parents, selector) {
+    const out = [];
+    for (const parent of parents)for (const part of splitSelectors(selector))out.push(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`);
+    return out;
+}
+function compile(parents, decls, indent = '') {
+    const blocks = [];
+    const props = [];
+    const nested = [];
+    for (const [k, v] of Object.entries(decls))if (null !== v && 'object' == typeof v) nested.push([
+        k,
+        v
+    ]);
+    else props.push(`${indent}  ${toKebab(k)}: ${v};`);
+    if (props.length) blocks.push(`${indent}${parents.join(', ')} {\n${props.join('\n')}\n${indent}}`);
+    for (const [selector, block] of nested){
+        if (selector.startsWith('@')) {
+            const inner = selector.startsWith('@keyframes') ? Object.entries(block).flatMap(([step, d])=>null !== d && 'object' == typeof d ? compile([
+                    step
+                ], d, `${indent}  `) : []) : compile(parents, block, `${indent}  `);
+            if (inner.length) blocks.push(`${indent}${selector} {\n${inner.join('\n')}\n${indent}}`);
+            continue;
+        }
+        blocks.push(...compile(resolve(parents, selector), block, indent));
+    }
+    return blocks;
+}
+function css(selector, style) {
+    return compile(splitSelectors(selector), style).join('\n');
+}
+function registry() {
+    const doc = document;
+    if (!doc.__corvidSheets) doc.__corvidSheets = new Map();
+    return doc.__corvidSheets;
+}
+function adoptable() {
+    return 'undefined' != typeof CSSStyleSheet && 'replaceSync' in CSSStyleSheet.prototype && 'undefined' != typeof Document && 'adoptedStyleSheets' in Document.prototype;
+}
+function styleTag(key) {
+    const tagged = Array.from(document.head.querySelectorAll('style[data-corvid]'));
+    for (const node of tagged)if (node.dataset.corvid === key) return node;
+    const node = document.createElement('style');
+    node.dataset.corvid = key;
+    document.head.appendChild(node);
+    return node;
+}
+function inject(selector, style, { key = selector } = {}) {
+    const rules = css(selector, style);
+    const sheets = registry();
+    const existing = sheets.get(key);
+    if (existing) {
+        if ('replaceSync' in existing) existing.replaceSync(rules);
+        else existing.textContent = rules;
+        return rules;
+    }
+    if (adoptable()) {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(rules);
+        document.adoptedStyleSheets = [
+            ...document.adoptedStyleSheets,
+            sheet
+        ];
+        sheets.set(key, sheet);
+        return rules;
+    }
+    const node = styleTag(key);
+    node.textContent = rules;
+    sheets.set(key, node);
+    return rules;
+}
+function eject(key) {
+    const sheets = registry();
+    const sheet = sheets.get(key);
+    if (!sheet) return;
+    if ('replaceSync' in sheet) document.adoptedStyleSheets = document.adoptedStyleSheets.filter((s)=>s !== sheet);
+    else sheet.remove();
+    sheets.delete(key);
+}
 function isDarkMode() {
     return window.matchMedia('(prefers-color-scheme: dark)').matches;
 }
@@ -257,6 +364,37 @@ class logger {
         });
     }
 }
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function _class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) return descriptor.get.call(receiver);
+    return descriptor.value;
+}
+function _class_apply_descriptor_set(receiver, descriptor, value) {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
+        if (!descriptor.writable) throw new TypeError("attempted to set read only private field");
+        descriptor.value = value;
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
+    return privateMap.get(receiver);
+}
+function _class_private_field_get(receiver, privateMap) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
 function dom_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -270,6 +408,16 @@ function dom_define_property(obj, key, value) {
 function ready(cb) {
     window.addEventListener('DOMContentLoaded', cb);
 }
+function onFocus(cb) {
+    window.addEventListener('focus', ()=>{
+        cb();
+    });
+}
+function onBlur(cb) {
+    window.addEventListener('blur', ()=>{
+        cb();
+    });
+}
 function on(event, cb) {
     document.addEventListener(event, cb);
     return ()=>{
@@ -296,6 +444,14 @@ function onKey(key, cb, verbose = false) {
 function els(query, verbose = false) {
     return Array.from(document.querySelectorAll(query)).map((n)=>new dom_el(n, verbose));
 }
+function registerElement(name, ctor) {
+    const existing = customElements.get(name);
+    if (existing) {
+        if (existing !== ctor) throw new Error(`custom element ${name} is already registered by ${existing.name}`);
+        return;
+    }
+    customElements.define(name, ctor);
+}
 class dom_el {
     static query(query, verbose = false) {
         return new dom_el(query, verbose);
@@ -318,21 +474,29 @@ class dom_el {
         parent.appendChild(this.el);
         return this;
     }
+    append(ch) {
+        return this.child(ch);
+    }
     appendChild(ch) {
         return this.child(ch);
     }
     child(ch) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
-        if (ch instanceof dom_el) this.el.appendChild(ch.el);
+        if ('string' == typeof ch) this.el.append(ch);
+        else if (ch instanceof dom_el) this.el.appendChild(ch.el);
         else this.el.appendChild(ch);
         return this;
     }
-    prependChild(ch) {
+    prepend(ch) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
-        if (ch instanceof dom_el) this.el.prepend(ch.el);
+        if ('string' == typeof ch) this.el.prepend(ch);
+        else if (ch instanceof dom_el) this.el.prepend(ch.el);
         else this.el.prepend(ch);
         return this;
     }
+    prependChild(ch) {
+        return this.prepend(ch);
+    }
     empty() {
         if (this.el) this.el.innerHTML = '';
         return this;
@@ -343,17 +507,37 @@ class dom_el {
         else this.el.innerHTML = content;
         return this;
     }
+    html(content) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        this.el.innerHTML = content;
+        return this;
+    }
     src(url) {
         if (this.el && 'src' in this.el) this.el.src = url;
         return this;
     }
+    attrs(attrs) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        for (const [k, v] of Object.entries(attrs))this.el.setAttribute(k, v);
+        return this;
+    }
+    attr(key, val) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        this.el.setAttribute(key, val);
+        return this;
+    }
+    removeAttr(key) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        this.el.removeAttribute(key);
+        return this;
+    }
     style(update, stringify = false) {
         if (this.el) {
             if ('string' == typeof update) this.el.style = update;
             else if ('object' == typeof update) {
                 if (!stringify) {
                     for (const [k, v] of Object.entries(update))this.el.style[k] = v;
-                    return;
+                    return this;
                 }
                 const s = render(update);
                 this.log.debug(`set style: ${this.el.style} -> ${s}`);
@@ -378,38 +562,23 @@ class dom_el {
         else for (const sc of className)this.el.classList.remove(sc);
         return this;
     }
-    html(content) {
-        if (!this.el) throw new Error(`no element from query: ${this.query}`);
-        this.el.innerHTML = content;
-    }
-    render(vars = {}) {
-        if (!this.el) throw new Error(`no element from query: ${this.query}`);
-        try {
-            return interpolate(this.el.innerHTML, vars);
-        } catch (e) {
-            throw new Error(`could not render template ${this.query}: ${e}`);
-        }
-    }
-    appendTemplate(template, vars) {
-        if (!this.el) throw new Error(`no element from query: ${this.query}`);
-        if (!template.el) throw new Error("template does not contain element");
-        const tmpl = template.render(vars);
-        this.el.insertAdjacentHTML('beforeend', tmpl);
-    }
-    on(event, cb) {
+    on(event, cb, options) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
         if (!this.listeners[event]) this.listeners[event] = [];
-        this.listeners[event].push(cb);
-        this.el.addEventListener(event, cb);
+        this.listeners[event].push({
+            cb,
+            options
+        });
+        this.el.addEventListener(event, cb, options);
         return this;
     }
-    listen(event, cb) {
-        return this.on(event, cb);
+    listen(event, cb, options) {
+        return this.on(event, cb, options);
     }
     removeListeners(event) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
         if (!this.listeners[event]) return this;
-        for (const cb of this.listeners[event])this.el.removeEventListener(event, cb);
+        for (const { cb, options } of this.listeners[event])this.el.removeEventListener(event, cb, options);
         this.listeners[event] = [];
         return this;
     }
@@ -429,7 +598,7 @@ class dom_el {
             this.el = opts;
             return;
         }
-        const { query, element, type, class: styleClass, style, id, content, parent, attrs } = opts;
+        const { query, element, tag, class: styleClass, style, id, content, parent, attrs } = opts;
         if (query) {
             this.log.debug(`using query: ${query}`);
             this.query = query;
@@ -438,11 +607,11 @@ class dom_el {
         } else if (element) {
             this.log.debug(`using existing element: ${element}`);
             this.el = element;
-        } else if (type) {
-            this.query = type;
-            this.log.debug(`creating element: ${type}`);
-            this.el = document.createElement(type);
-        } else throw new Error('no query or type provided');
+        } else if (tag) {
+            this.query = tag;
+            this.log.debug(`creating element: ${tag}`);
+            this.el = document.createElement(tag);
+        } else throw new Error('no query or tag provided');
         if (this.el) {
             if (id) {
                 this.log.debug(`setting id: ${id}`);
@@ -457,7 +626,12 @@ class dom_el {
             }
             if (parent) {
                 this.log.debug("adding to parent");
-                parent.appendChild(this.el);
+                let p = parent;
+                if ('string' == typeof parent) {
+                    this.log.debug(`parent query: ${parent}`);
+                    p = document.querySelector(parent);
+                }
+                p.appendChild(this.el);
             }
         }
         if (attrs) for (const [key, val] of Object.entries(attrs)){
@@ -466,6 +640,56 @@ class dom_el {
         }
     }
 }
+function create(opts, verbose = false) {
+    const node = new dom_el(opts, verbose).el;
+    if (!node) throw new Error(`could not create element: ${opts.tag ?? opts.query ?? '?'}`);
+    return node;
+}
+var _mounted = /*#__PURE__*/ new WeakMap(), _pendingAttrs = /*#__PURE__*/ new WeakMap();
+class component extends HTMLElement {
+    static register(tag) {
+        const name = tag ?? this.tag;
+        if (!name) throw new Error(`${this.name}: nothing to register as, set \`static tag = 'x-...'\``);
+        if (!name.includes('-')) throw new Error(`${this.name}: '${name}' is not a valid custom element name, it needs a hyphen`);
+        if (this.styles) inject(name, this.styles);
+        registerElement(name, this);
+    }
+    mount() {}
+    unmount() {}
+    onAttr(_name, _value, _prev) {}
+    connectedCallback() {
+        if (!_class_private_field_get(this, _mounted)) {
+            _class_private_field_set(this, _mounted, true);
+            this.mount();
+            const queued = _class_private_field_get(this, _pendingAttrs);
+            _class_private_field_set(this, _pendingAttrs, []);
+            for (const [name, value, prev] of queued)this.onAttr(name, value, prev);
+        }
+    }
+    disconnectedCallback() {
+        this.unmount();
+    }
+    attributeChangedCallback(name, prev, value) {
+        if (prev === value) return;
+        if (!_class_private_field_get(this, _mounted)) return void _class_private_field_get(this, _pendingAttrs).push([
+            name,
+            value,
+            prev
+        ]);
+        this.onAttr(name, value, prev);
+    }
+    constructor(...args){
+        super(...args), _class_private_field_init(this, _mounted, {
+            writable: true,
+            value: false
+        }), _class_private_field_init(this, _pendingAttrs, {
+            writable: true,
+            value: []
+        });
+    }
+}
+dom_define_property(component, "tag", '');
+dom_define_property(component, "styles", null);
 function interpolate(str, params) {
     let names = Object.keys(params).map((k)=>`_${k}`);
     let vals = Object.values(params);
@@ -474,6 +698,9 @@ function interpolate(str, params) {
 const dom = {
     el: dom_el,
     els,
+    create,
+    component,
+    registerElement,
     ready,
     on,
     onKey