@planningcenter/tapestry-migration-cli 3.1.0-rc.14 → 3.1.0-rc.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.1.0-rc.14",
+  "version": "3.1.0-rc.16",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
-    "@planningcenter/tapestry": "^3.1.0-rc.14",
+    "@planningcenter/tapestry": "^3.1.0-rc.16",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "73fa96b50968cfc3d474d33ae91cd9e221f10fa5"
+  "gitHead": "d3f8d5b0ac2eafea617315fdcfa7a4911e67294d"
 }

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

@@ -40,6 +40,44 @@ function Test() {
       expect(result).not.toContain("Select.Option")
     })
 
+    it("should preserve data-* attributes on options", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      <Select.Option value="apple" data-testid="apple-opt">Apple</Select.Option>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('"data-testid": "apple-opt"')
+      expect(result).toContain('label: "Apple"')
+      expect(result).toContain('value: "apple"')
+    })
+
+    it("should preserve dynamic data-* attribute expressions on options", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      <Select.Option value="apple" data-pendo={pendoIds.apple}>Apple</Select.Option>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('"data-pendo": pendoIds.apple')
+      expect(result).toContain('label: "Apple"')
+      expect(result).toContain('value: "apple"')
+    })
+
     it("should handle disabled options", () => {
       const input = `
 import { Select } from "@planningcenter/tapestry-react"

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

@@ -10,6 +10,7 @@ import { addComment } from "../../shared/actions/addComment"
 import { removeChildren } from "../../shared/actions/removeChildren"
 import { andConditions } from "../../shared/conditions/andConditions"
 import { hasChildren } from "../../shared/conditions/hasChildren"
+import { getAttributeExpression } from "../../shared/helpers/getAttributeExpression"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
 import { getImportName } from "../../shared/transformFactories/helpers/manageImports"
 import { transformableSelect } from "../transformableSelect"
@@ -126,6 +127,18 @@ function convertOptionToObjectExpression(
     )
   }
 
+  // Preserve data-* attributes on the option object
+  const attrs = optionElement.openingElement.attributes || []
+  for (const attr of attrs) {
+    if (attr.type !== "JSXAttribute") continue
+    const name = attr.name.name as string
+    if (!name.startsWith("data-")) continue
+    const expr = getAttributeExpression(optionElement, name)
+    if (expr) {
+      properties.push(j.objectProperty(j.stringLiteral(name), expr))
+    }
+  }
+
   return j.objectExpression(properties)
 }
 

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

@@ -42,6 +42,29 @@ function Test() {
       expect(result).not.toContain("</Select>")
     })
 
+    it("should preserve data-* attributes on options", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      {items.map(item => (
+        <Select.Option key={item.id} value={item.id} data-id={item.id}>
+          {item.name}
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('"data-id": item.id')
+      expect(result).toContain("label: item.name")
+      expect(result).toContain("value: item.id")
+    })
+
     it("should handle nested property access in children", () => {
       const input = `
 import { Select } from "@planningcenter/tapestry-react"

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

@@ -12,6 +12,7 @@ import {
 import { removeChildren } from "../../shared/actions/removeChildren"
 import { andConditions } from "../../shared/conditions/andConditions"
 import { hasChildren } from "../../shared/conditions/hasChildren"
+import { getAttributeExpression } from "../../shared/helpers/getAttributeExpression"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
 import { getImportName } from "../../shared/transformFactories/helpers/manageImports"
 import { transformableSelect } from "../transformableSelect"
@@ -31,31 +32,6 @@ function isSelectOption(node: JSXElement, localSelectName: string): boolean {
   )
 }
 
-/**
- * Gets the expression AST node for a JSX attribute value.
- * Returns the expression node for dynamic values, or a StringLiteral for static ones.
- */
-function getAttributeExpression(
-  element: JSXElement,
-  attrName: string
-): Expression | null {
-  const attrs = element.openingElement.attributes || []
-  for (const attr of attrs) {
-    if (attr.type !== "JSXAttribute") continue
-    if (attr.name.name !== attrName) continue
-
-    if (!attr.value) return null // boolean shorthand has no expression
-    if (attr.value.type === "StringLiteral") return attr.value
-    if (attr.value.type === "JSXExpressionContainer") {
-      const expr = attr.value.expression
-      if (expr.type === "JSXEmptyExpression") return null
-      return expr as Expression
-    }
-    return null
-  }
-  return null
-}
-
 /**
  * Gets the disabled expression if present and not a simple boolean shorthand true.
  * Returns the expression node, or true for shorthand, or null if not present.
@@ -282,6 +258,18 @@ const transform: Transform = attributeTransformFactory({
       properties.push(j.objectProperty(j.identifier("disabled"), disabledExpr))
     }
 
+    // Preserve data-* attributes on the option object
+    const attrs = optionElement.openingElement.attributes || []
+    for (const attr of attrs) {
+      if (attr.type !== "JSXAttribute") continue
+      const name = attr.name.name as string
+      if (!name.startsWith("data-")) continue
+      const expr = getAttributeExpression(optionElement, name)
+      if (expr) {
+        properties.push(j.objectProperty(j.stringLiteral(name), expr))
+      }
+    }
+
     // Build new .map() callback that returns an object
     const objectReturn = j.objectExpression(properties)
     const newCallback = j.arrowFunctionExpression(

package/src/components/shared/helpers/getAttributeExpression.ts

@@ -0,0 +1,26 @@
+import { Expression, JSXElement } from "jscodeshift"
+
+/**
+ * Gets the expression AST node for a JSX attribute value.
+ * Returns the expression node for dynamic values, or a StringLiteral for static ones.
+ */
+export function getAttributeExpression(
+  element: JSXElement,
+  attrName: string
+): Expression | null {
+  const attrs = element.openingElement.attributes || []
+  for (const attr of attrs) {
+    if (attr.type !== "JSXAttribute") continue
+    if (attr.name.name !== attrName) continue
+
+    if (!attr.value) return null // boolean shorthand has no expression
+    if (attr.value.type === "StringLiteral") return attr.value
+    if (attr.value.type === "JSXExpressionContainer") {
+      const expr = attr.value.expression
+      if (expr.type === "JSXEmptyExpression") return null
+      return expr as Expression
+    }
+    return null
+  }
+  return null
+}