Creating JavaScript modules with TeaVM

[Alexey Andreev]

Recently I published TeaVM preview (0.10.0-dev-8) which provides the ability to create JavaScript modules from Java code. This feature was requested by many TeaVM users for several years. Now it becomes possible without extra hacks.

Briefly, TeaVM comes with two new features: module type selection and exporting non-main methods. Since 0.9.0 TeaVM produces UMD wrappers instead of immediately-invoked function. Now it becomes possible to customize wrapper, and one of the is ES2015 module.

Another important thing is ability not only to import declarations from JavaScript (by means of implementing JSObject interface and using JSBody annotation), but to export Java declarations to JavaScript.

Note that this is only the very first implementation. I'm looking forward into implementing several improvements:

• Exporting constructors
  
• More compiler diagnostics (e.g. duplicate class export name)
• Generation of d.ts declarations
• Overriding methods by signature

and so on.

I'd be glad if you tested these features and provided feedback.

And please, don't forget that TeaVM needs your donates. If you like this project, or if these recent features are especially helpful for you use case and you want to thank me, become my sponsor, so I could have extra free capuccino (or perhaps even extra free Pho Bo) every month.

[Alexey Andreev]

And a small follow-up. I forgot to mentioned, that I already documented this feature.

[Jeff Martin]

This is a very cool feature! I will give it a try with ReportMill when I have some time (will probably be a couple weeks though).

jeff

--
You received this message because you are subscribed to the Google Groups "TeaVM" group.
To unsubscribe from this group and stop receiving emails from it, send an email to teavm+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/teavm/58a420b0-7322-4a42-b6e1-6314fd0bd8b7n%40googlegroups.com.

[Steve Hannah]

This is a very cool feature.  Well done Alexey.  Little things like this go a long way to making front-end squads steeped in Typescript and React open to the possibility of sprinkling in a little bit of Java.

To view this discussion on the web visit https://groups.google.com/d/msgid/teavm/B5770AAA-5037-437D-95EA-D094F19AA910%40reportmill.com.

--

Steve Hannah

Web Lite Solutions Corp.

[ScraM Team]

+1.  While it would be simpler if everyone was coding their web frontends in Java only, for now easier interoperability with JavaScript opens up a lot of possibilities for component sharing and hybrid JS/TS/TeaVM projects.  Thanks Alexey! 

[Peter Taylor]

I had a go with this and can confirm ES2015 modules work, I called it from GraalVM
https://www.graalvm.org/latest/reference-manual/js/Modules/#ecmascript-modules-esm
(Although I've not worked out how to re-use the imported module between multiple script evaluations - that's a Graal limitation maybe)

And I could call functions from my react tsx files
```
import { myFunction } from "./myFunction.mjs";
```
This page could benefit from a reference to the maven plugin <targetFileName> config, to override the default classes.js output name.
https://teavm.org/docs/runtime/js-modules.html

(I failed, and worked around, exporting a property from the Module - using a function instead.)

Nice work, thank you!
Peter T

[Alexey Andreev]

As for reference to <targetFileName> - it's here: https://teavm.org/docs/tooling/maven.html 

May be it's just worth mentioning that "details on Maven and Gradle configurations can be found in corresponding pages".

What was the problem with exporting a property?

I had a go with this and can confirm ES2015 modules work, I called it from GraalVM
https://www.graalvm.org/latest/reference-manual/js/Modules/#ecmascript-modules-esm
(Although I've not worked out how to re-use the imported module between multiple script evaluations - that's a Graal limitation maybe)

And I could call functions from my react tsx files
```
import { myFunction } from "./myFunction.mjs";
```
This page could benefit from a reference to the maven plugin <targetFileName> config, to override the default classes.js output name.
https://teavm.org/docs/runtime/js-modules.html

(I failed, and worked around, exporting a property from the Module - using a function instead.)

Nice work, thank you!
Peter T

[Peter Taylor]

The issue with exporting the property was that i couldnt get it included in the export list at the bottom on the module (where functions are).

I had a method JSObjectSubType getDocumentFactory() in the MainClass with @JSProperty and also @JSProperty @JSExport, but nothing happened.

(0.10.0-dev-8)

[Alexey Andreev]

Ah, sure. Just checked it and it turns out that in ES2015 module system it's impossible to export properties. It's possible in CommonJS though, so I can implement this feature only for CommonJS (and with ES2015 compiler will report an error).

[Steve Hannah]

Hi Alexey,
I'm just getting around to trying out this feature now.  Do you have any example projects that use the jsModuleType configuration option on Github?  

Steve

--

You received this message because you are subscribed to the Google Groups "TeaVM" group.
To unsubscribe from this group and stop receiving emails from it, send an email to teavm+un...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/teavm/35b719f4-ef05-43ad-8a0e-d9cb42ceaf2an%40googlegroups.com.

[Steve Hannah]

Found the module sample.  https://github.com/konsoletyper/teavm/tree/master/samples/module-test