Skip to content

Add extra information about ES modules inside the js-interop document #4932

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: kotlin-js-doc-update
Choose a base branch
from
+22 −10
Open

Add extra information about ES modules inside the js-interop document #4932

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4789de7
Add extra information about ES modules inside the js-interop document
JSMonk Jun 27, 2025
699a018
chore: apply community suggestions on clarifying the module systems t…
JSMonk Jul 28, 2025
975f3a9
update: js-interop review
AlejandraPedroza Jul 30, 2025
cc716c5
chore: add links to module systems
AlejandraPedroza Jul 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 16 additions & 5 deletions docs/topics/js/js-to-kotlin-interop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,9 @@ alert(myModule.foo());
```

This is not applicable when you compile your Kotlin module to JavaScript modules like UMD (which is the default setting
for both `browser` and `nodejs` targets), CommonJS or AMD. In this case, your declarations will be exposed in the format
specified by your chosen JavaScript module system. When using UMD or CommonJS, for example, your call site could look
for both `browser` and `nodejs` targets), ESM, CommonJS or AMD.
In this case, your declarations will be exposed in the format specified by your chosen JavaScript module system.
When using UMD, ESM or CommonJS, for example, your call site could look
like this:

```javascript
Expand All @@ -33,8 +34,9 @@ Check the article on [JavaScript Modules](js-modules.md) for more information on

## Package structure

Kotlin exposes its package structure to JavaScript, so unless you define your declarations in the root package,
you have to use fully qualified names in JavaScript. For example:
For most of the module systems, Kotlin exposes its package structure to JavaScript,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it's worth mentioning which module systems, since Kotlin supports four only (not considering PLAIN).
Plus, you say ESM is an exception, so CJS, AMD and UMD are the one with the package structure.

so unless you define your declarations in the root package, you have to use fully qualified names in JavaScript.
For example:

```kotlin
package my.qualified.packagename
Expand All @@ -54,6 +56,15 @@ Or, in the case of using `plain` as a module system setting:
alert(myModule.my.qualified.packagename.foo());
```

However, there is an exception for `ES` modules.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you apply my suggestion above, you could reword this one to

The ECMAScript Modules target instead loses package information, to improve the package' bundle size and to match the typical layout of ESM packages.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Applied your suggestions

It loses the package information to improve the final application bundle-size.
So the consumption of the Kotlin declarations with ES modules looks like this:
```javascript
import { foo } from 'myModule';

alert(foo());
```

### @JsName annotation

In some cases (for example, to support overloads), the Kotlin compiler mangles the names of generated functions and attributes
Expand Down Expand Up @@ -179,7 +190,7 @@ See how Kotlin types are mapped to JavaScript ones:
| `List`, `MutableList` | `KtList`, `KtMutableList` | Exposes an `Array` via `KtList.asJsReadonlyArrayView` or `KtMutableList.asJsArrayView`. |
| `Map`, `MutableMap` | `KtMap`, `KtMutableMap` | Exposes an ES2015 `Map` via `KtMap.asJsReadonlyMapView` or `KtMutableMap.asJsMapView`. |
| `Set`, `MutableSet` | `KtSet`, `KtMutableSet` | Exposes an ES2015 `Set` via `KtSet.asJsReadonlySetView` or `KtMutableSet.asJsSetView`. |
| `Unit` | Undefined | Exportable when used as return type, but not when used as parameter type. |
| `Unit` | undefined | Exportable when used as return type, but not when used as parameter type. |
| `Any` | `Object` | |
| `Throwable` | `Error` | |
| `enum class Type` | `Type` | Enum entries are exposed as static class properties (`Type.ENTRY`). |
Expand Down