Replace asFrag with implicit conversions. Add map2 for Seqs

core/src/main/scala/ba/sake/rxtags/Directives.scala

@@ -18,6 +18,7 @@ trait Directives {
 
   case class focus(range: (Int, Int)) extends Directive {
     private val (start, end) = range
+
     def execute(elem: dom.Element): Unit = {
       val inputElem = elem.asInstanceOf[dom.html.Input]
       inputElem.focus()

core/src/main/scala/ba/sake/rxtags/RxFrags.scala

@@ -1,30 +1,28 @@
 package ba.sake.rxtags
 
-import java.util.UUID
-
+import scala.language.implicitConversions
 import org.scalajs.dom
 import scalatags.JsDom.all._
 
 private[rxtags] trait RxFrags {
 
-  implicit class StatefulFragOps[T <: Frag](rxFrag: Stateful[T]) {
-    def asFrag: Frag = new RxFrag(rxFrag)
-  }
+  implicit def statefulRxFrag[T <: Frag](rxFrag: Stateful[T]): Frag =
+    new RxFrag(rxFrag)
 
-  implicit class StatefulStringOps[T](rxString: Stateful[String]) {
-    private val rxFrag = rxString.map(StringFrag)
-    def asFrag: Frag = new RxFrag(rxFrag)
+  implicit def statefulRxString(rxString: Stateful[String]): Frag = {
+    val rxFrag = rxString.map(StringFrag)
+    new RxFrag(rxFrag)
   }
 
-  implicit class StatefulNumericOps[T: Numeric](rxNum: Stateful[T]) {
-    private val rxFrag = rxNum.map(n => StringFrag(n.toString))
-    def asFrag: Frag = new RxFrag(rxFrag)
+  implicit def statefulRxNumeric[T: Numeric](rxNum: Stateful[T]): Frag = {
+    val rxFrag = rxNum.map(n => StringFrag(n.toString))
+    new RxFrag(rxFrag)
   }
 
-  implicit class StatefulSeqFragOps[CC <: Seq[Frag]](rxSeq: Stateful[CC]) {
+  implicit def statefulRxSeq[CC <: Seq[Frag]](rxSeq: Stateful[CC]): Frag = {
     implicit val ev: Frag => Frag = identity
-    private val rxFrag = rxSeq.map(s => SeqFrag(s))
-    def asFrag: Frag = new RxFrag(rxFrag)
+    val rxFrag = rxSeq.map(s => SeqFrag(s))
+    new RxFrag(rxFrag)
   }
 }
 

core/src/main/scala/ba/sake/rxtags/package.scala

@@ -1,3 +1,9 @@
 package ba.sake
 
-package object rxtags extends RxFrags with RxAttrValues with RxStyleValues with ScalatagsAddons with Directives
+package object rxtags extends RxFrags with RxAttrValues with RxStyleValues with ScalatagsAddons with Directives {
+
+  implicit class StatefulSeqOps[T](rx: Stateful[Seq[T]]) {
+    def map2[R](f: T => R): Stateful[Seq[R]] = rx.map(cc => cc.map(f))
+  }
+
+}

core/src/main/scala/ba/sake/rxtags/vars.scala

@@ -1,13 +1,13 @@
 package ba.sake.rxtags
 
-trait Reactive[T] {
+trait Reactive[+T] {
 
   def attach(f: T => Unit): Unit
 
   def on(f: => Unit): Unit = attach(_ => f)
 }
 
-trait Stateful[T] extends Reactive[T] {
+trait Stateful[+T] extends Reactive[T] {
 
   def now: T
 

docs/src/main/scala/site/View.scala

@@ -23,7 +23,7 @@ object View extends templates.RxTagsBlogPage {
       
       Here is an example of a ticker, it counts the number of seconds passed:
       """.md,
-      chl.scala.withLineHighlight("1,4,8")(
+      chl.scala.withLineHighlight("1,4,10")(
         """
         val ticker$ = Var(0)
 
@@ -32,9 +32,10 @@ object View extends templates.RxTagsBlogPage {
           1000
         )
       
-        def content = ticker$.map { c =>
-          s"Ticker: $c"
-        }.asFrag
+        def content = div(
+          "Ticker: ",
+          ticker$
+        )
       """
       ),
       b("Result:"),
@@ -44,10 +45,9 @@ object View extends templates.RxTagsBlogPage {
       
       Next, at line <mark>4</mark> we increment it, every second.  
       
-      Finally, at line <mark>8</mark> we `map` it to HTML.  
-      When we `map` a `Var[T]` to a `Var[Frag]`,
-      ScalaTags doesn't know how to render it to DOM.  
-      That's why we need to call `asFrag` on it.
+      Finally, at line <mark>10</mark> we render it to HTML.  
+      Any `Var[Frag]` can be put just as ordinary ScalaTags! :)  
+      There are also handy implicit conversions for `Var[String]`, `Var[Int]` (in example above) and similar.
       
       ---
       Here is another example, using an event handler:
@@ -60,9 +60,8 @@ object View extends templates.RxTagsBlogPage {
           "Please enter your name: ",
           input(onkeyup := updateName),
           br,
-          name$.map { name =>
-            s"Your name: $name"
-          }.asFrag
+          "Your name: ",
+          name$
         )
       
         def updateName: (dom.KeyboardEvent => Unit) =

examples/src/main/scala/ba/sake/rxtags/example/Ex3.scala

@@ -13,9 +13,8 @@ object Ex3 extends Example {
     "Please enter your name: ",
     input(onkeyup := updateName),
     br,
-    name$.map { name =>
-      s"Your name: $name"
-    }.asFrag
+    "Your name: ",
+    name$
   )
 
   def updateName: (dom.KeyboardEvent => Unit) =

examples/src/main/scala/ba/sake/rxtags/example/Ex4.scala

@@ -9,7 +9,7 @@ object Ex4 extends Example {
   val counter$ = Var(0)
 
   def content = div(
-    counter$.map(c => h4(s"Reactive counter: $c")).asFrag,
+    counter$.map(c => h4(s"Reactive counter: $c")),
     button(onclick := add(-1))("-"),
     button(onclick := add(1))("+")
   )

examples/src/main/scala/ba/sake/rxtags/example/Ex5.scala

@@ -16,7 +16,7 @@ object Ex5 extends Example {
 
   def content = div(
     "Ticker: ",
-    ticker$.asFrag
+    ticker$
   )
 
 }

examples/src/main/scala/ba/sake/rxtags/example/Ex6.scala

@@ -14,20 +14,18 @@ object Ex6 extends Example {
       CartItem(10, "eggs"),
       CartItem(1, "milk"),
       CartItem(3, "bananas"),
-      CartItem(2, "icecreams")
+      CartItem(2, "ice creams")
     )
   )
 
   def content = ul(
-    cartItems$.map { items =>
-      items.map { item =>
-        li(
-          b(item.count),
-          s" ${item.name} ",
-          button(onclick := delete(item))("Delete")
-        )
-      }
-    }.asFrag
+    cartItems$.map2 { item =>
+      li(
+        b(item.count),
+        s" ${item.name} ",
+        button(onclick := delete(item))("Delete")
+      )
+    }
   )
 
   def delete(item: CartItem): (dom.Event => Unit) =

todo/src/main/scala/ba/sake/rxtags/todo/Main.scala

@@ -10,18 +10,15 @@ object Main {
     val todoService = new TodoService
     val mainComponent = new MainComponent(todoService, router)
 
-    val routes: Router.Routes = {
-      case "/active" =>
-        mainComponent.todoFilter$.set(TodoFilter.Active)
-        mainComponent
-      case "/completed" =>
-        mainComponent.todoFilter$.set(TodoFilter.Completed)
-        mainComponent
-      case _ =>
-        mainComponent.todoFilter$.set(TodoFilter.All)
-        mainComponent
+    // always return MainComponent
+    val routes: Router.Routes = _ => mainComponent
+
+    val listener: Router.Listener = {
+      case "/active"    => todoService.filter$.set(TodoFilter.Active)
+      case "/completed" => todoService.filter$.set(TodoFilter.Completed)
+      case _            => todoService.filter$.set(TodoFilter.All)
     }
 
-    router.withRoutesData("main", routes).init()
+    router.withRoutesData("main", routes).withListener(listener).init()
   }
 }

todo/src/main/scala/ba/sake/rxtags/todo/MainComponent.scala

@@ -4,18 +4,15 @@ import org.scalajs.dom
 import org.scalajs.dom.ext.KeyValue
 import org.scalajs.dom.html
 import scalatags.JsDom.all._
-import scalatags.JsDom.tags2.section
 import ba.sake.scalajs_router._
 import ba.sake.rxtags._
 
 class MainComponent(todoService: TodoService, router: Router) extends Component {
 
-  val todoFilter$ = Var(TodoFilter.All)
-
   private val todos$ = todoService.todos$
 
   private val todosFiltered$ = todos$.map {
-    todos => todos.filter(todoFilter$.now.isValid)
+    todos => todos.filter(todoService.filter$.now.isValid)
   }
 
   private val mainDisplay$ = todos$.map(todos => if (todos.isEmpty) "none" else "block")
@@ -46,11 +43,9 @@ class MainComponent(todoService: TodoService, router: Router) extends Component
           ),
           label(`for` := "toggle-all", "Mark all as complete"),
           ul(cls := "todo-list")(
-            todosFiltered$.map { tf =>
-              tf.map { t =>
-                TodoComponent(todoService, t).render
-              }
-            }.asFrag
+            todosFiltered$.map2 { t =>
+              TodoComponent(todoService, t).render
+            }
           )
         ),
         footer(cls := "footer", css("display") := mainDisplay$)(
@@ -59,7 +54,7 @@ class MainComponent(todoService: TodoService, router: Router) extends Component
               val count = todos.count(!_.completed)
               val itemsLabel = if (count == 1) "item" else "items"
               frag(strong(count), s" $itemsLabel left")
-            }.asFrag
+            }
           ),
           ul(cls := "filters")(
             li(
@@ -107,7 +102,7 @@ class MainComponent(todoService: TodoService, router: Router) extends Component
   }
 
   private def selectedCls(filter: TodoFilter) =
-    todoFilter$.map { tf =>
+    todoService.filter$.map { tf =>
       Option.when(tf == filter)("selected")
     }
 }

todo/src/main/scala/ba/sake/rxtags/todo/Todo.scala

@@ -2,9 +2,7 @@ package ba.sake.rxtags.todo
 
 import java.util.UUID
 
-case class Todo(name: String, completed: Boolean = false, id: UUID = UUID.randomUUID()) {
-  def toggled: Todo = copy(completed = !completed)
-}
+case class Todo(name: String, completed: Boolean = false, id: UUID = UUID.randomUUID())
 
 object Todo {
   import upickle.default.{ReadWriter => RW, macroRW}

todo/src/main/scala/ba/sake/rxtags/todo/TodoFilter.scala

@@ -5,7 +5,7 @@ trait TodoFilter {
 }
 
 object TodoFilter {
-  val All: TodoFilter = todo => true
+  val All: TodoFilter = _ => true
   val Completed: TodoFilter = todo => todo.completed
   val Active: TodoFilter = todo => !todo.completed
 }

todo/src/main/scala/ba/sake/rxtags/todo/TodoService.scala

@@ -6,12 +6,11 @@ import ba.sake.rxtags._
 
 class TodoService {
 
+  val todos$ = initTodos()
+  val filter$ = Var(TodoFilter.All)
   val toggleAllState$ = Var(false)
-
   val editId$ = Var(Option.empty[UUID])
 
-  val todos$ = initTodos()
-
   todos$.attachAndFire { todos =>
     if (todos.length == 1) // synchronize with last element..
       toggleAllState$.set(todos.head.completed)