echte JS-Klassen in scala.js zur Entwicklung von Webkomponenten

Question

Ich möchte einige der Webkomponenten in einem Polymer 2.0-Projekt mit scala.js entwickeln. Während es eine wonderful demo-project on github zeigt, wie es mit Polymer 1.0 funktioniert. Ich kann nichts Ähnliches mit der Arbeit mit Polymer 2.0 und der nativen Element-Registrierungstechnik bekommen.

Es window.customElement.define(MyElement.is, MyElement) offensichtlich

@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 

} 

Egal ob ich nehme den alten Stil Element Registrierung Polymer(MyElement) oder die Plattform nativen Variante:

Eine einfache Fassade wie folgt

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

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

Die tatsächliche Element aussehen könnte löst eine Ausnahme aus, da MyElement nicht mit new MyElement unveränderbar ist. Es wirft die Ausnahme:

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

die Scala.js facade writing guide Studium, ich habe bereits versucht, eine Menge Fassadenvarianten PolymerElement und PolymerBaseabstrakte erklärt.

Eine mögliche Lösung, die mir in den Sinn kommt, ist das Schreiben einer nativen JavaScript-Klasse, die tatsächlich instanziierbar ist und @js.native Fassaden auf ihnen verwendet. Aber ich suche nach einem Weg, um es mit etwas zu erreichen Scala.js 0.6.16 bietet.

Answer 1

Ok, das ist die beste 'Lösung', die ich gefunden habe.

Dies löst es nicht vollständig, aber ich hoffe, es wird ein hilfreicher Trick sein, während wir sjs Verbesserungen in diesem Bereich erwarten.

1. Holen Sie sich eine Bibliothek, um Klassen zu mischen. Ich habe https://github.com/rse/aggregation verwendet.

2. Erstellen Sie Ihre ScalaJS Komponente aber nicht versuchen, es direkt von Polymer.Element zu erben:

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

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

3. erstellen JS reine "Begleiter" -Klasse Polymer.Element und ScalaJS Komponente als mixin und registrieren Sie es erben:

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

auch können Sie die Eigenschaften definieren eine nd managen sie in ScalaJS wie:

@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" 
     ) 
    ) 
}