réelles classes JS dans scala.js pour développer des composants Web

Question

Je voudrais développer certains des composants web dans un projet Polymer 2.0 avec scala.js. Bien qu'il existe un wonderful demo-project on github démontrant comment cela fonctionne avec Polymer 1.0. Je ne peux pas obtenir quelque chose de similaire à travailler avec Polymer 2.0 et la technique native d'enregistrement d'éléments.

Une façade simple pourrait ressembler à la

@ScalaJSDefined 
class PolymerElement extends PolymerBase { 
    def is: String = "" 
    def properties: js.Dynamic = js.Dynamic.literal() 
} 

@js.native 
@JSGlobal("Polymer.Element") 
class PolymerBase extends HTMLElement 

suivant l'élément réel:

@JSExportTopLevel("MyElement") 
@ScalaJSDefined 
class MyElement extends PolymerElement { 

    private var label = "init" 

    override def is = "my-element" 

    override def properties = js.Dynamic.literal(
    "label" -> Map(
     "type" -> "String", 
     "value" -> "init", 
     "notify" -> true 
    ).toJSDictionary 
) 

    def testMe = { 
    println(label) 
    } 
} 

object MyElement { 
    @JSExportStatic 
    val is: String = MyElement.is 

    @JSExportStatic 
    val properties: js.Dynamic = MyElement.properties 

} 

Peu importe si je prends l'ancien enregistrement des éléments de style Polymer(MyElement) ou la plate-forme variante native window.customElement.define(MyElement.is, MyElement) Il évidemment Lève une exception car MyElement n'est pas instable avec new MyElement. Il jette l'exception:

Uncaught TypeError: Class constructor PolymerElement cannot be invoked without 'new' 

L'étude du Scala.js facade writing guide, je l'ai déjà essayé beaucoup de façade variantes déclarant PolymerElement et PolymerBaseabstrait.

Une solution possible qui me vient à l'esprit est, en écrivant une classe JavaScript native, qui est en effet instanciable et en utilisant @js.native façades sur eux. Mais je cherche un moyen de le réaliser avec quelque chose Scala.js 0.6.16 fournit.

Answer 1

Ok, c'est la meilleure 'solution' que j'ai trouvée.

Cela ne résout pas complètement, mais j'espère que ce sera un tour utile alors que nous attendons des améliorations sjs dans ce domaine.

1. Obtenez une bibliothèque aux classes 'mixin' js. J'ai utilisé https://github.com/rse/aggregation.

2. Créez votre composant ScalaJS mais ne pas essayer d'en hériter de Polymer.Element directement:

@ScalaJSDefined 
@JSExportTopLevel("TestPolymerElement") 
class TestPolymerElement extends js.Object { 
    def test = g.console.log("Hello from scala") 
} 

object TestPolymerElement { 
    @JSExportStatic 
    def is = "test-polymer-element" 
} 

class
3. Créer un "compagnon" pur JS d'hériter Polymer.Element et ScalaJS composant en tant que mixin et se connecter:

class TestPolymerElementJs extends aggregation(Polymer.Element,TestPolymerElement) { 
} 
customElements.define(TestPolymerElementJs.is, TestPolymerElementJs); 

en outre, vous pouvez définir les propriétés d'un nd les gérer dans ScalaJS comme:

@ScalaJSDefined 
@JSExportTopLevel("TestPolymerElement") 
class TestPolymerElement(val name : String) extends js.Object { 

    def test = g.console.log(s"Hello from ${name}") 

} 

object TestPolymerElement { 
    @JSExportStatic 
    def is = "test-polymer-element" 

    @JSExportStatic 
    def properties = js.Dictionary (
     "name" -> js.Dictionary(
      "type" -> "String" 
     ) 
    ) 
}