@planningcenter/tapestry-migration-cli 2.3.0-rc.4 → 2.3.0-rc.6

package/src/components/shared/transformFactories/attributeCombineFactory.test.ts

@@ -0,0 +1,374 @@
+import jscodeshift, {
+  Collection,
+  JSCodeshift,
+  JSXAttribute,
+  JSXElement,
+  StringLiteral,
+} from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import {
+  attributeCombineFactory,
+  AttributeMappingConfig,
+} from "./attributeCombineFactory"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string, config: AttributeMappingConfig) {
+  const transform = attributeCombineFactory(config)
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("attributeCombineFactory", () => {
+  const basicConfig = {
+    component: "TestComponent",
+    defaults: {
+      first: "default1",
+      second: "default2",
+    },
+    mappingTable: {
+      "": {
+        default2: "emptyDefault2",
+        valueA: "emptyA",
+      },
+      default1: {
+        "": "defaultEmpty",
+        default2: "defaultResult",
+        valueA: "defaultResult",
+        valueB: "default1B",
+      },
+      value1: {
+        default2: "result1B",
+        valueA: "result1A",
+        valueB: "result1B",
+      },
+      value1Empty: {
+        "": "emptyResult",
+        default2: "emptyDefault",
+      },
+      value2: {
+        default2: "result2B",
+        valueA: "result2A",
+        valueB: "result2B",
+      },
+    },
+    onUnsupported: ({
+      element,
+      attributes,
+      j,
+    }: {
+      attributes: { attribute: JSXAttribute | undefined; name: string }[]
+      element: JSXElement
+      j: JSCodeshift
+      source: Collection
+    }) => {
+      attributes.forEach(
+        ({
+          attribute,
+          name,
+        }: {
+          attribute: JSXAttribute | undefined
+          name: string
+        }) => {
+          if (attribute) {
+            const attrValue =
+              (attribute.value as StringLiteral)?.value || "unknown"
+            const comment = j.jsxText(
+              `/* TODO: ${name}="${attrValue}" unsupported */`
+            )
+            if (!element.children) element.children = []
+            element.children.unshift(comment)
+          }
+        }
+      )
+      return true
+    },
+    package: "@test/components",
+    sourceAttributes: ["first", "second"] as [string, string],
+    targetAttribute: "result",
+  }
+
+  describe("static values", () => {
+    it("should combine two static attributes", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first="value1" second="valueA">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain('result="result1A"')
+      expect(result).not.toContain('first="value1"')
+      expect(result).not.toContain('second="valueA"')
+    })
+
+    it("should handle missing attributes with defaults", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first="value1">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain('result="result1B"')
+    })
+
+    it("should handle both missing attributes with defaults", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent>Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toBe(null)
+    })
+
+    it("should handle empty string values", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first="value1Empty" second="">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain('result="emptyDefault"')
+    })
+  })
+
+  describe("conditional values", () => {
+    it("should handle conditional in first attribute", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first={condition ? "value1" : "value2"} second="valueA">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain('result={condition ? "result1A" : "result2A"}')
+      expect(result).not.toContain("first=")
+      expect(result).not.toContain("second=")
+    })
+
+    it("should handle conditional in second attribute", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first="value1" second={condition ? "valueA" : "valueB"}>Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain('result={condition ? "result1A" : "result1B"}')
+    })
+
+    it("should handle conditionals in both attributes with same test", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first={condition ? "value1" : "value2"} second={condition ? "valueA" : "valueB"}>Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain('result={condition ? "result1A" : "result2B"}')
+    })
+
+    it("should handle conditionals with undefined values", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first={condition ? "value1" : undefined} second="valueA">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain(
+        'result={condition ? "result1A" : "defaultResult"}'
+      )
+    })
+
+    it("should handle conditionals with null values", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first={condition ? "value1" : null} second="valueA">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain(
+        'result={condition ? "result1A" : "defaultResult"}'
+      )
+    })
+
+    it("should handle conditional with null in both branches", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first={condition ? null : null} second="valueA">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain(
+        'result={condition ? "defaultResult" : "defaultResult"}'
+      )
+    })
+  })
+
+  describe("unsupported cases", () => {
+    it("should handle unsupported attribute values", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first="unsupported" second="valueA">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain('/* TODO: first="unsupported" unsupported */')
+      expect(result).not.toContain("result=")
+    })
+
+    it("should handle JSX expression containers with string literals", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first={"value1"} second="valueA">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain("/* TODO:")
+      expect(result).not.toContain("result=")
+    })
+
+    it("should handle complex expressions", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first={getValue()} second="valueA">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain("/* TODO:")
+      expect(result).not.toContain("result=")
+    })
+
+    it("should handle conditionals with different test names", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first={condition1 ? "value1" : "value2"} second={condition2 ? "valueA" : "valueB"}>Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain("/* TODO:")
+      expect(result).not.toContain("result=")
+    })
+  })
+
+  describe("value normalization", () => {
+    it("should apply value normalizers", () => {
+      const configWithNormalizer = {
+        ...basicConfig,
+        valueNormalizers: {
+          first: (value: string | null | undefined) => {
+            if (value === "oldValue") return "value1"
+            return value || basicConfig.defaults.first
+          },
+        },
+      }
+
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first="oldValue" second="valueA">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, configWithNormalizer)
+
+      expect(result).toContain('result="result1A"')
+    })
+
+    it("should apply normalizers to conditional values", () => {
+      const configWithNormalizer = {
+        ...basicConfig,
+        valueNormalizers: {
+          first: (value: string | null | undefined) => {
+            if (value === "old1") return "value1"
+            if (value === "old2") return "value2"
+            return value || basicConfig.defaults.first
+          },
+        },
+      }
+
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first={condition ? "old1" : "old2"} second="valueA">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, configWithNormalizer)
+
+      expect(result).toContain('result={condition ? "result1A" : "result2A"}')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle components without matching attributes", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent other="value">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toBe(null)
+    })
+
+    it("should handle boolean attribute values", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first={true} second="valueA">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain("/* TODO:")
+      expect(result).not.toContain("result=")
+    })
+
+    it("should handle null literal attributes", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first={null} second="valueA">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain('result="defaultResult"')
+    })
+
+    it("should handle false boolean attributes", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first={false} second="valueA">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain('result="defaultResult"')
+    })
+
+    it("should handle empty string in conditionals", () => {
+      const source = `
+        import { TestComponent } from "@test/components"
+        <TestComponent first={condition ? "" : "value1"} second="valueA">Content</TestComponent>
+      `
+
+      const result = applyTransform(source, basicConfig)
+
+      expect(result).toContain(
+        'result={condition ? "defaultResult" : "result1A"}'
+      )
+    })
+  })
+})

