@planningcenter/tapestry-migration-cli 2.4.0-rc.1 → 2.4.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.4.0-rc.1",
+  "version": "2.4.0-rc.3",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3194c750cad894cc6db7c806659074705082e986"
+  "gitHead": "4b1aa9118dae6fcb49141a4c0f9d340deaa9cfae"
 }

package/src/components/link/index.ts

@@ -1,6 +1,7 @@
 import { Transform } from "jscodeshift"
 
 import inlineToKind from "./transforms/inlineToKind"
+import removeAs from "./transforms/removeAs"
 import targetBlankToExternal from "./transforms/targetBlankToExternal"
 import toToHref from "./transforms/toToHref"
 
@@ -12,6 +13,7 @@ const transform: Transform = (fileInfo, api, options) => {
     inlineToKind,
     toToHref,
     targetBlankToExternal,
+    removeAs,
   ]
 
   for (const individualTransform of transforms) {

package/src/components/link/transforms/removeAs.test.ts

@@ -0,0 +1,192 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import removeAs from "./removeAs"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  return removeAs(
+    { path: "test.tsx", source },
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("removeAs transform", () => {
+  describe("basic transformations", () => {
+    it("should remove as='a' attribute from Link", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/home" as="a">Home</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/home">Home</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should only remove as='a' attribute, not other as values", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/home" as="a">Home</Link>
+      <Link href="/button" as="button">Button</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/home"') // Should remain
+      expect(result).not.toContain('as="a"') // Should be removed
+      expect(result).toContain('as="button"') // Should remain
+    })
+
+    it("should preserve other attributes while removing as='a'", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/external" 
+      as="a" 
+      className="nav-link"
+      target="_blank"
+      rel="noopener"
+    >
+      External Link
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/external"')
+      expect(result).toContain('className="nav-link"')
+      expect(result).toContain('target="_blank"')
+      expect(result).toContain('rel="noopener"')
+      expect(result).not.toContain('as="a"')
+    })
+
+    it("should handle Links without as attribute", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/internal">Internal Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made
+    })
+
+    it("should handle Links with as attribute but different value", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/button" as="button">Button Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle multiple Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/page1" as="a">Page 1</Link>
+      <Link href="/page2" as="a">Page 2</Link>
+      <Link href="/page3">Page 3</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain('as="a"') // Should be removed from both
+      expect(result).toContain('href="/page1"')
+      expect(result).toContain('href="/page2"')
+      expect(result).toContain('href="/page3"') // Should remain unchanged
+    })
+
+    it("should handle self-closing Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" as="a" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/external"')
+      expect(result).not.toContain('as="a"')
+    })
+
+    it("should handle dynamic as values", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" as={isExternal ? "a" : "button"}>Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made for dynamic values
+    })
+  })
+
+  describe("import handling", () => {
+    it("should only transform when Link is imported from correct package", () => {
+      const input = `
+import { Link } from "react-router-dom"
+
+export default function Test() {
+  return <Link to="/external" as="a">External Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made
+    })
+
+    it("should handle aliased imports", () => {
+      const input = `
+import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryLink href="/external" as="a">External Link</TapestryLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('href="/external"')
+      expect(result).not.toContain('as="a"')
+    })
+  })
+})

package/src/components/link/transforms/removeAs.ts

@@ -0,0 +1,17 @@
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttributeValue } from "../../shared/conditions/hasAttributeValue"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform = attributeTransformFactory({
+  condition: hasAttributeValue("as", "a"),
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    // Remove as attribute
+    removeAttribute("as", { element, j, source })
+
+    return true
+  },
+})
+
+export default transform