index.js

var path = require('path');
var util = require('derby/node_modules/racer/lib/util');
var derbyTemplates = require('derby/node_modules/derby-templates');
var templates = derbyTemplates.templates;
var expressions = derbyTemplates.expressions;
var Controller = require('derby/lib/Controller');

module.exports = function (derby, options) {
  var App = derby.App;

  /*
   * components.js
   *
   * Components associate custom script functionality with a view. They can be
   * distributed as standalone modules containing templates, scripts, and styles.
   * They can also be used to modularize application functionality.
   *
   */
  function Component(parent, context, id, scope) {
    this.parent = parent;
    this.context = context;
    this.id = id;
    this._scope = scope;
  }

  util.mergeInto(Component.prototype, Controller.prototype);

  Component.prototype.destroy = function() {
    this.emit('destroy');
    this.model.removeContextListeners();
    this.model.destroy();
    delete this.page._components[this.id];
    var components = this.page._eventModel.object.$components;
    if (components) delete components.object[this.id];
  };

  Component.prototype.get = function(viewName, unescaped) {
    var view = this.getView(viewName);
    return view.get(this.context, unescaped);
  };

  Component.prototype.getFragment = function(viewName) {
    var view = this.getView(viewName);
    return view.getFragment(this.context);
  };

  Component.prototype.getView = function(viewName) {
    var contextView = this.context.getView();
    return (viewName) ?
      this.app.views.find(viewName, contextView.namespace) : contextView;
  };

  Component.prototype.getAttribute = function(key) {
    var attributeContext = this.context.forAttribute(key);
    if (!attributeContext) return;
    var value = attributeContext.attributes[key];
    return value && expressions.renderValue(value, attributeContext);
  };

  Component.prototype.setAttribute = function(key, value) {
    this.context.parent.attributes[key] = value;
  };

  Component.prototype.setNullAttribute = function(key, value) {
    var attributes = this.context.parent.attributes;
    if (attributes[key] == null) attributes[key] = value;
  };

  function initComponent(context, component, parent, model, id, scope) {
    // Do generic controller initialization
    var componentContext = context.componentChild(component);
    Controller.call(component, parent.app, parent.page, model);
    Component.call(component, parent, componentContext, id, scope);

    // Do the user-specific initialization. The component constructor should be
    // an empty function and the actual initialization code should be done in the
    // component's init method. This means that we don't have to rely on users
    // properly calling the Component constructor method and avoids having to
    // play nice with how CoffeeScript extends class constructors
    emitHooks(context, component);
    component.emit('init', component);
    if (component.init) component.init(model);

    return componentContext;
  }

  function setAttributes(context, model) {
    if (!context.attributes) return;
    // Set attribute values on component model
    for (var key in context.attributes) {
      var attribute = context.attributes[key];
      var segments = (
        attribute instanceof templates.ParentWrapper &&
        attribute.expression &&
        attribute.expression.pathSegments(context)
      );
      if (segments) {
        model.root.ref(model._at + '.' + key, segments.join('.'));
      } else {
        model.set(key, attribute);
      }
    }
  }

  function emitHooks(context, component) {
    if (!context.hooks) return;
    // Kick off hooks if view pointer specified `on` or `as` attributes
    for (var i = 0, len = context.hooks.length; i < len; i++) {
      context.hooks[i].emit(context, component);
    }
  }

  function createFactory(constructor) {
    return (constructor.prototype.singleton) ?
      new SingletonComponentFactory(constructor) :
      new ComponentFactory(constructor);
  }

  function ComponentFactory(constructor) {
    this.constructor = constructor;
  }
  ComponentFactory.prototype.init = function(context) {
    var component = new this.constructor();

    var parent = context.controller;
    var id = context.id();
    var scope = ['$components', id];
    var model = parent.model.root.eventContext(component);
    model._at = scope.join('.');
    model.set('id', id);
    setAttributes(context, model);
    // Store a reference to the component's scope such that the expression
    // getters are relative to the component
    model.data = model.get();
    parent.page._components[id] = component;

    return initComponent(context, component, parent, model, id, scope);
  };
  ComponentFactory.prototype.create = function(context) {
    var component = context.controller;
    component.emit('create', component);
    // Call the component's create function after its view is rendered
    if (component.create) {
      component.create(component.model, component.dom);
    }
  };

  function SingletonComponentFactory(constructor) {
    this.constructor = constructor;
    this.component = null;
  }
  SingletonComponentFactory.prototype.init = function(context) {
    var componentContext;
    if (this.component) {
      componentContext = context.componentChild(this.component);
      emitHooks(context, this.component);
    } else {
      this.component = new this.constructor();
      var parent = context.controller.page;
      var model = parent.model;
      componentContext = initComponent(context, this.component, parent, model);
    }
    return componentContext;
  };
  // Don't call the create method for singleton components
  SingletonComponentFactory.prototype.create = function() {};

  App.prototype.component = function(viewName, constructor) {
    if (typeof viewName === 'function') {
      constructor = viewName;
      viewName = null;
    }

    // Inherit from Component
    extendComponent(constructor);

    // Load template view from filename
    if (constructor.prototype.view) {
      var viewFilename = constructor.prototype.view;
      viewName = constructor.prototype.name || path.basename(viewFilename, '.html');
      this.loadViews(viewFilename, viewName);

    } else if (!viewName) {
      if (constructor.prototype.name) {
        viewName = constructor.prototype.name;
        var view = this.views.register(viewName);
        view.template = templates.emptyTemplate;
      } else {
        throw new Error('No view name specified for component');
      }
    }

    if (constructor.prototype.style) {
      var styleFilename = constructor.prototype.style;
      this.loadStyles(styleFilename);
    }

    // Associate the appropriate view with the component type
    var view = this.views.find(viewName);
    if (!view) {
      var message = this.views.findErrorMessage(viewName);
      throw new Error(message);
    }
    view.componentFactory = createFactory(constructor);


    // Make chainable
    return this;
  };

  function extendComponent(constructor) {
    // Don't do anything if the constructor already extends Component
    if (constructor.prototype instanceof Component) return;
    // Otherwise, replace its prototype with an instance of Component
    var oldPrototype = constructor.prototype;
    constructor.prototype = new Component();
    util.mergeInto(constructor.prototype, oldPrototype);
  }
};