@planningcenter/tapestry-migration-cli 2.5.0-rc.2 → 2.5.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.5.0-rc.2",
+  "version": "2.5.0-rc.4",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "699c1e99cb5f9e0dec6ce4a1558e3f5d17be9e42"
+  "gitHead": "914423c21b5fea1b57801efb46cea9c181e8896f"
 }

package/src/components/button/transforms/childrenToLabel.test.ts

@@ -5,12 +5,12 @@ import transform from "./childrenToLabel"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string | null {
+function applyTransform(source: string, verbose = false): string | null {
   const fileInfo = { path: "test.tsx", source }
   return transform(
     fileInfo,
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
 }
 
@@ -360,5 +360,21 @@ function Test() {
         "take time to find the right text for the component"
       )
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain('<Button label="Save" />')
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (children): children converted to label prop"
+      )
+    })
   })
 })

package/src/components/button/transforms/childrenToLabel.ts

@@ -15,7 +15,7 @@ const transform: Transform = attributeTransformFactory({
   condition: hasChildren,
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j, options, source }) => {
     if (hasAttribute("label")(element)) {
       addComment({
         element,
@@ -32,6 +32,18 @@ const transform: Transform = attributeTransformFactory({
     if (isSimpleText && textContent) {
       addAttribute({ element, j, name: "label", value: textContent })
       removeChildren(element)
+
+      if (options?.verbose) {
+        addComment({
+          commentKind: "change",
+          element,
+          j,
+          scope: "children",
+          source,
+          text: buildComment("children converted to label prop", false),
+        })
+      }
+
       return true
     } else if (!isSimpleText) {
       addComment({

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

@@ -5,12 +5,12 @@ import transform from "./childrenToLabel"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string {
+function applyTransform(source: string, verbose = false): string {
   const fileInfo = { path: "test.tsx", source }
   const result = transform(
     fileInfo,
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
   return result || source
 }
@@ -142,5 +142,21 @@ function Test() {
         '<Checkbox checked disabled label="Accept terms" />'
       )
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox>Accept terms</Checkbox>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain('<Checkbox label="Accept terms" />')
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (children): children converted to label prop"
+      )
+    })
   })
 })

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

@@ -15,7 +15,7 @@ const transform: Transform = attributeTransformFactory({
   condition: hasChildren,
   targetComponent: "Checkbox",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j, options, source }) => {
     if (hasAttribute("label")(element)) {
       addComment({
         element,
@@ -32,6 +32,18 @@ const transform: Transform = attributeTransformFactory({
     if (isSimpleText && textContent) {
       addAttribute({ element, j, name: "label", value: textContent })
       removeChildren(element)
+
+      if (options?.verbose) {
+        addComment({
+          commentKind: "change",
+          element,
+          j,
+          scope: "children",
+          source,
+          text: buildComment("children converted to label prop", false),
+        })
+      }
+
       return true
     } else if (!isSimpleText) {
       addComment({

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

@@ -5,12 +5,12 @@ import transform from "./innerRefToRef"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string {
+function applyTransform(source: string, verbose = false): string {
   const fileInfo = { path: "test.tsx", source }
   const result = transform(
     fileInfo,
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
   return result || source
 }
@@ -157,5 +157,23 @@ function Test() {
       expect(result).toContain("disabled")
       expect(result).not.toContain("innerRef=")
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const checkboxRef = React.useRef()
+  return <Checkbox innerRef={checkboxRef} label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain("ref={checkboxRef}")
+      expect(result).not.toContain("innerRef=")
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (ref): renamed from innerRef"
+      )
+    })
   })
 })

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

@@ -6,8 +6,8 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("innerRef"),
   targetComponent: "Checkbox",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element) => {
-    return transformAttributeName("innerRef", "ref", { element })
+  transform: (element, { j, options }) => {
+    return transformAttributeName("innerRef", "ref", { element, j, options })
   },
 })
 

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

@@ -5,12 +5,12 @@ import transform from "./childrenToLabel"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string | null {
+function applyTransform(source: string, verbose = false): string | null {
   const fileInfo = { path: "test.tsx", source }
   return transform(
     fileInfo,
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
 }
 
@@ -327,5 +327,21 @@ function Test() {
         "If icons are used in the component, you can use prefix and suffix to correctly display those icons"
       )
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Link href="/home">Home</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain('<Link href="/home" label="Home" />')
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (children): children converted to label prop"
+      )
+    })
   })
 })

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

@@ -15,7 +15,7 @@ const transform: Transform = attributeTransformFactory({
   condition: hasChildren,
   targetComponent: "Link",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j, options, source }) => {
     if (hasAttribute("label")(element)) {
       addComment({
         element,
@@ -32,6 +32,18 @@ const transform: Transform = attributeTransformFactory({
     if (isSimpleText && textContent) {
       addAttribute({ element, j, name: "label", value: textContent })
       removeChildren(element)
+
+      if (options?.verbose) {
+        addComment({
+          commentKind: "change",
+          element,
+          j,
+          scope: "children",
+          source,
+          text: buildComment("children converted to label prop", false),
+        })
+      }
+
       return true
     } else if (!isSimpleText) {
       addComment({

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

@@ -5,12 +5,12 @@ import transform from "./innerRefToRef"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string | null {
+function applyTransform(source: string, verbose = false): string | null {
   const fileInfo = { path: "test.tsx", source }
   return transform(
     fileInfo,
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
 }
 
@@ -166,5 +166,22 @@ export default function Test() {
       const result = applyTransform(input)
       expect(result).toBe(expected)
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link innerRef={linkRef}>Go somewhere</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain("ref={linkRef}")
+      expect(result).not.toContain("innerRef=")
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (ref): renamed from innerRef"
+      )
+    })
   })
 })

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

@@ -6,8 +6,8 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("innerRef"),
   targetComponent: "Link",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element) => {
-    return transformAttributeName("innerRef", "ref", { element })
+  transform: (element, { j, options }) => {
+    return transformAttributeName("innerRef", "ref", { element, j, options })
   },
 })
 

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

@@ -5,11 +5,11 @@ import removeAs from "./removeAs"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string | null {
+function applyTransform(source: string, verbose = false): string | null {
   return removeAs(
     { path: "test.tsx", source },
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
 }
 
@@ -188,5 +188,21 @@ export default function Test() {
       expect(result).toContain('href="/external"')
       expect(result).not.toContain('as="a"')
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/home" as="a">Home</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).not.toContain('as="a"')
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (as): as='a' prop removed"
+      )
+    })
   })
 })

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

@@ -1,3 +1,4 @@
+import { addComment } from "../../shared/actions/addComment"
 import { removeAttribute } from "../../shared/actions/removeAttribute"
 import { hasAttributeValue } from "../../shared/conditions/hasAttributeValue"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
@@ -6,10 +7,20 @@ const transform = attributeTransformFactory({
   condition: hasAttributeValue("as", "a"),
   targetComponent: "Link",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
-    // Remove as attribute
+  transform: (element, { j, options, source }) => {
     removeAttribute("as", { element, j, source })
 
+    if (options?.verbose) {
+      addComment({
+        commentKind: "change",
+        element,
+        j,
+        scope: "as",
+        source,
+        text: "as='a' prop removed",
+      })
+    }
+
     return true
   },
 })

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

@@ -5,12 +5,12 @@ import transform from "./removeInlineProp"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string | null {
+function applyTransform(source: string, verbose = false): string | null {
   const fileInfo = { path: "test.tsx", source }
   return transform(
     fileInfo,
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
 }
 
@@ -291,5 +291,23 @@ export default function Test() {
       const result = applyTransform(input)
       expect(result).toBe(null)
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/profile" inline>Profile</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).not.toContain(" inline>")
+      expect(result).not.toContain(' inline"')
+      expect(result).not.toContain(" inline=")
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (inline): inline prop removed"
+      )
+    })
   })
 })

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

