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>

{{#tabs:i}}
<div class="ui bottom attached {{#activeTab === i}} active {{/active}}  tab segment" data-tab="{{.}}">
 <loader data="{{.}}"/>
</div>
{{/tabs}}
</script>

JavaScript

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

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

var r = new Ractive({
	el: "#main",
  template: "#top",
  
  components: {
  	loader: function() {
    	console.log("loader: activeTab",this.get('activeTab'));
      var tabs = this.get('tabs');
      var activeTab = this.get('activeTab');
      
      this.on('addComponent', function() {
      	console.log("onaddComponent::loader called");
      })
    	return this.components[tabs[activeTab]];
    }
  },
  data: function(){
  	return {
    	tabs: ['dummy'],
    	activeTab: 0
    };
  },
  onconstruct: function(){
  
  	this.on('addComponent', function() {
  		console.log("onaddComponent::onconstruyct called");
      });
  },
  
  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] = new mapper['Acomponent']({
      	data: {
        	now: tabname
        }
      });
      /*
      this.reset({
      	tabs: this.get('tabs'),
        activeTab: this.get('activeTab')
      });
      */
    }.bind(this))
  },
  
  oninit: function() {
  	this.components.dummy = new Dummy({
    	el:"#tabs",
      append: true
    });
    
    this.on('tabClicked', function(e) {
    	this.set('activeTab', parseInt(e.keypath.split(".")[1], 10));
    })
  }
})