JSFiddle - React, Tailwind, and code Playground

by Aubrey Taylor

HTML

<h1>Module Mixin Example</h1>
<h2>Unmixed</h2>
<p class="unmixed-foo"></p>
<p class="unmixed-bar"></p>
<h2>Mixed</h2>
<p class="mixed-foo"></p>
<p class="mixed-bar"></p>
<h2>Mod2 Mixed with "Bar" Only</h2>
<p class="mod2-mixed-foo"></p>
<p class="mod2-mixed-bar"></p>

CSS

h1{
 font-family: sans-serif;
 font-weight:bold;
 font-size:25px;
 padding-bottom:15px;
 padding-left:10px;
 padding-top:10px;
}
h2{
 font-family: sans-serif;
 font-weight: bold;
 font-size: 18px;
 color:#333; 
 padding-bottom:5px;
 padding-left:10px;
 padding-top:10px;    
}
p{
 font-family: Courier, sans-serif; 
 font-size: 13px;
 padding-left:10px;                
}

JavaScript

var Fiddle = Fiddle || {};

Fiddle.Module = function(){
    var self = {};
    var mixer = Fiddle.Mixer();

    function __new__(){
        self.mix = mix;
    }
    
    /* initialization */

    function __init__(){
        self.name = 'Fiddle.Module';
        
    }
    
    /* private methods */
    function mix(mixin, methods){
        mixer.mix(self, mixin, methods);        
    }

    // do not delete //
    __new__();
    __init__();
    return self;
    // #eo do not delete //
};

Fiddle.Mixer = function(){
    var self = {};

    function __new__(){
        self.mix = mix;
    }
    
    /* initialization */

    function __init__(){
        self.name = 'Fiddle.Mixer';
    }

    /* public methods */

    // mix(foo, fooMixin, [methods(optoinal)]);
    function mix(base, mixin, methods){
        methods = methods || false;
        
        if(methods !== false){
            pick(base, mixin, methods);
        }else{
            copy(base, mixin);
        }
    }

    /* private methods */

    function pick(base, mixin, methods){
        var methodName;
        var method;

        for(var i=methods.length-1; i>=0; i--){
            methodName       = methods[i];
            method           = mixin[methodName];
            base[methodName] = method;
        }
    }
    function copy(base, mixin){
        var methodName;
        var method;

        // should we check for duplicate signatures?
        // if we do, do we skip? override? or rename?
        // simplest first, override.
        for(methodName in mixin){

            if(mixin.hasOwnProperty(methodName)){
                method = mixin[methodName];
                base[methodName] = method;
            }
        }

    }

    // do not delete //
    __new__();
    __init__();
    return self;
    // #eo do not delete //
};

Fiddle.ModuleMixin = function(){
    var self = {};

    function __new__(){
        self.foo = foo;
        self.bar = bar;
    }
    
    /* initialization */

   ...