Access to JavaScript environment


#1

Are there ways to access javascripts environment? For example, how can I call window.alert from Kotlin?


#2

Hello.

I assume you are using web demo. At this very moment there is no (legal :slight_smile: )way to do it.

How it is supposed to be done:

Since Kotlin is statically typed and dynamics wont be there in the near future, we have to provide declarations of the environment we want to use. The declarations are provided via kotlin files. For example, if you open javascript canvas examples in web demo, you’ll notice some mysterious imports: packages like js, html5, jquery. These packages contain some minimal declarations required for web demo. At the moment these are very rough hand written drafts for demonstration sake. Of course, you can declare not only environment but also your custom libraries that way.

If you have the source you can look at js/js.libraries.

Let me know if you need more information or you want me to show you how you can add new declarations.


#3

Thank you for reply. I've read js/ sources I found way to implement bridge for JavaScript. I have  first success with it.

For someone who may also whant to play with Kotlin JavaScript generation my steps to get it work:

  1. Declare native annotation in you Kotlin file(s)

native annotation class native() {}

2. Declare JavaScript's function(s) you need like this:

native fun alert(message : String?) : Unit {}

3. Create directory for sandbox, let it be web 4. Downwlod kontlin lib: https://raw.github.com/JetBrains/kotlin/libsource/js/js.translator/testFiles/kotlin_lib.js and put it to web directory 5. Create simple HTML file like this (note that second JavaScript file name should be different):

``

<!DOCTYPE html>
<html>
<head>
  <title></title>

  <script type=“text/javascript” src=“kotlin_lib.js”></script>
  <script type=“text/javascript” src=“kotlin-test-web.js”></script>
</head>
<body>

</body>
</html>


6. Open Debug/Run configuration window and press add button, select K2JS, fill name with something, fill “Generated file directory” with path to your “web” directory, HTML file set to you HTML file you’ve created at 5th step, select browser, press OK
7. Write main function like this:

fun main(args : Array<String>) {   alert("Hello") }

8. Select configuration you've created and press run. Open browser if it's not started automatically 9. Enjoy Kotlin 4 JavaScript!

#4

But.. now I did something and K2JS compiler now generates code for calls like this:

``

var w2 = Kotlin.Namespace.create({initialize:function(){
}
, main:function(args){
  {
  web.alert_0(‘Hello’);
  }
}
}, {});


Of course this is not that I expected.
And even if main and alert declard in default package and in the same file it does not work.

How can I fix it?


#5

Hi, Sergey. This will be a reply to both your posts.

First of all, I’m simply amazed by how you got all this stuff figured out. I pushed configuration stuff only on Wednesday and told noone about it :). So I didn’t think you’ve already tried it out.

You got everything correctly. One more step that I do is to include js.libraries module from the main repo to your project. (Yes, it’s very inconvenient and will be changed later obviously)

Now getting to your problem: my guess is that you’ve moved your “native” annotation class to the wrong package. (It is in js.libraries, so you were not supposed to define it yourself) If that’s not the problem, please provide kotlin files, that you’re trying to translate.

I have a small pet project using kotlin to javascript backend. Nothing amazing but you may want to checkout it out as an example. Remember that you’ll have to include js.libraries module and set the correct dependency.

Please contact me if you have any suggestions or ideas. Also you’re of course welcome to contribute to libraries or to any other part of the project you’re interested in.


#6

So annotation "native" is declared inside package js and can't be declared outside, isn't it? Is it compiler-related constraint and "js" is hardcoded inside compiler?

And the second question: why does the native annotation work in web-demo without import js.* ? Is it compiler feature? Or I still missing something?

PS: sorry for my probaly incorrect questions: I have only two days experience with Kotlin and not completely understand everything


#7

First of all, I'm simply amazed by how you got all this stuff figured out. I pushed configuration stuff only on Wednesday and told noone about it :). So I didn't think you've already tried it out.

I just found that generated javascript is incomplete and didn't found required *.js files in Kotlin SDK and then I found this stuff in repository..


#8

JavaScript stuff is in early stages of development so there are lot's of issues still to be solved.

As for native annotation: yes it is hardcoded inside compiler as the user is not expected to define his own native annotation.

And the second question: why does the native annotation work in web-demo without import js.* ?

What do you mean by working without the import? Can you provide an example of what you mean?

Trying to clarify: native annotation works the following way: if a fun or a property is annotated then translator translates the references to this member as is (with the same name the member has) without any name mangling or stuff like that. If class is annotated then the same applies to all its members including constructor.


#9
As for native annotation: yes it is hardcoded inside compiler as the user is not expected to define his own native annotation.

If it's already defined then why it's declared here? Is all stuff in js.library embedded to compiler?


#10

Ah, i got what you mean. Web demo implicitly includes files from js.libraries when in js mode. When working in IDE you have to include it manually (for now)


#11

It'd be great to create a little demo showing how Kotlin should work with JSON for consuming, creating and navigating JSON trees. What kind of thing did you have in mind? A kinda intrinsic JavaScriptObject type thing with an API for navigating & modifying objects?


#12

Is dynamic support on the roadmap? For scenarios like this it would be quite useful.

[Update: Nevermind. Saw this post]