2.0: Get ready with modules, imports and conditional exports

[dilyanpalauzov]

My understanding is that there will be TUI Calendar 2.0, the development happens on the feat/2.0 branch and per https://ui.toast.com/weekly-pick/en_20190829/ there will be ES6 modules. package.json contains "module": "dist/esm" but the repository does not contain dist/esm.

dist/esm/tui-calendar.es6.js is currently not very ES6-like, it lacks export and import keywords.

NodeJS ignores "module" from package.json. To load an ES6 module with import {X, Y} from 'tui-calendar' package.json must contain conditional exports: "exports": {"import":"dist/tui-calendar.es6.js", "require": "dist/tui-calendar.js"}.

[auto-comment[bot]]

Thank you for raising an issue. We will try and get back to you as soon as possible.

Please make sure you have filled out issue respecting our form in English and given us as much context as possible. If not, the issue will be closed or not replied.

[dilyanpalauzov]

Do I understand correctly, that calling the “build:esm” script is supposed to generate JavaScript 2015 code, that does not use modules, but is a single file? And the “build:es6” is about creating many files that use modules (as opposed to a single ES6 file-module, containing everything)?

If I compare with bootstrap (5/master), its “js” npm script creates just one big ES6-module script (and some other forms of the same data: with popper integrated, without popper integrated, minified/maximied, ES5 and ES6), but not many files that are all separate ES6-modules in dist/js.

[dongsik-yoo]

@dilyanpalauzov "build:esm" script is supposed to generate es6 modules corresponding typescript files. But dist/esm folder will not b e in a repository, but in npm repository.

[dilyanpalauzov]

I still do not understand what the purpose of generating tui-calendar.es6.js is. It has no import/export and therefore uses no modules and therefore is not ES6. Who is going to load that version instead of the ES6-modules version, provided that the caller has funnctional ES6 system?

On the other side, my current understanding is that ES6-module-capable Node handles the (conditional) "exports" in package.json, while the ES6-capable bundler reads "module"

[dongsik-yoo]

tui-calendar.js and tui-calendar.es6.js are bundled as UMD. The differenence is transpiling it or not. tui-calendar.es6.js contains ES6 source code which is not transpiled to ES5. ES6 modules of "build:esm" has ES6-modules and ES6 source code.

[dilyanpalauzov]

Who will need ES6 code delivered as UMD? The purpose of ES6 (and its modules) is to replace UMD.

[dongsik-yoo]

tui-calendar.es6.js will be less than tui-calendar.js despite of as UMD. Someone needs lighter library with only evergreen browsers not IE. Someone needs ES Modules to use tree-shaking on purpose.

[dilyanpalauzov]

My reading is, that build:es6 generates ES6 code that does not use modules for IE11, and build:esm generates ES6 code that use modules.

Per https://caniuse.com/#search=modules IE 11 does not support modules.

Per https://kangax.github.io/compat-table/es6/ IE 11 does support some ES6 features, class and rest parameters being not implemented.

The generated tui-calendar.es6.js contains class day_Day extends calendarControl_CalendarControl { (line 4834) and fire(eventName, ...args) { (line 1317). So this file cannot be used for IE 11.

Who is going to use tui-calendar.es6.js instead of the ES6-modules?

[dongsik-yoo]

Do you mean build:es6 is not necessary?

[dilyanpalauzov]

Yes, the modules output is sufficient. Whoever needs ES5 or anything else can transpile.

[dilyanpalauzov]

Rather a single-ES6 module file is necessary, that contains everything in a module, which file can be included in a single script type='module' tag.

For the record I started recently working with JS and I do everything with modules from the beginning. I have no experience with legacy projects transpiling from modules.