JSFiddle - React, Tailwind, and code Playground

by damngoto

HTML

<main></main>

<script id='template' type='text/ractive'>
    {{#each items}}
        <form>
        {{#each types}}
        <label>
        <input type='radio' name='{{componentType}}' value='{{ this + "-widget"}}'>
            {{.}}
            </label>
        {{/each}}
        </form>
        <div>
        <dynamic type='{{componentType}}'/>
            </div>
            <br>
    {{/each}}
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}



.error {
    color: #d00;
    font-family: monospace;
}

JavaScript

Ractive.components['button-widget'] = Ractive.extend({
    template: '<button>{{value}}</button>'
});
Ractive.components['input-widget'] = Ractive.extend({
    template: '<input value="{{value}}">'
});
Ractive.components['paragraph-widget'] = Ractive.extend({
    template: '<p>widget: {{value}}</p>'
});
Ractive.components.dynamic = Ractive.extend({
    template: '<impl/>',
    components: {
        impl: function(){
            return this.components[this.get('type')]
        }
    },
    oninit: function(){
        this.observe('type', function(type){
            this.reset(this.get());
        }, { init: false} );
    }
});


var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        types: ['button', 'input', 'paragraph'],
        items: [
            { componentType: 'button-widget', value: 'foo' },
            { componentType: 'input-widget', value: 'bar' },
            { componentType: 'paragraph-widget', value: 'baz' }
        ]
    }
});