@sanity/ui-codemod 1.0.0-alpha.1

package/src/utils/replaceElement.test.ts

@@ -0,0 +1,181 @@
+import {type API, type FileInfo} from 'jscodeshift'
+
+import type {AttributeMods} from '../types/AttributeMods'
+import {defineInlineTest} from '../utils/testUtils'
+import {getAttribute} from './getAttribute'
+import {getComponentLocalNames} from './getComponentLocalNames'
+import {replaceElement} from './replaceElement'
+import {transformAttributes} from './transformAttributes'
+
+const FROM_MOD: AttributeMods = {
+  insetTop: {
+    type: 'rename-only',
+    name: 'top',
+  },
+}
+
+const TO_MOD: AttributeMods = {
+  insetBottom: {
+    type: 'rename-only',
+    name: 'bottom',
+  },
+}
+
+function transform(fileInfo: FileInfo, api: API): string {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+
+  replaceElement(
+    j,
+    root,
+    (attrs) => !getAttribute(attrs, 'margin'),
+    {
+      element: 'Card',
+      callback: (path) => transformAttributes(j, path, FROM_MOD, 'Warning'),
+    },
+    {
+      element: 'Box',
+      callback: (path) => transformAttributes(j, path, TO_MOD, 'Warning'),
+    },
+  )
+
+  return root.toSource()
+}
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Card margin={1} />
+  `,
+  `
+  <Card margin={1} />
+  `,
+  'preserves element if filter returns false',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Card padding={1} />
+  `,
+  `
+  <Box padding={1} />
+  `,
+  'replaces element if filter returns true',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Card padding={1}>Content</Card>
+  `,
+  `
+  <Box padding={1}>Content</Box>
+  `,
+  'replaces element and updates closing tag',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Card margin={1} insetTop={1} />
+  `,
+  `
+  <Card margin={1} top={1} />
+  `,
+  'preserves element and runs from callback',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Card padding={1} insetBottom={1} />
+  `,
+  `
+  <Box padding={1} bottom={1} />
+  `,
+  'preserves element and runs to callback',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Card} from '@sanity/ui'
+
+  <Card padding={1}>Content</Card>
+  `,
+  `
+  import {Box} from '@sanity/ui'
+
+  <Box padding={1}>Content</Box>
+  `,
+  'replaces element and import',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Card} from '@sanity/ui'
+
+  <>
+    <Card margin={1} />
+    <Card padding={1}>Content</Card>
+  </>
+  `,
+  `
+  import { Card, Box } from '@sanity/ui';
+
+  <>
+    <Card margin={1} />
+    <Box padding={1}>Content</Box>
+  </>
+  `,
+  'replaces element and combines imports',
+)
+
+function transformWithLocalNames(fileInfo: FileInfo, api: API): string {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+  const localNames = getComponentLocalNames(j, root, 'Card')
+
+  replaceElement(
+    j,
+    root,
+    (attrs) => !getAttribute(attrs, 'margin'),
+    {
+      element: 'Card',
+      localNames,
+      callback: (path) => transformAttributes(j, path, FROM_MOD, 'Warning'),
+    },
+    {
+      element: 'Box',
+      callback: (path) => transformAttributes(j, path, TO_MOD, 'Warning'),
+    },
+  )
+
+  return root.toSource()
+}
+
+defineInlineTest(
+  transformWithLocalNames,
+  {},
+  `
+  import {Card as LegacyCard} from '@sanity/ui'
+
+  <LegacyCard padding={1}>Content</LegacyCard>
+  `,
+  `
+  // UI-CODEMOD TODO: Consider renaming LegacyCard to Box
+  import { Box as LegacyCard } from '@sanity/ui';
+
+  <LegacyCard padding={1}>Content</LegacyCard>
+  `,
+  'preserves aliased jsx name and rewrites import',
+)

package/src/utils/replaceElement.ts

@@ -0,0 +1,106 @@
+import type {API, ASTPath, JSXAttribute, JSXOpeningElement, JSXSpreadAttribute} from 'jscodeshift'
+
+import {addImportSpecifier} from './addImportSpecifier'
+import {removeUnusedImport} from './removeUnusedImport'
+import {transformImportAlias} from './transformImportAlias'
+
+/**
+ * Replaces JSX component if `filter` passes. Runs callbacks and updates imports.
+ * Returns whether the AST was updated.
+ */
+export function replaceElement(
+  j: API['jscodeshift'],
+  root: ReturnType<API['jscodeshift']>,
+  filter: (attrs: (JSXAttribute | JSXSpreadAttribute)[]) => boolean,
+  from: {
+    element: string
+    localNames?: Iterable<string>
+    callback?: (path: ASTPath<JSXOpeningElement>) => boolean | void
+  },
+  to: {
+    element: string
+    callback?: (path: ASTPath<JSXOpeningElement>) => boolean | void
+  },
+): boolean {
+  const names = new Set(from.localNames)
+
+  if (names.size === 0) {
+    names.add(from.element)
+  }
+
+  let hasChanges = false
+  let needsDefaultImportUpdate = false
+  const aliases = new Set<string>()
+
+  root.find(j.JSXOpeningElement).forEach((path) => {
+    const openingEl = path.node
+    const openingName = openingEl.name
+
+    if (openingName.type !== 'JSXIdentifier' || !names.has(openingName.name)) {
+      return
+    }
+
+    const attrs = openingEl.attributes
+
+    if (!attrs || !filter(attrs)) {
+      if (from.callback?.(path)) {
+        hasChanges = true
+      }
+
+      return
+    }
+
+    const localTag = openingName.name
+    const preserveAlias = localTag !== from.element && localTag !== to.element
+
+    if (preserveAlias) {
+      if (!aliases.has(localTag)) {
+        if (
+          transformImportAlias(
+            j,
+            root,
+            from.element,
+            to.element,
+            localTag,
+            `Consider renaming ${localTag} to ${to.element}`,
+          )
+        ) {
+          hasChanges = true
+        }
+
+        aliases.add(localTag)
+      }
+    } else {
+      openingName.name = to.element
+
+      const parentNode = path.parent?.node
+
+      if (parentNode?.type === 'JSXElement') {
+        const closing = parentNode.closingElement
+
+        if (closing?.name.type === 'JSXIdentifier') {
+          closing.name.name = to.element
+        }
+      }
+
+      needsDefaultImportUpdate = true
+      hasChanges = true
+    }
+
+    if (to.callback?.(path)) {
+      hasChanges = true
+    }
+  })
+
+  if (needsDefaultImportUpdate) {
+    if (addImportSpecifier(j, root, from.element, to.element)) {
+      hasChanges = true
+    }
+
+    if (removeUnusedImport(j, root, from.element)) {
+      hasChanges = true
+    }
+  }
+
+  return hasChanges
+}

package/src/utils/replaceStyledComponent.test.ts

@@ -0,0 +1,57 @@
+import {type API, type FileInfo} from 'jscodeshift'
+
+import {getComponentLocalNames} from './getComponentLocalNames'
+import {replaceStyledComponent} from './replaceStyledComponent'
+import {defineInlineTest} from './testUtils'
+
+function transform(fileInfo: FileInfo, api: API): string {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+
+  replaceStyledComponent(j, root, {element: 'Card'}, 'Box')
+
+  return root.toSource()
+}
+
+function transformWithLocalNames(fileInfo: FileInfo, api: API): string {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+  const localNames = getComponentLocalNames(j, root, 'Card')
+
+  replaceStyledComponent(j, root, {element: 'Card', localNames}, 'Box')
+
+  return root.toSource()
+}
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Card} from '@sanity/ui'
+
+  const RootCard = styled(Card)(({theme}) => {})
+  `,
+  `
+  import {Box} from '@sanity/ui'
+
+  const RootCard = styled(Box)(({theme}) => {})
+  `,
+  'replaces styled component',
+)
+
+defineInlineTest(
+  transformWithLocalNames,
+  {},
+  `
+  import {Card as LegacyCard} from '@sanity/ui'
+
+  const RootCard = styled(LegacyCard)(({theme}) => {})
+  `,
+  `
+  // UI-CODEMOD TODO: Consider renaming LegacyCard to Box
+  import { Box as LegacyCard } from '@sanity/ui';
+
+  const RootCard = styled(LegacyCard)(({theme}) => {})
+  `,
+  'preserves aliased styled import and rewrites import',
+)

