JSFiddle - React, Tailwind, and code Playground

by damngoto

HTML

<div id="wrapper"></div>
<script id="tmpl" type="text">
    <h1>try to uncomment line 108 in js code to watch the difference</h1>
    <h2>this is a datagrid component</h2>
    <datagrid></datagrid>
    
    <h2>this is a datalist component</h2>
    <datalist></datalist>
    
    <h2>this is a dropdown list component</h2>
    <dropdownlist></dropdownlist>
</script>

JavaScript

(function() {
	var LOADED = 'AJAX_NUM_LOADED'
	var TOTAL = 'AJAX_NUM_TOTAL'
	var TASK_QUEUE = 'TASK_QUEUE'

	function init(ractive, el, ajaxTotalNum) {
		if (ractive.fragment.rendered){
			return
		}

		if (ractive.root != ractive) {
			return
		}

		ractive.set(LOADED, 0)
		ractive.set(TOTAL, ajaxTotalNum)
		ractive.set(TASK_QUEUE, [])

		var listener = ractive.observe(LOADED, function AsyncRenderObserve(val) {
			if (val === ractive.get(TOTAL)) {
				ractive.render(el)

				ractive.get(TASK_QUEUE).forEach(function AsyncRenderConsumeQueue(fn) {
					fn()
				})

				ractive.set(TASK_QUEUE, null)

				listener.cancel()
				listener = null
			}
		}, {init: false})
	}

	function done(ractive, callback, args){
		var root = ractive.root
		var loaded = root.get(LOADED)
		if (typeof loaded !== 'number') {
			typeof callback === 'function' && callback.apply(ractive, args)
			return
		}

		var total = root.get(TOTAL)

		loaded < total && root.add(LOADED)

		if (root.get(LOADED) === total) {
			typeof callback === 'function' && callback.apply(ractive, args)
			return
		}

		if (typeof callback === 'function') {
			root.get(TASK_QUEUE).push(function AsyncRenderCallbackWrapper() {
				callback.apply(ractive, args)
			})
		}
	}

	window.AsyncRender =  {
		init: init,
		done: done
	}
})()

var DataGrid = Ractive.extend({
    template: '{{#items}} <strong>{{.}}</strong> <br>{{/items}}',
    oninit: function() {
        var self = this
        setTimeout(function() {
            self.set('items', [1, 3, 5, 7, 9])
            
            AsyncRender.done(self)
        }, 200)
    }
})

Ractive.components.datagrid = DataGrid

var DataList = Ractive.extend({
    template: '{{#items}} <strong>{{.}}</strong> <br>{{/items}}',
    oninit: function() {
        var self = this
        setTimeout(function() {
            self.set('items', [2, 4, 6, 8, 10])
            
            AsyncRender.done(self)
        }, 400)
    }
})

Ractive.components.datalist = DataList

var DropdownList =...