JSFiddle - React, Tailwind, and code Playground

by Numbnut

HTML

<body>
<script type="module">
    import {html, createYoffeeElement} from "https://unpkg.com/yoffee@latest/dist/yoffee.min.js"

    createYoffeeElement("my-list-item", props => html(props)`
        <button onclick=${() => props.clicked()}>
            click me for the ${() => props.clicks}th time.
        </button>
    `)

    createYoffeeElement("some-list", props => {
        const state = {
            items: [
                {clicks: 0},
                {clicks: 0}
            ],
            margin: 20
        }

        return html(props, state)`
            <style>
                :host {
                    display: block;
                    margin: ${() => state.margin}px;
                }
            </style>
            <div>
                ${() => state.items.map(item => html(item)`
                    <my-list-item
                        clicks="${() => item.clicks}"
                        clicked=${() => () => item.clicks += 1}
                        data=${() => item.data}></my-list-item>
                `)}
            </div>
            <button onclick=${() => state.items = [...state.items, {clicks: 0}]}>
                add a button
            </button>
        `
    });
</script>
<some-list></some-list>
</body>