JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<div id="#main"></div>

JavaScript

var widget = Ractive.extend({
    twoway: false, // If this is true, the error doesn't happen
    template: '<p>{{greeting}}, {{recipient}}!</p>'
});

var ractive = new Ractive({
    el: '#main',
    template: "<widget greeting='{{greeting}}' recipient='{{recipient}}' />",
    data: { greeting: 'Hello', recipient: 'world' },
    components: { widget: widget }  
});

// This works becaues it only changes recipient
ractive.set({ greeting: "Hello", recipient: "friend" });

// This works because it only changes greeting
ractive.set({ greeting: "Farewell", recipient: "friend" });

// This breaks
ractive.set({ greeting: "Goodbye", recipient: "stranger"});