@@ -1,3 +1,4 @@
+import { addComment } from "../../shared/actions/addComment"
 import { removeAttribute } from "../../shared/actions/removeAttribute"
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
@@ -6,8 +7,20 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("inline"),
   targetComponent: "Link",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j, options, source }) => {
     removeAttribute("inline", { element, j, source })
+
+    if (options?.verbose) {
+      addComment({
+        commentKind: "change",
+        element,
+        j,
+        scope: "inline",
+        source,
+        text: "inline prop removed",
+      })
+    }
+
     return true
   },
 })

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

@@ -5,11 +5,11 @@ import targetBlankToExternal from "./targetBlankToExternal"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string | null {
+function applyTransform(source: string, verbose = false): string | null {
   return targetBlankToExternal(
     { path: "test.tsx", source },
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
 }
 
@@ -201,5 +201,21 @@ export default function Test() {
       expect(result).toContain("external")
       expect(result).not.toContain('target="_blank"')
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" target="_blank">External Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain("external")
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (external): target='_blank' converted to external prop"
+      )
+    })
   })
 })

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

@@ -1,4 +1,5 @@
 import { addAttribute } from "../../shared/actions/addAttribute"
+import { addComment } from "../../shared/actions/addComment"
 import { removeAttribute } from "../../shared/actions/removeAttribute"
 import { hasAttributeValue } from "../../shared/conditions/hasAttributeValue"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
