JSFiddle - React, Tailwind, and code Playground

by TheDev6

HTML

<h1>Pub / Sub Proof Of Concept</h1>

    <div id="content">
        <div id="fuzzy">
            Fuzzy Input: 
            <input type="text" id="fuzzy-text" />
            <br />
            <fieldset>
                <legend>Fuzzy Monitor for subscribed events (subscribed to buzzy text changed)
                </legend>
                <div id="fuzzy-monitor"></div>
            </fieldset>
        </div>
        <br />
        <br />

        <div id="buzzy">
            Buzzy Input: 
            <input type="text" id="buzzy-text" />
            <br />
            <fieldset>

                <legend>Buzzy Monitor for subscribed events (subscribed to fuzzy text changed)</legend>
                <div id="buzzy-monitor"></div>
            </fieldset>
        </div>
    </div>

<script>
    $(function () {
        app.init();
        app.components.fuzzy.init();
        app.components.buzzy.init();
        //lots of room here to register components with the app/mediator
    });
</script>

JavaScript

var app;
(function (app) {
    app.init = function () {
        topics.fuzzyTextChanged = new Topic();
        topics.buzzyTextChanged = new Topic();
    };

    (function (topics) {
        topics.fuzzyTextChanged;
        topics.buzzyTextChanged;
    })(app.topics || (app.topics = {}));
    var topics = app.topics;

    app.log = function (text) {
        console.log(text);
    };
})(app || (app = {}));

var Topic = (function () {
    function Topic() {
        this.arrayOfActions = [];
    }
    Topic.prototype.publish = function (message) {
        console.log('publishing a topic. arrayOfActions.length=' + this.arrayOfActions.length);
        for (var i = 0; i < this.arrayOfActions.length; i++) {
            this.arrayOfActions[i](message);
        }
    };
    Topic.prototype.subscribe = function (action) {
        console.log('registering topic. arrayOfActions.length=' + this.arrayOfActions.length);
        this.arrayOfActions.push(action);
        console.log('registered topic. arrayOfActions.length=' + this.arrayOfActions.length);
    };
    return Topic;
})();

var app;
(function (app) {
    (function (components) {
        (function (fuzzy) {
            fuzzy.init = function () {
                app.log('initilizing fuzzy component');
                wirePublishEvents();
                subscribeToTopics();
            };

            var wirePublishEvents = function () {
                wireTextChangedEvent();
            };

            var wireTextChangedEvent = function () {
                var $fzyText = $('#fuzzy #fuzzy-text');
                $fzyText.keyup(function () {
                    var msg = {
                        text: $fzyText.val()
                    };
                    app.topics.fuzzyTextChanged.publish(msg);
                });
            };

            var subscribeToTopics = function () {
                app.topics.buzzyTextChanged.subscribe(handleBuzzyTextChanged);
            };

            var handleBuzzyTextChanged...