Symbols used as keys in wire configs are only supported unreliably

[seckardt]

Description

When using symbols as keys of wire adapter configurations, depending on whether that wire config contains values that are considered dynamic, or all values are static, a different behavior becomes apparent in terms of how these symbols are treated.

Steps to Reproduce

https://stackblitz.com/edit/salesforce-lwc-eqtkfa?file=src%2Fmodules%2Fx%2Fapp%2Fapp.js

This way of using a symbol works fine:

const mySymbol = Symbol();

export default class App extends LightningElement {
  @wire(MyWire, {
    [mySymbol]: 1,
  })
  prop;
}

whereas as soon as dynamic values are involved, it doesn’t work:

const mySymbol = Symbol();

export default class App extends LightningElement {
  value = 1;

  @wire(MyWire, {
    [mySymbol]: '$value',
  })
  prop;
}

The differences becomes apparent in the compiled outcome. Here's what the version with only non-dynamic values produces:

registerDecorators(App, {
  wire: {
    prop: {
      adapter: MyWire$1,
      dynamic: [],
      config: function ($cmp) {
        return {
          [mySymbol]: 1
        };
      }
    }
  }
});

and here's the outcome of the dynamic one:

registerDecorators(App, {
  wire: {
    prop: {
      adapter: MyWire$1,
      dynamic: ["mySymbol"],
      config: function ($cmp) {
        return {
          mySymbol: $cmp.value
        };
      }
    }
  },
  fields: ["value"]
});

Expected Results

Symbol keys work fine in all cases.

Actual Results

Symbol keys only work for non-dynamic wire configurations. As soon as dynamic values come into play, the symbol keys get transformed into string keys.

Version

• LWC: 5.1.0

[nolanlawson]

Fixed by #3895