@taybart/corvid 0.1.1 → 0.1.3

package/README.md

@@ -2,5 +2,117 @@
 
 fear the crow
 
+![crowtein](https://github.com/user-attachments/assets/b3bbf267-d7b0-4116-80a5-b932b409a111)
 
-![crowtein_2](https://github.com/user-attachments/assets/b3bbf267-d7b0-4116-80a5-b932b409a111)
+## Usage
+
+Non-exhastive list of features
+
+### DOM
+
+```js
+import { dom } from '@taybart/corvid'
+
+dom.ready(() => {
+    // query for existing element
+    const username = new dom.el('#username')
+    // listen for events
+    username.on('click', () => {
+        // set style, will kebab keys backgroundColor -> background-color
+        username.style({ color: 'red', backgroundColor: 'yellow' })
+        // set/get content
+        username.content(`evil: ${username.value()}`)
+    }))
+
+
+    // create new elements
+    new dom.el({
+        type: 'div',
+        id: 'hair-color',
+        class: 'hair user-info',
+        content: 'blue',
+        // will append element to username
+        parent: username,
+    })
+
+    // listen for keys and check for modifiers
+    dom.onKey('E', ({ ctrl, alt, meta, shift }) => {
+        console.log('E pressed')
+    })
+
+    /*
+     * Given a template:
+     * <template id="tmpl-test">
+     *  <div> hello ${name} </div>
+     * </template>
+     */
+     const tmpl = new dom.el('#tmpl-test')
+     // append template to el
+     username.appendTemplate(tmpl, { name: 'corvid' })
+     // or just set content
+     document.body.innerHTML = tmpl.render({ name: 'corvid' })
+})
+```
+
+### LocalStorage
+
+```js
+import { ls, dom } from '@taybart/corvid'
+
+dom.ready(() => {
+  const hpStat = new dom.el({ query: '#stat-hp', content: ls.get('stats.hp') })
+  // set element content when localstorage changes
+  ls.listen('stats.hp', hpStat)
+  // or just a callback
+  ls.listen('stats.hp', ({ key, value }) => {
+    console.log(`health is now ${value}`)
+  })
+  // set a value (required if listening for events)
+  ls.set('stats.hp', ls.get('stats.hp') - 1))
+  // set a flattened object, will update "stats.hp" and "stats.attack"
+  ls.set({ stats: { hp: 100, attack: 10 } })
+})
+```
+
+### Network
+
+```js
+import { network } '@taybart/corvid'
+
+// create an api client
+const api = network.create({
+  url: 'https://api.example.com',
+  credentials: 'include',
+  success: 250, // odd success code
+  // corvid params, string, or custom object that has .toString() and renders url safe params
+  params: new network.params({hello: 'corvid'})
+})
+
+// make a request
+const { username } = await api.do({
+    path: '/users/1',
+    override: {
+        params: network.params.render({hello: 'world!'}) , // only for this request
+    },
+})
+
+
+```
+
+### Styles
+
+```js
+import { style } '@taybart/corvid'
+
+// query css media prefers-color-scheme
+if (style.isDarkMode()) {
+    console.log('dark mode')
+}
+// listen for theme switch
+style.onDarkMode((isDark) => {
+    // set document attribute 'data-theme'
+    style.switchTheme(isDark ? 'light' : 'dark')
+    // get css variables
+    console.log(`is dark mode: ${isDark} and background is ${style.cssVar('--color-bg')`)
+})
+```

package/dist/dom.d.ts

@@ -13,6 +13,7 @@ export declare function onKey(key: string, cb: (ev: {
     meta: boolean;
     shift: boolean;
 }) => void): void;
+export declare function els(query: string, verbose?: boolean): el[];
 /*** element ***/
 type elOpts = {
     element?: HTMLElement;
@@ -28,6 +29,7 @@ export declare class el {
     el: HTMLElement | null;
     query: string;
     log: logger;
+    listeners: Record<string, Array<(ev: Event) => void>>;
     constructor(opts: HTMLElement | string | elOpts, verbose?: boolean);
     /*** dom manipulation ***/
     value(update?: string): string | el;
@@ -40,12 +42,24 @@ export declare class el {
     }): this;
     src(url: string): this;
     /*** Style ***/
-    style(style: Object | string): this;
+    style(update: Object | string, stringify?: boolean): this | undefined;
+    hasClass(className: string): boolean;
     addClass(className: string): this;
     removeClass(className: string): this;
+    /*** Templates ***/
+    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;
-    onClick(cb: (ev: Event) => void): this;
+    removeListeners(event: string): this;
 }
+/**
+ * Get a template from a string
+ * https://stackoverflow.com/a/41015840
+ * @param  str    The string to interpolate
+ * @param  params The parameters
+ * @return The interpolated string
+ */
+export declare function interpolate(str: string, params: Object): string;
 export {};

package/dist/dom.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -26,22 +26,26 @@ __webpack_require__.d(strings_namespaceObject, {
     bytesToHuman: ()=>bytesToHuman,
     toKebab: ()=>toKebab
 });
-var dom_namespaceObject = {};
-__webpack_require__.r(dom_namespaceObject);
-__webpack_require__.d(dom_namespaceObject, {
-    el: ()=>dom_el,
-    onKey: ()=>onKey,
-    ready: ()=>ready
-});
 var style_namespaceObject = {};
 __webpack_require__.r(style_namespaceObject);
 __webpack_require__.d(style_namespaceObject, {
     cssVar: ()=>cssVar,
     gradient: ()=>gradient,
+    handleThemeSwitch: ()=>handleThemeSwitch,
     isDarkMode: ()=>isDarkMode,
     onDarkMode: ()=>onDarkMode,
+    render: ()=>render,
     switchTheme: ()=>switchTheme
 });
+var dom_namespaceObject = {};
+__webpack_require__.r(dom_namespaceObject);
+__webpack_require__.d(dom_namespaceObject, {
+    el: ()=>dom_el,
+    els: ()=>els,
+    interpolate: ()=>interpolate,
+    onKey: ()=>onKey,
+    ready: ()=>ready
+});
 var network_namespaceObject = {};
 __webpack_require__.r(network_namespaceObject);
 __webpack_require__.d(network_namespaceObject, {
@@ -53,9 +57,12 @@ __webpack_require__.d(network_namespaceObject, {
 var local_storage_namespaceObject = {};
 __webpack_require__.r(local_storage_namespaceObject);
 __webpack_require__.d(local_storage_namespaceObject, {
+    clear: ()=>clear,
     get: ()=>get,
     listen: ()=>listen,
-    set: ()=>set
+    set: ()=>set,
+    setObj: ()=>setObj,
+    update: ()=>local_storage_update
 });
 function bytesToHuman(bytes, options = {}) {
     const { useSI = false, decimals = 2, includeUnits = true, targetUnit = null } = options;
@@ -102,6 +109,39 @@ function bytesToHuman(bytes, options = {}) {
 function toKebab(str) {
     return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, (s, ofs)=>(ofs ? '-' : '') + s.toLowerCase());
 }
+function cssVar(name) {
+    const style = window.getComputedStyle(document.body);
+    return style.getPropertyValue(name);
+}
+function render(style) {
+    let s = '';
+    Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}:${v};`);
+    return s;
+}
+function isDarkMode() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+function onDarkMode(cb) {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (ev)=>{
+        cb(ev.matches);
+    });
+}
+function switchTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+}
+function handleThemeSwitch() {
+    switchTheme(isDarkMode() ? 'dark' : 'light');
+    onDarkMode((dark)=>{
+        switchTheme(dark ? 'dark' : 'light');
+    });
+}
+function gradient(start, end, value) {
+    value = Math.max(0, Math.min(100, value));
+    const red = Math.round(start.red + (end.red - start.red) * value / 100);
+    const green = Math.round(start.green + (end.green - start.green) * value / 100);
+    const blue = Math.round(start.blue + (end.blue - start.blue) * value / 100);
+    return `rgb(${red}, ${green}, ${blue})`;
+}
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -212,15 +252,20 @@ function onKey(key, cb) {
         });
     });
 }
+function els(query, verbose = false) {
+    return Array.from(document.querySelectorAll(query)).map((n)=>new dom_el(n, verbose));
+}
 class dom_el {
     value(update) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
-        if (update) {
+        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 '';
     }
@@ -252,17 +297,25 @@ class dom_el {
         if (this.el && 'src' in this.el) this.el.src = url;
         return this;
     }
-    style(style) {
+    style(update, stringify = false) {
         if (this.el) {
-            if ('string' == typeof style) this.el.style = style;
-            else if ('object' == typeof style) {
-                let s = '';
-                Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}:${v};`);
+            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}`);
         this.el.classList.add(className);
@@ -273,27 +326,52 @@ class dom_el {
         this.el.classList.remove(className);
         return this;
     }
+    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);
     }
-    onClick(cb) {
-        return this.on('click', cb);
+    removeListeners(event) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        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}`);
@@ -304,6 +382,7 @@ class dom_el {
             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');
@@ -325,27 +404,10 @@ class dom_el {
         }
     }
 }
-function cssVar(name) {
-    const style = window.getComputedStyle(document.body);
-    return style.getPropertyValue(name);
-}
-function isDarkMode() {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches;
-}
-function onDarkMode(cb) {
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (ev)=>{
-        cb(ev.matches);
-    });
-}
-function switchTheme(theme) {
-    document.documentElement.setAttribute('data-theme', theme);
-}
-function gradient(start, end, value) {
-    value = Math.max(0, Math.min(100, value));
-    const red = Math.round(start.red + (end.red - start.red) * value / 100);
-    const green = Math.round(start.green + (end.green - start.green) * value / 100);
-    const blue = Math.round(start.blue + (end.blue - start.blue) * value / 100);
-    return `rgb(${red}, ${green}, ${blue})`;
+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 network_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
@@ -437,47 +499,54 @@ class request {
 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)=>{
-                this.log.debug(`adding listener (${rl}): ${key}`);
-                this.ws.addEventListener(key, 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);
-            setTimeout(()=>{
+            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(data);
+        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 = [];
-        this.event_listeners.message.push((e)=>{
-            const rl = this.recursion_level;
-            this.log.debug(`message(${rl}): ${e.data}`);
-            cb(e.data);
-        });
-        this.ws.addEventListener('message', (e)=>{
+        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');
@@ -486,6 +555,7 @@ class ws {
         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();
@@ -493,11 +563,12 @@ class ws {
     constructor(url, verbose = false){
         network_define_property(this, "url", void 0);
         network_define_property(this, "ws", void 0);
-        network_define_property(this, "backoff", 50);
+        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;
@@ -525,10 +596,31 @@ class refresh {
         this.url = url;
     }
 }
-function get(key) {
-    return localStorage.getItem(key);
+function get(key, _default) {
+    let ret = localStorage.getItem(key);
+    if (!ret && _default) {
+        ret = _default;
+        if ('function' == typeof _default) ret = _default();
+        set(key, ret);
+    }
+    return ret;
+}
+function local_storage_update(key, update1, broadcast = false) {
+    const prev = get(key);
+    const value = update1(prev);
+    if (prev !== value || broadcast) {
+        const event = new CustomEvent('@corvid/ls-update', {
+            detail: {
+                key,
+                value
+            }
+        });
+        document.dispatchEvent(event);
+    }
+    localStorage.setItem(key, value);
 }
 function set(key, value, broadcast = false) {
+    if ('object' == typeof key) return void setObj(key, value, broadcast);
     const prev = get(key);
     if (prev !== value || broadcast) {
         const event = new CustomEvent('@corvid/ls-update', {
@@ -541,6 +633,21 @@ function set(key, value, broadcast = false) {
     }
     localStorage.setItem(key, value);
 }
+function setObj(update, prefix, broadcast = false) {
+    const flatten = (ob)=>{
+        const ret = {};
+        for(let i in ob)if (ob.hasOwnProperty(i)) if ('object' == typeof ob[i] && null !== ob[i]) {
+            const flat = flatten(ob[i]);
+            for(let x in flat)if (flat.hasOwnProperty(x)) ret[`${i}.${x}`] = flat[x];
+        } else ret[i] = ob[i];
+        return ret;
+    };
+    for (let [k, v] of Object.entries(flatten(update))){
+        let key = k;
+        if (prefix) key = `${prefix}.${k}`;
+        set(key, v, broadcast);
+    }
+}
 function listen(key, cb) {
     document.addEventListener('@corvid/ls-update', (ev)=>{
         if (ev.detail.key === key || '*' === key) {
@@ -555,4 +662,7 @@ function listen(key, cb) {
         }
     });
 }
+function clear(key) {
+    localStorage.removeItem(key);
+}
 export { clipboard, dom_namespaceObject as dom, genID, utils_logLevel as logLevel, logger, local_storage_namespaceObject as ls, network_namespaceObject as network, strings_namespaceObject as strings, style_namespaceObject as style };

package/dist/local_storage.d.ts

@@ -1,7 +1,10 @@
 import { el } from './dom';
-export declare function get(key: string): any;
-export declare function set(key: string, value: any, broadcast?: boolean): void;
+export declare function get(key: string, _default?: any): any;
+export declare function update(key: string, update: (current: any) => any, broadcast?: boolean): void;
+export declare function set(key: string | object, value: any, broadcast?: boolean): void;
+export declare function setObj(update: object, prefix?: string, broadcast?: boolean): void;
 export declare function listen(key: string, cb: (update: {
     key: string;
     value: any;
 }) => void | el): void;
+export declare function clear(key: string): void;

package/dist/network.d.ts

@@ -44,12 +44,14 @@ export declare class ws {
     should_reconnect: boolean;
     is_connected: boolean;
     recursion_level: number;
+    reconnect_timer: number | null;
     log: logger;
     event_listeners: Record<string, Array<(data: any) => void>>;
     constructor(url: string, verbose?: boolean);
     setup(): void;
     send(data: any): void;
     onMessage(cb: (data: any) => void): void;
+    onJSON(cb: (data: any) => void): void;
     on(event: string, cb: (data: any) => void): void;
     close(): void;
 }

package/dist/qr.d.ts

@@ -0,0 +1,22 @@
+interface QRCodeConfig {
+    text: string;
+    size?: number;
+    ecLevel?: 'L' | 'M' | 'Q' | 'H';
+    minVersion?: number;
+    maxVersion?: number;
+    quiet?: number;
+    radius?: number;
+    background?: string | null;
+    fill?: string | GradientFill;
+    left?: number;
+    top?: number;
+}
+interface GradientFill {
+    type: 'linear-gradient' | 'radial-gradient';
+    position: number[];
+    colorStops: Array<[number, string]>;
+}
+export default class QrCreator {
+    static render(config: QRCodeConfig, element: HTMLElement | HTMLCanvasElement): void;
+}
+export {};

package/dist/style.d.ts

@@ -2,6 +2,7 @@
  *    Style    *
  **************/
 export declare function cssVar(name: string): string;
+export declare function render(style: Object): string;
 /**
  * Check if the current theme is dark
  */
@@ -16,6 +17,10 @@ export declare function onDarkMode(cb: (isDark: boolean) => void): void;
  * @param theme - 'light' or 'dark'
  */
 export declare function switchTheme(theme: string): void;
+/**
+ * Listen for changes in the dark mode preference
+ */
+export declare function handleThemeSwitch(): void;
 /**
  * Calculate a color gradient
  * @param start - The starting color

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taybart/corvid",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "main": "./dist/index.js",
   "exports": {
@@ -15,7 +15,12 @@
     "dist"
   ],
   "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"
   },