https://github.com/springtype-org/st-query
~500 byte nano DOM manipulation library that feels like jQuery
https://github.com/springtype-org/st-query
Last synced: about 1 year ago
JSON representation
~500 byte nano DOM manipulation library that feels like jQuery
- Host: GitHub
- URL: https://github.com/springtype-org/st-query
- Owner: springtype-org
- License: mit
- Created: 2021-01-31T22:57:34.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-02-04T01:02:26.000Z (about 5 years ago)
- Last Synced: 2025-02-05T07:17:56.081Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 241 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
SpringType: st-query
> DOM manipluation API that feels like jQuery
[](https://gitter.im/springtype-official/springtype?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
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:
```tsx
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
}
render();
```
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(
Something else)`
`replaceWith` | Render DOM and replace the DOM element *itself* with it: `$(formInputRef).replaceWith(Something else)`
`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! 🙏🏻😎🥳👍
Maintainers
`st-query` is brought to you by:
Contributing
Please help out to make this project even better and see your name added to the list of our
[CONTRIBUTORS.md](./CONTRIBUTORS.md) :tada:
