JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<div id="main">

  
</div>
<script type="text/ractive" id="top">
<button on-click="addComponent">Add a Component</button>
<div class="ui top attached tabular menu" id="tabs">
{{#tabs:i}}
  <a class="{{#activeTab === i}} active {{/active}} item" data-tab="{{.}}" on-click="tabClicked: {{.}}">{{.}}</a>
{{/tabs}}
</div>
<div><loader/></div>
<!--
{{#tabs:i}}
<div class="ui bottom attached {{#activeTab === i}} active {{/active}}  tab segment" data-tab="{{.}}">
 <loader selection="{{i}}"/>
</div>
{{/tabs}}
-->
</script>

JavaScript

var mapper = {
	Acomponent: Ractive.extend({
  	template: '<div> I am a component created at {{now}}</div>'
  })
}

var Dummy = Ractive.extend({
  template: 'Add a Component to begin'
});


var r = new Ractive({
	el: "#main",
  template: "#top",
  
  components: {
  	dummy: Dummy,
    
  	loader: function() {
    	
      var tabs = this.get('tabs');
      console.log("loader: tabs",tabs);
      var lastTabIndex = tabs.length - 1;
      //var activeTab = this.get('activeTab');
      var lastAddedTab = tabs[lastTabIndex];
      console.log("loader: lastAddedTab", lastAddedTab);
      this.set('activeTab', lastTabIndex);
      console.log("loader: lastAddedTab", lastAddedTab);
    	return this.components[lastAddedTab];
    }
    
    /*
    loader: function() {
    	var tabs = this.get('tabs');
      console.log("loader: tabs",tabs);
      var lastTabIndex = tabs.length - 1;
      //var activeTab = this.get('activeTab');
      var lastAddedTab = tabs[lastTabIndex];
      
      if (lastTabIndex) {
        this.components[lastAddedTab] = mapper.Acomponent({
          data: {
            now: lastAddedTab
          }
        });
        return this.components[lastAddedTab];
      } else {
      	return this.components['dummy']
      }
      
    }
    */
  },
  data: function(){
  	return {
    	tabs: ['dummy'],
    	activeTab: 0
    };
  },
  
  onconfig: function() {
    
  	this.on('addComponent', function() {
    	var tabname = 'comp-'+this.get('tabs').length
      console.log("onconfig: tabs", this.get('tabs'));
      this.push('tabs', tabname);
      //console.log("onconfig: setActiveTab", tabname);
      //this.set('activeTab', tabname);
    	this.components[tabname] = mapper['Acomponent']({
      	data: {
        	now: tabname
        }
      });
      
      
    }.bind(this))
  },
  
  oninit: function() {
  	
    
    this.on('tabClicked', function(e) {
    	var activeTabIndex = parseInt(e.keypath.split(".")[1], 10);
      var activeTabName =...