@planningcenter/tapestry-migration-cli 2.1.1-rc.0 → 2.1.1-rc.2

package/src/components/shared/componentTransformUtilities.test.ts

@@ -0,0 +1,437 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import {
+  addImportToExisting,
+  createNewImport,
+  getImportName,
+  hasConflictingImport,
+  removeImportFromDeclaration,
+  transformElementName,
+} from "./componentTransformUtilities"
+
+const j = jscodeshift.withParser("tsx")
+
+describe("componentTransformUtilities", () => {
+  describe("getImportName", () => {
+    it("should return local name for imported component", () => {
+      const code = `import { Button } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+
+      const result = getImportName("Button", "@planningcenter/tapestry-react", {
+        j,
+        source,
+      })
+
+      expect(result).toBe("Button")
+    })
+
+    it("should return aliased name for renamed import", () => {
+      const code = `import { Button as TapestryButton } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+
+      const result = getImportName("Button", "@planningcenter/tapestry-react", {
+        j,
+        source,
+      })
+
+      expect(result).toBe("TapestryButton")
+    })
+
+    it("should return null when component is not imported", () => {
+      const code = `import { Link } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+
+      const result = getImportName("Button", "@planningcenter/tapestry-react", {
+        j,
+        source,
+      })
+
+      expect(result).toBe(null)
+    })
+
+    it("should return null when package is not imported", () => {
+      const code = `import { Button } from "other-package"`
+      const source = j(code)
+
+      const result = getImportName("Button", "@planningcenter/tapestry-react", {
+        j,
+        source,
+      })
+
+      expect(result).toBe(null)
+    })
+
+    it("should handle multiple imports from same package", () => {
+      const code = `import { Button, Link as MyLink } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+
+      const buttonResult = getImportName(
+        "Button",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+      const linkResult = getImportName(
+        "Link",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+
+      expect(buttonResult).toBe("Button")
+      expect(linkResult).toBe("MyLink")
+    })
+
+    it("should handle multiple import declarations", () => {
+      const code = `
+        import { Button } from "@planningcenter/tapestry-react"
+        import { useState } from "react"
+        import { Link } from "@planningcenter/tapestry-react"
+      `
+      const source = j(code)
+
+      const buttonResult = getImportName(
+        "Button",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+      const linkResult = getImportName(
+        "Link",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+
+      expect(buttonResult).toBe("Button")
+      expect(linkResult).toBe("Link")
+    })
+  })
+
+  describe("hasConflictingImport", () => {
+    it("should return true when component is imported from different package", () => {
+      const code = `import { Link } from "react-router-dom"`
+      const source = j(code)
+
+      const result = hasConflictingImport(
+        "Link",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+
+      expect(result).toBe(true)
+    })
+
+    it("should return false when component is only imported from excluded package", () => {
+      const code = `import { Link } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+
+      const result = hasConflictingImport(
+        "Link",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+
+      expect(result).toBe(false)
+    })
+
+    it("should return false when component is not imported at all", () => {
+      const code = `import { Button } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+
+      const result = hasConflictingImport(
+        "Link",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+
+      expect(result).toBe(false)
+    })
+
+    it("should return true for default import conflicts", () => {
+      const code = `import Link from "next/link"`
+      const source = j(code)
+
+      const result = hasConflictingImport(
+        "Link",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+
+      expect(result).toBe(true)
+    })
+
+    it("should handle multiple conflicting sources", () => {
+      const code = `
+        import { Link } from "react-router-dom"
+        import { Link as NextLink } from "next/link"
+        import { Button } from "@planningcenter/tapestry-react"
+      `
+      const source = j(code)
+
+      const result = hasConflictingImport(
+        "Link",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+
+      expect(result).toBe(true)
+    })
+  })
+
+  describe("transformElementName", () => {
+    it("should transform JSX element name", () => {
+      const code = `<Button>Click me</Button>`
+      const source = j(code)
+      const elementPath = source.find(j.JSXOpeningElement).at(0)
+
+      const result = transformElementName(elementPath.get(), "Link")
+
+      expect(result).toBe(true)
+      expect(source.toSource()).toContain("<Link>Click me</Link>")
+    })
+
+    it("should transform both opening and closing tags", () => {
+      const code = `<Button className="test">Content</Button>`
+      const source = j(code)
+      const elementPath = source.find(j.JSXOpeningElement).at(0)
+
+      const result = transformElementName(elementPath.get(), "Link")
+
+      expect(result).toBe(true)
+      const output = source.toSource()
+      expect(output).toContain('<Link className="test">')
+      expect(output).toContain("</Link>")
+    })
+
+    it("should handle self-closing tags", () => {
+      const code = `<Button />`
+      const source = j(code)
+      const elementPath = source.find(j.JSXOpeningElement).at(0)
+
+      const result = transformElementName(elementPath.get(), "Link")
+
+      expect(result).toBe(true)
+      expect(source.toSource()).toContain("<Link />")
+    })
+
+    it("should preserve all attributes", () => {
+      const code = `<Button className="test" onClick={handler} disabled>Content</Button>`
+      const source = j(code)
+      const elementPath = source.find(j.JSXOpeningElement).at(0)
+
+      const result = transformElementName(elementPath.get(), "Link")
+
+      expect(result).toBe(true)
+      const output = source.toSource()
+      expect(output).toContain('className="test"')
+      expect(output).toContain("onClick={handler}")
+      expect(output).toContain("disabled")
+      expect(output).toContain("<Link")
+      expect(output).toContain("</Link>")
+    })
+  })
+
+  describe("addImportToExisting", () => {
+    it("should add new import to existing import declaration", () => {
+      const code = `import { Button } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      addImportToExisting(importPath.get(), "Link", j)
+
+      const output = source.toSource()
+      expect(output).toContain(
+        'import { Button, Link } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should add aliased import to existing declaration", () => {
+      const code = `import { Button } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      addImportToExisting(importPath.get(), "Link", j, "TLink")
+
+      const output = source.toSource()
+      expect(output).toContain(
+        'import { Button, Link as TLink } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should not add duplicate imports", () => {
+      const code = `import { Button, Link } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      addImportToExisting(importPath.get(), "Link", j)
+
+      const output = source.toSource()
+      // Should still only have one Link import
+      expect(output).toContain(
+        'import { Button, Link } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should handle empty specifiers list", () => {
+      const code = `import {} from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      addImportToExisting(importPath.get(), "Button", j)
+
+      const output = source.toSource()
+      expect(output).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("createNewImport", () => {
+    it("should create new import declaration", () => {
+      const code = `const test = "existing code"`
+      const source = j(code)
+
+      createNewImport(source, "Button", "@planningcenter/tapestry-react", j)
+
+      const output = source.toSource()
+      expect(output).toContain(
+        'import { Button } from "@planningcenter/tapestry-react";'
+      )
+      expect(output).toContain('const test = "existing code"')
+    })
+
+    it("should create new import with alias", () => {
+      const code = `const test = "existing"`
+      const source = j(code)
+
+      createNewImport(
+        source,
+        "Link",
+        "@planningcenter/tapestry-react",
+        j,
+        "TLink"
+      )
+
+      const output = source.toSource()
+      expect(output).toContain(
+        'import { Link as TLink } from "@planningcenter/tapestry-react";'
+      )
+    })
+
+    it("should add new import after existing imports", () => {
+      const code = `
+        import React from "react"
+        import { useState } from "react"
+
+        const component = () => null
+      `
+      const source = j(code)
+
+      createNewImport(source, "Button", "@planningcenter/tapestry-react", j)
+
+      const output = source.toSource()
+      const lines = output.split("\n")
+      const reactImportIndex = lines.findIndex((line) =>
+        line.includes('import React from "react"')
+      )
+      const useStateImportIndex = lines.findIndex((line) =>
+        line.includes('import { useState } from "react"')
+      )
+      const buttonImportIndex = lines.findIndex((line) =>
+        line.includes('import { Button } from "@planningcenter/tapestry-react"')
+      )
+
+      expect(reactImportIndex).toBeLessThan(buttonImportIndex)
+      expect(useStateImportIndex).toBeLessThan(buttonImportIndex)
+    })
+
+    it("should handle empty file", () => {
+      const code = ``
+      const source = j(code)
+
+      createNewImport(source, "Button", "@planningcenter/tapestry-react", j)
+
+      const output = source.toSource()
+      expect(output).toBe(
+        'import { Button } from "@planningcenter/tapestry-react";'
+      )
+    })
+  })
+
+  describe("removeImportFromDeclaration", () => {
+    it("should remove import specifier", () => {
+      const code = `import { Button, Link } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      const result = removeImportFromDeclaration(importPath.get(), "Button")
+
+      expect(result).toBe(true)
+      const output = source.toSource()
+      expect(output).toContain(
+        'import { Link } from "@planningcenter/tapestry-react"'
+      )
+      expect(output).not.toContain("Button")
+    })
+
+    it("should remove entire import if no specifiers left", () => {
+      const code = `
+        import React from "react"
+        import { Button } from "@planningcenter/tapestry-react"
+        const component = () => null
+      `
+      const source = j(code)
+      const tapestryImport = source
+        .find(j.ImportDeclaration)
+        .filter(
+          (path) => path.value.source.value === "@planningcenter/tapestry-react"
+        )
+        .at(0)
+
+      const result = removeImportFromDeclaration(tapestryImport.get(), "Button")
+
+      expect(result).toBe(true)
+      const output = source.toSource()
+      expect(output).not.toContain("@planningcenter/tapestry-react")
+      expect(output).toContain('import React from "react"') // Other imports should remain
+    })
+
+    it("should return false if import not found", () => {
+      const code = `import { Button } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      const result = removeImportFromDeclaration(importPath.get(), "Link")
+
+      expect(result).toBe(false)
+      const output = source.toSource()
+      expect(output).toContain("Button") // Should be unchanged
+    })
+
+    it("should handle single import removal", () => {
+      const code = `import { Button } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      const result = removeImportFromDeclaration(importPath.get(), "Button")
+
+      expect(result).toBe(true)
+      expect(source.find(j.ImportDeclaration).length).toBe(0)
+    })
+
+    it("should preserve other specifiers", () => {
+      const code = `import { Button, Link, Input } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      const result = removeImportFromDeclaration(importPath.get(), "Link")
+
+      expect(result).toBe(true)
+      const output = source.toSource()
+      expect(output).toContain("Button")
+      expect(output).toContain("Input")
+      expect(output).not.toContain("Link")
+      expect(output).toContain(
+        'import { Button, Input } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

package/src/components/shared/componentTransformUtilities.ts

@@ -0,0 +1,280 @@
+import {
+  ASTPath,
+  Collection,
+  ImportSpecifier,
+  JSCodeshift,
+  JSXOpeningElement,
+  Transform,
+} from "jscodeshift"
+
+import { ComponentTransformConfig } from "./transformConfig"
+
+/**
+ * Generic import name getter that works with any package
+ */
+export function getImportName(
+  importName: string,
+  packageName: string,
+  { source, j }: { j: JSCodeshift; source: Collection }
+): string | null {
+  let localName: string | null = null
+
+  source
+    .find(j.ImportDeclaration, {
+      source: { value: packageName },
+    })
+    .forEach((path) => {
+      const specifiers = path.value.specifiers || []
+
+      specifiers.forEach((spec) => {
+        if (
+          spec.type === "ImportSpecifier" &&
+          spec.imported?.name === importName
+        ) {
+          localName = (spec.local?.name as string) || importName
+        }
+      })
+    })
+
+  return localName
+}
+
+/**
+ * Checks if a component is already imported from sources other than the specified package
+ */
+export function hasConflictingImport(
+  componentName: string,
+  excludePackage: string,
+  { source, j }: { j: JSCodeshift; source: Collection }
+): boolean {
+  const conflictingImport = source.find(j.ImportDeclaration).filter((path) => {
+    if (path.value.source.value === excludePackage) {
+      return false
+    }
+
+    return (
+      path.value.specifiers?.some(
+        (spec) =>
+          (spec.type === "ImportSpecifier" &&
+            spec.imported?.name === componentName) ||
+          (spec.type === "ImportDefaultSpecifier" &&
+            spec.local?.name === componentName)
+      ) || false
+    )
+  })
+
+  return conflictingImport.length > 0
+}
+
+/**
+ * Transforms JSX element names (both opening and closing tags)
+ */
+export function transformElementName(
+  elementPath: ASTPath<JSXOpeningElement>,
+  newName: string
+): boolean {
+  if (elementPath.value.name.type === "JSXIdentifier") {
+    elementPath.value.name.name = newName
+
+    // Update closing tag if it exists
+    const parent = elementPath.parent
+    if (
+      parent &&
+      parent.value.type === "JSXElement" &&
+      parent.value.closingElement
+    ) {
+      if (parent.value.closingElement.name.type === "JSXIdentifier") {
+        parent.value.closingElement.name.name = newName
+      }
+    }
+    return true
+  }
+  return false
+}
+
+/**
+ * Adds an import to an existing import declaration
+ */
+export function addImportToExisting(
+  importPath: Collection,
+  componentName: string,
+  j: JSCodeshift,
+  alias?: string
+): void {
+  const specifiers = importPath.get().value.specifiers || []
+
+  const hasImport = specifiers.some(
+    (spec: ImportSpecifier) =>
+      spec.type === "ImportSpecifier" && spec.imported?.name === componentName
+  )
+
+  if (!hasImport) {
+    const importSpecifier = alias
+      ? j.importSpecifier(j.identifier(componentName), j.identifier(alias))
+      : j.importSpecifier(j.identifier(componentName))
+
+    specifiers.push(importSpecifier)
+  }
+}
+
+/**
+ * Creates a new import declaration
+ */
+export function createNewImport(
+  source: Collection,
+  componentName: string,
+  packageName: string,
+  j: JSCodeshift,
+  alias?: string
+): void {
+  const importSpecifier = alias
+    ? j.importSpecifier(j.identifier(componentName), j.identifier(alias))
+    : j.importSpecifier(j.identifier(componentName))
+
+  const lastImport = source.find(j.ImportDeclaration).at(-1)
+  if (lastImport.length > 0) {
+    lastImport.insertAfter(
+      j.importDeclaration([importSpecifier], j.stringLiteral(packageName))
+    )
+  } else {
+    const program = source.find(j.Program)
+    if (program.length > 0) {
+      program
+        .get("body", 0)
+        .insertBefore(
+          j.importDeclaration([importSpecifier], j.stringLiteral(packageName))
+        )
+    }
+  }
+}
+
+/**
+ * Removes an import from an import declaration and cleans up empty imports
+ */
+export function removeImportFromDeclaration(
+  importPath: Collection,
+  componentName: string
+): boolean {
+  const specifiers = importPath.get().value.specifiers || []
+
+  const importIndex = specifiers.findIndex(
+    (spec: ImportSpecifier) =>
+      spec.type === "ImportSpecifier" && spec.imported?.name === componentName
+  )
+
+  if (importIndex >= 0) {
+    specifiers.splice(importIndex, 1)
+
+    // Remove entire import if no specifiers left
+    if (specifiers.length === 0) {
+      importPath.get().replace()
+    }
+    return true
+  }
+  return false
+}
+
+/**
+ * Main function to create a component transform based on configuration
+ */
+export function createComponentTransform(
+  config: ComponentTransformConfig
+): Transform {
+  return (fileInfo, api) => {
+    const j = api.jscodeshift
+    const source = j(fileInfo.source)
+    let hasChanges = false
+
+    // Get the local name of the source component
+    const sourceComponentName = getImportName(
+      config.fromComponent,
+      config.fromPackage,
+      { j, source }
+    )
+
+    // Only proceed if source component is imported
+    if (!sourceComponentName) {
+      return null
+    }
+
+    // Check for conflicting imports
+    const hasConflict = hasConflictingImport(
+      config.toComponent,
+      config.toPackage,
+      { j, source }
+    )
+
+    const targetComponentName = hasConflict
+      ? config.conflictAlias || `T${config.toComponent}`
+      : config.toComponent
+
+    // Transform matching JSX elements
+    source
+      .find(j.JSXOpeningElement, { name: { name: sourceComponentName } })
+      .forEach((path) => {
+        const element = path.parent.value
+
+        if (config.condition(element)) {
+          if (transformElementName(path, targetComponentName)) {
+            hasChanges = true
+          }
+        }
+      })
+
+    if (hasChanges) {
+      // Handle import management
+      manageImports(source, config, sourceComponentName, targetComponentName, j)
+    }
+
+    return hasChanges ? source.toSource() : null
+  }
+}
+
+/**
+ * Manages imports after transformation - adds target imports and removes unused source imports
+ */
+function manageImports(
+  source: Collection,
+  config: ComponentTransformConfig,
+  sourceComponentName: string,
+  targetComponentName: string,
+  j: JSCodeshift
+): void {
+  // Check if source component is still being used
+  const stillUsesSource =
+    source.find(j.JSXOpeningElement, {
+      name: { name: sourceComponentName },
+    }).length > 0
+
+  // Handle source package import cleanup
+  const sourceImport = source
+    .find(j.ImportDeclaration, {
+      source: { value: config.fromPackage },
+    })
+    .at(0)
+
+  if (sourceImport.length > 0 && !stillUsesSource) {
+    removeImportFromDeclaration(sourceImport, config.fromComponent)
+  }
+
+  // Handle target package import addition
+  const targetImport = source
+    .find(j.ImportDeclaration, {
+      source: { value: config.toPackage },
+    })
+    .at(0)
+
+  if (targetImport.length > 0) {
+    const alias =
+      targetComponentName !== config.toComponent
+        ? targetComponentName
+        : undefined
+    addImportToExisting(targetImport, config.toComponent, j, alias)
+  } else {
+    const alias =
+      targetComponentName !== config.toComponent
+        ? targetComponentName
+        : undefined
+    createNewImport(source, config.toComponent, config.toPackage, j, alias)
+  }
+}