@sanity/ui-codemod 1.0.0-alpha.1

package/src/utils/transformAttributes.ts

@@ -0,0 +1,248 @@
+import {type API, type ASTPath, type JSXOpeningElement} from 'jscodeshift'
+
+import {type AttributeMods} from '../types/AttributeMods'
+import {getAttribute} from './getAttribute'
+import {getAttributeExpression} from './getAttributeExpression'
+import {getCompositeAttrValue} from './getCompositeAttrValue'
+import {getMappingArray} from './getMappingArray'
+import {getMappingExpression} from './getMappingExpression'
+import {getMappingValue} from './getMappingValue'
+import {getShorthandAttributes} from './getShorthandAttributes'
+import {getStyleExpression} from './getStyleExpression'
+import {insertTodoWarning} from './insertTodoWarning'
+import {isValidStyleType} from './isValidStyleType'
+import {mergeStyle} from './mergeStyle'
+
+/**
+ * Applies attribute migration rules to a JSX opening element.
+ * Returns whether the AST was updated.
+ */
+export function transformAttributes(
+  j: API['jscodeshift'],
+  path: ASTPath<JSXOpeningElement>,
+  mods: AttributeMods,
+  todoWarning: string,
+): boolean {
+  if (!path.node.attributes) {
+    return false
+  }
+
+  let hasChanges = false
+  const attrs = path.node.attributes
+  const removeIdxs: number[] = []
+
+  for (const [attrName, mod] of Object.entries(mods)) {
+    if (mod?.type !== 'warn-missing') {
+      continue
+    }
+
+    if (getAttribute(attrs, attrName)) {
+      continue
+    }
+
+    if (insertTodoWarning(j, path, mod.warning || todoWarning)) {
+      hasChanges = true
+    }
+  }
+
+  for (let i = 0; i < attrs.length; i++) {
+    const attr = attrs[i]
+
+    if (!attr || attr.type !== 'JSXAttribute' || attr.name.type !== 'JSXIdentifier') {
+      continue
+    }
+
+    const mod = mods[attr.name.name]
+    const expr = getAttributeExpression(attr, j)
+
+    if (!mod || !expr) {
+      continue
+    }
+
+    if (mod.type === 'remove') {
+      removeIdxs.push(i)
+    }
+
+    if (mod.type === 'warn-only') {
+      if (insertTodoWarning(j, path, mod.warning || todoWarning)) {
+        hasChanges = true
+      }
+    }
+
+    if (mod.type === 'rename-only') {
+      if (attr.name.type === 'JSXIdentifier') {
+        attr.name.name = mod.name
+        hasChanges = true
+      }
+    }
+
+    if (mod.type === 'style-only') {
+      if (!expr || !isValidStyleType(expr)) {
+        if (insertTodoWarning(j, path, todoWarning)) {
+          hasChanges = true
+        }
+
+        continue
+      }
+
+      const merged = mergeStyle(j, attrs, mod.style, getStyleExpression(j, expr))
+
+      if (merged) {
+        removeIdxs.push(i)
+      } else if (insertTodoWarning(j, path, todoWarning)) {
+        hasChanges = true
+      }
+    }
+
+    if (mod.type === 'style-mapped') {
+      if (!expr || !isValidStyleType(expr)) {
+        if (insertTodoWarning(j, path, todoWarning)) {
+          hasChanges = true
+        }
+
+        continue
+      }
+
+      const styleValue = getMappingValue(mod.mapping, expr)
+
+      if (styleValue === undefined) {
+        if (insertTodoWarning(j, path, todoWarning)) {
+          hasChanges = true
+        }
+
+        continue
+      }
+
+      const merged = mergeStyle(j, attrs, mod.style, getMappingExpression(j, styleValue))
+
+      if (merged) {
+        removeIdxs.push(i)
+      } else if (insertTodoWarning(j, path, todoWarning)) {
+        hasChanges = true
+      }
+    }
+
+    if (mod.type === 'shorthand-mapped') {
+      if (expr.type === 'ConditionalExpression' || expr.type === 'Identifier') {
+        if (insertTodoWarning(j, path, todoWarning)) {
+          hasChanges = true
+        }
+
+        continue
+      }
+
+      const shorthandAttrs = getShorthandAttributes(j, expr, mod)
+
+      if (shorthandAttrs.length) {
+        attrs.splice(i + 1, 0, ...shorthandAttrs)
+        removeIdxs.push(i)
+      } else if (insertTodoWarning(j, path, todoWarning)) {
+        hasChanges = true
+      }
+    }
+
+    if (mod.type === 'composite') {
+      const triggerName = attr.name.name
+      const compositeValue = getCompositeAttrValue(j, attrs, mod.mapping)
+
+      if (!compositeValue) {
+        if (insertTodoWarning(j, path, todoWarning)) {
+          hasChanges = true
+        }
+
+        continue
+      }
+
+      if (attr.name.type === 'JSXIdentifier') {
+        attr.name.name = mod.name
+      }
+
+      attr.value = j.stringLiteral(compositeValue)
+
+      for (const attrName of Object.keys(mod.mapping[compositeValue] || {})) {
+        if (attrName === triggerName) {
+          continue
+        }
+
+        const otherAttr = getAttribute(attrs, attrName)
+
+        if (otherAttr) {
+          const k = attrs.indexOf(otherAttr)
+
+          if (k !== -1) {
+            removeIdxs.push(k)
+          }
+        }
+      }
+
+      hasChanges = true
+    }
+
+    if (mod.type === 'mapped-only' || mod.type === 'rename-mapped') {
+      if (mod.type === 'rename-mapped') {
+        if (attr.name.type === 'JSXIdentifier') {
+          attr.name.name = mod.name
+        }
+      }
+
+      if (expr.type === 'ConditionalExpression' || expr.type === 'Identifier') {
+        if (insertTodoWarning(j, path, todoWarning)) {
+          hasChanges = true
+        }
+
+        continue
+      }
+
+      if (expr.type === 'ArrayExpression') {
+        const styleArray = getMappingArray(j, expr, mod.mapping)
+
+        if (!styleArray) {
+          if (insertTodoWarning(j, path, todoWarning)) {
+            hasChanges = true
+          }
+
+          continue
+        }
+
+        if (attr.value?.type === 'JSXExpressionContainer') {
+          attr.value.expression = styleArray
+        } else {
+          attr.value = j.jsxExpressionContainer(styleArray)
+        }
+
+        hasChanges = true
+        continue
+      }
+
+      const styleValue = getMappingValue(mod.mapping, expr)
+
+      if (styleValue === undefined) {
+        if (insertTodoWarning(j, path, todoWarning)) {
+          hasChanges = true
+        }
+
+        continue
+      }
+
+      if (typeof styleValue === 'string') {
+        attr.value = j.stringLiteral(styleValue)
+      } else {
+        attr.value = j.jsxExpressionContainer(getMappingExpression(j, styleValue) as never)
+      }
+
+      hasChanges = true
+    }
+  }
+
+  const idxsToRemove = [...new Set(removeIdxs)].sort((a, b) => b - a)
+
+  if (idxsToRemove.length > 0) {
+    hasChanges = true
+
+    for (const i of idxsToRemove) {
+      attrs.splice(i, 1)
+    }
+  }
+
+  return hasChanges
+}

