Animated Circular Progress Bar0
Font.Lokio
CLI

Examples

Contoh-contoh penggunaan Lokio CLI dari basic sampai advanced

Examples#

Contoh-contoh penggunaan Lokio CLI dari basic sampai advanced.

Basic Examples#

Example 1: Simple React Component#

Template Config:

- name: "component"
  description: "Simple React component"
  path: "component.lokio"
  output: "src/components/<%= Name %>.tsx"
  parameters:
    - name: "name"
      type: "string"
      required: true
      prompt: "Component name"

Template File (component.lokio):

import React from 'react';
 
export const <%= Name %> = () => {
  return (
    <div>
      <h1><%= Name %></h1>
    </div>
  );
};

Usage:

$ lokio generate
◆  Choose template: component
◆  Component name: Button
✓  Generated: src/components/Button.tsx

Result:

import React from 'react';
 
export const Button = () => {
  return (
    <div>
      <h1>Button</h1>
    </div>
  );
};

Example 2: Component with Props#

Template Config:

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

Template File (component-props.lokio):

import React from 'react';
 
<% if (withProps) { %>
interface <%= Name %>Props {
  className?: string;
  children?: React.ReactNode;
}
<% } %>
 
export const <%= Name %>: React.FC<% if (withProps) { %><<%= Name %>Props><% } %> = (<% if (withProps) { %>props<% } %>) => {
  return (
    <div<% if (withProps) { %> className={props.className}<% } %>>
      <% if (withProps) { %>
        {props.children}
      <% } else { %>
        <h1><%= Name %></h1>
      <% } %>
    </div>
  );
};

Usage:

$ lokio generate
◆  Choose template: component-with-props
◆  Component name: Card
◆  Include props interface? (Y/n): y
✓  Generated: src/components/Card.tsx

Result:

import React from 'react';
 
interface CardProps {
  className?: string;
  children?: React.ReactNode;
}
 
export const Card: React.FC<CardProps> = (props) => {
  return (
    <div className={props.className}>
      {props.children}
    </div>
  );
};

Example 3: React Hook#

Template Config:

- name: "hook"
  description: "React hook template"
  path: "hook.lokio"
  output: "src/hooks/use<%= Name %>.ts"
  parameters:
    - name: "name"
      type: "string"
      required: true
      prompt: "Hook name (without 'use' prefix)"
    - name: "withState"
      type: "boolean"
      required: false
      prompt: "Include useState?"
      default: true

Template File (hook.lokio):

<% if (withState) { %>
import { useState } from 'react';
<% } %>
 
export function use<%= Name %>() {
  <% if (withState) { %>
  const [state, setState] = useState<number>(0);
  <% } %>
  
  return {
    <% if (withState) { %>
    state,
    setState,
    <% } %>
  };
}

Usage:

$ lokio generate
◆  Choose template: hook
◆  Hook name (without 'use' prefix): Counter
◆  Include useState? (Y/n): y
✓  Generated: src/hooks/useCounter.ts

Result:

import { useState } from 'react';
 
export function useCounter() {
  const [state, setState] = useState<number>(0);
  
  return {
    state,
    setState,
  };
}

Advanced Examples#

Example 4: Component with Multiple Parameters#

Template Config:

- name: "advanced-component"
  description: "Advanced React component"
  path: "advanced-component.lokio"
  output: "src/components/<%= pascalCase(name) %>.tsx"
  parameters:
    - name: "name"
      type: "string"
      required: true
      prompt: "Component name"
    - name: "withProps"
      type: "boolean"
      required: false
      prompt: "Include props?"
      default: true
    - name: "withState"
      type: "boolean"
      required: false
      prompt: "Include state?"
      default: false
    - name: "description"
      type: "string"
      required: false
      prompt: "Component description"

Template File (advanced-component.lokio):

import React<% if (withState) { %>, { useState }<% } %> from 'react';
 
<% if (description) { %>
/**
 * <%= description %>
 */
<% } %>
<% if (withProps) { %>
interface <%= pascalCase(name) %>Props {
  // Add props here
}
<% } %>
 
