Add relative option for migration

sam-b-rose · sam-b-rose · commit 0cc04ecb64df · 2022-10-25T15:54:40.000-06:00
diff --git a/.changeset/old-mayflies-clean.md b/.changeset/old-mayflies-clean.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Add relative option for replace-text-component migration
diff --git a/polaris-migrator/src/migrations/replace-text-component/replace-text-component.ts b/polaris-migrator/src/migrations/replace-text-component/replace-text-component.ts
@@ -1,24 +1,32 @@
-import type {API, FileInfo} from 'jscodeshift';
+import type {API, FileInfo, Options} from 'jscodeshift';
 
 import {hasImportDeclaration} from '../../utilities/imports';
 
 import {replaceDisplayText} from './steps/replace-display-text';
 import {replaceOther} from './steps/replace-other';
 import {replaceTextStyle} from './steps/replace-text-style';
 
+export interface MigrationOptions extends Options {
+  relative: string;
+}
+
 export default function replaceTextComponent(
   file: FileInfo,
   {jscodeshift: j}: API,
+  options: MigrationOptions,
 ) {
   const source = j(file.source);
 
-  if (!hasImportDeclaration(j, source, '@shopify/polaris')) {
+  if (
+    !options.relative &&
+    !hasImportDeclaration(j, source, '@shopify/polaris')
+  ) {
     return file.source;
   }
 
-  replaceDisplayText(j, source);
-  replaceOther(j, source);
-  replaceTextStyle(j, source);
+  replaceDisplayText(j, source, options);
+  replaceOther(j, source, options);
+  replaceTextStyle(j, source, options);
 
   return source.toSource();
 }
diff --git a/polaris-migrator/src/migrations/replace-text-component/steps/replace-display-text.ts b/polaris-migrator/src/migrations/replace-text-component/steps/replace-display-text.ts
@@ -11,7 +11,11 @@ import {
   getImportSpecifierName,
   hasImportSpecifier,
   removeImportSpecifier,
+  getImportSourcePaths,
+  renameImportDeclaration,
+  removeImportDeclaration,
 } from '../../../utilities/imports';
+import type {MigrationOptions} from '../replace-text-component';
 
 const displayTextSizeMap = {
   small: 'headingXl',
@@ -26,17 +30,33 @@ const displayTextSizeMap = {
 export function replaceDisplayText<NodeType = ASTNode>(
   j: JSCodeshift,
   source: Collection<NodeType>,
+  options: MigrationOptions,
 ) {
-  if (hasImportSpecifier(j, source, 'Text', '@shopify/polaris')) {
-    removeImportSpecifier(j, source, 'DisplayText', '@shopify/polaris');
-  } else {
-    renameImportSpecifier(j, source, 'DisplayText', 'Text', '@shopify/polaris');
-  }
+  const sourcePaths = getImportSourcePaths(j, source, {
+    relative: Boolean(options.relative),
+    currentFileName: 'DisplayText',
+    nextFileName: 'Text',
+  });
+
+  if (!sourcePaths) return;
 
   const localElementName =
-    getImportSpecifierName(j, source, 'DisplayText', '@shopify/polaris') ||
+    getImportSpecifierName(j, source, 'DisplayText', sourcePaths.current) ||
     'DisplayText';
 
+  if (hasImportSpecifier(j, source, 'Text', sourcePaths.next)) {
+    if (options.relative) {
+      removeImportDeclaration(j, source, sourcePaths.current);
+    } else {
+      removeImportSpecifier(j, source, 'DisplayText', sourcePaths.current);
+    }
+  } else {
+    if (options.relative) {
+      renameImportDeclaration(j, source, sourcePaths.current, sourcePaths.next);
+    }
+    renameImportSpecifier(j, source, 'DisplayText', 'Text', sourcePaths.next);
+  }
+
   source.findJSXElements(localElementName).forEach((element) => {
     replaceJSXElement(j, element, 'Text');
     replaceJSXAttributes(j, element, 'size', 'variant', displayTextSizeMap);
diff --git a/polaris-migrator/src/migrations/replace-text-component/steps/replace-other.ts b/polaris-migrator/src/migrations/replace-text-component/steps/replace-other.ts
@@ -11,7 +11,11 @@ import {
   getImportSpecifierName,
   hasImportSpecifier,
   removeImportSpecifier,
+  getImportSourcePaths,
+  removeImportDeclaration,
+  renameImportDeclaration,
 } from '../../../utilities/imports';
+import type {MigrationOptions} from '../replace-text-component';
 
 const components = {
   Heading: {
@@ -38,24 +42,41 @@ const components = {
 export function replaceOther<NodeType = ASTNode>(
   j: JSCodeshift,
   source: Collection<NodeType>,
+  options: MigrationOptions,
 ) {
+  const relative = Boolean(options.relative);
+
   Object.entries(components).forEach(([componentName, {variant, as}]) => {
-    if (hasImportSpecifier(j, source, 'Text', '@shopify/polaris')) {
-      removeImportSpecifier(j, source, componentName, '@shopify/polaris');
-    } else {
-      renameImportSpecifier(
-        j,
-        source,
-        componentName,
-        'Text',
-        '@shopify/polaris',
-      );
-    }
+    const sourcePaths = getImportSourcePaths(j, source, {
+      relative,
+      currentFileName: componentName,
+      nextFileName: 'Text',
+    });
+
+    if (!sourcePaths) return;
 
     const localElementName =
-      getImportSpecifierName(j, source, componentName, '@shopify/polaris') ||
+      getImportSpecifierName(j, source, componentName, sourcePaths.current) ||
       componentName;
 
+    if (hasImportSpecifier(j, source, 'Text', sourcePaths.next)) {
+      if (options.relative) {
+        removeImportDeclaration(j, source, sourcePaths.current);
+      } else {
+        removeImportSpecifier(j, source, componentName, sourcePaths.current);
+      }
+    } else {
+      if (options.relative) {
+        renameImportDeclaration(
+          j,
+          source,
+          sourcePaths.current,
+          sourcePaths.next,
+        );
+      }
+      renameImportSpecifier(j, source, componentName, 'Text', sourcePaths.next);
+    }
+
     source.findJSXElements(localElementName).forEach((element) => {
       replaceJSXElement(j, element, 'Text');
       insertJSXAttribute(j, element, 'variant', variant);
diff --git a/polaris-migrator/src/migrations/replace-text-component/steps/replace-text-style.ts b/polaris-migrator/src/migrations/replace-text-component/steps/replace-text-style.ts
@@ -14,7 +14,12 @@ import {
   getImportSpecifierName,
   hasImportSpecifier,
   removeImportSpecifier,
+  getImportSourcePaths,
+  renameImportDeclaration,
+  removeImportDeclaration,
+  insertImportDeclaration,
 } from '../../../utilities/imports';
+import type {MigrationOptions} from '../replace-text-component';
 
 const variationMap = {
   strong: {fontWeight: 'bold'},
@@ -31,17 +36,33 @@ const variationMap = {
 export function replaceTextStyle<NodeType = ASTNode>(
   j: JSCodeshift,
   source: Collection<NodeType>,
+  options: MigrationOptions,
 ) {
-  if (hasImportSpecifier(j, source, 'Text', '@shopify/polaris')) {
-    removeImportSpecifier(j, source, 'TextStyle', '@shopify/polaris');
-  } else {
-    renameImportSpecifier(j, source, 'TextStyle', 'Text', '@shopify/polaris');
-  }
+  const sourcePaths = getImportSourcePaths(j, source, {
+    relative: Boolean(options.relative),
+    currentFileName: 'TextStyle',
+    nextFileName: 'Text',
+  });
+
+  if (!sourcePaths) return;
 
   const localElementName =
-    getImportSpecifierName(j, source, 'TextStyle', '@shopify/polaris') ||
+    getImportSpecifierName(j, source, 'TextStyle', sourcePaths.current) ||
     'TextStyle';
 
+  if (hasImportSpecifier(j, source, 'Text', sourcePaths.next)) {
+    if (options.relative) {
+      removeImportDeclaration(j, source, sourcePaths.current);
+    } else {
+      removeImportSpecifier(j, source, 'TextStyle', sourcePaths.current);
+    }
+  } else {
+    if (options.relative) {
+      renameImportDeclaration(j, source, sourcePaths.current, sourcePaths.next);
+    }
+    renameImportSpecifier(j, source, 'TextStyle', 'Text', sourcePaths.current);
+  }
+
   source.findJSXElements(localElementName).forEach((element) => {
     replaceJSXElement(j, element, 'Text');
     insertJSXAttribute(j, element, 'variant', 'bodyMd');
@@ -50,10 +71,29 @@ export function replaceTextStyle<NodeType = ASTNode>(
       .forEach((literal) => {
         const currentValue = literal.node.value as keyof typeof variationMap;
         if (currentValue === 'code') {
+          const inlineTextSourcePath = options.relative
+            ? sourcePaths.current.replace('TextStyle', 'InlineCode')
+            : '@shopify/polaris';
+
           if (
-            !hasImportSpecifier(j, source, 'InlineCode', '@shopify/polaris')
+            !hasImportSpecifier(j, source, 'InlineCode', inlineTextSourcePath)
           ) {
-            insertImportSpecifier(j, source, 'InlineCode', '@shopify/polaris');
+            if (options.relative) {
+              insertImportDeclaration(
+                j,
+                source,
+                'InlineCode',
+                inlineTextSourcePath,
+                sourcePaths.next,
+              );
+            } else {
+              insertImportSpecifier(
+                j,
+                source,
+                'InlineCode',
+                inlineTextSourcePath,
+              );
+            }
           }
 
           const InlineCode = j.jsxElement(
diff --git a/polaris-migrator/src/migrations/replace-text-component/tests/replace-components-relative.input.tsx b/polaris-migrator/src/migrations/replace-text-component/tests/replace-components-relative.input.tsx
@@ -0,0 +1,31 @@
+// @ts-nocheck
+import React from 'react';
+
+import {DisplayText} from '../DisplayText';
+import {Heading} from '../Heading';
+import {Subheading} from '../Subheading';
+import {Caption} from '../Caption';
+import {TextStyle} from '../TextStyle';
+import {VisuallyHidden} from '../VisuallyHidden';
+
+export function App() {
+  return (
+    <>
+      <DisplayText size="extraLarge">Display text</DisplayText>
+      <DisplayText size="large">Display text</DisplayText>
+      <DisplayText size="medium">Display text</DisplayText>
+      <DisplayText size="small">Display text</DisplayText>
+      <Heading element="h1">Heading</Heading>
+      <Heading>Heading</Heading>
+      <Subheading element="h2">Subheading</Subheading>
+      <Subheading>Subheading</Subheading>
+      <Caption>Caption</Caption>
+      <TextStyle variation="strong">Strong</TextStyle>
+      <TextStyle variation="positive">Positive</TextStyle>
+      <TextStyle variation="negative">Negative</TextStyle>
+      <TextStyle variation="warning">Warning</TextStyle>
+      <TextStyle variation="code">Code</TextStyle>
+      <VisuallyHidden>Hidden text</VisuallyHidden>
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/replace-text-component/tests/replace-components-relative.output.tsx b/polaris-migrator/src/migrations/replace-text-component/tests/replace-components-relative.output.tsx
@@ -0,0 +1,57 @@
+// @ts-nocheck
+import React from 'react';
+
+import {Text} from '../Text';
+import {InlineCode} from '../InlineCode';
+
+export function App() {
+  return (
+    <>
+      <Text variant="heading4xl" as="p">
+        Display text
+      </Text>
+      <Text variant="heading3xl" as="p">
+        Display text
+      </Text>
+      <Text variant="heading2xl" as="p">
+        Display text
+      </Text>
+      <Text variant="headingXl" as="p">
+        Display text
+      </Text>
+      <Text as="h1" variant="headingLg">
+        Heading
+      </Text>
+      <Text variant="headingLg" as="h2">
+        Heading
+      </Text>
+      <Text as="h2" variant="headingSm">
+        Subheading
+      </Text>
+      <Text variant="headingSm" as="h3">
+        Subheading
+      </Text>
+      <Text variant="bodySm" as="p">
+        Caption
+      </Text>
+      <Text variant="bodyMd" fontWeight="bold" as="span">
+        Strong
+      </Text>
+      <Text variant="bodyMd" color="success" as="span">
+        Positive
+      </Text>
+      <Text variant="bodyMd" color="critical" as="span">
+        Negative
+      </Text>
+      <Text variant="bodyMd" color="warning" as="span">
+        Warning
+      </Text>
+      <Text variant="bodyMd" as="span">
+        <InlineCode>Code</InlineCode>
+      </Text>
+      <Text variant="bodySm" as="span" visuallyHidden>
+        Hidden text
+      </Text>
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/replace-text-component/tests/replace-text-component.test.ts b/polaris-migrator/src/migrations/replace-text-component/tests/replace-text-component.test.ts
@@ -1,11 +1,14 @@
 import {check} from '../../../utilities/testUtils';
 
 const migration = 'replace-text-component';
-const fixtures = ['replace-components'];
+const fixtures = ['replace-components-relative'];
 
 for (const fixture of fixtures) {
   check(__dirname, {
     fixture,
     migration,
+    options: {
+      relative: fixture.includes('relative') ? true : undefined,
+    },
   });
 }
diff --git a/polaris-migrator/src/utilities/imports.ts b/polaris-migrator/src/utilities/imports.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@shopify/polaris-migrator': minor
 +---
++
 +Add relative option for replace-text-component migration