@taybart/corvid 0.1.30 → 0.2.0

package/dist/dom.d.ts

@@ -7,6 +7,8 @@ import { logger } from './utils';
  * onDomContentLoaded callback
  */
 export declare function ready(cb: () => void): void;
+export declare function onFocus(cb: () => void): void;
+export declare function onBlur(cb: () => void): void;
 export declare function on(event: string, cb: (ev: Event) => void): () => void;
 export declare function onKey(key: string, cb: (ev: {
     ctrl: boolean;
@@ -19,44 +21,50 @@ export declare function els(query: string, verbose?: boolean): el[];
 type elOpts = {
     element?: HTMLElement;
     query?: string;
-    type?: string;
+    tag?: string;
     content?: any;
     class?: string | string[];
     style?: Object;
     id?: string;
-    parent?: HTMLElement | el;
+    parent?: string | HTMLElement | el;
     attrs?: Object;
 };
 export declare class el {
     el: HTMLElement | null;
     query: string;
     log: logger;
-    listeners: Record<string, Array<(ev: Event) => void>>;
+    listeners: Record<string, Array<{
+        cb: (ev: Event) => void;
+        options?: AddEventListenerOptions | boolean;
+    }>>;
     constructor(opts: HTMLElement | string | elOpts, verbose?: boolean);
     static query(query: string, verbose?: boolean): el;
     /*** dom manipulation ***/
     value(update?: string): string | el;
     parent(parent: HTMLElement | el): this;
+    append(ch: HTMLElement | el | string): this;
     appendChild(ch: HTMLElement | el): this;
-    child(ch: HTMLElement | el): this;
-    prependChild(ch: HTMLElement | el): this;
+    child(ch: HTMLElement | el | string): this;
+    prepend(ch: HTMLElement | el | string): this;
+    prependChild(ch: HTMLElement | el | string): this;
     empty(): this;
     content(content: any, { text }?: {
         text?: boolean;
     }): this;
+    html(content: string): void;
     src(url: string): this;
+    attrs(attrs: Object): this;
+    attr(key: string, val: string): this;
+    removeAttr(key: string): this;
     /*** Style ***/
     style(update: Object | string, stringify?: boolean): this | undefined;
     hasClass(className: string): boolean;
     addClass(className: string | string[]): this;
     removeClass(className: string | string[]): this;
     /*** Templates ***/
-    html(content: string): void;
-    render(vars?: {}): string;
-    appendTemplate(template: el, vars: any): void;
     /*** Events ***/
-    on(event: string, cb: (ev: Event) => void): this;
-    listen(event: string, cb: (ev: Event) => void): this;
+    on(event: string, cb: (ev: Event) => void, options?: AddEventListenerOptions | boolean): this;
+    listen(event: string, cb: (ev: Event) => void, options?: AddEventListenerOptions | boolean): this;
     removeListeners(event: string): this;
 }
 /**

package/dist/dom.js

@@ -1,9 +1,9 @@
-function toKebab(str) {
+function strings_toKebab(str) {
     return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, (s, ofs)=>(ofs ? '-' : '') + s.toLowerCase());
 }
 function render(style) {
     let s = '';
-    Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}:${v};`);
+    Object.entries(style).forEach(([k, v])=>s += `${strings_toKebab(k)}:${v};`);
     return s;
 }
 function _define_property(obj, key, value) {
@@ -74,6 +74,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 ()=>{
@@ -122,21 +132,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;
@@ -147,10 +165,29 @@ 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;
+    }
     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;
@@ -182,38 +219,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;
     }
@@ -233,7 +255,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;
@@ -242,11 +264,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}`);
@@ -261,7 +283,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)){
@@ -282,4 +309,4 @@ const dom = {
     on,
     onKey
 };
-export { dom as default, dom_el as el, els, interpolate, on, onKey, ready };
+export { dom as default, dom_el as el, els, interpolate, on, onBlur, onFocus, onKey, ready };

package/dist/index.js

@@ -32,6 +32,7 @@ __webpack_require__.d(style_namespaceObject, {
     cssVar: ()=>cssVar,
     gradient: ()=>gradient,
     handleThemeSwitch: ()=>handleThemeSwitch,
+    inject: ()=>inject,
     isDarkMode: ()=>isDarkMode,
     onDarkMode: ()=>onDarkMode,
     render: ()=>render,
@@ -45,6 +46,8 @@ __webpack_require__.d(dom_namespaceObject, {
     els: ()=>els,
     interpolate: ()=>interpolate,
     on: ()=>on,
+    onBlur: ()=>onBlur,
+    onFocus: ()=>onFocus,
     onKey: ()=>onKey,
     ready: ()=>ready
 });
@@ -123,6 +126,18 @@ function render(style) {
     Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}:${v};`);
     return s;
 }
+function inject(selector, style) {
+    const existing = document.getElementById(`corvid-injected-${encodeURIComponent(selector)}`);
+    if (existing) existing.remove();
+    const injected = document.createElement('style');
+    injected.id = `corvid-injected-${encodeURIComponent(selector)}`;
+    let s = `${selector} {\n`;
+    Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}: ${v};\n`);
+    s += '}';
+    injected.textContent = s;
+    document.head.appendChild(injected);
+    return s;
+}
 function isDarkMode() {
     return window.matchMedia('(prefers-color-scheme: dark)').matches;
 }
@@ -270,6 +285,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 ()=>{
@@ -318,21 +343,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,10 +376,29 @@ 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;
+    }
     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;
@@ -378,38 +430,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 +466,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 +475,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 +494,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)){

package/dist/ls.js

@@ -1,9 +1,9 @@
-function toKebab(str) {
+function strings_toKebab(str) {
     return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, (s, ofs)=>(ofs ? '-' : '') + s.toLowerCase());
 }
 function render(style) {
     let s = '';
-    Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}:${v};`);
+    Object.entries(style).forEach(([k, v])=>s += `${strings_toKebab(k)}:${v};`);
     return s;
 }
 function _define_property(obj, key, value) {
@@ -93,21 +93,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;
@@ -118,10 +126,29 @@ 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;
+    }
     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;
@@ -153,38 +180,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;
     }
@@ -204,7 +216,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;
@@ -213,11 +225,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}`);
@@ -232,7 +244,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)){
@@ -241,11 +258,6 @@ class dom_el {
         }
     }
 }
-function interpolate(str, params) {
-    let names = Object.keys(params).map((k)=>`_${k}`);
-    let vals = Object.values(params);
-    return new Function(...names, `return \`${str.replace(/\$\{(\w*)\}/g, '${_$1}')}\`;`)(...vals);
-}
 function get(key, _default) {
     let ret = localStorage.getItem(key);
     if (null === ret && null != _default) {

package/dist/qr.js

@@ -1904,12 +1904,12 @@ const QRErrorCorrectLevel = {
     Q: 3,
     H: 2
 };
-function toKebab(str) {
+function strings_toKebab(str) {
     return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, (s, ofs)=>(ofs ? '-' : '') + s.toLowerCase());
 }
 function render(style) {
     let s = '';
-    Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}:${v};`);
+    Object.entries(style).forEach(([k, v])=>s += `${strings_toKebab(k)}:${v};`);
     return s;
 }
 function utils_define_property(obj, key, value) {
@@ -1999,21 +1999,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;
@@ -2024,10 +2032,29 @@ 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;
+    }
     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;
@@ -2059,38 +2086,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;
     }
@@ -2110,7 +2122,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;
@@ -2119,11 +2131,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}`);
@@ -2138,7 +2150,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)){
@@ -2147,11 +2164,6 @@ class dom_el {
         }
     }
 }
-function interpolate(str, params) {
-    let names = Object.keys(params).map((k)=>`_${k}`);
-    let vals = Object.values(params);
-    return new Function(...names, `return \`${str.replace(/\$\{(\w*)\}/g, '${_$1}')}\`;`)(...vals);
-}
 class QR {
     static render(config, element) {
         const settings = this.getDefaultSettings(config);

package/dist/style.d.ts

@@ -3,6 +3,7 @@
  **************/
 export declare function cssVar(name: string): string;
 export declare function render(style: Object): string;
+export declare function inject(selector: string, style: Object): string;
 /**
  * Check if the current theme is dark
  */

package/dist/style.js

@@ -10,6 +10,18 @@ function render(style) {
     Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}:${v};`);
     return s;
 }
+function inject(selector, style) {
+    const existing = document.getElementById(`corvid-injected-${encodeURIComponent(selector)}`);
+    if (existing) existing.remove();
+    const injected = document.createElement('style');
+    injected.id = `corvid-injected-${encodeURIComponent(selector)}`;
+    let s = `${selector} {\n`;
+    Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}: ${v};\n`);
+    s += '}';
+    injected.textContent = s;
+    document.head.appendChild(injected);
+    return s;
+}
 function isDarkMode() {
     return window.matchMedia('(prefers-color-scheme: dark)').matches;
 }
@@ -34,4 +46,4 @@ function gradient(start, end, value) {
     const blue = Math.round(start.blue + (end.blue - start.blue) * value / 100);
     return `rgb(${red}, ${green}, ${blue})`;
 }
-export { cssVar, gradient, handleThemeSwitch, isDarkMode, onDarkMode, render, switchTheme };
+export { cssVar, gradient, handleThemeSwitch, inject, isDarkMode, onDarkMode, render, switchTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taybart/corvid",
-  "version": "0.1.30",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "exports": {
@@ -38,18 +38,20 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "rslib build",
-    "dev": "rslib build --watch"
-  },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^17.4.7",
     "@rslib/core": "^0.6.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@types/bun": "^1.2.13",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^22.8.1",
-    "typescript": "^5.8.3"
+    "happy-dom": "^18.0.1",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
-}
+}