@wire does not like computed property keys

[wjhsf]

Description

@wire, in the engine-server implementation, assumes that the identifier being decorated is not a computed value, resulting in the wrong prop being updated.

In the below example, we want to update the computed symbol property for Symbol(please). Instead, we end see that the component's "symbol" property is being updated, replacing the value we though we'd have.

const symbol = Symbol('please');
export default class extends LightningElement {
    symbol = 'nope';

    @wire(adapter, {value: '123'})
    [symbol];

    get symbolIdentifier () {
        return this.symbol ?? 'unset';
    }

    get symbolValue () {
        return this[symbol] ?? 'unset';
    }
}

playground

Steps to Reproduce

https://playground.lwc.dev

const your => (code) => here;

Expected Results

Actual Results

Browsers Affected

Version

• LWC: x.x.x

Possible Solution

Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.

[nolanlawson]

This repros in engine-dom as well.

[cardoso]

I guess this might be related to https://github.com/salesforce/lwc/pull/4548? In the sense that the solution (or part of it) might be in babel-plugin-compiler?

[nolanlawson]

The solution is almost certainly in babel-plugin-component, yes. This is the bit that compiles component .js files and handles decorators.