Preserve derive callback destructuring and refresh fixtures

Author: mathpirate

packages/ts-transformers/src/transformers/builtins/derive.ts

@@ -140,18 +140,23 @@ function createParameterForPlan(
     );
   }
 
-  if (bindings.length === 1) {
-    const sole = bindings[0]!;
-    if (!sole.propertyName && !sole.dotDotDotToken && !sole.initializer) {
-      return factory.createParameterDeclaration(
-        undefined,
-        undefined,
-        sole.name,
-        undefined,
-        undefined,
-        undefined,
-      );
-    }
+  const shouldInlineSoleBinding =
+    bindings.length === 1 &&
+    captureTree.size === 0 &&
+    fallbackEntries.length === 1 &&
+    !bindings[0]!.propertyName &&
+    !bindings[0]!.dotDotDotToken &&
+    !bindings[0]!.initializer;
+
+  if (shouldInlineSoleBinding) {
+    return factory.createParameterDeclaration(
+      undefined,
+      undefined,
+      bindings[0]!.name,
+      undefined,
+      undefined,
+      undefined,
+    );
   }
 
   return factory.createParameterDeclaration(

packages/ts-transformers/test/fixtures/ast-transform/builder-conditional.expected.tsx

@@ -21,7 +21,7 @@ export default recipe({
     return {
         [NAME]: state.label,
         [UI]: (<section>
-        {__ctHelpers.ifElse(__ctHelpers.derive(state, state => state && state.count > 0), <p>Positive</p>, <p>Non-positive</p>)}
+        {__ctHelpers.ifElse(__ctHelpers.derive(state, ({ state }) => state && state.count > 0), <p>Positive</p>, <p>Non-positive</p>)}
       </section>),
     };
 });

packages/ts-transformers/test/fixtures/ast-transform/counter-recipe.expected.tsx

@@ -49,7 +49,7 @@ export default recipe({
         <ul>
           <li>next number: {__ctHelpers.ifElse(state.value, __ctHelpers.derive({ state: {
                 value: state.value
-            } }, state => state.value + 1), "unknown")}</li>
+            } }, ({ state }) => state.value + 1), "unknown")}</li>
         </ul>
         <ct-button onClick={increment({ value: state.value })}>+</ct-button>
       </div>),

packages/ts-transformers/test/fixtures/ast-transform/event-handler-no-derive.expected.tsx

@@ -32,7 +32,7 @@ export default recipe({
     return {
         [UI]: (<div>
           {/* Regular JSX expression - should be wrapped in derive */}
-          <span>Count: {__ctHelpers.derive(count, count => count + 1)}</span>
+          <span>Count: {__ctHelpers.derive(count, ({ count }) => count + 1)}</span>
 
           {/* Event handler with OpaqueRef - should NOT be wrapped in derive */}
           <ct-button onClick={handleClick({ count })}>

packages/ts-transformers/test/fixtures/ast-transform/ternary_derive.expected.tsx

@@ -18,9 +18,9 @@ export default recipe({
         [UI]: (<div>
         {__ctHelpers.ifElse(__ctHelpers.derive({ state: {
                 value: state.value
-            } }, state => state.value + 1), __ctHelpers.derive({ state: {
+            } }, ({ state }) => state.value + 1), __ctHelpers.derive({ state: {
                 value: state.value
-            } }, state => state.value + 2), "undefined")}
+            } }, ({ state }) => state.value + 2), "undefined")}
       </div>),
     };
 });

packages/ts-transformers/test/fixtures/closures/filter-map-chain.expected.tsx

@@ -47,7 +47,7 @@ export default recipe({
         {/* Method chain: filter then map, both with captures */}
         {__ctHelpers.derive({ state: {
                 items: state.items
-            } }, state => state.items
+            } }, ({ state }) => state.items
             .filter((item) => item.active)).mapWithPattern(__ctHelpers.recipe({
             $schema: "https://json-schema.org/draft/2020-12/schema",
             type: "object",

packages/ts-transformers/test/fixtures/closures/map-computed-alias-strict.expected.tsx

@@ -66,7 +66,7 @@ export default recipe({
                 }
             } as const satisfies __ctHelpers.JSONSchema, ({ element: { [dynamicKey]: val }, params: {} }) => {
                 "use strict";
-                return <span key={val}>{__ctHelpers.derive(val, val => val * 2)}</span>;
+                return <span key={val}>{__ctHelpers.derive(val, ({ val }) => val * 2)}</span>;
             }), {})}
       </div>),
     };

