tessl/npm-eruda

Console for Mobile Browsers providing comprehensive debugging tools for mobile web development

—

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

Settings Manager

Name: tessl/npm-eruda
Author: tessl

Settings management system for configuring tools and creating custom settings interfaces. The Settings tool provides a unified interface for configuring all Eruda tools and creating custom configuration panels.

Capabilities

Settings Controls

Create various types of settings controls for tool configuration.

/**
 * Add toggle switch setting
 * @param cfg - Configuration object  
 * @param name - Configuration key
 * @param desc - Description text
 * @returns Settings instance for chaining
 */
switch(cfg: object, name: string, desc: string): Settings;

/**
 * Add select dropdown setting
 * @param cfg - Configuration object
 * @param name - Configuration key
 * @param desc - Description text
 * @param selections - Array of option values
 * @returns Settings instance for chaining
 */
select(cfg: object, name: string, desc: string, selections: string[]): Settings;

/**
 * Add range slider setting
 * @param cfg - Configuration object
 * @param name - Configuration key
 * @param desc - Description text
 * @param options - Range configuration options with defaults
 * @returns Settings instance for chaining
 */
range(cfg: object, name: string, desc: string, options: {
  min?: number;
  max?: number;
  step?: number;
} = { min: 0, max: 1, step: 0.1 }): Settings;

/**
 * Add button setting
 * @param text - Button text
 * @param handler - Click handler function
 * @returns Settings instance for chaining
 */
button(text: string, handler: Function): Settings;

interface RangeOptions {
  min?: number;
  max?: number; 
  step?: number;
}

Settings Organization

Organize settings with text labels and separators.

/**
 * Add text label
 * @param text - Label text
 * @returns Settings instance for chaining
 */
text(text: string): Settings;

/**
 * Add visual separator
 * @returns Settings instance for chaining
 */
separator(): Settings;

/**
 * Remove setting item
 * @param cfg - Configuration object
 * @param name - Setting name to remove
 * @returns Settings instance for chaining
 */
remove(cfg: object, name: string): Settings;

/**
 * Clear all settings
 * @returns Settings instance for chaining
 */
clear(): Settings;

Configuration Management

Create and manage configuration stores.

/**
 * Create configuration store
 * @param name - Configuration name
 * @param data - Default configuration data
 * @returns Configuration store instance
 */
static createCfg(name: string, data: object): LocalStore;

interface LocalStore {
  get(key: string): any;
  set(key: string, value: any): void;
  remove(key: string): void;
  clear(): void;
}

Usage Examples:

const settings = eruda.get('settings');

// Create configuration store
const myConfig = eruda.Settings.createCfg('myTool', {
  enabled: true,
  maxItems: 50,
  theme: 'auto',
  refreshRate: 1000
});

// Add settings controls
settings.text('My Tool Settings');

settings.switch(myConfig, 'enabled', 'Enable my tool');

settings.select(myConfig, 'theme', 'Color theme', [
  'light', 'dark', 'auto'
]);

settings.range(myConfig, 'maxItems', 'Maximum items', {
  min: 10,
  max: 100,
  step: 10
});

settings.range(myConfig, 'refreshRate', 'Refresh rate (ms)', {
  min: 500,
  max: 5000,
  step: 500
});

settings.button('Reset to Defaults', () => {
  myConfig.set('enabled', true);
  myConfig.set('maxItems', 50);
  myConfig.set('theme', 'auto');
  myConfig.set('refreshRate', 1000);
});

settings.separator();

// Access configuration values
const isEnabled = myConfig.get('enabled');
const currentTheme = myConfig.get('theme');

The Settings tool automatically manages configuration persistence and provides a consistent UI for all tool settings.

Install with Tessl CLI