@planningcenter/tapestry-migration-cli 2.4.0-rc.10 → 2.4.0-rc.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.4.0-rc.10",
+  "version": "2.4.0-rc.11",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cb64c1483123040f674d56065cb108dbb10ca985"
+  "gitHead": "284e43162c5ec8403699fbfec99ae235a380a7dc"
 }

package/src/components/link/index.ts

@@ -4,6 +4,7 @@ import childrenToLabel from "./transforms/childrenToLabel"
 import convertStyleProps from "./transforms/convertStyleProps"
 import inlineMemberToKind from "./transforms/inlineMemberToKind"
 import inlinePropToKind from "./transforms/inlinePropToKind"
+import moveLinkImport from "./transforms/moveLinkImport"
 import removeAs from "./transforms/removeAs"
 import reviewStyles from "./transforms/reviewStyles"
 import targetBlankToExternal from "./transforms/targetBlankToExternal"
@@ -24,6 +25,7 @@ const transform: Transform = (fileInfo, api, options) => {
     reviewStyles,
     convertStyleProps,
     unsupportedProps,
+    moveLinkImport,
   ]
 
   for (const individualTransform of transforms) {

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

@@ -0,0 +1,295 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./moveLinkImport"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("moveLinkImport transform", () => {
+  describe("basic transformations", () => {
+    it("should move Link import from tapestry-react to tapestry", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry";
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle multiple Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/home">Home</Link>
+      <Link href="/about">About</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry";
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/home">Home</Link>
+      <Link href="/about">About</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should preserve other imports from tapestry-react", () => {
+      const input = `
+import { Link, Button, Input } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button, Input } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Link href="/test">Test</Link>')
+      expect(result).not.toContain(
+        'Link, Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("import conflict handling", () => {
+    it("should use alias when Link already imported from tapestry", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry"
+import { Link as ReactLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <ReactLink href="/test">Test</ReactLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Link href="/test">Test</Link>')
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+      expect(result).not.toContain("ReactLink")
+    })
+
+    it("should handle existing tapestry import with other components", () => {
+      const input = `
+import { Button, Input } from "@planningcenter/tapestry"
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button, Input, Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Link href="/test">Test</Link>')
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform if Link is not imported from tapestry-react", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button>Test</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should handle Link with aliased import", () => {
+      const input = `
+import { Link as ReactLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <ReactLink href="/test">Test</ReactLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Link href="/test">Test</Link>')
+      expect(result).not.toContain("ReactLink")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+
+    it("should handle self-closing Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test" />
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry";
+
+export default function Test() {
+  return <Link href="/test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle Link with props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/test" kind="primary" onClick={handleClick}>Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('kind="primary"')
+      expect(result).toContain("onClick={handleClick}")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("should return null when no Link import exists", () => {
+      const input = `
+import React from "react"
+
+export default function Test() {
+  return <div>Hello</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when Link already imported from tapestry", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return <Link href="/test">Test</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null for empty file", () => {
+      const result = applyTransform("")
+      expect(result).toBe(null)
+    })
+  })
+
+  describe("complex scenarios", () => {
+    it("should handle mixed imports and multiple components", () => {
+      const input = `
+import React from "react"
+import { Link, Button } from "@planningcenter/tapestry-react"
+import { Input } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return (
+    <form>
+      <Input name="email" />
+      <Button type="submit">Submit</Button>
+      <Link href="/cancel">Cancel</Link>
+    </form>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Input, Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Button type="submit">Submit</Button>')
+      expect(result).toContain('<Link href="/cancel">Cancel</Link>')
+      expect(result).not.toContain(
+        'Link, Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should handle Link usage in JSX expressions", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test({ showLink }) {
+  return (
+    <div>
+      {showLink && <Link href="/conditional">Conditional</Link>}
+      {items.map(item => <Link key={item.id} href={item.url}>{item.name}</Link>)}
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Link href="/conditional">Conditional</Link>')
+      expect(result).toContain(
+        "<Link key={item.id} href={item.url}>{item.name}</Link>"
+      )
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+})

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

@@ -0,0 +1,14 @@
+import { Transform } from "jscodeshift"
+
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
+
+const transform: Transform = componentTransformFactory({
+  condition: () => true,
+  conflictAlias: "TLink",
+  fromComponent: "Link",
+  fromPackage: "@planningcenter/tapestry-react",
+  toComponent: "Link",
+  toPackage: "@planningcenter/tapestry",
+})
+
+export default transform