@taybart/corvid 0.1.10 → 0.1.12

package/dist/dom.d.ts

@@ -32,6 +32,7 @@ export declare class el {
     log: logger;
     listeners: Record<string, Array<(ev: Event) => void>>;
     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;
@@ -49,6 +50,7 @@ export declare class el {
     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 ***/
@@ -64,4 +66,11 @@ export declare class el {
  * @return The interpolated string
  */
 export declare function interpolate(str: string, params: Object): string;
-export {};
+declare const _default: {
+    el: typeof el;
+    els: typeof els;
+    ready: typeof ready;
+    on: typeof on;
+    onKey: typeof onKey;
+};
+export default _default;

package/dist/dom.js

@@ -0,0 +1,281 @@
+function 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};`);
+    return s;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+var utils_logLevel = /*#__PURE__*/ function(logLevel) {
+    logLevel[logLevel["none"] = -1] = "none";
+    logLevel[logLevel["error"] = 0] = "error";
+    logLevel[logLevel["warn"] = 1] = "warn";
+    logLevel[logLevel["info"] = 2] = "info";
+    logLevel[logLevel["debug"] = 3] = "debug";
+    logLevel[logLevel["trace"] = 4] = "trace";
+    return logLevel;
+}({});
+class logger {
+    error(...args) {
+        if (this.level >= 0) console.error(`[corvid] ${this.prefix}`, ...args);
+    }
+    warn(...args) {
+        if (this.level >= 1) console.warn(`[corvid] ${this.prefix}`, ...args);
+    }
+    info(...args) {
+        if (this.level >= 2) console.info(`[corvid] ${this.prefix}`, ...args);
+    }
+    debug(...args) {
+        if (this.level >= 3) console.debug(`[corvid] ${this.prefix}`, ...args);
+    }
+    trace(...args) {
+        if (this.level >= 4) console.trace(`[corvid] ${this.prefix}`, ...args);
+    }
+    log(...args) {
+        console.log(`[corvid] ${this.prefix}`, ...args);
+    }
+    constructor(level = 2, prefix){
+        _define_property(this, "level", void 0);
+        _define_property(this, "prefix", void 0);
+        this.level = level;
+        this.prefix = prefix ? `(${prefix}):` : ':';
+        if (-1 === this.level) [
+            'error',
+            'warn',
+            'info',
+            'debug',
+            'trace',
+            'log'
+        ].forEach((methodName)=>{
+            this[methodName] = ()=>{};
+        });
+    }
+}
+function dom_define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function ready(cb) {
+    window.addEventListener('DOMContentLoaded', cb);
+}
+function on(event, cb) {
+    document.addEventListener(event, cb);
+    return ()=>{
+        document.removeEventListener(event, cb);
+    };
+}
+function onKey(key, cb, verbose = false) {
+    const log = new logger(verbose ? utils_logLevel.debug : utils_logLevel.none, 'onKey');
+    log.debug(`adding ${key} keydown listener`);
+    const handler = (ev)=>{
+        if (ev.key === key) cb({
+            ctrl: ev.ctrlKey,
+            alt: ev.altKey,
+            meta: ev.metaKey,
+            shift: ev.shiftKey
+        });
+    };
+    window.addEventListener('keydown', handler);
+    return ()=>{
+        log.debug(`removing ${key} listener`);
+        window.removeEventListener('keydown', handler);
+    };
+}
+function els(query, verbose = false) {
+    return Array.from(document.querySelectorAll(query)).map((n)=>new dom_el(n, verbose));
+}
+class dom_el {
+    static query(query, verbose = false) {
+        return new dom_el(query, verbose);
+    }
+    value(update) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        if (void 0 !== update) {
+            if ('value' in this.el) this.el.value = update;
+            if ('src' in this.el) this.el.src = update;
+            return this;
+        }
+        if ('value' in this.el) return this.el.value;
+        if ('innerText' in this.el) return this.el.innerText;
+        if ('innerHTML' in this.el) return this.el.innerHTML;
+        this.log.warn(`element (${this.query}) does not contain value, returning empty string`);
+        return '';
+    }
+    parent(parent) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        parent.appendChild(this.el);
+        return this;
+    }
+    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);
+        else this.el.appendChild(ch);
+        return this;
+    }
+    prependChild(ch) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        if (ch instanceof dom_el) this.el.prepend(ch.el);
+        else this.el.prepend(ch);
+        return this;
+    }
+    empty() {
+        if (this.el) this.el.innerHTML = '';
+        return this;
+    }
+    content(content, { text = false } = {}) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        if (text) this.el.textContent = content;
+        else this.el.innerHTML = content;
+        return this;
+    }
+    src(url) {
+        if (this.el && 'src' in this.el) this.el.src = url;
+        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;
+                }
+                const s = render(update);
+                this.log.debug(`set style: ${this.el.style} -> ${s}`);
+                this.el.style = s;
+            }
+        }
+        return this;
+    }
+    hasClass(className) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        return this.el.classList.contains(className);
+    }
+    addClass(className) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        if ('string' == typeof className) this.el.classList.add(className);
+        else for (const sc of className)this.el.classList.add(sc);
+        return this;
+    }
+    removeClass(className) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        if ('string' == typeof className) this.el.classList.remove(className);
+        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) {
+        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);
+        return this;
+    }
+    listen(event, cb) {
+        return this.on(event, cb);
+    }
+    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);
+        this.listeners[event] = [];
+        return this;
+    }
+    constructor(opts, verbose = false){
+        dom_define_property(this, "el", void 0);
+        dom_define_property(this, "query", '');
+        dom_define_property(this, "log", void 0);
+        dom_define_property(this, "listeners", {});
+        this.log = new logger(verbose ? utils_logLevel.debug : utils_logLevel.none, 'element');
+        if ('string' == typeof opts) {
+            this.query = opts;
+            this.el = document.querySelector(opts);
+            return;
+        }
+        if (opts instanceof HTMLElement) {
+            this.log.debug(`using existing element: ${opts}`);
+            this.el = opts;
+            return;
+        }
+        const { query, element, type, class: styleClass, style, id, content, parent } = opts;
+        if (query) {
+            this.log.debug(`using query: ${query}`);
+            this.query = query;
+            this.el = document.querySelector(query);
+            if (!this.el) throw new Error(`no element from query: ${query}`);
+        } 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');
+        if (this.el) {
+            if (id) {
+                this.log.debug(`setting id: ${id}`);
+                this.el.id = id;
+            }
+            if (styleClass) if ('string' == typeof styleClass) this.el.classList.add(styleClass);
+            else for (const sc of styleClass)this.el.classList.add(sc);
+            if (style) this.style(style);
+            if (content) {
+                this.log.debug(`setting content: ${content}`);
+                this.el.innerHTML = content;
+            }
+            if (parent) {
+                this.log.debug("adding to parent");
+                parent.appendChild(this.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);
+}
+const dom = {
+    el: dom_el,
+    els,
+    ready,
+    on,
+    onKey
+};
+export { dom as default, dom_el as el, els, interpolate, on, onKey, ready };

package/dist/index.js

@@ -40,6 +40,7 @@ __webpack_require__.d(style_namespaceObject, {
 var dom_namespaceObject = {};
 __webpack_require__.r(dom_namespaceObject);
 __webpack_require__.d(dom_namespaceObject, {
+    default: ()=>dom,
     el: ()=>dom_el,
     els: ()=>els,
     interpolate: ()=>interpolate,
@@ -50,6 +51,7 @@ __webpack_require__.d(dom_namespaceObject, {
 var network_namespaceObject = {};
 __webpack_require__.r(network_namespaceObject);
 __webpack_require__.d(network_namespaceObject, {
+    default: ()=>network,
     params: ()=>network_params,
     refresh: ()=>refresh,
     request: ()=>request,
@@ -277,6 +279,9 @@ function els(query, verbose = false) {
     return Array.from(document.querySelectorAll(query)).map((n)=>new dom_el(n, verbose));
 }
 class dom_el {
+    static query(query, verbose = false) {
+        return new dom_el(query, verbose);
+    }
     value(update) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
         if (void 0 !== update) {
@@ -355,6 +360,10 @@ 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 {
@@ -440,6 +449,13 @@ function interpolate(str, params) {
     let vals = Object.values(params);
     return new Function(...names, `return \`${str.replace(/\$\{(\w*)\}/g, '${_$1}')}\`;`)(...vals);
 }