package/src/utils/transformComponent.test.ts

@@ -0,0 +1,45 @@
+import jscodeshift from 'jscodeshift'
+import {describe, expect, it} from 'vitest'
+
+import {replaceElement} from './replaceElement'
+import {transformComponent} from './transformComponent'
+
+describe('transformComponent', () => {
+  const api = {j: jscodeshift, jscodeshift, stats: () => {}, report: () => {}}
+
+  it('returns undefined when the transform makes no changes', () => {
+    const result = transformComponent(
+      {source: 'export const value = 1\n', path: 'example.ts'},
+      api,
+      () => {},
+    )
+
+    expect(result).toBeUndefined()
+  })
+
+  it('returns transformed code when a helper marks changes', () => {
+    const result = transformComponent(
+      {source: '<Card padding={1} />', path: 'example.tsx'},
+      api,
+      ({j, root, markChanged}) => {
+        if (
+          replaceElement(
+            j,
+            root,
+            () => true,
+            {
+              element: 'Card',
+            },
+            {
+              element: 'Box',
+            },
+          )
+        ) {
+          markChanged()
+        }
+      },
+    )
+
+    expect(result).toContain('<Box padding={1} />')
+  })
+})

package/src/utils/transformComponent.ts

@@ -0,0 +1,31 @@
+import type {API, Collection, FileInfo} from 'jscodeshift'
+
+export type TransformContext = {
+  j: API['jscodeshift']
+  root: Collection
+  markChanged: () => void
+}
+
+/**
+ * Runs a component transform on a file and only calls `toSource()` when
+ * `markChanged()` was invoked. Returns `undefined` for no-op files.
+ */
+export function transformComponent(
+  fileInfo: FileInfo,
+  api: API,
+  fn: (ctx: TransformContext) => void,
+): string | undefined {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+  let hasChanges = false
+
+  fn({
+    j,
+    root,
+    markChanged: () => {
+      hasChanges = true
+    },
+  })
+
+  return hasChanges ? root.toSource() : undefined
+}

