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

Cash DOM

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

Cash DOM is an absurdly small jQuery alternative for modern browsers (IE11+) that provides jQuery-style syntax for manipulating the DOM. Utilizing modern browser features to minimize the codebase, developers can use the familiar chainable methods at a fraction of the file size. It achieves a 76.6% size reduction compared to jQuery while covering most day-to-day use cases.

Package Information

Package Name: cash-dom
Package Type: npm
Language: TypeScript
Installation: npm install cash-dom

Core Imports

import $ from "cash-dom";

For CommonJS:

const $ = require("cash-dom");

CDN usage:

<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/7.0.3/cash.min.js"></script>

Basic Usage

import $ from "cash-dom";

// DOM ready callback
$(function () {
  // Select and manipulate elements
  $('html').addClass('dom-loaded');
  
  // Create and append elements
  $('<footer>Appended with Cash</footer>').appendTo(document.body);
  
  // Event handling
  $('.button').on('click', function() {
    $(this).toggleClass('active');
  });
  
  // CSS manipulation
  $('.content').css('color', 'blue');
});

Architecture

Cash DOM is built around several key components:

Core Constructor: Main $() function for element selection and collection creation
Collection Interface: Array-like collections with chainable methods that return new collections
Modular Design: Functionality organized into logical modules (attributes, CSS, events, etc.)
jQuery Compatibility: Familiar API surface compatible with most jQuery patterns
Type Safety: Full TypeScript support with generated type definitions

Capabilities

Core Selection and Collections

Essential DOM selection and collection manipulation functionality, including the main constructor and array-like operations.

function $(selector?: Selector, context?: Context | Cash): Cash;

interface Cash {
  length: number;
  [index: number]: EleLoose | undefined;
  splice(start: number, deleteCount?: number): EleLoose[];
  splice(start: number, deleteCount: number, ...items: Ele[]): EleLoose[];
  add(selector: Selector, context?: Context): Cash;
  each(callback: EachCallback<EleLoose>): this;
  eq(index: number): Cash;
  filter(comparator?: Comparator): Cash;
  first(): Cash;
  get(): EleLoose[];
  get(index: number): EleLoose | undefined;
  last(): Cash;
  map(callback: MapCallback<EleLoose>): Cash;
  slice(start?: number, end?: number): Cash;
  index(selector?: Selector): number;
  extend(plugins: Record<any, any>): this;
}

Core Selection and Collections

Attributes and Properties

DOM attribute, property, and CSS class manipulation methods for managing element state and appearance.

interface Cash {
  addClass(classes: string): this;
  attr(): undefined;
  attr(attrs: string): string | null;
  attr(attrs: string, value: string): this;
  attr(attrs: Record<string, string>): this;
  hasClass(cls: string): boolean;
  prop(prop: string): any;
  prop(prop: string, value: any): this;
  prop(props: Record<string, any>): this;
  removeAttr(attrs: string): this;
  removeClass(classes?: string): this;
  removeProp(prop: string): this;
  toggleClass(classes: string, force?: boolean): this;
}

Attributes and Properties

CSS and Styling

CSS property manipulation and computed style access for dynamic styling and layout control.

interface Cash {
  css(prop: string): string | undefined;
  css(prop: string, value: number | string): this;
  css(props: Record<string, number | string>): this;
}

CSS and Styling

Data Attributes

Data attribute handling for storing and retrieving custom element data.

interface Cash {
  data(): Record<string, any> | undefined;
  data(name: string): any;
  data(name: string, value: any): this;
  data(datas: Record<string, any>): this;
}

Data Attributes

Dimensions and Positioning

Element sizing, positioning, and offset calculations for layout and positioning operations.

interface Cash {
  width(): number;
  width(value: number | string): this;
  height(): number;
  height(value: number | string): this;
  innerWidth(): number | undefined;
  innerHeight(): number | undefined;
  outerWidth(includeMargins?: boolean): number;
  outerHeight(includeMargins?: boolean): number;
  offset(): undefined | { top: number; left: number };
  offsetParent(): Cash;
  position(): undefined | { top: number; left: number };
}

Dimensions and Positioning

Effects and Visibility

Show, hide, and toggle element visibility with display property manipulation.

interface Cash {
  hide(): this;
  show(): this;
  toggle(force?: boolean): this;
}

Effects and Visibility

Event Handling

Comprehensive event handling system with delegation support and jQuery-compatible event management.

