Template Management##

Panduan lengkap untuk mengelola templates di Lokio CLI.

Overview##

Template di Lokio terdiri dari 2 bagian:

1. Template File (.lokio) - Content template dengan EJS syntax
2. Template Config (configs.yaml) - Metadata template (name, description, output path, parameters)

Cara Menambah Template##

Method 1: Interactive Command (Recommended)##

lokio template add

Interactive prompts akan menanyakan:

• Template name
• Description
• Output path
• Template file path
• Parameters

Keuntungan:

• Validasi otomatis
• Format yang benar
• Tidak perlu edit YAML manual

Method 2: Manual##

1. Buat template file di lokio/templates/<name>.lokio
2. Edit lokio/configs.yaml, tambah entry baru:

templates:
  - name: "my-template"
    description: "My custom template"
    path: "my-template.lokio"
    output: "src/components/<%= name %>.tsx"
    parameters:
      - name: "name"
        type: "string"
        required: true
        prompt: "Component name"

Template File Structure##

Template file adalah file .lokio yang menggunakan EJS syntax.

Location: lokio/templates/<name>.lokio

Example:

import React from 'react';
 
interface <%= Name %>Props {
  // Props here
}
 
export const <%= Name %>: React.FC<<%= Name %>Props> = () => {
  return (
    <div>
      <h1><%= Name %></h1>
    </div>
  );
};

Template Config Structure##

Template config ada di lokio/configs.yaml:

templates:
  - name: "template-name"           # Required: Unique name
    description: "Template description"  # Required: Description
    path: "template-file.lokio"       # Required: Path relatif ke lokio/templates/
    output: "output/path/<%= name %>.tsx"  # Required: Output path dengan EJS
    parameters:                      # Required: Array of parameters
      - name: "paramName"           # 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

Field Details##

name (string, required)##

• Nama template (unique)
• Hanya boleh: letters, numbers, hyphens, underscores
• Case-sensitive

description (string, required)##

• Deskripsi template
• Ditampilkan di lokio list
• Bisa multi-line dengan YAML syntax

path (string, required)##

• Path template file relatif ke lokio/templates/
• Contoh: component.lokio, hooks/useHook.lokio
• File harus ada di lokio/templates/

output (string, required)##

• Output path dengan EJS syntax
• Bisa menggunakan parameters dan helper functions
• Contoh: src/components/<%= name %>.tsx
• Contoh: src/hooks/use<%= name %>.ts

parameters (array, required)##

• Array of parameter objects
• Minimal 0 parameter (empty array)
• Lihat Parameters & Types untuk detail

Edit Template##

Edit Template File##

Edit langsung file .lokio di lokio/templates/:

# Buka dengan editor
code lokio/templates/my-template.lokio
# atau
vim lokio/templates/my-template.lokio

Tips:

• Gunakan EJS syntax: <%= variable %>
• Bisa menggunakan helper functions: capitalize(), camelCase(), dll
• Lihat Template Syntax untuk detail

Edit Template Config##

Edit lokio/configs.yaml untuk:

• Ubah description
• Ubah output path
• Tambah/edit parameters
• Ubah template file path

Example - Tambah Parameter:

templates:
  - name: "hooks"
    # ... existing config ...
    parameters:
      - name: "name"
        type: "string"
        required: true
        prompt: "Hook name"
      - name: "withState"  # Parameter baru
        type: "boolean"
        required: false
        prompt: "Include useState?"
        default: true

Note: Parameter yang ditambah akan otomatis muncul sebagai prompt saat lokio generate.

Hapus Template##

Method 1: Command##

lokio template remove <name>

Method 2: Manual##

1. Hapus entry dari lokio/configs.yaml
2. (Optional) Hapus template file dari lokio/templates/

Best Practices##

1. Naming Convention##

• Gunakan kebab-case untuk template name: my-component, react-hook
• Gunakan descriptive names: button-component, bukan btn

2. Template Organization##

• Group related templates: components/, hooks/, utils/
• Gunakan subfolder di lokio/templates/ jika perlu

Example:

lokio/templates/
├── components/
│   ├── button.lokio
│   └── input.lokio
├── hooks/
│   └── useCounter.lokio
└── utils/
    └── helper.lokio

Config:

path: "components/button.lokio"

3. Parameter Naming##

• Gunakan camelCase untuk parameter names: componentName, includeProps
• Gunakan descriptive prompt text
• Set default values untuk optional parameters

4. Output Path##

• Gunakan EJS untuk dynamic paths
• Gunakan case transformation helpers jika perlu
• Contoh: src/components/<%= Name %>.tsx

5. Template Content##

• Tambahkan comments di template untuk dokumentasi
• Gunakan case transformation untuk konsistensi
• Contoh: <%= Name %> untuk Capitalize, <%= name %> untuk lowercase

Validation##

Lokio akan validate:

• ✅ Template name uniqueness
• ✅ Template file exists
• ✅ Output path format
• ✅ Parameters format
• ✅ YAML syntax

Jika ada error, akan ditampilkan pesan yang jelas.

Troubleshooting##

Template tidak muncul di list##

• Check apakah ada di configs.yaml
• Check YAML syntax
• Run lokio list untuk melihat error

Template file tidak ditemukan##

• Check path di configs.yaml benar
• Check file ada di lokio/templates/
• Path harus relatif ke lokio/templates/

Parameter tidak muncul saat generate##

• Check parameter ada di configs.yaml
• Check format parameter benar
• Check YAML syntax

Lihat Troubleshooting untuk lebih detail.