Merge pull request #84 from premasagar/feature/refactor

refactor out core

Gruntfile.coffee

@@ -73,8 +73,8 @@ module.exports = (grunt) ->
         tasks: ["build"]
 
       karma:
-        files: ["sqwidget/**", "sqwidget/tests/**"]
-        tasks: ["karma:unit:run"]
+        files: ["sqwidget/**/*.coffee", "sqwidget/tests/**/*.coffee"]
+        tasks: ["build", "karma"]
 
   grunt.loadNpmTasks('grunt-contrib-coffee')
   grunt.loadNpmTasks('grunt-contrib-watch');

config/karma.conf.js

@@ -7,45 +7,38 @@ module.exports = function(config) {
     // base path, that will be used to resolve files and exclude
     basePath: '../',
 
-
     // frameworks to use
     frameworks: ['mocha', 'requirejs'],
 
-
     // list of files / patterns to load in the browser
     files: [
       'compiled/tests/js/test-main.js',
       {pattern: 'compiled/tests/js/spec/**/*.js', included: false},
       {pattern: 'compiled/sqwidget/js/**/*.js', included: false},
-      {pattern: 'sqwidget/lib/**/*.js', included: false, watched: false}
+      {pattern: 'widgets/**', included: false, watch: true},
+      {pattern: 'sqwidget/lib/**/*.js', included: false, watched: false},
+      {pattern: 'node_modules/karma-chai-plugins/node_modules/chai/chai.js', included: false},
     ],
 
-
     // list of files to exclude
     exclude: [ ],
 
-
     // test results reporter to use
     // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
     reporters: ['progress'],
 
-
     // web server port
     port: 9876,
 
-
     // enable / disable colors in the output (reporters and logs)
     colors: true,
 
-
     // level of logging
     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
     logLevel: config.LOG_INFO,
 
-
     // enable / disable watching file and executing tests whenever any file changes
-    autoWatch: true,
-
+    autoWatch: false,
 
     // Start these browsers, currently available:
     // - Chrome
@@ -55,15 +48,17 @@ module.exports = function(config) {
     // - Safari (only Mac)
     // - PhantomJS
     // - IE (only Windows)
-    browsers: ['Chrome', 'Firefox', 'PhantomJS'],
-
+    browsers: [
+      //'Chrome',
+      //,'Firefox'
+      'PhantomJS'
+    ],
 
     // If browser does not capture in given timeout [ms], kill it
     captureTimeout: 60000,
 
-
     // Continuous Integration mode
     // if true, it capture browsers, run tests and exit
-    singleRun: false
+    singleRun: true,
   });
 };

package.json

@@ -25,9 +25,9 @@
     "karma-phantomjs-launcher": "~0.1.0",
     "karma": "~0.10.2",
     "grunt-karma": "~0.6.2",
-    "karma-chai": "0.0.1",
     "mocha": "~1.13.0",
     "karma-mocha": "~0.1.0",
-    "karma-sinon": "0.0.1"
+    "karma-sinon": "0.0.1",
+    "karma-chai-plugins": "~0.1.3"
   }
 }

sqwidget/app/component/core.coffee

@@ -0,0 +1,48 @@
+define ['underscore','backbone'], (_, Backbone) ->
+
+  class SqwidgetCore
+    constructor: () ->
+      _.extend(@, Backbone.Events)
+
+    registered: []
+
+    register: (el) ->
+      $this = $(el).addClass('sqwidget')
+      pkg = el: $this
+      _.extend(pkg, Backbone.Events)
+      @registered.push(pkg)
+      opts = @getWidgetParams($this)
+
+      throw new Error("No widget source") unless opts.url
+
+      # we're expecting an 'index.js' file inside every widget.
+      require ["#{opts.url}/js/index.js"], (module) =>
+        # 'settings' object defines all the settings that were passed in via the
+        # embed code.
+        widget = new module.Controller({settings: opts, sqwidget: @})
+        pkg.instance = widget
+        $this.html(widget.view.el)
+        # fire a 'rendered' method so that the widget can do any post-render
+        # operations that it needs to do.
+        widget.view.trigger("rendered")
+        pkg.trigger("rendered")
+        @trigger("rendered:#{widget.id || opts.url}")
+      return pkg
+
+
+    # returns an array of all the custom widget parameters. The new keys are
+    # lowercase concatenated attributes from the embed code with 'data-sqwidget-'
+    # removed.
+    #
+    # eg:
+    #     'data-sqwidget-color="#F00" -> `data['color'] = '#F00'`
+    #     'data-sqwidget-bg-color='#FFF' -> data['bgcolor'] = '#FFF'
+    #
+    getWidgetParams: ($el) ->
+      data = []
+      for key, val of $el.data()
+        key = key.replace("sqwidget", "").toLowerCase()
+        data[key || "url" ] = val
+      data
+
+

