@but212/atom-effect-jquery

Browser Support: Targets ES2021+ environments. Legacy browsers (IE11) are NOT supported. Use generic jQuery for them.

Quick Start

Installation

npm install @but212/atom-effect-jquery jquery

CDN

<!-- jquery -->
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<!-- atom-effect-jquery -->
<script src="https://cdn.jsdelivr.net/npm/@but212/[email protected]"></script>

Usage

Instead of manually updating the DOM in 5 different places, you define the relationship once.

import $ from 'jquery';
import '@but212/atom-effect-jquery';

// 1. Define State
const count = $.atom(0);

// 2. Bind to DOM (Declarative)
$('#count-display').atomText(count);
$('#btn-increment').on('click', () => count.value++);

// 3. Conditional UI
const isBig = $.computed(() => count.value > 10);
$('#warning-msg').atomShow(isBig);

Security Note

For rendering HTML content (atomHtml), this library includes minimal XSS protection. For production applications dealing with user-generated content, use DOMPurify.

import DOMPurify from 'dompurify';
// Always sanitize before binding HTML
$('#content').atomHtml($.computed(() => DOMPurify.sanitize(rawHTML.value)));

Documentation

• API Reference: Full list of bindings (atomText, atomVal, atomBind...).
• Architecture: Internal design — binding pipeline, lifecycle management, list reconciliation.
• Security Guide: HTML sanitization and DOMPurify integration.
• Common Patterns: How to handle async loading, modals, and legacy plugins.

License

MIT © Jeongil Suk