JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<div class='box' style='background: red;'></div>
<div class='box' style='background: green;'></div>
<div class='box' style='background: blue;'></div>

<button>
destroy
</button>

CSS

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

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

.box {
  width: 100%;
  height: 100px;
  padding: 1em;
  box-sizing: border-box;
  color: white;
  font-weight: bold;
  -webkit-user-select: none;
}

p {
  pointer-events: none;
  -webkit-user-select: none;
}

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

Babel + JSX

const transforms = [ 'capitalize', 'uppercase', 'lowercase' ];
let i = 0;

const Movable = Ractive.extend({
	template: '<p>i am in the {{color}} box</p>',
  
  oninit () {
  	console.log( 'oninit' );
    
    // DOM elements have not been created yet!
    try {
      const p = this.find( 'p' );
    } catch ( err ) {
      console.log( 'nope:' );
      console.error( err.stack );
    }
  },
  
  onrender () {
	  console.log( 'onrender' );
    this.set( 'color', this.el.style.backgroundColor );
    const p = this.find( 'p' );
    p.style.textTransform = transforms[ i++ % 3 ];
  },
  
  onunrender () {
  	console.log( 'onunrender' );
  },
  
  onteardown () {
    console.log( `I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhäuser Gate. All those moments will be lost in time, like tears...in...rain. Time to die.` );
  }
});

console.group( 'creating instance' );
const ractive = new Movable();
console.groupEnd();

window.addEventListener( 'click', event => {
  if ( event.target.className === 'box' ) {
    console.group( 'moving to new target' );
    ractive.unrender();
  	ractive.render( event.target );
    console.groupEnd();
  }
  
  if ( event.target.tagName === 'BUTTON' ) {
  	ractive.teardown();
  }
});