Added support for plain JS props (#9)

Author: viktor-podzigun

build.sbt

@@ -5,7 +5,7 @@ val ReactRouterVersion = "^5.2.1"
 val ReduxVersion = "^3.6.0"
 val ReduxDevToolsVersion = "^2.13.0"
 
-val StaticTagsVersion = "2.7.0"
+val StaticTagsVersion = "2.7.1-SNAPSHOT"
 
 val commonSettings = Seq(
   organization := "org.scommons.shogowada",

core/src/main/scala/io/github/shogowada/scalajs/reactjs/React.scala

@@ -26,8 +26,9 @@ object React {
 
   def stateFromNative[State](nativeState: js.Dynamic): State = unwrap[State](nativeState)
 
-  case class Props[Wrapped](native: js.Dynamic) {
-    def wrapped: Wrapped = native.wrapped.asInstanceOf[Wrapped]
+  case class Props[T](native: js.Dynamic) {
+    def plain: T = native.asInstanceOf[T]
+    def wrapped: T = native.wrapped.asInstanceOf[T]
     def children: ReactElement = native.children.asInstanceOf[ReactElement]
   }
 

core/src/main/scala/io/github/shogowada/scalajs/reactjs/VirtualDOM.scala

@@ -55,6 +55,7 @@ trait VirtualDOM extends StaticTags {
     lazy val key = StringAttributeSpec("key")
     lazy val ref = RefAttributeSpec("ref")
     lazy val wrapped = WrappedPropsAttributeSpec("wrapped")
+    lazy val plain = PlainPropsAttributeSpec("plainProps")
   }
 
   object VirtualDOMAttributes {
@@ -63,6 +64,11 @@ trait VirtualDOM extends StaticTags {
         Attribute(name, wrappedProps.asInstanceOf[js.Any], AS_IS)
     }
 
+    case class PlainPropsAttributeSpec(name: String) extends AttributeSpec {
+      def :=(props: js.Object): Attribute[js.Object] =
+        Attribute(name, props, AS_IS)
+    }
+
     case class ReactClassAttributeSpec(name: String) extends AttributeSpec {
       def :=(value: ReactClass): Attribute[ReactClass] = Attribute(name, value, AS_IS)
     }
@@ -124,11 +130,17 @@ trait VirtualDOM extends StaticTags {
       htmlNameToReactNameMap.getOrElse(name, name)
     }
 
-    def toReactAttributes(attributes: Iterable[Attribute[_]]): js.Dictionary[js.Any] =
-      attributes
-          .map(attributeToReactAttribute)
-          .toMap
-          .toJSDictionary
+    def toReactAttributes(attributes: Iterable[Attribute[_]]): js.Dictionary[js.Any] = {
+      val maybeProps = attributes.find(_.name == "plainProps")
+      maybeProps match {
+        case Some(propsAttr) => propsAttr.value.asInstanceOf[js.Dictionary[js.Any]]
+        case None =>
+          attributes
+              .map(attributeToReactAttribute)
+              .toMap
+              .toJSDictionary
+      }
+    }
 
     private def attributeToReactAttribute(attribute: Attribute[_]): (String, js.Any) =
       toReactAttributeName(attribute.name) -> attributeValueToReactAttributeValue(attribute)

example/README.md

@@ -5,6 +5,7 @@ This is just a facade for React, so if you are not already familiar with React,
 - [How does it replace JSX in Scala?](#how-does-it-replace-jsx-in-scala)
 - [How to create React classes?](#how-to-create-react-classes)
 - [What's WrappedProps?](#whats-wrappedprops)
+- [How about plain JS props?](#how-about-plain-js-props)
 - [How about states?](#how-about-states)
 - [Can I see fully working examples?](#can-i-see-fully-working-examples)
 
@@ -109,11 +110,56 @@ ReactDOM.render(
 )
 ```
 
+### How about plain JS props?
+
+Alternatively to case classes and `Wrapped` props you
+can also use plain JavaScript object as props directly.
+
+However, you have to define it as
+[non-native JS trait](http://www.scala-js.org/doc/interoperability/sjs-defined-js-classes.html):
+
+```scala
+import io.github.shogowada.scalajs.reactjs.ReactDom
+import io.github.shogowada.scalajs.reactjs.VirtualDOM._
+
+import scala.scalajs.js
+
+trait PlainJSProps extends js.Object {
+  val foo: String
+  val bar: Int
+}
+
+object PlainJSProps {
+
+  def apply(foo: String, bar: Int): PlainJSProps = {
+    js.Dynamic.literal(
+      foo = foo,
+      bar = bar
+    ).asInstanceOf[PlainJSProps]
+  }
+}
+
+val reactClass = React.createClass[PlainJSProps, Unit](
+  (self) =>
+    <.div()(
+      s"foo: ${self.props.plain.foo}",
+      <.br.empty,
+      s"bar: ${self.props.plain.bar}"
+    )
+)
+
+ReactDOM.render(
+  <(reactClass)(^.plain := PlainJSProps("foo", 123))(),
+  mountNode
+)
+```
+
 Props looks like the following:
 
 ```scala
-case class Props[Wrapped](native: js.Dynamic) {
-  def wrapped: Wrapped = native.wrapped.asInstanceOf[Wrapped]
+case class Props[T](native: js.Dynamic) {
+  def plain: T = native.asInstanceOf[T]
+  def wrapped: T = native.wrapped.asInstanceOf[T]
   def children: ReactElement = native.children.asInstanceOf[ReactElement]
 }
 ```

example/helloworld/src/main/scala/io/github/shogowada/scalajs/reactjs/example/helloworld/Main.scala

@@ -4,19 +4,50 @@ import io.github.shogowada.scalajs.reactjs.VirtualDOM._
 import io.github.shogowada.scalajs.reactjs.{React, ReactDOM}
 import org.scalajs.dom
 
+import scala.scalajs.js
 import scala.scalajs.js.annotation.JSExport
 
 object Main {
 
   @JSExport
   def main(args: Array[String]): Unit = {
-    case class WrappedProps(name: String)
 
-    val reactClass = React.createClass[WrappedProps, Unit](
-      (self) => <.div(^.id := "hello-world")(s"Hello, ${self.props.wrapped.name}!")
-    )
+    def renderUsingWrappedProps(): Unit = {
 
-    val mountNode = dom.document.getElementById("mount-node")
-    ReactDOM.render(<(reactClass)(^.wrapped := WrappedProps("World"))(), mountNode)
+      case class WrappedProps(name: String)
+
+      val reactClass = React.createClass[WrappedProps, Unit] { self =>
+        <.div(^.id := "hello-world")(s"Hello, ${self.props.wrapped.name}!")
+      }
+
+      val mountNode = dom.document.getElementById("mount-node")
+      ReactDOM.render(<(reactClass)(^.wrapped := WrappedProps("World"))(), mountNode)
+    }
+
+    def renderUsingPlainJSProps(): Unit = {
+
+      trait PlainJSProps extends js.Object {
+        val name: String
+      }
+
+      object PlainJSProps {
+
+        def apply(name: String): PlainJSProps = {
+          js.Dynamic.literal(
+            name = name
+          ).asInstanceOf[PlainJSProps]
+        }
+      }
+
+      val reactClass = React.createClass[PlainJSProps, Unit] { self =>
+        <.div(^.id := "hello-world")(s"Hello, ${self.props.plain.name}!")
+      }
+
+      val mountNode = dom.document.getElementById("mount-node")
+      ReactDOM.render(<(reactClass)(^.plain := PlainJSProps("World"))(), mountNode)
+    }
+
+    renderUsingWrappedProps()
+    renderUsingPlainJSProps()
   }
 }