domo.js: class related plugins

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
    <script data-require="define@0.2.0" data-semver="0.2.0" src="https://rawgit.com/definejs/define/0.2.0/define.js"></script>
    <script data-require="mu.type.number@*" data-semver="0.1.0" src="https://rawgit.com/mujs/type.number/master/number.js"></script>
    <script data-require="mu.type.arrayLike@0.1.0" data-semver="0.1.0" src="https://rawgit.com/mujs/type.arrayLike/master/arrayLike.js"></script>
    <script data-require="mu.type.defined@0.1.0" data-semver="0.1.0" src="https://rawgit.com/mujs/type.defined/master/defined.js"></script>
    <script data-require="mu.list.each@*" data-semver="0.1.0" src="https://rawgit.com/mujs/list.each/master/each.js"></script>
    <script data-require="mu.list.map@0.1.0" data-semver="0.1.0" src="https://rawgit.com/mujs/list.map/master/map.js"></script>
    <script data-require="mu.fn.apply@0.1.0" data-semver="0.1.0" src="https://rawgit.com/mujs/fn.apply/master/apply.js"></script>
    <script data-require="mu.fn.bind@0.1.0" data-semver="0.1.0" src="https://rawgit.com/mujs/fn.bind/master/bind.js"></script>
    <script data-require="mu.fn.multiplex@0.1.0" data-semver="0.1.0" src="https://rawgit.com/mujs/fn.multiplex/master/multiplex.js"></script>
    <script data-require="mu.type.string@0.1.0" data-semver="0.1.0" src="https://rawgit.com/mujs/type.string/master/string.js"></script>
    <script data-require="domo@*" data-semver="0.1.0" src="https://rawgit.com/domojs/domo/master/domo.js"></script>
    <script data-require="domo.native@*" data-semver="0.1.0" src="https://rawgit.com/domojs/domo.native/master/native.js"></script>
    <script data-require="domo.on@*" data-semver="0.1.0" src="https://rawgit.com/domojs/domo.on/master/on.js"></script>
    <script data-require="domo.util.classList@0.1.0" data-semver="0.1.0" src="https://rawgit.com/domojs/domo.util.classList/master/classList.js"></script>
    <script data-require="mu.list.indexOf@0.1.0" data-semver="0.1.0" src="https://rawgit.com/mujs/list.indexOf/master/indexOf.js"></script>
    <script data-require="mu.list.contains@0.1.0" data-semver="0.1.0" src="https://rawgit.com/mujs/list.contains/master/contains.js"></script>
    <script data-require="domo.addClass@0.1.0" data-semver="0.1.0" src="https://rawgit.com/domojs/domo.addClass/master/addClass.js"></script>
    <script data-require="mu.list.removeAt@0.1.0" data-semver="0.1.0" src="https://rawgit.com/mujs/list.removeAt/master/removeAt.js"></script>
    <script data-require="mu.list.remove@0.1.0" data-semver="0.1.0" src="https://rawgit.com/mujs/list.remove/master/remove.js"></script>
    <script data-require="domo.removeClass@0.1.0" data-semver="0.1.0" src="https://rawgit.com/domojs/domo.removeClass/master/removeClass.js"></script>
    <script data-require="domo.util.hasClass@0.1.0" data-semver="0.1.0" src="https://rawgit.com/domojs/domo.util.hasClass/master/hasClass.js"></script>
    <script data-require="domo.toggleClass@*" data-semver="0.1.0" src="https://rawgit.com/domojs/domo.toggleClass/master/toggleClass.js"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <input type="text" id="className" />
    <br />
    <button id="add">Add</button>
    <button id="remove">Remove</button>
    <button id="toggle">Toggle</button>
    <hr />
    <div id="target"></div>
  </body>

</html>

define.root(function (require) {
  'use strict';
  
  var domo            = require('domo'),
      domoNative      = require('domo.native'),
      domoOn          = require('domo.on'),
      domoAddClass    = require('domo.addClass'),
      domoRemoveClass = require('domo.removeClass'),
      domoToggleClass = require('domo.toggleClass');
  
  var dom = domo.use({
    native: domoNative,
    on: domoOn,
    addClass: domoAddClass,
    removeClass: domoRemoveClass,
    toggleClass: domoToggleClass
  });
  
  var className = function () {
    var value;
    
    dom('#className').native(function (node) {
      value = node.value;
    });
    
    return value;
  };
  
  var target = dom('#target');
  
  dom('#add').on('click', function () {
    target.addClass(className());
  });
  
  dom('#remove').on('click', function () {
    target.removeClass(className());
  });
  
  dom('#toggle').on('click', function () {
    target.toggleClass(className());
  });
})

#target {
  border: 1px solid black;
  padding: 5px;
  float: left;
}

.little {
  width: 50px;
  height: 50px;
}

.medium {
  width: 100px;
  height: 100px;
}

.big {
  width: 200px;
  height: 200px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}