@planningcenter/tapestry-migration-cli 3.5.0 → 3.6.1-qa-1035.0

package/src/components/flex/transforms/innerRefToRef.test.ts

@@ -0,0 +1,100 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./innerRefToRef"
+
+const j = jscodeshift.withParser("tsx")
+
+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
+}
+
+describe("innerRefToRef transform", () => {
+  it("renames innerRef to ref", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const ref = React.useRef()
+  return <StackView innerRef={ref}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("ref={ref}")
+    expect(result).not.toContain("innerRef=")
+  })
+
+  it("renames innerRef with a callback ref", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView innerRef={(el) => console.log(el)}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("ref={(el) => console.log(el)}")
+    expect(result).not.toContain("innerRef=")
+  })
+
+  it("respects an aliased StackView import", () => {
+    const input = `
+import { StackView as Stack } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Stack innerRef={myRef}>Test</Stack>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("ref={myRef}")
+    expect(result).not.toContain("innerRef=")
+  })
+
+  it("adds a CHANGED comment when verbose is enabled", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView innerRef={myRef}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input, true)
+    expect(result).toContain("ref={myRef}")
+    expect(result).toContain(
+      "CHANGED: tapestry-migration (ref): renamed from innerRef"
+    )
+  })
+
+  it("returns null when there is no innerRef to migrate", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it("returns null when StackView is not imported from tapestry-react", () => {
+    const input = `
+import { StackView } from "some-other-package"
+
+export default function Test() {
+  return <StackView innerRef={myRef}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+})

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

@@ -0,0 +1,14 @@
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform = attributeTransformFactory({
+  condition: hasAttribute("innerRef"),
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, options }) => {
+    return transformAttributeName("innerRef", "ref", { element, j, options })
+  },
+})
+
+export default transform