jquery-signals ⚡ v1.2.0

Reactive State Management, Deep Stores, Keyed List Diffing, & Memory Auto-Cleanup for jQuery.

Bring the power of modern framework reactivity (like Solid.js, Preact, Vue Signals, and Pinia) to your legacy jQuery applications. Stop writing spaghetti DOM manipulation code and start writing clean, state-driven UIs without needing a build step or a Virtual DOM.

Features in v1.2.0 🚀

1. $.store(obj) (Deep Object Reactivity): Nested objects and array properties are automatically reactive via ES6 Proxies.
2. bindSignalList(arraySignal, templateFn, [keyFn]): Efficient Keyed DOM Diffing for dynamic arrays. Prevents screen flickers and retains input state.
3. $.persistedSignal(key, initialVal, [storageType]): Automatically syncs reactive state with localStorage or sessionStorage.
4. bindSignalStyle(stylePropOrMap): Reactive CSS inline style binding.
5. 🧹 Automatic Memory Cleanup: Automatically disposes signal listeners whenever elements are removed from DOM via $(el).remove() or $(el).empty().
6. Async Microtask Batching & $.batch(): Synchronously group multiple signal updates into a single browser reflow frame.

Quick Example

// 1. Create a Persistent Reactive Signal (syncs with localStorage)
const theme = $.persistedSignal('app_theme', 'dark');

// 2. Create a Deep Reactive Store
const user = $.store({
    name: 'Sarah',
    tasks: [{ id: 1, text: 'Write code' }, { id: 2, text: 'Review PRs' }]
});

// 3. Bind Reactive Styles
$('#box').bindSignalStyle(() => ({
    backgroundColor: theme.value === 'dark' ? '#1e293b' : '#fff'
}));

// 4. Render Keyed Lists
$('#task-list').bindSignalList(() => user.tasks, (task) => {
    return `<li data-id="${task.id}">${task.text}</li>`;
}, task => task.id);

Installation

Via npm:

npm install jquery-signals

Or via CDN:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-signals/dist/jquery-signals.min.js"></script>

Core API

$.signal(initialValue)

Creates a single reactive state variable. Read/write using .value.

$.persistedSignal(key, initialValue, [storageType])

Creates a reactive signal synced with localStorage (default) or sessionStorage.

$.store(object)

Creates a deeply reactive object using ES6 Proxies. Any nested property read inside an effect automatically tracks dependencies.

$.computed(getter)

Creates a read-only signal derived from other signals or store properties.

$.effect(callback)

Runs a side-effect function whenever any signal or store property accessed inside it changes. Returns a dispose() function.

$.batch(callback)

Groups multiple state updates together so effects and DOM updates execute only once.

$.signalsDebug = true

Enables verbose debug logging in the browser developer console.

DOM Binding API (jQuery Extensions)

.bindSignal(source, [transformFn])

Binds text content or input value.

.bindSignalInput(sourceOrSignal)

Full Two-Way Data Binding for text inputs, textareas, selects, checkboxes, and radios.

.bindSignalList(arraySource, templateFn, [keyFn])

Keyed DOM diffing list renderer for arrays. Only modifies, adds, or removes DOM nodes that actually changed.

.bindSignalStyle(stylePropOrMap, [source], [transformFn])

Binds inline CSS styles reactively.

.bindSignalClass(className, source, [conditionFn])

Toggles a CSS class reactively based on state.

.bindSignalProp(propName, source)

Binds DOM properties (e.g. disabled, checked).

.unbindSignals()

Manually disposes all signal subscriptions attached to the selected DOM elements. (Note: This happens automatically on $(el).remove()).

License

MIT