@planningcenter/tapestry-migration-cli 2.2.0-rc.5 → 2.2.0

package/src/components/shared/actions/getAttribute.ts

@@ -0,0 +1,18 @@
+import { JSCodeshift, JSXAttribute, JSXElement } from "jscodeshift"
+
+export function getAttribute({
+  element,
+
+  name,
+}: {
+  element: JSXElement
+  name: string
+}) {
+  const attributes = element.openingElement.attributes || []
+  const attribute = attributes.find(
+    (attr) => attr.type === "JSXAttribute" && attr.name.name === name
+  )
+  if (!attribute) return
+
+  return attribute as JSXAttribute
+}

package/src/components/shared/actions/getAttributeValueAsProps.ts

@@ -0,0 +1,57 @@
+import {
+  JSCodeshift,
+  JSXAttribute,
+  JSXElement,
+  JSXSpreadAttribute,
+} from "jscodeshift"
+
+import { getAttribute } from "./getAttribute"
+
+export function getAttributeValueAsProps({
+  j,
+  element,
+  name,
+  stringValueKey,
+}: {
+  element: JSXElement
+  j: JSCodeshift
+  name: string
+  stringValueKey?: string
+}): JSXSpreadAttribute[] {
+  const attribute = getAttribute({ element, name })
+  if (attribute && attribute.value) {
+    if (attribute.value.type === "StringLiteral") {
+      return stringToProps({ attribute, j, stringValueKey })
+    }
+    if (attribute.value.type === "JSXExpressionContainer") {
+      if (attribute.value.expression.type !== "JSXEmptyExpression") {
+        return [j.jsxSpreadAttribute(attribute.value.expression)]
+      }
+    } else {
+      return [j.jsxSpreadAttribute(attribute.value)]
+    }
+  }
+
+  return []
+}
+
+function stringToProps({
+  attribute,
+  j,
+  stringValueKey,
+}: {
+  attribute: JSXAttribute
+  j: JSCodeshift
+  stringValueKey?: string
+}): JSXSpreadAttribute[] {
+  if (!attribute.value) return []
+  if (stringValueKey === undefined) return []
+
+  return [
+    j.jsxSpreadAttribute(
+      j.objectExpression([
+        j.objectProperty(j.identifier(stringValueKey), attribute.value),
+      ])
+    ),
+  ]
+}

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,
+  })
 }