Wildcard V2: <Icon /> Codemod (#87)

Co-authored-by: gitstart-sourcegraph <[email protected]>
Co-authored-by: Valery Bugakov <[email protected]>

Author: 3 people

packages/transforms/src/iconToComponent/README.md

@@ -0,0 +1,3 @@
+# Icon element to `<Icon />` Wildcard component codemod
+
+yarn transform --write -t ./packages/transforms/src/iconToComponent/iconToComponent.ts '/sourcegraph/client/!(wildcard)/src/\*_/_.{ts,tsx}'

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

@@ -0,0 +1,48 @@
+import { testCodemod } from '@sourcegraph/codemod-toolkit-ts'
+
+import { iconToComponent } from '../iconToComponent'
+
+testCodemod('iconToComponent', iconToComponent, [
+    {
+        label: 'case 1',
+        initialSource: 'export const Test = <CloseIcon className="icon-inline hello" />',
+        expectedSource: `
+            import { Icon } from '@sourcegraph/wildcard'
+
+            export const Test = <Icon className="hello" as={CloseIcon} />
+        `,
+    },
+    {
+        label: 'case 2',
+        initialSource: 'export const Test = <ConsoleIcon className="icon-inline-md hello" />',
+        expectedSource: `
+            import { Icon } from '@sourcegraph/wildcard'
+
+            export const Test = <Icon className="hello" as={ConsoleIcon} size="md" />
+        `,
+    },
+    {
+        label: 'case 3',
+        initialSource: `
+            import classNames from 'classnames'
+            export const Test = <ConsoleIcon className={classNames('icon-inline-md hello', styles.consoleIcon)} />`,
+        expectedSource: `
+            import classNames from 'classnames'
+
+            import { Icon } from '@sourcegraph/wildcard'
+
+            export const Test = <Icon className={classNames('hello', styles.consoleIcon)} as={ConsoleIcon} size="md" />
+        `,
+    },
+    {
+        label: 'case 4',
+        initialSource: `
+            import classNames from 'classnames'
+            export const Test = <ConsoleIcon aria-label="Console icon" className={classNames('icon-inline-md', styles.consoleIcon)} />`,
+        expectedSource: `
+            import { Icon } from '@sourcegraph/wildcard'
+
+            export const Test = <Icon aria-label="Console icon" className={styles.consoleIcon} as={ConsoleIcon} size="md" />
+        `,
+    },
+])

packages/transforms/src/iconToComponent/iconClassNamesMapping.ts

@@ -0,0 +1,31 @@
+import { ts } from 'ts-morph'
+
+export const ICON_SIZES = ['sm', 'md'] as const
+
+export interface ClassNameMapping {
+    className: string
+    props: {
+        name: string
+        value: ts.Node
+    }[]
+}
+
+const sizeClassNamesMapping: ClassNameMapping[] = ICON_SIZES.map(size => {
+    return {
+        className: `icon-inline-${size}`,
+        props: [
+            {
+                name: 'size',
+                value: ts.factory.createStringLiteral(size),
+            },
+        ],
+    }
+})
+
+export const iconClassNamesMapping: ClassNameMapping[] = [
+    ...sizeClassNamesMapping,
+    {
+        className: 'icon-inline',
+        props: [],
+    },
+]

packages/transforms/src/iconToComponent/iconToComponent.ts

@@ -0,0 +1,96 @@
+import { Node, printNode, ts } from 'ts-morph'
+
+import {
+    removeClassNameAndUpdateJsxElement,
+    addOrUpdateSourcegraphWildcardImportIfNeeded,
+} from '@sourcegraph/codemod-toolkit-packages'
+import {
+    runTransform,
+    getParentUntilOrThrow,
+    isJsxTagElement,
+    getTagName,
+    JsxTagElement,
+    setOnJsxTagElement,
+} from '@sourcegraph/codemod-toolkit-ts'
+
+import { validateCodemodTarget, validateCodemodTargetOrThrow } from './validateCodemodTarget'
+
+/**
+ * Convert `<SomeIcon class="icon-inline" />` element to the `<Icon svg={<SomeIcon />} />` component.
+ */
+export const iconToComponent = runTransform(context => {
+    const { throwManualChangeError, addManualChangeLog } = context
+
+    const jsxTagElementsToUpdate = new Set<JsxTagElement>()
+
+    return {
+        StringLiteral(stringLiteral) {
+            const { classNameMappings } = validateCodemodTargetOrThrow.StringLiteral(stringLiteral)
+            const jsxAttribute = getParentUntilOrThrow(stringLiteral, Node.isJsxAttribute)
+
+            if (!/classname/i.test(jsxAttribute.getName())) {
+                return
+            }
+
+            const jsxTagElement = getParentUntilOrThrow(jsxAttribute, isJsxTagElement)
+
+            if (!validateCodemodTarget.JsxTagElement(jsxTagElement)) {
+                throwManualChangeError({
+                    node: jsxTagElement,
+                    message: `Class '${stringLiteral.getLiteralText()}' is used on the '${getTagName(
+                        jsxTagElement
+                    )}' element. Please update it manually.`,
+                })
+            }
+
+            for (const { className, props } of classNameMappings) {
+                const { isRemoved, manualChangeLog } = removeClassNameAndUpdateJsxElement(stringLiteral, className)
+
+                if (manualChangeLog) {
+                    addManualChangeLog(manualChangeLog)
+                }
+
+                if (isRemoved) {
+                    jsxTagElement.addAttribute({
+                        name: 'as',
+                        initializer: printNode(
+                            ts.factory.createJsxExpression(
+                                undefined,
+                                ts.factory.createIdentifier(getTagName(jsxTagElement))
+                            )
+                        ),
+                    })
+
+                    for (const { name, value } of props) {
+                        jsxTagElement.addAttribute({
+                            name,
+                            initializer: printNode(value),
+                        })
+                    }
+                }
+            }
+
+            jsxTagElementsToUpdate.add(jsxTagElement)
+        },
+        SourceFileExit(sourceFile) {
+            if (jsxTagElementsToUpdate.size === 0) {
+                return
+            }
+
+            for (const jsxTagElement of jsxTagElementsToUpdate) {
+                if (Node.isJsxSelfClosingElement(jsxTagElement)) {
+                    setOnJsxTagElement(jsxTagElement, { name: 'Icon' })
+                }
+            }
+
+            addOrUpdateSourcegraphWildcardImportIfNeeded({
+                sourceFile,
+                importStructure: {
+                    namedImports: ['Icon'],
+                },
+            })
+
+            sourceFile.fixUnusedIdentifiers()
+        },
+    }
+})

packages/transforms/src/iconToComponent/index.ts

@@ -0,0 +1,2 @@
+export * from './iconToComponent'
+export * from './validateCodemodTarget'

packages/transforms/src/iconToComponent/validateCodemodTarget.ts

@@ -0,0 +1,47 @@
+import { StringLiteral } from 'ts-morph'
+
+import { throwFromMethodsIfUndefinedReturn } from '@sourcegraph/codemod-common'
+import { JsxTagElement } from '@sourcegraph/codemod-toolkit-ts'
+
+import { iconClassNamesMapping, ClassNameMapping } from './iconClassNamesMapping'
+
+interface StringLiteralValidatorResult {
+    stringLiteral: StringLiteral
+    classNameMappings: ClassNameMapping[]
+}
+
+interface JsxTagElementValidatorResult {
+    jsxTagElement: JsxTagElement
+    tagName: string
+}
+
+export const validateCodemodTarget = {
+    /**
+     * Returns `JsxTagElement`.
+     */
+    JsxTagElement(jsxTagElement: JsxTagElement): JsxTagElementValidatorResult | void {
+        const tagName = jsxTagElement.getTagNameNode().getText()
+
+        return { jsxTagElement, tagName }
+    },
+
+    /**
+     * Returns non-void result if received `StringLiteral` has one of icon classes like `icon-inline`.
+     */
+    StringLiteral(stringLiteral: StringLiteral): StringLiteralValidatorResult | void {
+        const classNameMappings = iconClassNamesMapping.filter(({ className }) => {
+            return stringLiteral
+                .getLiteralValue()
+                .split(' ')
+                .some(word => {
+                    return word === className
+                })
+        })
+
+        if (classNameMappings.length !== 0) {
+            return { classNameMappings, stringLiteral }
+        }
+    },
+}
+
+export const validateCodemodTargetOrThrow = throwFromMethodsIfUndefinedReturn(validateCodemodTarget)