Fix map closure destructured alias handling and add regression fixtures (#1973)

* Fix map closure destructured alias handling and add regression fixtures

* Avoid recomputing destructured computed keys and restore numeric-key fixture coverage

* fix(transform): preserve directive prologues when prepending computed initializers

* fix: properly deduplicate captured variables with unique suffixes

Author: mathpirate

packages/ts-transformers/src/closures/transformer.ts

@@ -906,11 +906,26 @@ function transformDestructuredProperties(
     if (statements.length === 0) return currentBody;
 
     if (ts.isBlock(currentBody)) {
+      // Find where directive prologues end (e.g., "use strict")
+      // Directives must be string literal expression statements at the start
+      let directiveEnd = 0;
+      for (const stmt of currentBody.statements) {
+        if (
+          ts.isExpressionStatement(stmt) &&
+          ts.isStringLiteral(stmt.expression)
+        ) {
+          directiveEnd++;
+        } else {
+          break; // First non-directive = end of prologue
+        }
+      }
+
       return factory.updateBlock(
         currentBody,
         factory.createNodeArray([
-          ...statements,
-          ...currentBody.statements,
+          ...currentBody.statements.slice(0, directiveEnd), // Keep directives first
+          ...statements, // Then our computed initializers
+          ...currentBody.statements.slice(directiveEnd), // Then rest of body
         ]),
       );
     }
@@ -945,6 +960,31 @@ function transformDestructuredProperties(
         const propertyName = element.propertyName;
         usedTempNames.add(alias);
 
+        // For computed properties, create the temp variable upfront (not in the factory)
+        // so multiple uses of the same property share one temp variable
+        let computedTempIdentifier: ts.Identifier | undefined;
+        if (propertyName && ts.isComputedPropertyName(propertyName)) {
+          const tempName = registerTempName(alias);
+          computedTempIdentifier = factory.createIdentifier(tempName);
+
+          computedInitializers.push(
+            factory.createVariableStatement(
+              undefined,
+              factory.createVariableDeclarationList(
+                [
+                  factory.createVariableDeclaration(
+                    computedTempIdentifier,
+                    undefined,
+                    undefined,
+                    propertyName.expression,
+                  ),
+                ],
+                ts.NodeFlags.Const,
+              ),
+            ),
+          );
+        }
+
         destructuredProps.set(alias, () => {
           const target = factory.createIdentifier("element");
 
@@ -969,30 +1009,12 @@ function transformDestructuredProperties(
             return factory.createElementAccessExpression(target, propertyName);
           }
 
-          if (ts.isComputedPropertyName(propertyName)) {
-            const tempName = registerTempName(alias);
-            const tempIdentifier = factory.createIdentifier(tempName);
-
-            computedInitializers.push(
-              factory.createVariableStatement(
-                undefined,
-                factory.createVariableDeclarationList(
-                  [
-                    factory.createVariableDeclaration(
-                      tempIdentifier,
-                      undefined,
-                      undefined,
-                      propertyName.expression,
-                    ),
-                  ],
-                  ts.NodeFlags.Const,
-                ),
-              ),
-            );
-
+          if (
+            ts.isComputedPropertyName(propertyName) && computedTempIdentifier
+          ) {
             return factory.createElementAccessExpression(
               target,
-              tempIdentifier,
+              computedTempIdentifier,
             );
           }
 

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

@@ -0,0 +1,78 @@
+import * as __ctHelpers from "commontools";
+import { recipe, UI } from "commontools";
+const dynamicKey = "value" as const;
+interface Item {
+    value: number;
+    other: number;
+}
+interface State {
+    items: Item[];
+}
+export default recipe({
+    $schema: "https://json-schema.org/draft/2020-12/schema",
+    type: "object",
+    properties: {
+        items: {
+            type: "array",
+            items: {
+                $ref: "#/$defs/Item"
+            }
+        }
+    },
+    required: ["items"],
+    $defs: {
+        Item: {
+            type: "object",
+            properties: {
+                value: {
+                    type: "number"
+                },
+                other: {
+                    type: "number"
+                }
+            },
+            required: ["value", "other"]
+        }
+    }
+} as const satisfies __ctHelpers.JSONSchema, (state) => {
+    return {
+        [UI]: (<div>
+        {state.items.mapWithPattern(__ctHelpers.recipe({
+                $schema: "https://json-schema.org/draft/2020-12/schema",
+                type: "object",
+                properties: {
+                    element: {
+                        $ref: "#/$defs/Item"
+                    },
+                    params: {
+                        type: "object",
+                        properties: {}
+                    }
+                },
+                required: ["element", "params"],
+                $defs: {
+                    Item: {
+                        type: "object",
+                        properties: {
+                            value: {
+                                type: "number"
+                            },
+                            other: {
+                                type: "number"
+                            }
+                        },
+                        required: ["value", "other"]
+                    }
+                }
+            } as const satisfies __ctHelpers.JSONSchema, ({ element, params: {} }) => {
+                "use strict";
+                const __ct_val_key = dynamicKey;
+                return <span key={__ctHelpers.derive({ element, __ct_val_key }, ({ element: element, __ct_val_key: __ct_val_key }) => element[__ct_val_key])}>{__ctHelpers.derive({ element, __ct_val_key }, ({ element: element, __ct_val_key: __ct_val_key }) => element[__ct_val_key] * 2)}</span>;
+            }), {})}
+      </div>),
+    };
+});
+// @ts-ignore: Internals
+function h(...args: any[]) { return __ctHelpers.h.apply(null, args); }
+// @ts-ignore: Internals
+h.fragment = __ctHelpers.h.fragment;

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

@@ -0,0 +1,26 @@
+/// <cts-enable />
+import { recipe, UI } from "commontools";
+
+const dynamicKey = "value" as const;
+
+interface Item {
+  value: number;
+  other: number;
+}
+
+interface State {
+  items: Item[];
+}
+
+export default recipe<State>("MapComputedAliasStrict", (state) => {
+  return {
+    [UI]: (
+      <div>
+        {state.items.map(({ [dynamicKey]: val }) => {
+          "use strict";
+          return <span key={val}>{val * 2}</span>;
+        })}
+      </div>
+    ),
+  };
+});