JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<div id="auction">
  <h1 data-text="auction.title"></h1>
  <img data-src="image.url">

  <div class='info' data-show='auction.endingSoon'>
    <p>Hurry up! This auction is ending soon.</p>
  </div>

  <dl>
    <dt>Current Bid</dt>
    <dd data-text='auction.currentBid | money'></dd>
    <dt>Time left</dt>
    <dt data-text='auction.remaining | time'></dt>
  </dl>
</div>

JavaScript

// rivets.js
// version: 0.4.8
// author: Michael Richards
// license: MIT
(function(){var e,t,n,r,i,s=function(e,t){return function(){return e.apply(t,arguments)}},o=[].slice,u=[].indexOf||function(e){for(var t=0,n=this.length;t<n;t++)if(t in this&&this[t]===e)return t;return-1};e={},String.prototype.trim||(String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,"")}),e.Binding=function(){function t(t,n,r,i,o){var u,a,f,l;this.el=t,this.type=n,this.model=r,this.keypath=i,this.options=o!=null?o:{},this.unbind=s(this.unbind,this),this.bind=s(this.bind,this),this.publish=s(this.publish,this),this.sync=s(this.sync,this),this.set=s(this.set,this),this.formattedValue=s(this.formattedValue,this);if(!(this.binder=e.binders[n])){l=e.binders;for(u in l)f=l[u],u!=="*"&&u.indexOf("*")!==-1&&(a=new RegExp("^"+u.replace("*",".+")+"$"),a.test(n)&&(this.binder=f,this.args=(new RegExp("^"+u.replace("*","(.+)")+"$")).exec(n),this.args.shift()))}this.binder||(this.binder=e.binders["*"]),this.binder instanceof Function&&(this.binder={routine:this.binder}),this.formatters=this.options.formatters||[]}return t.prototype.formattedValue=function(t){var n,r,i,s,u,a;a=this.formatters;for(s=0,u=a.length;s<u;s++)r=a[s],n=r.split(/\s+/),i=n.shift(),r=this.model[i]instanceof Function?this.model[i]:e.formatters[i],(r!=null?r.read:void 0)instanceof Function?t=r.read.apply(r,[t].concat(o.call(n))):r instanceof Function&&(t=r.apply(null,[t].concat(o.call(n))));return t},t.prototype.set=function(e){var t;return e=e instanceof Function&&!this.binder["function"]?this.formattedValue(e.call(this.model)):this.formattedValue(e),(t=this.binder.routine)!=null?t.call(this,this.el,e):void 0},t.prototype.sync=function(){return this.set(this.options.bypass?this.model[this.keypath]:e.config.adapter.read(this.model,this.keypath))},t.prototype.publish=function(){var...