booster 0.0.1

data/lib/assets/javascripts/booster/view.js.boost

@@ -0,0 +1,45 @@
+var observer = require('./support/observer');
+
+/**
+ * Extension of {Backbone.View} which supports the concept of entering
+ * and leaving a parent view -- a Composite in Booster. Leaving a composite
+ * means disappearing from DOM and likely involves unbinding from any events
+ * bound to the underlying model or collection.
+ *
+ * @extends {Backbone.View}
+ * @constructor
+ */
+
+exports.View = Backbone.View.extend({
+
+  /**
+   * Invoked when the view has entered a parent view (a composite). The default
+   * behavior is to store a link to the composite for future reference.
+   *
+   * @param {Backbone.View} parent The composite view to which this view is added.
+   */
+
+  enter: function(parent) {
+    this.parent = parent;
+    return this;
+  },
+
+  /**
+   * Invoked when the view is to leave the parent composite. The default behavior is
+   * to remove the view from the DOM and unbind any event listeners, as well as any
+   * bindings to {Backbone.Events} sources.
+   *
+   * This method should not normally be invoked directly. Instead, invoke `remove` on
+   * the parent view which, in turn, will invoke `leave`.
+   */
+
+  leave: function() {
+    $(this.el).remove();
+    this.unobserve();
+    this.unbind();
+    return this;
+  }
+
+});
+
+_.extend(exports.View.prototype, observer.mixin());

data/lib/assets/javascripts/booster/views/composite.js.boost

@@ -0,0 +1,59 @@
+var base = require('../view');
+
+/**
+ * @extends {base.View}
+ * @constructor
+ */
+
+exports.View = base.View.extend({
+
+  /**
+   * Adds a new child view to the composite. This does not add the view to the DOM tree,
+   * which needs to be handled by the inheriting view. The added view will get its
+   * `enter()` function invoked if it wants to register a link back to this composite.
+   *
+   * @param {base.View} view The child view to be added to the composite.
+   * @return {base.View} The child view that was passed in.
+   */
+
+  add: function(view) {
+    this.children || (this.children = []);
+    this.children.push(view);
+    return view.enter(this);
+  },
+
+  /**
+   * Removes the child view from the composite. This also removes the view from the
+   * DOM tree by invoking its `leave()` function, which also unbinds from any underlying
+   * model or collection.
+   *
+   * @param {base.View} view The child view to remove from the composite.
+   * @param {base.View|undefined} The view that was removed or `undefined` if it was not in the composite.
+   */
+
+  remove: function(view) {
+    var index = this.children.indexOf(view);
+    if (index > -1) {
+      list.splice(index, 1);
+      delete view.parent;
+      return view.leave();
+    }
+  },
+
+
+  /**
+   * Removes the composite from the parent. Overridden to recursively invoke `leave` on all
+   * the child views first.
+   *
+   * @override
+   */
+
+  leave: function() {
+    _.each(this.children, function(view) {
+      view.leave();
+    });
+
+    base.View.prototype.leave.call(this);
+  }
+
+});

data/lib/assets/javascripts/booster/views/layout.js.boost

@@ -0,0 +1,94 @@
+var composite = require('./composite');
+
+/**
+ * A {Backbone.View} layout that contains one or more named slots that can be yielded to
+ * child views of this composite view. The layout view ensures that a view in an
+ * area that is yielded to another view is properly cleaned up by invoking its
+ * `leave()` function.
+ *
+ * @extends {composite.View}
+ * @constructor
+ */
+
+exports.View = composite.View.extend({
+
+  /**
+   * @type {String} The CSS class of the DIV element that is auto-generated for this
+   *                view, if not overridden, and no element is specified in the options.
+   */
+
+  className: 'booster-views-layout',
+
+  /**
+   * Initializes the layout view by accepting a template function in the options that
+   * is to be used to render the view. The template function marks the available slots
+   * to be yielded to child views of the layout using the `data-yield` attribute.
+   *
+   * For example:
+   *
+   *     <aside data-yield="sidebar"></aside>
+   *
+   * @param {Object} options The mandatory options hash containing at least the key
+   *                         `template` which is the template function to use during 
+   *                         rendering, in addition to the optional {Backbone.View} options.
+   */
+
+  initialize: function(options) {
+    this._template = options.template;
+    this.views = { };
+    this.render();
+  },
+
+
+  /**
+   * Renders the layout into the auto-generated or options-supplied `this.el` using
+   * the template function given in the initialization options. If any child views
+   * are already inserted into the layout, these are added to the corresponding slot.
+   */
+
+  render: function() {
+    $(this.el).html(this._template());
+  },
+
+  /**
+   * Sets one or more views in the layout, notifying any existing views in the
+   * corresponding areas that they are about to leave, ensuring that event bindings
+   * are properly cleared.
+   *
+   * @param {Object.<string, Backbone.View>} views A set of views to be inserted into the
+   *                                               layout, keyed by the name of the slot that
+   *                                               this particular view exposes. If a slot with
+   *                                               the given name cannot be found in this.el, an
+   *                                               error is thrown.
+   */
+
+  set: function(views) {
+    _.each(views, _.bind(this._insert, this));
+  },
+
+  /**
+   * Inserts the given view into the given slot inside the layout.
+   *
+   * @param {Backbone.View} view The view to insert into the layout.
+   * @param {string} yield The name of the slot that should receive the view.
+   * @private
+   */
+
+  _insert: function(view, yield) {
+    var slot = this.$('[data-yield="#{yield}"]'),
+        views = this.views;
+
+    if (slot.length === 0) {
+      throw new Error('The layout template does not contain any slot named #{yield}');
+    }
+
+    if (views[yield]) {
+      this.remove(views[yield]);
+    }
+
+    slot.html(view.el);
+    view.enter(this)
+    views[yield] = this.add(view);
+  }
+
+});

