fix for case with both destructured local bindings as well as computed keys

Author: mathpirate

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

@@ -479,6 +479,7 @@ interface ElementBindingAnalysis {
   readonly bindingName: ts.BindingName;
   readonly elementIdentifier: ts.Identifier;
   readonly computedAliases: readonly ComputedAliasInfo[];
+  readonly destructureStatement?: ts.Statement;
 }
 function collectComputedAliases(
   name: ts.BindingName,
@@ -570,6 +571,95 @@ function collectComputedAliases(
   }
 }
 
+function cloneWithoutComputedProperties(
+  name: ts.BindingName,
+  context: TransformationContext,
+  used: Set<string>,
+): ts.BindingName | undefined {
+  const { factory } = context;
+
+  if (ts.isIdentifier(name)) {
+    return factory.createIdentifier(name.text);
+  }
+
+  if (ts.isObjectBindingPattern(name)) {
+    const elements: ts.BindingElement[] = [];
+
+    for (const element of name.elements) {
+      if (
+        element.propertyName &&
+        ts.isComputedPropertyName(element.propertyName)
+      ) {
+        continue;
+      }
+
+      let clonedName: ts.BindingName | undefined;
+      if (ts.isIdentifier(element.name)) {
+        clonedName = factory.createIdentifier(element.name.text);
+      } else if (isBindingPattern(element.name)) {
+        clonedName = cloneWithoutComputedProperties(
+          element.name,
+          context,
+          used,
+        );
+      }
+
+      if (!clonedName && !element.dotDotDotToken) {
+        continue;
+      }
+
+      elements.push(
+        factory.createBindingElement(
+          element.dotDotDotToken,
+          element.propertyName,
+          clonedName ?? element.name,
+          element.initializer as ts.Expression | undefined,
+        ),
+      );
+    }
+
+    if (elements.length === 0) {
+      return undefined;
+    }
+
+    return factory.createObjectBindingPattern(elements);
+  }
+
+  if (ts.isArrayBindingPattern(name)) {
+    const newElements = name.elements.map((element) => {
+      if (ts.isOmittedExpression(element)) {
+        return element;
+      }
+      if (ts.isBindingElement(element)) {
+        let clonedName: ts.BindingName | undefined;
+        if (ts.isIdentifier(element.name)) {
+          clonedName = factory.createIdentifier(element.name.text);
+        } else if (isBindingPattern(element.name)) {
+          clonedName = cloneWithoutComputedProperties(
+            element.name,
+            context,
+            used,
+          );
+        }
+        if (!clonedName && !element.dotDotDotToken) {
+          return element;
+        }
+        return factory.createBindingElement(
+          element.dotDotDotToken,
+          element.propertyName,
+          clonedName ?? element.name,
+          element.initializer as ts.Expression | undefined,
+        );
+      }
+      return element;
+    });
+
+    return factory.createArrayBindingPattern(newElements);
+  }
+
+  return undefined;
+}
+
 function analyzeElementBinding(
   elemParam: ts.ParameterDeclaration | undefined,
   captureTree: CaptureTreeMap,
@@ -628,10 +718,40 @@ function analyzeElementBinding(
     captureTree.has("element") ? "__ct_element" : "element",
   );
 
+  const residualPattern = cloneWithoutComputedProperties(
+    elemParam.name,
+    context,
+    used,
+  );
+
+  let destructureStatement: ts.Statement | undefined;
+  if (residualPattern) {
+    const normalized = normalizeBindingName(
+      residualPattern,
+      factory,
+      used,
+    );
+    destructureStatement = factory.createVariableStatement(
+      undefined,
+      factory.createVariableDeclarationList(
+        [
+          factory.createVariableDeclaration(
+            normalized,
+            undefined,
+            undefined,
+            factory.createIdentifier(elementIdentifier.text),
+          ),
+        ],
+        ts.NodeFlags.Const,
+      ),
+    );
+  }
+
   return {
     bindingName: elementIdentifier,
     elementIdentifier,
     computedAliases: aliasBucket,
+    destructureStatement,
   };
 }
 
@@ -739,6 +859,10 @@ function rewriteCallbackBody(
 
   const prologue: ts.Statement[] = [];
 
+  if (analysis.destructureStatement) {
+    prologue.push(analysis.destructureStatement);
+  }
+
   for (const info of analysis.computedAliases) {
     prologue.push(
       factory.createVariableStatement(
@@ -1332,6 +1456,7 @@ function createRecipeCallWithParams(
     {
       bindingName: elementAnalysis.bindingName,
       elementIdentifier: elementAnalysis.elementIdentifier,
+      destructureStatement: elementAnalysis.destructureStatement,
       computedAliases: visitedAliases,
     },
     context,

packages/ts-transformers/test/fixtures/closures/map-computed-alias-with-plain-binding.expected.tsx

@@ -0,0 +1,87 @@
+import * as __ctHelpers from "commontools";
+import { recipe, UI } from "commontools";
+function dynamicKey(): "value" {
+    return "value";
+}
+interface Item {
+    foo: number;
+    value: 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: {
+                foo: {
+                    type: "number"
+                },
+                value: {
+                    type: "number"
+                }
+            },
+            required: ["foo", "value"]
+        }
+    }
+} 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: {
+                            foo: {
+                                type: "number"
+                            },
+                            value: {
+                                type: "number"
+                            }
+                        },
+                        required: ["foo", "value"]
+                    }
+                }
+            } as const satisfies __ctHelpers.JSONSchema, ({ element, params: {} }) => {
+                const __ct_val_key = dynamicKey();
+                const { foo } = element;
+                const val = __ctHelpers.derive({
+                    element,
+                    __ct_val_key
+                }, ({ element: element, __ct_val_key: __ct_val_key }) => element[__ct_val_key]);
+                return (<span>{__ctHelpers.derive({
+                    foo: foo,
+                    val: val
+                }, ({ foo, val }) => foo + val)}</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-with-plain-binding.input.tsx

@@ -0,0 +1,27 @@
+/// <cts-enable />
+import { recipe, UI } from "commontools";
+
+function dynamicKey(): "value" {
+  return "value";
+}
+
+interface Item {
+  foo: number;
+  value: number;
+}
+
+interface State {
+  items: Item[];
+}
+
+export default recipe<State>("MapComputedAliasWithPlainBinding", (state) => {
+  return {
+    [UI]: (
+      <div>
+        {state.items.map(({ foo, [dynamicKey()]: val }) => (
+          <span>{foo + val}</span>
+        ))}
+      </div>
+    ),
+  };
+});