Hi friends. We are experimenting with ES2015 on ou...

# javascript

[salomonbrys]

Hi friends.
We are experimenting with ES2015 on our application (core KMP business, typescript Web UI).
We have a lot of modules that are all exported together by a business module. We are using kotlin.js.ir.output.granularity=per-file (because we have some different types in different packages that have the same type name, and neither whole-program nor per-module support that).
Do someone have a sample working with these parameters ?
So far, we have come thus far with typescript configuration:
• "module": "ES2015", "moduleResolution": "Bundler" which makes VSCode correctly resolve import { System } from 'test-js-export/kotlin/test-js-business/com/foo/test/business/System.export' with the associated System.d.ts file, but TypeScript compilation fails with ERR_MODULE_NOT_FOUND.
• "module": "NodeNext", "moduleResolution": "NodeNext" which makes TypeScript compile import { System } from 'test-js-export/kotlin/test-js-business/com/foo/test/business/System.export.mjs' (note the .mjs at the end of the import), and VSCode sees no problem, but it also gives no completion whatsoever as it seems the .d.ts file is simply not read.

[turansky]

because we have some different types in different packages that have the same type name

Prefixes - is what umbrella packages use in such cases

[salomonbrys]

They are not added by Kotlin with ES2015 modules

[turansky]

It's what you should add youself

[salomonbrys]

Not possible. This API is beeing used by many products in our large organisation

[turansky]

Then I don't understand question

[salomonbrys]

But furthermore, we have the exact same issue I am describing in the default per-module mode.

[turansky]

If you migrate from UMD to ES modules - export will be new in any case

[salomonbrys]

Yep, but we don't want to change the API for our Android & iOS products

[turansky]

Prefixes - only for JS 😉

[salomonbrys]

The problem is that I cannot find Typescript a configuration that works with these ES2015 modules bith with the TypeScript compiler & the IDE

[turansky]

@JsName("BaseA")
class A

// in other package
@JsName("CommonA")
class A

[salomonbrys]

Even by adding prefixes only for JS, it won't help with the TS config. We can either make the IDE or the compiler working, but we did not manage to get both working. Wether on the per-module or on the per-file mode, so while prefixes allows us to use per-module, it does not fix our issue.

[Edoardo Luppi]

Prefixing everything is a mess, it ruins the DevEx, so I wouldn't go down that route.

[Edoardo Luppi]

AFAIU, module should be ES2015, and moduleResolution should be nodenext, as Node effectively supports both ESM and CommonJS.

[Edoardo Luppi]

@salomonbrys Just guessing here.
The outputted package.json file contains a "types": "name.d.ts" entry.
However as far as I can see that root level file isn't actually produced.

[turansky]

Prefixing everything is a mess, it ruins the DevEx

It's what multiplatform libraries like yFiles do during migration on ES modules

[salomonbrys]

So, the answer is : don't test with Node what is compiled for the Browser 😅

[Artem Kobzar]

I believe the second option you described should work and, maybe, there is a per-file bug for generating typescript-definitions.
Ideally, there should be a d.ts file like System.exports.d.ts but as far as I remember nobody has implemented a per-file linking between TypeScript definition files so, this can be the problem you faced
per-file is still experimental and we are still trying to fix a lot of issues with it

[Edoardo Luppi]

Indeed per-file needs to output typings that link to each other to be worth using.

[Edoardo Luppi]

Although I think once that problem is overcome, the per-file way with ESM is going to become the most commonly used.