Mithril web-component experimentation

Rating-star.js

//Given following HTML
// <div class="rating" data-rating="3" data-votes="133"></div>
// <div class="rating" data-rating="2" data-votes="123"></div>
// <div class="rating" data-rating="4" data-votes="62"></div>
// <div class="rating" data-rating="5" data-votes="42"></div>

// .green {color:#2ECC40;}
// .white {color: #fff;}

// .Rating-star {
//   transition:all .4s ease-out;
//   cursor:pointer;
//   display:inline-block;
//   padding:2px;
//   text-shadow: 0 2px 2px #dedede;
// }

// .Rating-star:hover {
//   transform:scale(1.3);
//   -webkit-transform:scale(1.3);
// }

'use strict';

var Rating = {};

Rating.controller = function (args) {
  return {
    rating: m.prop(args.rating),
    userSelection: m.prop(args.rating),
    votes: m.prop(args.votes)
  };
};

Rating.view = function (ctrl, args) {
  var Rating = m ? m('.Rating', {
    config: function config(el, inited) {
      if (inited) {
        return;
      }
    }
  }, [1, 2, 3, 4, 5].map(function (el, i) {
    return m('span.Rating-star', {
      key: i,
      class: el <= ctrl.userSelection() ? 'green' : 'white',
      onclick: function onclick() {
        alert('rated with ' + ctrl.userSelection());
        /* implement m.request */
      },
      onmouseover: function onmouseover() {
        return ctrl.userSelection(el);
      },
      onmouseout: function onmouseout() {
        return ctrl.userSelection(ctrl.rating());
      }
    }, m.trust('&#9733;'));
  }), m('small', ctrl.userSelection())) : null;

  return Rating;
};

/* Mount to the DOM */
var ratingDest = document.querySelectorAll("div.rating");

Array.from(ratingDest).map(function (el, i) {
  el ? m.mount(el, m(Rating, el.dataset)) : null;
});

From @cmnstmntmn