complex-child.js

module.exports = ComplexChild

/* A `ComplexChild` has inputs

   The argument is a bunch of `geval` inputs that it
   can read from. It's basically the parent notifying
   it of stuff having happened

   You can also pass it a hash of listener functions

*/
function ComplexChild(parentEvents, hashOfListenerFunctions) {
  var events = ComplexInput()
  var state = ComplexState()
  state.events = events

  wireupEvents(events, state)

  return { state: state, render: Render }
}

// the parent will always call it with myState
// it can call it with otherArgs which can include
// stuff like theming or config
// and stuff like listener functions to be notified
function Render(myState, otherArgs) {

}

parent.js

var app = App()

mercury.app(document.body, app.state, app.render)

function App() {
  // the top level parent has its own logical events
  var events = Input()
  // the top level parent has its own logical state
  var state = State()
  state.events = events

  // if the `App` ever mutates this `complexChild` field
  // then it's a programmer error
  state.complexChild = ComplexChildApp().state

  wireupEvents(events, state)

  return { state: state, render: Render }
}

function Input() { ... }
function State() { ... }
var Update = { ... }

function Render(state) {
  return h('div', [
    header(),
    h('main', [
      someStuff(),
      ComplexChildRender(state.complexChild)
    ])
    footer()
  ])
}