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

package/package.json

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

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/button/transforms/iconLeftToPrefix.ts

@@ -8,7 +8,7 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("iconLeft"),
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j, options, source }) => {
     const name = addImport({
       component: "Icon",
       conflictAlias: "TRIcon",
@@ -25,7 +25,7 @@ const transform = attributeTransformFactory({
     })
     if (!updatedElement) return false
 
-    transformAttributeName("iconLeft", "prefix", { element })
+    transformAttributeName("iconLeft", "prefix", { element, j, options })
     return true
   },
 })

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

@@ -8,7 +8,7 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("iconRight"),
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j, options, source }) => {
     const name = addImport({
       component: "Icon",
       conflictAlias: "TRIcon",
@@ -25,7 +25,7 @@ const transform = attributeTransformFactory({
     })
     if (!updatedElement) return false
 
-    transformAttributeName("iconRight", "suffix", { element })
+    transformAttributeName("iconRight", "suffix", { element, j, options })
     return true
   },
 })

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

@@ -1,5 +1,6 @@
 import { JSXIdentifier } from "jscodeshift"
 
+import { addComment } from "../../shared/actions/addComment"
 import { convertAttributeFromObjectToJSXElement } from "../../shared/actions/convertAttributeFromObjectToJSXElement"
 import { removeUnusedImport } from "../../shared/actions/removeUnusedImport"
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
@@ -10,7 +11,7 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("icon"),
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j, options, source }) => {
     const name = addImport({
       component: "Icon",
       conflictAlias: "TRIcon",
@@ -46,6 +47,17 @@ const transform = attributeTransformFactory({
       source,
     })
 
+    if (options?.verbose) {
+      addComment({
+        commentKind: "change",
+        element,
+        j,
+        scope: "component",
+        source,
+        text: `converted Button with icon prop to IconButton`,
+      })
+    }
+
     return true
   },
 })

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

