w
Documentation Core Tools Case Converter

API Reference

The Case Converter Tool is a client-side application that doesn't expose a traditional API. However, this document provides technical details about the tool's functionality and how it can be integrated or extended.

Technical Architecture

Frontend Framework

  • Vue.js 3: Built with Vue.js 3 Composition API
  • TypeScript: Full TypeScript support for type safety
  • Nuxt.js: Server-side rendering and static generation
  • TailwindCSS: Utility-first CSS framework

Core Components

CaseConverter Component

interface CaseConverterProps {
  id: string;
  class?: string;
  docHref: string;
}

Conversion Functions

function convertToCase(text: string, caseType: string): string;

Supported Case Types

Case Type Enum

enum CaseType {
  LOWERCASE = 'lowercase',
  UPPERCASE = 'uppercase',
  CAMELCASE = 'camelcase',
  CAPITALCASE = 'capitalcase',
  CONSTANTCASE = 'constantcase',
  DOTCASE = 'dotcase',
  HEADERCASE = 'headercase',
  NOCASE = 'nocase',
  PARAMCASE = 'paramcase',
  PASCALCASE = 'pascalcase',
  PATHCASE = 'pathcase',
  SENTENCECASE = 'sentencecase',
  SNAKECASE = 'snakecase',
  MOCKINGCASE = 'mockingcase',
}

Conversion Algorithms

Lowercase Conversion

function toLowercase(text: string): string {
  return text.toLowerCase();
}

Uppercase Conversion

function toUppercase(text: string): string {
  return text.toUpperCase();
}

Camelcase Conversion

function toCamelcase(text: string): string {
  return text.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase());
}

Pascalcase Conversion

function toPascalcase(text: string): string {
  return text
    .toLowerCase()
    .replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase())
    .replace(/^[a-z]/, (chr) => chr.toUpperCase());
}

Snakecase Conversion

function toSnakecase(text: string): string {
  return text
    .toLowerCase()
    .replace(/[^a-zA-Z0-9]+/g, '_')
    .replace(/^_|_$/g, '');
}

Paramcase Conversion

function toParamcase(text: string): string {
  return text
    .toLowerCase()
    .replace(/[^a-zA-Z0-9]+/g, '-')
    .replace(/^-|-$/g, '');
}

Constantcase Conversion

function toConstantcase(text: string): string {
  return text
    .toUpperCase()
    .replace(/[^a-zA-Z0-9]+/g, '_')
    .replace(/^_|_$/g, '');
}

Capitalcase Conversion

function toCapitalcase(text: string): string {
  return text.toLowerCase().replace(/\b\w/g, (l) => l.toUpperCase());
}

Sentencecase Conversion

function toSentencecase(text: string): string {
  return text.toLowerCase().replace(/^[a-z]/, (chr) => chr.toUpperCase());
}

Dotcase Conversion

function toDotcase(text: string): string {
  return text
    .toLowerCase()
    .replace(/[^a-zA-Z0-9]+/g, '.')
    .replace(/^\.|\.$/g, '');
}

Pathcase Conversion

function toPathcase(text: string): string {
  return text
    .toLowerCase()
    .replace(/[^a-zA-Z0-9]+/g, '/')
    .replace(/^\/|\/$/g, '');
}

Headercase Conversion

function toHeadercase(text: string): string {
  return text
    .replace(/[^a-zA-Z0-9]+/g, '-')
    .replace(/^-|-$/g, '')
    .split('-')
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join('-');
}

Mockingcase Conversion

function toMockingcase(text: string): string {
  return text
    .split('')
    .map((char, index) => (index % 2 === 0 ? char.toLowerCase() : char.toUpperCase()))
    .join('');
}

Data Structures

History Record Interface

interface HistoryRecord {
  id: string;
  input: string;
  results: Record<string, string>;
  timestamp: number;
}

Conversion Results Interface

interface ConversionResults {
  lowercase: string;
  uppercase: string;
  camelcase: string;
  capitalcase: string;
  constantcase: string;
  dotcase: string;
  headercase: string;
  nocase: string;
  paramcase: string;
  pascalcase: string;
  pathcase: string;
  sentencecase: string;
  snakecase: string;
  mockingcase: string;
}

State Management

Reactive State

const inputText = ref<string>('');
const conversionResults = ref<Record<string, string>>({});
const historyRecords = computed(() => {
  return [...toolsStore.caseConverter.history].sort((a, b) => b.timestamp - a.timestamp);
});

Store Integration