package/src/utils/transformImport.test.ts

@@ -0,0 +1,175 @@
+import {type API, type FileInfo} from 'jscodeshift'
+
+import type {BaseOptions} from '../types/BaseOptions'
+import {defineInlineTest} from '../utils/testUtils'
+import {transformImport} from './transformImport'
+
+function transform(fileInfo: FileInfo, api: API, options: BaseOptions): string {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+
+  transformImport(j, root, 'Box', options.fromPackage, options.toPackage)
+  return root.toSource()
+}
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Box} from '@sanity/ui'
+
+  <Box />
+  `,
+  `
+  import {Box} from '@sanity/ui'
+
+  <Box />
+  `,
+  'does not update import path if fromPackage and toPackage are not set',
+)
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui'},
+  `
+  import {Box} from '@legacy/ui'
+
+  <Box />
+  `,
+  `
+  import {Box} from "@sanity/ui"
+
+  <Box />
+  `,
+  'updates import path if only fromPackage is set',
+)
+
+defineInlineTest(
+  transform,
+  {toPackage: '@latest/ui'},
+  `
+  import {Box} from '@sanity/ui'
+
+  <Box />
+  `,
+  `
+  import {Box} from "@latest/ui"
+
+  <Box />
+  `,
+  'updates import path if only toPackage is set',
+)
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@legacy/ui'},
+  `
+  import {Box} from '@legacy/ui'
+
+  <Box />
+  `,
+  `
+  import {Box} from '@legacy/ui'
+
+  <Box />
+  `,
+  'does not update import path if fromPackage and toPackage are the same',
+)
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Box} from '@legacy/ui'
+  import {Card} from '@legacy/ui'
+
+  <>
+    <Box />
+    <Card />
+  </>
+  `,
+  `
+  import {Box} from "@sanity/ui"
+  import {Card} from '@legacy/ui'
+
+  <>
+    <Box />
+    <Card />
+  </>
+  `,
+  'only updates import path for current component',
+)
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Box, Card} from '@legacy/ui'
+
+  <>
+    <Box />
+    <Card />
+  </>
+  `,
+  `
+  import { Card } from '@legacy/ui';
+
+  import { Box } from "@sanity/ui";
+
+  <>
+    <Box />
+    <Card />
+  </>
+  `,
+  'splits mixed imports and only updates import path for current component',
+)
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Box, BoxProps} from '@legacy/ui'
+
+  <Box />
+  `,
+  `
+  import {Box, BoxProps} from "@sanity/ui"
+
+  <Box />
+  `,
+  'updates import path for type import',
+)
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Box, type BoxProps} from '@legacy/ui'
+
+  <Box />
+  `,
+  `
+  import {Box, type BoxProps} from "@sanity/ui"
+
+  <Box />
+  `,
+  'updates import path for with type keyword inside',
+)
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Box} from '@legacy/ui'
+  import type {BoxProps} from '@legacy/ui'
+
+  <Box />
+  `,
+  `
+  import {Box} from "@sanity/ui"
+  import type {BoxProps} from "@sanity/ui"
+
+  <Box />
+  `,
+  'updates import path for with type keyword outside',
+)

