DOM manipluation API that feels like jQuery

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

• ✅ 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

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" />);

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 | Get the innerHTML of an element: $(formInputRef).html() 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()

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

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

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

st-query is brought to you by:

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