isabella232 / module-examples

Annotated source of Semantic UI Module Format

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