Make view easier to use in modules?

I’m bringing #294 back from the dead!

Now that we have state slice and modules, I thought it was kinda awkward module views are hard to use.

Introducing views!

https://gist.github.com/Pyrolistical/f3a4b1577741dd847aef73300f8f11c3

(I didn’t re-cap the demo, but you can run the new code yourself it works like this!)

I wrote a HoA withViews and added a views parameter to the view function. This allows us to write stuff like

withViews(app)({
  view(state, actions, {left, right}) {
    return <main>
      <left name="Left" />
      <right name="Right" />
      <p>Sum {state.left.count + state.right.count}</p>
    </main>
  },
  modules: {
    left: counter,
    right: counter,
  }
}, document.getElementById('app-entry'))

where counter is just a module

const counter = {
  state: {
    count: 0
  },
  view(state, actions, views) {
    return <div>
      <h1>{state.name} {state.count}</h1>
      <button onclick={actions.down} disabled={state.count <= 0}>-</button>
      <button onclick={actions.up}>+</button>
    </div>
  },
  actions: {
    down(state) {
      return {
        count: state.count - 1
      }
    },
    up(state) {
      return {
        count: state.count + 1
      }
    }
  }
}

I feel this is a missing piece to the modules story. Should we integrate this into the core or leave this as a HoA? You can see the source for withViews: https://gist.github.com/Pyrolistical/f3a4b1577741dd847aef73300f8f11c3#file-index-html-L83

[zaceno]

The way I see it, this sort of module views are basically the same as getters/computeds The only thing is that they return a vtree rather than a number or string. (And a “traditional” getter only needs access to the state, not actions, I suppose) My point being: rather than having support for something named “views” specifically, I’d rather have support for general getters, and we can use getters for “pre-wired views” as well as other things.

[Pyrolistical]

@JorgeBucaran here are the goods, i appended to the gist.

I ran into #437 and #438, so I included #426 at the end of the gist to get around it.

(1) (easy) add a button to the main view that adds +1 to both left and right

Just a new action:

addBoth(state, actions) {
  actions.bleft.up()
  actions.bright.up()
  // this or if you want a single update
  // return {
  //   bleft: {
  //     ...state.bleft, // not needed in this case, but generally is
  //     count: state.bleft.count + 1
  //   },
  //   bright: {
  //     ...state.bright, // not needed in this case, but generally is
  //     count: state.bright.count + 1
  //   }
  // }
}

(2) (hard) a button that adds a new counter, so no more right or left, but a collection of counters.

This one was more tricky, I added a new many module, which takes in a module and allows you to add more

function many(module) {
  return {
    state: {
      substates: []
    },
    view(state, actions) {
      return state.substates.map((substate, i) => {
        const subactions = {}
        for (const action in module.actions) {
          subactions[action] = () => {
            const updatedSubstate = module.actions[action](substate)
            actions.update({
              substates: [...state.substates.slice(0, i), updatedSubstate, ...state.substates.slice(i + 1, state.substates.length)]
            })
          }
        }
        return module.view({
          ...substate,
          ...state.extraProps(i)
        }, subactions)
      })
    },
    actions: {
      push(state, actions) {
        return {
          substates: [...state.substates, {
            ...module.state
          }]
        }
      },
      update(state, actions, data) {
        return data
      }
    }
  }
}

usage looks like:

modules: {
  counters: many(counter)
}

the view looks like:

<h1>C. Counters, counters everywhere</h1>
<counters extraProps={(index) => ({name: `counter[${index}]`})} />
<button onclick={actions.counters.push}>Add Counter</button>
<p>Sum {state.counters.substates.reduce((total, {count}) => total + count, 0)}</p>

where counters is the from views