@planningcenter/tapestry-migration-cli 3.5.0 → 3.6.0

package/src/components/select/transforms/onChangeSignature.test.ts

@@ -0,0 +1,224 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./onChangeSignature"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+  return result || source
+}
+
+describe("onChangeSignature transform", () => {
+  it("auto-rewrites ({ value }) => expr to (e) => e.target.value", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => setX(value)} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    // jscodeshift omits parens for a single identifier param: `e =>` not `(e) =>`
+    expect(result).toContain("e =>")
+    expect(result).toContain("e.target.value")
+    expect(result).not.toContain("({ value })")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("replaces all value references in the expression body", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => fn(value, value)} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("fn(e.target.value, e.target.value)")
+    expect(result).not.toContain("({ value })")
+  })
+
+  it("adds a TODO comment for a function reference", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={handler} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("onChange={handler}")
+    expect(result).toContain("TODO: tapestry-migration (onChange)")
+  })
+
+  it("adds a TODO comment when ({ selectedValue }) is destructured", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ selectedValue }) => setX(selectedValue)} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("({ selectedValue })")
+    expect(result).toContain("TODO: tapestry-migration (onChange)")
+  })
+
+  it("adds a TODO comment for a block-body arrow (too complex to auto-rewrite)", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => { setX(value) }} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("{ setX(value) }")
+    expect(result).toContain("TODO: tapestry-migration (onChange)")
+  })
+
+  it("expands object-literal shorthand return ({ value }) to ({ value: e.target.value })", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => ({ value })} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("value: e.target.value")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("leaves member-property `value` access untouched (obj.value and obj?.value)", () => {
+    const dot = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => setX(obj.value)} emptyValue="Pick" />
+}
+    `.trim()
+    const dotResult = applyTransform(dot)
+    expect(dotResult).toContain("setX(obj.value)")
+    expect(dotResult).not.toContain("e.target.value")
+
+    const optional = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => setX(obj?.value)} emptyValue="Pick" />
+}
+    `.trim()
+    const optionalResult = applyTransform(optional)
+    expect(optionalResult).toContain("obj?.value")
+    expect(optionalResult).not.toContain("obj?.e.target.value")
+  })
+
+  it("adds a TODO when a nested callback shadows `value` (would corrupt the binding)", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => list.map(value => value)} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("list.map(value => value)")
+    expect(result).toContain("TODO: tapestry-migration (onChange)")
+  })
+
+  it("adds a TODO when a nested callback destructures its own `value`", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => list.map(({ value }) => value)} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration (onChange)")
+  })
+
+  it("rewrites references inside a nested callback that does NOT shadow `value`", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => arr.filter(x => x === value)} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("x === e.target.value")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("does not transform Select with no onChange", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+
+  it("does not transform other components", () => {
+    const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button onChange={({ value }) => setX(value)}>Click</Button>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+
+  it("does not transform a multiple Select (skipped by transformableSelect)", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select multiple onChange={({ value }) => setX(value)} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+
+  it("preserves other props when auto-rewriting", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select disabled emptyValue="Pick" onChange={({ value }) => setX(value)} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("disabled")
+    expect(result).toContain("emptyValue")
+    expect(result).toContain("e.target.value")
+  })
+})

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

@@ -0,0 +1,172 @@
+import { Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { andConditions } from "../../shared/conditions/andConditions"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { findAttribute } from "../../shared/findAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableSelect } from "../transformableSelect"
+
+const TODO_TEXT =
+  "onChange now receives a React.ChangeEvent<HTMLSelectElement>; read the value via e.target.value instead of the old { selectedValue, value } argument"
+
+/**
+ * Returns true if a parameter pattern mentions a `value` identifier, e.g.
+ * `value`, `{ value }`, `[value]`. Any occurrence is treated conservatively as
+ * a potential binding so we bail to a TODO rather than risk corrupting it.
+ */
+function paramBindsValue(
+  param: import("jscodeshift").ASTNode,
+  j: import("jscodeshift").JSCodeshift
+): boolean {
+  // `find` only searches descendants, so check the param node itself first
+  // (a bare `value` param) before scanning destructuring patterns.
+  if (param.type === "Identifier" && param.name === "value") return true
+  return j(param).find(j.Identifier, { name: "value" }).size() > 0
+}
+
+/**
+ * Returns true if a nested function/arrow inside the body binds its own `value`
+ * parameter, which would shadow the destructured param. Rewriting these would
+ * corrupt the inner binding, so they fall through to a TODO comment instead.
+ *
+ * e.g. `({ value }) => list.map(value => value)` → ambiguous, leave for the dev
+ */
+function bodyShadowsValue(
+  body: import("jscodeshift").ASTNode,
+  j: import("jscodeshift").JSCodeshift
+): boolean {
+  let shadows = false
+  const visit = (collection: ReturnType<typeof j>) =>
+    collection.forEach((path) => {
+      if (
+        path.node.params.some((p: import("jscodeshift").ASTNode) =>
+          paramBindsValue(p, j)
+        )
+      )
+        shadows = true
+    })
+  visit(j(body).find(j.ArrowFunctionExpression))
+  visit(j(body).find(j.FunctionExpression))
+  return shadows
+}
+
+/**
+ * Returns true if the onChange attribute is an expression-bodied arrow function
+ * with exactly one `{ value }` destructuring param and no other keys.
+ *
+ * e.g. `onChange={({ value }) => setX(value)}` → auto-migratable
+ * e.g. `onChange={handler}` or `onChange={({ selectedValue }) => …}` → TODO comment
+ */
+function isSimpleValueDestructure(
+  attribute: ReturnType<typeof findAttribute>,
+  j: import("jscodeshift").JSCodeshift
+): boolean {
+  if (!attribute || attribute.type !== "JSXAttribute") return false
+
+  const container = attribute.value
+  if (!container || container.type !== "JSXExpressionContainer") return false
+
+  const arrow = container.expression
+  if (!j.ArrowFunctionExpression.check(arrow)) return false
+
+  // Block bodies are too complex to auto-rewrite safely
+  if (arrow.body.type === "BlockStatement") return false
+
+  const params = arrow.params
+  if (params.length !== 1) return false
+
+  const param = params[0]
+  if (param.type !== "ObjectPattern") return false
+
+  const props = param.properties
+  if (props.length !== 1) return false
+
+  const prop = props[0]
+  if (prop.type !== "ObjectProperty" && prop.type !== "Property") return false
+  if (!("shorthand" in prop) || !prop.shorthand) return false
+  if (prop.key.type !== "Identifier" || prop.key.name !== "value") return false
+
+  // A nested function that rebinds `value` would be corrupted by the rewrite.
+  if (bodyShadowsValue(arrow.body, j)) return false
+
+  return true
+}
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(transformableSelect, hasAttribute("onChange")),
+  targetComponent: "Select",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const attributes = element.openingElement.attributes || []
+    const attribute = findAttribute(attributes, "onChange")
+    if (!attribute) return false
+
+    if (isSimpleValueDestructure(attribute, j)) {
+      // Safe to auto-rewrite: ({ value }) => expr  →  (e) => expr[value→e.target.value]
+      const container =
+        attribute.value as import("jscodeshift").JSXExpressionContainer
+      const arrow =
+        container.expression as import("jscodeshift").ArrowFunctionExpression
+
+      // Replace the param with identifier `e`
+      arrow.params = [j.identifier("e")]
+
+      // Replace all `value` identifier references in the expression body
+      // (skip object key / member-property positions to avoid false positives)
+      const body = arrow.body as import("jscodeshift").Expression
+      j(body)
+        .find(j.Identifier, { name: "value" })
+        .filter((path) => {
+          const parent = path.parent.node
+          // Skip member-property positions (`obj.value`, `obj?.value`) — these
+          // are property names, not references to the destructured param.
+          if (
+            (parent.type === "MemberExpression" ||
+              parent.type === "OptionalMemberExpression") &&
+            parent.property === path.node &&
+            !parent.computed
+          ) {
+            return false
+          }
+          // Skip object property keys (`{ value: … }`)
+          if (
+            (parent.type === "Property" || parent.type === "ObjectProperty") &&
+            parent.key === path.node &&
+            !parent.computed
+          ) {
+            return false
+          }
+          return true
+        })
+        .replaceWith((path) => {
+          // Object shorthand (`{ value }`) must be expanded to `{ value: … }`,
+          // otherwise the printed property loses its value.
+          const parent = path.parent.node
+          if (
+            (parent.type === "Property" || parent.type === "ObjectProperty") &&
+            "shorthand" in parent
+          ) {
+            parent.shorthand = false
+          }
+          return j.memberExpression(
+            j.memberExpression(j.identifier("e"), j.identifier("target")),
+            j.identifier("value")
+          )
+        })
+
+      return true
+    }
+
+    // Not auto-migratable — add a TODO comment so the developer handles it
+    addCommentToAttribute({
+      attribute,
+      commentKind: "todo",
+      j,
+      text: TODO_TEXT,
+    })
+    return true
+  },
+})
+
+export default transform