+const dom = {
+    el: dom_el,
+    els,
+    ready,
+    on,
+    onKey
+};
 function network_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -487,8 +503,9 @@ class request {
         this.opts.body = body;
         return this;
     }
-    async do({ path, params: passedParams, override } = {}) {
-        if (this.opts.auth) this.opts.headers.Authorization = `Bearer ${this.opts.auth}`;
+    build({ path, params: passedParams, override } = {}) {
+        if (this.opts.auth && !this.opts.headers.Authorization) if ('string' == typeof this.opts.auth) this.opts.headers.Authorization = `Bearer ${this.opts.auth}`;
+        else this.opts.headers.Authorization = `Basic ${btoa(`${this.opts.auth.username}:${this.opts.auth.password}`)}`;
         if (!override) override = {};
         const body = override.body || this.opts.body;
         let url = this.opts.url;
@@ -501,17 +518,29 @@ class request {
             this.log.debug(`params: ${reqParams.toString()}`);
             url = `${url}?${reqParams.toString()}`;
         }
+        override.headers = override.headers || {};
         this.log.debug(`${this.opts.method} ${url}`);
-        const res = await fetch(url, {
-            method: this.opts.method,
-            credentials: this.opts.credentials,
-            headers: {
-                accept: 'application/json',
-                'content-type': 'application/json',
-                ...this.opts.headers
-            },
-            body: JSON.stringify(body)
+        return {
+            url,
+            options: {
+                method: override.method || this.opts.method,
+                credentials: this.opts.credentials,
+                headers: {
+                    ...this.opts.headers,
+                    ...override.headers
+                },
+                body: JSON.stringify(body)
+            }
+        };
+    }
+    async do({ path, params: passedParams, override = {} } = {}) {
+        const { url, options } = this.build({
+            path,
+            params: passedParams,
+            override
         });
+        this.log.debug(`${this.opts.method} ${url}`);
+        const res = await fetch(url, options);
         const success = override.success || this.opts.success;
         if (res.status !== success) {
             const body = await res.json();
@@ -637,6 +666,12 @@ class refresh {
         this.url = url;
     }
 }
+const network = {
+    params: network_params,
+    request,
+    ws,
+    refresh
+};
 function get(key, _default) {
     let ret = localStorage.getItem(key);
     if (!ret && _default) {

package/dist/network.d.ts

@@ -11,27 +11,62 @@ export declare class params {
 export type requestOpts = {
     url?: string;
     type?: 'json';
-    method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
+    method?: 'HEAD' | 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'OPTIONS';
     params?: Object | params;
     headers?: Record<string, string>;
-    auth?: string;
+    auth?: string | {
+        username: string;
+        password: string;
+    };
     body?: Object;
     success?: number;
     credentials?: RequestCredentials;
+    insecureNoVerify?: boolean;
 };
 export declare class request {
     opts: requestOpts;
     log: logger;
     constructor(opts?: requestOpts, verbose?: boolean);
-    auth(token: string): this;
+    auth(token: string | {
+        username: string;
+        password: string;
+    }): this;
     basicAuth(username: string, password: string): this;
     body(body: Object): this;
+    build({ path, params: passedParams, override, }?: {
+        path?: string;
+        params?: Object;
+        override?: {
+            success?: number;
+            params?: Object;
+            body?: Object;
+            headers?: Object;
+            method?: string;
+        };
+    }): {
+        url: string;
+        options: {
+            method: string | undefined;
+            credentials: RequestCredentials | undefined;
+            headers: {
+                constructor: Function;
+                toString(): string;
+                toLocaleString(): string;
+                valueOf(): Object;
+                hasOwnProperty(v: PropertyKey): boolean;
+                isPrototypeOf(v: Object): boolean;
+                propertyIsEnumerable(v: PropertyKey): boolean;
+            };
+            body: string;
+        };
+    };
     do({ path, params: passedParams, override, }?: {
         path?: string;
         params?: Object;
         override?: {
             success?: number;
             params?: Object;
+            headers?: Object;
             body?: Object;
         };
     }): Promise<any>;
@@ -64,3 +99,10 @@ export declare class refresh {
     listen(): void;
 }
 /*** server sent events ***/
+declare const _default: {
+    params: typeof params;
+    request: typeof request;
+    ws: typeof ws;
+    refresh: typeof refresh;
+};
+export default _default;

package/dist/network.js

@@ -0,0 +1,272 @@
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+var utils_logLevel = /*#__PURE__*/ function(logLevel) {
+    logLevel[logLevel["none"] = -1] = "none";
+    logLevel[logLevel["error"] = 0] = "error";
+    logLevel[logLevel["warn"] = 1] = "warn";
+    logLevel[logLevel["info"] = 2] = "info";
+    logLevel[logLevel["debug"] = 3] = "debug";
+    logLevel[logLevel["trace"] = 4] = "trace";
+    return logLevel;
+}({});
+class logger {
+    error(...args) {
+        if (this.level >= 0) console.error(`[corvid] ${this.prefix}`, ...args);
+    }
+    warn(...args) {
+        if (this.level >= 1) console.warn(`[corvid] ${this.prefix}`, ...args);
+    }
+    info(...args) {
+        if (this.level >= 2) console.info(`[corvid] ${this.prefix}`, ...args);
+    }
+    debug(...args) {
+        if (this.level >= 3) console.debug(`[corvid] ${this.prefix}`, ...args);
+    }
+    trace(...args) {
+        if (this.level >= 4) console.trace(`[corvid] ${this.prefix}`, ...args);
+    }
+    log(...args) {
+        console.log(`[corvid] ${this.prefix}`, ...args);
+    }
+    constructor(level = 2, prefix){
+        _define_property(this, "level", void 0);
+        _define_property(this, "prefix", void 0);
+        this.level = level;
+        this.prefix = prefix ? `(${prefix}):` : ':';
+        if (-1 === this.level) [
+            'error',
+            'warn',
+            'info',
+            'debug',
+            'trace',
+            'log'
+        ].forEach((methodName)=>{
+            this[methodName] = ()=>{};
+        });
+    }
+}
+function network_define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+class network_params {
+    set(p) {
+        for (let [k, v] of Object.entries(p))this.params.set(k, v);
+        return this;
+    }
+    toString() {
+        return this.params.toString();
+    }
+    static render(p) {
+        const params = new URLSearchParams();
+        if (p) for (let [k, v] of Object.entries(p))params.set(k, v);
+        return params.toString();
+    }
+    constructor(p){
+        network_define_property(this, "params", void 0);
+        this.params = new URLSearchParams();
+        if (p) for (let [k, v] of Object.entries(p))this.params.set(k, v);
+        return this;
+    }
+}
+class request {
+    auth(token) {
+        const header = `Bearer ${token}`;
+        this.log.debug(`adding auth token header ${header}`);
+        this.opts.headers.Authorization = header;
+        return this;
+    }
+    basicAuth(username, password) {
+        const header = `Basic ${btoa(`${username}:${password}`)}`;
+        this.log.debug(`adding basic auth header ${header}`);
+        this.opts.headers.Authorization = header;
+        return this;
+    }
+    body(body) {
+        this.opts.body = body;
+        return this;
+    }
+    build({ path, params: passedParams, override } = {}) {
+        if (this.opts.auth && !this.opts.headers.Authorization) if ('string' == typeof this.opts.auth) this.opts.headers.Authorization = `Bearer ${this.opts.auth}`;
+        else this.opts.headers.Authorization = `Basic ${btoa(`${this.opts.auth.username}:${this.opts.auth.password}`)}`;
+        if (!override) override = {};
+        const body = override.body || this.opts.body;
+        let url = this.opts.url;
+        if (path) url = `${this.opts.url}${path}`;
+        let reqParams = this.opts.params;
+        if (override.params) reqParams = new network_params(override.params);
+        if (passedParams) if (reqParams) reqParams.set(passedParams);
+        else reqParams = new network_params(passedParams);
+        if (reqParams) {
+            this.log.debug(`params: ${reqParams.toString()}`);
+            url = `${url}?${reqParams.toString()}`;
+        }
+        override.headers = override.headers || {};
+        this.log.debug(`${this.opts.method} ${url}`);
+        return {
+            url,
+            options: {
+                method: override.method || this.opts.method,
+                credentials: this.opts.credentials,
+                headers: {
+                    ...this.opts.headers,
+                    ...override.headers
+                },
+                body: JSON.stringify(body)
+            }
+        };
+    }
+    async do({ path, params: passedParams, override = {} } = {}) {
+        const { url, options } = this.build({
+            path,
+            params: passedParams,
+            override
+        });
+        this.log.debug(`${this.opts.method} ${url}`);
+        const res = await fetch(url, options);
+        const success = override.success || this.opts.success;
+        if (res.status !== success) {
+            const body = await res.json();
+            throw new Error(`bad response ${res.status} !== ${success}, body: ${body}`);
+        }
+        return await res.json();
+    }
+    constructor(opts = {}, verbose = false){
+        network_define_property(this, "opts", void 0);
+        network_define_property(this, "log", void 0);
+        this.log = new logger(verbose ? utils_logLevel.debug : utils_logLevel.none, 'request');
+        if (opts.type && 'json' !== opts.type) throw new Error('this class only provides json requests');
+        if (!opts.url) throw new Error('must provide url');
+        this.opts = opts;
+        if (!this.opts.success) this.opts.success = 200;
+        if (!this.opts.method) this.opts.method = 'GET';
+        if (!this.opts.headers) this.opts.headers = {};
+        if (!this.opts.credentials) this.opts.credentials = 'omit';
+        if (this.opts.params && !(this.opts.params instanceof network_params)) {
+            this.log.debug("converting object params to class");
+            this.opts.params = new network_params(this.opts.params);
+        }
+        this.log.debug(`with options: ${JSON.stringify(this.opts)}`);
+    }
+}
+class ws {
+    setup() {
+        this.recursion_level += 1;
+        if (this.ws) for(let key in this.event_listeners)this.event_listeners[key].forEach((cb)=>{
+            this.ws.removeEventListener(key, cb);
+        });
+        this.ws = new WebSocket(this.url);
+        this.backoff = 100;
+        this.ws.addEventListener('open', ()=>{
+            const rl = this.recursion_level;
+            this.log.debug(`on open: reconnected (${rl})`);
+            this.is_connected = true;
+            if (!this.ws) return;
+            for(let key in this.event_listeners)this.event_listeners[key].forEach((cb)=>{
+                if (this.ws) {
+                    this.log.debug(`adding listener (${rl}): ${key}`);
+                    this.ws.addEventListener(key, cb);
+                }
+            });
+        });
+        this.ws.addEventListener('close', ()=>{
+            this.log.debug('connection closed');
+            this.is_connected = false;
+            this.backoff = Math.min(2 * this.backoff, this.max_timeout);
+            this.log.debug(`backoff: ${this.backoff}`);
+            this.reconnect_timer = window.setTimeout(()=>{
+                if (this.should_reconnect) {
+                    this.ws = null;
+                    this.setup();
+                }
+            }, this.backoff + 50 * Math.random());
+        });
+        this.ws.addEventListener('error', this.log.error);
+    }
+    send(data) {
+        if (!this.is_connected || !this.ws) throw new Error('not connected');
+        this.ws.send(JSON.stringify(data));
+    }
+    onMessage(cb) {
+        if (!this.ws) throw new Error('ws is null');
+        if (!this.event_listeners.message) this.event_listeners.message = [];
+        const handler = (e)=>{
+            const rl = this.recursion_level;
+            this.log.debug(`message(${rl}): ${e.data}`);
+            cb(e.data);
+        };
+        this.event_listeners.message.push(handler);
+        this.ws.addEventListener('message', handler);
+    }
+    onJSON(cb) {
+        this.onMessage((d)=>cb(JSON.parse(d)));
+    }
+    on(event, cb) {
+        if (!this.ws) throw new Error('ws is null');
+        if (!this.event_listeners[event]) this.event_listeners[event] = [];
+        this.event_listeners[event].push(cb);
+        this.ws.addEventListener(event, cb);
+    }
+    close() {
+        if (this.reconnect_timer) clearTimeout(this.reconnect_timer);
+        if (!this.is_connected || !this.ws) return;
+        this.should_reconnect = false;
+        this.ws.close();
+    }
+    constructor(url, verbose = false){
+        network_define_property(this, "url", void 0);
+        network_define_property(this, "ws", void 0);
+        network_define_property(this, "backoff", 100);
+        network_define_property(this, "max_timeout", 10000);
+        network_define_property(this, "should_reconnect", true);
+        network_define_property(this, "is_connected", false);
+        network_define_property(this, "recursion_level", 0);
+        network_define_property(this, "reconnect_timer", null);
+        network_define_property(this, "log", void 0);
+        network_define_property(this, "event_listeners", {});
+        this.url = url;
+        this.ws = null;
+        this.log = new logger(verbose ? utils_logLevel.debug : utils_logLevel.none, 'websocket');
+        this.setup();
+    }
+}
+class refresh {
+    listen() {
+        const socket = new ws(this.url);
+        if (socket) {
+            socket.on('open', ()=>{
+                if (this.should_reload) location.reload();
+            });
+            socket.on('close', ()=>{
+                this.should_reload = true;
+                setTimeout(this.listen, 500);
+            });
+        }
+    }
+    constructor(url){
+        network_define_property(this, "url", void 0);
+        network_define_property(this, "should_reload", false);
+        this.url = url;
+    }
+}
+const network = {
+    params: network_params,
+    request,
+    ws,
+    refresh
+};
+export { network as default, network_params as params, refresh, request, ws };

package/dist/qr/index.d.ts

@@ -1,3 +1,4 @@
+import { el } from '../dom.ts';
 export interface QRCodeConfig {
     text: string;
     size?: number;
@@ -24,7 +25,7 @@ export interface QRCode {
     isDark: (row: number, col: number) => boolean;
 }
 export declare class QR {
-    static render(config: QRCodeConfig, element: HTMLElement | HTMLCanvasElement): void;
+    static render(config: QRCodeConfig, element: el | HTMLElement | HTMLCanvasElement): void;
     private static getDefaultSettings;
     private static createQRCode;
     private static createMinQRCode;

package/dist/qr.js

@@ -1904,11 +1904,256 @@ const QRErrorCorrectLevel = {
     Q: 3,
     H: 2
 };
+function 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};`);
+    return s;
+}
+function utils_define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+var utils_logLevel = /*#__PURE__*/ function(logLevel) {
+    logLevel[logLevel["none"] = -1] = "none";
+    logLevel[logLevel["error"] = 0] = "error";
+    logLevel[logLevel["warn"] = 1] = "warn";
+    logLevel[logLevel["info"] = 2] = "info";
+    logLevel[logLevel["debug"] = 3] = "debug";
+    logLevel[logLevel["trace"] = 4] = "trace";
+    return logLevel;
+}({});
+class utils_logger {
+    error(...args) {
+        if (this.level >= 0) console.error(`[corvid] ${this.prefix}`, ...args);
+    }
+    warn(...args) {
+        if (this.level >= 1) console.warn(`[corvid] ${this.prefix}`, ...args);
+    }
+    info(...args) {
+        if (this.level >= 2) console.info(`[corvid] ${this.prefix}`, ...args);
+    }
+    debug(...args) {
+        if (this.level >= 3) console.debug(`[corvid] ${this.prefix}`, ...args);
+    }
+    trace(...args) {
+        if (this.level >= 4) console.trace(`[corvid] ${this.prefix}`, ...args);
+    }
+    log(...args) {
+        console.log(`[corvid] ${this.prefix}`, ...args);
+    }
+    constructor(level = 2, prefix){
+        utils_define_property(this, "level", void 0);
+        utils_define_property(this, "prefix", void 0);
+        this.level = level;
+        this.prefix = prefix ? `(${prefix}):` : ':';
+        if (-1 === this.level) [
+            'error',
+            'warn',
+            'info',
+            'debug',
+            'trace',
+            'log'
+        ].forEach((methodName)=>{
+            this[methodName] = ()=>{};
+        });
+    }
+}
+function dom_define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+class dom_el {
+    static query(query, verbose = false) {
+        return new dom_el(query, verbose);
+    }
+    value(update) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        if (void 0 !== update) {
+            if ('value' in this.el) this.el.value = update;
+            if ('src' in this.el) this.el.src = update;
+            return this;
+        }
+        if ('value' in this.el) return this.el.value;
+        if ('innerText' in this.el) return this.el.innerText;
+        if ('innerHTML' in this.el) return this.el.innerHTML;
+        this.log.warn(`element (${this.query}) does not contain value, returning empty string`);
+        return '';
+    }
+    parent(parent) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        parent.appendChild(this.el);
+        return this;
+    }
+    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);
+        else this.el.appendChild(ch);
+        return this;
+    }
+    prependChild(ch) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        if (ch instanceof dom_el) this.el.prepend(ch.el);
+        else this.el.prepend(ch);
+        return this;
+    }
+    empty() {
+        if (this.el) this.el.innerHTML = '';
+        return this;
+    }
+    content(content, { text = false } = {}) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        if (text) this.el.textContent = content;
+        else this.el.innerHTML = content;
+        return this;
+    }
+    src(url) {
+        if (this.el && 'src' in this.el) this.el.src = url;
+        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;
+                }
+                const s = render(update);
+                this.log.debug(`set style: ${this.el.style} -> ${s}`);
+                this.el.style = s;
+            }
+        }
+        return this;
+    }
+    hasClass(className) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        return this.el.classList.contains(className);
+    }
+    addClass(className) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        if ('string' == typeof className) this.el.classList.add(className);
+        else for (const sc of className)this.el.classList.add(sc);
+        return this;
+    }
+    removeClass(className) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        if ('string' == typeof className) this.el.classList.remove(className);
+        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) {
+        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);
+        return this;
+    }
+    listen(event, cb) {
+        return this.on(event, cb);
+    }
+    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);
+        this.listeners[event] = [];
+        return this;
+    }
+    constructor(opts, verbose = false){
+        dom_define_property(this, "el", void 0);
+        dom_define_property(this, "query", '');
+        dom_define_property(this, "log", void 0);
+        dom_define_property(this, "listeners", {});
+        this.log = new utils_logger(verbose ? utils_logLevel.debug : utils_logLevel.none, 'element');
+        if ('string' == typeof opts) {
+            this.query = opts;
+            this.el = document.querySelector(opts);
+            return;
+        }
+        if (opts instanceof HTMLElement) {
+            this.log.debug(`using existing element: ${opts}`);
+            this.el = opts;
+            return;
+        }
+        const { query, element, type, class: styleClass, style, id, content, parent } = opts;
+        if (query) {
+            this.log.debug(`using query: ${query}`);
+            this.query = query;
+            this.el = document.querySelector(query);
+            if (!this.el) throw new Error(`no element from query: ${query}`);
+        } 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');
+        if (this.el) {
+            if (id) {
+                this.log.debug(`setting id: ${id}`);
+                this.el.id = id;
+            }
+            if (styleClass) if ('string' == typeof styleClass) this.el.classList.add(styleClass);
+            else for (const sc of styleClass)this.el.classList.add(sc);
+            if (style) this.style(style);
+            if (content) {
+                this.log.debug(`setting content: ${content}`);
+                this.el.innerHTML = content;
+            }
+            if (parent) {
+                this.log.debug("adding to parent");
+                parent.appendChild(this.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);
         if (element instanceof HTMLCanvasElement) this.renderToCanvas(element, settings);
         else {
+            if (element instanceof dom_el) element = element.el;
             const canvas = this.createCanvas(settings);
             element.appendChild(canvas);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taybart/corvid",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "type": "module",
   "main": "./dist/index.js",
   "exports": {
@@ -8,6 +8,14 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./dom": {
+      "types": "./dist/dom.d.ts",
+      "import": "./dist/dom.js"
+    },
+    "./network": {
+      "types": "./dist/network.d.ts",
+      "import": "./dist/network.js"
+    },
     "./qr": {
       "types": "./dist/qr.d.ts",
       "import": "./dist/qr.js"