v20.0.0

🚀 Hello v20.0.0 – The First Major Release is Here!

I'm excited to announce the release of v20.0.0, bringing enhanced Angular Signals support and improved code quality checks to your Angular projects! This major update focuses on making your development experience smoother and more maintainable.
This release aligns with Angular v20 to signal full compatibility and forward-thinking practices with the latest Angular version.

Ready to embrace the future of Angular? The path to Zoneless applications is now clearer than ever! Here's the simplest migration strategy:

• Make all component properties readonly
• Convert mutable properties to Signals
• Switch to OnPush change detection

I've created a set of lint rules to make this transition smooth and efficient. Let's make your Angular applications faster and more maintainable together!

✨ New Features

Enhanced Angular Signals Support

The signal-use-as-signal rule has been significantly improved to help you write better Signal-based code:

// ❌ Before (will be auto-fixed)
@Component()
export class UserComponent {
  readonly user = signal<User>({ ... });
  readonly users = signal<User[]>([]);
  
  updateUser(id: number, data: Partial<User>) {
    this.user().name = data.name;  // Direct mutation on signal value
  }
  
  addUser(user: User) {
    this.users().push(user);  // Direct array mutation
  }

  isExist() {
    if (this.user) {  // Direct signal access
      alert('Hello User!');
    }
  }
}

// ✅ After (auto-fixed)
@Component()
export class UserComponent {
  readonly user = signal<User>({ ... });
  readonly users = signal<User[]>([]);
  
  updateUser(id: number, data: Partial<User>) {
    this.user.update(user => ({ ...user, ...data }));
  }
  
  addUser(user: User) {
    this.users.update(users => { users.push(user); return users; });
  }

  isExist() {
    if (this.user()) {
      alert('Hello User!');
    }
  }
}

New signal-use-as-signal-template Rule

Enforce proper Signal usage in your templates with my new rule:

// ❌ Before (will show error)
@Component({
  template: `
    <div>{{ count }}</div>           <!-- Direct signal access -->
    <div>{{ user.name }}</div>       <!-- Nested property access -->
    @if (user) {  <!-- Direct signal access -->
       <div>Hello</div> 
    }
  `
})
export class UserComponent {
  readonly count = signal(0);
  readonly user = signal({ name: 'John' });
}

New component-property-use-readonly Rule

Enforce immutability in your component properties with my new rule:

// ❌ Before (will show error)
@Component()
export class UserComponent {
  #users: User[] = [];  // Missing readonly
  protected count = 0;  // Missing readonly
  public name = '';     // Missing readonly
}

// ✅ After (auto-fixed)
@Component()
export class UserComponent {
  readonly #users: User[] = [];
  protected readonly count = 0;
  public readonly name = '';
}

🛠️ Improvements

Enhanced implements-ionic-lifecycle Rule

• Automatically detects and fixes lifecycle interface implementations
• Removes unnecessary interfaces from empty classes
• Ensures only used lifecycle hooks are implemented

🔧 Requirements & Compatibility

• 🚀 Support for ESLint v9
• ⚡ Requires Node.js 20.0.0 or higher
• 📦 Requires TypeScript 5.8.0 or higher
• 🎯 Requires Angular 20.0.0 or higher

⚠️ Breaking Changes

• Removed import-inject-object rule as it's now redundant with the new ng generate @angular/core:inject command
• Removed autofix functionality from deny-constructor-di rule for better compatibility

🎯 Quick Start

1. Install the package:

npm install @rdlabo/eslint-plugin-rules@latest --save-dev

2. Add to your ESLint configuration:

{
  "rules": {
    "@rdlabo/rules/deny-constructor-di": "error",
    "@rdlabo/rules/deny-element": "error",
    "@rdlabo/rules/deny-import-from-ionic-module": "error",
    "@rdlabo/rules/deny-soft-private-modifier": "error",
    "@rdlabo/rules/implements-ionic-lifecycle": "error",
    "@rdlabo/rules/signal-use-as-signal": "error",
    "@rdlabo/rules/signal-use-as-signal-template": "error",
    "@rdlabo/rules/component-property-use-readonly": "error"
  }
}

📝 Notes

• Projects using Angular Signals will benefit from stricter code quality checks with the new rules
• When upgrading existing projects, you may need to review your Signal usage patterns
• All rules include auto-fix functionality where possible, making the upgrade process smoother

---

View changes since v0.6.0