Overview

This article covers advanced AgileBuilder template features to help you create more complex and flexible templates.

Advanced Variables

Variable Inheritance

Child templates can inherit variables from parent templates:

{
  "extends": "./base-template",
  "variables": [
    {
      "name": "projectName",
      "inherit": true
    },
    {
      "name": "customVariable",
      "type": "string"
    }
  ]
}

Computed Variables

Variables derived from other variables:

{
  "variables": [
    {
      "name": "projectName",
      "type": "string"
    },
    {
      "name": "outputDir",
      "type": "computed",
      "compute": "src/{{projectName}}"
    }
  ]
}

Variable Validation

{
  "name": "projectName",
  "type": "string",
  "required": true,
  "pattern": "^[a-z][a-z0-9-]*$",
  "patternMessage": "Project name must start with a letter and contain only lowercase letters, numbers, and hyphens"
}

Complex Conditional Rendering

Combining Multiple Conditions

{{#if useTypeScript}}
{{#if useEslint}}
{
  "typescript": "^5.0.0",
  "eslint": "^8.0.0"
}
{{/if}}
{{/if}}

if-else Conditions

{{#if_eq framework "react"}}
{
  "dependencies": {
    "react": "^18.0.0"
  }
}
{{else}}
{
  "dependencies": {
    "vue": "^3.0.0"
  }
}
{{/if_eq}}

Loops and Nesting

Nested Loops

{{#each modules}}
- {{name}}:
  {{#each files}}
  - {{this}}
  {{/each}}
{{/each}}

Loop Index

{{#each features}}
{{#if @first}}
First feature: {{this}}
{{/if}}
Index: {{@index}} - {{this}}
{{/each}}

Built-in Helpers

if_eq

{{#if_eq version "1.0.0"}}
Version is 1.0.0
{{/if_eq}}

unless_eq

{{#unless_eq environment "production"}}
Development-only configuration
{{/unless_eq}}

includes

{{#if (includes tags "experimental")}}
Experimental feature
{{/if}}

Advanced Hooks Usage

Async Hooks

module.exports = async (context) => {
  const { projectPath, variables } = context

  // Async operations
  await fs.writeFile(
    path.join(projectPath, 'generated.txt'),
    `Created at ${new Date()}`
  )
}

Hook Chains

{
  "hooks": {
    "post-generate": [
      "@agilebuilder/install-deps",
      "node hooks/setup-eslint.js",
      "node hooks/setup-prettier.js",
      "node hooks/init-git.js"
    ]
  }
}

Template Partials

Shared Partials

Create reusable template partials:

template/
├── _header.hbs      # Shared header
├── _footer.hbs      # Shared footer
├── component.hbs
│   {{> _header}}
│   <h1>{{title}}</h1>
│   {{> _footer}}

Using Partials

{{> header title="Hello"}}
<p>Content</p>
{{> footer}}

Template Advanced Features