DOCSEARCHbyAlgolia
Submit Docs

ModernDash Documentation

repository·main·Indexed 18 days ago

https://github.com/maxdewald/moderndash

A high-performance, TypeScript-first utility library inspired by Lodash. Designed to be lightweight and tree-shakable with zero runtime dependencies, it provides comprehensive utilities for arrays, crypto, decorators, functions, numbers, objects, and promises. Requires NodeJS >=20.x and TypeScript >=5.0.

Tokens
6.8K
Snippets
21
Records
42
Agent score
63%

What's inside ModernDash

  1. Overview of moderndash features

    main

    ModernDash is a TypeScript-first utility library inspired by Lodash, optimized for modern browsers and developer experience. Key features include:

    • ESM Support: Fully compatible with ECMAScript Modules.
    • Tree-shakable: Designed to minimize bundle size by only including used functions.
    • Strict TypeScript: Uses TypeScript Strict Mode with no any types.
    • Zero Runtime Dependencies: Keeps your dependency tree clean and lightweight.
    • High Performance: Aiming to match or exceed Lodash performance in most benchmarks.

  2. Build and preview a Svelte project

    main

    To prepare your application for production, run npm run build. To verify the production build locally, use npm run preview. Note that for deployment, you may need to install a SvelteKit adapter specific to your target environment.

    npm run build

# preview the production build
npm run preview

  3. Create a new Svelte project

    main

    Use npm create svelte@latest to initialize a new Svelte project. You can either create the project in the current directory or specify a directory name.

    # create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app

  6. Develop a Svelte project

    main

    After creating your project and installing dependencies (using npm install, pnpm install, or yarn), start the development server using npm run dev. You can use the --open flag to automatically open the app in a new browser tab.

    npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

  7. Understand the Jsonifiable type

    main

    The Jsonifiable type represents values that can be converted to a JSON string via JSON.stringify. It is a union of primitives, objects, and arrays.

    Key characteristics:

    • Primitives: Includes string, number, boolean, and null.
    • Objects: Can be a standard object with string keys or an object implementing a toJSON() method. Note that undefined is permitted in object fields (e.g., { a?: number }) to improve utility, even though JSON.stringify typically omits undefined values.
    • Arrays: Readonly arrays of Jsonifiable values.

    Warning: While types like Map or Set might be assigned to a Jsonifiable type in TypeScript, they may not serialize as expected. For example, JSON.stringify(new Map()) results in {}.

    const good: Jsonifiable = {
    number: 3,
    date: new Date(),
    missing: undefined,
};

JSON.stringify(good);
// => {"number": 3, "date": "2022-10-17T22:22:35.920Z"}

  8. Set a value at a specific path using `set()`

    main

    The set function modifies an object by setting a value at a specified path. If any part of the path does not exist, the function automatically creates the necessary structure (either an object or an array) to reach the target location.

    Key Behaviors:

    • Path Syntax: Uses dot notation (e.g., a.b.c) or bracket notation for array indices (e.g., a.c[0]).
    • Array Creation: If a path segment uses bracket notation (e.g., [0]) and the parent property is not already an array, set will initialize it as an array.
    • Object Creation: If a path segment uses dot notation and the parent property is not a plain object, set will initialize it as an object.
    • Numeric Keys: Numbers separated by dots (e.g., a.0.b) are treated as object keys rather than array indices.
    • Security: The function explicitly ignores paths containing __proto__ to prevent prototype pollution.
    • Error Handling: Throws an error if the provided path does not match the expected format.
    const obj = { a: { b: 2 } };

// Set a nested property
set(obj, 'a.c', 1);
// => { a: { b: 2, c: 1 } }

// Use bracket notation for arrays
set(obj, 'a.c[0]', 'hello');
// => { a: { b: 2, c: ['hello'] } }

// Numbers with dots are treated as object keys
set(obj, 'a.c.0.d', 'world');
// => { a: { b: 2, c: { 0: { d: 'world' } } } }

// Numbers in keys are supported
set(obj, 'a.e0.a', 1);
// => { a: { e0: { a: 1 } } }

  9. Use ModernDash string utilities

    main

    The moderndash/string package provides a collection of utility functions for string manipulation, including case conversions, HTML escaping, and trimming. You can import these functions directly from the package entrypoint.

    Available utility categories include:

    • Case Conversions: camelCase, kebabCase, pascalCase, snakeCase, titleCase.
    • HTML Handling: escapeHtml, unescapeHtml.
    • Trimming & Truncation: trim, trimStart, trimEnd, truncate.
    • Regex & Pattern Matching: escapeRegExp, splitWords, replaceLast.
    • Other: capitalize, deburr.

  11. Use ModernDash decorators for function optimization

    main

    ModernDash provides a suite of decorators designed to optimize function execution by controlling frequency, limiting calls, or caching results. These decorators can be applied to functions to implement patterns like debouncing, throttling, memoization, and call limiting. Use the toDecorator utility to convert standard higher-order functions into compatible decorators if needed.

    // Example of the types of decorators available via the package exports:
import { decDebounce, decThrottle, decMemoize, decMaxCalls, decMinCalls } from 'moderndash/decorator';

// These decorators are used to wrap functions to control their execution behavior.