<user-list>
  <h1>User list:</h1>

  <button>Load users</button>

  <ul>
    <template name=users>
      <li>{name}
    </template>
  </ul>

</user-list>

<script src=user-list/rxr.js></script>
<script src=//unpkg.com/rxjs/bundles/Rx.min.js></script>

<script src=/snuggsi.es></script>
<script src=user-list/reactive.es></script>

<script defer>

Element `user-list`

(class extends Reactive ( HTMLElement ) {

  onclick ()
    { this.actions.onclick () }

  onstatechange (state) {
    this.state = state
    this.render ()
  }

  get users ()
    { return this.state.users }

})

</script>

<script src=/browser-sync.es></script>


<user-list>
  <h1>User list:</h1>

  <button>Load users</button>

  <ul>
    <template name=users>
      <li>{name}
    </template>
  </ul>

</user-list>

<script src=user-list/rxr.js></script>
<script src=//unpkg.com/rxjs/bundles/Rx.min.js></script>

<script src=/snuggsi.es></script>
<script src=user-list/reactive.es></script>

<script defer>

Element `user-list`

(class extends Reactive ( HTMLElement ) {

  initialize () {
    console.warn ('Element Initialize', this.context)
  }

  onclick () {

    console.log (this.actions)

//  this.actions.onclick$ ()
  }

  onstatechange (state) {
    this.context = state

    console.warn ('state change', this.context)
    this.render ()
  }

  get users ()
    { return this.context.users }

})

</script>

<script src=/browser-sync.es></script>


Migrate state change of `user-list`
Migrate state change of `user-list`
