@planningcenter/tapestry-migration-cli 3.2.2-rc.1 → 3.2.2-rc.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.2.2-rc.1",
+  "version": "3.2.2-rc.11",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
-    "@planningcenter/tapestry": "^3.2.2-rc.1",
+    "@planningcenter/tapestry": "^3.2.2-rc.11",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "682f28ae48ebbfee7f2491adc0019c1959272ee6"
+  "gitHead": "d64a6e07db10af8f16bc160ea3857d30524d68e3"
 }

package/src/components/checkbox/transforms/moveCheckboxImport.test.ts

@@ -114,6 +114,32 @@ function Test() {
     })
   })
 
+  describe("import conflict handling", () => {
+    it("should use TCheckbox alias when Checkbox is already imported from another package", () => {
+      const input = `
+import { Checkbox } from "some-other-library"
+import { Checkbox as ReactCheckbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Checkbox />
+      <ReactCheckbox label="Test" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('import { Checkbox } from "some-other-library"')
+      expect(result).toContain(
+        'import { Checkbox as TCheckbox } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<TCheckbox")
+      expect(result).not.toContain("ReactCheckbox")
+    })
+  })
+
   describe("edge cases", () => {
     it("should handle already migrated imports", () => {
       const input = `

package/src/components/checkbox/transforms/moveCheckboxImport.ts

@@ -4,6 +4,7 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 const transform: Transform = componentTransformFactory({
   condition: () => true,
+  conflictAlias: "TCheckbox",
   fromComponent: "Checkbox",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Checkbox",

package/src/components/input/transforms/moveInputImport.test.ts

@@ -96,6 +96,32 @@ function Test() {
     })
   })
 
+  describe("import conflict handling", () => {
+    it("should use TInput alias when Input is already imported from another package", () => {
+      const input = `
+import { Input } from "some-other-library"
+import { Input as ReactInput } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input />
+      <ReactInput label="Name" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('import { Input } from "some-other-library"')
+      expect(result).toContain(
+        'import { Input as TInput } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<TInput")
+      expect(result).not.toContain("ReactInput")
+    })
+  })
+
   describe("edge cases", () => {
     it("should handle already migrated imports", () => {
       const input = `

package/src/components/input/transforms/moveInputImport.ts

@@ -5,6 +5,7 @@ import { transformableInput } from "../transformableInput"
 
 const transform: Transform = componentTransformFactory({
   condition: transformableInput,
+  conflictAlias: "TInput",
   fromComponent: "Input",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Input",

package/src/components/input/transforms/numberFieldRenameToInput.test.ts

@@ -99,6 +99,57 @@ function Test() {
     expect(importDeclarationMatches).toHaveLength(1)
   })
 
+  it("uses TInput alias when Input is already imported from another package", () => {
+    const input = `
+import { Input } from "some-other-library"
+import { NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Input />
+      <NumberField label="Amount" type="number" />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('import { Input } from "some-other-library"')
+    expect(result).toContain(
+      'import { Input as TInput } from "@planningcenter/tapestry"'
+    )
+    expect(result).toContain("<TInput")
+    expect(result).not.toContain("NumberField")
+  })
+
+  it("adds Input import when fromPackage Input is aliased", () => {
+    const input = `
+import { Input as ReactInput, NumberField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <ReactInput label="Name" />
+      <NumberField label="Amount" type="number" />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toBeNull()
+    // The renamed NumberField becomes <Input>, so an Input import is required —
+    // the aliased ReactInput in tapestry-react does not put `Input` in scope.
+    expect(result).toContain('import { Input } from "@planningcenter/tapestry"')
+    expect(result).toContain("<Input")
+    expect(result).not.toContain("NumberField")
+    // The aliased ReactInput is left untouched by this transform; the moveInputImport
+    // transform later in the pipeline will not match it (different local name) and a
+    // separate cleanup is responsible for removing unused imports.
+    expect(result).toContain("ReactInput")
+  })
+
   it("merges Input import when file already imports Input from tapestry", () => {
     const input = `
 import { Input } from "@planningcenter/tapestry"

package/src/components/input/transforms/numberFieldRenameToInput.ts

@@ -2,6 +2,7 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 export default componentTransformFactory({
   condition: () => true,
+  conflictAlias: "TInput",
   fromComponent: "NumberField",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Input",

package/src/components/radio/transforms/moveRadioImport.test.ts

@@ -96,6 +96,32 @@ function Test() {
     })
   })
 
+  describe("import conflict handling", () => {
+    it("should use TRadio alias when Radio is already imported from another package", () => {
+      const input = `
+import { Radio } from "some-other-library"
+import { Radio as ReactRadio } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Radio />
+      <ReactRadio label="Option" value="a" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('import { Radio } from "some-other-library"')
+      expect(result).toContain(
+        'import { Radio as TRadio } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<TRadio")
+      expect(result).not.toContain("ReactRadio")
+    })
+  })
+
   describe("edge cases", () => {
     it("should handle already migrated imports", () => {
       const input = `

package/src/components/radio/transforms/moveRadioImport.ts

@@ -4,6 +4,7 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 const transform: Transform = componentTransformFactory({
   condition: () => true,
+  conflictAlias: "TRadio",
   fromComponent: "Radio",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Radio",

package/src/components/select/transforms/moveSelectImport.test.ts

@@ -145,4 +145,28 @@ function Test() {
     expect(result).toContain("disabled")
     expect(result).toContain("onChange={() => {}}")
   })
+
+  it("should use TSelect alias when Select is already imported from another package", () => {
+    const input = `
+import { Select } from "some-other-library"
+import { Select as ReactSelect } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Select />
+      <ReactSelect label="Test" placeholder="Pick" options={[]} />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('import { Select } from "some-other-library"')
+    expect(result).toContain(
+      'import { Select as TSelect } from "@planningcenter/tapestry"'
+    )
+    expect(result).toContain("<TSelect")
+    expect(result).not.toContain("ReactSelect")
+  })
 })

package/src/components/select/transforms/moveSelectImport.ts

@@ -5,6 +5,7 @@ import { transformableSelect } from "../transformableSelect"
 
 const transform: Transform = componentTransformFactory({
   condition: transformableSelect,
+  conflictAlias: "TSelect",
   fromComponent: "Select",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Select",

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

@@ -151,12 +151,14 @@ export function removeImportFromDeclaration(
 export function addImport({
   component,
   conflictAlias,
+  fromPackage,
   j,
   pkg,
   source,
 }: {
   component: string
   conflictAlias: string
+  fromPackage?: string
   j: JSCodeshift
   pkg: string
   source: Collection
@@ -166,7 +168,28 @@ export function addImport({
     return existingImportName
   }
 
-  const hasConflict = hasConflictingImport(component, pkg, { j, source })
+  // Conflict = component imported from a package OTHER than the source/target packages.
+  // Imports from fromPackage will be migrated to pkg by another transform in the pipeline,
+  // so they don't constitute a conflict that requires aliasing.
+  const excludePackages = fromPackage ? [pkg, fromPackage] : [pkg]
+  const hasConflict = hasConflictingImport(component, excludePackages, {
+    j,
+    source,
+  })
+
+  // If the component is already imported from fromPackage under the same local name
+  // (and won't conflict with another package), the pipeline's package-move transform
+  // will migrate it later — skip adding a duplicate import here. Aliased imports from
+  // fromPackage do not put `component` itself in scope, so they must not trigger this
+  // early return.
+  const importedFromSourceName = fromPackage
+    ? getImportName(component, fromPackage, { j, source })
+    : null
+  const importedFromSource = importedFromSourceName === component
+  if (importedFromSource && !hasConflict) {
+    return component
+  }
+
   const finalComponentName = hasConflict ? conflictAlias : component
   const alias =
     finalComponentName !== component ? finalComponentName : undefined
@@ -240,6 +263,7 @@ export function manageImports(
   addImport({
     component: config.toComponent,
     conflictAlias: config.conflictAlias || targetComponentName,
+    fromPackage: config.fromPackage,
     j,
     pkg: config.toPackage,
     source,

package/src/components/text-area/transforms/moveTextAreaImport.test.ts

@@ -96,6 +96,32 @@ function Test() {
     })
   })
 
+  describe("import conflict handling", () => {
+    it("should use TTextArea alias when TextArea is already imported from another package", () => {
+      const input = `
+import { TextArea } from "some-other-library"
+import { TextArea as ReactTextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <TextArea />
+      <ReactTextArea label="Notes" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('import { TextArea } from "some-other-library"')
+      expect(result).toContain(
+        'import { TextArea as TTextArea } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<TTextArea")
+      expect(result).not.toContain("ReactTextArea")
+    })
+  })
+
   describe("edge cases", () => {
     it("should handle already migrated imports", () => {
       const input = `

package/src/components/text-area/transforms/moveTextAreaImport.ts

@@ -4,6 +4,7 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 const transform: Transform = componentTransformFactory({
   condition: () => true,
+  conflictAlias: "TTextArea",
   fromComponent: "TextArea",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "TextArea",

package/src/components/toggle-switch/transforms/moveToggleSwitchImport.test.ts

@@ -96,6 +96,34 @@ function Test() {
     })
   })
 
+  describe("import conflict handling", () => {
+    it("should use TToggleSwitch alias when ToggleSwitch is already imported from another package", () => {
+      const input = `
+import { ToggleSwitch } from "some-other-library"
+import { ToggleSwitch as ReactToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <ToggleSwitch />
+      <ReactToggleSwitch />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { ToggleSwitch } from "some-other-library"'
+      )
+      expect(result).toContain(
+        'import { ToggleSwitch as TToggleSwitch } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<TToggleSwitch")
+      expect(result).not.toContain("ReactToggleSwitch")
+    })
+  })
+
   describe("edge cases", () => {
     it("should handle already migrated imports", () => {
       const input = `

package/src/components/toggle-switch/transforms/moveToggleSwitchImport.ts

@@ -4,6 +4,7 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 const transform: Transform = componentTransformFactory({
   condition: () => true,
+  conflictAlias: "TToggleSwitch",
   fromComponent: "ToggleSwitch",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "ToggleSwitch",