fear the crow
\n\n\n\n\n## Usage\n\nNon-exhastive list of features\n\n### DOM\n\n```js\nimport { dom } from '@taybart/corvid'\n\ndom.ready(() => {\n // query for existing element\n const username = new dom.el('#username')\n // listen for events\n username.on('click', () => {\n // set style, will kebab keys backgroundColor -> background-color\n username.style({ color: 'red', backgroundColor: 'yellow' })\n // set/get content\n username.content(`evil: ${username.value()}`)\n }))\n\n\n // create new elements\n dom.create({\n tag: 'div',\n id: 'hair-color',\n class: 'hair user-info',\n content: 'blue',\n // will append element to username\n parent: username,\n })\n\n // listen for keys and check for modifiers\n dom.onKey('E', ({ ctrl, alt, meta, shift }) => {\n console.log('E pressed')\n })\n})\n\nclass Card extends dom.component {\n static tag = 'x-card'\n static observedAttributes = ['name']\n // will be applied to all instances of this class in adopted stylesheet\n static styles = {\n display: 'flex',\n flexDirection: 'column',\n }\n // component should use a shadow dom, styles will be applied to shadow root if this is set\n static shadow = {open: 'true'}\n mount() {\n }\n // called for change to an attribute named in `static observedAttributes`\n onAttr(name, value, prev) {\n }\n}\nCard.register() // register the component\n```\n\n### LocalStorage\n\n```js\nimport { ls, dom } from '@taybart/corvid'\n\ndom.ready(() => {\n const hpStat = new dom.el({ query: '#stat-hp', content: ls.get('stats.hp') })\n // set element content when localstorage changes\n ls.listen('stats.hp', hpStat)\n // or just a callback\n ls.listen('stats.hp', ({ key, value }) => {\n console.log(`health is now ${value}`)\n })\n // set a value (required if listening for events)\n ls.set('stats.hp', ls.get('stats.hp') - 1))\n // set a flattened object, will update \"stats.hp\" and \"stats.attack\"\n ls.set({ stats: { hp: 100, attack: 10 } })\n})\n```\n\n### Network\n\n```js\nimport { network } '@taybart/corvid'\n\n// create an api client\nconst api = network.create({\n url: 'https://api.example.com',\n credentials: 'include',\n success: 250, // check for non-200 success code\n // corvid params, string, or custom object that has .toString() and renders url safe params\n params: new network.params({hello: 'corvid'})\n})\n\n// make a request\nconst { username } = await api.do({\n path: '/users/1',\n override: {\n params: network.params.render({hello: 'world!'}) , // only for this request\n },\n})\n\n\n```\n\n### Styles\n\n```js\nimport { style } '@taybart/corvid'\n\n// query css media prefers-color-scheme\nif (style.isDarkMode()) {\n console.log('dark mode')\n}\n// listen for theme switch\nstyle.onDarkMode((isDark) => {\n // set document attribute 'data-theme'\n style.switchTheme(isDark ? 'light' : 'dark')\n // get css variables\n console.log(`is dark mode: ${isDark} and background is ${style.cssVar('--color-bg')`)\n})\n\n```\n\nJust handle switching automatically\n\n```html\n\n```\n\n### QR\n\n```js\nimport { dom } from '@taybart/corvid'\nimport { QR } '@taybart/corvid/qr'\n\nconst el = new dom.el('#qr')\nQR.render({\n text: 'https://example.com',\n size: 200,\n}, el) // can also be regular element query -> document.getElementById('qr')\n```\n","readmeFilename":""}