interface Cash {
  off(): this;
  off(events: string): this;
  off(events: Record<string, EventCallback>): this;
  off(events: string, callback: EventCallback): this;
  off(events: string, selector: string, callback: EventCallback): this;
  on(events: Record<string, EventCallback>): this;
  on(events: Record<string, EventCallback>, selector: string): this;
  on(events: Record<string, EventCallback>, data: any): this;
  on(events: string, callback: EventCallback): this;
  on(events: string, selector: string, callback: EventCallback): this;
  on(events: string, data: any, callback: EventCallback): this;
  one(events: Record<string, EventCallback>): this;
  one(events: string, callback: EventCallback): this;
  one(events: string, selector: string, callback: EventCallback): this;
  ready(callback: Function): this;
  trigger(event: Event | string, data?: any): this;
}

Event Handling

Forms and Input

Form-specific functionality for handling input values and form serialization.

interface Cash {
  serialize(): string;
  val(): string | string[];
  val(value: string | string[]): this;
}

Forms and Input

DOM Manipulation

Comprehensive DOM manipulation methods for inserting, removing, and modifying elements and content.

interface Cash {
  after(...selectors: Selector[]): this;
  append(...selectors: Selector[]): this;
  appendTo(selector: Selector): this;
  before(...selectors: Selector[]): this;
  clone(): this;
  detach(comparator?: Comparator): this;
  empty(): this;
  html(): string;
  html(html: string): this;
  insertAfter(selector: Selector): this;
  insertBefore(selector: Selector): this;
  prepend(...selectors: Selector[]): this;
  prependTo(selector: Selector): this;
  remove(comparator?: Comparator): this;
  replaceAll(selector: Selector): this;
  replaceWith(selector: Selector): this;
  text(): string;
  text(text: string): this;
  unwrap(): this;
  wrap(selector?: Selector): this;
  wrapAll(selector?: Selector): this;
  wrapInner(selector?: Selector): this;
}

DOM Manipulation

DOM Traversal

DOM tree traversal methods for navigating element relationships and finding related elements.

interface Cash {
  children(comparator?: Comparator): Cash;
  closest(comparator?: Comparator): Cash;
  contents(): Cash;
  find(selector: string): Cash;
  has(selector: string | Node): Cash;
  is(comparator?: Comparator): boolean;
  next(comparator?: Comparator): Cash;
  nextAll(comparator?: Comparator): Cash;
  nextUntil(until?: Comparator, comparator?: Comparator): Cash;
  not(comparator?: Comparator): Cash;
  parent(comparator?: Comparator): Cash;
  parents(comparator?: Comparator): Cash;
  parentsUntil(until?: Comparator, comparator?: Comparator): Cash;
  prev(comparator?: Comparator): Cash;
  prevAll(comparator?: Comparator): Cash;
  prevUntil(until?: Comparator, comparator?: Comparator): Cash;
  siblings(comparator?: Comparator): Cash;
}

DOM Traversal

Static Utilities

Static utility methods available on the Cash function for type checking, iteration, and HTML parsing.

interface CashStatic {
  each<T>(arr: ArrayLike<T>, callback: EachCallback<T>): void;
  extend(): any;
  extend(target: any): typeof cash;
  extend(target: any, ...objs: any[]): any;
  guid: number;
  isArray(x: any): x is Array<any>;
  isFunction(x: any): x is Function;
  isNumeric(x: any): boolean;
  isWindow(x: any): x is Window;
  parseHTML(html: string): EleLoose[];
  unique<T>(arr: ArrayLike<T>): ArrayLike<T>;
  fn: Cash;
}

Static Utilities

Types

Core TypeScript type definitions used throughout the Cash DOM API:

type Ele = Window | Document | HTMLElement | Element | Node;
type EleLoose = HTMLElement & Element & Node;
type Selector = falsy | string | Function | HTMLCollection | NodeList | Ele | Ele[] | ArrayLike<Ele> | Cash;
type Comparator = string | Ele | Cash | ((this: EleLoose, index: number, ele: EleLoose) => boolean);
type Context = Document | HTMLElement | Element;
type EventCallback = {
  (event: any, data?: any): any;
  guid?: number;
};
type falsy = undefined | null | false | 0 | '';
type EachCallback<T> = (this: T, index: number, ele: T) => any;
type MapCallback<T> = (this: T, index: number, ele: T) => Ele;

interface Event {
  namespace: string;
  data: any;
  // Plus standard Event interface properties
}

class Cash {
  constructor(selector?: Selector, context?: Context | Cash);
  init(selector?: Selector, context?: Context | Cash): Cash;
}

Install with Tessl CLI

npx tessl i tessl/npm-cash-dom

Workspace: tessl
Visibility: Public
Created: 6 months ago
Last updated: about 1 month ago
Describes: pkg:npm/cash-dom@7.0.x
Publish Source: CLI
Badge