Animated Circular Progress Bar0
Font.Lokio
CLI

Template Syntax

Panduan lengkap syntax EJS yang bisa digunakan di template files

Template Syntax#

Panduan lengkap syntax EJS yang bisa digunakan di template files.

EJS Basics#

Template files menggunakan EJS (Embedded JavaScript) syntax.

Basic Syntax#

<%= variable %>          # Output variable (escaped)
<%- variable %>          # Output variable (unescaped)
<% code %>               # Execute JavaScript code
<%# comment %>           # Comment (not rendered)

Variables#

Basic Usage#

<%= name %>              # Output: "button"
<%= description %>       # Output: "A button component"

In Expressions#

<%= name + "Component" %>  # Output: "buttonComponent"
<%= name.toUpperCase() %>  # Output: "BUTTON"

Case Transformation#

Lokio menyediakan automatic case transformation berdasarkan huruf pertama variable name.

Automatic Detection#

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

Helper Functions#

<%= capitalize(name) %>      # Capitalize: "Button"
<%= camelCase(name) %>       # camelCase: "button" atau "myComponent"
<%= pascalCase(name) %>      # PascalCase: "Button" atau "MyComponent"
<%= lowercase(name) %>       # lowercase: "button"
<%= uppercase(name) %>       # UPPERCASE: "BUTTON"

Examples#

Input: name = "my button"

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

Control Flow#

Conditionals#

<% if (withProps) { %>
interface <%= Name %>Props {
  // Props here
}
<% } %>
<% if (type === "button") { %>
  <button><%= name %></button>
<% } else if (type === "link") { %>
  <a href="#"><%= name %></a>
<% } else { %>
  <div><%= name %></div>
<% } %>

Loops#

<% for (let i = 0; i < items.length; i++) { %>
  <div><%= items[i] %></div>
<% } %>
<% items.forEach(item => { %>
  <div><%= item %></div>
<% }); %>

Comments#

<%# This is a comment, not rendered %>
<%= name %> <%# Inline comment %>

Escaping#

HTML Escaping (Default)#

<%= userInput %>         # Escaped: &lt;script&gt; → &amp;lt;script&amp;gt;

Unescaped Output#

<%- htmlContent %>       # Not escaped: <div> → <div>

Warning: Hanya gunakan <%- %> jika yakin content aman!

Advanced Examples#

Component with Props#

<% 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 { %><%= Name %><% } %>
    </div>
  );
};

Hook with State#

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

Multiple Parameters#

export const <%= Name %> = () => {
  <% if (includeLogging) { %>
  console.log('<%= Name %> rendered');
  <% } %>
  
  return (
    <div>
      <h1><%= title %></h1>
      <% if (showDescription) { %>
      <p><%= description %></p>
      <% } %>
    </div>
  );
};

Output Path Syntax#

Output path juga menggunakan EJS syntax:

output: "src/components/<%= Name %>.tsx"
output: "src/hooks/use<%= name %>.ts"
output: "src/<%= type %>/<%= Name %>.tsx"

Examples#

Input: name = "button", type = "components"

output: "src/<%= type %>/<%= Name %>.tsx"
# Result: "src/components/Button.tsx"
output: "src/<%= type %>/<%= name %>/<%= name %>.tsx"
# Result: "src/components/button/button.tsx"

Tips & Tricks#

1. Default Values#

<%= name || "default" %>     # Use default if empty

2. String Manipulation#

<%= name.replace(/\s+/g, "") %>  # Remove spaces
<%= name.split(" ")[0] %>        # Get first word

3. Conditional Rendering#

<%# Only render if condition is true %>
<% if (condition) { %>
  // Content here
<% } %>

4. Nested Conditions#

<% if (type === "component") { %>
  <% if (withProps) { %>
    // Component with props
  <% } else { %>
    // Component without props
  <% } %>
<% } %>

5. Template Literals#

<%= `export const ${Name} = () => {}` %>

Common Patterns#

React Component#

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

TypeScript Hook#

export function use<%= Name %>() {
  // Hook logic here
  return {};
}

TypeScript Type#

export type <%= Name %> = {
  // Type definition
};

Error Handling#

Jika ada error di template syntax:

  • Check EJS syntax: <%= %>, <% %>, dll
  • Check variable names sesuai dengan parameters
  • Check closing tags untuk conditionals/loops
  • Check quotes untuk strings