@planningcenter/tapestry-migration-cli 3.3.2-qa-889.0 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.3.2-qa-889.0",
+  "version": "3.4.0",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
-    "@planningcenter/tapestry": "^3.3.2-qa-889.0",
+    "@planningcenter/tapestry": "^3.4.0",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -50,5 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5d4e12ea350c045af51b73eb5c4e2799589b110d"
+  "gitHead": "0a541a2444b2d89e7fab714a3c6772336479b0fd"
 }

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

@@ -27,10 +27,17 @@ const transform: Transform = attributeTransformFactory({
       return true
     }
 
-    const { isSimpleText, textContent } = extractTextContent(element.children!)
+    const { expression, isSimpleText, textContent } = extractTextContent(
+      element.children!
+    )
 
-    if (isSimpleText && textContent) {
-      addAttribute({ element, j, name: "label", value: textContent })
+    if (expression || (isSimpleText && textContent)) {
+      addAttribute({
+        element,
+        j,
+        name: "label",
+        value: expression ?? textContent,
+      })
       removeChildren(element)
 
       if (options?.verbose) {

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

@@ -21,7 +21,6 @@ const transform = attributeTransformFactory({
     })
     const iconButtonName = addImport({
       component: "IconButton",
-      conflictAlias: "TIconButton",
       j,
       pkg: "@planningcenter/tapestry",
       source,

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

@@ -4,7 +4,6 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 const transform: Transform = componentTransformFactory({
   condition: () => true,
-  conflictAlias: "TButton",
   fromComponent: "Button",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Button",

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

@@ -27,10 +27,17 @@ const transform: Transform = attributeTransformFactory({
       return true
     }
 
-    const { isSimpleText, textContent } = extractTextContent(element.children!)
+    const { expression, isSimpleText, textContent } = extractTextContent(
+      element.children!
+    )
 
-    if (isSimpleText && textContent) {
-      addAttribute({ element, j, name: "label", value: textContent })
+    if (expression || (isSimpleText && textContent)) {
+      addAttribute({
+        element,
+        j,
+        name: "label",
+        value: expression ?? textContent,
+      })
       removeChildren(element)
 
       if (options?.verbose) {

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

@@ -4,7 +4,6 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 const transform: Transform = componentTransformFactory({
   condition: () => true,
-  conflictAlias: "TCheckbox",
   fromComponent: "Checkbox",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Checkbox",

package/src/components/input/transforms/moveInputImport.ts

@@ -5,7 +5,6 @@ import { transformableInput } from "../transformableInput"
 
 const transform: Transform = componentTransformFactory({
   condition: transformableInput,
-  conflictAlias: "TInput",
   fromComponent: "Input",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Input",

package/src/components/input/transforms/numberFieldRenameToInput.ts

@@ -2,7 +2,6 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 export default componentTransformFactory({
   condition: () => true,
-  conflictAlias: "TInput",
   fromComponent: "NumberField",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Input",

package/src/components/link/index.ts

@@ -9,7 +9,6 @@ import removeAs from "./transforms/removeAs"
 import removeInlineMember from "./transforms/removeInlineMember"
 import removeInlineProp from "./transforms/removeInlineProp"
 import reviewStyles from "./transforms/reviewStyles"
-import targetBlankToExternal from "./transforms/targetBlankToExternal"
 import tooltipToWrapper from "./transforms/tooltipToWrapper"
 import toToHref from "./transforms/toToHref"
 import unsupportedProps from "./transforms/unsupportedProps"
@@ -23,7 +22,6 @@ const transform: Transform = (fileInfo, api, options) => {
     removeInlineProp,
     tooltipToWrapper,
     toToHref,
-    targetBlankToExternal,
     innerRefToRef,
     removeAs,
     childrenToLabel,

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

@@ -81,6 +81,39 @@ function Test() {
       const result = applyTransform(input)
       expect(result).toContain('<Link href="/help" label="GetHelpNow" />')
     })
+
+    it("should convert a lone identifier expression to label prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test({ registration_form_url }) {
+  return (
+    <Link external href={registration_form_url}>
+      {registration_form_url}
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("label={registration_form_url}")
+      expect(result).not.toContain("complex children")
+      expect(result).not.toContain(">\n")
+    })
+
+    it("should convert a lone member expression to label prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+function Test({ data }) {
+  return <Link href={data.href}>{data.label}</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("label={data.label}")
+      expect(result).not.toContain("complex children")
+    })
   })
 
   describe("complex children scenarios", () => {
@@ -116,12 +149,12 @@ function Test() {
       expect(result).toContain("</Link>")
     })
 
-    it("should add comment for expression children", () => {
+    it("should add comment for conditional expression children", () => {
       const input = `
 import { Link } from "@planningcenter/tapestry-react"
 
-function Test({ linkText }) {
-  return <Link href="/home">{linkText}</Link>
+function Test({ isActive }) {
+  return <Link href="/home">{isActive ? "Active" : "Inactive"}</Link>
 }
       `.trim()
 

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

@@ -27,10 +27,17 @@ const transform: Transform = attributeTransformFactory({
       return true
     }
 
-    const { isSimpleText, textContent } = extractTextContent(element.children!)
+    const { expression, isSimpleText, textContent } = extractTextContent(
+      element.children!
+    )
 
-    if (isSimpleText && textContent) {
-      addAttribute({ element, j, name: "label", value: textContent })
+    if (expression || (isSimpleText && textContent)) {
+      addAttribute({
+        element,
+        j,
+        name: "label",
+        value: expression ?? textContent,
+      })
       removeChildren(element)
 
       if (options?.verbose) {

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

@@ -4,7 +4,6 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 const transform: Transform = componentTransformFactory({
   condition: () => true,
-  conflictAlias: "TLink",
   fromComponent: "Link",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Link",

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

@@ -1,7 +1,6 @@
 import { BUTTON_LINK_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
 import { unsupportedPropsFactory } from "../../shared/transformFactories/unsupportedPropsFactory"
 
-// Note: 'target' and 'rel' are NOT included because they are handled by targetBlankToExternal transform
 const LINK_SPECIFIC_PROPS = [
   "download",
   "external",
@@ -10,6 +9,8 @@ const LINK_SPECIFIC_PROPS = [
   "media",
   "ping",
   "referrerPolicy",
+  "rel",
+  "target",
   "type",
 ]
 

package/src/components/radio/transforms/moveRadioImport.ts

@@ -4,7 +4,6 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 const transform: Transform = componentTransformFactory({
   condition: () => true,
-  conflictAlias: "TRadio",
   fromComponent: "Radio",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Radio",

package/src/components/select/transforms/moveSelectImport.ts

@@ -5,7 +5,6 @@ import { transformableSelect } from "../transformableSelect"
 
 const transform: Transform = componentTransformFactory({
   condition: transformableSelect,
-  conflictAlias: "TSelect",
   fromComponent: "Select",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "Select",

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

@@ -1,4 +1,4 @@
-import { JSCodeshift, JSXElement } from "jscodeshift"
+import { JSCodeshift, JSXElement, JSXExpressionContainer } from "jscodeshift"
 
 export interface Conditional {
   alternate: string
@@ -6,6 +6,14 @@ export interface Conditional {
   test: string
 }
 
+type ExpressionNode = JSXExpressionContainer["expression"]
+
+function isExpressionNode(
+  value: string | boolean | Conditional | ExpressionNode
+): value is ExpressionNode {
+  return typeof value === "object" && value !== null && "type" in value
+}
+
 function formatValue(value: string | boolean, j: JSCodeshift) {
   if (typeof value === "string") {
     return j.stringLiteral(value)
@@ -27,11 +35,19 @@ export function addAttribute({
   element: JSXElement
   j: JSCodeshift
   name: string
-  value: string | boolean | Conditional | null
+  value: string | boolean | Conditional | ExpressionNode | null
 }) {
   if (value === null) return
   const attributes = element.openingElement.attributes || []
 
+  // An AST expression node is wrapped in braces, e.g. label={url}
+  if (isExpressionNode(value)) {
+    attributes.push(
+      j.jsxAttribute(j.jsxIdentifier(name), j.jsxExpressionContainer(value))
+    )
+    return
+  }
+
   if (
     typeof value === "object" &&
     "test" in value &&

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

@@ -18,7 +18,8 @@ export function createWrapper({
   wrapperPackage,
   wrapperProps = [],
 }: {
-  conflictAlias: string
+  /** Alias to use if the wrapper conflicts with an existing import. Defaults to `T${wrapperName}`. */
+  conflictAlias?: string
   element: JSXElement
   j: JSCodeshift
   source: Collection

package/src/components/shared/helpers/childrenToLabelHelpers.ts

@@ -1,11 +1,34 @@
-import { JSXElement } from "jscodeshift"
+import { JSXElement, JSXExpressionContainer } from "jscodeshift"
+
+type LabelExpression = JSXExpressionContainer["expression"]
 
 export function extractTextContent(
   children: NonNullable<JSXElement["children"]>
 ): {
+  expression?: LabelExpression
   isSimpleText: boolean
   textContent: string
 } {
+  const meaningfulChildren = children.filter(
+    (child) => !(child.type === "JSXText" && !child.value.trim())
+  )
+
+  // A lone expression that simply references a value (e.g. {url} or {data.href})
+  // is not "complex" — it can be passed straight through to the label prop.
+  const onlyChild = meaningfulChildren[0]
+  if (
+    meaningfulChildren.length === 1 &&
+    onlyChild.type === "JSXExpressionContainer" &&
+    (onlyChild.expression.type === "Identifier" ||
+      onlyChild.expression.type === "MemberExpression")
+  ) {
+    return {
+      expression: onlyChild.expression,
+      isSimpleText: false,
+      textContent: "",
+    }
+  }
+
   let textContent = ""
 
   for (const child of children) {

package/src/components/shared/transformFactories/helpers/addImport.test.ts

@@ -254,6 +254,51 @@ describe("addImport", () => {
       expect(tapestryImport.at(0).get().value.specifiers).toHaveLength(1)
     })
 
+    it("should default conflictAlias to `T${component}` when none is provided and a conflict exists", () => {
+      const source = createSource(`
+        import React from "react"
+        import { Button } from "@some/other-package"
+      `)
+
+      const result = addImport({
+        component: "Button",
+        j,
+        pkg: "@planningcenter/tapestry",
+        source,
+      })
+
+      expect(result).toBe("TButton")
+
+      const tapestryImport = source.find(j.ImportDeclaration, {
+        source: { value: "@planningcenter/tapestry" },
+      })
+      expect(tapestryImport).toHaveLength(1)
+
+      const buttonSpec = tapestryImport.at(0).get().value.specifiers?.[0]
+      expect(buttonSpec?.imported?.name).toBe("Button")
+      expect(buttonSpec?.local?.name).toBe("TButton")
+    })
+
+    it("should not alias when no conflict exists even without a conflictAlias", () => {
+      const source = createSource('import React from "react"')
+
+      const result = addImport({
+        component: "Button",
+        j,
+        pkg: "@planningcenter/tapestry",
+        source,
+      })
+
+      expect(result).toBe("Button")
+
+      const tapestryImport = source.find(j.ImportDeclaration, {
+        source: { value: "@planningcenter/tapestry" },
+      })
+      const buttonSpec = tapestryImport.at(0).get().value.specifiers?.[0]
+      expect(buttonSpec?.imported?.name).toBe("Button")
+      expect(buttonSpec?.local).toBeNull()
+    })
+
     it("should not use conflictAlias when no conflict exists", () => {
       const source = createSource('import React from "react"')
 

package/src/components/shared/transformFactories/helpers/manageImports.ts

@@ -157,7 +157,8 @@ export function addImport({
   source,
 }: {
   component: string
-  conflictAlias: string
+  /** Alias to use if the target component conflicts with an existing import. Defaults to `T${component}`. */
+  conflictAlias?: string
   fromPackage?: string
   j: JSCodeshift
   pkg: string
@@ -190,7 +191,8 @@ export function addImport({
     return component
   }
 
-  const finalComponentName = hasConflict ? conflictAlias : component
+  const resolvedConflictAlias = conflictAlias ?? `T${component}`
+  const finalComponentName = hasConflict ? resolvedConflictAlias : component
   const alias =
     finalComponentName !== component ? finalComponentName : undefined
 

package/src/components/text-area/transforms/moveTextAreaImport.ts

@@ -4,7 +4,6 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 const transform: Transform = componentTransformFactory({
   condition: () => true,
-  conflictAlias: "TTextArea",
   fromComponent: "TextArea",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "TextArea",

package/src/components/toggle-switch/transforms/moveToggleSwitchImport.ts

@@ -4,7 +4,6 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 const transform: Transform = componentTransformFactory({
   condition: () => true,
-  conflictAlias: "TToggleSwitch",
   fromComponent: "ToggleSwitch",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "ToggleSwitch",

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

@@ -1,221 +0,0 @@
-import jscodeshift from "jscodeshift"
-import { describe, expect, it } from "vitest"
-
-import targetBlankToExternal from "./targetBlankToExternal"
-
-const j = jscodeshift.withParser("tsx")
-
-function applyTransform(source: string, verbose = false): string | null {
-  return targetBlankToExternal(
-    { path: "test.tsx", source },
-    { j, jscodeshift: j, report: () => {}, stats: () => {} },
-    { verbose }
-  ) as string | null
-}
-
-describe("targetBlankToExternal transform", () => {
-  describe("basic transformations", () => {
-    it("should transform Link with target='_blank' to external", () => {
-      const input = `
-import { Link } from "@planningcenter/tapestry-react"
-
-export default function Test() {
-  return <Link href="/external" target="_blank">External Link</Link>
-}
-      `.trim()
-
-      const expected = `
-import { Link } from "@planningcenter/tapestry-react"
-
-export default function Test() {
-  return <Link href="/external" external>External Link</Link>;
-}
-      `.trim()
-
-      const result = applyTransform(input)
-      expect(result?.trim()).toBe(expected)
-    })
-
-    it("should remove target and rel attributes while adding external", () => {
-      const input = `
-import { Link } from "@planningcenter/tapestry-react"
-
-export default function Test() {
-  return (
-    <Link 
-      href="/external" 
-      target="_blank" 
-      rel="noopener noreferrer"
-      className="external-link"
-    >
-      External Link
-    </Link>
-  )
-}
-      `.trim()
-
-      const result = applyTransform(input)
-      expect(result).toContain("external")
-      expect(result).toContain('className="external-link"')
-      expect(result).not.toContain('target="_blank"')
-      expect(result).not.toContain('rel="noopener noreferrer"')
-    })
-
-    it("should only transform Links with target='_blank'", () => {
-      const input = `
-import { Link } from "@planningcenter/tapestry-react"
-
-export default function Test() {
-  return (
-    <div>
-      <Link href="/internal" target="_self">Internal Link</Link>
-      <Link href="/external" target="_blank">External Link</Link>
-    </div>
-  )
-}
-      `.trim()
-
-      const result = applyTransform(input)
-      expect(result).toContain('target="_self"') // Should remain
-      expect(result).toContain("external") // Should be added
-      expect(result).not.toContain('target="_blank"') // Should be removed
-    })
-
-    it("should handle Links without rel attribute", () => {
-      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)
-      expect(result).toContain("external")
-      expect(result).not.toContain('target="_blank"')
-    })
-
-    it("should handle Links with only rel attribute (no target)", () => {
-      const input = `
-import { Link } from "@planningcenter/tapestry-react"
-
-export default function Test() {
-  return <Link href="/internal" rel="noopener">Internal Link</Link>
-}
-      `.trim()
-
-      const result = applyTransform(input)
-      expect(result).toBeNull() // No changes should be made, transform returns null
-    })
-  })
-
-  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" target="_blank">Page 1</Link>
-      <Link href="/page2" target="_blank" rel="noopener">Page 2</Link>
-      <Link href="/page3">Page 3</Link>
-    </div>
-  )
-}
-      `.trim()
-
-      const result = applyTransform(input)
-      expect(result).toContain("external") // Should appear twice
-      expect(result).not.toContain('target="_blank"')
-      expect(result).not.toContain('rel="noopener"')
-      expect(result).toContain('href="/page3"') // Should remain unchanged
-    })
-
-    it("should handle target={'_blank'} format", () => {
-      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)
-      expect(result).toContain("external")
-      expect(result).not.toContain("target={'_blank'}")
-    })
-
-    it("should handle dynamic target values", () => {
-      const input = `
-import { Link } from "@planningcenter/tapestry-react"
-
-export default function Test() {
-  return <Link href="/external" target={isExternal ? "_blank" : "_self"}>Link</Link>
-}
-      `.trim()
-
-      const result = applyTransform(input)
-      expect(result).toBeNull() // No changes should be made for dynamic values
-    })
-
-    it("should handle self-closing Link components", () => {
-      const input = `
-import { Link } from "@planningcenter/tapestry-react"
-
-export default function Test() {
-  return <Link href="/external" target="_blank" />
-}
-      `.trim()
-
-      const result = applyTransform(input)
-      expect(result).toContain("external")
-      expect(result).not.toContain('target="_blank"')
-    })
-  })
-
-  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" target="_blank">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" target="_blank">External Link</TapestryLink>
-}
-      `.trim()
-
-      const result = applyTransform(input)
-      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"
-      )
-    })
-  })
-})