[Feature] make generated codes from enum could be minified when not used

[morlay]

Search Terms

For now TypeScript will transform enum from

enum Test {
    Key = 1
}

to

var Test;
(function (Test) {
    Test[Test["Key"] = 1] = "Key";
})(Test || (Test = {}));

This result is not friendly for uglyify or tree-shaking. When Test is not be used, the generated code block always remain as dead codes.

Suggestion

prefer to generate codes below:

var Test = /*#__PURE__*/(function () {
    var e = {}
    e[e["Key"] = 1] = "Key";
    return e
})();

Examples

The suggestion version will be removed.

Checklist

My suggestion meets these guidelines:

• [x] This wouldn't be a breaking change in existing TypeScript / JavaScript code
• [x] This wouldn't change the runtime behavior of existing JavaScript code
• [x] This could be implemented without emitting different JS based on the types of the expressions
• [x] This isn't a runtime feature (e.g. new expression-level syntax)

[azizhk]

Well I guess this is blocked because we need to be able to extend enums as well. The only way I can think of this is doing something like:

var ABC = /*@__PURE__*/(function (ABC) {
    ABC["A"] = "abc";
    ABC["B"] = "bcd";
    ABC["C"] = "cde";
    return ABC;
})(ABC || {});

ABC = /*@__PURE__*/(function (ABC) {
   ABC["D"] = "def";
   return ABC;
})(ABC || {});

for input:

enum ABC {
    A = "abc",
    B = "bcd",
    C = "cde"
}

enum ABC {
    D = "def"
}

Though terser will still not be able to remove both if we are extending the enum but atleast it would be able to remove it if we have only one declaration of the enum. Here the key point is that the var ABC and the ABC = need to be one statement.

Am here because my "tree-shakeability" tests just failed. 😅 (https://github.com/ritz078/pebble/pull/219) I would be happy to contribute if you can point me to the files where modifications need to be made.

[morlay]

@azizhk I have wrote a babel plugin https://github.com/morlay/babel-plugin-typescript-iife-enum to solve this. It is work fine in my projects.

[azizhk]

That's a neat trick @morlay, I actually use tsc to compile and then rollup (with babel) to bundle, I'll try if I can incorporate something similar in my setup.

[morlay]

@azizhk since babel support typescript. we could compile all through babel.

@azizhk since babel support typescript. we could compile all through babel.

my babel configuration bellow 
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true
        }
      }
    ]
  ],
  "plugins": [
    "babel-plugin-typescript-iife-enum",
    "@babel/plugin-transform-typescript",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    "babel-plugin-pure-calls-annotation"
  ]
}

babel-plugin-pure-calls-annotation is another helper to make uglify or terser happier. if all your named function is pure.

[slavafomin]

This is indeed a very needed feature. We have a lot of packages and we are using enums extensively. Right now, all enums from all packages are getting added to the final application bundle, even if we are not using them at all, or using only a very small subset of all possible values.

I guess, one workaround would be to use constant enums instead, if possible.

[yordis]

Hey folks, any updates on this one?

We are changing most of the types to be union types because of tree-shaking issues, would appreciate some support on the topic.