emberjs / emberjs/ember-cli-babel
[Bug] browserslist and targets have no effect on the output of the build (potential performance problems as well)
- Dominant language
- JavaScript
- Stars
- 152
- Forks
- 115
- Avg merge
- 23h 22m
- Merged PRs (30d)
- 4
Description
Originally reported here: https://github.com/emberjs/ember.js/issues/19790
### 🐞 Describe the Bug
After some investigation here: https://stackoverflow.com/questions/69547969/with-babel-how-do-i-not-compile-away-class-properties-since-browsers-support
And a minimal babel repro here: https://github.com/NullVoxPopuli/babel-transpilation-tests
I expect that setting my targets to `last 1 firefox versions` would allow me to keep native class properties. and only transpile what is decororated.
I believe fixing this could provide a bit of a boost to everyone's build times. Today all class properties are transpiled to a time when class properties were not implemented in the browser).
### 🔬 Minimal Reproduction
- ember new my-app
- cd my-app
- remove safari from targets, leaving only `last 1 Chrome versions` and `last 1 firefox versions`
- add browserslist to package.json
- add browserslist as devDependency
- `yarn browserslist --update-db`
- run `ember build -e production`
- in the my-app.js, I expect all occurrences of `rootURL` to be involved in an assignment, rather than a function call.
result: https://github.com/NullVoxPopuli/repro-for-emberjs-19790
### 😕 Actual Behavior
Living in the dark ages
### 🤔 Expected Behavior
Utilize support for native properties, private properties, methods, etc.
### 🌍 Environment
- Ember: - CLI 3.28.0
- Node.js/npm: -14.17.6
- OS: - n/a
- Browser: - n/a
### ➕ Additional Context
See the comparison between these two files:
Input: https://github.com/NullVoxPopuli/babel-transpilation-tests/blob/main/input.js
Output: https://github.com/NullVoxPopuli/babel-transpilation-tests/blob/main/output.js
This is correct.
But when I add that input file to ember, I get this for the output:
```
/home/nullvoxpopuli/Development/tmp/my-app/my-app/input.js: Class private methods are not enabled.
2 | #a = 'hi';
3 |
> 4 | get #b() {
| ^
5 | return 'hello' + this.#a;
6 | }
7 |
```
which... I guess is unrelated, but should still be fixed. Now, If I change the private methods/getters to public:
I get this mess:
```js
var e, t, r
function n(e, t, r) {(function (e, t) {if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object")})(e, t), t.set(e, r)} function i(e, t) {
var r = function (e, t, r) {
if (!t.has(e)) throw new TypeError("attempted to " + r + " private field on non-instance")
return t.get(e)
}(e, t, "get")
return function (e, t) {
if (t.get) return t.get.call(e)
return t.value
}(e, r)
} r = new WeakMap, e = class {
constructor() {
var e, i, a, l
n(this, r, {writable: !0, value: "hi"}), e = this, i = "g", l = this, (a = t) && Object.defineProperty(e, i, {enumerable: a.enumerable, configurable: a.configurable, writable: a.writable, value: a.initializer ? a.initializer.call(l) : void 0})
} get b() {return "hello" + i(this, r)} get c() {return this.b}
}, a = e.prototype, l = "g", o = [f], u = {configurable: !0, enumerable: !0, writable: !0, initializer: null}, p = {}, Object.keys(u).forEach((function (e) {p[e] = u[e]})), p.enumerable = !!p.enumerable, p.configurable = !!p.configurable, ("value" in p || p.initializer) && (p.writable = !0), p = o.slice().reverse().reduce((function (e, t) {return t(a, l, e) || e}), p), d && void 0 !== p.initializer && (p.value = p.initializer ? p.initializer.call(d) : void 0, p.initializer = void 0), void 0 === p.initializer && (Object.defineProperty(a, l, p), p = null), t = p
var a, l, o, u, d, p
```
which is _way_ wrong.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.