Registering Ceci components imperatively

The following is an sample script which will register a Ceci component called app-test. Here are a few things to note:

• For the time being, template, description, and thumbnail must be DOM elements (i.e. not strings) when they are sent to Ceci.registerComponent.
• The constructor will be called in exactly the same way as a declarative component. this, and Ceci should be no different.
• There is a small "initialization" block at the top, which just checks if Ceci has been loaded yet. Once Ceci has composed itself, it will emit the ceciready event on document, and is ready to use.

(function(){
  // Check for Ceci, and wait for it to init if it's not there.
  if (window.Ceci) {
    init();
  }
  else {
    document.addEventListener('ceciready', init);
  }

  function init () {
    document.removeEventListener('ceciready', init);

    // Gather/create the necessary elements of a Ceci component
    var template = document.createElement('template');
    template.innerHTML = '<div style="display: block; height: 50px;">Test</div>';

    var thumbnail = document.createElement('thumbnail');
    thumbnail.innerHTML = 'Test';

    var description = document.createElement('description');
    description.innerHTML = 'Test';

    // Register the component with Ceci
    Ceci.registerComponent('app-test', {
      constructor: function () {
        Ceci(this, {
          init: function (params) {
            var that = this;
            this.onclick = function (e) {
              that.broadcast('send', 'test');
            };
          },
          broadcasts: ['send'],
          listeners: {
            receive: function (data, channel) {
              this.broadcast('send', data);
            }
          },
          defaultListener: 'receive',
          defaultBroadcasts: ['send']
        });
      },
      description: description,
      thumbnail: thumbnail,
      friends: ['app-test'],
      template: template
    });
  }
})();