package/src/components/shared/actions/resolveConstantAttributeValue.test.ts

@@ -0,0 +1,122 @@
+import jscodeshift, {
+  JSXAttribute,
+  JSXElement,
+  JSXIdentifier,
+} from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { resolveConstantAttributeValue } from "./resolveConstantAttributeValue"
+
+const j = jscodeshift.withParser("tsx")
+
+const CONSTANT_MAP: Record<string, string> = {
+  CENTER: "center",
+  FILL: "fill",
+  START: "start",
+}
+
+function createElementFromCode(code: string): JSXElement {
+  const source = j(`<div>${code}</div>`)
+  return source.find(j.JSXElement).at(0).get().value.children?.[0] as JSXElement
+}
+
+function getAttributeFromElement(
+  element: JSXElement,
+  name: string
+): JSXAttribute {
+  const attributes = element.openingElement.attributes || []
+  return attributes.find(
+    (attr) =>
+      attr.type === "JSXAttribute" &&
+      (attr.name as JSXIdentifier)?.name === name
+  ) as JSXAttribute
+}
+
+describe("resolveConstantAttributeValue", () => {
+  it("resolves a string literal", () => {
+    const element = createElementFromCode('<StackView distribution="center" />')
+    const attr = getAttributeFromElement(element, "distribution")
+    expect(
+      resolveConstantAttributeValue({
+        attribute: attr,
+        constantMap: CONSTANT_MAP,
+      })
+    ).toBe("center")
+  })
+
+  it("resolves an expression-wrapped string literal", () => {
+    const element = createElementFromCode(
+      '<StackView distribution={"center"} />'
+    )
+    const attr = getAttributeFromElement(element, "distribution")
+    expect(
+      resolveConstantAttributeValue({
+        attribute: attr,
+        constantMap: CONSTANT_MAP,
+      })
+    ).toBe("center")
+  })
+
+  it("resolves a MemberExpression constant present in the map", () => {
+    const element = createElementFromCode(
+      "<StackView distribution={StackView.CENTER} />"
+    )
+    const attr = getAttributeFromElement(element, "distribution")
+    expect(
+      resolveConstantAttributeValue({
+        attribute: attr,
+        constantMap: CONSTANT_MAP,
+      })
+    ).toBe("center")
+  })
+
+  it("resolves a MemberExpression constant that maps to fill", () => {
+    const element = createElementFromCode(
+      "<StackView distribution={StackView.FILL} />"
+    )
+    const attr = getAttributeFromElement(element, "distribution")
+    expect(
+      resolveConstantAttributeValue({
+        attribute: attr,
+        constantMap: CONSTANT_MAP,
+      })
+    ).toBe("fill")
+  })
+
+  it("returns null for a MemberExpression constant not in the map", () => {
+    const element = createElementFromCode(
+      "<StackView distribution={StackView.UNKNOWN} />"
+    )
+    const attr = getAttributeFromElement(element, "distribution")
+    expect(
+      resolveConstantAttributeValue({
+        attribute: attr,
+        constantMap: CONSTANT_MAP,
+      })
+    ).toBeNull()
+  })
+
+  it("returns null for a dynamic variable", () => {
+    const element = createElementFromCode(
+      "<StackView distribution={someVar} />"
+    )
+    const attr = getAttributeFromElement(element, "distribution")
+    expect(
+      resolveConstantAttributeValue({
+        attribute: attr,
+        constantMap: CONSTANT_MAP,
+      })
+    ).toBeNull()
+  })
+
+  it("returns null for a boolean (valueless) attribute", () => {
+    const element = createElementFromCode("<StackView distribution />")
+    const attr = getAttributeFromElement(element, "distribution")
+    expect(
+      resolveConstantAttributeValue({
+        attribute: attr,
+        constantMap: CONSTANT_MAP,
+      })
+    ).toBeNull()
+  })
+})

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

