Parameters & Types##

Panduan lengkap tentang parameters, types, dan kondisi di Lokio CLI.

Overview##

Parameters adalah input yang diminta dari user saat generate code. Setiap parameter memiliki:

• Name - Nama parameter
• Type - Tipe data (string, boolean, number)
• Required - Wajib diisi atau tidak
• Prompt - Text yang ditampilkan saat prompt
• Default - Nilai default (optional)

Parameter Structure##

parameters:
  - name: "parameterName"      # Required: Parameter name
    type: "string"              # Required: string | boolean | number
    required: true              # Required: true | false
    prompt: "Prompt text"       # Required: Text untuk prompt
    default: "defaultValue"     # Optional: Default value

Types##

String##

Text input dari user.

Config:

- name: "componentName"
  type: "string"
  required: true
  prompt: "Component name"
  default: "MyComponent"  # Optional

Usage in Template:

<%= componentName %>        # "MyComponent"
<%= ComponentName %>        # "MyComponent" (Capitalize)

Prompt Behavior:

• User bisa input text bebas
• Jika ada default, akan ditampilkan sebagai placeholder
• Required: harus diisi
• Optional: bisa kosong (akan gunakan default jika ada)

Example:

◆  Component name: MyComponent

Boolean##

Yes/No question.

Config:

- name: "withProps"
  type: "boolean"
  required: false
  prompt: "Include props interface?"
  default: true  # Optional

Usage in Template:

<% if (withProps) { %>
interface <%= Name %>Props {
  // Props here
}
<% } %>

Prompt Behavior:

• User pilih Yes/No (Y/n)
• Jika ada default, akan ditampilkan sebagai initial value
• Required: harus dijawab
• Optional: bisa skip (akan gunakan default jika ada)

Example:

◆  Include props interface? (Y/n): y

Number##

Numeric input.

Config:

- name: "count"
  type: "number"
  required: true
  prompt: "Initial count"
  default: 0  # Optional

Usage in Template:

const [count, setCount] = useState(<%= count %>);

Prompt Behavior:

• User input angka
• Validasi: harus valid number
• Jika ada default, akan ditampilkan sebagai placeholder
• Required: harus diisi
• Optional: bisa kosong (akan gunakan default jika ada)

Example:

◆  Initial count: 10

Required vs Optional##

Required Parameters##

- name: "name"
  type: "string"
  required: true
  prompt: "Component name"

Behavior:

• Selalu ditanyakan saat generate
• Tidak bisa kosong
• Tidak ada default (atau default hanya sebagai placeholder)
• Ditanyakan dulu sebelum optional parameters

Optional Parameters##

- name: "withProps"
  type: "boolean"
  required: false
  prompt: "Include props?"
  default: true

Behavior:

• Ditanyakan setelah required parameters
• Bisa skip (Enter untuk default)
• Default value akan digunakan jika skip
• Ditanyakan terakhir

Default Values##

Default values digunakan jika user skip atau tidak mengisi.

String Default##

- name: "componentName"
  type: "string"
  required: false
  prompt: "Component name"
  default: "MyComponent"

Behavior:

• Default ditampilkan sebagai placeholder
• User bisa Enter untuk gunakan default
• User bisa ketik untuk override default

Boolean Default##

- name: "withProps"
  type: "boolean"
  required: false
  prompt: "Include props?"
  default: true

Behavior:

• Default ditampilkan sebagai initial value (Y/n)
• User bisa Enter untuk gunakan default
• User bisa pilih Y/n untuk override

Number Default##

- name: "count"
  type: "number"
  required: false
  prompt: "Initial count"
  default: 0

Behavior:

• Default ditampilkan sebagai placeholder
• User bisa Enter untuk gunakan default
• User bisa ketik angka untuk override

Prompt Text##

Prompt text adalah pertanyaan yang ditampilkan ke user.

Best Practices##

✅ Good:

prompt: "Component name"
prompt: "Hook name (without 'use' prefix)"
prompt: "Include props interface?"
prompt: "Initial count value"

❌ Bad:

prompt: "name"              # Too vague
prompt: "Enter component"  # Unclear
prompt: "?"                 # Too short

Tips##

• Clear and specific - Jelaskan apa yang diminta
• Include context - Tambahkan hint jika perlu
• Be concise - Jangan terlalu panjang
• Use examples - Jika perlu, tambahkan contoh di description

Parameter Order##

Parameters ditanyakan berdasarkan:

1. Required parameters (dari atas ke bawah)
2. Optional parameters (dari atas ke bawah)

Example Config:

parameters:
  - name: "name"           # Required - ditanyakan pertama
    type: "string"
    required: true
    prompt: "Component name"
  - name: "withProps"       # Optional - ditanyakan kedua
    type: "boolean"
    required: false
    prompt: "Include props?"
    default: true
  - name: "description"     # Optional - ditanyakan ketiga
    type: "string"
    required: false
    prompt: "Description"

Flow:

1. "Component name" (required)
2. "Include props?" (optional)
3. "Description" (optional)

Complete Example##

templates:
  - name: "component"
    description: "React component template"
    path: "component.lokio"
    output: "src/components/<%= Name %>.tsx"
    parameters:
      # Required string
      - name: "name"
        type: "string"
        required: true
        prompt: "Component name"
      
      # Optional boolean with default
      - name: "withProps"
        type: "boolean"
        required: false
        prompt: "Include props interface?"
        default: true
      
      # Optional string
      - name: "description"
        type: "string"
        required: false
        prompt: "Component description"
      
      # Required number
      - name: "initialValue"
        type: "number"
        required: true
        prompt: "Initial value"

Validation##

Lokio akan validate:

• ✅ Parameter name format (camelCase recommended)
• ✅ Type harus: string, boolean, atau number
• ✅ Required harus: true atau false
• ✅ Prompt text harus ada
• ✅ Default value type harus sesuai dengan parameter type

Usage in Templates##

Accessing Parameters##

<%= name %>              # Direct access
<%= Name %>              # Capitalize (auto)
<%= withProps %>         # Boolean
<%= initialValue %>      # Number

Conditional Based on Parameters##

<% if (withProps) { %>
interface <%= Name %>Props {
  // Props
}
<% } %>

Multiple Parameters##

export const <%= Name %> = () => {
  <% if (description) { %>
  // <%= description %>
  <% } %>
  
  return <div><%= name %></div>;
};

Tips##

1. Use descriptive names - componentName bukan name
2. Set defaults - Untuk optional parameters, set default value
3. Clear prompts - Buat prompt text yang jelas
4. Order matters - Required dulu, optional kemudian
5. Type consistency - Pastikan type sesuai dengan usage di template