Animated Circular Progress Bar0
Font.Lokio
CLI

Case Transformation

Complete guide to case transformation in Lokio CLI templates

Case Transformation#

Panduan lengkap tentang case transformation di Lokio CLI templates.

Overview#

Lokio menyediakan automatic case transformation berdasarkan huruf pertama variable name, plus helper functions untuk berbagai case formats.

Automatic Detection#

Lokio secara otomatis mendeteksi case berdasarkan huruf pertama variable name:

<%= name %>              # lowercase: "button"
<%= Name %>              # Capitalize: "Button" (auto-detect)

How it works:

  • Variable dengan huruf kecil pertama → lowercase
  • Variable dengan huruf besar pertama → Capitalize (auto-convert)

Helper Functions#

capitalize()#

Capitalize first letter, lowercase the rest.

<%= capitalize(name) %>      # "Button" dari "button"
<%= capitalize("my button") %>  # "My button"

Usage:

interface <%= capitalize(name) %>Props {
  // Props
}

camelCase()#

Convert to camelCase.

<%= camelCase(name) %>       # "button" dari "button"
<%= camelCase("my button") %> # "myButton"

Usage:

const <%= camelCase(name) %> = () => {};

pascalCase()#

Convert to PascalCase.

<%= pascalCase(name) %>      # "Button" dari "button"
<%= pascalCase("my button") %> # "MyButton"

Usage:

export const <%= pascalCase(name) %> = () => {};

lowercase()#

Convert to lowercase.

<%= lowercase(name) %>        # "button" dari "Button"
<%= lowercase("My Button") %>  # "my button"

Usage:

const className = "<%= lowercase(name) %>-component";

uppercase()#

Convert to UPPERCASE.

<%= uppercase(name) %>        # "BUTTON" dari "button"
<%= uppercase("My Button") %>  # "MY BUTTON"

Usage:

const CONSTANT = "<%= uppercase(name) %>";

Examples#

Input: name = "my button"#

<%= name %>              # "my button"
<%= Name %>              # "My button" (auto)
<%= capitalize(name) %>  # "My button"
<%= camelCase(name) %>   # "myButton"
<%= pascalCase(name) %>  # "MyButton"
<%= lowercase(name) %>   # "my button"
<%= uppercase(name) %>   # "MY BUTTON"

Input: name = "button"#

<%= name %>              # "button"
<%= Name %>              # "Button" (auto)
<%= capitalize(name) %>  # "Button"
<%= camelCase(name) %>   # "button"
<%= pascalCase(name) %>  # "Button"

Input: name = "useCounter"#

<%= name %>              # "useCounter"
<%= Name %>              # "UseCounter" (auto)
<%= capitalize(name) %>  # "UseCounter"
<%= camelCase(name) %>   # "useCounter"
<%= pascalCase(name) %>  # "UseCounter"

Common Patterns#

React Component#

// Component name: "button"
interface <%= Name %>Props {        // "ButtonProps"
  // Props
}
 
export const <%= Name %>: React.FC<<%= Name %>Props> = () => {  // "Button"
  return <div><%= name %></div>;   // "button"
};

React Hook#

// Hook name: "counter"
export function use<%= Name %>() {  // "useCounter"
  const [<%= name %>, set<%= Name %>] = useState(0);  // "counter", "setCounter"
  return { <%= name %>, set<%= Name %> };
}

File Naming#

// Component name: "my button"
// Output path: src/components/<%= pascalCase(name) %>.tsx
// Result: src/components/MyButton.tsx

CSS Classes#

// Component name: "Button"
<div className="<%= lowercase(name) %>-container">
  // Result: "button-container"
</div>

Constants#

// Constant name: "apiUrl"
export const <%= uppercase(name) %> = "https://api.example.com";
// Result: "APIURL"

Output Path Examples#

Case transformation juga bekerja di output path:

# Input: name = "my button"
output: "src/components/<%= Name %>.tsx"           # "src/components/My button.tsx"
output: "src/components/<%= pascalCase(name) %>.tsx"  # "src/components/MyButton.tsx"
output: "src/components/<%= name %>.tsx"           # "src/components/my button.tsx"

Best Practices#

1. Use Automatic Detection#

✅ <%= Name %>              # Auto Capitalize
❌ <%= capitalize(name) %>  # Redundant jika sudah auto

2. Use Helpers for Complex Cases#

✅ <%= pascalCase(name) %>  # Untuk PascalCase
✅ <%= camelCase(name) %>   # Untuk camelCase

3. Consistent Naming#

// Component
interface <%= Name %>Props { }      # PascalCase untuk types
export const <%= Name %> = () => { };  # PascalCase untuk components
const className = "<%= lowercase(name) %>";  # lowercase untuk CSS

4. File Naming#

# Use pascalCase untuk file names
output: "src/components/<%= pascalCase(name) %>.tsx"

Tips#

  1. Automatic is easier - Gunakan <%= Name %> untuk Capitalize
  2. Helpers for specific cases - Gunakan helpers untuk camelCase, PascalCase
  3. Consistent in project - Pilih convention dan stick to it
  4. Test different inputs - Test dengan berbagai input untuk memastikan hasil benar

Troubleshooting#

Case tidak berubah#

  • Check variable name: <%= Name %> (huruf besar pertama)
  • Check helper function: <%= capitalize(name) %>
  • Check input value: pastikan input adalah string

Output tidak sesuai#

  • Test dengan input sederhana dulu
  • Check helper function yang digunakan
  • Pastikan input adalah string (bukan number/boolean)

Lihat Troubleshooting untuk lebih detail.