JSFiddle - React, Tailwind, and code Playground

by zhning

HTML

<script src="http://besideriver.com/RiverJS/1.0.8/river.min.js"></script>
<div scope="a" myview="5">
  <p>Module Name : {{ name }}</p>
  <p>PV Click : <strong> {{ pv }} </strong></p>
  <button jclick="add">add</button>
  <button jclick="reset">reset</button>
</div>

CSS

.warning{
    color : red;
    font-size:1.2em;
}

JavaScript

define('a', function (exports, require, module) {
  exports.name = 'a';
  exports.pv = 0;
  exports.add = function () {
    exports.pv++;
  }
  exports.reset = function () {
    exports.pv=0;
  }
});

define('river.grammer.myview', function (exports, require, module) {
  exports = module.exports = myview;

  function myview(max, scope, element) {
    scope.onchange('pv', function (newvalue) {
      var warning = Number(newvalue) >= Number(max);
      render(element,warning)
    })
  }

  function render(element,warning) {
    var p = element.querySelector('strong')
    p.className = warning ? 'warning' : '';
  }
})