CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-legendapp--state

A super fast and powerful state management library for JavaScript and React applications with proxy-based observables and fine-grained reactivity

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

helper-functions.mddocs/

Helper Functions

Utility functions for working with observables, including type checking, object manipulation, and path operations. These functions provide essential utilities for advanced observable usage and integration.

Capabilities

Observable Utilities

Functions for working with and manipulating observables.

/**
 * Checks if a value is an observable
 * @param value - Value to check
 * @returns True if value is observable
 */
function isObservable(value: any): boolean;

/**
 * Checks if an observable value is ready (not loading/pending)
 * @param value - Observable value to check
 * @returns True if value is ready
 */
function isObservableValueReady(value: any): boolean;

/**
 * Locks or unlocks an observable to prevent/allow modifications
 * @param obs - Observable to lock/unlock
 * @param locked - Whether to lock (true) or unlock (false)
 */
function lockObservable(obs: Observable<any>, locked: boolean): void;

/**
 * Sets a value in an observable without triggering change notifications
 * @param obs - Observable to update
 * @param value - New value to set
 */
function setSilently<T>(obs: Observable<T>, value: T): void;

/**
 * Merges multiple source objects into a target observable
 * @param target - Target observable to merge into
 * @param sources - Source objects to merge from
 */
function mergeIntoObservable<T>(
  target: Observable<T>, 
  ...sources: Partial<T>[]
): void;

/**
 * Gets the internal index of an observable for advanced use cases
 * @param obs - Observable to get index for
 * @returns Internal index number
 */
function getObservableIndex(obs: Observable<any>): number;

Path Operations

Functions for working with object paths and nested property access.

/**
 * Sets a value at a specific path in an object
 * @param obj - Object to modify
 * @param path - Path as array of property names
 * @param value - Value to set at path
 */
function setAtPath(obj: object, path: string[], value: any): void;

/**
 * Sets a value at a specific path within an observable
 * @param obs - Observable to modify
 * @param path - Path as array of property names  
 * @param value - Value to set at path
 */
function setInObservableAtPath(
  obs: Observable<any>, 
  path: string[], 
  value: any
): void;

/**
 * Constructs an object with a value at a specific path
 * @param obj - Base object to extend
 * @param path - Path where to place the value
 * @param value - Value to place at path
 * @returns New object with value at path
 */
function constructObjectWithPath(
  obj: object, 
  path: string[], 
  value: any
): object;

/**
 * Extracts a value from an object at a specific path
 * @param obj - Object to extract from
 * @param path - Path to extract value from
 * @returns Value at the specified path
 */
function deconstructObjectWithPath(obj: object, path: string[]): any;

Selector Utilities

Functions for working with selectors and computed values.

/**
 * Computes the value of a selector function
 * @param selector - Selector function to compute
 * @returns Computed value from selector
 */
function computeSelector<T>(selector: () => T): T;

Object Utilities

Functions for creating special object types and wrappers.

/**
 * Creates an opaque object wrapper that prevents direct property access
 * @param obj - Object to make opaque
 * @returns Opaque wrapped object
 */
function opaqueObject<T>(obj: T): OpaqueObject<T>;

interface OpaqueObject<T> extends Observable<T> {
  /** Opaque objects can only be accessed through observable methods */
}

Type Checking Functions

Utility functions for runtime type checking and validation.

/**
 * Checks if object has own property (not inherited)
 * @param obj - Object to check
 * @param prop - Property name to check for
 * @returns True if object has own property
 */
function hasOwnProperty(obj: object, prop: string): boolean;

/**
 * Checks if value is an array
 * @param value - Value to check
 * @returns True if value is array
 */
function isArray(value: any): value is Array<any>;

/**
 * Checks if value is a Date object
 * @param value - Value to check
 * @returns True if value is Date
 */
function isDate(value: any): value is Date;

/**
 * Checks if value is a boolean
 * @param value - Value to check
 * @returns True if value is boolean
 */
function isBoolean(value: any): value is boolean;

/**
 * Checks if value is empty (null, undefined, empty string, empty array, empty object)
 * @param value - Value to check
 * @returns True if value is empty
 */
function isEmpty(value: any): boolean;

/**
 * Checks if value is a function
 * @param value - Value to check
 * @returns True if value is function
 */
function isFunction(value: any): value is Function;

/**
 * Checks if value is an object (not null, not array, not function)
 * @param value - Value to check
 * @returns True if value is object
 */
function isObject(value: any): value is Record<any, any>;

/**
 * Checks if value is a primitive type (string, number, boolean, null, undefined, symbol)
 * @param value - Value to check
 * @returns True if value is primitive
 */
function isPrimitive(value: any): value is string | number | bigint | boolean | symbol;

