Using Kotlin code transpiled to JavaScript in an Angular/client-side project

Question

We have a Kotlin project for which some classes are intended to be shared with the client-side, and as a result have configured our kotlin-maven-plugin to spit out certain Kotlin classes as JavaScript:

    <configuration>
        <outputFile>${project.basedir}/angular/src/assets/kotlin_classes.js</outputFile>
        <moduleKind>commonjs</moduleKind>
    </configuration>

With a Kotlin class that looks like:

class SomeKotlinClass {
    fun someMethod(name: String): String {
        return "Happy Birthday, " + name;
    }
}

The problem that we're encountering is that no matter what moduleKind we use (we've tried plain, umd, amd), our method names seem to have an odd/garbled suffix in the JavaScript file:

  SomeKotlinClass.prototype.someMethod_6q3v0v$ = function (name) {
    return 'Happy Birthday, ' + name
  };

This means that our calls in Angular/TypeScript can't be to someMethod(), they have to be to someMethod_6q3v0v$(), which doesn't work for us.

Am I doing something wrong with my plugin configuration, or with the way I'm including this JavaScript file in our project? We're 99% of the way there, but this last (strange) hurdle is holding us up.

The @JsName annotation should solve your immediate issue. However there are many other issues, as described in my blog post building-applications-with-kotlin-and-typescript. such as: - using kotlin types - generating .d.ts files - getting the kotlin generated code into the node_modules directory (or assets) I would be interested how you solved those issues yourself? — user2228895
– user2228895, Commented Jan 9, 2020 at 12:27

Alexander Egger · Accepted Answer · 2019-03-20 06:26:46Z

2

The name of the compiled method in Javascript can be set using the @JSName(...) annotation.

In this case:

class SomeKotlinClass {
    @JsName("someMethod")
    fun someMethod(name: String): String {
        return "Happy Birthday, " + name;
    }
}

Which then is compiled to:

SomeKotlinClass.prototype.someMethod = function (name) {
   return 'Happy Birthday, ' + name;
};

answered Mar 20, 2019 at 6:26

Alexander Egger

5,3201 gold badge30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Kotlin code transpiled to JavaScript in an Angular/client-side project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related