how to pattern match event.data in scalajs - scala.js

Question

I would like to match different events on my window#postMessage handler but I can not match native traits. So how could I solve this:
#js.native
trait XY extends js.Object {
val x: AnyVal = js.native
val y: AnyVal = js.native
}
#js.native
trait DataEvent extends js.Object {
val c: String = js.native // chart
val s: String = js.native // dataSet
val d: XY = js.native // xy data
val x: Seq[XY] = js.native // eXtra data
}
object ChartApi extends JSApp {
def receiveMessage(event: Any): Unit = {
event match {
case DataEvent => ???
case _ => println("else")
}
println(s"lala $event")
}
def main(): Unit = {
// add window event handler
dom.window.addEventListener("message", (event: MessageEvent) => receiveMessage(event.data), false)
println("Hello world!")
}
}
I have different charts in different iframes and I need to send events like "add this data" or "clear data" via postMessage.

Answer 1

JS traits do not have an identity at run-time, which is why you cannot directly test whether an arbitrary object is an instance of a JS trait.
Instead, you need to go the JS way, and test for the presence of a field that uniquely identifies the interface represented by the trait, among other possible choices. For example:
if (event.hasOwnProperty("d")) {
// it must be a DataEvent, because the alternatives do not have a 'd' field
val e = event.asInstanceOf[DataEvent]
...
} else {
...
}
Usually, we don't like to do that, though. So in a messaging protocol with several kinds of messages like this, we typically have an explicit messageType field or something like that. If you make sure that all DataEvent messages a messageType = "data" field, you can do:
if (event.messageType == "data") {
val e = event.asInstanceOf[DataEvent]
...
} else {
...
}
You can encode this "type test" in an extractor:
object DataEvent {
def unapply(event: Any): Option[DataEvent] =
if (event.messageType == "data") Some(event.asInstanceOf[DataEvent])
else None
}
which you can then use in a pattern match like this:
event match {
case DataEvent(event) => ???
case _ => println("else")
}
Finally, you may want to consider a serialization/pickling library to take care of all your messages as case classes instead. See https://www.scala-js.org/libraries/libs.html for a list of such libraries.