@planningcenter/tapestry-migration-cli 3.4.1 → 3.6.0

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,

package/src/components/toggle-switch/transforms/onClickToOnChange.test.ts

@@ -0,0 +1,210 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./onClickToOnChange"
+
+const j = jscodeshift.withParser("tsx")
+
+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
+}
+
+describe("onClickToOnChange transform", () => {
+  describe("onClick to onChange conversion", () => {
+    it("should rename onClick to onChange", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <ToggleSwitch checked={true} onClick={() => setChecked(!checked)} label="Toggle" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onChange={() => setChecked(!checked)}")
+      expect(result).not.toContain("onClick=")
+    })
+
+    it("should rename onClick with named function reference", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <ToggleSwitch checked={true} onClick={handleChange} label="Toggle" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onChange={handleChange}")
+      expect(result).not.toContain("onClick=")
+    })
+
+    it("should handle multiple ToggleSwitch components", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <ToggleSwitch checked={true} onClick={handleA} label="First" />
+      <ToggleSwitch checked={false} onClick={handleB} label="Second" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onChange={handleA}")
+      expect(result).toContain("onChange={handleB}")
+      expect(result).not.toContain("onClick=")
+    })
+
+    it("should preserve other props", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <ToggleSwitch
+      checked={true}
+      label="Toggle"
+      disabled
+      onClick={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onChange={() => {}}")
+      expect(result).toContain('label="Toggle"')
+      expect(result).toContain("checked={true}")
+      expect(result).toContain("disabled")
+      expect(result).not.toContain("onClick=")
+    })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <ToggleSwitch checked={true} onClick={() => {}} label="Toggle" />
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain("onChange={() => {}}")
+      expect(result).not.toContain("onClick=")
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (onChange): renamed from onClick"
+      )
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect ToggleSwitch without onClick", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <ToggleSwitch checked={true} label="Toggle" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components with onClick", () => {
+      const input = `
+import { Button, ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button onClick={() => {}}>Click me</Button>
+      <ToggleSwitch checked={true} onClick={handleChange} label="Toggle" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button onClick={() => {}}>Click me</Button>")
+      expect(result).toContain("onChange={handleChange}")
+    })
+
+    it("should rename onClick and add TODO comment when handler takes an argument", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <ToggleSwitch checked={true} onClick={(e) => handle(e)} label="Toggle" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onChange={(e) => handle(e)}")
+      expect(result).not.toContain("onClick=")
+      expect(result).toContain("TODO")
+      expect(result).toContain("ChangeEvent<HTMLInputElement>")
+    })
+
+    it("should not add TODO when handler takes no arguments", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <ToggleSwitch checked={true} onClick={() => toggle()} label="Toggle" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onChange={() => toggle()}")
+      expect(result).not.toContain("onClick=")
+      expect(result).not.toContain("TODO")
+    })
+
+    it("should handle aliased ToggleSwitch import", () => {
+      const input = `
+import { ToggleSwitch as TapestryToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TapestryToggleSwitch checked={true} onClick={handleChange} label="Toggle" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onChange={handleChange}")
+      expect(result).not.toContain("onClick=")
+    })
+
+    it("should leave onClick and add TODO when both onClick and onChange are present", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <ToggleSwitch
+      checked={true}
+      onClick={() => handleClick()}
+      onChange={(e) => handleChange(e)}
+      label="Toggle"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onClick={() => handleClick()}")
+      expect(result).toContain("onChange={(e) => handleChange(e)}")
+      expect(result).toContain("TODO")
+    })
+  })
+})

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

@@ -0,0 +1,71 @@
+import { Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { findAttribute } from "../../shared/findAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("onClick"),
+  targetComponent: "ToggleSwitch",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, options }) => {
+    const attributes = element.openingElement.attributes || []
+
+    // When both onClick and onChange are present, don't rename (would clobber
+    // the existing onChange). Instead, leave onClick in place with a TODO so a
+    // developer can resolve the conflict manually.
+    if (hasAttribute("onChange")(element)) {
+      const onClickAttr = findAttribute(attributes, "onClick")
+      if (onClickAttr) {
+        addCommentToAttribute({
+          attribute: onClickAttr,
+          commentKind: "todo",
+          j,
+          text: "ToggleSwitch uses onChange, not onClick. Both are present — remove onClick and verify the onChange handler is correct (event: ChangeEvent<HTMLInputElement>, read new state via e.target.checked)",
+        })
+        return true
+      }
+      return false
+    }
+
+    // Rename onClick → onChange. transformAttributeName also adds the CHANGED
+    // comment when options.verbose is enabled.
+    const renamed = transformAttributeName("onClick", "onChange", {
+      element,
+      j,
+      options,
+    })
+
+    if (renamed) {
+      // If the handler references an argument, its event type has changed from
+      // MouseEvent (button) to ChangeEvent<HTMLInputElement> (checkbox). Flag
+      // it so the developer can verify the handler logic.
+      const onChangeAttr = findAttribute(attributes, "onChange")
+      if (onChangeAttr) {
+        const value = onChangeAttr.value
+        if (value?.type === "JSXExpressionContainer") {
+          const expr = value.expression
+          if (
+            (expr.type === "ArrowFunctionExpression" ||
+              expr.type === "FunctionExpression") &&
+            expr.params.length > 0
+          ) {
+            addCommentToAttribute({
+              attribute: onChangeAttr,
+              commentKind: "todo",
+              j,
+              text: "renamed from onClick: the event type has changed from MouseEvent to ChangeEvent<HTMLInputElement> — verify the handler uses e.target.checked if needed",
+            })
+          }
+        }
+      }
+      return true
+    }
+
+    return false
+  },
+})
+
+export default transform