Modelling external JS objects

Question

PixiJS (or rather, Resource Loader), returns a JS object shaped like this in the callback of the load function:

{
    "resource-you-asked-for.png": {
        url: "foo.png",
        error: <optional error>,
        data: <binary data>
    },
    "second-resource.png": { ... }
}

My question is...how do I model this in Kotlin.js? I can't just say this is a Map<String, LoaderResult> -- then Kotlin will try to use get (a mangled get actually) to index into it. And I can't subclass dynamic obviously.

Suggestions?

kzm · Answer 1 · 2018-10-01T15:13:41.180

JavaScript object that acts like a Map can be used in Kotlin as external interface with extension get and set operator functions:

external interface ResourceDictionary

inline operator fun ResourceDictionary.get(name: String): LoaderResult? =
    this.asDynamic()[name]

inline operator fun ResourceDictionary.set(name: String, result: LoaderResult?) {
    this.asDynamic()[name] = result
}

JavaScript object that acts like a class be used in Kotlin as external class

external open class LoaderResult {
   var url: String
   var data: ByteArray
   var error: Error?
}

You can also convert TypeScript definitions using ts2kt tool:

$ npm install -g ts2kt
Find index.d.ts file for PixiJS
$ ts2kt index.d.ts

Then you'll be able to find external interface ResourceDictionary and external open class Resource in pixi.PIXI.loaders.kt:

Modelling external JS objects

1 Answers1