@taybart/corvid 0.1.16 → 0.1.18

package/README.md

@@ -1,8 +1,11 @@
 # Corvid
 
-fear the crow
+<p align="center"><img src="https://github.com/user-attachments/assets/b3bbf267-d7b0-4116-80a5-b932b409a111" width="100" height="100"></p>
 
-![crowtein](https://github.com/user-attachments/assets/b3bbf267-d7b0-4116-80a5-b932b409a111)
+<p align="center">fear the crow</p>
+
+
+<!-- ![crowtein](https://github.com/user-attachments/assets/b3bbf267-d7b0-4116-80a5-b932b409a111) -->
 
 ## Usage
 
@@ -83,7 +86,7 @@ import { network } '@taybart/corvid'
 const api = network.create({
   url: 'https://api.example.com',
   credentials: 'include',
-  success: 250, // odd success code
+  success: 250, // check for non-200 success code
   // corvid params, string, or custom object that has .toString() and renders url safe params
   params: new network.params({hello: 'corvid'})
 })
@@ -115,15 +118,27 @@ style.onDarkMode((isDark) => {
     // get css variables
     console.log(`is dark mode: ${isDark} and background is ${style.cssVar('--color-bg')`)
 })
+
+```
+
+Just handle switching automatically
+
+```html
+<script type='module'>
+    import { handleThemeSwitch } from '@taybart/corvid/style'
+    handleThemeSwitch()
+</script>
 ```
 
 ### QR
 
 ```js
+import { dom } from '@taybart/corvid'
 import { QR } '@taybart/corvid/qr'
 
+const el = new dom.el('#qr')
 QR.render({
     text: 'https://example.com',
     size: 200,
-}, document.getElementById('qr'))
+}, el) // can also be regular element query -> document.getElementById('qr')
 ```

package/dist/dom.d.ts

@@ -25,6 +25,7 @@ type elOpts = {
     style?: Object;
     id?: string;
     parent?: HTMLElement | el;
+    attrs?: Object;
 };
 export declare class el {
     el: HTMLElement | null;

package/dist/dom.js

@@ -233,7 +233,7 @@ class dom_el {
             this.el = opts;
             return;
         }
-        const { query, element, type, class: styleClass, style, id, content, parent } = opts;
+        const { query, element, type, class: styleClass, style, id, content, parent, attrs } = opts;
         if (query) {
             this.log.debug(`using query: ${query}`);
             this.query = query;
@@ -264,6 +264,10 @@ class dom_el {
                 parent.appendChild(this.el);
             }
         }
+        if (attrs) for (const [key, val] of Object.entries(attrs)){
+            this.log.debug(`setting prop: ${key} to ${val}`);
+            this.el.setAttribute(key, val);
+        }
     }
 }
 function interpolate(str, params) {

package/dist/index.js

@@ -62,9 +62,11 @@ __webpack_require__.r(local_storage_namespaceObject);
 __webpack_require__.d(local_storage_namespaceObject, {
     clear: ()=>clear,
     get: ()=>get,
+    getJSON: ()=>getJSON,
     listen: ()=>listen,
     set: ()=>set,
     setObj: ()=>setObj,
+    unlisten: ()=>unlisten,
     update: ()=>local_storage_update
 });
 function bytesToHuman(bytes, options = {}) {
@@ -411,7 +413,7 @@ class dom_el {
             this.el = opts;
             return;
         }
-        const { query, element, type, class: styleClass, style, id, content, parent } = opts;
+        const { query, element, type, class: styleClass, style, id, content, parent, attrs } = opts;
         if (query) {
             this.log.debug(`using query: ${query}`);
             this.query = query;
@@ -442,6 +444,10 @@ class dom_el {
                 parent.appendChild(this.el);
             }
         }
+        if (attrs) for (const [key, val] of Object.entries(attrs)){
+            this.log.debug(`setting prop: ${key} to ${val}`);
+            this.el.setAttribute(key, val);
+        }
     }
 }
 function interpolate(str, params) {
@@ -543,10 +549,15 @@ class request {
         const res = await fetch(url, options);
         const expect = override.expect || this.opts.expect;
         if (res.status !== expect) {
-            const body = await res.json();
-            throw new Error(`bad response ${res.status} !== ${expect}, body: ${body}`);
+            const body = await res.text();
+            if (401 === res.status && this.opts.onUnauthorized) {
+                this.log.warn("unauthorized");
+                this.opts.onUnauthorized(body);
+            } else throw new Error(`bad response ${res.status} !== ${expect}, body: ${body}`);
         }
-        return await res.json();
+        this.log.debug(`content type: ${res.headers.get('content-type')}`);
+        if ('application/json' === res.headers.get('content-type')) return await res.json();
+        return await res.text();
     }
     constructor(opts = {}, verbose = false){
         network_define_property(this, "opts", void 0);
@@ -563,6 +574,7 @@ class request {
             this.log.debug("converting object params to class");
             this.opts.params = new network_params(this.opts.params);
         }
+        if (!this.opts.fetch) this.opts.fetch = window.fetch;
         this.log.debug(`with options: ${JSON.stringify(this.opts)}`);
     }
 }
@@ -576,12 +588,12 @@ class ws {
         this.backoff = 100;
         this.ws.addEventListener('open', ()=>{
             const rl = this.recursion_level;
-            this.log.debug(`on open: reconnected (${rl})`);
+            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.log.debug(`adding listener(${rl}): ${key} `);
                     this.ws.addEventListener(key, cb);
                 }
             });
@@ -590,7 +602,7 @@ class ws {
             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.log.debug(`backoff: ${this.backoff} `);
             this.reconnect_timer = window.setTimeout(()=>{
                 if (this.should_reconnect) {
                     this.ws = null;
@@ -609,7 +621,7 @@ class ws {
         if (!this.event_listeners.message) this.event_listeners.message = [];
         const handler = (e)=>{
             const rl = this.recursion_level;
-            this.log.debug(`message(${rl}): ${e.data}`);
+            this.log.debug(`message(${rl}): ${e.data} `);
             cb(e.data);
         };
         this.event_listeners.message.push(handler);
@@ -681,6 +693,11 @@ function get(key, _default) {
     }
     return ret;
 }
+function getJSON(key, _default) {
+    const val = get(key, _default);
+    if (null === val) return null;
+    return JSON.parse(val);
+}
 function local_storage_update(key, update1, broadcast = false) {
     const prev = get(key);
     const value = update1(prev);
@@ -706,6 +723,7 @@ function set(key, value, broadcast = false) {
         });
         document.dispatchEvent(event);
     }
+    if ('object' == typeof value) value = JSON.stringify(value);
     localStorage.setItem(key, value);
 }
 function setObj(update, prefix, broadcast = false) {
@@ -723,8 +741,9 @@ function setObj(update, prefix, broadcast = false) {
         set(key, v, broadcast);
     }
 }
+const listeners = new Map();
 function listen(key, cb) {
-    document.addEventListener('@corvid/ls-update', (ev)=>{
+    const listener = (ev)=>{
         if (ev.detail.key === key || '*' === key) {
             if (cb instanceof dom_el) {
                 if (ev.detail.key === key) cb.content(ev.detail.value);
@@ -735,7 +754,19 @@ function listen(key, cb) {
                 value: ev.detail.value
             });
         }
-    });
+    };
+    if (!listeners.has(key)) listeners.set(key, new Map());
+    listeners.get(key).set(cb, listener);
+    document.addEventListener('@corvid/ls-update', listener);
+}
+function unlisten(key, cb) {
+    const keyListeners = listeners.get(key);
+    if (!keyListeners) return;
+    const listener = keyListeners.get(cb);
+    if (!listener) return;
+    document.removeEventListener('@corvid/ls-update', listener);
+    keyListeners.delete(cb);
+    if (0 === keyListeners.size) listeners.delete(key);
 }
 function clear(key) {
     localStorage.removeItem(key);

package/dist/local_storage.d.ts

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

package/dist/ls.js

@@ -204,7 +204,7 @@ class dom_el {
             this.el = opts;
             return;
         }
-        const { query, element, type, class: styleClass, style, id, content, parent } = opts;
+        const { query, element, type, class: styleClass, style, id, content, parent, attrs } = opts;
         if (query) {
             this.log.debug(`using query: ${query}`);
             this.query = query;
@@ -235,6 +235,10 @@ class dom_el {
                 parent.appendChild(this.el);
             }
         }
+        if (attrs) for (const [key, val] of Object.entries(attrs)){
+            this.log.debug(`setting prop: ${key} to ${val}`);
+            this.el.setAttribute(key, val);
+        }
     }
 }
 function interpolate(str, params) {
@@ -251,6 +255,11 @@ function get(key, _default) {
     }
     return ret;
 }
+function getJSON(key, _default) {
+    const val = get(key, _default);
+    if (null === val) return null;
+    return JSON.parse(val);
+}
 function local_storage_update(key, update1, broadcast = false) {
     const prev = get(key);
     const value = update1(prev);
@@ -276,6 +285,7 @@ function set(key, value, broadcast = false) {
         });
         document.dispatchEvent(event);
     }
+    if ('object' == typeof value) value = JSON.stringify(value);
     localStorage.setItem(key, value);
 }
 function setObj(update, prefix, broadcast = false) {
@@ -293,8 +303,9 @@ function setObj(update, prefix, broadcast = false) {
         set(key, v, broadcast);
     }
 }
+const listeners = new Map();
 function listen(key, cb) {
-    document.addEventListener('@corvid/ls-update', (ev)=>{
+    const listener = (ev)=>{
         if (ev.detail.key === key || '*' === key) {
             if (cb instanceof dom_el) {
                 if (ev.detail.key === key) cb.content(ev.detail.value);
@@ -305,9 +316,21 @@ function listen(key, cb) {
                 value: ev.detail.value
             });
         }
-    });
+    };
+    if (!listeners.has(key)) listeners.set(key, new Map());
+    listeners.get(key).set(cb, listener);
+    document.addEventListener('@corvid/ls-update', listener);
+}
+function unlisten(key, cb) {
+    const keyListeners = listeners.get(key);
+    if (!keyListeners) return;
+    const listener = keyListeners.get(cb);
+    if (!listener) return;
+    document.removeEventListener('@corvid/ls-update', listener);
+    keyListeners.delete(cb);
+    if (0 === keyListeners.size) listeners.delete(key);
 }
 function clear(key) {
     localStorage.removeItem(key);
 }
-export { clear, get, listen, set, setObj, local_storage_update as update };
+export { clear, get, getJSON, listen, set, setObj, unlisten, local_storage_update as update };

package/dist/network.d.ts

@@ -22,6 +22,8 @@ export type requestOpts = {
     expect?: number;
     credentials?: RequestCredentials;
     insecureNoVerify?: boolean;
+    onUnauthorized?: (body: any) => void;
+    fetch?: (url: string, init: RequestInit) => Promise<any>;
 };
 export declare class request {
     opts: requestOpts;

package/dist/network.js

@@ -140,10 +140,15 @@ class request {
         const res = await fetch(url, options);
         const expect = override.expect || this.opts.expect;
         if (res.status !== expect) {
-            const body = await res.json();
-            throw new Error(`bad response ${res.status} !== ${expect}, body: ${body}`);
+            const body = await res.text();
+            if (401 === res.status && this.opts.onUnauthorized) {
+                this.log.warn("unauthorized");
+                this.opts.onUnauthorized(body);
+            } else throw new Error(`bad response ${res.status} !== ${expect}, body: ${body}`);
         }
-        return await res.json();
+        this.log.debug(`content type: ${res.headers.get('content-type')}`);
+        if ('application/json' === res.headers.get('content-type')) return await res.json();
+        return await res.text();
     }
     constructor(opts = {}, verbose = false){
         network_define_property(this, "opts", void 0);
@@ -160,6 +165,7 @@ class request {
             this.log.debug("converting object params to class");
             this.opts.params = new network_params(this.opts.params);
         }
+        if (!this.opts.fetch) this.opts.fetch = window.fetch;
         this.log.debug(`with options: ${JSON.stringify(this.opts)}`);
     }
 }
@@ -173,12 +179,12 @@ class ws {
         this.backoff = 100;
         this.ws.addEventListener('open', ()=>{
             const rl = this.recursion_level;
-            this.log.debug(`on open: reconnected (${rl})`);
+            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.log.debug(`adding listener(${rl}): ${key} `);
                     this.ws.addEventListener(key, cb);
                 }
             });
@@ -187,7 +193,7 @@ class ws {
             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.log.debug(`backoff: ${this.backoff} `);
             this.reconnect_timer = window.setTimeout(()=>{
                 if (this.should_reconnect) {
                     this.ws = null;
@@ -206,7 +212,7 @@ class ws {
         if (!this.event_listeners.message) this.event_listeners.message = [];
         const handler = (e)=>{
             const rl = this.recursion_level;
-            this.log.debug(`message(${rl}): ${e.data}`);
+            this.log.debug(`message(${rl}): ${e.data} `);
             cb(e.data);
         };
         this.event_listeners.message.push(handler);

package/dist/qr.js

@@ -2110,7 +2110,7 @@ class dom_el {
             this.el = opts;
             return;
         }
-        const { query, element, type, class: styleClass, style, id, content, parent } = opts;
+        const { query, element, type, class: styleClass, style, id, content, parent, attrs } = opts;
         if (query) {
             this.log.debug(`using query: ${query}`);
             this.query = query;
@@ -2141,6 +2141,10 @@ class dom_el {
                 parent.appendChild(this.el);
             }
         }
+        if (attrs) for (const [key, val] of Object.entries(attrs)){
+            this.log.debug(`setting prop: ${key} to ${val}`);
+            this.el.setAttribute(key, val);
+        }
     }
 }
 function interpolate(str, params) {

package/dist/style.js

@@ -0,0 +1,37 @@
+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})`;
+}
+export { cssVar, gradient, handleThemeSwitch, isDarkMode, onDarkMode, render, switchTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taybart/corvid",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "type": "module",
   "main": "./dist/index.js",
   "exports": {
@@ -12,6 +12,10 @@
       "types": "./dist/dom.d.ts",
       "import": "./dist/dom.js"
     },
+    "./style": {
+      "types": "./dist/style.d.ts",
+      "import": "./dist/style.js"
+    },
     "./local_storage": {
       "types": "./dist/ls.d.ts",
       "import": "./dist/ls.js"
@@ -30,6 +34,10 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch"
+  },
   "devDependencies": {
     "@happy-dom/global-registrator": "^17.4.7",
     "@rslib/core": "^0.6.2",
@@ -39,9 +47,5 @@
     "@types/jsdom": "^21.1.7",
     "@types/node": "^22.8.1",
     "typescript": "^5.8.3"
-  },
-  "scripts": {
-    "build": "rslib build",
-    "dev": "rslib build --watch"
   }
-}
+}