<Icon />: mdi-react to @mdi/react codemod (#140)

Author: umpox

packages/transforms/src/mdiIconToMdiPath/README.md

@@ -0,0 +1,3 @@
+# `mdi-react` `ExampleIcon` to `@mdi/react` `mdiExample` path codemod
+
+yarn transform --write -t ./packages/transforms/src/mdiIconToMdiPath/mdiIconToMdiPath.ts '/sourcegraph/client/!(wildcard)/src/\*_/_.{ts,tsx}'

packages/transforms/src/mdiIconToMdiPath/__tests__/mdiIconToMdiPath.test.ts

@@ -0,0 +1,65 @@
+import { testCodemod } from '@sourcegraph/codemod-toolkit-ts'
+
+import { mdiIconToMdiPath } from '../mdiIconToMdiPath'
+
+testCodemod('mdiIconToMdiPath', mdiIconToMdiPath, [
+    {
+        label: 'handles mdi icons',
+        initialSource: `
+            import CloseIcon from 'mdi-react/CloseIcon'
+
+            import { Icon } from '@sourcegraph/wildcard'
+
+            export const Test = <Icon as={CloseIcon} className="hello" />`,
+        expectedSource: `
+            import { mdiClose } from '@mdi/js'
+
+            import { Icon } from '@sourcegraph/wildcard'
+
+            export const Test = <Icon className="hello" svgPath={mdiClose} />
+        `,
+    },
+    {
+        label: 'handles custom icons',
+        initialSource: `
+            import { Icon } from '@sourcegraph/wildcard'
+
+            import CustomIcon from '../CustomIcon'
+
+            export const Test = <Icon as={CustomIcon} className="hello" />`,
+        expectedSource: `
+            import { Icon } from '@sourcegraph/wildcard'
+
+            import CustomIcon from '../CustomIcon'
+
+            export const Test = <Icon as={CustomIcon} className="hello" />
+        `,
+    },
+    {
+        label: 'ignores icons with complex logic',
+        initialSource: `
+            import CloseIcon from 'mdi-react/CloseIcon'
+            import OpenIcon from 'mdi-react/OpenIcon'
+
+            import { Icon } from '@sourcegraph/wildcard'
+
+            export const Test = <Icon as={CloseIcon} className="hello" />
+            export const Test2 = <Icon as={isOpen ? CloseIcon : OpenIcon} className="hello" />`,
+        expectedSource: `
+            import { mdiClose } from '@mdi/js'
+            import CloseIcon from 'mdi-react/CloseIcon'
+            import OpenIcon from 'mdi-react/OpenIcon'
+
+            import { Icon } from '@sourcegraph/wildcard'
+
+            export const Test = <Icon className="hello" svgPath={mdiClose} />
+            export const Test2 = <Icon as={isOpen ? CloseIcon : OpenIcon} className="hello" />
+        `,
+        expectedManualChangeMessages: [
+            `
+            /test.tsx:7:27 - warning: Updating an expression is not supported. Please complete the transform manually
+            >>>     as={isOpen ? CloseIcon : OpenIcon}
+            `,
+        ],
+    },
+])

packages/transforms/src/mdiIconToMdiPath/index.ts

@@ -0,0 +1 @@
+export * from './mdiIconToMdiPath'

packages/transforms/src/mdiIconToMdiPath/mdiIconToMdiPath.ts

@@ -0,0 +1,83 @@
+import {
+    runTransform,
+    getParentUntilOrThrow,
+    isJsxTagElement,
+    getImportDeclarationByModuleSpecifier,
+} from '@sourcegraph/codemod-toolkit-ts'
+
+/**
+ * Convert `<Icon as={MdiIcon} />` element to `<Icon svgPath={mdiIconPath} />` component.
+ */
+export const mdiIconToMdiPath = runTransform(context => {
+    const { throwManualChangeError } = context
+
+    const mdiIconPathsToImport = new Set<string>()
+
+    const isMdiReactToken = (token: string): boolean => {
+        const importDeclaration = getImportDeclarationByModuleSpecifier(context.sourceFile, `mdi-react/${token}`)
+        return importDeclaration !== undefined
+    }
+
+    return {
+        JsxAttribute(jsxAttribute) {
+            const jsxTagElement = getParentUntilOrThrow(jsxAttribute, isJsxTagElement)
+            if (jsxTagElement.getTagNameNode().getText() !== 'Icon') {
+                // Not Icon component, so we exit
+                return
+            }
+
+            const structure = jsxAttribute.getStructure()
+            if (structure.name !== 'as' || !structure.initializer) {
+                // Not the 'as' prop or empty, so we exit
+                return
+            }
+
+            if (structure.initializer.includes(' ')) {
+                // complex expression, so we exit
+                throwManualChangeError({
+                    node: jsxAttribute,
+                    message: 'Updating an expression is not supported. Please complete the transform manually',
+                })
+            }
+
+            // like `{CloseIcon}`
+            const token = structure.initializer
+
+            const iconRegex = /(\w*.)Icon/
+            if (!token.match(iconRegex)) {
+                // Not an icon, so we exit
+                return
+            }
+
+            if (!isMdiReactToken(token.replace('{', '').replace('}', ''))) {
+                // its a custom icon, we don't need to do anything
+                return
+            }
+
+            const updatedValue = `mdi${token.replace(iconRegex, '$1')}`.replace('{', '').replace('}', '')
+
+            // Store this value so we can import it once finished with this file.
+            mdiIconPathsToImport.add(updatedValue)
+
+            // Add `svgPath={...}` with updated value
+            jsxTagElement.addAttribute({
+                name: 'svgPath',
+                initializer: `{${updatedValue}}`,
+            })
+
+            // Remove `as={...}` with old value
+            jsxAttribute.remove()
+        },
+        SourceFileExit(sourceFile) {
+            if (mdiIconPathsToImport.size > 0) {
+                // Add mdiIcon import
+                sourceFile.addImportDeclaration({
+                    namedImports: [...mdiIconPathsToImport],
+                    moduleSpecifier: '@mdi/js',
+                })
+            }
+
+            sourceFile.fixUnusedIdentifiers()
+        },
+    }
+})