MiniBoilerplate

Just what you need to create jQuery plugins in CoffeeScript

Description

Looking to create a jQuery plugin in CoffeeScript using Test-driven development? If so, MiniBoilerplate is what you've been looking for.

As an example, MiniBoilerplate has been used to create the entire suite of MiniJs.com plugins.

Based on Grunt, node.js, CoffeeScript, Jasmine, PhantomJS and jQuery.

Features

Plugin Code

• 
  jQuery ->
    $.pluginName = ( element, options ) ->
      # current state
      state = ''
  
      # plugin settings
      @settings = {}
  
      # jQuery version of DOM element attached to the plugin
      @$element = $ element
  
      # set current state
      @setState = ( _state ) -> state = _state
  
      #get current state
      @getState = -> state
  
      # get particular plugin setting
      @getSetting = ( key ) ->
        @settings[ key ]
  
      # call one of the plugin setting functions
      @callSettingFunction = ( name, args = [] ) ->
        @settings[name].apply( this, args )
  
      @init = ->
        @settings = $.extend( {}, @defaults, options )
        @callSettingFunction( 'callback', [ @$element, @getSetting( 'message' ) ] ) 
  
        @setState 'ready'
  
      # initialise the plugin
      @init()
  
      # make the plugin chainable
      this
  
    # default plugin settings
    $.pluginName::defaults =
        message: 'hello word'  # option description
        callback: ->           # callback description
  
    $.fn.pluginName = ( options ) ->
      this.each ->
        if $( this ).data( 'pluginName' ) is undefined
          plugin = new $.pluginName( this, options )
          $( this).data( 'pluginName', plugin )
        

Plugin Usage

• $('#element').pluginName({
    message: 'hi',
    callback: function() {
      alert('bye');
    }
  });

Requirements

• Homebrew mxcl.github.com/homebrew

  ruby <(curl -fsSkL raw.github.com/mxcl/homebrew/go)

• PhantomJS phantomjs.org

  brew install phantomjs

• node.js nodejs.org

  brew install node

• Grunt gruntjs.com

  npm install -g grunt

• Optional: Growl and Growl Notify growl.info

Workflow

• Download MiniBoilerplate and go to project folder

  cd path/to/miniboilerplate

• Install needed libraries

  npm install

• Compile CoffeeScript

  grunt coffee

• Run test suite in the terminal (headless)

  grunt jasmine

• Run test suite in the browser

  grunt jasmine-server

• Compile CoffeeScript and run tests suite

  grunt

• Compile CoffeeScript and run tests suite whenever files change (recommended)

  grunt watch

• Minify plugin

  grunt min

• Run test suite remotely using Travis-CI

  1. Hook up your GitHub repository to Travis
  2. Update plugin name in package.json
  3. Update repository name at the very top of the README file (four spots)
  4. Push your local Git repository to Github and go to Travis to check your build status

Connect

About

Matthieu Aussaguel

I am a Web Developer currently working at Envato as part of the Marketplace dev team in Melbourne, Australia. I focus mostly on Ruby/Rails technologies but I also enjoy coding in CoffeeScript. Visit my personal website and my Github page for more info about me.

Follow @mattaussaguel