Skip to main content

Provides a function that watches the document for a given selector, and executes a passed function on each instance of that selector. Alternative to selector-observer, simple JS framework, or web components. Also provides a few helper functions.

Works with
It is unknown whether this package works with Bun
This package works with Deno
This package works with Browsers
JSR Score
100%
Published
2 weeks ago (0.1.8)

watch

Watch is a bare-bones web component alternative. It runs a function, and adds event listeners to elements that match a given selector. That's basically it.

Since each match of a given selector is given it's own state, it enables light-weight components for small bits of interactivity. A common use-case in server-driven websites, think Astro, e-commerce templates, blogs, htmx sites, etc...

The module also has few helpers that I find to be the bare essentials when creating any website, if you don't use them they should be tree-shaken by your bundler.

Example

import { watch } from 'https://esm.sh/watch-selector?exports=watch'

watch('.say-hello', ({on, state}) => {
  state.count = 0

  on('click', () => {
    alert(`Hello World${'!'.repeat(++state.count)}`)
  })
})

watch('.turn-blue', ({on, style}) => {

  on('click', () => {
    style({
      color: 'blue'
    }).apply()
  })

})

v2 may add lazy hydration instead of eagerly adding listeners whenever there is a change.

Examples

Using watch

import { watch } from "jsr:@doeixd/watch";

watch('.say-hello', ({on, state}) => {
  state.count = 0

  on('click', () => {
    alert(`Hello World${'!'.repeat(++state.count)}`)
   })
})

Add Package

deno add @doeixd/watch

Import symbol

import * as mod from "@doeixd/watch";

Add Package

bunx jsr add @doeixd/watch

Import symbol

import * as mod from "@doeixd/watch";