sr-js

v1.0.8

Published

6 months ago

SR JS: Pure JavaScript (JS) library for DOM manipulation, events, and animations

0High
0Medium
0Low

seoromin

sr srjs seoromin pure js fast small modern javascript library

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

Installation

Include the minified script in your HTML file before your custom scripts.

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>My App</title>
</head>
<body>
     <h1>Hello World</h1>

     <!-- Include SR JS -->
     <script src="sr.min.js"></script>

     <!-- Your Code -->
     <script>
          // Wait for DOM Ready
          $(function() {
                $('h1').text('SR JS is working!');
          });
     </script>
</body>
</html>

Add to your project:

<script src="sr.min.js"></script>

Or use a CDN:

jsDelivr is a great open-source service that lets you use projects without ever downloading the code.

<script src="https://cdn.jsdelivr.net/npm/sr-js@latest"></script>

Or get it:

Download SR 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

$.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

$('#container').on('click.myPlugin', '.btn', function() {
     console.log('Button inside container clicked');
});

Toggle class

$('div').toggleClass('active');

Create element

const $card = $.t('<div>', {
     class: 'card',
     html: '<h1>Title</h1>',
     css: { border: '1px solid black' },
     data: { id: 101 }
});

... Refer to the docs folder 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()).

$.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.

$.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) under the MIT license.