📦 Box.js

A lightweight, chainable JavaScript wrapper for safe and effortless DOM manipulation, event handling, and form validation.

✨ Features

• 🎯 Smart Selector: Pass CSS strings, arrays, or native DOM elements seamlessly.
• 🛑 Leak Protection: Native AbortController handles event unbinding automatically.
• ⚡ Asynchronous Styles: Guarantees frame rendering before moving forward.
• 🔗 Method Chaining: Write clean and readable code in just a few lines.

📥 Installation

You can install the package via npm:

npm install your-username-box

Or link it directly as an ES6 Module in your HTML:

<script type="module">
  import Box from './node_modules/your-username-box/Box.js';
</script>

🚀 Quick Start

import Box from 'your-username-box';

// Find elements and apply styles via chaining
new Box('.card')
    .addClass('active', 'shadow')
    .style({ backgroundColor: '#f5f5f5', color: 'blue' });

// Safe click listener with auto-memory cleanup
const btn = new Box('#action-btn');
btn.on('click', () => {
    console.log('Clicked!');
    btn.off(); // Safely removes listeners
});


📖 Full Documentation
🔍 Search & Filter
Box.query(selector) / Box.queryAll(selector) — Quick static search.
only(predicate) — Filters down matching elements in arrays or children.
🎨 Styles & CSS Variables
getStyle(property) — Fetches active computed style or CSS variable.
style(prop, val) / style(object) — Modifies standard properties or custom CSS variables.
styleAsync(prop, val) — Applies styles asynchronously inside browser frame loops.

📝 Content & DOM
getHtml() / setHtml(string, position) — Replaces or injects HTML (supports append, prepend).
getText() / setText(string) — Edits secure, raw text values.
📋 Classes & Form Attributes
addClass(), removeClass(), toggleClass(), hasClass() — Safe classList mutations.
val(), setVal(value), isValid() — Native HTML5 form field support.
📄 License
This project is open-source and available under the MIT License.