@planningcenter/tapestry-migration-cli 3.1.0-rc.6 → 3.1.0-rc.8

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

@@ -136,7 +136,6 @@ export function removeImportFromDeclaration(
   if (importIndex >= 0) {
     specifiers.splice(importIndex, 1)
 
-    // Remove entire import if no specifiers left
     if (specifiers.length === 0) {
       importPath.get().prune()
     }
@@ -162,19 +161,23 @@ export function addImport({
   pkg: string
   source: Collection
 }): string {
-  // Check if component is already imported from the target package
   const existingImportName = getImportName(component, pkg, { j, source })
   if (existingImportName) {
     return existingImportName
   }
 
-  // Check for conflicts with imports from other packages
   const hasConflict = hasConflictingImport(component, pkg, { j, source })
   const finalComponentName = hasConflict ? conflictAlias : component
   const alias =
     finalComponentName !== component ? finalComponentName : undefined
 
-  // Handle target package import addition
+  // If there's a conflict but no meaningful alias (conflictAlias === component), skip
+  // adding the import to avoid duplicate identifiers. The conflicting import from another
+  // package will be migrated to the target package by another transform in the pipeline.
+  if (hasConflict && !alias) {
+    return finalComponentName
+  }
+
   const targetImport = source
     .find(j.ImportDeclaration, {
       source: { value: pkg },
@@ -223,18 +226,17 @@ export function manageImports(
         name: { name: sourceComponentName },
       }).length > 0
 
-  // Handle source package import cleanup
-  const sourceImport = source
-    .find(j.ImportDeclaration, {
+  // Handle source package import cleanup — search all declarations, not just the first,
+  // since a component may be in a separate import declaration from the same package.
+  if (!stillUsesSource) {
+    const sourceImports = source.find(j.ImportDeclaration, {
       source: { value: config.fromPackage },
     })
-    .at(0)
-
-  if (sourceImport.length > 0 && !stillUsesSource) {
-    removeImportFromDeclaration(sourceImport, config.fromComponent)
+    for (let i = 0; i < sourceImports.length; i++) {
+      removeImportFromDeclaration(sourceImports.at(i), config.fromComponent)
+    }
   }
 
-  // Handle target package import addition using addImport
   addImport({
     component: config.toComponent,
     conflictAlias: config.conflictAlias || targetComponentName,

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

@@ -2,7 +2,9 @@ import { Transform } from "jscodeshift"
 
 import { addCommentToAttribute } from "../actions/addCommentToAttribute"
 import { getAttributeValue } from "../actions/getAttributeValue"
+import { andConditions } from "../conditions/andConditions"
 import { hasAttribute } from "../conditions/hasAttribute"
+import { TransformCondition } from "../types"
 import { attributeTransformFactory } from "./attributeTransformFactory"
 
 /**
@@ -13,16 +15,21 @@ import { attributeTransformFactory } from "./attributeTransformFactory"
  * @param options.targetComponent - The component name to target (e.g., "ToggleSwitch", "Radio")
  * @param options.targetPackage - The package the component is imported from
  * @param options.sizeMapping - Object mapping old size values to new size values (e.g., { xs: "sm", lg: "md" })
+ * @param options.condition - Optional additional condition beyond hasAttribute("size")
  * @returns A Transform function that maps size attributes
  */
 export function sizeMappingFactory(options: {
+  condition?: TransformCondition
   sizeMapping: Record<string, string>
   targetComponent: string
   targetPackage: string
 }): Transform {
-  const { sizeMapping, ...restOptions } = options
+  const { condition, sizeMapping, ...restOptions } = options
+  const baseCondition = hasAttribute("size")
   return attributeTransformFactory({
-    condition: hasAttribute("size"),
+    condition: condition
+      ? andConditions(baseCondition, condition)
+      : baseCondition,
     ...restOptions,
     transform: (element, { j }) => {
       let hasChanges = false

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

@@ -16,6 +16,7 @@ import { addComment } from "../../shared/actions/addComment"
 import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
 import { getAttribute } from "../../shared/actions/getAttribute"
 import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { TransformCondition } from "../types"
 import { attributeTransformFactory } from "./attributeTransformFactory"
 
 type StylePropMapping = Record<
@@ -26,16 +27,12 @@ type StylePropMapping = Record<
   }
 >
 
-// Helper function to extract prop value from JSX attribute
 function extractPropValue(attr: JSXAttribute, j: JSCodeshift) {
   if (!attr.value) {
-    // Boolean prop like <Button disabled />
     return true
   } else if (attr.value.type === "StringLiteral") {
-    // String literal like color="blue"
     return attr.value.value
   } else if (attr.value.type === "JSXExpressionContainer") {
-    // Expression like color={someVar} or color={5}
     const expression = attr.value.expression
     if (expression.type === "StringLiteral") {
       return expression.value
@@ -44,14 +41,11 @@ function extractPropValue(attr: JSXAttribute, j: JSCodeshift) {
     } else if (expression.type === "BooleanLiteral") {
       return expression.value
     } else if (expression.type === "Identifier") {
-      // Variable reference - we'll use the variable name as a placeholder
       return `{${expression.name}}`
     } else {
-      // Complex expression - convert back to string representation
       return `{${j(expression).toSource()}}`
     }
   } else {
-    // Fallback for other types
     return j(attr.value).toSource()
   }
 }
@@ -77,7 +71,6 @@ function processKeepStyleProps({
     const propName = attr.name.name as string
     const propValue = extractPropValue(attr, j)
 
-    // If it's a complex expression (starts and ends with braces), handle it directly
     if (
       typeof propValue === "string" &&
       propValue.startsWith("{") &&
@@ -118,7 +111,6 @@ function processRemoveStyleProps({
   })
 }
 
-// Process props that need style property mappings
 function processStylePropMappings({
   attributes,
   j,
@@ -187,11 +179,9 @@ function applyStylesToComponent({
           value.startsWith("{") &&
           value.endsWith("}")
         ) {
-          // This is a complex expression wrapped in braces - parse it as JS
-          const expressionCode = value.slice(1, -1) // Remove surrounding braces
+          const expressionCode = value.slice(1, -1)
           try {
             const parsed = j(expressionCode)
-            // Get the first expression from the program body
             const firstStatement = parsed.find(j.Program).get("body", 0).value
             if (firstStatement?.type === "ExpressionStatement") {
               valueNode = firstStatement.expression
@@ -199,7 +189,6 @@ function applyStylesToComponent({
               valueNode = j.stringLiteral(value)
             }
           } catch {
-            // If parsing fails, fall back to string literal
             valueNode = j.stringLiteral(value)
           }
         } else if (typeof value === "string") {
@@ -214,8 +203,56 @@ function applyStylesToComponent({
   )
 
   if (styleAttr && styleAttr.type === "JSXAttribute") {
-    // TODO: ensure this adds to exisiting style object rather than replacing
-    styleAttr.value = styleValue
+    const existingValue = styleAttr.value
+    if (
+      existingValue?.type === "JSXExpressionContainer" &&
+      existingValue.expression.type === "ObjectExpression"
+    ) {
+      // Case 1: Existing style is a static object literal — merge, new props win
+      const newProps = (
+        styleValue.expression as ReturnType<typeof j.objectExpression>
+      ).properties
+      const newKeys = new Set(
+        newProps
+          .filter((p) => p.type === "ObjectProperty")
+          .map((p) => {
+            const prop = p as ReturnType<typeof j.objectProperty>
+            if (prop.key.type === "Identifier") return prop.key.name
+            if (prop.key.type === "StringLiteral") return prop.key.value
+            return null
+          })
+          .filter(Boolean)
+      )
+      const survivingExisting = existingValue.expression.properties.filter(
+        (p) => {
+          if (p.type === "SpreadElement" || p.type === "RestElement")
+            return true
+          const prop = p as ReturnType<typeof j.objectProperty>
+          if (prop.key.type === "Identifier") return !newKeys.has(prop.key.name)
+          if (prop.key.type === "StringLiteral")
+            return !newKeys.has(prop.key.value)
+          return true
+        }
+      )
+      const mergedObject = j.objectExpression([
+        ...survivingExisting,
+        ...newProps,
+      ])
+      styleAttr.value = j.jsxExpressionContainer(mergedObject)
+    } else if (
+      existingValue?.type === "JSXExpressionContainer" &&
+      existingValue.expression.type !== "JSXEmptyExpression"
+    ) {
+      // Case 2: Dynamic expression — merge via spread: { ...existing, ...computed }
+      const newProps = (
+        styleValue.expression as ReturnType<typeof j.objectExpression>
+      ).properties
+      const mergedObject = j.objectExpression([
+        j.spreadElement(existingValue.expression),
+        ...newProps,
+      ])
+      styleAttr.value = j.jsxExpressionContainer(mergedObject)
+    }
   } else {
     const styleAttr = j.jsxAttribute(j.jsxIdentifier("style"), styleValue)
 
@@ -225,6 +262,7 @@ function applyStylesToComponent({
 }
 
 export function stylePropTransformFactory(config: {
+  condition?: TransformCondition
   plugin?: {
     getStyles: (props: Record<string, unknown>) => Record<string, unknown>
     styleProps: string[]
@@ -321,7 +359,6 @@ export function stylePropTransformFactory(config: {
         styles = { ...styles, ...directStyleProps }
         if (options.verbose) console.log("Final generated styles:", styles)
 
-        // Only apply styles if there are actual CSS properties to add
         if (Object.keys(styles).length > 0) {
           applyStylesToComponent({ element, j, styles })
 
@@ -354,6 +391,7 @@ export function stylePropTransformFactory(config: {
   }
 
   return attributeTransformFactory({
+    condition: config.condition,
     targetComponent: config.targetComponent,
     targetPackage: config.targetPackage,
     transform,

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

@@ -0,0 +1,65 @@
+import { Expression, Transform } from "jscodeshift"
+
+import { getAttribute } from "../actions/getAttribute"
+import { removeAttribute } from "../actions/removeAttribute"
+import { TransformCondition } from "../types"
+import { attributeTransformFactory } from "./attributeTransformFactory"
+
+interface TernaryConditionalToPropConfig {
+  condition?: TransformCondition
+  fromProp: string
+  matchValue: string
+  targetComponent: string
+  targetPackage: string
+  toProp: string
+}
+
+export function ternaryConditionalToPropFactory({
+  condition,
+  fromProp,
+  matchValue,
+  targetComponent,
+  targetPackage,
+  toProp,
+}: TernaryConditionalToPropConfig): Transform {
+  return attributeTransformFactory({
+    condition,
+    targetComponent,
+    targetPackage,
+    transform: (element, { j, source }) => {
+      const attr = getAttribute({ element, name: fromProp })
+      if (!attr) return false
+
+      if (attr.value?.type !== "JSXExpressionContainer") return false
+
+      const expr = attr.value.expression
+      if (expr.type !== "ConditionalExpression") return false
+
+      if (
+        expr.consequent.type !== "StringLiteral" ||
+        expr.consequent.value !== matchValue
+      ) {
+        return false
+      }
+
+      const isNullAlternate = expr.alternate.type === "NullLiteral"
+      const isUndefinedAlternate =
+        expr.alternate.type === "Identifier" &&
+        expr.alternate.name === "undefined"
+
+      if (!isNullAlternate && !isUndefinedAlternate) return false
+
+      const testExpr = expr.test as Expression
+
+      removeAttribute(fromProp, { element, j, source })
+      element.openingElement.attributes.push(
+        j.jsxAttribute(
+          j.jsxIdentifier(toProp),
+          j.jsxExpressionContainer(testExpr)
+        )
+      )
+
+      return true
+    },
+  })
+}