JSFiddle - React, Tailwind, and code Playground

by ChaseWest

HTML

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
                <li>d</li>
            </ul>
        </li>
    </ul>
</div>

JavaScript

;
(function (window, document, undefined) {

    //When querying the dom, most generally only care about the body
    var body = document.body,
        domChanged = false,
        MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
        hasMutationObserver = typeof MutationObserver === 'function',
        bodyFragment = hasMutationObserver ? body.cloneNode(true) : body,
        _cache = {};

    //Set the mutation observer if it's available
    if (hasMutationObserver) {

        // create an observer instance
        var observer = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                console.log("changed");
                domChanged = true;
            });
        });

        // configuration of the observer:
        var config = {
            attributes: true,
            childList: true,
            characterData: true
        };

        // pass in the target node, as well as the observer options
        observer.observe(body, config);

    }

    //util api functions
    var _util = {

        //querySelector
        '$': function $(selector, parent) {
            updateFragment();
            parent = parent || bodyFragment;
            console.log(_cache);
            return _cache[selector] || cache(selector, parent.querySelector(selector));
        },

        //querySelectorAll
        '$$': function $$(selector, parent) {
            updateFragment();
            parent = parent || bodyFragment;
            return _cache[selector] || cache(selector, parent.querySelectorAll(selector));
        },

        //append to parent
        'append': function append(HTML, parent) {
            var nodes = typeof HTML === 'string' ? parseHTML(HTML) : HTML;
            this.$(parent).appendChild(nodes);
        }

    };

    //private - update document fragment if a mutation event has fired since last updated.
    function updateFragment() {
    ...