package/src/utils/replaceStyledComponent.ts

@@ -0,0 +1,60 @@
+import type {API} from 'jscodeshift'
+
+import {addImportSpecifier} from './addImportSpecifier'
+import {removeUnusedImport} from './removeUnusedImport'
+import {transformImportAlias} from './transformImportAlias'
+
+export function replaceStyledComponent(
+  j: API['jscodeshift'],
+  root: ReturnType<API['jscodeshift']>,
+  from: {
+    element: string
+    localNames?: Iterable<string>
+  },
+  to: string,
+): void {
+  const names = new Set(from.localNames)
+
+  if (names.size === 0) {
+    names.add(from.element)
+  }
+
+  let needsDefaultImportUpdate = false
+  const aliases = new Set<string>()
+
+  root
+    .find(j.CallExpression, {
+      callee: {type: 'Identifier', name: 'styled'},
+    })
+    .forEach((path) => {
+      const arg = path.node.arguments[0]
+
+      if (arg?.type !== 'Identifier' || !names.has(arg.name)) {
+        return
+      }
+
+      if (arg.name !== from.element && arg.name !== to) {
+        if (!aliases.has(arg.name)) {
+          transformImportAlias(
+            j,
+            root,
+            from.element,
+            to,
+            arg.name,
+            `Consider renaming ${arg.name} to ${to}`,
+          )
+          aliases.add(arg.name)
+        }
+
+        return
+      }
+
+      arg.name = to
+      needsDefaultImportUpdate = true
+    })
+
+  if (needsDefaultImportUpdate) {
+    addImportSpecifier(j, root, from.element, to)
+    removeUnusedImport(j, root, from.element)
+  }
+}