@@ -7,14 +8,11 @@ const transform = attributeTransformFactory({
   condition: hasAttributeValue("target", "_blank"),
   targetComponent: "Link",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
-    // Remove target attribute
+  transform: (element, { j, options, source }) => {
     removeAttribute("target", { element, j, source })
 
-    // Remove rel attribute if it exists
     removeAttribute("rel", { element, j, source })
 
-    // Add external attribute as shorthand boolean
     addAttribute({
       booleanAsShorthand: true,
       element,
@@ -23,6 +21,17 @@ const transform = attributeTransformFactory({
       value: true, // This will create just "external" not "external={true}"
     })
 
+    if (options?.verbose) {
+      addComment({
+        commentKind: "change",
+        element,
+        j,
+        scope: "external",
+        source,
+        text: "target='_blank' converted to external prop",
+      })
+    }
+
     return true
   },
 })

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

@@ -5,12 +5,12 @@ import transform from "./toToHref"
 
 const j = jscodeshift.withParser("tsx")
 
-function applyTransform(source: string): string | null {
+function applyTransform(source: string, verbose = false): string | null {
   const fileInfo = { path: "test.tsx", source }
   return transform(
     fileInfo,
     { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    {}
+    { verbose }
   ) as string | null
 }
 
@@ -208,6 +208,23 @@ export default function Test({ items }) {
       expect(result).not.toContain("to={item.url}")
       expect(result).not.toContain('to="/conditional"')
     })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link to="/dashboard">Dashboard</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain('href="/dashboard"')
+      expect(result).not.toContain('to="/dashboard"')
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (href): renamed from to"
+      )
+    })
   })
 
   describe("no changes scenarios", () => {

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

@@ -6,8 +6,8 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("to"),
   targetComponent: "Link",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element) => {
-    return transformAttributeName("to", "href", { element })
+  transform: (element, { j, options }) => {
+    return transformAttributeName("to", "href", { element, j, options })
   },
 })
 

package/src/reportGenerator.ts

@@ -363,6 +363,48 @@ function generateMarkdownReport(
     lines.push(`- **${difficulty}:** ${data.count} occurrences`)
   }
 
+  lines.push("")
+  lines.push("## Automatic Changes")
+  lines.push("")
+  lines.push(
+    "The following changes were applied automatically during migration:"
+  )
+  lines.push("")
+
+  const changedStats = stats.filter((s) => s.type === "changed")
+
+  if (changedStats.length > 0) {
+    const changedByScope = new Map<string, CommentStats[]>()
+    for (const stat of changedStats) {
+      if (!changedByScope.has(stat.scope)) {
+        changedByScope.set(stat.scope, [])
+      }
+      changedByScope.get(stat.scope)!.push(stat)
+    }
+
+    for (const [scope, scopeStats] of Array.from(changedByScope.entries()).sort(
+      (a, b) => {
+        const totalA = a[1].reduce((sum, s) => sum + s.count, 0)
+        const totalB = b[1].reduce((sum, s) => sum + s.count, 0)
+        return totalB - totalA
+      }
+    )) {
+      lines.push(`### ${scope}`)
+      lines.push("")
+
+      for (const stat of scopeStats) {
+        lines.push(
+          `- **${stat.normalizedText}** (${stat.count} occurrence${stat.count > 1 ? "s" : ""})`
+        )
+      }
+
+      lines.push("")
+    }
+  } else {
+    lines.push("_No automatic changes were applied._")
+    lines.push("")
+  }
+
   lines.push("")
   lines.push("## Comments by Effort (sorted by total effort)")
   lines.push("")