interface CaseConverterStore {
  history: HistoryRecord[];
  addHistory: (record: HistoryRecord) => void;
  clearHistory: () => void;
  deleteHistoryRecord: (id: string) => void;
}

Event Handlers

Input Handling

const convertText = () => {
  const text = inputText.value;
  const results: Record<string, string> = {};

  const caseTypes = [
    'lowercase',
    'uppercase',
    'camelcase',
    'capitalcase',
    'constantcase',
    'dotcase',
    'headercase',
    'nocase',
    'paramcase',
    'pascalcase',
    'pathcase',
    'sentencecase',
    'snakecase',
    'mockingcase',
  ];

  caseTypes.forEach((caseType) => {
    results[caseType] = convertToCase(text, caseType);
  });

  conversionResults.value = results;

  if (text.trim()) {
    toolsStore.addCaseConverterHistory({
      id: Date.now().toString(),
      input: text,
      results: results,
      timestamp: Date.now(),
    });
  }
};

Clipboard Operations

const copyResult = async (text: string) => {
  if (!text) return;

  try {
    await navigator.clipboard.writeText(text);
    toast.success(t('tools.case-converter.copySuccess'));
  } catch (error) {
    toast.error(t('tools.case-converter.copyError'));
  }
};

const copyAllResults = async () => {
  if (!hasResults.value) return;

  const allResults = Object.entries(conversionResults.value)
    .map(([key, value]) => `${t(`tools.case-converter.cases.${key}.name`)}: ${value}`)
    .join('\n');

  try {
    await navigator.clipboard.writeText(allResults);
    toast.success(t('tools.case-converter.copyAllSuccess'));
  } catch (error) {
    toast.error(t('tools.case-converter.copyError'));
  }
};

Performance Considerations

Text Length Limits

  • Recommended: Up to 1,000 characters
  • Maximum: 10,000 characters
  • Performance: Real-time conversion for most text lengths

Memory Management

  • Local Storage: History stored in browser's local storage
  • Memory Cleanup: Automatic cleanup of temporary data
  • Efficient Algorithms: Optimized conversion algorithms

Browser Compatibility

  • Modern Browsers: Chrome 60+, Firefox 55+, Safari 12+, Edge 79+
  • ES6+ Features: Uses modern JavaScript features
  • Polyfills: No polyfills required for supported browsers

Integration Examples

Custom Implementation

// Import the conversion function
import { convertToCase } from './case-converter-utils';

// Use in your application
const result = convertToCase('hello world', 'camelcase');
console.log(result); // "helloWorld"

Batch Processing

const processBatch = (texts: string[], caseType: string) => {
  return texts.map((text) => convertToCase(text, caseType));
};

const results = processBatch(['hello world', 'foo bar'], 'snakecase');
console.log(results); // ["hello_world", "foo_bar"]

Custom Case Type

const addCustomCaseType = (text: string, customType: string) => {
  switch (customType) {
    case 'reverse':
      return text.split('').reverse().join('');
    case 'alternating':
      return text
        .split('')
        .map((char, index) => (index % 2 === 0 ? char.toUpperCase() : char.toLowerCase()))
        .join('');
    default:
      return text;
  }
};

Error Handling

Input Validation

const validateInput = (text: string): boolean => {
  if (!text || typeof text !== 'string') return false;
  if (text.length > 10000) return false;
  return true;
};

Error Recovery

const safeConvert = (text: string, caseType: string): string => {
  try {
    if (!validateInput(text)) return '';
    return convertToCase(text, caseType);
  } catch (error) {
    console.error('Conversion error:', error);
    return text; // Return original text on error
  }
};

Testing

Unit Tests

describe('Case Converter', () => {
  test('converts to lowercase', () => {
    expect(convertToCase('Hello World', 'lowercase')).toBe('hello world');
  });

  test('converts to camelcase', () => {
    expect(convertToCase('hello world', 'camelcase')).toBe('helloWorld');
  });

  test('handles empty input', () => {
    expect(convertToCase('', 'lowercase')).toBe('');
  });
});

Integration Tests

describe('Case Converter Integration', () => {
  test('converts all case types', () => {
    const text = 'hello world';
    const results = convertAllCases(text);

    expect(results.lowercase).toBe('hello world');
    expect(results.uppercase).toBe('HELLO WORLD');
    expect(results.camelcase).toBe('helloWorld');
  });
});

This API reference provides comprehensive technical details for developers who want to understand, integrate, or extend the Case Converter Tool functionality.

Was this page helpful?