JSFiddle - React, Tailwind, and code Playground

by puneetsiet

HTML

<script id='template' type='text/ractive'>
   	<button on-click="addComponent">Add</button>
 		<div>
   		<input type="text" value="{{textdata}}" placeholder="Send Text to current component" width="900" on-blur="sendDataToCurrentComponent"/>
   	</div>
    {{#each list}}
    <input type='radio' name='{{name}}' value='{{.}}'>{{.}}
    {{/each}}
    <br>
    <dynamic name='{{name}}'/>
       
</script>
<main></main>

JavaScript

var DynamicComponent = Ractive.extend({
	template: '<component />',
  components: {
	  component: function() {
     return this.get('name')
    }
  },
  oninit: function() {
   this.observe('name',function(){
   	this.reset();
   },{init:false});
  }
});

var r = new Ractive({
	el: 'main',
	template: '#template',
	components : {
		dummy: Ractive.extend({template: 'Welcome'}),
	  dynamic: DynamicComponent
  },
  data : {
	  list : ['dummy'],
  	name: 'dummy',
	  textData: ''
  },
  oninit: function() {
   this.on('sendDataToCurrentComponent',function(){
    this.root.fire(this.get('name'),this.get('textdata'));
   }.bind(this))
   this.on('addComponent',function(){
   	var rndComponent = String.fromCharCode(Math.floor(Math.random()*10)+65);
    this.components[rndComponent] = Ractive.extend(
       {
         template:rndComponent+' component <ul>{{#datas}}<li>{{.}}</li>{{/datas}}</ul>',
         data: {
         		datas:[]
         },
         onrender:function() {
            this.root.on(rndComponent,function(txt){
            	this.push('datas',txt);
            }.bind(this));
         },
         onunrender: function(){
            this.root.off(rndComponent);
         }
       }
    );
    this.push('list',rndComponent);
    
   }.bind(this))
  }
})