Angular Component Management Scripts

🎯 Overview

These scripts provide automated solutions for managing Angular components in our monorepo. They handle component separation, barrel export management, and intelligent structure analysis.

📁 Available Scripts

1. angular-component-separator.js - Single Component Processing

Purpose: Separates a single Angular component with inline templates/styles into individual files.

Usage:

# Process a single component
node tools/scripts/angular-component-separator.js path/to/component.component.ts

# Example
node tools/scripts/angular-component-separator.js libs/scroll-trigger/src/lib/components/my-component.component.ts

What it does:

• Extracts inline template to .html file
• Extracts inline styles to .scss file
• Updates component to use templateUrl and styleUrls
• Creates component directory and moves files

2. angular-component-separator-batch.js - Batch Processing

Purpose: Processes multiple components in a directory at once.

Usage:

# Process all components in a directory
node tools/scripts/angular-component-separator-batch.js path/to/components/directory

# Example
node tools/scripts/angular-component-separator-batch.js libs/scroll-trigger/src/lib/components/

Features:

• Automatically finds components with inline templates/styles
• Processes multiple components in sequence
• Provides detailed progress reporting
• Continues processing even if individual components fail

3. update-barrel-exports.js - Barrel Export Management

Purpose: Updates barrel export files (index.ts) to reflect new component directory structure.

Usage:

# Update barrel exports after component separation
node tools/scripts/update-barrel-exports.js path/to/index.ts

# Example
node tools/scripts/update-barrel-exports.js libs/scroll-trigger/src/lib/components/index.ts

What it does:

• Scans component directories
• Updates export paths to match new structure
• Maintains proper import/export relationships

4. smart-barrel-manager.js 🧠 - Super Intelligent Barrel Management

Purpose: Advanced barrel export management with intelligent structure detection.

Usage:

# Advanced barrel management with nested indexes
node tools/scripts/smart-barrel-manager.js path/to/components/directory --create-nested

# Preview barrel changes
node tools/scripts/smart-barrel-manager.js path/to/components/directory --create-nested --dry-run

# Examples
node tools/scripts/smart-barrel-manager.js libs/scroll-trigger/src/lib/components/ --create-nested
node tools/scripts/smart-barrel-manager.js libs/ux-test-lib/src/lib/components/ --create-nested

Features:

• Automatically detects component structures (folders vs direct files)
• Creates nested index.ts files in component folders
• Handles mixed structures intelligently
• Creates missing directories and index files
• Maintains perfect export hierarchy

Options:

• --create-nested: Create index.ts files in component folders
• --update-parent: Update parent barrel files (default: true)
• --dry-run: Preview changes without applying them

5. universal-component-manager.js 🌟 - Ultimate Tool

Purpose: The most comprehensive Angular component management system.

Usage:

# Complete universal component management
node tools/scripts/universal-component-manager.js path/to/components/directory

# Only separate inline templates/styles
node tools/scripts/universal-component-manager.js path/to/components/directory --separate-only

# Only manage barrel exports
node tools/scripts/universal-component-manager.js path/to/components/directory --barrel-only

# Create nested index files
node tools/scripts/universal-component-manager.js path/to/components/directory --create-nested

# Preview changes
node tools/scripts/universal-component-manager.js path/to/components/directory --dry-run

# Examples
node tools/scripts/universal-component-manager.js libs/scroll-trigger/src/lib/components/
node tools/scripts/universal-component-manager.js libs/scroll-trigger/src/lib/components/ --create-nested --dry-run

Features:

• Combines all functionality into one intelligent tool
• Handles ANY component structure automatically
• Supports multiple export patterns and conventions
• Provides intelligent migration and refactoring
• Maintains perfect import/export relationships

Options:

• --full-refactor: Complete refactoring (separate + barrel management) [DEFAULT]
• --separate-only: Only separate inline templates/styles
• --barrel-only: Only manage barrel exports
• --create-nested: Create nested index.ts files
• --migrate-mixed: Migrate mixed structures to consistent format
• --dry-run: Preview changes without applying them