sqwidget/app/widget.coffee

@@ -1,6 +1,5 @@
 requirejs.config
   paths:
-    require: '../../lib/requirejs/require'
     jquery: '../../lib/jquery/jquery'
     underscore: '../../lib/underscore-amd/underscore'
     backbone: '../../lib/backbone-amd/backbone'
@@ -11,47 +10,13 @@ requirejs.config
 # The module that is loaded first
 requirejs [
   'jquery'
-  'underscore'
-  'backbone'
-  'require'
-  'ractive'
-], ($, _, Backbone, require, Ractive) ->
-  # the only global object that we will use.
-  Sqwidget = window.Sqwidget || {}
-
-  # add pub/sub to sqwidget. may be removed for a cleaner implementation
-  _.extend(Sqwidget, Backbone.Events)
+  'component/core'
+], ($, Core) ->
 
-  # Just loads all the widgets
-  # TODO: Remove jQuery.
-  $(document).ready () =>
+  # the only global object that we will use.
+  sqwidget = window.sqwidget = new Core()
+  # Iterate all elements and register
+  $(document).ready ->
     $('div[data-sqwidget]').each (index) ->
-      $this = $(this).addClass('sqwidget')
-      url = $this.data('sqwidget')
-      # we're expecting an 'index.js' file inside every widget.
-      # TODO: Use grunt to concat all the widget JS files into a single index.js
-      # file.
-      require ["#{url}/js/index.js"], (module) ->
-        params = getWidgetParams($this)
-        # 'settings' object defines all the settings that were passed in via the
-        # embed code.
-        widget = new module.Controller({settings: params})
-        $this.html(widget.view.el)
-        # fire a 'rendered' method so that the widget can do any post-render
-        # operations that it needs to do.
-        widget.view.trigger("rendered")
+      sqwidget.register(@)
 
-  # returns an array of all the custom widget parameters. The new keys are
-  # lowercase concatenated attributes from the embed code with 'data-sqwidget-'
-  # removed.
-  #
-  # eg:
-  #     'data-sqwidget-color="#F00" -> `data['color'] = '#F00'`
-  #     'data-sqwidget-bg-color='#FFF' -> data['bgcolor'] = '#FFF'
-  getWidgetParams = ($widget) ->
-    data = []
-    for key, val of $widget.data()
-      key = key.replace("sqwidget", "").toLowerCase()
-      if key != ""
-        data[key] = val
-    data

sqwidget/tests/spec/core.coffee

@@ -0,0 +1,16 @@
+define ['chai', 'jquery', 'component/core'], (chai, $, Core) ->
+  assert = chai.assert
+  describe 'Core', ->
+    sqwidget = new Core()
+    src = $("<div data-sqwidget='/base/widgets/test'></div>'")
+
+    describe '#register()', ->
+      widget = sqwidget.register(src)
+
+      it 'should register widget', ->
+        assert.lengthOf(sqwidget.registered, 1, "Registered module")
+
+      it 'should trigger rendered event', (done) ->
+        widget.on 'rendered', ->
+          assert.ok "Triggered event"
+          done()

sqwidget/tests/test-main.coffee

@@ -3,10 +3,11 @@ for file of window.__karma__.files
   if /spec\//.test(file)
     tests.push(file)
 
+
 requirejs.config
   baseUrl: "/base/compiled/sqwidget/js/"
   paths:
-    require: '../../../sqwidget/lib/requirejs/require'
+    chai: '../../../node_modules/karma-chai-plugins/node_modules/chai/chai'
     jquery: '../../../sqwidget/lib/jquery/jquery'
     underscore: '../../../sqwidget/lib/underscore-amd/underscore'
     backbone: '../../../sqwidget/lib/backbone-amd/backbone'

widgets/test/js

@@ -0,0 +1 @@
+../../compiled/widgets/js/test/src

widgets/test/src/index.coffee

@@ -0,0 +1,26 @@
+define [
+  'backbone'
+  'underscore'
+  #"css!./css/app.css"
+], (Backbone, _) ->
+  module = {views: {}}
+
+  class module.Controller
+    constructor: ({@settings} = {}) ->
+      @view = new module.views.Test({ @settings })
+      @view.render()
+
+  class module.views.Test extends Backbone.View
+    template: "<div>Test Widget</div>"
+    className: "sqwidget-hello-world"
+    constructor: ({@settings, @model} = {}) ->
+      super
+      @on('rendered', @rendered)
+
+    render: =>
+      @$el.html(@template)
+
+    rendered: =>
+      @$el.html(@settings.message).css("color", @settings.color)
+
+  module