Add FunctionalComponent

Author: japgolly

core/src/main/scala/japgolly/scalajs/react/FunctionalComponent.scala

@@ -0,0 +1,62 @@
+package japgolly.scalajs.react
+
+import scala.scalajs.js
+
+/**
+ * A component that takes `props` as an argument and returns the element to render.
+ *
+ * These components behave just like a React class with only a `render` method defined.
+ * Since no component instance is created for a functional component, any ref added to one will evaluate to `null`.
+ * Functional components do not have lifecycle methods.
+ *
+ * "In the future, we’ll also be able to make performance optimizations specific to these components by avoiding
+ * unnecessary checks and memory allocations."
+ *   - https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html
+ *
+ * @since React 0.14
+ */
+sealed trait FunctionalComponent[-P] extends js.Any
+// type FunctionalComponent[-P] = js.Function1[P, ReactElement]
+// ↑ Doesn't work for Scala for two reasons:
+// 1) Application returns a `ReactElement` immediately which makes it just a normal function.
+// 2) React expects P to be a JavaScript object which Scala values are not.
+
+object FunctionalComponent {
+
+  /**
+   * Creates a [[FunctionalComponent]].
+   *
+   * If `props` is `Unit`, there is also [[ReactComponentB.static]] which also sets `shouldComponentUpdate` to `false`
+   * which should be more efficient.
+   */
+  def apply[P](render: P => ReactElement): FunctionalComponent[P] = {
+    val f = (o: WrapObj[P]) => render(o.v)
+    val jf = f: js.Function1[WrapObj[P], ReactElement]
+    jf.asInstanceOf[FunctionalComponent[P]]
+  }
+
+  @inline implicit class Ops[P](private val f: FunctionalComponent[P]) extends AnyVal {
+    def apply(props: P) =
+      // This is what JSX/Babel does:
+      React.createElement(f, WrapObj(props))
+  }
+
+  // ===================================================================================================================
+
+  /**
+   * A [[FunctionalComponent]] that accepts [[PropsChildren]] in addition to `props`.
+   */
+  sealed trait WithChildren[-P] extends js.Any
+
+  def withChildren[P](render: (P, PropsChildren) => ReactElement): WithChildren[P] = {
+    val f = (o: WrapObj[P]) => render(o.v, o.asInstanceOf[js.Dynamic].children.asInstanceOf[PropsChildren])
+    val jf = f: js.Function1[WrapObj[P], ReactElement]
+    jf.asInstanceOf[WithChildren[P]]
+  }
+
+  @inline implicit class WithChildrenOps[P](private val f: FunctionalComponent.WithChildren[P]) extends AnyVal {
+    def apply(props: P, children: ReactNode*) =
+      // This is what JSX/Babel does:
+      React.createElement(f, WrapObj(props), children: _*)
+  }
+}

core/src/main/scala/japgolly/scalajs/react/React.scala

@@ -37,6 +37,9 @@ trait React extends Object {
    */
   def createElement(tag: String, props: Object, children: ReactNode*): ReactDOMElement = js.native
 
+  def createElement(fc: FunctionalComponent[Nothing], props: Object, children: ReactNode*): ReactDOMElement = js.native
+  def createElement(fc: FunctionalComponent.WithChildren[Nothing], props: Object, children: ReactNode*): ReactDOMElement = js.native
+
   /** Verifies the object is a ReactElement. */
   def isValidElement(o: JAny): Boolean = js.native
 

core/src/main/scala/japgolly/scalajs/react/package.scala

@@ -2,7 +2,7 @@ package japgolly.scalajs
 
 import org.scalajs.dom, dom.html
 import scala.scalajs.js
-import js.{Dynamic, UndefOr, Object, Any => JAny, Function => JFn}
+import js.{Dynamic, Object, Any => JAny, Function => JFn}
 
 package object react extends ReactEventAliases {
 

doc/CHANGELOG-0.10.md

@@ -249,6 +249,7 @@
     sense in React Native, etc. However in Scala we have the ability to *conditionally* add the `getDOMNode()` method
     onto components. This means we can keep the convenient `getDOMNode()` and in future mirror the conditions that
     React applies (eg. `getDOMNode()` works with the `react-dom` module only).
+  * Add `FunctionalComponent`, a new type of component which is a thinly-wrapped, pure `P => ReactElement`.
 
 * Smaller stuff:
 

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

@@ -0,0 +1,33 @@
+package japgolly.scalajs.react
+
+import utest._
+import vdom.prefix_<^._
+import TestUtil._
+
+object FunctionalComponentTest extends TestSuite {
+
+  val IntComp = FunctionalComponent[Int](i => <.code(s"$i² = ${i*i}"))
+  val IntExample = ReactComponentB[Unit]("")
+    .render(_ => <.div(IntComp(7)))
+    .buildU
+
+  case class AddCmd(x: Int, y: Int)
+  val AddComp = FunctionalComponent[AddCmd]{a =>
+    import a._
+    <.code(s"$x + $y = ${x+y}")
+  }
+  val AddExample = ReactComponentB[Unit]("")
+    .render(_ => <.div(AddComp(AddCmd(11, 8))))
+    .buildU
+
+  val KidsComp = FunctionalComponent.withChildren[Int]((i,pc) => <.div(s"i=$i", pc))
+  val KidsExample = ReactComponentB[Unit]("")
+    .render(_ => <.div(KidsComp(3, <.i("good"))))
+    .buildU
+
+  override def tests = TestSuite {
+    'int          { IntExample() shouldRender "<div><code>7² = 49</code></div>" }
+    'caseClass    { AddExample() shouldRender "<div><code>11 + 8 = 19</code></div>" }
+    'withChildren { KidsExample() shouldRender "<div><div>i=3<i>good</i></div></div>" }
+  }
+}