I'm trying to use <https://github.com/midzer/tobii> in my kotlin/js project. However, I'm having pro...

# javascript

[rocketraman]

I'm trying to use https://github.com/midzer/tobii in my kotlin/js project. However, I'm having problems initializing the library. Right now I'm getting Uncaught TypeError: components_lightbox_TobiiModule_h0nwsu.Tobii is not a function -- I'm trying to call the default function defined here: https://github.com/midzer/tobii/blob/production/src/js/index.js#L16. I've tried a couple of different approaches to import the module, code in 🧵.

[rocketraman]

Attempt #1:

@JsModule("@midzer/tobii")
external object TobiiModule {
  fun Tobii(): dynamic
}

Attempt #2:

@JsModule("@midzer/tobii")
external fun Tobii(): dynamic

[rocketraman]

Uncaught TypeError: components_lightbox_Tobii_gg6z8a is not a function
    at init_properties_TobiiModule_kt_hm80kh (TobiiModule.kt?29b3:23:13)
    at get_tobii (x.js:45564:5)
    at main (Client.kt?0c95:52:11)
    at eval (x.js:134091:3)
    at eval (x.js:134093:2)
    at ./kotlin/x.js (web.js:1854:1)
    at __webpack_require__ (web.js:2445:33)
    at web.js:3534:37
    at web.js:3537:12
    at webpackUniversalModuleDefinition (web.js:17:17)

[turansky]

@file:JsModule("@midzer/tobii")

@JsName("default")
external fun Tobii(): Tobii

sealed external interface Tobii {
   // more members
}

[rocketraman]

fun Tobii() is external right?

It's still not doing what I expect, but that's definitely getting me further along, now I can call that function and see that it has executed.

[turansky]

Yes, external

[Big Chungus]

How about this

@JsModule("@midzer/tobii")
@JsName("default")
external fun Tobii(): dynamic

[rocketraman]

Why is the @Jsname("default") needed? Is it the symbol used by a common/js module under the hood for the default export?

[Big Chungus]

Yes, it basically links to node's module.exports.default

[Big Chungus]

Default modifier in js is just a syntactic sugar for that

[rocketraman]

Ok. Next problem, I'm trying to pass in a settings object, and I'm using this pattern:

@JsModule("@midzer/tobii")
@JsName("default")
external fun Tobii(userOptions: TobiiUserOptions): Tobii

external interface TobiiUserOptions {
  var autoplayVideo: Boolean
}

fun TobiiUserOptions(): TobiiUserOptions = js("{}")

sealed external interface Tobii {
  ...
}

but I'm getting Uncaught TypeError: components_lightbox_default_mcnppc is not a function. Any ideas?

[Big Chungus]

How are you invoking Tobii()?

[rocketraman]

Tobii(TobiiUserOptions().apply {
  autoplayVideo = true
})

[Big Chungus]

Hmm, can you check if this works first?

val opts = js("{}")
opts.autoplayVideo = true
Tobii(opts)

[Big Chungus]

Also what does this print?

@JsModule("@midzer/tobii")
external val tmp: dynamic
console.log(tmp)

[rocketraman]

No, same problem

[Big Chungus]

console.log above is a neat trick to check module structure when wrapping

[rocketraman]

image.png

[rocketraman]

default is a function

[Big Chungus]

And this?

@JsModule("@midzer/tobii")
@JsName("default")
external val tmp: dynamic
console.log(tmp)

[rocketraman]

Weird, the same thing

[Big Chungus]

Curious! Ok you've peaked my interest - let me boot up my pc.

[turansky]

And this?

@JsModule(“@midzer/tobii”)

@JsName(“default”)

external val tmp: dynamic

console.log(tmp)

In this example JsName has no sence 😞

[turansky]

Accoding screenshot function is here:

@file:JsModule("@midzer/tobii")

@JsName("default")
external fun Tobii(): Tobii

[rocketraman]

That does seem to work, and accept the TobiiUserOptions interface

[rocketraman]

@turansky Can you give some insight as to why?

[Big Chungus]

Got it working!

// tobii.d.kt
@file:JsModule("@midzer/tobii")

@JsName("default")
external class Tobii(userOpts: TobiiUserOpts = definedExternally)

external sealed interface TobiiUserOpts {
  var autoplayVideo: Boolean?
}

// main.kt
fun main() {
  val res = Tobii(
    js("{}").unsafeCast<TobiiUserOpts>().apply {
      autoplayVideo = true
    }
  )
  console.log(res)
}

[Big Chungus]

