Custom tags (ie: SVG)

[labe-me]

Hello, is it possible to extend the list of supported tags and attributes ?

value svg is not a member of object com.thoughtworks.binding.dom.Runtime.TagsAndTags2

[error]   @dom def render = <svg></svg>

[Atry]

You could use this workaround:

implicit def toSvgTags(_: TagsAndTags2.type) = JsDom.svgTags

Then you can create SVG tags like:

<use href:baseVal="xxx"/>

This workaround works because <element1 prefix1:attribute1={value1}/> will be translated to:

val e = com.thoughtworks.binding.dom.Runtime.TagsAndTags2.element1().render
...
e.prefix1.attribute1 = value1
...

[ccamel]

Thanks Atry !

Does not work for for me (in my environment). Indeed, the extension with SvgTags does not compile (in my environment) since SvsTags (from scalatags 0.6.0) is a trait with abstract members.
[error] class MyTags needs to be abstract, since: [error] it has 6 unimplemented members.

Am I missing something ?

I tried to find another way to make it work, using this code (we already discussed about it previously):

   implicit final class MyTags(x: TagsAndTags2.type) {

    final case class svg() {
      def render = {
        document.createElement("svg")
      }
    }

    final case class use() {
      def render = {
        JsDom.svgTags.use
      }
    }

  }

But this does not work well either.

[error] value href is not a member of scalatags.JsDom.svgTags.ConcreteHtmlTag[org.scalajs.dom.svg.Use] [error] <svg data:class="glyph stroked male-user"><use href:baseVal="#stroked-male-user"></use></svg> ^

Nevertheless, according to what you explained about translation of tags, it should work. The following code is valid:

val e = JsDom.svgTags.use.render
e.href.baseVal = "#stroked-male-use"

[Atry]

My fault, I guess it should be implicit def toSvgTags(_: TagsAndTags2.type) = JsDom.svgTags

[ccamel]

Thanks ! It works perfectly 😄

[labe-me]

That's better, I now have a few unrecognized attributes :

[error] value r_= is not a member of org.scalajs.dom.svg.Circle
[error] value d is not a member of org.scalajs.dom.svg.Path

import com.thoughtworks.binding.dom
implicit def toSvgTags(a: dom.Runtime.TagsAndTags2.type) = scalatags.JsDom.svgTags

[Atry]

Seems that SVG DOM property names are very different from attribute names. @labe-me You can create some helpers like what ClassOps did.

[deontologic]

Is there a workaround to use completely custom tags? Ie:

<custom-tag></custom-tag>

[Atry]

@deontologic Yes, as long as com.thoughtworks.binding.dom.Runtime.TagsAndTags2.`custom-tag`().render is valid

[Atry]

Any JavaBean can be constructed via @fxml in Binding.scala 11

See https://github.com/ThoughtWorksInc/Binding.scala/blob/11.0.x/fxml/.js/src/test/scala/com/thoughtworks/binding/DateSpec.scala

[jfilali]

https://scalafiddle.io/sf/LpgeaSq/2
@Atry code to do custom code :

import com.thoughtworks.binding._, Binding._
import org.scalajs.dom.document
import org.scalajs.dom.raw.Node

case class MyComponentBuilder() {
  
  def render = this
    
  var foo: Binding[String] = _

  @dom def build = <button>{foo.bind}</button>
  
}

implicit def autoBinding[A](a: A): Binding[A] = ???

implicit final class CustomTags(x: dom.Runtime.TagsAndTags2.type) {
  
  def MyComponent() = MyComponentBuilder()
  
}

implicit def toHtml(x: MyComponentBuilder): BindingSeq[Node] = {
  Constants(x.build).mapBinding(identity)
}


@dom def main = {
  <div><MyComponent foo="Hello, World"/></div>
}

dom.render(document.body, main)