data/lib/booster.rb

@@ -0,0 +1,7 @@
+require 'booster/version'
+require 'booster/engine'
+
+module Booster
+  autoload(:Handlebars, 'booster/handlebars')
+  autoload(:Template, 'booster/template')
+end

data/lib/booster/engine.rb

@@ -0,0 +1,8 @@
+module Booster
+  class Engine < Rails::Engine
+    initializer 'sprockets.booster', :after => 'sprockets.environment' do |app|
+      next unless app.assets
+      app.assets.register_engine('.boost', Template)
+    end
+  end
+end

data/lib/booster/handlebars.rb

@@ -0,0 +1,50 @@
+# Based on https://github.com/josh/ruby-coffee-script
+require 'execjs'
+require 'pathname'
+
+module Booster
+
+  # Support class for compiling Handlebars templates to JavaScript
+  # source code using the Handlebars.js library with ExecJS.
+  class Handlebars
+    class << self
+      def precompile(*args)
+        context.call('Handlebars.precompile', *args)
+      end
+
+    private
+
+      def context
+        @context ||= ExecJS.compile(source)
+      end
+
+      def source
+        @source ||= path.read + patched_source
+      end
+
+      # Renames the built-in nameLookup method to make Handlebars.js support name lookups not
+      # only directly on an object (object.title), but also via the `Backbone.Model#get()` which
+      # is the way Backbone.Model exposes data attributes for a particular model.
+      #
+      # `Hello {{name}}` will then try `context.name` and then `context.get('name')`
+      # if `context.name` returns `undefined`.
+      def patched_source
+        <<-PATCHED_SOURCE
+          Handlebars.JavaScriptCompiler.prototype.nameLookupOriginal = Handlebars.JavaScriptCompiler.prototype.nameLookup;
+          Handlebars.JavaScriptCompiler.prototype.nameLookup = function(parent, name) {
+            return "((" + parent + ".get ? " + parent + ".get('" + name + "') : undefined) || " +
+              this.nameLookupOriginal(parent, name) + ")";
+          }
+        PATCHED_SOURCE
+      end
+
+      def path
+        @path ||= assets_path.join('javascripts', 'handlebars.js')
+      end
+
+      def assets_path
+        @assets_path ||= Pathname(__FILE__).dirname.join('..','..','vendor','assets')
+      end
+    end
+  end
+end

data/lib/booster/template.rb

@@ -0,0 +1,59 @@
+require 'tilt'
+
+module Booster
+
+  # Tilt integration which pre-processes `.booster` files by wrapping them in a
+  # CommonJS-like closure and converts inline templates to JavaScript functions
+  # using the Handlebars compiler. While it is at it, it also does string interpolation
+  # on regular JavaScript strings.
+  class Template < Tilt::Template
+
+    # Regex for capturing sections of template code to be compiled to JavaScript
+    TEMPLATE_SECTION = /@@\s*([A-Za-z0-9]*)\n(((?!@@).)*)/m
+
+    # Regex for capturing string interpolations
+    # STRING_INTERPOLATION = /('|")(.*)#\{([\s\S]+?)\}/
+
+    STRING_INTERPOLATION = /#\{([\s\S]+?)\}/
+
+    # Processing Booster files result in plain JavaScript.
+    def self.default_mime_type
+      'application/javascript'
+    end
+
+    def evaluate(scope, locals, &block)
+      # Replace template code with compiled JavaScript
+      data.gsub!(TEMPLATE_SECTION) do
+        "var #{$1} = Handlebars.template(#{Handlebars.precompile($2.strip!)});\n\n"
+      end
+
+      # Convert string interpolation to string concatenation with rudimentary
+      # guessing of quote type ($1). Since the template functions compiled in the
+      # previous step are just functions it is possible to use interpolations there
+      # as well, even if Handlebars does not support them by default. This is not
+      # recommended though although it works.
+      data.gsub!(STRING_INTERPOLATION, '\' + (\1) + \'')
+
+      # Indent the module content if in development mode for increased readability
+      if (Rails.env == 'development')
+        data.gsub!(/^(.)/, '  \1')
+      end
+
+      # Wrap the whole thing in a closure and register it as a module (https://gist.github.com/1153919)
+      @output ||= "require.define({'#{ module_name(scope) }': function(exports, require, module) {#{data}}});\n"
+    end
+
+  protected
+
+    def module_name(scope)
+      scope.logical_path #.split('/')[1..-1].join('/')
+    end
+
+    def basename(path)
+      path.gsub(%r{.*/}, '')
+    end
+
+    def prepare
+    end
+  end
+end

