refactor(elements): drop bool transform on inputs with built-in ones

Author: damyanpetev

projects/igniteui-angular-elements/src/analyzer/component.ts

@@ -1,6 +1,6 @@
 import * as ts from 'typescript';
 import type { ComponentMetadata, ContentQuery } from './types';
-import { asString, first, getDecoratorName, getDecorators, getProvidedAs, getSelector, getTypeExpressionIdentifier, isMethod, isOverride, isProperty, isPublic, isReadOnly } from './utils';
+import { asString, first, getDecoratorName, getDecorators, getProvidedAs, getSelector, getTypeExpressionIdentifier, hasDecoratorTransformValue, isMethod, isOverride, isProperty, isPublic, isReadOnly } from './utils';
 
 
 const isInput = (dec: ts.Decorator) => getDecoratorName(dec).includes('Input');
@@ -116,11 +116,16 @@ export class AnalyzerComponent {
     }
 
     /**
-     * Return all boolean `@Input` properties of the underlying component.
+     * Return boolean `@Input` properties of the underlying component that require transform.
      */
     private get booleanProperties() {
-        return this.inputProperties
-            .filter(prop => this.checker.getTypeAtLocation(prop.valueDeclaration!).getFlags() & ts.TypeFlags.Boolean);
+        const res = this.inputProperties
+            .filter(prop => this.checker.getTypeAtLocation(prop.valueDeclaration!).getFlags() & ts.TypeFlags.Boolean)
+            .filter(prop => {
+                const dec = getDecorators(first(prop.declarations as any)).find(isInput);
+                return !hasDecoratorTransformValue(dec,'booleanAttribute');
+            });
+        return res;
     }
 
     /**

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -54,7 +54,6 @@ export var registerConfig = [
     ],
     additionalProperties: [],
     methods: ["show", "hide"],
-    boolProps: ["hidden"],
     provideAs: IgxActionStripToken,
   },
   {
@@ -94,25 +93,6 @@ export var registerConfig = [
       "filterCellTemplate",
     ],
     numericProps: ["rowEnd", "colEnd", "rowStart", "colStart"],
-    boolProps: [
-      "merge",
-      "sortable",
-      "selectable",
-      "groupable",
-      "editable",
-      "filterable",
-      "resizable",
-      "autosizeHeader",
-      "hasSummary",
-      "hidden",
-      "disableHiding",
-      "disablePinning",
-      "filteringIgnoreCase",
-      "sortingIgnoreCase",
-      "searchable",
-      "pinned",
-      "visibleWhenCollapsed",
-    ],
   },
   {
     component: IgxColumnGroupComponent,
@@ -154,26 +134,6 @@ export var registerConfig = [
       "filterCellTemplate",
     ],
     numericProps: ["rowEnd", "colEnd", "rowStart", "colStart"],
-    boolProps: [
-      "collapsible",
-      "expanded",
-      "searchable",
-      "hidden",
-      "merge",
-      "sortable",
-      "groupable",
-      "editable",
-      "filterable",
-      "resizable",
-      "autosizeHeader",
-      "hasSummary",
-      "disableHiding",
-      "disablePinning",
-      "filteringIgnoreCase",
-      "sortingIgnoreCase",
-      "pinned",
-      "visibleWhenCollapsed",
-    ],
     provideAs: IgxColumnComponent,
   },
   {
@@ -210,26 +170,6 @@ export var registerConfig = [
       "filterCellTemplate",
     ],
     numericProps: ["rowEnd", "colEnd", "rowStart", "colStart"],
-    boolProps: [
-      "hidden",
-      "collapsible",
-      "expanded",
-      "searchable",
-      "merge",
-      "sortable",
-      "groupable",
-      "editable",
-      "filterable",
-      "resizable",
-      "autosizeHeader",
-      "hasSummary",
-      "disableHiding",
-      "disablePinning",
-      "filteringIgnoreCase",
-      "sortingIgnoreCase",
-      "pinned",
-      "visibleWhenCollapsed",
-    ],
     provideAs: IgxColumnComponent,
   },
   {
@@ -387,22 +327,6 @@ export var registerConfig = [
       "rowHeight",
       "totalRecords",
     ],
-    boolProps: [
-      "groupsExpanded",
-      "hideGroupedColumns",
-      "showGroupArea",
-      "autoGenerate",
-      "moving",
-      "hideRowSelectors",
-      "rowDraggable",
-      "rowEditable",
-      "isLoading",
-      "allowFiltering",
-      "allowAdvancedFiltering",
-      "showSummaryOnCollapse",
-      "batchEditing",
-      "selectRowOnClick",
-    ],
   },
   {
     component: IgxGridEditingActionsComponent,
@@ -411,7 +335,6 @@ export var registerConfig = [
     contentQueries: [],
     additionalProperties: [{ name: "hasChildren" }],
     methods: ["startEdit"],
-    boolProps: ["addRow", "editRow", "deleteRow", "addChild", "asMenuItems"],
     provideAs: IgxGridActionsBaseDirective,
   },
   {
@@ -421,7 +344,6 @@ export var registerConfig = [
     contentQueries: [],
     additionalProperties: [],
     methods: ["pin", "unpin", "scrollToRow"],
-    boolProps: ["asMenuItems"],
     provideAs: IgxGridActionsBaseDirective,
   },
   {
@@ -472,7 +394,6 @@ export var registerConfig = [
     ],
     additionalProperties: [{ name: "nativeElement" }],
     methods: [],
-    boolProps: ["showProgress"],
     provideAs: IgxToolbarToken,
   },
   {
@@ -482,7 +403,6 @@ export var registerConfig = [
     contentQueries: [],
     additionalProperties: [],
     methods: ["export"],
-    boolProps: ["exportCSV", "exportExcel"],
   },
   {
     component: IgxGridToolbarHidingComponent,
@@ -492,7 +412,6 @@ export var registerConfig = [
     additionalProperties: [],
     methods: ["checkAll", "uncheckAll"],
     numericProps: ["indentetion"],
-    boolProps: ["hideFilter"],
   },
   {
     component: IgxGridToolbarPinningComponent,
@@ -502,7 +421,6 @@ export var registerConfig = [
     additionalProperties: [],
     methods: ["checkAll", "uncheckAll"],
     numericProps: ["indentetion"],
-    boolProps: ["hideFilter"],
   },
   {
     component: IgxGridToolbarTitleComponent,
@@ -673,20 +591,6 @@ export var registerConfig = [
       "rowHeight",
       "totalRecords",
     ],
-    boolProps: [
-      "expandChildren",
-      "showExpandAll",
-      "autoGenerate",
-      "moving",
-      "hideRowSelectors",
-      "rowDraggable",
-      "rowEditable",
-      "isLoading",
-      "allowFiltering",
-      "allowAdvancedFiltering",
-      "showSummaryOnCollapse",
-      "selectRowOnClick",
-    ],
   },
   {
     component: IgxPaginatorComponent,
@@ -715,12 +619,6 @@ export var registerConfig = [
     contentQueries: [],
     additionalProperties: [{ name: "animationSettings", writable: true }],
     methods: [],
-    boolProps: [
-      "columnsExpanded",
-      "rowsExpanded",
-      "filtersExpanded",
-      "valuesExpanded",
-    ],
   },
   {
     component: IgxPivotGridComponent,
@@ -830,13 +728,6 @@ export var registerConfig = [
       "rowSelectorTemplate",
     ],
     numericProps: ["rowHeight"],
-    boolProps: [
-      "autoGenerateConfig",
-      "superCompactMode",
-      "defaultExpandState",
-      "isLoading",
-      "selectRowOnClick",
-    ],
   },
   {
     component: IgxRowIslandComponent,
@@ -975,20 +866,6 @@ export var registerConfig = [
       "rowHeight",
       "totalRecords",
     ],
-    boolProps: [
-      "expandChildren",
-      "showExpandAll",
-      "autoGenerate",
-      "moving",
-      "hideRowSelectors",
-      "rowDraggable",
-      "rowEditable",
-      "isLoading",
-      "allowFiltering",
-      "allowAdvancedFiltering",
-      "showSummaryOnCollapse",
-      "selectRowOnClick",
-    ],
   },
   {
     component: IgxTreeGridComponent,
@@ -1137,19 +1014,5 @@ export var registerConfig = [
       "rowHeight",
       "totalRecords",
     ],
-    boolProps: [
-      "cascadeOnDelete",
-      "autoGenerate",
-      "moving",
-      "hideRowSelectors",
-      "rowDraggable",
-      "rowEditable",
-      "isLoading",
-      "allowFiltering",
-      "allowAdvancedFiltering",
-      "showSummaryOnCollapse",
-      "batchEditing",
-      "selectRowOnClick",
-    ],
   },
 ];

projects/igniteui-angular-elements/src/analyzer/utils.ts

@@ -99,13 +99,17 @@ export function asString(x?: ts.Symbol) {
 /** Get the properties of the `@Component({ ...properties })` decorator object param */
 function getDecoratorProps(component: ts.ClassDeclaration): ts.NodeArray<ts.ObjectLiteralElementLike> | null {
     const expression = getDecorators(component)?.find(x => getDecoratorName(x) === 'Component')?.expression;
+    return getCallExpressionProps(expression);
+}
 
