HarmonyOS Developer Toolbox - Case Converter Development Notes

About HarmonyOS 5

HarmonyOS 5 (also known as HarmonyOS Next) is a major milestone in Huawei's distributed operating system. Its microkernel architecture enhances security and enables seamless cross-device collaboration. The developer experience is greatly improved with the new ArkTS language, enhanced UI components, and better debugging tools. Distributed capabilities allow for smooth experiences across smartphones, tablets, TVs, and IoT devices.

About the Author

I am a dedicated HarmonyOS developer from China, with years of experience in the HarmonyOS ecosystem. I focus on cross-platform development and performance optimization, and I enjoy sharing my technical insights and practical experiences with the community.

Basic Knowledge

Before diving into the Case Converter, let's briefly review some basic concepts:

Case Conversion: The process of converting text between different naming conventions, such as camelCase, PascalCase, snake_case, kebab-case, etc.
Separators: Characters like spaces, hyphens, underscores, and dots used to split words in different formats.
Capitalization: Adjusting the case of the first letter or all letters in a word or phrase.

Preface

Recently, while working on the HarmonyOS Toolbox, I wanted to add a case conversion feature. The main purpose is to convert between various naming formats, such as turning "hello world" into "HelloWorld", "HELLO_WORLD", "hello-world", etc. At first, I thought it would be simple, but I soon realized that handling all the formats was tricky and required several rounds of debugging.

During development, I encountered many pitfalls, such as separator handling, capitalization, and special character processing. In the end, all issues were resolved, and the tool is now quite handy.

I. Feature Overview

1.1 Main Features

Support for 14 different text format conversions
Real-time preview of conversion results
One-click copy of results
Favorites feature

1.2 UI Features

Text input box
Format selection list
Result display area
Copy button

II. Implementation Process

2.1 Development Stories

At first, I used a conversion function found online, but it had many issues. For example, when entering "hello-world", the output was "helloWorld", but users said it should be "helloWorld". I found that different scenarios require different handling of separators, sometimes keeping them, sometimes removing them.

Another time, a user wanted to see "HelloWorld" when converting "hello_world" to "helloWorld". This requirement made me revise the code several times, and I finally added logic to capitalize the first letter as needed.

The funniest was handling special characters. Initially, I didn't process special characters, so when users entered "hello@world", the output was "hello@world", but users said the "@" should be treated as a separator. I then updated the code to treat special characters as separators, which made users happy.

2.2 Temporary Solutions

Separator Handling
- Temporary: Use regex to replace separators with spaces (quick and dirty)
- Problem: Sometimes replaces separators that shouldn't be replaced, causing strange results
- Final: Use regex to split input text and keep separators as needed
Capitalization
- Temporary: Convert all to uppercase, regardless of position
- Problem: Sometimes capitalizes letters that shouldn't be capitalized
- Final: Capitalize as needed based on format type
Special Character Handling
- Temporary: Ignore special characters
- Problem: Users wanted special characters treated as separators
- Final: Treat special characters as separators
Format Selection
- Temporary: Use dropdown for format selection
- Problem: Not user-friendly, users had to try each one
- Final: Use Radio component for easy switching

2.3 Debugging Examples

Conversion Implementation

private convertCase(text: string, type: CaseType): string {
  const words = text.trim().split(/[\s-_./]+/)

  switch (type) {
    case CaseType.LOWER:
      return text.toLowerCase()

    case CaseType.UPPER:
      return text.toUpperCase()

    case CaseType.CAMEL:
      return words.map((word, index) => 
        index === 0 ? word.toLowerCase() : 
        word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
      ).join('')

    case CaseType.CAPITAL:
      return words.map(word => 
        word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
      ).join(' ')

    case CaseType.CONSTANT:
      return words.map(word => word.toUpperCase()).join('_')

    case CaseType.DOT:
      return words.map(word => word.toLowerCase()).join('.')

    case CaseType.HEADER:
      return words.map(word => 
        word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
      ).join('-')

    case CaseType.DEFAULT:
      return words.map(word => word.toLowerCase()).join('-')

    case CaseType.PARAM:
      return words.map(word => word.toLowerCase()).join('_')

    case CaseType.PASCAL:
      return words.map(word => 
        word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
      ).join('')

    case CaseType.PATH:
      return words.map(word => word.toLowerCase()).join('/')

    case CaseType.SENTENCE:
      return words.map((word, index) => 
        index === 0 ? word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() :
        word.toLowerCase()
      ).join(' ')

    case CaseType.SNAKE:
      return words.map(word => word.toLowerCase()).join('_')

    case CaseType.MOCK:
      return text.split('').map((char, index) => 
        index % 2 === 0 ? char.toLowerCase() : char.toUpperCase()
      ).join('')

    default:
      return text
  }
}

Format Selection Implementation

enum CaseType {
  LOWER = 'lower',         // lower case: hello world
  UPPER = 'upper',         // upper case: HELLO WORLD
  CAMEL = 'camel',         // camel case: helloWorld
  CAPITAL = 'capital',     // capital case: Hello World
  CONSTANT = 'constant',   // constant case: HELLO_WORLD
  DOT = 'dot',            // dot case: hello.world
  HEADER = 'header',      // header case: Hello-World
  DEFAULT = 'default',    // default case: hello-world
  PARAM = 'param',        // param case: hello_world
  PASCAL = 'pascal',      // pascal case: HelloWorld
  PATH = 'path',          // path case: hello/world
  SENTENCE = 'sentence',  // sentence case: Hello world
  SNAKE = 'snake',        // snake case: hello_world
  MOCK = 'mock'           // mock case: hElLo WoRlD
}

III. Pitfalls and Lessons

3.1 Problems Encountered

Separator Handling
- Problem: Users enter irregular formats, e.g., multiple separators
- Solution: Use regex to split and auto-handle
- Suggestion: Restrict format at input to avoid trouble
Capitalization
- Problem: Inconsistent capitalization
- Solution: Capitalize as needed based on format type
- Suggestion: Allow user customization
Special Character Handling
- Problem: Special characters not handled properly
- Solution: Treat special characters as separators
- Suggestion: Add custom options if needed
Format Selection
- Problem: Format selection not convenient
- Solution: Use Radio component
- Suggestion: Allow custom formats

3.2 Optimization Suggestions

Feature Optimization
- Support more formats
- Add history records
- Support batch conversion
- Add format classification, import/export, management, sharing, backup, etc.
Performance Optimization
- Optimize conversion speed
- Reduce memory usage
- Release resources promptly
- Try multithreading, algorithm optimization, result caching, asynchronous processing, etc.
User Experience
- Add usage instructions
- Support keyboard shortcuts
- Add animation effects, themes, sharing, favorites, import, backup, etc.