gistfile1.txt

package app.client.reactComponents._experiments

import app.client.reactComponents._experiments.InnerComp.{
  ICType,
  PropsWithState
}

import japgolly.scalajs.react.CompScope.DuringCallbackU
import japgolly.scalajs.react.ReactComponentB.{P, PSB}
import japgolly.scalajs.react.ReactComponentC.ReqProps
import japgolly.scalajs.react.{
  ReactComponentB,
  ReactComponentU,
  ReactElement,
  TopNode
}

import org.scalajs.dom.html.Div
import japgolly.scalajs.react.vdom.ReactTagOf
import japgolly.scalajs.react.vdom.prefix_<^._

class OnceSettable[A] {
  private var _a: Option[A] = None

  def set(a: A) = {
    println("setting once settable")
    if (_a.isEmpty) {
      _a = Some(a)
    } else throw new Exception("trying to set OnceSettable twice !")
  }

  def get() = {
    println("getting once settable")
    val isNotEmpty: Boolean = (!_a.isEmpty)
    if (isNotEmpty) {
      _a.get
    } else
      throw new Exception(
        "trying to use OnceSettable but it has not yet been set !")
  }
}

object Common {
  type State = String
}

object InnerComp {
  import Common.State

  type ICType = ReqProps[PropsWithState[Props, State], Unit, Unit, TopNode]

  case class Props(i: Int)

  case class PropsWithState[P, S](p: P, oldState: S, newState: OnceSettable[S] = new OnceSettable[S])

  val ic_rend
    : (DuringCallbackU[PropsWithState[Props, State], Unit, Unit]) => ReactElement = {
    ($ : DuringCallbackU[PropsWithState[Props, State], Unit, Unit]) =>
      println("InnerComp render started")
      val r: ReactTagOf[Div] =
        <.div("Passed in props: ", $.props.p.i,
              "Passed in state: ", $.props.oldState)

      val res: ReactElement = _react_autoRender(r)
      println("before returning from InnerComp render")
      res

  }
  val ic1: P[PropsWithState[Props, State]] = ReactComponentB[PropsWithState[Props, State]]("StateChanger")
  val ic2: PSB[PropsWithState[Props, State], Unit, Unit] = ReactComponentB._defaultBuildStep_noBackend(ic1)
  val ic3 = ic2.render(ic_rend)
  val ic4 = ReactComponentB._defaultBuildStep_builder(ic3)

  val comp: ICType = ic4.build

}

object OuterComp {

//=========

  import Common.State
  import InnerComp.Props

  val rc_render: (DuringCallbackU[State, Unit, Unit]) =>
    ReactComponentU[ PropsWithState[Props, State], Unit, Unit, TopNode] =
  { ($ : DuringCallbackU[State, Unit, Unit]) => println("RootComp render started")

    val props = Props(42)

    val startState: String = $.props

    println("before running InnerComp.comp(in)")

    val in = PropsWithState[Props, State](props, startState)

    val vdom = InnerComp.comp(in)

    println(s"after running InnerComp.comp(in) = $vdom")

    println("before return from RootComp render")
    vdom
  }

  val rc1 = ReactComponentB[State]("RootComp")
  val rc2 = ReactComponentB._defaultBuildStep_noBackend(rc1)
  val rc3 = rc2.render(rc_render)

  val rc4 = ReactComponentB._defaultBuildStep_builder(rc3)

  val comp=rc4.build

}


Main.scala :

import app.client.reactComponents._experiments.OuterComp
import japgolly.scalajs.react.vdom.ReactTagOf
import japgolly.scalajs.react.{ReactComponentU, ReactDOM, TopNode}
import org.scalajs
import org.scalajs.dom

import scala.scalajs.js
import scala.scalajs.js.annotation.JSExport

@JSExport("Main")
object Main extends js.JSApp {
  @JSExport
  def main(): Unit = {
    ReactDOM.render(OuterComp.comp("Start State"),
                    scalajs.dom.document.getElementById("joco"))
  }
}