Scala.js facade for npm project

Question

I am trying to wrap my head around Scala.js and would like to write a very basic facade for this awesome library: https://github.com/anvaka/VivaGraphJS

I wanted to begin small and work my way up, but alas, no luck so far.

Basically I want to build this in Scala.js for now:

function drawGraph() {
    var graph = Viva.Graph.graph();
    graph.addLink(1, 2);

    var graphics = Viva.Graph.View.webglGraphics();

    var renderer = Viva.Graph.View.renderer(graph, {
        container: document.getElementById('graphHolder'),
        graphics: graphics
    });
    renderer.run();
}

This renders just fine

Now my first Facade:

package tld.awesomeproject.facades

import org.scalajs.dom.raw.HTMLElement

import scala.scalajs.js
import scala.scalajs.js.annotation.JSName

@js.native
@JSName("Viva.Graph.graph")
class VivaGraph extends js.Object
{
  var graph: Ngraph = js.native
  var renderer: Renderer = js.native

  def addNode(id: String, data: js.Any): Unit = js.native
  def addLink(from: String, to: String): Unit = js.native
  def addLink(from: String, to: String, data: js.Any): Unit = js.native
}

@js.native
@JSName("ngraph.graph")
class Ngraph extends js.Object

@js.native
trait Graphics extends js.Object

@js.native
@JSName("Viva.Graph.View.webglGraphics")
class WebGlGraphics extends Graphics

@js.native
@JSName("Viva.Graph.View.renderer")
class Renderer(vivaGraph: VivaGraph) extends js.Object
{
  var container: HTMLElement = js.native
  var graphics: Graphics = js.native

  def run(): Unit = js.native
}

In my main class:

    object Main extends JSApp
{
  import scalatags.JsDom.all._

  def main(): Unit =
  {
    // Add js script dynamically
    val s = script(
      "alert('Hell World')"
    )
    dom.document.getElementsByTagName("head")(0).appendChild(s.render)

    val testing = div(id := "testing")
    dom.document.body.appendChild(testing.render)

    dom.document.getElementById("testing").asInstanceOf[Div].style.background = "green"
    dom.document.getElementById("testing").asInstanceOf[Div].style.height = "1000px"

    val graph = new VivaGraph
    graph.addLink("1", "2")
    graph.addNode("blubb", "now")

    val renderer = new Renderer(graph)
    //renderer.container = dom.document.getElementById("testing").asInstanceOf[Div]
    renderer.graphics = new WebGlGraphics

    renderer.run()
  }
}

Now, the hello world is invoked, so I am binding everything just right, but no graph will show up. (the graphHolder div comes from the html itself, which I spare you)

important part from the compiled client-fastop.js:

$c_LMain$.prototype.main__V = (function() {
  var this$1 = $m_Lscalatags_JsDom$all$();
  var s = this$1.script__Lscalatags_JsDom$TypedTag().apply__sc_Seq__Lscalatags_JsDom$TypedTag(new $c_sjs_js_WrappedArray().init___sjs_js_Array([($m_Lscalatags_JsDom$all$(), new $c_Lscalatags_JsDom$StringFrag().init___T("alert('Hell Worldadaa')"))]));
  $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().getElementsByTagName("head")[0].appendChild(s.render__Lorg_scalajs_dom_raw_Element());
  var jstesting$1 = $m_Lscalacss_defaults_PlatformExports$StyleSheetInlineJsOps$();
  var s$2 = $m_Lscalacss_internal_StringRenderer$().defaultPretty__Lscalacss_internal_Renderer();
  jstesting$1.addToDocument$extension__Lscalacss_internal_mutable_StyleSheet$Inline__Lscalacss_internal_Renderer__Lscalacss_internal_Env__V(s$1, new $c_Lscalacss_defaults_PlatformExports$StyleElementRenderer().init___Lscalacss_internal_Renderer(s$2), ($m_Lscalacss_package$Defaults$(), $m_Lscalacss_defaults_DefaultSettings$Dev$(), $m_Lscalacss_internal_Env$().empty$1));
  var this$12 = $m_Lscalatags_JsDom$all$();
  var x = this$12.div__Lscalatags_JsDom$TypedTag().apply__sc_Seq__Lscalatags_JsDom$TypedTag(new $c_sjs_js_WrappedArray().init___sjs_js_Array([$m_Lscalatags_JsDom$all$().id__Lscalatags_generic_Attr().$$colon$eq__O__Lscalatags_generic_AttrValue__Lscalatags_generic_AttrPair("testing", $m_Lscalatags_JsDom$all$().stringAttr$1), $m_Lscalatags_JsDom$all$().cls__Lscalatags_generic_Attr().$$colon$eq__O__Lscalatags_generic_AttrValue__Lscalatags_generic_AttrPair($m_Ltld_awesomeproject_TestCss$().b$3.htmlClass$1, $m_Lscalatags_JsDom$all$().stringAttr$1)]));
  $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().body.appendChild(testing.render__Lorg_scalajs_dom_raw_Element());
  $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().getElementById("graphHolder").style.background = "yellow";
  $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().getElementById("graphHolder").style.height = "1000px";
  $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().getElementById("testing").style.background = "blue";
  var graph = new $g.Viva.Graph.graph();
  graph.addLink("1", "2", null);
  var renderer = new $g.Viva.Graph.View.renderer(graph);
  renderer.container = $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().getElementById("testing");
  renderer.graphics = new $g.Viva.Graph.View.webglGraphics()
});

