chore(schematics): valid migration for anchor

taiga-family · Jan 9, 2025 · a96af30 · a96af30
1 parent 3d7263b
commit a96af30
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 2 deletions.
diff --git a/projects/cdk/schematics/ng-update/interfaces/replacement-attribute-value.ts b/projects/cdk/schematics/ng-update/interfaces/replacement-attribute-value.ts
@@ -1,8 +1,10 @@
 import type {Element} from 'parse5/dist/tree-adapters/default';
 
 export interface ReplacementAttributeValue {
+    readonly dropAttr?: boolean;
+    readonly comment?: string;
     readonly attrNames: string[];
-    readonly newAttrName?: string;
+    readonly newAttrName?: string | null;
     readonly valueReplacer:
         | Array<{
               readonly from: string;

diff --git a/projects/cdk/schematics/ng-update/utils/templates/replace-attr-values.ts b/projects/cdk/schematics/ng-update/utils/templates/replace-attr-values.ts
@@ -33,6 +33,8 @@ export function replaceAttrValues({
             filterFn,
             newAttrName,
             directiveModule,
+            dropAttr,
+            comment,
         }) => {
             const elements = [
                 ...findElementsWithAttributeOnTag(
@@ -60,6 +62,8 @@ export function replaceAttrValues({
                     valueReplacer.forEach(({from, to}) => {
                         if (value === from) {
                             replaceValue({
+                                dropAttr,
+                                comment,
                                 element,
                                 recorder,
                                 templateOffset,
@@ -71,6 +75,8 @@ export function replaceAttrValues({
                     });
                 } else {
                     replaceValue({
+                        dropAttr,
+                        comment,
                         element,
                         recorder,
                         templateOffset,
@@ -93,13 +99,17 @@ export function replaceAttrValues({
 }
 
 function replaceValue({
+    dropAttr,
+    comment,
     element,
     recorder,
     templateOffset,
     attrName,
     attrNewName,
     attrValue,
 }: {
+    dropAttr?: boolean;
+    comment?: string;
     element: Element;
     recorder: UpdateRecorder;
     templateOffset: number;
@@ -113,5 +123,18 @@ function replaceValue({
     };
 
     recorder.remove(templateOffset + startOffset, endOffset - startOffset);
-    recorder.insertRight(templateOffset + startOffset, `${attrNewName}="${attrValue}"`);
+
+    if (!dropAttr) {
+        recorder.insertRight(
+            templateOffset + startOffset,
+            attrValue ? `${attrNewName}="${attrValue}"` : attrNewName,
+        );
+    }
+
+    if (comment) {
+        recorder.insertRight(
+            templateOffset + (element.sourceCodeLocation?.startTag?.startOffset ?? 0),
+            `<!-- ${comment} -->\n`,
+        );
+    }
 }
diff --git a/projects/cdk/schematics/ng-update/v4/steps/constants/attr-with-values-to-replace.ts b/projects/cdk/schematics/ng-update/v4/steps/constants/attr-with-values-to-replace.ts
@@ -65,4 +65,25 @@ export const ATTR_WITH_VALUES_TO_REPLACE: ReplacementAttributeValue[] = [
         withTagNames: ['tui-data-list-wrapper'],
         valueReplacer: [{from: 'xs', to: 's'}],
     },
+    {
+        dropAttr: true,
+        attrNames: ['href', '[href]'],
+        withTagNames: ['a'],
+        filterFn: (el) =>
+            (hasElementAttribute(el, 'tuiButton') ||
+                hasElementAttribute(el, 'tuiIconButton')) &&
+            hasElementAttribute(el, 'disabled'),
+        valueReplacer: () => '',
+    },
+    {
+        dropAttr: true,
+        comment:
+            'TODO: (Taiga UI migration): A link cannot have a "disabled" attribute. If you want a disabled appearance, use the tuiAppearanceState directive. See https://taiga-ui.dev/directives/appearance/API?tuiAppearanceState=disabled',
+        attrNames: ['disabled', '[disabled]'],
+        withTagNames: ['a'],
+        filterFn: (el) =>
+            hasElementAttribute(el, 'tuiButton') ||
+            hasElementAttribute(el, 'tuiIconButton'),
+        valueReplacer: () => '',
+    },
 ];
diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-button.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-button.spec.ts
@@ -77,6 +77,20 @@ const TEMPLATE_BEFORE = `
     [showLoader]="true"
     href="https://taiga-ui.dev"
 ></a>
+
+<button
+    tuiIconButton
+    type="button"
+    [icon]="icon"
+    [disabled]="true"
+></button>
+
+<a
+    tuiIconButton
+    [icon]="icon"
+    [disabled]="true"
+    href="https://taiga-ui.dev"
+></a>
 `;
 
 const TEMPLATE_AFTER = `
@@ -115,6 +129,21 @@ const TEMPLATE_AFTER = `
     [loading]="true"
     href="https://taiga-ui.dev"
 ></a>
+
+<button
+    tuiIconButton
+    type="button"
+    [iconStart]="icon"
+    [disabled]="true"
+></button>
+
+<!-- TODO: (Taiga UI migration): A link cannot have a "disabled" attribute. If you want a disabled appearance, use the tuiAppearanceState directive. See https://taiga-ui.dev/directives/appearance/API?tuiAppearanceState=disabled -->
+<a
+    tuiIconButton
+    [iconStart]="icon"
+    ${''}
+    ${''}
+></a>
 `;
 
 const INLINE_TEMPLATE_COMPONENT_BEFORE = `