[Bug]: Getter should be shadowed by shorthand property

[p51lee]

💻

• Would you like to work on a fix?

How are you using Babel?

Other (Next.js, Gatsby, vue-cli, ...)

Input code

// Here, both x's before and after the getter are required to trigger the bug.
var x = { x , get x ( ) { return 0; } , x } ;
x.x = 1;
console.log(x.x);

Configuration file name

No response

Configuration

No response

Current and expected behavior

x's property x.x should be writable in the input code but it is not in the transpiled code.

Current behavior

x.x is not writable:

$ node output.js
0

Expected behavior

x.x is writable:

$ node input.js
1 // x.x became 1

Environment

Reproduction on Babel's own REPL

Possible solution

No response

Additional context

No response

[babel-bot]

Hey @p51lee! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[SuperSodaSea]

Currently Babel transform var x = { x, get x() { return 0; }, x } into this:

var x =
  ((_x = {
    x: x
  }),
  (_x2 = "x"),
  (_mutatorMap = {}),
  (_mutatorMap[_x2] = _mutatorMap[_x2] || {}),
  (_mutatorMap[_x2].get = function () {
    return 0;
  }),
  _defineProperty(_x, "x", x),
  _defineEnumerableProperties(_x, _mutatorMap),
  _x);

The getter is setted by _defineEnumerableProperties at the end, overwriting previous _defineProperty(_x, "x", x), which should be set at last in a correct transform.

Maybe we should transform it into this?

// Other helper functions...
function _defineGetter(obj, key, get) {
  Object.defineProperty(obj, key, {
    get: get,
    enumerable: true,
    configurable: true
  });
  return obj;
}
// Add a _defineSetter if setter is used
var x =
  ((_x = {
    x: x
  }),
  _defineGetter(_x, "x", function () {
    return 0;
  }),
  _defineProperty(_x, "x", x),
  _x);
x.x = 1;
console.log(x.x);

This can also helps us having the correct order when enumerating properties, for example:

var x = { get ["y"]() { return 0; }, x } ;
for(var k in x) console.log(k);

Should output y then x, but now x then y after transform.

[nicolo-ribaudo]

This can be reproduced using this code:

var a = {
  get ["x"]() {
    return 0;
  },
  ["x"]: 1
};

and with only @babel/plugin-transform-computed-properties.

Using _defineGetter instead of that mutuatorMap sounds good, or we could even have a single helper:

function _defineAccessor(type, obj, key, fn) {
  return Object.defineProperty(
    obj,
    key,
    _defineProperty({ enumerable: true, configurable: true }, type, fn)
  );
}