+/** Get the properties of the `func({ ...properties })` call expression object param */
+function getCallExpressionProps(expression?: ts.Expression): ts.NodeArray<ts.ObjectLiteralElementLike> | null {
     if (!expression || !ts.isCallExpression(expression))
         return null;
 
     const args = [...expression.arguments];
 
-    if (!ts.isObjectLiteralExpression(args[0]))
+    if (!args[0] || !ts.isObjectLiteralExpression(args[0]))
         return null;
 
     const literal = args[0];
@@ -143,7 +147,6 @@ export function getProvidedAs(component: ts.ClassDeclaration, type: ts.Interface
     }
 
     return null;
-
 }
 
 /**
@@ -200,6 +203,22 @@ export function isUseExistingType(obj: ts.ObjectLiteralExpression, type: ts.Inte
     return initializer ? initializer.getText() === type.symbol.escapedName : false;
 }
 
+/**
+ * Checks if a provided decorator's prams object transform property has the required value set
+ * 
+ * @example
+ * ```ts
+ * Input({ transform: booleanAttribute })
+ * ```
+ * 
+ * @param decorator The decorator node
+ * @param transform The transform value to check for
+ */
+export function hasDecoratorTransformValue(decorator: ts.Decorator | undefined, transform: string): boolean {
+    const props = getCallExpressionProps(decorator?.expression);
+    return !!props?.some(p => ts.isPropertyAssignment(p) && p.name.getText() === 'transform' && p.initializer.getText() === transform);
+}
+
 /**
  * Checks if given import declaration contains a given type (by name for now)
  * @param importDecl the import declaration to check