Initial POC

Author: laurkim

polaris-migrator/src/migrations/replace-card-component/replace-card-component.ts

@@ -0,0 +1,47 @@
+import type {API, FileInfo} from 'jscodeshift';
+
+import {replaceJSXElement} from '../../utilities/jsx';
+import {
+  hasImportDeclaration,
+  renameImportSpecifier,
+  getImportSpecifierName,
+  hasImportSpecifier,
+  removeImportSpecifier,
+  renameImportSourcePath,
+  renameImportDeclaration,
+} from '../../utilities/imports';
+
+/**
+ * Replace <Card> with the <AlphaCard> component
+ */
+export default function replaceCardComponent(
+  fileInfo: FileInfo,
+  {jscodeshift: j}: API,
+) {
+  const source = j(fileInfo.source);
+  const sourcePathRegex = /(?:\@shopify\/polaris|\.\.\/Card)/gi;
+  const updatedSourcePathRegex = /(?:\@shopify\/polaris|\.\.\/AlphaCard)/gi;
+
+  if (!hasImportDeclaration(j, source, sourcePathRegex)) {
+    return fileInfo.source;
+  }
+
+  if (hasImportSpecifier(j, source, 'AlphaCard', updatedSourcePathRegex)) {
+    // console.log('migration — first conditional');
+    removeImportSpecifier(j, source, 'Card', sourcePathRegex);
+  } else {
+    // console.log('migration — second conditional');
+    renameImportSpecifier(j, source, 'Card', 'AlphaCard', sourcePathRegex);
+    // renameImportDeclaration(j, source, sourcePathRegex, '?');
+    // renameImportSourcePath(j, source, 'Card', 'AlphaCard', sourcePathRegex);
+  }
+
+  const localElementName =
+    getImportSpecifierName(j, source, 'Card', updatedSourcePathRegex) || 'Card';
+
+  source.findJSXElements(localElementName).forEach((element) => {
+    replaceJSXElement(j, element, 'AlphaCard');
+  });
+
+  return source.toSource();
+}

polaris-migrator/src/migrations/replace-card-component/tests/replace-card-component.input.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import {Card} from '../Card';
+
+export function App() {
+  return <Card>Card</Card>;
+}

polaris-migrator/src/migrations/replace-card-component/tests/replace-card-component.output.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import {AlphaCard} from '../AlphaCard';
+
+export function App() {
+  return <AlphaCard>Card</AlphaCard>;
+}

polaris-migrator/src/migrations/replace-card-component/tests/replace-card-component.test.ts

@@ -0,0 +1,11 @@
+import {check} from '../../../utilities/testUtils';
+
+const migration = 'replace-card-component';
+const fixtures = ['replace-card-component'];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+  });
+}

polaris-migrator/src/utilities/imports.ts

@@ -3,12 +3,15 @@ import core, {Collection} from 'jscodeshift';
 export function hasImportDeclaration(
   j: core.JSCodeshift,
   source: Collection<any>,
-  sourcePath: string,
+  sourcePath: string | RegExp,
 ) {
   return Boolean(
-    source
-      .find(j.ImportDeclaration)
-      .filter((path) => path.node.source.value === sourcePath).length,
+    source.find(j.ImportDeclaration).filter((path) => {
+      const nodePath = path.node.source.value;
+      return typeof sourcePath === 'string'
+        ? nodePath === sourcePath
+        : sourcePath.test(nodePath?.toString() ?? '');
+    }).length,
   );
 }
 
@@ -85,11 +88,16 @@ export function getImportSpecifier(
   j: core.JSCodeshift,
   source: Collection<any>,
   specifier: string,
-  sourcePath: string,
+  sourcePath: string | RegExp,
 ) {
   return source
     .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === sourcePath)
+    .filter((path) => {
+      const nodePath = path.node.source.value;
+      return typeof sourcePath === 'string'
+        ? nodePath === sourcePath
+        : sourcePath.test(nodePath?.toString() ?? '');
+    })
     .find(j.ImportSpecifier)
     .filter((path) => path.value.imported.name === specifier);
 }
@@ -98,9 +106,10 @@ export function getImportSpecifierName(
   j: core.JSCodeshift,
   source: Collection<any>,
   specifier: string,
-  sourcePath: string,
+  sourcePath: string | RegExp,
 ) {
   const specifiers = getImportSpecifier(j, source, specifier, sourcePath);
+  console.log({specifiers});
 
   return specifiers.length > 0 ? specifiers.nodes()[0]!.local!.name : null;
 }
@@ -109,7 +118,7 @@ export function hasImportSpecifier(
   j: core.JSCodeshift,
   source: Collection<any>,
   specifier: string,
-  sourcePath: string,
+  sourcePath: string | RegExp,
 ) {
   return Boolean(getImportSpecifier(j, source, specifier, sourcePath)?.length);
 }
@@ -139,8 +148,16 @@ export function renameImportSpecifier(
   source: Collection<any>,
   specifier: string,
   newSpecifier: string,
-  sourcePath: string,
+  sourcePath: string | RegExp,
 ) {
+  console.log('inside rename');
+  console.log(getImportSpecifier(j, source, specifier, sourcePath));
+  // console.log(j.importSpecifier(j.identifier(newSpecifier)));
+  // if (typeof sourcePath === 'string') {
+  //   console.log({sourcePath});
+  // } else {
+  //   console.log('inside the else');
+  // }
   getImportSpecifier(j, source, specifier, sourcePath).replaceWith(
     j.importSpecifier(j.identifier(newSpecifier)),
   );
@@ -150,7 +167,9 @@ export function removeImportSpecifier(
   j: core.JSCodeshift,
   source: Collection<any>,
   specifier: string,
-  sourcePath: string,
+  sourcePath: string | RegExp,
 ) {
+  console.log('inside remove');
+  console.log(getImportSpecifier(j, source, specifier, sourcePath));
   getImportSpecifier(j, source, specifier, sourcePath).remove();
 }