# SeoRomin JS Library (SR JS)
A pure JavaScript library for DOM manipulation, events, and animations. It provides a familiar chaining syntax while utilizing modern browser APIs for maximum performance.
[Docs](https://seoromin-dev.github.io/SR-JS/)
## Installation
Include the minified script in your HTML file before your custom scripts.
```html
My App
Hello World
```
### Add to your project:
```html
```
### Or use a CDN:
jsDelivr is a great open-source service that lets you use projects without ever downloading the code.
```html
```
### Or get it:
[Download SR JS](https://raw.githubusercontent.com/SeoRomin-Dev/SR-JS/refs/heads/main/dist/sr.min.js)
### Or install with `npm`:
NPM is a front-end package manager that simplifies adding new packages.
```
npm i sr-js
```
## Some examples
### Basic GET Request
```javascript
$.ajax({
url: '/api/users',
method: 'GET',
dataType: 'json',
data: { page: 1, limit: 10 }
})
.then(response => {
console.log('Success:', response);
})
.catch(error => {
console.error('Request failed:', error);
})
.finally(() => {
console.log('Cleanup actions');
});
```
### Delegated binding with namespaces
```javascript
$('#container').on('click.myPlugin', '.btn', function() {
console.log('Button inside container clicked');
});
```
### Toggle class
```javascript
$('div').toggleClass('active');
```
### Create element
```javascript
const $card = $.t('', {
class: 'card',
html: '
Title
',
css: { border: '1px solid black' },
data: { id: 101 }
});
```
... Refer to the [docs folder](https://github.com/SeoRomin-Dev/SR-JS/blob/main/docs) for more details.
## Extending SR JS
You can easily extend the library with custom plugins or static methods.
### 1. Add an Instance Plugin
Use `$.plugin` to add methods available on SR objects (like `$('div').myMethod()`).
```javascript
$.plugin('color', function(color) {
this.css('color', color);
return this; // Enable chaining
});
// Usage
$('p').color('red');
```
### 2. Add a Static Method
Use `$.method` to add utility functions directly to the `$` object.
```javascript
$.method('sum', function(a, b) {
return a + b;
});
// Usage
console.log($.sum(10, 20)); // 30
```
## When to use
- You need a stable and predictable library.
- You repeatedly write the same boilerplate code.
- You need to increase your development speed.
- You don’t want to constantly rewrite your own helper functions.
- You need the ability to extend the library with plugins or custom methods.
- You need fast, optimized, and modern code.
- You want to reduce the final bundle size (depending on the project).
- You want a consistent API that keeps your codebase clean and easy to maintain.
- You need a solution that behaves consistently across all modern browsers.
- You want a library that helps prevent common bugs by providing well-tested utilities.
- You want something lightweight but powerful enough to cover most daily tasks.
## Browser Support
This library relies on modern JavaScript features including `Proxy`, `WeakMap`, and `structuredClone`. Below is the minimum browser support matrix.
| Browser | Version | Release Date |
| :--- | :--- | :--- |
| **Google Chrome** | 98+ | Feb 2022 |
| **Mozilla Firefox** | 94+ | Nov 2021 |
| **Apple Safari** | 15.4+ | Mar 2022 |
| **Microsoft Edge** | 98+ | Feb 2022 |
## Author and License
Created and maintained by Roman Orlovskiy ([SeoRomin](https://github.com/SeoRomin-Dev)) under the MIT license.