svenMinio 1fa6d558c7 Upload files to "/"

2026-05-17 12:39:25 +02:00

7.1 KiB

Raw Blame History

jBase

A modern, lightweight, and modular JavaScript framework for high-performance DOM manipulation, event handling, and data management.

jBase offers a familiar chainable API (similar to jQuery) but is built on modern ES6+ standards. It goes beyond UI logic by including a robust set of immutable data utilities and full Server-Side Rendering (SSR) support.

📥 Installation

via NPM / Yarn

Ideal for modern web apps using bundlers (Vite, Webpack) or Node.js.

npm install @k37z3r/jbase
# or
yarn add @k37z3r/jbase

via Script Tag

Download the jbase.min.js file, upload it to your server, and include it in your HTML.

<script src="dist/jbase.min.js"></script>

-- OR --

via CDN

<!-- CDN: jsDelivr @latest Version -->
<script src="https://cdn.jsdelivr.net/npm/@k37z3r/jbase/dist/jbase.min.js"></script>

<!-- CDN: Statically @latest version -->
<script src="https://cdn.statically.io/npm/@k37z3r/jbase/dist/jbase.min.js"></script>

<!-- CDN: jsDelivr @2.2.0 Version -->
<script src="https://cdn.jsdelivr.net/gh/k37z3r/jBase-2@2.2.0/dist/jbase.min.js"></script>

<!-- CDN: Statically @2.2.0 Version -->
<script src="https://cdn.statically.io/gh/k37z3r/jBase-2@2.2.0/dist/jbase.min.js"></script>

<!-- Use one of the examples above. You can find further examples in the jsDelivr or Statically documentation -->

🖥️ Server-Side Rendering (SSR) & Node.js

jBase is isomorphic. You can use the exact same code on the client and the server. To use DOM manipulation in Node.js, simply bind jBase to a jsdom window instance.

1. Install JSDOM (Optional Peer Dependency)

npm install jsdom

2. Bind to a Virtual Window

Use the bind factory to create a jBase instance scoped to a specific request or document.

import { JSDOM } from 'jsdom';
import { bind } from '@k37z3r/jbase'; // Adjust to your package name

// 1. Create a virtual DOM environment
const dom = new JSDOM('<!DOCTYPE html><div id="app"></div>');
const window = dom.window;

// 2. Create a scoped instance of jBase
const $ = bind(window);

// 3. Manipulate the DOM exactly like in the browser
$('#app')
    .addClass('ssr-rendered')
    .html('<h1>Hello from Node.js!</h1>')
    .append('<p>This HTML was generated on the server.</p>');

// 4. Output the final HTML string
console.log(dom.serialize());

Note

Browser-only features like animations (fadeIn, slideUp) or Event Bindings (click) are safely ignored in Node.js environments to prevent crashes and save resources.

🚀 Client-Side Features

jBase exposes itself globally as jBase and the shorthand $.

1. DOM & Effects

$(document).ready(() => {
    // Event Handling
    $('button.save').on('click', (e) => {
        e.preventDefault();
        
        // Chained manipulation & Animation
        $('.notification')
            .addClass('success')
            .text('Saved successfully!')
            .fadeIn(300);
    });
});

2. Powerful Data Utilities

jBase includes a unique $.data module for immutable array and object manipulation. Optimized for high performance.

const users = [
    { id: 1, name: 'Alice', role: 'admin' },
    { id: 2, name: 'Bob', role: 'user' }
];

// Find specific data efficiently (Optimized Search)
const admin = $.data.find.first(users, 'admin', 'exact', 'role');

// Remove data immutably (returns a new array)
const nonAdmins = $.data.remove.byMatch(users, 'admin', 'exact', 'role');

3. HTTP Requests

Simple, robust AJAX wrappers that handle JSON automatically.

$.http.get('https://api.example.com/items')
    .then(data => console.log('Items loaded:', data))
    .catch(err => console.error('Error:', err));

📚 Documentation

Detailed documentation for all methods is available in the GitHub Wiki or offline Documentation.

📄 License

jBase is open-source software licensed under the GPL-3.0-or-later.

Author: Sven Minio

Website: sven-minio.de

7.1 KiB Raw Blame History