Morning all, I'm quite new at interfacing JS and K...

# javascript

[julien lengrand-lambert]

Morning all, I'm quite new at interfacing JS and Kotlin.

Say I have a very simple NPM dependency (@jlengrand/test-js) with an index.js file like this :

function defaultComparator (a, b) {
    return a - b
}

export function isSorted (array, comparator) {
    if (!Array.isArray(array)) throw new TypeError('Expected Array, got ' + (typeof array))
    comparator = comparator || defaultComparator

    for (var i = 1, length = array.length; i < length; ++i) {
        if (comparator(array[i - 1], array[i]) > 0) return false
    }

    return true
}

export function returnValue(value) {
    return value;
}

I would like to be able to import both functions from Kotlin, so I do as such

@JsModule("@jlengrand/test-js")
@JsNonModule
external fun <T> isSorted(a: Array<T>): Boolean

@JsModule("@jlengrand/test-js")
@JsNonModule
external fun returnValue(s: String): String

I can use the returnValue function in my Kotlin code, however, it seems to always try to import the isSorted function, given the error I get in my console :

Uncaught TypeError: Expected Array, got string....

As you can see, I have tried to extend from that documentation page (https://kotlinlang.org/docs/using-packages-from-npm.html), however I clearly seem to be missing a crucial piece of info.

Would you have any pointers by any chance?

[Big Chungus]

This should help.

[julien lengrand-lambert]

Hum, is your blog not talking about using Kotlin to create Javascript, rather than importing NPM from Kotlin?

[julien lengrand-lambert]

hum, right it explains both. I think my issue may come from my lack of knowledge of Javascript, mostly

[julien lengrand-lambert]

Ok, trying to changing to fit your blog

function defaultComparator (a, b) {
    return a - b
}

 export function isSorted (array, comparator) {
    if (!Array.isArray(array)) throw new TypeError('Expected Array, got ' + (typeof array))
    comparator = comparator || defaultComparator

    for (var i = 1, length = array.length; i < length; ++i) {
        if (comparator(array[i - 1], array[i]) > 0) return false
    }

    return true
}

export function returnValue(value) {
    return value;
}

@JsModule("@jlengrand/js-tests")
@JsNonModule
external object Ports{
    fun <T> isSorted(a: Array<T>): Boolean
    fun returnValue(s: String): String
}

I'm now getting

Uncaught TypeError: tmp.isSorted is not a function

[julien lengrand-lambert]

For reference : https://github.com/jlengrand/kotlin-js-tests/blob/main/src/jsMain/kotlin/Main.kt

[Big Chungus]

Can you try removing JSNonModule annotation and enable commonJs in gradle config?

[julien lengrand-lambert]

yes let me do that. I intend to run in the browser, will that be an issue?

[julien lengrand-lambert]

wait

[julien lengrand-lambert]

wtf

[Big Chungus]

Shouldn't be. But I know what's up. You JS module is "local" (in resources), so you need to copy them over to kotlinJsCompile task outputDir before it runs 😄

[julien lengrand-lambert]

I copy pasted the whole project to make a repo for you

[julien lengrand-lambert]

in the specific place it works

[julien lengrand-lambert]

same code

[Big Chungus]

Hah 😄

[julien lengrand-lambert]

I hate being a developer sometimes

[julien lengrand-lambert]

Let's see what's up

[Big Chungus]

Maybe build output cache got corrupted

[Big Chungus]

./gradlew clean build

[julien lengrand-lambert]

let me try that

[julien lengrand-lambert]

that did the trick

[julien lengrand-lambert]

lol

[julien lengrand-lambert]

alright thanks

[julien lengrand-lambert]

Great blog btw!

[Big Chungus]

Sweet! Good luck!