# IDE Snippets for MORPH Templates

> Boost your productivity with IDE snippets for Handlebars template syntax

---

## 📦 Installation

### VS Code

**Option 1: Project Snippets (Recommended)**

Snippets are already configured in `framework/templates/.vscode/morph-templates.code-snippets`.

To use them:
1. Open your project in VS Code
2. Snippets auto-activate when editing template files
3. Type a prefix (e.g., `morph-pascal`) and press `Tab`

**Option 2: Global Snippets**

To use snippets across all projects:
1. Open VS Code
2. Go to `File > Preferences > Configure User Snippets`
3. Select `New Global Snippets file...`
4. Name it `morph-templates.code-snippets`
5. Copy content from `framework/templates/.vscode/morph-templates.code-snippets`

---

### JetBrains IDEs (Rider, WebStorm, IntelliJ IDEA)

**Installation:**

1. Open your IDE
2. Go to `File > Settings > Editor > Live Templates`
3. Click the `⚙️` gear icon → `Import Settings...`
4. Select `framework/templates/.idea/morph-templates.xml`
5. Click `OK` to import

**Activation:**

Snippets will be available in the "MORPH Templates" group. Type the prefix and press `Tab`.

---

## 🎯 Available Snippets

### Handlebars Helpers (Case Transformations)

| Prefix | Output | Example Result |
|--------|--------|----------------|
| `morph-pascal` | `{{pascalCase FEATURE_NAME}}` | `UserAuthentication` |
| `morph-camel` | `{{camelCase FEATURE_NAME}}` | `userAuthentication` |
| `morph-snake` | `{{snakeCase FEATURE_NAME}}` | `user_authentication` |
| `morph-title` | `{{titleCase FEATURE_NAME}}` | `User Authentication` |
| `morph-kebab` | `{{kebabCase FEATURE_NAME}}` | `user-authentication` |
| `morph-upper-snake` | `{{upperSnakeCase FEATURE_NAME}}` | `USER_AUTHENTICATION` |

### Handlebars Control Flow

| Prefix | Description | Example |
|--------|-------------|---------|
| `morph-if` | If block | `{{#if condition}}...{{/if}}` |
| `morph-if-else` | If-else block | `{{#if condition}}...{{else}}...{{/if}}` |
| `morph-each` | Loop over array | `{{#each items}}{{this.name}}{{/each}}` |
| `morph-unless` | Unless block | `{{#unless condition}}...{{/unless}}` |

### .NET Templates

| Prefix | Template | File Extension |
|--------|----------|----------------|
| `morph-service` | Service class (business logic) | `.cs` |
| `morph-repository` | Repository class (data access) | `.cs` |
| `morph-migration` | EF Core migration | `.cs` |
| `morph-job` | Hangfire background job | `.cs` |

### TypeScript Templates

| Prefix | Template | File Extension |
|--------|----------|----------------|
| `morph-ts-contract` | TypeScript interfaces (DTOs) | `.ts` |

---

## 🚀 Usage Examples

### Example 1: Creating a Service Template

**Steps:**
1. Create new file: `UserService.cs`
2. Type `morph-service` → Press `Tab`
3. Result:
   ```csharp
   namespace {{NAMESPACE}}.Application.Features.{{pascalCase FEATURE_NAME}}.Services;

   public class {{pascalCase FEATURE_NAME}}Service(
       I{{pascalCase FEATURE_NAME}}Repository repository,
       ILogger<{{pascalCase FEATURE_NAME}}Service> logger) : I{{pascalCase FEATURE_NAME}}Service
   {
       public async Task<{{pascalCase FEATURE_NAME}}Dto?> GetByIdAsync(int id, CancellationToken cancellationToken = default)
       {
           // Cursor here
       }
   }
   ```

### Example 2: Using Case Helpers

**Scenario:** Convert `user-authentication` to different cases

