Tsdx: Spread syntax can't work with iterables (Set, Map) -- downlevelIteration issue

Created on 17 Dec 2019  路  9Comments  路  Source: formium/tsdx

// Input
const set = new Set([1, 2, 3]);

export const spread = [...set, 4, 5];
// Output lib.esm.js
var set =
/*#__PURE__*/
new Set([1, 2, 3]);
var spread =
/*#__PURE__*/
[].concat(set, 4, 5);

export { spread };
//# sourceMappingURL=lib.esm.js.map

Current Behavior

import { spread } from 'lib';

console.log(spread);
// [Set(3), 4, 5]

Expected behavior

import { spread } from 'lib';

console.log(spread);
// [1, 2, 3, 4, 5]

Suggested solution(s)

Additional context

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| TSDX | 0.11.0
| TypeScript | 3.7.3
| Browser | Chrome
| npm/Yarn | 6.12.1
| Node | v13.1.0
| Operating System | MacOS 10.15

help wanted workaround available downlevelIteration

All 9 comments

would love help finding root cause. bet we have a bad transform in here.

@maroon1 @sw-yx this is typescript issue
https://github.com/microsoft/TypeScript/issues/8856

with option "downlevelIteration": true in tsconfig and tsdx build

const set = new Set([1, 2, 3])
console.log([...set, 4, 5])

// [ Set { 1, 2, 3 }, 4, 5 ]

meanwhile pure tsc --downlevelIteration

// [ 1, 2, 3, 4, 5 ]

...so need to check rollup/babel configs/presets

related:
https://babeljs.io/docs/en/babel-plugin-transform-spread

"plugins": [
    ["@babel/plugin-transform-spread", {
      "loose": true
    }]
  ]

loose defaults to false. In loose mode true, all iterables are assumed to be arrays.

ok. got a recommendation? should we add that flag?

@sw-yx not sure yet.. still playing with babel options & configs
will provide recommendations soon))

yes, I found combination to produce correct result with spread iterables:
Screenshot from 2019-12-17 23-21-25

  1. use option "downlevelIteration": true in tsconfig + "target": "es5"
  2. option loose for @babel/prest-env must be set to false

Screenshot from 2019-12-17 22-59-55

do we need some fix? maybe no.. but need to add some instructions how to config tsdx in this case

another solution:

  1. use option "downlevelIteration": true in tsconfig
  2. tsdx build --target node
    result - es6 as is without transpilation:
const spread = [...
/*#__PURE__*/
new Set([1, 2, 3]), 4, 5];
console.log(spread);

@ambroseus thx.

Was this page helpful?
0 / 5 - 0 ratings