package/src/components/shared/transformFactories/attributeCombineFactory.ts

@@ -0,0 +1,300 @@
+import {
+  Collection,
+  JSCodeshift,
+  JSXAttribute,
+  JSXElement,
+  Transform,
+} from "jscodeshift"
+
+import { addAttribute, Conditional } from "../actions/addAttribute"
+import { getAttribute } from "../actions/getAttribute"
+import { removeAttribute } from "../actions/removeAttribute"
+import { hasAttribute } from "../conditions/hasAttribute"
+import { orConditions } from "../conditions/orConditions"
+import { TransformCondition } from "../types"
+import { attributeTransformFactory } from "./attributeTransformFactory"
+
+export interface MappingTable {
+  [key: string]: {
+    [key: string]: string
+  }
+}
+
+export interface AttributeDefaults {
+  [key: string]: string
+}
+
+export interface ValueNormalizer {
+  (value: string | null | undefined): string
+}
+
+export interface AttributeMappingConfig {
+  /** Target component name */
+  component: string
+  /** Custom condition (optional, will use hasAttribute check by default) */
+  condition?: TransformCondition
+  /** Default values for missing attributes */
+  defaults: AttributeDefaults
+  /** Multi-dimensional mapping table */
+  mappingTable: MappingTable
+  onUnsupported: (resources: {
+    attributes: { attribute: JSXAttribute | undefined; name: string }[]
+    element: JSXElement
+    j: JSCodeshift
+    source: Collection
+  }) => boolean
+  /** Package the component is imported from */
+  package: string
+  sourceAttributes: [string, string]
+  /** Target attribute to map to (e.g., 'kind') */
+  targetAttribute: string
+  /** Optional value normalizers for each attribute */
+  valueNormalizers?: Record<string, ValueNormalizer>
+}
+
+/**
+ * Extract string value from a JSX attribute
+ */
+function getAttributeStringValue(
+  attr: JSXAttribute | undefined,
+  defaultValue: string,
+  normalizer?: ValueNormalizer
+): string | null {
+  if (!attr?.value) {
+    return normalizer ? normalizer(defaultValue) : defaultValue
+  }
+
+  if (attr.value.type === "StringLiteral") {
+    const value = attr.value.value || defaultValue
+    return normalizer ? normalizer(value) : value
+  }
+
+  if (attr.value.type === "JSXExpressionContainer") {
+    const { expression } = attr.value
+
+    // Handle null, boolean false as default
+    if (
+      expression.type === "NullLiteral" ||
+      (expression.type === "BooleanLiteral" && !expression.value)
+    ) {
+      return normalizer ? normalizer(defaultValue) : defaultValue
+    }
+
+    // String literals in expressions are unsupported
+    if (expression.type === "StringLiteral") {
+      return null // Unsupported
+    }
+  }
+
+  return null // Unsupported
+}
+
+function getAttributeConditionalValue(
+  attr: JSXAttribute | undefined,
+  defaultValue: string,
+  normalizer?: ValueNormalizer
+): { alternate: string; consequent: string; test: string } | null {
+  if (
+    attr?.value?.type === "JSXExpressionContainer" &&
+    attr.value.expression.type === "ConditionalExpression"
+  ) {
+    const expr = attr.value.expression
+
+    if (expr.test.type !== "Identifier") return null
+
+    const test = expr.test.name
+
+    let consequent: string
+    if (expr.consequent.type === "StringLiteral") {
+      consequent = expr.consequent.value || defaultValue
+    } else if (
+      expr.consequent.type === "Identifier" &&
+      expr.consequent.name === "undefined"
+    ) {
+      consequent = defaultValue
+    } else if (expr.consequent.type === "NullLiteral") {
+      consequent = defaultValue
+    } else {
+      return null
+    }
+
+    let alternate: string
+    if (expr.alternate.type === "StringLiteral") {
+      alternate = expr.alternate.value || defaultValue
+    } else if (
+      expr.alternate.type === "Identifier" &&
+      expr.alternate.name === "undefined"
+    ) {
+      alternate = defaultValue
+    } else if (expr.alternate.type === "NullLiteral") {
+      alternate = defaultValue
+    } else {
+      return null
+    }
+
+    if (normalizer) {
+      return {
+        alternate: normalizer(alternate),
+        consequent: normalizer(consequent),
+        test,
+      }
+    }
+
+    return { alternate, consequent, test }
+  }
+
+  return null
+}
+
+/**
+ * Check if attribute is conditional
+ */
+function isConditionalAttribute(attr: JSXAttribute | undefined): boolean {
+  return (
+    attr?.value?.type === "JSXExpressionContainer" &&
+    attr.value.expression.type === "ConditionalExpression"
+  )
+}
+
+/**
+ * Combines two JSX attributes into a mapped result using the provided mapping table
+ */
+function combineAttributes(
+  attr1: JSXAttribute | undefined,
+  attr2: JSXAttribute | undefined,
+  {
+    mappingTable,
+    defaults,
+    valueNormalizers = {},
+    attributeNames,
+  }: {
+    attributeNames: [string, string]
+    defaults: AttributeDefaults
+    mappingTable: MappingTable
+    valueNormalizers?: Record<string, ValueNormalizer>
+  }
+): string | Conditional | null {
+  const [firstName, secondName] = attributeNames
+  const normalizer1 = valueNormalizers[firstName]
+  const normalizer2 = valueNormalizers[secondName]
+  const default1 = defaults[firstName] || ""
+  const default2 = defaults[secondName] || ""
+
+  const isConditional1 = isConditionalAttribute(attr1)
+  const isConditional2 = isConditionalAttribute(attr2)
+
+  // Handle conditional cases
+  if (isConditional1 || isConditional2) {
+    const cond1 = isConditional1
+      ? getAttributeConditionalValue(attr1, default1, normalizer1)
+      : null
+    const cond2 = isConditional2
+      ? getAttributeConditionalValue(attr2, default2, normalizer2)
+      : null
+    const static1 = !isConditional1
+      ? getAttributeStringValue(attr1, default1, normalizer1)
+      : null
+    const static2 = !isConditional2
+      ? getAttributeStringValue(attr2, default2, normalizer2)
+      : null
+
+    // If both are conditional, they must use the same test
+    if (cond1 && cond2 && cond1.test !== cond2.test) return null
+
+    const consequentValue1 = cond1?.consequent ?? static1
+    const alternateValue1 = cond1?.alternate ?? static1
+    const consequentValue2 = cond2?.consequent ?? static2
+    const alternateValue2 = cond2?.alternate ?? static2
+
+    // Check that we have all required values (null means unsupported, empty string is valid)
+    if (
+      consequentValue1 === null ||
+      consequentValue2 === null ||
+      alternateValue1 === null ||
+      alternateValue2 === null
+    ) {
+      return null
+    }
+
+    const consequent = mappingTable[consequentValue1]?.[consequentValue2]
+    const alternate = mappingTable[alternateValue1]?.[alternateValue2]
+
+    if (!consequent || !alternate) return null
+
+    // Use the test from whichever attribute is conditional
+    const test = cond1?.test ?? cond2?.test
+    if (!test) return null
+
+    return { alternate, consequent, test }
+  }
+
+  const static1 = getAttributeStringValue(attr1, default1, normalizer1)
+  const static2 = getAttributeStringValue(attr2, default2, normalizer2)
+
+  if (!static1 || !static2) return null
+
+  const result = mappingTable[static1]?.[static2]
+  return result || null
+}
+
+export function attributeCombineFactory({
+  sourceAttributes,
+  targetAttribute,
+  mappingTable,
+  defaults,
+  valueNormalizers = {},
+  component,
+  package: packageName,
+  condition,
+  onUnsupported,
+}: AttributeMappingConfig): Transform {
+  const defaultCondition = orConditions(
+    ...sourceAttributes.map((attr: string) => hasAttribute(attr))
+  )
+
+  type AttributeWithName = {
+    attribute: JSXAttribute | undefined
+    name: string
+  }
+
+  return attributeTransformFactory({
+    condition: condition || defaultCondition,
+    targetComponent: component,
+    targetPackage: packageName,
+    transform: (
+      element: JSXElement,
+      { j, source }: { j: JSCodeshift; source: Collection }
+    ) => {
+      const attributes: AttributeWithName[] = sourceAttributes.map(
+        (name: string) => ({
+          attribute: getAttribute({ element, name }),
+          name,
+        })
+      )
+
+      const [attr1, attr2] = attributes.map(
+        ({ attribute }: { attribute: JSXAttribute | undefined }) => attribute
+      )
+
+      const mappingResult = combineAttributes(attr1, attr2, {
+        attributeNames: sourceAttributes,
+        defaults,
+        mappingTable,
+        valueNormalizers,
+      })
+
+      attributes.forEach(({ attribute, name }) => {
+        if (attribute) {
+          removeAttribute(name, { element, j, source })
+        }
+      })
+
+      if (mappingResult === null) {
+        return onUnsupported({ attributes, element, j, source })
+      }
+      addAttribute({ element, j, name: targetAttribute, value: mappingResult })
+
+      return true
+    },
+  })
+}