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

Securityby

Pending

The risk profile of this skill

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;
}