SpringType: st-query

DOM manipluation API that feels like jQuery

Purpose

This is a tiny library to augment the SpringType v3 JSX/TSX microframework with a jQuery-like API for programmatic runtime DOM manipulation.

Features

• ✅ Supports JSX/TSX for runtime DOM mutations
• ✅ Ultra-fast: Uses SpringType ref instead of DOM CSS selector queries
• ✅ Supports the most important jQuery methods
• ✅ Tiny: 431 bytes (best, brotli) - 605 bytes (worst, umd, gz)
• ✅ Zero dependencies
• ✅ First class TypeScript support
• ✅ Unit Test coverage almost 100%
• ✅ TestCafé smoke tests

API docs

This is how using st-query looks like:

import { tsx, render, Ref } from "springtype";
import { $ } from "st-query";

interface SomeCustomInputProps {
  name: string;
}

const SomeCustomInput = ({ name }: SomeCustomInputProps) => {

  const inputRef: Ref = {};
  
  const onBlur = () => {
    $(inputRef.current).val(Math.random());
    console.log('Value after blur:', $(inputRef.current).val());
  }
  return <input ref={inputRef} name={name} onBlur={onBlur} />
}
render(<SomeCustomInput name="firstname" />);

DOM manipulation

Method	Examples
attr	Get an attribute of a checkbox: $(formInputRef).attr('tabIndex')
attr	Set an attribute of an input element: $(formInputRef).attr('tabIndex', '2')
val	Get a value of a checkbox: $(formInputRef).val()
val	Set the value of an input element: $(formInputRef).val(2)
html	Render VDOM and replace the DOM children of an element: $(formInputRef).html(<div>Something else</div>)
replaceWith	Render DOM and replace the DOM element itself with it: $(formInputRef).replaceWith(<div>Something else</div>)
empty	Remove all children of an element: $(formInputRef).empty()
remove	Remove the element itself from it's DOM parent node: $(formInputRef).remove()

DOM events

Method	Examples
on	Add a DOM event listener programmatically: $(formInputRef).on('click', (evt: MouseEvent) => { console.log('clicked on', evt.target) })
off	Remove a DOM event listener programmatically: $(window).on('resize', (evt: ResizeEvent) => { console.log('browser resized!', window.innerWidth) })

CSS

Method	Examples
addClass	Add one CSS class: $(formInputRef).addClass('outlined')
addClass	Add many CSS classes: $(formInputRef).addClass(['button', 'mobile'])
removeClass	Remove one CSS class: $(formInputRef).removeClass('outlined')
removeClass	Remove many CSS classes: $(formInputRef).removeClass(['button', 'mobile'])
toggleClass	Toggles a CSS class: $(formInputRef).toggleClass('button')
hasClass	Returns true if the CSS class can be found on the element: $(formInputRef).hasClass('button')

Backers

Thank you so much for supporting us financially! 🙏🏻😎🥳👍

Tom

Maintainers

st-query is brought to you by:

Aron Homberg

Contributing

Please help out to make this project even better and see your name added to the list of our CONTRIBUTORS.md 🎉