Support custom tags, attributes and styles.

Fixes #61

Author: japgolly

README.md

@@ -231,6 +231,15 @@ Extensions
 ```scala
   div(if (allowEdit) editButton else EmptyTag)
 ```
+* Custom tags, attributes and styles.
+```scala
+  val a = "customAttr" .reactAttr
+  val s = "customStyle".reactStyle
+  val t = "customTag"  .reactTag
+
+  // <customTag customAttr="hello" style="customStyle:123;">bye</customTag>
+  t(a := "hello", s := "123", "bye")
+```
 
 #### React
 * Where `this.setState(State)` is applicable, you can also run `modState(State => State)`.

core/src/main/scala/japgolly/scalajs/react/vdom/Extra.scala

@@ -27,6 +27,12 @@ object Extra {
     @inline def ?=(m: => TagMod): TagMod = if (_b) m else EmptyTag
   }
 
+  final class StringExt(val _s: String) extends AnyVal {
+    @inline def reactAttr : Attr     = Attr(_s)
+    @inline def reactStyle: Style    = Style(_s, _s)
+    @inline def reactTag  : ReactTag = makeAbstractReactTag(_s, Scalatags.NamespaceHtml.implicitNamespace)
+  }
+
   trait Tags {
     import NamespaceHtml._
     final val big      = "big".tag[dom.HTMLHtmlElement]

core/src/main/scala/japgolly/scalajs/react/vdom/Implicits.scala

@@ -69,6 +69,7 @@ abstract class Implicits extends LowPri {
   // Extensions
   @inline implicit final def _react_ext_attr(a: Attr)    = new Extra.AttrExt(a)
   @inline implicit final def _react_ext_bool(a: Boolean) = new Extra.BooleanExt(a)
+  @inline implicit final def _react_ext_str (a: String)  = new Extra.StringExt(a)
 }
 
 object Implicits extends Implicits

core/src/main/scala/japgolly/scalajs/react/vdom/Scalatags.scala

@@ -29,7 +29,6 @@ trait TagMod {
 
 final case class ReactTag private[vdom](tag: String,
                                         modifiers: List[Seq[TagMod]],
-                                        void: Boolean,
                                         namespace: Namespace) extends DomFrag {
 
   def render: ReactElement = {
@@ -66,7 +65,7 @@ final case class ReactTag private[vdom](tag: String,
   }
 
   def apply(xs: TagMod*): ReactTag =
-    this.copy(tag = tag, void = void, modifiers = xs :: modifiers)
+    this.copy(tag = tag, modifiers = xs :: modifiers)
 
   override def toString = render.toString
 }
@@ -84,6 +83,7 @@ final case class Attr(name: String) {
  * Wraps up a CSS style in a value.
  */
 case class Style(jsName: String, cssName: String) {
+  // val s2 = camelCase(s); Style(s2, s2)
   def :=[T](v: T)(implicit ev: StyleValue[T]): TagMod = StylePair(this, v, ev)
 }
 
@@ -189,8 +189,10 @@ private[vdom] object Scalatags {
     override def apply(b: Builder, s: Style, t: T[A]) = ot.foreach(t)(v(b, s, _))
   }
 
-  @inline def makeAbstractReactTag(tag: String, void: Boolean, namespaceConfig: Namespace): ReactTag =
-    ReactTag(tag, Nil, void, namespaceConfig)
+  @inline def makeAbstractReactTag(tag: String, namespaceConfig: Namespace): ReactTag = {
+    Escaping.assertValidTag(tag)
+    ReactTag(tag, Nil, namespaceConfig)
+  }
 
   implicit final class SeqFrag[A <% Frag](xs: Seq[A]) extends Frag {
     def applyTo(t: Builder): Unit = xs.foreach(_.applyTo(t))
@@ -229,19 +231,15 @@ private[vdom] object Scalatags {
     /**
      * Converts the string to a [[ReactTag]]
      */
-    def tag[N <: dom.Node](implicit namespaceConfig: Namespace): ReactTag = {
-      Escaping.assertValidTag(s)
-      makeAbstractReactTag(s, false, namespaceConfig)
-    }
+    def tag[N <: dom.Node](implicit namespaceConfig: Namespace): ReactTag =
+      makeAbstractReactTag(s, namespaceConfig)
 
     /**
      * Converts the string to a void [[ReactTag]]; that means that they cannot
      * contain any content, and can be rendered as self-closing tags.
      */
-    def voidTag[N <: dom.Node](implicit namespaceConfig: Namespace): ReactTag = {
-      Escaping.assertValidTag(s)
-      makeAbstractReactTag(s, true, namespaceConfig)
-    }
+    def voidTag[N <: dom.Node](implicit namespaceConfig: Namespace): ReactTag =
+      makeAbstractReactTag(s, namespaceConfig)
 
     /**
      * Converts the string to a [[Attr]]
@@ -253,10 +251,7 @@ private[vdom] object Scalatags {
      * style, and the jsName of the style is generated by converted the dashes
      * to camelcase.
      */
-    def style = {
-      // val s2 = camelCase(s); Style(s2, s2)
-      Style(s, s)
-    }
+    def style = Style(s, s)
   }
 
   /**

doc/CHANGELOG-0.7.md

@@ -1,3 +1,8 @@
+# 0.7.1 ([commit log](https://github.com/japgolly/scalajs-react/compare/v0.7.0...v0.7.1))
+
+* Support custom tags, attributes and styles via `"string".react{Attr,Style,Tag}`.
+
+
 # 0.7.0 ([commit log](https://github.com/japgolly/scalajs-react/compare/v0.6.1...v0.7.0))
 
 To ease migration, here is a script that perform 98% of the required changes for you:

test/src/test/scala/japgolly/scalajs/react/CoreTest.scala

@@ -156,6 +156,10 @@ object CoreTest extends TestSuite {
           a(tabIndex := 1, cls := "lol")(href := "boo", alt := "g"),
           """<a tabindex="1" class="lol" href="boo" alt="g"></a>""")
       }
+
+      'customAttr  - test(div("accept".reactAttr := "yay"), """<div accept="yay"></div>""")
+      'customStyle - test(div("face".reactStyle := "yay"),  """<div style="face:yay;"></div>""")
+      'customTag   - test(("ass".reactTag)("Snicker"),      """<ass>Snicker</ass>""")
     }
 
     'classSet {