@@ -6,8 +6,8 @@ const transform = attributeTransformFactory({
   condition: hasAttribute("innerRef"),
   targetComponent: "Button",
   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/button/transforms/spinnerToLoadingButton.ts

@@ -6,8 +6,8 @@ export default attributeTransformFactory({
   condition: hasAttribute("spinner"),
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element) => {
-    transformAttributeName("spinner", "loading", { element })
+  transform: (element, { j, options }) => {
+    transformAttributeName("spinner", "loading", { element, j, options })
 
     return true
   },

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

@@ -8,11 +8,11 @@ const transform: Transform = attributeTransformFactory({
   condition: hasAttribute("title"),
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element: JSXElement) =>
+  transform: (element: JSXElement, { j, options }) =>
     transformAttributeName(
       "title",
       () => (hasAttribute("icon")(element) ? "aria-label" : "label"),
-      { element }
+      { element, j, options }
     ),
 })
 

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/components/shared/actions/addComment.ts

@@ -12,14 +12,16 @@ export function addComment({
   j,
   source,
   scope,
+  commentKind = "todo",
 }: {
+  commentKind?: "todo" | "change"
   element: JSXElement
   j: JSCodeshift
   scope: string
   source: Collection
   text: string
 }) {
-  const commentText = formatComment(text, scope)
+  const commentText = formatComment(text, scope, commentKind)
   if (tryInsertJSXComment(source, element, commentText, j)) {
     return
   }
@@ -64,6 +66,11 @@ function tryInsertJSXComment(
   return found
 }
 
-export function formatComment(text: string, scope: string): string {
-  return ` TODO: tapestry-migration (${scope}): ${text} `
+export function formatComment(
+  text: string,
+  scope: string,
+  commentKind: "todo" | "change" = "todo"
+): string {
+  const prefix = commentKind === "change" ? "CHANGED" : "TODO"
+  return ` ${prefix}: tapestry-migration (${scope}): ${text} `
 }

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

@@ -6,8 +6,10 @@ export function addCommentToAttribute({
   text,
   attribute,
   j,
+  commentKind = "todo",
 }: {
   attribute: JSXAttribute | JSXSpreadAttribute
+  commentKind?: "todo" | "change"
   j: JSCodeshift
   text: string
 }) {
@@ -15,7 +17,7 @@ export function addCommentToAttribute({
     ((attribute.type === "JSXAttribute" && attribute.name.name) as string) ||
     "spreadAttribute"
   const comment = j.commentBlock(
-    formatComment(text, attributeName),
+    formatComment(text, attributeName, commentKind),
     true,
     false
   )

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

@@ -1,11 +1,16 @@
-import { JSXElement } from "jscodeshift"
+import { JSCodeshift, JSXElement, Options } from "jscodeshift"
 
 import { findAttribute } from "../findAttribute"
+import { addCommentToAttribute } from "./addCommentToAttribute"
 
 export function transformAttributeName(
   name: string,
   nameTransform: string | ((element: JSXElement) => string),
-  { element }: { element: JSXElement }
+  {
+    element,
+    j,
+    options,
+  }: { element: JSXElement; j?: JSCodeshift; options?: Options }
 ): boolean {
   if (!nameTransform) return false
   const attributes = element.openingElement.attributes || []
@@ -16,5 +21,14 @@ export function transformAttributeName(
     typeof nameTransform === "string" ? nameTransform : nameTransform(element)
   attribute.name.name = resolvedName
 
+  if (options?.verbose && j && attribute.type === "JSXAttribute") {
+    addCommentToAttribute({
+      attribute,
+      commentKind: "change",
+      j,
+      text: `renamed from ${name}`,
+    })
+  }
+
   return true
 }

package/src/components/shared/transformFactories/attributeCombineFactory.ts

@@ -3,10 +3,12 @@ import {
   JSCodeshift,
   JSXAttribute,
   JSXElement,
+  Options,
   Transform,
 } from "jscodeshift"
 
 import { addAttribute, Conditional } from "../actions/addAttribute"
+import { addCommentToAttribute } from "../actions/addCommentToAttribute"
 import { getAttribute } from "../actions/getAttribute"
 import { removeAttribute } from "../actions/removeAttribute"
 import { hasAttribute } from "../conditions/hasAttribute"
@@ -263,7 +265,11 @@ export function attributeCombineFactory({
     targetPackage: packageName,
     transform: (
       element: JSXElement,
-      { j, source }: { j: JSCodeshift; source: Collection }
+      {
+        j,
+        options,
+        source,
+      }: { j: JSCodeshift; options: Options; source: Collection }
     ) => {
       const attributes: AttributeWithName[] = sourceAttributes.map(
         (name: string) => ({
@@ -294,6 +300,32 @@ export function attributeCombineFactory({
       }
       addAttribute({ element, j, name: targetAttribute, value: mappingResult })
 
+      if (options?.verbose) {
+        const addedAttr = getAttribute({ element, name: targetAttribute })
+        if (addedAttr && addedAttr.type === "JSXAttribute") {
+          const v1 = getAttributeStringValue(
+            attributes[0].attribute,
+            defaults[sourceAttributes[0]] || "",
+            valueNormalizers[sourceAttributes[0]]
+          )
+          const v2 = getAttributeStringValue(
+            attributes[1].attribute,
+            defaults[sourceAttributes[1]] || "",
+            valueNormalizers[sourceAttributes[1]]
+          )
+          const fromParts = [
+            `${sourceAttributes[0]}=${v1 ?? "<unsupported>"}`,
+            `${sourceAttributes[1]}=${v2 ?? "<unsupported>"}`,
+          ]
+          addCommentToAttribute({
+            attribute: addedAttr,
+            commentKind: "change",
+            j,
+            text: `derived from ${fromParts.join(" ")}`,
+          })
+        }
+      }
+
       return true
     },
   })

package/src/components/shared/transformFactories/stylePropTransformFactory.ts

@@ -13,6 +13,7 @@ import {
   stylePropNames,
 } from "../../../../dist/tapestry-react-shim.cjs"
 import { addComment } from "../../shared/actions/addComment"
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
 import { getAttribute } from "../../shared/actions/getAttribute"
 import { removeAttribute } from "../../shared/actions/removeAttribute"
 import { attributeTransformFactory } from "./attributeTransformFactory"
@@ -323,6 +324,25 @@ export function stylePropTransformFactory(config: {
         // Only apply styles if there are actual CSS properties to add
         if (Object.keys(styles).length > 0) {
           applyStylesToComponent({ element, j, styles })
+
+          if (options.verbose) {
+            const styleAttr = getAttribute({ element, name: "style" })
+            if (styleAttr && styleAttr.type === "JSXAttribute") {
+              const folded = Object.keys(allStyleProps)
+              const direct = Object.keys(directStyleProps)
+              const parts = [] as string[]
+              if (folded.length) parts.push(`props: ${folded.join(", ")}`)
+              if (direct.length) parts.push(`direct: ${direct.join(", ")}`)
+              if (parts.length) {
+                addCommentToAttribute({
+                  attribute: styleAttr,
+                  commentKind: "change",
+                  j,
+                  text: `migrated style from ${parts.join("; ")}`,
+                })
+              }
+            }
+          }
         }
       } catch (error) {
         console.log("Error processing style props:", error)

package/src/reportGenerator.ts

@@ -12,6 +12,7 @@ interface CommentData {
   line: number
   scope: string
   text: string
+  type: "todo" | "changed"
 }
 
 interface CommentStats {
@@ -20,6 +21,7 @@ interface CommentStats {
   files: string[]
   normalizedText: string
   scope: string
+  type: "todo" | "changed"
   weight: number
 }
 
@@ -60,14 +62,17 @@ function extractCommentsFromFile(filePath: string): CommentData[] {
   // Match both JSX and regular comment formats:
   // {/* TODO: tapestry-migration (scope): text */}
   // /* TODO: tapestry-migration (scope): text */
+  // {/* CHANGED: tapestry-migration (scope): text */}
+  // /* CHANGED: tapestry-migration (scope): text */
   // Use lazy matching with [\s\S]*? to capture everything including * until we hit the closing */
   const commentRegex =
-    /(?:\{\/\*|\/\*)\s*TODO:\s*tapestry-migration\s*\(([^)]+)\):\s*([\s\S]*?)\s*\*\/\}?/g
+    /(?:\{\/\*|\/\*)\s*(TODO|CHANGED):\s*tapestry-migration\s*\(([^)]+)\):\s*([\s\S]*?)\s*\*\/\}?/g
 
   let match
   while ((match = commentRegex.exec(content)) !== null) {
-    const scope = match[1].trim()
-    const text = match[2].trim()
+    const commentType = match[1].trim().toLowerCase() as "todo" | "changed"
+    const scope = match[2].trim()
+    const text = match[3].trim()
 
     // Calculate line number
     const beforeMatch = content.substring(0, match.index)
@@ -78,6 +83,7 @@ function extractCommentsFromFile(filePath: string): CommentData[] {
       line,
       scope,
       text,
+      type: commentType,
     })
   }
 
@@ -228,7 +234,7 @@ function aggregateComments(
 
   for (const comment of comments) {
     const normalizedText = normalizeCommentText(comment.text)
-    const key = `${comment.scope}|||${normalizedText}`
+    const key = `${comment.type}|||${comment.scope}|||${normalizedText}`
 
     if (statsMap.has(key)) {
       const stats = statsMap.get(key)!
@@ -248,6 +254,7 @@ function aggregateComments(
         files: [comment.file],
         normalizedText,
         scope: comment.scope,
+        type: comment.type,
         weight,
       })
     }
@@ -314,6 +321,19 @@ function generateMarkdownReport(
   lines.push(`- **Total Comments:** ${totalComments}`)
   lines.push(`- **Unique Comment Types:** ${uniqueCommentTypes}`)
   lines.push(`- **Affected Files:** ${affectedFiles}`)
+
+  // Add breakdown by comment type
+  const todoComments = allComments.filter((c) => c.type === "todo")
+  const changedComments = allComments.filter((c) => c.type === "changed")
+  lines.push("")
+  lines.push("### Comment Breakdown")
+  lines.push("")
+  lines.push(
+    `- **TODO Comments:** ${todoComments.length} (requires manual attention)`
+  )
+  lines.push(
+    `- **CHANGED Comments:** ${changedComments.length} (automatic transformations)`
+  )
   lines.push("")
   lines.push("### Effort by Difficulty")
   lines.push("")
@@ -373,7 +393,9 @@ function generateMarkdownReport(
     lines.push("")
 
     for (const stat of scopeStats) {
-      lines.push(`#### ${stat.normalizedText}`)
+      const typeLabel = stat.type === "changed" ? "CHANGED" : "TODO"
+      const typeEmoji = stat.type === "changed" ? "✅" : "⚠️"
+      lines.push(`#### ${typeEmoji} [${typeLabel}] ${stat.normalizedText}`)
       lines.push("")
       lines.push(`- **Occurrences:** ${stat.count}`)
       lines.push(`- **Files affected:** ${stat.files.length}`)