Skip to content

v20.3.0

Choose a tag to compare

View all tags
@rdlabo rdlabo released this 15 Sep 13:58
· 84 commits to main since this release
v20.3.0
9629e75

✨ New Features

Added @rdlabo/rules/ionic-attr-type-check rule

This rule prevents TypeScript build errors by detecting when incorrect attribute types are used in Ionic component templates. It automatically identifies attribute types from Ionic component type definitions (@ionic/core/dist/types/components.d.ts) and enforces the use of correct attribute types and property bindings.

❌ Incorrect: Using incorrect attribute types

<!-- Boolean attributes with string values -->
<ion-item button="true"></ion-item>
<ion-list inset="true"></ion-list>
<ion-button disabled="false"></ion-button>

<!-- Number attributes with string values -->
<ion-progress-bar value="50"></ion-progress-bar>
<ion-range min="0" max="100"></ion-range>

<!-- String literal attributes with invalid values -->
<ion-item lines="true"></ion-item>
<ion-radio labelPlacement="center"></ion-radio>
<ion-button shape="invalid"></ion-button>

✅ Correct: Using proper attribute types and property bindings

<!-- Boolean attributes with property binding -->
<ion-item [button]="true"></ion-item>
<ion-list [inset]="true"></ion-list>
<ion-button [disabled]="false"></ion-button>

<!-- Number attributes with property binding -->
<ion-progress-bar [value]="50"></ion-progress-bar>
<ion-range [min]="0" [max]="100"></ion-range>

<!-- String literal attributes with valid values -->
<ion-item lines="full"></ion-item>
<ion-radio labelPlacement="start"></ion-radio>
<ion-button shape="round"></ion-button>

Features

  • Automatic Type Detection: Dynamically loads Ionic component type definitions to identify attribute types (boolean, number, string, string literal unions)
  • Comprehensive Coverage: Supports all Ionic components including ion-item, ion-list, ion-button, ion-checkbox, ion-toggle, ion-input, ion-modal, ion-card, and more
  • Multi-Type Support: Handles boolean, number, string, and string literal union types
  • String Literal Validation: Validates string literal union types (e.g., lines: 'full' | 'inset' | 'none')
  • Smart Value Conversion: Automatically converts various string representations to proper types
  • Auto-fix Support: Automatically fixes violations by converting incorrect attributes to property bindings
  • Template and Property Binding Support: Handles both template attributes and property bindings
  • Control Flow Support: Works with Angular's new control flow syntax (@if, @for, @defer)

Supported Attribute Types

The rule automatically detects and validates different attribute types for Ionic components:

Boolean Attributes

  • ion-item: button, disabled, detail
  • ion-list: inset, lines
  • ion-button: disabled, expand, fill, strong
  • ion-checkbox: checked, disabled, indeterminate
  • ion-toggle: checked, disabled
  • ion-input: disabled, readonly, required
  • ion-modal: animated, backdropDismiss, showBackdrop

Number Attributes

  • ion-progress-bar: value, buffer
  • ion-range: min, max, step
  • ion-slider: min, max, step

String Literal Union Attributes

  • ion-item: lines ('full' | 'inset' | 'none')
  • ion-radio: labelPlacement ('start' | 'end' | 'fixed' | 'stacked'), alignment ('start' | 'center')
  • ion-select: justify ('start' | 'end' | 'space-between')
  • ion-button: shape ('round'), mode ('ios' | 'md')
  • ion-fab-button: size ('small')
  • ion-item-options: side ('start' | 'end')

String Attributes

  • ion-card: target (HTML standard attributes)
  • ion-segment-button: value (flexible string/number types)

And many more...

v20.2.2...v20.3.0

Assets 2
Loading