@wmdigi/dom

A lightweight DOM manipulation and state management library with jQuery-like syntax.

Installation

npm install @wmdigi/dom
yarn add @wmdigi/dom
bun add @wmdigi/dom

Usage

import { $ } from "@wmdigi/dom";

// DOM Manipulation
$(".button").addClass("active");
$("#main").hide();
$('input[type="text"]').val("Hello");

// Store Management
$.store.user = { name: "John", age: 30 };
$.store.user.name = "Jane"; // Updates only name

// Subscribe to changes
$.store.user.subscribe((user) => {
	console.log("User updated:", user);
});

$.store.user.name.subscribe((name) => {
	console.log("Name changed to:", name);
});

// Local Storage Store
$.local.theme = "dark"; // Automatically persists to localStorage
console.log($.local.theme); // Reads from localStorage

// Chaining
$(".card").addClass("highlight").attr("data-active", "true").show();

// Event handling
$(".submit-button").on("click", (e) => {
	console.log("Button clicked at:", e.clientX, e.clientY);
});

// DOM Ready
$.ready(() => {
	console.log("DOM is ready");
});

// Creating elements
$.create('<div class="new">Content</div>').addClass("active");

// Timeout utility with cleanup
const clear = $.timeout(() => {
	console.log("Delayed execution");
}, 1000);

// Optional: Cancel timeout
clear();

API

DOM Selection

• $(selector) - Select elements using CSS selector
• $(element) - Wrap DOM element
• $(elements) - Wrap array of DOM elements

Store Management

• $.store - Global state store
• $.local - localStorage-backed store
• .subscribe(callback) - Subscribe to state changes

DOM Methods

• .first - Get first element
• .array - Get array of elements
• .val([value]) - Get/set input value
• .text([content]) - Get/set text content
• .html([content]) - Get/set HTML content
• .data([key], [value]) - Get/set data attributes
• .addClass(...classes) - Add classes
• .removeClass(...classes) - Remove classes
• .toggleClass(class) - Toggle class
• .hasClass(class) - Check if element has class
• .attr(name, [value]) - Get/set attribute
• .on(event, callback) - Add event listener
• .hide() - Hide elements
• .show() - Show elements

Utility Methods

• $.ready(callback) - DOM ready handler
• $.create(html) - Create element from HTML
• $.timeout(callback, ms) - Execute callback after delay with cleanup

Development

# Clone and setup
git clone https://github.com/wmdigi/dom.git
cd dom
bun install

# Build
bun run build

Publishing

# Patch version (1.0.0 -> 1.0.1)
bun pub

# Minor version (1.0.0 -> 1.1.0)
bun pub minor

# Major version (1.0.0 -> 2.0.0)
bun pub major

The publish script automatically:

1. Builds the library
2. Commits changes
3. Bumps version
4. Pushes to git with tags
5. Publishes to npm

License

MIT

Contributing

Pull requests welcome. For major changes, please open an issue first.

Credits

Created by Wonder Makers - making the web simpler, one library at a time.