Now I am wondering, what am I doing wrong? Can someone please point me in the right direction? Compiled code looks okayish (?!)

edit:

Given the input in the comment I got this far:

generated code js code

  var graph = $g.Viva.Graph.graph;
  graph.addLink("1", "2");
  graph.addNode("blubb", "now");
  var renderer = new $g.Viva.Graph.View.renderer(graph.graph);
  renderer.container = $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().getElementById("testing");
  renderer.graphics = $g.Viva.Graph.View.webglGraphics;
  renderer.run()

Updated facade

package tld.awesomeproject.facades

import org.scalajs.dom.raw.HTMLElement

import scala.scalajs.js
import scala.scalajs.js.annotation.JSName

@js.native
@JSName("Viva.Graph.graph")
object VivaGraph extends js.Object
{
  var graph: Ngraph = js.native
  var renderer: Renderer = js.native

  def addNode(id: String, data: js.Any): Unit = js.native
  def addLink(from: String, to: String): Unit = js.native
  def addLink(from: String, to: String, data: js.Any): Unit = js.native
}

@js.native
@JSName("ngraph.graph")
class Ngraph extends js.Object
{
  def addLink(from: String, to: String): Unit = js.native
  def addNode(id: String, data: js.Any): Unit = js.native
}

@js.native
trait Graphics extends js.Object

@js.native
@JSName("Viva.Graph.View.webglGraphics")
object WebGlGraphics extends Graphics

@js.native
@JSName("Viva.Graph.View.renderer")
class Renderer(ngraph: Ngraph) extends js.Object
{
  var graph: Ngraph = js.native

  var container: HTMLElement = js.native
  var graphics: Graphics = js.native

  def run(): Unit = js.native
}

renderer is still wrong, should be:

var renderer = Viva.Graph.View.renderer(graph, {
        container: document.getElementById('graphHolder'),
        graphics: graphics
    });

so no "new", but I can't make it an object... gnaaah :(

edit2:

I mean, I can make it an object of course, like this:

  var renderer: Renderer = js.native

@js.native
trait Renderer extends js.Object

@js.native
@JSName("Viva.Graph.View.renderer")
object SomeRenderer extends Renderer
{
  var graph: Ngraph = js.native

  var container: HTMLElement = js.native
  var graphics: Graphics = js.native

  def run(): Unit = js.native
}

But then the autogenerated code looks like this of course:

  graph.addLink("1", "2");
  graph.addNode("blubb", "now");
  var renderer = $g.Viva.Graph.View.renderer;
  renderer.graph = graph.graph;
  renderer.container = $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().getElementById("testing");
  renderer.graphics = $g.Viva.Graph.View.webglGraphics;
  renderer.run()

This renderer does not resemble:

var renderer = Viva.Graph.View.renderer(graph, {
        container: document.getElementById('graphHolder'),
        graphics: graphics
    });

Answer 1

Assuming the initial JavaScript code from the question is correct, we would define the native classes and objects as follows in Scala.js.

import scala.scalajs.js
import js.annotation._

import org.scalajs.dom

@js.native
@JSName("Viva.Graph")
object VivaGraph extends js.Object {
  def graph(): VivaGraph = js.native
}

@ScalaJSDefined
trait VivaGraph extends js.Object {
  def addLink(from: Int, to: Int): Unit
}

@js.native
@JSName("Viva.Graph.View")
object VivaGraphView extends js.Object {
  def webglGraphics(): VivaGraphics = js.native
  def renderer(graph: VivaGraph, options: VivaGraphRendererOptions): VivaRenderer = js.native
}

@ScalaJSDefined
trait VivaGraphics extends js.Object

@ScalaJSDefined
trait VivaGraphRendererOptions extends js.Object {
  var container: js.UndefOr[dom.Element] = js.undefined
  var graphics: js.UndefOr[VivaGraphics] = js.undefined
}

@ScalaJSDefined
trait VivaRenderer extends js.Object {
  def run(): Unit
}

which we can then use as:

def drawGraph(): Unit = {
  val graph = VivaGraph.graph()
  graph.addLink(1, 2)

  val g = VivaGraphView.webglGraphics()

  val renderer = VivaGraphView.renderer(graph, new VivaGraphRendererOptions {
    container = dom.document.getElementById("graphHolder")
    graphics = g
  })
  renderer.run()
}