SimpleReactiveDOM

HTML

<script lang="text/javascript" src="https://cdn.jsdelivr.net/npm/@adernnell/simplereactivedom/dist/bundle.iife.js"></script>
<h1>SimpleReactiveDOM Example</h1>
<div id="app-content"></div>

JavaScript

const { html, node, writable, call } = srdom;

const usernameStore = writable('World');
const Welcome = (username) => node(html`
    <div>
        <input 
            type="text" 
            value="${username}" 
            oninput=${call((e) => username.set(e.target.value))}
        />
        <span>Hello ${username} !</span>
    </div>
`)

let count = 0;
const List = () => {
    const divLiterals = html`
        <div>
            <p>List start at: ${count + 1}</p>
            <ul>
                ${[1, 2, 3, 4, 5].map((i) => html`<li>${count + i}</li>`)}
            </ul>
        </div>
    `;
    count++;
    return divLiterals;
};

const trigger = writable({});

const contentNode = node(html`
    <div>
        ${Welcome(usernameStore)}
        </br>
        <button onclick=${call(() => trigger.set({}))}>Trigger list refresh</button>
        ${node((watch) => (watch(trigger), List()))}
    </div>
`);

document.getElementById('app-content').replaceChildren(contentNode);