Integrating ReasonReact with Erratique's React

counterNew.re

open ReactErratique;

let initial = ref 0;

let (timeS, timeC) = S.create !initial;

Js.log timeS;

let timeIncrement () => {
  initial := !initial + 1;
  timeC !initial
};

let timerId = Js.Global.setInterval timeIncrement 1000;

let vdomS =
  S.map
    (
      fun time => {
        let timeMessage = time == 1 ? "second" : "seconds";
        let greeting = {j|You've spent $time $timeMessage on this page!|j};
        <div> (ReasonReact.stringToElement greeting) </div>
      }
    )
    timeS;

let component = ReactReact.componentFromSignal "CounterNew" vdomS;

let make _children => component;

reactReact.re

open ReactErratique;

type action 'x =
  | Tick 'x;

type state = {
  vdom: ReasonReact.reactElement,
  subscriberId: ref (signal unit)
};

let componentFromSignal name vdomS => {
  let component = ReasonReact.reducerComponent name;
  {
    ...component,
    initialState: fun () => {
      vdom: <div> (ReasonReact.stringToElement "Not mounted yet") </div>,
      subscriberId: ref (fst (S.create ()))
    },
    reducer: fun action state =>
      switch action {
      | Tick x => ReasonReact.Update {...state, vdom: x}
      },
    didMount: fun {state, reduce} => {
      state.subscriberId :=
        S.map
          (
            fun x => {
              Js.log "foo";
              reduce (fun _event => Tick x) ()
            }
          )
          vdomS;
      ReasonReact.NoUpdate
    },
    render: fun {state: {vdom, subscriberId}} => {
      Js.log subscriberId;
      vdom
    }
  }
};