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

package/package.json

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

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/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}`)