The issue was that js function was basically a js class without the sugar as per their docs

[Big Chungus]

And the @JsName("default") is very much required here as otherwise it won't be able to link properly.

[rocketraman]

Yep, I had it working too based on @turansky comment above, but I'm still not sure I understand why. The source of tobii does do export default function so why does it not work with the @JsModule annotation not at the file level?

[Big Chungus]

Given JS declaration as export default function Tobii (userOptions) {...} Tobii token is completely ignored and is invisible from external modules that import it. It's basically the same as export default function(userOptions) {..} from the consumer POV.

[rocketraman]

Ah

[Big Chungus]

It's just a syntactic sugar for this

function Tobii(){}
export default Tobii

Tobii token is never exported, it's just a reference as to what to export.

[rocketraman]

So file:@JsModule says to look at the file and import the function defined there, so even if export default Tobii wasn't there, it would still work?

[Big Chungus]

You're mixing up two things. @JsModule imports the whole module object. Used in @file:JsModule context it then map declarations inside the file to exported members of the module object

[Big Chungus]

export default XXX is the same as export const default = "some value" (from kotlin POV) and that's why you need @JsName annotation on the function declaration to tell it "even though I have named my function Tobii, in js look for function named `default`"

[Big Chungus]

Hope that makes sense.

[Big Chungus]

Some more examples to better illustrate the point
export default <...> could be the same as any of these

export function default() {}
export var default = () => {}
export let default = () => {}
export const default = () => {}

[Big Chungus]

Finally, here's how the declarations should look like without @JsName to work

@file:JsModule("@midzer/tobii")

external fun default(): Tobii
//or
external class default()

[rocketraman]

Its not the @JsName that I'm confused about right now. What I'm trying to understand is the difference between the @file:JsModule declaration vs the @JsModule declaration.

[rocketraman]

The docs say this for a file:@JsModule declaration:

Some JavaScript libraries export packages (namespaces) instead of functions and classes. In terms of JavaScript, it's an object that has members that are classes, functions and properties. Importing these packages as Kotlin objects often looks unnatural.

But in this case Tobii index.js does not export a namespace object. Rather, it exports the Tobii function default. So why does

@JsModule("@midzer/tobii")
@JsName("default")
external fun Tobii(...)

not work?

[rocketraman]

Or rather, it does work, until you attempt to pass it a userOptions parameter

[Big Chungus]

Ah, that one is easier 😀

@JsModule always maps to a js object

In @file:JsModule entire file is mapped to said object

In @JsModule external val x: dynamic. The x is mapped to the module object

All the code module exports is always inside said object

[Big Chungus]

Does that make any sense to you?

[Big Chungus]

Or rather, it does work, until you attempt to pass it a userOptions parameter

That's because it only breaks when you actually try to use the object as a function at runtime.

Remember, js has no compile checks

[rocketraman]

Yeah I think so. So the @file version is referencing the module that has the function with the parameter. The non-@file version is referencing the result of the function after userOptions has already been applied to it.

[rocketraman]

Is that right?

[rocketraman]

(In this case the Tobii aka "default" function sets some properties on itself and then returns itself)

[Big Chungus]

Not quite. Both versions are referring to the same thing. The only difference is to what the js module object is mapped to.

In file case it's mapped to the file itself saying "this file IS the module object and the declarations inside are referring to module object's properties"

In non-file case it's just saying "map this external declaration (regardless of the kind) to module object"

[Big Chungus]

Here's all the valid ways to declare the tobii module

@JsModule("...")
external object whatever {
  @JsName("default")
  class Tobii()
}

@file:JsModule("...")

@JsName("default")
external class Tobii()

@JsModule("...")
external val whatever: TobiiModule

external interface TobiiModule {
  @JsName("default")
  class Tobii()
}

[Big Chungus]

Wrong declarations always compile just fine and only break at runtime when you try to use them. This is what I suspect is confusing you.

[rocketraman]

s/class/fun/ I think above right? Ok so the failure when passing properties has nothing to do with what is referenced and everything to do with the declaration just being plain wrong.

[Big Chungus]

Precisely

[Big Chungus]

It should be class according to their docs. Not sure why fun works as well tbh

[rocketraman]

The declaration is a fun that takes an optional parameters object, assigns itself some properties (like a class) and returns itself. So I guess in lovely JavaScript terms it is both a function and a class.

[Big Chungus]

¯⁠\⁠_⁠(⁠ツ⁠)⁠_⁠/⁠¯

[Big Chungus]

Well js classes are always functions in a trench coat. Can't remember why the new keyword is even need there