🔄 What the Scripts Do

Before (Inline Template & Styles)

@Component({
  selector: 'lib-my-component',
  standalone: true,
  template: `
    <h1>Hello World</h1>
    <p>This is a test component</p>
  `,
  styles: [`
    h1 {
      color: blue;
      font-size: 2rem;
    }
    p {
      color: gray;
    }
  `]
})
export class MyComponentComponent {
  // component logic
}

After (Separated Files)

// my-component.component.ts
@Component({
  selector: 'lib-my-component',
  standalone: true,
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponentComponent {
  // component logic
}

<!-- my-component.component.html -->
<h1>Hello World</h1>
<p>This is a test component</p>

/* my-component.component.scss */
h1 {
  color: blue;
  font-size: 2rem;
}

p {
  color: gray;
}

📂 Directory Structure Changes

Before

components/
├── my-component.component.ts
├── another-component.component.ts
└── index.ts

After

components/
├── my-component/
│   ├── my-component.component.ts
│   ├── my-component.component.html
│   └── my-component.component.scss
├── another-component/
│   ├── another-component.component.ts
│   ├── another-component.component.html
│   └── another-component.component.scss
└── index.ts

✅ Features Comparison

🎯 Key Features

• 🧠 Super Intelligence: Automatically detects and handles ANY component structure
• 📁 Perfect Organization: Creates nested directories and index files automatically
• 🔄 Structure Migration: Converts mixed structures to consistent formats
• 📦 Barrel Management: Maintains perfect export hierarchies
• 🛡️ Safe Processing: Comprehensive validation and error handling
• 🔍 Dry Run Mode: Preview changes before applying them
• 📊 Comprehensive Reporting: Detailed progress and error reporting

🛡️ Safety Features

• Validation: Checks for valid Angular component structure
• Backup: Creates temporary files during processing
• Error Recovery: Continues processing other files if one fails
• Dry Run: Preview changes without applying them

📋 Requirements

• Node.js (any recent version)
• Angular components with inline template and/or styles properties
• Components must use backtick template literals (`)

🐛 Troubleshooting

Common Issues

1. "No @Component decorator found"

   • Ensure the file is a valid Angular component
   • Check for proper component decorator syntax

2. "Could not extract component name"

   • Ensure the component class follows the naming convention: *Component
   • Check for proper export syntax

3. "File not found"

   • Verify the file path is correct
   • Ensure the file exists and is readable

4. "Cannot find module" errors after running scripts

   • Run the smart barrel manager to create missing index files
   • Check that all component directories have proper index.ts files

Debug Mode

Add debug logging by modifying the script:

// Add at the top of the script
const DEBUG = process.env.DEBUG === 'true';

// Use throughout the script
if (DEBUG) {
  console.log('Debug: Processing component:', componentInfo);
}

Then run with:

DEBUG=true node tools/scripts/angular-component-separator.js component.component.ts

📝 Post-Processing Steps

After running the scripts, remember to:

1. Update barrel exports: Modify index.ts files to reflect new component paths
2. Test components: Ensure all components still work correctly
3. Update imports: Check for any hardcoded import paths that need updating
4. Commit changes: Version control your refactored components

🚀 Quick Start Examples

Complete Component Refactoring

# Use the ultimate tool for complete refactoring
node tools/scripts/universal-component-manager.js libs/scroll-trigger/src/lib/components/

# Preview what will happen first
node tools/scripts/universal-component-manager.js libs/scroll-trigger/src/lib/components/ --dry-run

Fix Barrel Export Issues

# When you get "Cannot find module" errors
node tools/scripts/smart-barrel-manager.js libs/ux-test-lib/src/lib/components/ --create-nested

Process Single Component

# Quick single component processing
node tools/scripts/angular-component-separator.js libs/my-lib/src/lib/components/my-component.component.ts

🤝 Contributing

To improve these scripts:

1. Fork the repository
2. Create a feature branch
3. Make your improvements
4. Add tests if applicable
5. Submit a pull request

📄 License

These scripts are part of the project and follow the same license terms.