Skip to main content

Functional and tiny (<1kb) functions to query and handle the dom in a safe, easy and TypeScript friendly.

This package works with Browsers
JSR Score
82%
Published
3 weeks ago (0.0.12)

@vyke/dom

Functional and tiny (<1kb) functions to query and handle the dom in a safe and easy way and TypeScript friendly.

Installation

# @vyke/results is a peer dependency
npm i @vyke/dom @vyke/results

Examples

import { r } from '@vyke/results/r'
import { query, select } from '@vyke/dom'

const [app] = r.unwrap(select(
	query<HTMLDivElement>('#app'),
))

console.log(app)
//           ^? HTMLDivElement

Querying inside an specific element

import { r } from '@vyke/results/r'
import { query, selectIn } from '@vyke/dom'

const [submitBtn] = r.unwrap(selectIn(
	form,
	query<HTMLButtonElement>('#submit'),
))

console.log(submitBtn)
//             ^? HTMLButtonElement

API

selectIn

select all the given queries within the given element

import { query, selectIn } from '@vyke/dom'
import { unwrap } from '@vyke/results'

const [myDiv, listItems] = unwrap(selectIn(
	document.body, // <- the container
	query<HTMLDivElement>('#my-div'), // type given as generic
	queryAll<HTMLLIElement>('.list-item'), // type given as the class
	// ^ this query will check `element instanceof HTMLLIElement
))
Note

If any of the given queries return null the whole expression is considered a as failure, returning an Err

select

Shortcut to selectIn using document as the container

import { query, select, selectIn } from '@vyke/dom'
import { unwrap } from '@vyke/results'

const [myDiv, listItems] = unwrap(selectIn(
	document, // <- the container
	query<HTMLDivElement>('#my-div'), // type given as generic
	queryAll<HTMLLIElement>('.list-item'), // type given as the class
	// ^ this query will check `element instanceof HTMLLIElement
))
// both ways are equivalent
const [myDiv, listItems] = unwrap(select(
	query<HTMLDivElement>('#my-div'), // type given as generic
	queryAll<HTMLLIElement>('.list-item'), // type given as the class
	// ^ this query will check `element instanceof HTMLLIElement
))

query

Creates a query to be used inside of select or selectIn, and return only one element

import { query, select } from '@vyke/dom'
import { unwrap } from '@vyke/results'

unwrap(select(
	query<HTMLDivElement>('#my-div'), // type given as generic
	query('.list-item', HTMLLIElement), // type given as the class
	// ^ this query will check `element instanceof HTMLLIElement
))

queryAll

Similar to query but return an array of elements

import { query, select } from '@vyke/dom'
import { unwrap } from '@vyke/results'
const [listItems] = unwrap(select(
//         ^? Array<HTMLLIElement>
	queryAll<HTMLLIElement>('.list-item'),
))

removeClass

Helper functions for managing classes from an element.

enable

Enable an element

disable

Disable an element

on

Add an event listener to a target

const button = document.createElement('button')
on(button, 'click', () => console.log('clicked'))

off

Remove an event listener from a target

const button = document.createElement('button')
const handler = () => console.log('clicked')
on(button, 'click', handler)
off(button, 'click', handler)

Others vyke projects