How to run JavaScript in KVision about kvision HOT 5 CLOSED

Hi,

You should try a different approach, which may require some experimenting:

1. Do not add a reference to the js file to the index.html file. Instead add a NPM dependency in your build.gradle in the kotlinFrontend section like this:

kotlinFrontend {
    npm {
        dependency("mongodb-stitch-browser-sdk", "4.3.1")
    }
    // ...
}

If we are talking about Electron app, you should probably consider using "mongodb-stitch-server-sdk" instead.

2. In the KVision application use it like this (haven't tested it):

val stitch = require("mongodb-stitch-browser-sdk")
val app = stitch.defaultAppClient

3. Both stitch and app object will be of dynamic type, which lets you run any code on them. You can also declare some external classes. Try something like this:

external class UserPasswordCredential(user: String, password: String)
val credential = UserPasswordCredential("<email>", "<password>")
val promise: kotlin.js.Promise = app.auth.loginWithCredential(credential)

4. You can try finding typescript definitions for this sdk and try to convert them to Kotlin with ts2kt tool. It should give you all external classes and interfaces definitions ready to use. But I'm having problems finding it, because this sdk is already written in typescript, so it doesn't have definitions - just source files ;-) I don't know how to convert such thing at the moment. Anyway, you should be able to work with dynamic types only.

from kvision.

And to answer the more general question you asked. To run javascipt code from kotlin you can:

• use js("..") function e.g.

val app = js("Stitch.defaultAppClient")
val credential = js("new UserPasswordCredential('<email>', '<password>')")

2. Use dynamic type like I've shown in the previous comment.
3. Write all your JS code inside independent functions in some external js file, reference that file in the main index.html and use kotlin js() function to call it.

You can find more info here and here

from kvision.

Thanks for that! I got all the way up to defining the UserPasswordCredential('<email>', '<password>') The Stitch and UserPasswordCredential classes are defined within the mongodb-stitch-browser-sdk module.
I tried to define an external class with nested classes like this:

@JsModule("mongodb-stitch-browser-sdk")
@JsNonModule
external class stitch {
    class Stitch {
        val defaultAppClient: Any?
        fun initializeDefaultAppClient(clientAppId: String)
    }
    class UserPasswordCredential(user: String, password: String)
}

However I get an unresolved reference issue with stitch.Stitch.initializeDefaultAppClient and stitch.Stitch.defaultAppClient, any idea why? I can feel I'm close!

from kvision.

I've tested the following code and it seems to be working (but I don't have a mongodb account so can't be sure). Note, I have used mongodb-stitch-server-sdk as a npm dependency in build.gradle, because browser-sdk gives some errors with electron api.

        import pl.treksoft.kvision.utils.createInstance

        val stitchModule = require("mongodb-stitch-server-sdk")
        val stitch = stitchModule.Stitch
        val userPasswordCredentialClass: Any = stitchModule.UserPasswordCredential
        val credential: Any = userPasswordCredentialClass.createInstance("user", "pass")
        val client = stitch.initializeDefaultAppClient("app-id")
        val promise: Promise<dynamic> = client.auth.loginWithCredential(credential)
        promise.then { user: dynamic ->
            console.log(user)
            client.close()
        }.catch { err ->
            console.log(err)
            client.close()
        }

from kvision.

Yes that worked, createInstance seems to be the thing I was missing. Thanks for your help 👍

from kvision.