package/src/utils/transformImport.ts

@@ -0,0 +1,55 @@
+import type {API, Collection} from 'jscodeshift'
+
+import {getClonedImportSpecifiers} from './getClonedImportSpecifiers'
+import {getSplitImportSpecifiers} from './getSplitImportSpecifiers'
+
+export const DEFAULT_UI_PACKAGE = '@sanity/ui'
+
+/**
+ * Rewrites imports from `fromPackage` to `toPackage`, splitting imports if needed.
+ * Returns whether the AST was updated.
+ */
+export function transformImport(
+  j: API['jscodeshift'],
+  root: Collection,
+  componentName: string,
+  fromPackage: string = DEFAULT_UI_PACKAGE,
+  toPackage: string = DEFAULT_UI_PACKAGE,
+): boolean {
+  if (fromPackage === toPackage) {
+    return false
+  }
+
+  let hasChanges = false
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const node = path.node
+
+    if (node.source.value !== fromPackage) {
+      return
+    }
+
+    const {componentSpecs, restSpecs} = getSplitImportSpecifiers(node.specifiers, componentName)
+
+    if (componentSpecs.length === 0) {
+      return
+    }
+
+    if (restSpecs.length === 0) {
+      if (node.source && typeof node.source === 'object' && 'value' in node.source) {
+        const sourceLiteral = node.source as {value: string}
+        sourceLiteral.value = toPackage
+      }
+
+      hasChanges = true
+      return
+    }
+
+    path.node.specifiers = restSpecs
+    const clonedImportSpecifiers = getClonedImportSpecifiers(j, componentSpecs)
+    path.insertAfter(j.importDeclaration(clonedImportSpecifiers, j.stringLiteral(toPackage)))
+    hasChanges = true
+  })
+
+  return hasChanges
+}

package/src/utils/transformImportAlias.test.ts

@@ -0,0 +1,40 @@
+import {type API, type FileInfo} from 'jscodeshift'
+
+import {defineInlineTest} from './testUtils'
+import {transformImportAlias} from './transformImportAlias'
+
+const WARNING = 'Consider renaming LegacyCard to Box'
+
+function transform(fileInfo: FileInfo, api: API): string {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+
+  transformImportAlias(j, root, 'Card', 'Box', 'LegacyCard', WARNING)
+
+  return root.toSource()
+}
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Card as LegacyCard} from '@sanity/ui'
+  `,
+  `
+  // UI-CODEMOD TODO: ${WARNING}
+  import { Box as LegacyCard } from '@sanity/ui';
+  `,
+  'transforms aliased import and adds todo comment',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Card} from '@sanity/ui'
+  `,
+  `
+  import {Card} from '@sanity/ui'
+  `,
+  'does not transform non-aliased import',
+)

package/src/utils/transformImportAlias.ts

@@ -0,0 +1,49 @@
+import type {API} from 'jscodeshift'
+
+import {insertTodoWarning} from './insertTodoWarning'
+
+export function transformImportAlias(
+  j: API['jscodeshift'],
+  root: ReturnType<API['jscodeshift']>,
+  fromExport: string,
+  toExport: string,
+  localName: string,
+  warning?: string,
+): boolean {
+  let updated = false
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const specs = path.node.specifiers
+
+    if (!specs?.length) {
+      return
+    }
+
+    for (const spec of specs) {
+      if (spec.type !== 'ImportSpecifier' || spec.imported.type !== 'Identifier') {
+        continue
+      }
+
+      if (spec.imported.name !== fromExport) {
+        continue
+      }
+
+      const local = spec.local?.type === 'Identifier' ? spec.local.name : spec.imported.name
+
+      if (local !== localName) {
+        continue
+      }
+
+      spec.imported.name = toExport
+      updated = true
+
+      if (warning) {
+        insertTodoWarning(j, path, warning)
+      }
+
+      return
+    }
+  })
+
+  return updated
+}