```handlebars
// Type: morph-pascal → Tab
{{pascalCase FEATURE_NAME}}  // Output: UserAuthentication

// Type: morph-camel → Tab
{{camelCase FEATURE_NAME}}   // Output: userAuthentication

// Type: morph-snake → Tab
{{snakeCase FEATURE_NAME}}   // Output: user_authentication
```

### Example 3: Conditional Rendering

**Scenario:** Show different content based on stack

```handlebars
// Type: morph-if-else → Tab
{{#if (eq STACK "Nextjs")}}
  // Next.js-specific code
{{else}}
  // Generic code
{{/if}}
```

### Example 4: Looping Over Items

**Scenario:** Generate multiple DTOs

```handlebars
// Type: morph-each → Tab
{{#each entities}}
  public class {{pascalCase this.name}}Dto
  {
      // Properties
  }
{{/each}}
```

---

## 📝 Customizing Snippets

### VS Code

Edit `framework/templates/.vscode/morph-templates.code-snippets`:

```json
{
  "MORPH Template - Custom": {
    "prefix": "morph-custom",
    "body": [
      "// Your custom template",
      "$1"
    ],
    "description": "Your description"
  }
}
```

### JetBrains IDEs

1. Go to `File > Settings > Editor > Live Templates`
2. Select "MORPH Templates" group
3. Click `+` → `Live Template`
4. Set abbreviation (prefix), description, and template text

---

## 🎨 Snippet Scopes

| Snippet | VS Code Scope | JetBrains Scope |
|---------|---------------|-----------------|
| Handlebars helpers | All files | All files |
| .NET templates | `.cs`, `.razor` | C#, HTML |
| TypeScript templates | `.ts`, `.tsx` | TypeScript |

---

## 💡 Best Practices

**1. Use Helpers Over Pre-computed Variables**

```handlebars
✅ GOOD: {{pascalCase FEATURE_NAME}}Service
❌ BAD: {{FEATURE_NAME_PASCAL}}Service  // Deprecated
```

**2. Chain Helpers for Complex Transformations**

```handlebars
// Pluralize a PascalCase name
{{pascalCase (pluralize FEATURE_NAME)}}  // Users, Orders, etc.
```

**3. Use Conditional Blocks for Stack-Specific Code**

```handlebars
{{#if (eq STACK "Nextjs")}}
  import { useRouter } from 'next/navigation';
{{/if}}
```

**4. Extract Common Patterns to Snippets**

If you find yourself typing the same template code repeatedly, create a custom snippet!

---

## 🔧 Troubleshooting

### Snippets Not Showing Up (VS Code)

**Solution:**
1. Check file extension matches snippet scope (e.g., `.cs` for C# snippets)
2. Reload VS Code: `Ctrl+Shift+P` → `Developer: Reload Window`
3. Verify snippet file location: `framework/templates/.vscode/morph-templates.code-snippets`

### Snippets Not Showing Up (JetBrains)

**Solution:**
1. Verify import: `File > Settings > Editor > Live Templates` → Check "MORPH Templates" group exists
2. Check snippet scope: Click snippet → Verify "Applicable in" contexts
3. Restart IDE

### Tab Not Expanding Snippet

**Solution:**
- **VS Code:** Ensure `editor.tabCompletion` is enabled in settings
- **JetBrains:** Ensure `Tab` is set as expansion key in `Settings > Editor > Live Templates`

---

## 📚 Related Documentation

- [Template System README](framework/templates/README.md) - Complete template system documentation
- [Handlebars Helpers](framework/templates/README.md#handlebars-helpers) - Full list of available helpers
- [CLI Template Commands](CLAUDE.md#templates) - Command-line template management

---

## 🎁 Contributing Custom Snippets

Have a useful snippet? Share it!

1. Add snippet to appropriate file (`.vscode/` or `.idea/`)
2. Document it in this README (add row to tables)
3. Submit PR with description of use case

---

*MORPH-SPEC Template Snippets by Polymorphism Tech*