JSFiddle - React, Tailwind, and code Playground

by ifandelse

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<body>
    <div class="container">
        <div>GLOBAL</div>
        <ul id="global"></ul>
    </div>
    <div class="container">
        <div>USER*</div>
        <ul id="user_star"></ul>
    </div>
    <div class="container">
        <div>USER.ADDRESS.CITY</div>
        <ul id="user_addr_city"></ul>
    </div>
    <div class="container">
        <div>USER.*.CITY</div>
        <ul id="user_star_city"></ul>
    </div>
    <div class="container">
        <div>PRODUCT.DESCRIPTION</div>
        <ul id="prod_desc"></ul>
    </div>
</body>
</html>

CSS

.container {
    margin-bottom: 20px;
}

.container div {
     font-weight: bold;   
}

body {
     font-family: Tahoma; 
   font-size: 10pt; 
}

JavaScript

(function(global, undefined) {

        Object.prototype.forEach = function (callback) {
        var self = this;
        for(var x in self) {
            if(self.hasOwnProperty(x)) {
                callback(self[x]);
            }
        }
    };

    Object.prototype.forEachKeyValue = function (callback) {
        var self = this;
        for(var x in self) {
            if(self.hasOwnProperty(x)) {
                callback(x, self[x]);
            }
        }
    };

    var slice = [].slice,
        subscriptions = {},
        regexify = function(topic) {
            if(!this[topic]) {
                this[topic] = topic.replace(".", "\.").replace("*", ".*");
            }
            return this[topic];
        }.bind(this),
        isTopicMatch = function(topic, comparison) {
            if(!this[topic + '_' + comparison]) {
                this[topic + '_' + comparison] = topic === comparison || topic.search(regexify(comparison)) !== -1 || comparison.search(regexify(topic)) !== -1;
            }
            return this[topic + '_' + comparison];
        }.bind(this);

    var Simplify = function() {

        this.subscribe = function(topic, callback) {
            var topicList = topic.split(/\s/), // we allow multiple topics to be subscribed in one call.
                subIdx = 0,
                exists;
            topicList.forEach(function(topic) {
                exists = false;
                if(!subscriptions[topic]) {
                    subscriptions[topic] = [callback];
                }
                else {
                    subscriptions[topic].forEach(function(sub) {
                        if(subscriptions[topic][subIdx] === callback) {
                            exists = true;
                        }
                    });
                    if(!exists) {
                        subscriptions[topic].push(callback);
                    }
                }
            });
            // return callback for un-subscribing...
      ...