rework on Web Inline Styles

[chandu0101]

Current Approach

case class WebStyle(name: String) {
  def :=(v: String | Double) = new WebStylePair(name, v)
}

class WebStylePair(val name: String, val value: Any)

trait WebStyleAttrs {
  final val/lazy val opacity = new WebStyle("opacity")
  object flexDirection extends WebStyle("flexDirection") {
    @inline final def column = this := "column"
    @inline final def columnReverse = this := "column-reverse"
    @inline final def row = this := "row"
    @inline final def rowReverse = this := "row-reverse"
  }
 ...  more
}

trait WebStyleSheet extends WebStyleAttrs {


  /** if duplicate attrs found then last one wins */
  @inline def styleE(maps: js.Dictionary[Any]*)(v: WebStylePair*) = {
    maps.fold(js.Dictionary.empty[Any])((d1, d2) => d1.++(d2).toJSDictionary)
      .++(style(v: _*))
      .toJSDictionary
  }

  @inline def style(v: WebStylePair*): js.Dictionary[Any] = {
    val p = js.Dictionary.empty[Any]
    v.foreach(t => p.update(t.name, t.value))
    p
  }

}

New Proposal:

@ScalaJSDefined
 trait WebStyles  extends js.Object { 
  var opracity: js.UndefOr[String | Int] = js.undefined
  var flexDirection : js.UndefOr[String] = js.undefined
  ....
 
}

trait WebStyleSheet extends WebStyleAttrs {
  /** if duplicate attrs found then last one wins */
  @inline def styleE(maps: js.Dictionary[Any]*) = {
    maps.fold(js.Dictionary.empty[Any])((d1, d2) => d1.++(d2).toJSDictionary)
      .toJSDictionary
  }
}

Pros :
1)no runtime overhead
2)easy to define and maintain

Cons :
1)we loose little convenience in defining enum attributes for example in previous system flexDirection.column now flexDirection = "column"

[nafg]

Incidentally,

@inline def style(v: WebStylePair*): js.Dictionary[Any] = {
    val p = js.Dictionary.empty[Any]
    v.foreach(t => p.update(t.name, t.value))
    p
  }

could be written as (I believe)

def style(v: WebStylePair*) =
  js.Dynamic.literal(v.map(x => (x.name, x.value): _*)