rocketraman
03/20/2023, 7:47 PMUncaught 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
03/20/2023, 7:48 PM@JsModule("@midzer/tobii")
external object TobiiModule {
fun Tobii(): dynamic
}
Attempt #2:
@JsModule("@midzer/tobii")
external fun Tobii(): dynamic
rocketraman
03/20/2023, 7:48 PMUncaught 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
03/20/2023, 7:53 PM@file:JsModule("@midzer/tobii")
@JsName("default")
external fun Tobii(): Tobii
sealed external interface Tobii {
// more members
}
rocketraman
03/20/2023, 7:59 PMfun 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
03/20/2023, 8:00 PMexternal
Big Chungus
03/20/2023, 8:57 PMrocketraman
03/20/2023, 9:08 PM@Jsname("default")
needed? Is it the symbol used by a common/js module under the hood for the default export?Big Chungus
03/20/2023, 9:16 PMBig Chungus
03/20/2023, 9:17 PMrocketraman
03/20/2023, 9:19 PM@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
03/20/2023, 9:21 PMrocketraman
03/20/2023, 9:21 PMTobii(TobiiUserOptions().apply {
autoplayVideo = true
})
Big Chungus
03/20/2023, 9:24 PMBig Chungus
03/20/2023, 9:26 PMrocketraman
03/20/2023, 9:26 PMBig Chungus
03/20/2023, 9:27 PMrocketraman
03/20/2023, 9:27 PMrocketraman
03/20/2023, 9:28 PMdefault
is a functionBig Chungus
03/20/2023, 9:28 PMrocketraman
03/20/2023, 9:30 PMBig Chungus
03/20/2023, 9:30 PMturansky
03/20/2023, 9:35 PMAnd this?
@JsModule(“@midzer/tobii”)
@JsName(“default”)
external val tmp: dynamic
console.log(tmp)In this example
JsName
has no sence 😞turansky
03/20/2023, 9:37 PM@file:JsModule("@midzer/tobii")
@JsName("default")
external fun Tobii(): Tobii
rocketraman
03/20/2023, 9:42 PMTobiiUserOptions
interfacerocketraman
03/20/2023, 9:44 PMBig Chungus
03/20/2023, 9:55 PM// 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
03/20/2023, 9:56 PMBig Chungus
03/20/2023, 9:57 PM@JsName("default")
is very much required here as otherwise it won't be able to link properly.rocketraman
03/20/2023, 9:59 PMexport default function
so why does it not work with the @JsModule
annotation not at the file level?Big Chungus
03/20/2023, 10:01 PMexport 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
03/20/2023, 10:01 PMBig Chungus
03/20/2023, 10:02 PMfunction Tobii(){}
export default Tobii
Tobii
token is never exported, it's just a reference as to what to export.rocketraman
03/20/2023, 10:03 PMfile:@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
03/20/2023, 10:05 PM@JsModule
imports the whole module object. Used in @file:JsModule
context it then map declarations inside the file to exported members of the module objectBig Chungus
03/20/2023, 10:07 PMexport 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
03/20/2023, 10:07 PMBig Chungus
03/20/2023, 10:11 PMexport default <...>
could be the same as any of these
export function default() {}
export var default = () => {}
export let default = () => {}
export const default = () => {}
Big Chungus
03/20/2023, 10:18 PM@file:JsModule("@midzer/tobii")
external fun default(): Tobii
//or
external class default()
rocketraman
03/20/2023, 10:20 PM@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
03/20/2023, 10:23 PMfile:@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
03/20/2023, 10:25 PMuserOptions
parameterBig Chungus
03/20/2023, 10:27 PMBig Chungus
03/20/2023, 10:28 PMBig Chungus
03/20/2023, 10:29 PMOr 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
03/20/2023, 10:29 PM@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
03/20/2023, 10:30 PMrocketraman
03/20/2023, 10:32 PMBig Chungus
03/20/2023, 10:33 PMBig Chungus
03/20/2023, 10:39 PM@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
03/20/2023, 10:40 PMrocketraman
03/20/2023, 10:42 PMs/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
03/20/2023, 10:44 PMBig Chungus
03/20/2023, 10:45 PMrocketraman
03/20/2023, 10:46 PMBig Chungus
03/20/2023, 10:49 PMBig Chungus
03/20/2023, 10:50 PM