JSFiddle - React, Tailwind, and code Playground

by authman2

HTML

<html>
    <div id='root'></div>
    <script src='https://unpkg.com/@authman2/mosaic@latest/dist/index.js'></script>
    <script src='./index.js'></script>
</html>

JavaScript

/* 1.) Create a Portfolio with some data and a function to change it. */
const portfolio = new Mosaic.Portfolio({
    name: "Joe Schmoe",
    age: 21,
    birthdayMessage: 'Not your birthday yet...'
}, (event, data, newData) => {
    switch(event) {
        case 'change-name':
            data.name = 'Joseph Schmoe';
            break;
        case 'celebrate-birthday':
            data.age += 1;
            data.birthdayMessage = newData.birthdayMessage;
            break;
        default:
            break;
    }
});

/* 2.) Create some Mosaics that use the Portfolio. */
const Child = new Mosaic({
    portfolio,
    view() {
        return html`<div>
            <h1>Name: ${ this.portfolio.get('name') }</h1>
            <h1>Age: ${ ''+this.portfolio.get('age') }</h1>
        </div>`;
    },
    created() {
        // Dispatch two events at the same time.
        setTimeout(() => {
            this.portfolio.dispatch(['change-name', 'celebrate-birthday'], {
                birthdayMessage: 'Happy Birthday!!'
            });
        }, 5000);
    }
});

const app = new Mosaic({
    element: '#root',
    portfolio,
    view() {
        return html`<div>
            <h1>${ this.portfolio.get('birthdayMessage') }</h1>
            ${ Child.new() }
        </div>`;
    },
});
app.paint();