fix(compiler): handle symbol properties for dynamic values

packages/@lwc/babel-plugin-component/src/__tests__/fixtures/wire-decorator/transforms-computed-properties/actual.js

@@ -0,0 +1,11 @@
+import { wire, LightningElement } from "lwc";
+import { getFoo, getBar } from "data-service";
+const key1 = Symbol.for("key");
+export default class Test extends LightningElement {
+  @wire(getBar, { [key1]: "$prop1", key2: ["fixed", "array"] })
+  wiredBar;
+
+  // eslint-disable-next-line no-useless-computed-key
+  @wire(getFoo, { ["key1"]: "$prop1", key2: ["fixed", "array"] })
+  wiredFoo;
+}

packages/@lwc/babel-plugin-component/src/__tests__/fixtures/wire-decorator/transforms-computed-properties/expected.js

@@ -0,0 +1,40 @@
+import { registerDecorators as _registerDecorators, registerComponent as _registerComponent, LightningElement } from "lwc";
+import _tmpl from "./test.html";
+import { getFoo, getBar } from "data-service";
+const key1 = Symbol.for("key");
+class Test extends LightningElement {
+  wiredBar;
+
+  // eslint-disable-next-line no-useless-computed-key
+  wiredFoo;
+  /*LWC compiler vX.X.X*/
+}
+_registerDecorators(Test, {
+  wire: {
+    wiredBar: {
+      adapter: getBar,
+      dynamic: [key1],
+      config: function ($cmp) {
+        return {
+          key2: ["fixed", "array"],
+          [key1]: $cmp.prop1
+        };
+      }
+    },
+    wiredFoo: {
+      adapter: getFoo,
+      dynamic: ["key1"],
+      config: function ($cmp) {
+        return {
+          key2: ["fixed", "array"],
+          ["key1"]: $cmp.prop1
+        };
+      }
+    }
+  }
+});
+export default _registerComponent(Test, {
+  tmpl: _tmpl,
+  sel: "lwc-test",
+  apiVersion: 9999999
+});

packages/@lwc/babel-plugin-component/src/decorators/wire/transform.ts

@@ -38,7 +38,7 @@ function getWiredParams(
         .filter((property) => isObservedProperty(property as NodePath<types.ObjectProperty>))
         .map((path) => {
             // Need to clone deep the observed property to remove the param prefix
-            const clonedProperty = t.cloneDeep(path.node) as types.ObjectProperty;
+            const clonedProperty = t.cloneNode(path.node) as types.ObjectProperty;
             (clonedProperty.value as types.StringLiteral).value = (
                 clonedProperty.value as types.StringLiteral
             ).value.slice(1);
@@ -141,7 +141,8 @@ function getGeneratedConfig(t: BabelTypes, wiredValue: WiredValue) {
             configProps.push(
                 t.objectProperty(
                     (param as types.ObjectProperty).key,
-                    paramConfigValue.configValueExpression
+                    paramConfigValue.configValueExpression,
+                    param.computed
                 )
             );
 
@@ -174,9 +175,12 @@ function buildWireConfigValue(t: BabelTypes, wiredValues: WiredValue[]) {
 
             if (wiredValue.params) {
                 const dynamicParamNames = wiredValue.params.map((p) => {
-                    return t.stringLiteral(
-                        t.isIdentifier(p.key) ? p.key.name : (p.key as types.StringLiteral).value
-                    );
+                    const value = t.isIdentifier(p.key)
+                        ? p.key.name
+                        : (p.key as types.StringLiteral).value;
+                    return p.computed && t.isIdentifier(p.key)
+                        ? t.identifier(value)
+                        : t.stringLiteral(value);
                 });
                 wireConfig.push(
                     t.objectProperty(t.identifier('dynamic'), t.arrayExpression(dynamicParamNames))
@@ -284,7 +288,7 @@ export default function transform(t: BabelTypes, decoratorMetas: DecoratorMeta[]
             const reference = referenceLookup(referenceName);
             wiredValue.adapter = {
                 name: referenceName,
-                expression: t.cloneDeep(id.node),
+                expression: t.cloneNode(id.node),
                 reference: reference.type === 'module' ? reference.value : undefined,
             };
         }