JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<main></main>
<p><em>check console...</em></p>

<script id='template' type='text/ractive'>
    <h1>Hello {{name}}!</h1>
    <p>We're using Ractive.js version {{version}}</p>
</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

var mapAdaptor = {
    filter: function ( obj ) {
        return obj instanceof Map;
    },
    wrap: function ( ractive, map ) {
        return {
            get: function () {
                var obj = {};
                map.forEach( function ( v, k ) {
                    obj[k] = v;
                });
                return obj;
            },
            set: function ( k, v ) {
                map.set( k, v );
            },
            teardown: function () {
                // noop - no observers
            }
        };
    }
};

var map = new Map();

map.set( 'name', 'world' );
map.set( 'version', Ractive.VERSION );

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: map,
    adapt: [ mapAdaptor ]
});

setTimeout( function () {
    console.group( 'setting with ractive.set(\'name\', \'everybody\') works...' );
    ractive.set( 'name', 'everybody' );
    console.log( 'map.get("name") === %s', map.get( 'name' ) );
    console.groupEnd();
}, 2000 );

setTimeout( function () {
    console.group( '...but using map.set(\'name\', \'darkness, my old friend\') doesn\'t' );
    map.set( 'name', 'darkness, my old friend' );
    console.log( ractive.toHTML() );
    console.log( 'ractive.get("name") === %s', ractive.get( 'name' ) );
    console.groupEnd();
}, 4000 );