data/lib/booster/version.rb

@@ -0,0 +1,3 @@
+module Booster
+  VERSION = '0.0.1'.freeze
+end

data/test/booster/tilt_test.rb

@@ -0,0 +1,35 @@
+require 'test_helper'
+
+module Booster
+  class TiltTest < Test::Unit::TestCase
+    def test_render
+      scope = Object.new
+      class << scope
+        def logical_path
+          'models/user'
+        end
+      end
+
+      template = Booster::Tilt.new('/myapp/app/assets/javascripts/models/user.js.booster') {
+        <<-FILE
+  exports.Index = booster.View.extend({
+    greeting: 'This is Booster \#{this.version}!'
+  });
+
+  @@ layout
+  <h1 data-yield="title"></h1>
+  <div data-yield="content"></div>
+
+  @@ index
+  <ul>
+    {{#each models}}
+      <li>{{name}}</li>
+    {{/each}}
+  </ul>
+        FILE
+      }
+
+      puts template.render(scope, {})
+    end
+  end
+end

data/test/dummy/Rakefile

@@ -0,0 +1,7 @@
+#!/usr/bin/env rake
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require File.expand_path('../config/application', __FILE__)
+
+Dummy::Application.load_tasks

data/test/dummy/app/assets/javascripts/application.js.boost

@@ -0,0 +1,18 @@
+//= require jquery
+//= require booster
+//= require_tree .
+
+require('booster/support/schema_spec');
+require('booster/support/router_spec');
+require('booster/support/helpers_spec');
+require('booster/support/observer_spec');
+require('booster/views/layout_spec');
+
+describe('inline templates', function() {
+  it('should compile inline templates to JavaScript functions', function() {
+    expect(greeting({message: 'Too weird?'})).toEqual('<h1>Too weird?</h1>');
+  });
+});
+
+@@ greeting
+  <h1>{{message}}</h1>  

data/test/dummy/app/assets/javascripts/booster/support/helpers_spec.js.boost

@@ -0,0 +1,69 @@
+var helpers = require('booster/support/helpers');
+
+describe('helpers', function() {
+  var Model = Backbone.Model.extend({
+    statusOptionsObject: {
+       7: 'Lucky',
+      42: 'Meaningful'
+    },
+    statusOptionsArray: [7, 42],
+  });
+
+  beforeEach(function() {
+    this.model = new Model({
+      title:  'Boyachaka',
+      status: 42
+    });
+  })
+  
+  it('should include a form input helper', function() {
+    expect(input(this.model)).toEqual(
+      '<input class="test" data-cid="#{this.model.cid}" name="title" value="Boyachaka"></input>'
+    );
+  });
+
+  it('should include a form textarea helper', function() {
+    expect(textarea(this.model)).toEqual(
+      '<textarea class="test" data-cid="#{this.model.cid}" name="title">Boyachaka</textarea>'
+    );
+  });
+
+  it('should include a form radio button helper', function() {
+    expect(radio(this.model)).toEqual(
+      '<input class="test" name="status" value="7" type="radio"></input>\n' +
+      '  <input class="test" name="status" value="42" type="radio" checked="true"></input>'
+    );
+  });
+
+  it('should include a form select helper', function() {
+    expect(selectObject(this.model)).toEqual(
+      '<select class="test" data-cid="#{this.model.cid}" name="status">\n' +
+      '<option value="7" >Lucky</option>\n' +
+      '<option value="42" selected>Meaningful</option>\n' +
+      '</select>'
+    );
+
+    expect(selectArray(this.model)).toEqual(
+      '<select class="test" data-cid="#{this.model.cid}" name="status">\n' +
+      '<option value="7" >7</option>\n' +
+      '<option value="42" selected>42</option>\n' +
+      '</select>'
+    );
+  });
+})
+
+@@ input
+  {{input "title" class="test" data-cid=cid}}
+
+@@ textarea
+  {{textarea "title" class="test" data-cid=cid}}
+
+@@ radio
+  {{radio "status"  7 class="test"}}
+  {{radio "status" 42 class="test"}}
+
+@@ selectObject
+  {{select "status" statusOptionsObject class="test" data-cid=cid}}
+
+@@ selectArray
+  {{select "status" statusOptionsArray class="test" data-cid=cid}}