@taybart/corvid 0.1.1 → 0.1.2

package/README.md

@@ -2,5 +2,105 @@
 
 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')
+    })
+})
+```
+
+### 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

@@ -46,6 +46,5 @@ export declare class el {
     /*** Events ***/
     on(event: string, cb: (ev: Event) => void): this;
     listen(event: string, cb: (ev: Event) => void): this;
-    onClick(cb: (ev: Event) => void): this;
 }
 export {};

package/dist/dom.test.d.ts

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

package/dist/index.js

@@ -55,7 +55,8 @@ __webpack_require__.r(local_storage_namespaceObject);
 __webpack_require__.d(local_storage_namespaceObject, {
     get: ()=>get,
     listen: ()=>listen,
-    set: ()=>set
+    set: ()=>set,
+    setObj: ()=>setObj
 });
 function bytesToHuman(bytes, options = {}) {
     const { useSI = false, decimals = 2, includeUnits = true, targetUnit = null } = options;
@@ -221,6 +222,8 @@ class dom_el {
             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 '';
     }
@@ -281,9 +284,6 @@ class dom_el {
     listen(event, cb) {
         return this.on(event, cb);
     }
-    onClick(cb) {
-        return this.on('click', cb);
-    }
     constructor(opts, verbose = false){
         dom_define_property(this, "el", void 0);
         dom_define_property(this, "query", '');
@@ -304,6 +304,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');
@@ -529,6 +530,7 @@ function get(key) {
     return localStorage.getItem(key);
 }
 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 +543,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) {

package/dist/local_storage.d.ts

@@ -1,6 +1,7 @@
 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 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taybart/corvid",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "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"
   },