Corvid

Usage

Non-exhastive list of features

DOM

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

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

import { network } '@taybart/corvid'

// create an api client
const api = network.create({
  url: 'https://api.example.com',
  credentials: 'include',
  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'})
})

// make a request
const { username } = await api.do({
    path: '/users/1',
    override: {
        params: network.params.render({hello: 'world!'}) , // only for this request
    },
})

Styles

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')`)
})

Just handle switching automatically

<script type='module'>
    import { handleThemeSwitch } from '@taybart/corvid/style'
    handleThemeSwitch()
</script>

QR

import { dom } from '@taybart/corvid'
import { QR } '@taybart/corvid/qr'

const el = new dom.el('#qr')
QR.render({
    text: 'https://example.com',
    size: 200,
}, el) // can also be regular element query -> document.getElementById('qr')