@wise/wds-codemods 0.0.1-experimental-2eb5228 → 0.0.1-experimental-0d8d466

package/src/__tests__/runCodemod.test.ts

@@ -1,18 +1,17 @@
-import fs from 'node:fs/promises';
-
 import { execSync } from 'child_process';
 import path from 'path';
+import { fileURLToPath } from 'url';
 
 import { runCodemod } from '../runCodemod';
 import * as utils from '../utils';
-import { findClosestGitignore, hasPackageVersionFromPath } from '../utils/hasPackageVersion';
 
-// Mock dynamic import - only define once
-const mockImport = jest.fn();
 Object.defineProperty(globalThis, 'import', {
-  value: mockImport,
+  value: {
+    meta: {
+      url: 'file:///current/file/path.js',
+    },
+  },
   writable: true,
-  configurable: true,
 });
 
 jest.mock('node:fs/promises');
@@ -20,14 +19,10 @@ jest.mock('child_process', () => ({
   execSync: jest.fn(),
 }));
 
-jest.mock('../utils/hasPackageVersion', () => ({
-  hasPackageVersionFromPath: jest.fn(),
-  findClosestGitignore: jest.fn(() => null), // Return null to simulate no gitignore found
-}));
-
 jest.mock('path', () => ({
   resolve: jest.fn((...args: string[]) => args.join('/')),
   dirname: jest.fn((filePath: string) => {
+    // Simple implementation that mimics path.dirname
     const lastSlashIndex = filePath.lastIndexOf('/');
     return lastSlashIndex !== -1 ? filePath.substring(0, lastSlashIndex) : '.';
   }),
@@ -44,14 +39,6 @@ describe('runCodemod', () => {
   const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
   const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
-  beforeEach(() => {
-    jest.clearAllMocks();
-    (fs.access as jest.Mock).mockRejectedValue(new Error('File not found'));
-    (fs.readFile as jest.Mock).mockRejectedValue(new Error('File not found'));
-    mockImport.mockResolvedValue({});
-    (hasPackageVersionFromPath as jest.Mock).mockReturnValue(true);
-  });
-
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -68,9 +55,6 @@ describe('runCodemod', () => {
       targetPath: 'src/',
       dry: true,
       print: false,
-      gitignore: true,
-      ignorePattern: undefined,
-      isMonorepo: false,
     });
 
     await runCodemod(mockTransformsDir);
@@ -78,12 +62,12 @@ describe('runCodemod', () => {
     expect(utils.loadTransformModules).toHaveBeenCalledWith(mockTransformsDir);
     expect(utils.getOptions).toHaveBeenCalledWith(['transformA', 'transformB']);
     expect(execSync).toHaveBeenCalledWith(
-      'npx jscodeshift -t /mock/dist/transforms/transformA.js src/ --extensions=tsx,ts,jsx,js --ignore-pattern=**/node_modules/** --ignore-pattern=**/dist/** --ignore-pattern=**/*.d.ts --dry',
+      'npx jscodeshift -t /mock/dist/transforms/transformA.js src/ --dry',
       { stdio: 'inherit' },
     );
   });
 
-  it('should log error if no transform scripts found', async () => {
+  it('should throw error if no transform scripts found', async () => {
     (path.resolve as jest.Mock).mockReturnValue('/mock/dist/transforms');
     (utils.loadTransformModules as jest.Mock).mockResolvedValue({
       transformFiles: [],
@@ -91,10 +75,6 @@ describe('runCodemod', () => {
 
     await runCodemod('/mock/dist/transforms');
 
-    expect(consoleErrorSpy).toHaveBeenCalledWith(
-      'Error running codemod:',
-      'No transform scripts found in directory: /mock/dist/transforms',
-    );
     expect(execSync).not.toHaveBeenCalled();
   });
 
@@ -103,36 +83,14 @@ describe('runCodemod', () => {
 
     (utils.loadTransformModules as jest.Mock).mockRejectedValue(testError);
 
-    await runCodemod('/mock/dist/transforms');
-
-    expect(consoleErrorSpy).toHaveBeenCalledWith('Error running codemod:', testError.message);
-  });
+    const mockExit = jest.spyOn(process, 'exit').mockImplementation(((code?: number) => {
+      throw new Error(`Process exited with code ${code}`);
+    }) as never);
 
-  // Add a test for when gitignore is found
-  it('should include gitignore flag when gitignore file is found', async () => {
-    const mockTransformsDir = '/mock/dist/transforms';
-    const mockGitignorePath = '/path/to/.gitignore';
-
-    (findClosestGitignore as jest.Mock).mockReturnValueOnce(mockGitignorePath);
-    (path.resolve as jest.Mock).mockImplementation((...args: string[]) => args.join('/'));
-    (utils.loadTransformModules as jest.Mock).mockResolvedValue({
-      transformFiles: [Promise.resolve('transformA'), Promise.resolve('transformB')],
-    });
-    (utils.getOptions as jest.Mock).mockResolvedValue({
-      transformFile: 'transformA',
-      targetPath: 'src/',
-      dry: true,
-      print: false,
-      gitignore: true,
-      ignorePattern: undefined,
-      isMonorepo: false,
-    });
+    await runCodemod('/mock/dist/transforms').catch(() => {});
 
-    await runCodemod(mockTransformsDir);
+    expect(consoleErrorSpy).toHaveBeenCalledWith('Error running codemod:', testError.message);
 
-    expect(execSync).toHaveBeenCalledWith(
-      `npx jscodeshift -t /mock/dist/transforms/transformA.js src/ --extensions=tsx,ts,jsx,js --ignore-pattern=**/node_modules/** --ignore-pattern=**/dist/** --ignore-pattern=**/*.d.ts --dry --ignore-config=${mockGitignorePath}`,
-      { stdio: 'inherit' },
-    );
+    mockExit.mockRestore();
   });
 });

package/src/runCodemod.ts

@@ -7,26 +7,10 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 
 import { getOptions, handleError, loadTransformModules } from './utils';
-import { findClosestGitignore, hasPackageVersionFromPath } from './utils/hasPackageVersion';
 
 const currentFilePath = fileURLToPath(import.meta.url);
 const currentDirPath = path.dirname(currentFilePath);
 
-// Function to get package requirements from a transform
-async function getPackageRequirements(
-  transformPath: string,
-): Promise<{ name: string; version: string }[]> {
-  try {
-    const transformModule = (await import(transformPath)) as {
-      packageRequirements?: { name: string; version: string }[];
-    };
-    return transformModule.packageRequirements ?? [];
-  } catch (error) {
-    console.debug('Could not read package requirements from transform:', error);
-    return [];
-  }
-}
-
 async function runCodemod(transformsDir?: string) {
   try {
     const resolvedTransformsDir =
@@ -45,55 +29,10 @@ async function runCodemod(transformsDir?: string) {
     const codemodPath = path.resolve(resolvedTransformsDir, `${options.transformFile}.js`);
     console.debug(`Resolved codemod path: ${codemodPath}`);
 
-    // Check package requirements from the transform
-    const packageRequirements = await getPackageRequirements(codemodPath);
-    const packageResults: Record<string, boolean> = {};
-
-    if (packageRequirements.length > 0) {
-      console.log('📦 Checking package requirements...');
-
-      for (const pkg of packageRequirements) {
-        console.log(`🔍 Checking for ${pkg.name}@${pkg.version} in ${options.targetPath}...`);
-
-        // Pass the monorepo flag to the package checker
-        const found = hasPackageVersionFromPath(
-          pkg.name,
-          pkg.version,
-          options.targetPath,
-          options.isMonorepo,
-        );
-        packageResults[`${pkg.name}@${pkg.version}`] = found;
-
-        if (found) {
-          console.log(`✅ Found ${pkg.name}@${pkg.version}`);
-        } else {
-          console.warn(
-            `❌ Package ${pkg.name}@${pkg.version} not found in target. Transform may be skipped.`,
-          );
-        }
-      }
-    }
-
-    let gitignoreArg = '';
-    if (options.gitignore) {
-      const closestGitignore = findClosestGitignore(options.targetPath);
-      if (closestGitignore) {
-        console.debug(`Found .gitignore at: ${closestGitignore}`);
-        gitignoreArg = `--ignore-config=${closestGitignore}`;
-      } else {
-        console.debug('No .gitignore found in directory tree, skipping gitignore option');
-        gitignoreArg = '';
-      }
-    }
-
     const args = [
       '-t',
       codemodPath,
       options.targetPath,
-      '--extensions=tsx,ts,jsx,js',
-      '--ignore-pattern=**/node_modules/**',
-      '--ignore-pattern=**/dist/**',
-      '--ignore-pattern=**/*.d.ts',
       options.dry ? '--dry' : '',
       options.print ? '--print' : '',
       options.ignorePattern
@@ -102,10 +41,7 @@ async function runCodemod(transformsDir?: string) {
             .map((pattern) => `--ignore-pattern=${pattern.trim()}`)
             .join(' ')
         : '',
-      gitignoreArg,
-      Object.keys(packageResults).length > 0
-        ? `--packageResults='${JSON.stringify(packageResults)}'`
-        : '',
+      options.gitignore ? '--gitignore' : '',
     ].filter(Boolean);
 
     const command = `npx jscodeshift ${args.join(' ')}`;

package/src/transforms/button/__tests__/button.test.tsx

@@ -1,8 +1,6 @@
 import fs from 'node:fs/promises';
 
-import createTestTransform, {
-  createTestTransformWithoutPackage,
-} from '../../helpers/createTestTransform';
+import createTestTransform from '../../helpers/createTestTransform';
 import transformer from '../button';
 
 jest.mock(
@@ -14,10 +12,7 @@ jest.mock(
 );
 
 describe('button codemod', () => {
-  const transform = createTestTransform(transformer, [
-    { name: '@transferwise/components', version: '>=46.5.0' },
-  ]);
-
+  const transform = createTestTransform(transformer);
   it('renames ActionButton to Button and adds v2 and size', () => {
     const input = `
     import { ActionButton } from '@transferwise/components';
@@ -38,7 +33,7 @@ describe('button codemod', () => {
       }
     `;
     const output = transform({ source: input });
-    expect(output).toContain('v2');
+    expect(output).toContain('<Button v2 type="button">Click</Button>');
   });
 
   it('removes legacy props and adds new ones', () => {
@@ -155,21 +150,4 @@ describe('button codemod', () => {
       'Manual review required: prop "size" on <Button> has unsupported value "dynamicSize".',
     );
   });
-
-  it('skips transformation when package is not found', () => {
-    const noPackageTransform = createTestTransformWithoutPackage(
-      transformer,
-      '@transferwise/components',
-      '>=46.5.0',
-    );
-
-    const input = `
-      import { Button } from '@transferwise/components';
-      export default function Test() {
-        return <Button htmlType="button">Click</Button>;
-      }
-    `;
-    const output = noPackageTransform({ source: input });
-    expect(output.trim()).toBe(input.trim());
-  });
 });

package/src/transforms/button/button.ts

@@ -1,18 +1,16 @@
 import type { API, FileInfo, JSCodeshift, JSXIdentifier, Options } from 'jscodeshift';
 
 import reportManualReview from '../../utils/reportManualReview';
+import hasImport from '../helpers/hasImport';
+import processIconChildren from '../helpers/iconUtils';
 import {
   addAttributesIfMissing,
-  createReporter,
   hasAttributeOnElement,
-  hasImport,
-  processIconChildren,
   setNameIfJSXIdentifier,
-  validatePackageRequirements,
-} from '../helpers';
+} from '../helpers/jsxElementUtils';
+import { createReporter } from '../helpers/jsxReportingUtils';
 
 export const parser = 'tsx';
-export const packageRequirements = [{ name: '@transferwise/components', version: '>=46.5.0' }];
 
 interface LegacyProps {
   priority?: string;
@@ -84,16 +82,12 @@ const resolveType = (type?: string, htmlType?: string): string | null => {
     'secondary',
     'danger',
     'link',
-    'button',
-    'reset',
-    'submit',
   ];
   return type && legacyButtonTypes.includes(type) ? type : null;
 };
 
-const convertEnumValue = (value?: string): { converted: string | undefined; wasEnum: boolean } => {
-  if (!value) return { converted: value, wasEnum: false };
-
+const convertEnumValue = (value?: string): string | undefined => {
+  if (!value) return value;
   const strippedValue = value.replace(/^['"]|['"]$/gu, '');
   const enumMapping: Record<string, string> = {
     'Priority.SECONDARY': 'secondary',
@@ -102,18 +96,8 @@ const convertEnumValue = (value?: string): { converted: string | undefined; wasE
     'ControlType.NEGATIVE': 'negative',
     'ControlType.POSITIVE': 'positive',
     'ControlType.ACCENT': 'accent',
-    'ControlType.BUTTON': 'button',
-    'ControlType.RESET': 'reset',
-    'HtmlType.SUBMIT': 'submit',
-    'HtmlType.BUTTON': 'button',
-    'HtmlType.RESET': 'reset',
-    'Sentiment.NEGATIVE': 'negative',
   };
-
-  const wasEnum = strippedValue in enumMapping;
-  const converted = enumMapping[strippedValue] || strippedValue;
-
-  return { converted, wasEnum };
+  return enumMapping[strippedValue] || strippedValue;
 };
 
 /**
@@ -127,10 +111,6 @@ const convertEnumValue = (value?: string): { converted: string | undefined; wasE
  * @returns {string} - The transformed source code.
  */
 const transformer = (file: FileInfo, api: API, options: Options) => {
-  if (!validatePackageRequirements(options, packageRequirements)) {
-    return file.source;
-  }
-
   const j: JSCodeshift = api.jscodeshift;
   const root = j(file.source);
   const manualReviewIssues: string[] = [];
@@ -241,163 +221,144 @@ const transformer = (file: FileInfo, api: API, options: Options) => {
       addAttributesIfMissing(j, openingElement, [
         { attribute: j.jsxAttribute(j.jsxIdentifier('v2')), name: 'v2' },
       ]);
-
       processIconChildren(j, path.node.children, iconImports, openingElement);
 
       const legacyProps: LegacyProps = {};
       const legacyPropNames = ['priority', 'size', 'type', 'htmlType', 'sentiment'];
-      const keepAttributes: typeof openingElement.attributes = [];
 
-      (openingElement.attributes ?? []).forEach((attr) => {
-        if (
-          attr.type === 'JSXAttribute' &&
-          attr.name &&
-          attr.name.type === 'JSXIdentifier' &&
-          legacyPropNames.includes(attr.name.name)
-        ) {
+      openingElement.attributes?.forEach((attr) => {
+        if (attr.type === 'JSXAttribute' && attr.name && attr.name.type === 'JSXIdentifier') {
           const { name } = attr.name;
-          let migrated = false;
-          let rawStringValue: string | undefined;
-
-          if (attr.value) {
-            if (attr.value.type === 'StringLiteral') {
-              rawStringValue = attr.value.value;
-              legacyProps[name] = attr.value.value;
-            } else if (attr.value.type === 'JSXExpressionContainer') {
-              rawStringValue = String(j(attr.value.expression).toSource());
-              const { converted } = convertEnumValue(rawStringValue);
-              legacyProps[name] = converted;
-            }
-          } else {
-            legacyProps[name] = undefined;
-          }
-
-          // Check if this is an enum value that should be removed
-          const { wasEnum } = convertEnumValue(rawStringValue);
-          if (rawStringValue && wasEnum) {
-            migrated = true; // Remove enum values
-          } else if (name === 'size') {
-            const rawValue = legacyProps.size;
-            const resolved = resolveSize(rawValue);
-            const supportedSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
-            if (
-              typeof rawValue === 'string' &&
-              typeof resolved === 'string' &&
-              supportedSizes.includes(resolved)
-            ) {
-              migrated = true;
-            } else if (typeof rawValue === 'string') {
-              reporter.reportUnsupportedValue(path, 'size', rawValue);
-            } else if (rawValue !== undefined) {
-              reporter.reportAmbiguousExpression(path, 'size');
-            }
-          } else if (name === 'priority') {
-            const rawValue = legacyProps.priority;
-            const { converted } = convertEnumValue(rawValue);
-            const mapped = resolvePriority(legacyProps.type, converted);
-            const supportedPriorities = ['primary', 'secondary', 'tertiary', 'secondary-neutral'];
-            if (
-              typeof rawValue === 'string' &&
-              typeof mapped === 'string' &&
-              supportedPriorities.includes(mapped)
-            ) {
-              migrated = true;
-            } else if (typeof rawValue === 'string') {
-              reporter.reportUnsupportedValue(path, 'priority', rawValue);
-            } else if (rawValue !== undefined) {
-              reporter.reportAmbiguousExpression(path, 'priority');
-            }
-          } else if (name === 'type' || name === 'htmlType') {
-            const rawType = legacyProps.type;
-            const rawHtmlType = legacyProps.htmlType;
-            const resolvedType =
-              typeof rawType === 'string'
-                ? rawType
-                : rawType && typeof rawType === 'object'
-                  ? convertEnumValue(j(rawType).toSource()).converted
-                  : undefined;
-            const resolved = resolveType(resolvedType, rawHtmlType);
-            const supportedTypes = ['button', 'reset', 'submit'];
-            if (typeof resolved === 'string' && supportedTypes.includes(resolved)) {
-              migrated = true;
-            } else if (typeof rawType === 'string' || typeof rawHtmlType === 'string') {
-              reporter.reportUnsupportedValue(path, 'type', rawType ?? rawHtmlType ?? '');
-            } else if (rawType !== undefined || rawHtmlType !== undefined) {
-              reporter.reportAmbiguousExpression(path, 'type');
-            }
-          } else if (name === 'sentiment') {
-            const rawValue = legacyProps.sentiment;
-            if (rawValue === 'negative') {
-              migrated = true;
-            } else if (typeof rawValue === 'string') {
-              reporter.reportUnsupportedValue(path, 'sentiment', rawValue);
-            } else if (rawValue !== undefined) {
-              reporter.reportAmbiguousExpression(path, 'sentiment');
+          if (legacyPropNames.includes(name)) {
+            if (attr.value) {
+              if (attr.value.type === 'StringLiteral') {
+                legacyProps[name] = attr.value.value;
+              } else if (attr.value.type === 'JSXExpressionContainer') {
+                legacyProps[name] = convertEnumValue(String(j(attr.value.expression).toSource()));
+              }
+            } else {
+              legacyProps[name] = undefined;
             }
           }
-
-          if (!migrated) keepAttributes.push(attr);
-        } else {
-          keepAttributes.push(attr);
         }
       });
 
-      const newAttributes = [];
-      const rawSize = legacyProps.size;
-      const resolvedSize = resolveSize(rawSize);
-      if (
-        typeof rawSize === 'string' &&
-        typeof resolvedSize === 'string' &&
-        ['xs', 'sm', 'md', 'lg', 'xl'].includes(resolvedSize)
-      ) {
-        newAttributes.push(j.jsxAttribute(j.jsxIdentifier('size'), j.literal(resolvedSize)));
+      if (openingElement.attributes) {
+        openingElement.attributes = openingElement.attributes.filter(
+          (attr) =>
+            !(
+              attr.type === 'JSXAttribute' &&
+              attr.name &&
+              legacyPropNames.includes((attr.name as JSXIdentifier).name)
+            ),
+        );
       }
 
-      const rawPriority = legacyProps.priority;
-      const { converted: convertedPriority } = convertEnumValue(rawPriority);
-      const mappedPriority = resolvePriority(legacyProps.type, convertedPriority);
-      if (
-        typeof rawPriority === 'string' &&
-        typeof mappedPriority === 'string' &&
-        ['primary', 'secondary', 'tertiary', 'secondary-neutral'].includes(mappedPriority)
-      ) {
-        newAttributes.push(j.jsxAttribute(j.jsxIdentifier('priority'), j.literal(mappedPriority)));
-      }
+      if ('size' in legacyProps) {
+        const rawValue = legacyProps.size;
+        const resolved = resolveSize(rawValue);
+        const supportedSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
 
-      const rawType = legacyProps.type;
-      const rawHtmlType = legacyProps.htmlType;
-      const resolvedType =
-        typeof rawType === 'string'
-          ? rawType
-          : rawType && typeof rawType === 'object'
-            ? convertEnumValue(j(rawType).toSource()).converted
-            : undefined;
-      const resolved = resolveType(resolvedType, rawHtmlType);
-      const supportedTypes = ['button', 'reset', 'submit', 'negative'];
-      if (typeof resolved === 'string' && supportedTypes.includes(resolved)) {
-        if (resolved !== 'negative') {
-          newAttributes.push(j.jsxAttribute(j.jsxIdentifier('type'), j.literal(resolved)));
+        if (
+          typeof rawValue === 'string' &&
+          typeof resolved === 'string' &&
+          supportedSizes.includes(resolved)
+        ) {
+          openingElement.attributes?.push(
+            j.jsxAttribute(j.jsxIdentifier('size'), j.literal(resolved)),
+          );
+        } else if (typeof rawValue === 'string') {
+          reporter.reportUnsupportedValue(path, 'size', rawValue);
+        } else if (rawValue !== undefined) {
+          reporter.reportAmbiguousExpression(path, 'size');
         }
-        if (resolved === 'negative') {
-          newAttributes.push(j.jsxAttribute(j.jsxIdentifier('sentiment'), j.literal('negative')));
+      }
+
+      if ('priority' in legacyProps) {
+        const rawValue = legacyProps.priority;
+        const converted = convertEnumValue(rawValue);
+        const mapped = resolvePriority(legacyProps.type, converted);
+        const supportedPriorities = ['primary', 'secondary', 'tertiary', 'secondary-neutral'];
+
+        if (
+          typeof rawValue === 'string' &&
+          typeof mapped === 'string' &&
+          supportedPriorities.includes(mapped)
+        ) {
+          openingElement.attributes?.push(
+            j.jsxAttribute(j.jsxIdentifier('priority'), j.literal(mapped)),
+          );
+        } else if (typeof rawValue === 'string') {
+          reporter.reportUnsupportedValue(path, 'priority', rawValue);
+        } else if (rawValue !== undefined) {
+          reporter.reportAmbiguousExpression(path, 'priority');
         }
       }
 
-      const rawSentiment = legacyProps.sentiment;
-      if (rawSentiment === 'negative') {
-        newAttributes.push(j.jsxAttribute(j.jsxIdentifier('sentiment'), j.literal('negative')));
+      if ('type' in legacyProps || 'htmlType' in legacyProps) {
+        const rawType = legacyProps.type;
+        const rawHtmlType = legacyProps.htmlType;
+
+        const resolvedType =
+          typeof rawType === 'string'
+            ? rawType
+            : rawType && typeof rawType === 'object'
+              ? convertEnumValue(j(rawType).toSource())
+              : undefined;
+
+        const resolved = resolveType(resolvedType, rawHtmlType);
+
+        const supportedTypes = [
+          'accent',
+          'negative',
+          'positive',
+          'primary',
+          'pay',
+          'secondary',
+          'danger',
+          'link',
+          'submit',
+          'button',
+          'reset',
+        ];
+
+        if (typeof resolved === 'string' && supportedTypes.includes(resolved)) {
+          openingElement.attributes?.push(
+            j.jsxAttribute(j.jsxIdentifier('type'), j.literal(resolved)),
+          );
+
+          if (resolved === 'negative') {
+            openingElement.attributes?.push(
+              j.jsxAttribute(j.jsxIdentifier('sentiment'), j.literal('negative')),
+            );
+          }
+        } else if (typeof rawType === 'string' || typeof rawHtmlType === 'string') {
+          reporter.reportUnsupportedValue(path, 'type', rawType ?? rawHtmlType ?? '');
+        } else if (rawType !== undefined || rawHtmlType !== undefined) {
+          reporter.reportAmbiguousExpression(path, 'type');
+        }
       }
 
-      Array.prototype.push.apply(newAttributes, keepAttributes);
+      if ('sentiment' in legacyProps) {
+        const rawValue = legacyProps.sentiment;
+        if (rawValue === 'negative') {
+          openingElement.attributes?.push(
+            j.jsxAttribute(j.jsxIdentifier('sentiment'), j.literal('negative')),
+          );
+        } else if (typeof rawValue === 'string') {
+          reporter.reportUnsupportedValue(path, 'sentiment', rawValue);
+        } else if (rawValue !== undefined) {
+          reporter.reportAmbiguousExpression(path, 'sentiment');
+        }
+      }
 
-      // as/href logic as before
       let asIndex = -1;
       let asValue: string | null = null;
       let hrefExists = false;
       let asAmbiguous = false;
       let hrefAmbiguous = false;
 
-      newAttributes.forEach((attr, index) => {
+      openingElement.attributes?.forEach((attr, index) => {
         if (attr.type === 'JSXAttribute' && attr.name) {
           if (attr.name.name === 'as') {
             if (attr.value) {
@@ -410,6 +371,7 @@ const transformer = (file: FileInfo, api: API, options: Options) => {
             }
             asIndex = index;
           }
+
           if (attr.name.name === 'href') {
             hrefExists = true;
             if (attr.value && attr.value.type !== 'StringLiteral') {
@@ -426,15 +388,18 @@ const transformer = (file: FileInfo, api: API, options: Options) => {
 
       if (asValue === 'a') {
         if (asIndex !== -1) {
-          newAttributes.splice(asIndex, 1);
+          openingElement.attributes = openingElement.attributes?.filter(
+            (_, idx) => idx !== asIndex,
+          );
         }
         if (!hrefExists) {
-          newAttributes.push(j.jsxAttribute(j.jsxIdentifier('href'), j.literal('#')));
+          openingElement.attributes = [
+            ...(openingElement.attributes ?? []),
+            j.jsxAttribute(j.jsxIdentifier('href'), j.literal('#')),
+          ];
         }
       }
 
-      openingElement.attributes = newAttributes;
-
       if ((openingElement.attributes ?? []).some((attr) => attr.type === 'JSXSpreadAttribute')) {
         reporter.reportSpreadProps(path);
       }