JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<div id = 'main'></div>

<script type="text/ractive" id="init">
<div>Getting started</div>
</script>

<script  type="text/ractive" id="single">
	This is showing component created at {{now}}
</script>

<script type="text/ractive" id="root">
	
	<div>
  	{{#tabs}}
    	<input type='radio' name='{{selection}}' value='{{.}}'>{{.}}
  {{/tabs}}
    <br>
  
  	<dynamic/>
  	<button on-click="addOne">Add A component</button>
  </div>
</script>

JavaScript

var mapper = {
	Acomponent: Ractive.extend({
      	template: '#single'
      })
};
var r = new Ractive({
	el: '#main',
  template: '#root',
  /*partials: {
  	dynamicPartial: function() {
    	return "<" + this.get('selection') +"/>"
    }
  },*/
  components: {
  	init: Ractive.extend({
    	template: '#init'
    }),
  	dynamic: function() {
    	return this.components[this.get('selection')];
    }
  },
  data: function() {
  	return {
      'selection': 'init',
      'tabs': ['init']
		};
  },
  oninit: function() {
  
  	this.observe('selection', function(){
           this.reset({
           	tabs: this.get('tabs'),
            selection: this.get('selection')
           });
        });
  	
  	this.on('addOne', function(){
    	var now = ''+ Date.now();
  
  		this.components[now] = new mapper['Acomponent']({
        data: {
        	now: now
        }
      });
      
      this.push('tabs', now);
    }.bind(this));
  }
  
})