What's Here

This is the annotated source of the standard module format used to power UI modules in Semantic UI.

You can view the annotated source online.

Standard Features

• Standardizes element lifecycle, initialize, bind events, instantiate, destroy, refresh, etc.
• Built in debug tools designed to make developer comments appear as traces during execution
• Built in performance logging that shows diffed time in milliseconds between debug logs
• Designed so that css selectors, metadata, regular expresions, even error messages are passed through as settings and user-editable

Advanced Features

Method Lookup

Method invocation automatically converts sentence case to camelCase or nested object during method lookup

$('.component').component('set text', 'Foobar');

Internally matches against methods

set: {
  text: function(text) {
     // do something
  }
}

As well as

setText: function(Text) {
  // do something
}

Mutation Observers

Elements use DOM Mutation Observers to allow refreshing cached values after changes

if('MutationObserver' in window) {
  observer = new MutationObserver(function(mutations) {
    module.debug('Element updated refreshing selectors');
    module.refresh();
  });
  observer.observe(element, {
    childList : true,
    subtree   : true
  });
  module.debug('Setting up mutation observer', observer);
}

Building Docs

# to get docco
npm install -g docco
# to build
docco src/*.js --css src/css/docco