packages/ts-transformers/test/fixtures/closures/map-import-reference.expected.tsx

@@ -73,7 +73,7 @@ export default recipe({
             } as const satisfies __ctHelpers.JSONSchema, ({ element: item, params: {} }) => (<div>
             Item: {__ctHelpers.derive({ item: {
                     price: item.price
-                } }, item => formatPrice(item.price * (1 + TAX_RATE)))}
+                } }, ({ item }) => formatPrice(item.price * (1 + TAX_RATE)))}
           </div>)), {})}
       </div>),
     };

packages/ts-transformers/test/fixtures/jsx-expressions/element-access-complex.expected.tsx

@@ -115,7 +115,7 @@ export default recipe({
                 matrix: state.matrix,
                 row: state.row,
                 col: state.col
-            } }, state => state.matrix[state.row][state.col])}</p>
+            } }, ({ state }) => state.matrix[state.row][state.col])}</p>
 
         {/* Triple nested access */}
         <p>Deep nested: {__ctHelpers.derive({ state: {
@@ -124,41 +124,41 @@ export default recipe({
                     index: state.nested.index
                 },
                 row: state.row
-            } }, state => state.nested.arrays[state.nested.index][state.row])}</p>
+            } }, ({ state }) => state.nested.arrays[state.nested.index][state.row])}</p>
 
         <h3>Multiple References to Same Array</h3>
         {/* Same array accessed multiple times with different indices */}
         <p>
           First and last: {state.items[0]} and{" "}
           {__ctHelpers.derive({ state: {
                 items: state.items
-            } }, state => state.items[state.items.length - 1])}
+            } }, ({ state }) => state.items[state.items.length - 1])}
         </p>
 
         {/* Array used in computation and access */}
         <p>Sum of ends: {__ctHelpers.derive({ state: {
                 arr: state.arr
-            } }, state => state.arr[0] + state.arr[state.arr.length - 1])}</p>
+            } }, ({ state }) => state.arr[0] + state.arr[state.arr.length - 1])}</p>
 
         <h3>Computed Indices</h3>
         {/* Index from multiple state values */}
         <p>Computed index: {__ctHelpers.derive({ state: {
                 arr: state.arr,
                 a: state.a,
                 b: state.b
-            } }, state => state.arr[state.a + state.b])}</p>
+            } }, ({ state }) => state.arr[state.a + state.b])}</p>
 
         {/* Index from computation involving array */}
         <p>Modulo index: {__ctHelpers.derive({ state: {
                 items: state.items,
                 row: state.row
-            } }, state => state.items[state.row % state.items.length])}</p>
+            } }, ({ state }) => state.items[state.row % state.items.length])}</p>
 
         {/* Complex index expression */}
         <p>Complex: {__ctHelpers.derive({ state: {
                 arr: state.arr,
                 a: state.a
-            } }, state => state.arr[Math.min(state.a * 2, state.arr.length - 1)])}</p>
+            } }, ({ state }) => state.arr[Math.min(state.a * 2, state.arr.length - 1)])}</p>
 
         <h3>Chained Element Access</h3>
         {/* Element access returning array, then accessing that */}
@@ -168,19 +168,19 @@ export default recipe({
                 users: state.users,
                 selectedUser: state.selectedUser,
                 selectedScore: state.selectedScore
-            } }, state => state.users[state.selectedUser].scores[state.selectedScore])}
+            } }, ({ state }) => state.users[state.selectedUser].scores[state.selectedScore])}
         </p>
 
         {/* Using one array element as index for another */}
         <p>Indirect: {__ctHelpers.derive({ state: {
                 items: state.items,
                 indices: state.indices
-            } }, state => state.items[state.indices[0]])}</p>
+            } }, ({ state }) => state.items[state.indices[0]])}</p>
 
         {/* Array element used as index for same array */}
         <p>Self reference: {__ctHelpers.derive({ state: {
                 arr: state.arr
-            } }, state => state.arr[state.arr[0]])}</p>
+            } }, ({ state }) => state.arr[state.arr[0]])}</p>
 
         <h3>Mixed Property and Element Access</h3>
         {/* Property access followed by element access with computed index */}
