Stencil: TypeScript helpers / tslib

[cjorasch]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

• [x] feature request

Current behavior:
Components that use certain TypeScript features end up with lots of duplicated typescript helper code.

Expected behavior:
Is is possible to use settings in tsconfig.json or other build options to reduce the number of instances of the TypeScript helper code? I tried adding "importHelpers": true to tsconfig.json but that did not work.

Related code:

Code that uses Object.assign or {...props} ends up with an __assign helper function added in the js output.

var __assign = (undefined && undefined.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};

Code that uses extends ends up with an __extends helper function.

var __extends = (undefined && undefined.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();

If you have a large number of components it is possible that there will be a large number of these helper functions defined since they will be in each component js file.

[jgw96]

Thanks for opening an issue with us! This is happening because typescript is using these helpers as "polyfills" for these features so that they work in ES5. This is actually not an issue anymore in the latest version of Stencil as we now default to ES6 builds with a fallback to ES5 for older browsers. Soooo, in evergreen browsers such as Chrome and modern Safari, they will never load bundles that have these helpers which means smaller bundles 🎉

[noamichael]

@jgw96

Thanks for opening an issue with us! This is happening because typescript is using these helpers as "polyfills" for these features so that they work in ES5. This is actually not an issue anymore in the latest version of Stencil as we now default to ES6 builds with a fallback to ES5 for older browsers. Soooo, in evergreen browsers such as Chrome and modern Safari, they will never load bundles that have these helpers which means smaller bundles 🎉

I know this is an older issue, but this still seems to be happening in our Angular output for the ionic components as of @ionic-native/[email protected] and @ionic/[email protected]:

(some bundle file...)

use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__extends", function() { return __extends; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__assign", function() { return __assign; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__rest", function() { return __rest; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__decorate", function() { return __decorate; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__param", function() { return __param; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__metadata", function() { return __metadata; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__awaiter", function() { return __awaiter; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__generator", function() { return __generator; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__exportStar", function() { return __exportStar; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__values", function() { return __values; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__read", function() { return __read; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__spread", function() { return __spread; });

//...and many more

var extendStatics = function(d, b) {
  extendStatics = Object.setPrototypeOf ||
      ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
      function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  return extendStatics(d, b);
};

//...and many more implementations

For example, the __generator polyfill (which may be the largest) was found in 422 of the bundle files.

Because our Angular app is targeting ES5, wouldn't it make sense to use tslib so all those inline polyfills are replaced with imports?

[subgan82]

Any update on this without this support seeing errors like this below when using a built stencil component in a react/vue based app

Support for tslib + importHelpers: true in tsconfig is needed.

dentifier '__awaiter' has already been declared (78:9)

  76 |     return __assign.apply(this, arguments);
  77 | };
> 78 | function __awaiter(thisArg, _arguments, P, generator) {

[MrAntix]

I was getting this too as the files created in esm-es5 were including tslib.es6.js and getting duplicate declarations for __extends, which was being picked up by an Angular app consuming the stencil component lib and causing it to fail the build

I have switched off es5 builds in the config for the component lib and now my angular app builds

/// stencil.config.ts
export const config: Config = {
  ...
  buildEs5: false,
  ...
};