@@ -0,0 +1,31 @@
+import { JSXAttribute } from "jscodeshift"
+
+export function resolveConstantAttributeValue({
+  attribute,
+  constantMap,
+}: {
+  attribute: JSXAttribute
+  constantMap: Record<string, string>
+}): string | null {
+  const value = attribute.value
+  if (!value) return null
+
+  if (value.type === "StringLiteral") {
+    return value.value
+  }
+
+  if (value.type === "JSXExpressionContainer") {
+    if (value.expression.type === "StringLiteral") {
+      return value.expression.value
+    }
+
+    if (
+      value.expression.type === "MemberExpression" &&
+      value.expression.property.type === "Identifier"
+    ) {
+      return constantMap[value.expression.property.name] ?? null
+    }
+  }
+
+  return null
+}

package/src/components/toggle-switch/index.ts

@@ -5,6 +5,7 @@ import auditSpreadProps from "./transforms/auditSpreadProps"
 import convertStyleProps from "./transforms/convertStyleProps"
 import isCheckedToChecked from "./transforms/isCheckedToChecked"
 import moveToggleSwitchImport from "./transforms/moveToggleSwitchImport"
+import onClickToOnChange from "./transforms/onClickToOnChange"
 import sizeMapping from "./transforms/sizeMapping"
 import unsupportedProps from "./transforms/unsupportedProps"
 
@@ -17,6 +18,7 @@ const transform: Transform = (fileInfo, api, options) => {
     sizeMapping,
     ariaLabelToLabel,
     isCheckedToChecked,
+    onClickToOnChange,
     convertStyleProps,
     unsupportedProps,
     moveToggleSwitchImport,