tessl/npm-cash-dom

An absurdly small jQuery alternative for modern browsers with jQuery-style syntax for DOM manipulation.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Data Attributes

Name: tessl/npm-cash-dom
Author: tessl

Data attribute handling for storing and retrieving custom element data with automatic type conversion and jQuery-compatible data storage.

Capabilities

Data Attribute Management

Get, set, and manage data-* attributes with automatic parsing and type conversion.

/**
 * Get all data-* attributes as an object
 * @returns Object with all data attributes or undefined
 */
data(): Record<string, any> | undefined;

/**
 * Get a specific data attribute value
 * @param name - Data attribute name (without 'data-' prefix)
 * @returns Data attribute value with type conversion
 */
data(name: string): any;

/**
 * Set a data attribute value
 * @param name - Data attribute name (without 'data-' prefix)
 * @param value - Value to set (will be JSON stringified if needed)
 * @returns The Cash collection for chaining
 */
data(name: string, value: any): this;

/**
 * Set multiple data attributes
 * @param datas - Object mapping attribute names to values
 * @returns The Cash collection for chaining
 */
data(datas: Record<string, any>): this;

Usage Examples:

// Get all data attributes
const allData = $('.element').data(); // { userId: 123, theme: 'dark' }

// Get specific data attribute
const userId = $('.element').data('user-id'); // or data('userId')
const config = $('.widget').data('config');

// Set single data attribute
$('.element').data('user-id', 456);
$('.element').data('timestamp', Date.now());

// Set multiple data attributes
$('.element').data({
  'user-id': 123,
  'user-name': 'john',
  'settings': { theme: 'dark', lang: 'en' }
});

// Data with automatic type conversion
$('.element').data('count', 42);        // Number
$('.element').data('active', true);     // Boolean
$('.element').data('items', [1,2,3]);   // Array
$('.element').data('config', {a: 1});   // Object

// Reading with type preservation
const count = $('.element').data('count');     // 42 (number)
const active = $('.element').data('active');   // true (boolean)
const items = $('.element').data('items');     // [1,2,3] (array)

// Component configuration
$('.carousel').data({
  'auto-play': true,
  'slide-duration': 3000,
  'controls': ['prev', 'next', 'dots']
});

// Event handling with data
$('.button').data('action', 'save').on('click', function() {
  const action = $(this).data('action');
  performAction(action);
});

Data Storage Features

Automatic Type Conversion

Cash DOM automatically converts data attribute values to appropriate JavaScript types:

// HTML: <div data-count="42" data-active="true" data-items='[1,2,3]'>
const element = $('.element');
element.data('count');    // 42 (number, not string)
element.data('active');   // true (boolean, not string) 
element.data('items');    // [1,2,3] (array, not string)

CamelCase Conversion

Kebab-case data attributes are automatically converted to camelCase when accessed:

// HTML: <div data-user-name="John" data-max-items="10">
$('.element').data('userName');   // "John" (camelCase access)
$('.element').data('user-name');  // "John" (kebab-case access also works)
$('.element').data('maxItems');   // 10

Storage vs Attributes

Data can be stored in memory (faster) or as HTML attributes (persistent):

// Setting via data() stores in memory and updates HTML attribute
$('.element').data('key', 'value');

// Direct attribute setting only affects HTML
$('.element').attr('data-key', 'value');

// data() getter checks memory first, then HTML attributes
const value = $('.element').data('key');

Common Patterns

// Configuration storage
$('.plugin-element').data('config', {
  api: '/api/endpoint',
  timeout: 5000,
  retries: 3
});

// State management
$('.toggle').on('click', function() {
  const current = $(this).data('state') || 'off';
  const newState = current === 'off' ? 'on' : 'off';
  $(this).data('state', newState).toggleClass('active', newState === 'on');
});

// Component initialization
$('.widget').each(function() {
  const options = $(this).data();
  new Widget(this, options);
});

// Form field metadata
$('.form-field').data({
  'validation-rules': ['required', 'email'],
  'error-message': 'Please enter a valid email',
  'success-callback': 'showSuccessMessage'
});

Install with Tessl CLI