@planningcenter/tapestry-migration-cli 2.2.1-qa-362.0 → 2.3.0-rc.10

package/src/components/shared/transformFactories/attributeTransformFactory.ts

@@ -1,4 +1,10 @@
-import { Collection, JSCodeshift, JSXElement, Transform } from "jscodeshift"
+import {
+  Collection,
+  JSCodeshift,
+  JSXElement,
+  Options,
+  Transform,
+} from "jscodeshift"
 
 import { TransformCondition } from "../types"
 import { getImportName } from "./helpers/manageImports"
@@ -8,7 +14,7 @@ import { getImportName } from "./helpers/manageImports"
  */
 export function attributeTransformFactory(config: {
   /** Condition that must be met for the transform to occur */
-  condition: TransformCondition
+  condition?: TransformCondition
   /** Component to target for attribute transformation */
   targetComponent: string
   /** Package the target component is imported from */
@@ -16,10 +22,10 @@ export function attributeTransformFactory(config: {
   /** Function that performs the actual attribute transformation */
   transform: (
     element: JSXElement,
-    resources: { j: JSCodeshift; source: Collection }
+    resources: { j: JSCodeshift; options: Options; source: Collection }
   ) => boolean
 }): Transform {
-  return (fileInfo, api) => {
+  return (fileInfo, api, options) => {
     const j = api.jscodeshift
     const source = j(fileInfo.source)
     let hasChanges = false
@@ -36,14 +42,16 @@ export function attributeTransformFactory(config: {
       return null
     }
 
+    const { condition = () => true, transform } = config
+
     // Find and transform matching JSX elements
     source
       .find(j.JSXOpeningElement, { name: { name: targetComponentName } })
       .forEach((path) => {
         const element = path.parent.value
 
-        if (config.condition(element)) {
-          if (config.transform(element, { j, source })) {
+        if (condition(element)) {
+          if (transform(element, { j, options, source })) {
             hasChanges = true
           }
         }

package/src/components/shared/transformFactories/componentTransformFactory.ts

@@ -60,7 +60,7 @@ export function componentTransformFactory(config: {
         const element = path.parent.value
 
         if (config.condition(element)) {
-          if (transformElementName(path, targetComponentName)) {
+          if (transformElementName({ element, name: targetComponentName })) {
             hasChanges = true
           }
         }

package/src/components/shared/transformFactories/helpers/addImport.test.ts

@@ -0,0 +1,278 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { addImport } from "./manageImports"
+
+const j = jscodeshift.withParser("tsx")
+
+function createSource(code: string) {
+  return j(code)
+}
+
+describe("addImport", () => {
+  describe("when component already imported from target package", () => {
+    it("should return existing import name", () => {
+      const source = createSource(
+        'import { Button } from "@planningcenter/tapestry"'
+      )
+      const result = addImport({
+        component: "Button",
+        conflictAlias: "TButton",
+        j,
+        pkg: "@planningcenter/tapestry",
+        source,
+      })
+
+      expect(result).toBe("Button")
+      // Should not modify the source
+      const imports = source.find(j.ImportDeclaration)
+      expect(imports).toHaveLength(1)
+      expect(imports.at(0).get().value.source.value).toBe(
+        "@planningcenter/tapestry"
+      )
+      expect(imports.at(0).get().value.specifiers).toHaveLength(1)
+    })
+
+    it("should return existing aliased import name", () => {
+      const source = createSource(
+        'import { Button as TapestryButton } from "@planningcenter/tapestry"'
+      )
+      const result = addImport({
+        component: "Button",
+        conflictAlias: "TButton",
+        j,
+        pkg: "@planningcenter/tapestry",
+        source,
+      })
+
+      expect(result).toBe("TapestryButton")
+    })
+  })
+
+  describe("when adding to existing import declaration", () => {
+    it("should add component to existing import without conflict", () => {
+      const source = createSource(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      const result = addImport({
+        component: "Button",
+        conflictAlias: "TButton",
+        j,
+        pkg: "@planningcenter/tapestry",
+        source,
+      })
+
+      expect(result).toBe("Button")
+
+      const imports = source.find(j.ImportDeclaration)
+      expect(imports).toHaveLength(1)
+      expect(imports.at(0).get().value.specifiers).toHaveLength(2)
+
+      const specifierNames = imports
+        .at(0)
+        .get()
+        .value.specifiers?.map(
+          (spec: { imported: { name: string }; type: string }) =>
+            spec.type === "ImportSpecifier" ? spec.imported?.name : null
+        )
+      expect(specifierNames).toContain("Link")
+      expect(specifierNames).toContain("Button")
+    })
+
+    it("should add component with auto-generated alias when conflict exists", () => {
+      const source = createSource(`
+        import { Button } from "@some/other-package"
+        import { Link } from "@planningcenter/tapestry"
+      `)
+
+      const result = addImport({
+        component: "Button",
+        conflictAlias: "TButton",
+        j,
+        pkg: "@planningcenter/tapestry",
+        source,
+      })
+
+      expect(result).toBe("TButton")
+
+      const tapestryImport = source.find(j.ImportDeclaration, {
+        source: { value: "@planningcenter/tapestry" },
+      })
+      expect(tapestryImport).toHaveLength(1)
+
+      const specifiers = tapestryImport.at(0).get().value.specifiers
+      const buttonSpec = specifiers?.find(
+        (spec: { imported: { name: string }; type: string }) =>
+          spec.type === "ImportSpecifier" && spec.imported?.name === "Button"
+      )
+      expect(buttonSpec?.local?.name).toBe("TButton")
+    })
+
+    it("should add component with custom alias when conflict exists", () => {
+      const source = createSource(`
+        import { Button } from "@some/other-package"
+        import { Link } from "@planningcenter/tapestry"
+      `)
+
+      const result = addImport({
+        component: "Button",
+        conflictAlias: "TapestryButton",
+        j,
+        pkg: "@planningcenter/tapestry",
+        source,
+      })
+
+      expect(result).toBe("TapestryButton")
+
+      const tapestryImport = source.find(j.ImportDeclaration, {
+        source: { value: "@planningcenter/tapestry" },
+      })
+      expect(tapestryImport).toHaveLength(1)
+
+      const specifiers = tapestryImport.at(0).get().value.specifiers
+      const buttonSpec = specifiers?.find(
+        (spec: { imported: { name: string }; type: string }) =>
+          spec.type === "ImportSpecifier" && spec.imported?.name === "Button"
+      )
+      expect(buttonSpec?.local?.name).toBe("TapestryButton")
+    })
+  })
+
+  describe("when creating new import declaration", () => {
+    it("should create new import without conflict", () => {
+      const source = createSource('import React from "react"')
+      const result = addImport({
+        component: "Button",
+        conflictAlias: "TButton",
+        j,
+        pkg: "@planningcenter/tapestry",
+        source,
+      })
+
+      expect(result).toBe("Button")
+
+      const imports = source.find(j.ImportDeclaration)
+      expect(imports).toHaveLength(2)
+
+      const tapestryImport = source.find(j.ImportDeclaration, {
+        source: { value: "@planningcenter/tapestry" },
+      })
+      expect(tapestryImport).toHaveLength(1)
+      expect(tapestryImport.at(0).get().value.specifiers).toHaveLength(1)
+      expect(
+        tapestryImport.at(0).get().value.specifiers?.[0].imported?.name
+      ).toBe("Button")
+    })
+
+    it("should create new import with auto-generated alias when conflict exists", () => {
+      const source = createSource(`
+        import React from "react"
+        import { Button } from "@some/other-package"
+      `)
+
+      const result = addImport({
+        component: "Button",
+        conflictAlias: "TButton",
+        j,
+        pkg: "@planningcenter/tapestry",
+        source,
+      })
+
+      expect(result).toBe("TButton")
+
+      const imports = source.find(j.ImportDeclaration)
+      expect(imports).toHaveLength(3)
+
+      const tapestryImport = source.find(j.ImportDeclaration, {
+        source: { value: "@planningcenter/tapestry" },
+      })
+      expect(tapestryImport).toHaveLength(1)
+
+      const buttonSpec = tapestryImport.at(0).get().value.specifiers?.[0]
+      expect(buttonSpec?.imported?.name).toBe("Button")
+      expect(buttonSpec?.local?.name).toBe("TButton")
+    })
+
+    it("should create new import with custom alias when conflict exists", () => {
+      const source = createSource(`
+        import React from "react"
+        import { Button } from "@some/other-package"
+      `)
+
+      const result = addImport({
+        component: "Button",
+        conflictAlias: "TapestryButton",
+        j,
+        pkg: "@planningcenter/tapestry",
+        source,
+      })
+
+      expect(result).toBe("TapestryButton")
+
+      const tapestryImport = source.find(j.ImportDeclaration, {
+        source: { value: "@planningcenter/tapestry" },
+      })
+      expect(tapestryImport).toHaveLength(1)
+
+      const buttonSpec = tapestryImport.at(0).get().value.specifiers?.[0]
+      expect(buttonSpec?.imported?.name).toBe("Button")
+      expect(buttonSpec?.local?.name).toBe("TapestryButton")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle duplicate add calls", () => {
+      const source = createSource('import React from "react"')
+
+      const result1 = addImport({
+        component: "Button",
+        conflictAlias: "TButton",
+        j,
+        pkg: "@planningcenter/tapestry",
+        source,
+      })
+
+      const result2 = addImport({
+        component: "Button",
+        conflictAlias: "TButton",
+        j,
+        pkg: "@planningcenter/tapestry",
+        source,
+      })
+
+      expect(result1).toBe("Button")
+      expect(result2).toBe("Button")
+
+      // Should still only have 2 imports (React + Button)
+      const imports = source.find(j.ImportDeclaration)
+      expect(imports).toHaveLength(2)
+
+      // Button should only appear once in the tapestry import
+      const tapestryImport = source.find(j.ImportDeclaration, {
+        source: { value: "@planningcenter/tapestry" },
+      })
+      expect(tapestryImport.at(0).get().value.specifiers).toHaveLength(1)
+    })
+
+    it("should not use conflictAlias when no conflict exists", () => {
+      const source = createSource('import React from "react"')
+
+      const result = addImport({
+        component: "Button",
+        conflictAlias: "TapestryButton",
+        j,
+        pkg: "@planningcenter/tapestry",
+        source,
+      })
+
+      expect(result).toBe("Button")
+
+      const tapestryImport = source.find(j.ImportDeclaration, {
+        source: { value: "@planningcenter/tapestry" },
+      })
+      const buttonSpec = tapestryImport.at(0).get().value.specifiers?.[0]
+      expect(buttonSpec?.imported?.name).toBe("Button")
+      expect(buttonSpec?.local).toBeNull()
+    })
+  })
+})

package/src/components/shared/transformFactories/helpers/manageImports.ts

@@ -145,6 +145,51 @@ export function removeImportFromDeclaration(
   return false
 }
 
+/**
+ * Adds an import to the source, handling conflicts and existing imports
+ * Returns the final name to use for the component (original or aliased)
+ */
+export function addImport({
+  component,
+  conflictAlias,
+  j,
+  pkg,
+  source,
+}: {
+  component: string
+  conflictAlias: string
+  j: JSCodeshift
+  pkg: string
+  source: Collection
+}): string {
+  // Check if component is already imported from the target package
+  const existingImportName = getImportName(component, pkg, { j, source })
+  if (existingImportName) {
+    return existingImportName
+  }
+
+  // Check for conflicts with imports from other packages
+  const hasConflict = hasConflictingImport(component, pkg, { j, source })
+  const finalComponentName = hasConflict ? conflictAlias : component
+  const alias =
+    finalComponentName !== component ? finalComponentName : undefined
+
+  // Handle target package import addition
+  const targetImport = source
+    .find(j.ImportDeclaration, {
+      source: { value: pkg },
+    })
+    .at(0)
+
+  if (targetImport.length > 0) {
+    addImportToExisting(targetImport, component, j, alias)
+  } else {
+    createNewImport(source, component, pkg, j, alias)
+  }
+
+  return finalComponentName
+}
+
 /**
  * Manages imports after transformation - adds target imports and removes unused source imports
  */
@@ -189,24 +234,12 @@ export function manageImports(
     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)
-  }
+  // Handle target package import addition using addImport
+  addImport({
+    component: config.toComponent,
+    conflictAlias: config.conflictAlias || targetComponentName,
+    j,
+    pkg: config.toPackage,
+    source,
+  })
 }