/**
 * Checks if value is a Promise
 * @param value - Value to check
 * @returns True if value is Promise
 */
function isPromise<T>(value: any): value is Promise<T>;

/**
 * Checks if value is a string
 * @param value - Value to check
 * @returns True if value is string
 */
function isString(value: any): value is string;

/**
 * Checks if value is a symbol
 * @param value - Value to check
 * @returns True if value is symbol
 */
function isSymbol(value: any): value is symbol;

Time Utilities

Helper functions for time-related operations.

/**
 * Time utility functions for common time operations
 */
declare const time: {
  /** Current timestamp in milliseconds */
  now(): number;
  /** Formats timestamp to readable string */
  format(timestamp: number, format?: string): string;
  /** Adds time interval to timestamp */
  add(timestamp: number, interval: TimeInterval): number;
  /** Subtracts time interval from timestamp */
  subtract(timestamp: number, interval: TimeInterval): number;
};

interface TimeInterval {
  years?: number;
  months?: number;
  days?: number;
  hours?: number;
  minutes?: number;
  seconds?: number;
  milliseconds?: number;
}

Page Hash Utilities

Functions for working with URL hash and query parameters.

/**
 * Utilities for working with page hash
 */
declare const pageHash: {
  /** Gets current page hash */
  get(): string;
  /** Sets page hash */
  set(hash: string): void;
  /** Observable for hash changes */
  observable: Observable<string>;
};

/**
 * Utilities for working with hash parameters
 */
declare const pageHashParams: {
  /** Gets parameter from hash */
  get(key: string): string | undefined;
  /** Sets parameter in hash */
  set(key: string, value: string): void;
  /** Observable for hash parameter changes */
  observable: Observable<Record<string, string>>;
};

Fetch Utilities

Helper functions for HTTP requests and data fetching.

/**
 * Enhanced fetch utility with observable integration
 * @param url - URL to fetch
 * @param options - Fetch options
 * @returns Promise resolving to response data
 */
declare const fetch: {
  /** Standard fetch with observable integration */
  <T>(url: string, options?: RequestInit): Promise<T>;
  /** GET request helper */
  get<T>(url: string, options?: RequestInit): Promise<T>;
  /** POST request helper */
  post<T>(url: string, data?: any, options?: RequestInit): Promise<T>;
  /** PUT request helper */
  put<T>(url: string, data?: any, options?: RequestInit): Promise<T>;
  /** DELETE request helper */
  delete<T>(url: string, options?: RequestInit): Promise<T>;
};

Usage Examples:

import { 
  observable,
  isObservable,
  setAtPath,
  computeSelector,
  setSilently,
  mergeIntoObservable
} from "@legendapp/state";

// Type checking
const user$ = observable({ name: "Alice", age: 30 });
console.log(isObservable(user$)); // true
console.log(isObservable("hello")); // false

// Path operations
const data = { user: { profile: { name: "" } } };
setAtPath(data, ["user", "profile", "name"], "Bob");
console.log(data.user.profile.name); // "Bob"

// Observable path operations
const state$ = observable({ user: { settings: { theme: "light" } } });
setInObservableAtPath(state$, ["user", "settings", "theme"], "dark");

// Silent updates (no change notifications)
const counter$ = observable(0);
counter$.onChange(() => console.log("Changed!"));
setSilently(counter$, 5); // No "Changed!" log
counter$.set(10); // Logs "Changed!"

// Merging objects into observables
const settings$ = observable({ theme: "light", language: "en" });
mergeIntoObservable(settings$, 
  { theme: "dark" }, 
  { fontSize: 14, animation: true }
);
// settings$ now contains merged properties

// Selector computation
const name$ = observable("Alice");
const age$ = observable(30);
const greeting = computeSelector(() => 
  `Hello, ${name$.get()}! You are ${age$.get()} years old.`
);

// Path construction/deconstruction
const baseObj = { app: { version: "1.0" } };
const newObj = constructObjectWithPath(baseObj, ["user", "profile"], { name: "Bob" });
// newObj = { app: { version: "1.0" }, user: { profile: { name: "Bob" } } }

const extracted = deconstructObjectWithPath(newObj, ["user", "profile", "name"]);
console.log(extracted); // "Bob"

// Type checking examples
console.log(isEmpty("")); // true
console.log(isEmpty([])); // true  
console.log(isEmpty({})); // true
console.log(isEmpty(null)); // true
console.log(isEmpty("hello")); // false

console.log(isPrimitive("hello")); // true
console.log(isPrimitive(42)); // true
console.log(isPrimitive({})); // false
console.log(isPrimitive([])); // false

docs

configuration.md

core-observables.md

helper-functions.md

index.md

persistence.md

react-integration.md

tile.json