export const <%= pascalCase(name) %>: React.FC<% if (withProps) { %><<%= pascalCase(name) %>Props><% } %> = (<% if (withProps) { %>props<% } %>) => {
  <% if (withState) { %>
  const [state, setState] = useState(0);
  <% } %>
  
  return (
    <div>
      <h1><%= pascalCase(name) %></h1>
      <% if (withState) { %>
      <p>State: {state}</p>
      <% } %>
    </div>
  );
};

Example 5: TypeScript Type#

Template Config:

- name: "type"
  description: "TypeScript type definition"
  path: "type.lokio"
  output: "src/types/<%= name %>.ts"
  parameters:
    - name: "name"
      type: "string"
      required: true
      prompt: "Type name"

Template File (type.lokio):

export type <%= pascalCase(name) %> = {
  id: string;
  name: string;
  // Add more properties
};

Example 6: Utility Function#

Template Config:

- name: "utility"
  description: "Utility function"
  path: "utility.lokio"
  output: "src/utils/<%= name %>.ts"
  parameters:
    - name: "name"
      type: "string"
      required: true
      prompt: "Function name"
    - name: "returnType"
      type: "string"
      required: false
      prompt: "Return type"
      default: "void"

Template File (utility.lokio):

export function <%= camelCase(name) %>(): <%= returnType || "void" %> {
  // Implementation
}

Real-World Workflows#

Workflow 1: Create Multiple Components#

# 1. Initialize
lokio init
 
# 2. Add component template
lokio template add
# Name: component
# Output: src/components/<%= Name %>.tsx
 
# 3. Generate multiple components
lokio generate  # Button
lokio generate  # Input
lokio generate  # Card

Workflow 2: Custom Hook Library#

# 1. Add hook template
lokio template add
# Name: hook
# Output: src/hooks/use<%= Name %>.ts
 
# 2. Edit template file untuk custom logic
# Edit lokio/templates/hook.lokio
 
# 3. Generate hooks
lokio generate  # useCounter
lokio generate  # useToggle
lokio generate  # useFetch

Workflow 3: Add Parameters Later#

# 1. Generate dengan template basic
lokio generate
 
# 2. Edit configs.yaml, tambah parameter
# Edit lokio/configs.yaml
 
# 3. Generate lagi, parameter baru otomatis muncul
lokio generate

Tips & Tricks#

1. Reusable Templates#

Buat template yang flexible dengan banyak optional parameters:

parameters:
  - name: "name"
    type: "string"
    required: true
  - name: "withProps"
    type: "boolean"
    required: false
    default: false
  - name: "withState"
    type: "boolean"
    required: false
    default: false

2. Template Variants#

Buat beberapa template untuk use cases berbeda:

  • component-basic.lokio - Simple component
  • component-with-props.lokio - Component with props
  • component-with-state.lokio - Component with state

3. Organized Output#

Gunakan dynamic output paths:

output: "src/<%= type %>/<%= Name %>.tsx"
# type = "components" → src/components/Button.tsx
# type = "pages" → src/pages/Home.tsx

4. Template Comments#

Tambahkan comments di template untuk dokumentasi:

<%# 
  Template: Component
  Usage: lokio generate -> component
  Parameters: name (required), withProps (optional)
%>

Common Patterns#

Pattern 1: Conditional Imports#

<% if (withState) { %>
import { useState } from 'react';
<% } %>
<% if (withEffect) { %>
import { useEffect } from 'react';
<% } %>

Pattern 2: Conditional Types#

<% if (withProps) { %>
interface <%= Name %>Props {
  // Props
}
<% } %>
 
export const <%= Name %>: React.FC<% if (withProps) { %><<%= Name %>Props><% } %> = () => {
  // Component
};

Pattern 3: Dynamic File Names#

output: "src/<%= type %>/<%= pascalCase(name) %>.tsx"

Pattern 4: Multiple Case Usage#

// Component name: "my button"
export const <%= pascalCase(name) %> = () => {  // "MyButton"
  const className = "<%= lowercase(name) %>-container";  // "my button-container"
  return <div className={className}><%= capitalize(name) %></div>;  // "My button"
};

Lihat Troubleshooting jika ada masalah.