package/src/utils/shouldTransformComponent.test.ts

@@ -0,0 +1,61 @@
+import jscodeshift from 'jscodeshift'
+import {describe, expect, it} from 'vitest'
+
+import {shouldTransformComponent} from './shouldTransformComponent'
+
+const j = jscodeshift
+
+describe('shouldTransformComponent', () => {
+  it('returns true when local names are present', () => {
+    const root = j(`<Box />`)
+
+    expect(shouldTransformComponent(j, root, 'Box', new Set(['Box']))).toBe(true)
+  })
+
+  it('returns false when there is no component usage or import rewrite', () => {
+    const root = j(`export const value = 1`)
+
+    expect(shouldTransformComponent(j, root, 'Box', new Set())).toBe(false)
+  })
+
+  it('returns false when fromPackage and toPackage are the same', () => {
+    const root = j(`
+      import {Box} from '@legacy/ui'
+      <Box />
+    `)
+
+    expect(
+      shouldTransformComponent(j, root, 'Box', new Set(), {
+        fromPackage: '@legacy/ui',
+        toPackage: '@legacy/ui',
+      }),
+    ).toBe(false)
+  })
+
+  it('returns true when the component is imported from fromPackage', () => {
+    const root = j(`
+      import {Box} from '@legacy/ui'
+    `)
+
+    expect(
+      shouldTransformComponent(j, root, 'Box', new Set(), {
+        fromPackage: '@legacy/ui',
+        toPackage: '@sanity/ui',
+      }),
+    ).toBe(true)
+  })
+
+  it('returns false when the component is not imported from fromPackage', () => {
+    const root = j(`
+      import {Card} from '@legacy/ui'
+      <Card />
+    `)
+
+    expect(
+      shouldTransformComponent(j, root, 'Box', new Set(), {
+        fromPackage: '@legacy/ui',
+        toPackage: '@sanity/ui',
+      }),
+    ).toBe(false)
+  })
+})

package/src/utils/shouldTransformComponent.ts

@@ -0,0 +1,40 @@
+import type {API, Collection} from 'jscodeshift'
+
+import type {BaseOptions} from '../types/BaseOptions'
+import {getSplitImportSpecifiers} from './getSplitImportSpecifiers'
+import {DEFAULT_UI_PACKAGE} from './transformImport'
+
+/**
+ * Returns whether a component transform should run on this file, based on local
+ * usage or a pending import rewrite.
+ */
+export function shouldTransformComponent(
+  j: API['jscodeshift'],
+  root: Collection,
+  componentName: string,
+  localNames: Set<string>,
+  options?: BaseOptions,
+): boolean {
+  if (localNames.size > 0) {
+    return true
+  }
+
+  const fromPackage = options?.fromPackage ?? DEFAULT_UI_PACKAGE
+  const toPackage = options?.toPackage ?? DEFAULT_UI_PACKAGE
+
+  if (fromPackage === toPackage) {
+    return false
+  }
+
+  return root.find(j.ImportDeclaration).some((path) => {
+    const node = path.node
+
+    if (node.source.value !== fromPackage) {
+      return false
+    }
+
+    const {componentSpecs} = getSplitImportSpecifiers(node.specifiers, componentName)
+
+    return componentSpecs.length > 0
+  })
+}

package/src/utils/testUtils.ts

@@ -0,0 +1,54 @@
+import {type FileInfo, type Options, type Transform} from 'jscodeshift'
+import {expect, it} from 'vitest'
+
+const applyTransform = require('jscodeshift/dist/testUtils').applyTransform
+
+export function defineInlineTest(
+  module: Transform,
+  options: Options,
+  input: FileInfo['source'],
+  expectedOutput: FileInfo['source'],
+  testName?: string,
+) {
+  it(testName || 'transforms correctly', () => {
+    const testResult = runInlineTest(
+      module,
+      options,
+      {
+        source: input,
+      },
+      expectedOutput,
+    )
+
+    return testResult instanceof Promise ? testResult : undefined
+  })
+}
+
+function runInlineTest(
+  module: Transform,
+  options: Options,
+  input: {
+    source: FileInfo['source']
+  },
+  expectedOutput: FileInfo['source'],
+  testOptions?: Record<string, unknown>,
+) {
+  const output = applyTransform(module, options, input, {
+    parser: 'tsx',
+    ...testOptions,
+  })
+
+  const expectation = (
+    o: Promise<string | null | undefined | void> | string | null | undefined | void,
+  ) => expect(o).toEqual(expectedOutput.trim())
+
+  if (output instanceof Promise) {
+    return output.then((o) => {
+      expectation(o)
+      return o
+    })
+  }
+
+  expectation(output)
+  return output
+}