@@ -189,13 +189,13 @@ export default recipe({
                     arrays: state.nested.arrays,
                     index: state.nested.index
                 }
-            } }, state => state.nested.arrays[state.nested.index].length)}</p>
+            } }, ({ state }) => state.nested.arrays[state.nested.index].length)}</p>
 
         {/* Element access followed by property access */}
         <p>User name length: {__ctHelpers.derive({ state: {
                 users: state.users,
                 selectedUser: state.selectedUser
-            } }, state => state.users[state.selectedUser].name.length)}</p>
+            } }, ({ state }) => state.users[state.selectedUser].name.length)}</p>
 
         <h3>Element Access in Conditions</h3>
         {/* Element access in ternary */}
@@ -204,10 +204,10 @@ export default recipe({
           {__ctHelpers.ifElse(__ctHelpers.derive({ state: {
                 arr: state.arr,
                 a: state.a
-            } }, state => state.arr[state.a] > 10), __ctHelpers.derive({ state: {
+            } }, ({ state }) => state.arr[state.a] > 10), __ctHelpers.derive({ state: {
                 items: state.items,
                 b: state.b
-            } }, state => state.items[state.b]), state.items[0])}
+            } }, ({ state }) => state.items[state.b]), state.items[0])}
         </p>
 
         {/* Element access in boolean expression */}
@@ -216,7 +216,7 @@ export default recipe({
                 matrix: state.matrix,
                 row: state.row,
                 col: state.col
-            } }, state => state.matrix[state.row][state.col] > 0), "positive", "non-positive")}
+            } }, ({ state }) => state.matrix[state.row][state.col] > 0), "positive", "non-positive")}
         </p>
 
         <h3>Element Access with Operators</h3>
@@ -225,18 +225,18 @@ export default recipe({
                 arr: state.arr,
                 a: state.a,
                 b: state.b
-            } }, state => state.arr[state.a] * state.arr[state.b])}</p>
+            } }, ({ state }) => state.arr[state.a] * state.arr[state.b])}</p>
 
         {/* Element access with string concatenation */}
         <p>Concat: {__ctHelpers.derive({ state: {
                 items: state.items,
                 indices: state.indices
-            } }, state => state.items[0] + " - " + state.items[state.indices[0]])}</p>
+            } }, ({ state }) => state.items[0] + " - " + state.items[state.indices[0]])}</p>
 
         {/* Multiple element accesses in single expression */}
         <p>Sum: {__ctHelpers.derive({ state: {
                 arr: state.arr
-            } }, state => state.arr[0] + state.arr[1] + state.arr[2])}</p>
+            } }, ({ state }) => state.arr[0] + state.arr[1] + state.arr[2])}</p>
       </div>),
     };
 });

packages/ts-transformers/test/fixtures/jsx-expressions/element-access-simple.expected.tsx

@@ -44,19 +44,19 @@ export default recipe({
         <p>Item: {__ctHelpers.derive({ state: {
                 items: state.items,
                 index: state.index
-            } }, state => state.items[state.index])}</p>
+            } }, ({ state }) => state.items[state.index])}</p>
 
         {/* Computed index */}
         <p>Last: {__ctHelpers.derive({ state: {
                 items: state.items
-            } }, state => state.items[state.items.length - 1])}</p>
+            } }, ({ state }) => state.items[state.items.length - 1])}</p>
 
         {/* Double indexing */}
         <p>Matrix: {__ctHelpers.derive({ state: {
                 matrix: state.matrix,
                 row: state.row,
                 col: state.col
-            } }, state => state.matrix[state.row][state.col])}</p>
+            } }, ({ state }) => state.matrix[state.row][state.col])}</p>
       </div>),
     };
 });