Update Brunch with Chaplin.

1. Add Bower integration. Since Brunch automatically concatenates all Bower stuff, we don’t need bower_components in repository (added to .gitignore, except of todomvc-common). 2. Update Brunch to 1.7. * Added automatic source maps generation, source maps are in repo too. 3. Update Chaplin to 0.10. * Remove `chaplin` module, switch to global variable. * Switch to new declarative events format. * Switch to controller compositions instead of static controllers. * Remove `application` since Chaplin now has this functionality by default.
passy · Jul 27, 2013 · b4e7bc9 · b4e7bc9
1 parent 87c5b34
commit b4e7bc9
Show file tree

Hide file tree

Showing 39 changed files with 15,693 additions and 8,813 deletions.
diff --git a/labs/dependency-examples/chaplin-brunch/.gitignore b/labs/dependency-examples/chaplin-brunch/.gitignore
@@ -1,3 +1,6 @@
+bower_components/
+!bower_components/todomvc-common
+
 # NPM packages folder.
 node_modules/
 

diff --git a/labs/dependency-examples/chaplin-brunch/app/application.coffee b/labs/dependency-examples/chaplin-brunch/app/application.coffee
@@ -1,9 +1,4 @@
-Chaplin = require 'chaplin'
 mediator = require 'mediator'
-routes = require 'routes'
-HeaderController = require 'controllers/header-controller'
-FooterController = require 'controllers/footer-controller'
-TodosController = require 'controllers/todos-controller'
 Todos = require 'models/todos'
 Layout = require 'views/layout'
 
@@ -13,48 +8,13 @@ module.exports = class Application extends Chaplin.Application
   # “Controller title – Site title” (see Layout#adjustTitle)
   title: 'Chaplin • TodoMVC'
 
-  initialize: ->
-    super
-
-    # Initialize core components
-    @initDispatcher controllerSuffix: '-controller'
-    @initLayout()
-    @initMediator()
-
-    # Application-specific scaffold
-    @initControllers()
-
-    # Register all routes and start routing
-    @initRouter routes, pushState: no
-    # You might pass Router/History options as the second parameter.
-    # Chaplin enables pushState per default and Backbone uses / as
-    # the root per default. You might change that in the options
-    # if necessary:
-    # @initRouter routes, pushState: false, root: '/subdir/'
-
-    # Freeze the application instance to prevent further changes
-    Object.freeze? this
-
   # Override standard layout initializer
   # ------------------------------------
   initLayout: ->
     # Use an application-specific Layout class. Currently this adds
     # no features to the standard Chaplin Layout, it’s an empty placeholder.
     @layout = new Layout {@title}
 
-  # Instantiate common controllers
-  # ------------------------------
-  initControllers: ->
-    # These controllers are active during the whole application runtime.
-    # You don’t need to instantiate all controllers here, only special
-    # controllers which do not to respond to routes. They may govern models
-    # and views which are needed the whole time, for example header, footer
-    # or navigation views.
-    # e.g. new NavigationController()
-    new HeaderController()
-    new FooterController()
-    new TodosController()
-
   # Create additional mediator properties
   # -------------------------------------
   initMediator: ->
@@ -64,4 +24,4 @@ module.exports = class Application extends Chaplin.Application
     mediator.todos = new Todos()
     mediator.todos.fetch()
     # Seal the mediator
-    mediator.seal()
+    super
diff --git a/labs/dependency-examples/chaplin-brunch/app/assets/index.html b/labs/dependency-examples/chaplin-brunch/app/assets/index.html
@@ -3,22 +3,14 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <title>Chaplin & Brunch • TodoMVC</title>
-  <link rel="stylesheet" href="../../../../assets/base.css">
+  <title>Chaplin &amp; Brunch • TodoMVC</title>
+  <link rel="stylesheet" href="../bower_components/todomvc-common/base.css">
+  <link rel="stylesheet" href="../bower_components/todomvc-common/base.js">
   <!--[if IE]>
   <script src="../../../assets/ie.js"></script>
   <![endif]-->
-  <link rel="stylesheet" href="stylesheets/app.css">
-
-  <!-- Usually all these files are concatenated automatically
-  by brunch and you need just to import `vendor.js` -->
-  <script src="../../../../assets/base.js"></script>
-  <script src="../../../../assets/jquery.min.js"></script>
-  <script src="../../../../assets/lodash.min.js"></script>
-  <script src="../../../../assets/handlebars.min.js"></script>
-
-  <script src="javascripts/vendor.js"></script>
-  <script src="javascripts/app.js"></script>
+  <link rel="stylesheet" href="app.css">
+  <script src="app.js"></script>
   <script>require('initialize');</script>
 </head>
 <body>

diff --git a/labs/dependency-examples/chaplin-brunch/app/controllers/base/controller.coffee b/labs/dependency-examples/chaplin-brunch/app/controllers/base/controller.coffee
@@ -1,3 +1,12 @@
-Chaplin = require 'chaplin'
+HeaderView = require 'views/header-view'
+FooterView = require 'views/footer-view'
+TodosView = require 'views/todos-view'
+mediator = require 'mediator'
 
 module.exports = class Controller extends Chaplin.Controller
+  beforeAction: ->
+    @compose 'footer', ->
+      params = collection: mediator.todos
+      @header = new HeaderView params
+      @footer = new FooterView params
+      @todos = new TodosView params
diff --git a/labs/dependency-examples/chaplin-brunch/app/controllers/footer-controller.coffee b/labs/dependency-examples/chaplin-brunch/app/controllers/footer-controller.coffee
diff --git a/labs/dependency-examples/chaplin-brunch/app/controllers/header-controller.coffee b/labs/dependency-examples/chaplin-brunch/app/controllers/header-controller.coffee
diff --git a/labs/dependency-examples/chaplin-brunch/app/controllers/index-controller.coffee b/labs/dependency-examples/chaplin-brunch/app/controllers/index-controller.coffee
@@ -1,7 +1,5 @@
-Controller = require 'controllers/base/controller'
+Controller = require './base/controller'
 
 module.exports = class IndexController extends Controller
-  title: 'Todo list'
-
-  list: (options) ->
-    @publishEvent 'todos:filter', options.filterer?.trim() ? 'all'
+  list: (params) ->
+    @publishEvent 'todos:filter', params.filterer?.trim() ? 'all'
diff --git a/labs/dependency-examples/chaplin-brunch/app/controllers/todos-controller.coffee b/labs/dependency-examples/chaplin-brunch/app/controllers/todos-controller.coffee
diff --git a/labs/dependency-examples/chaplin-brunch/app/initialize.coffee b/labs/dependency-examples/chaplin-brunch/app/initialize.coffee
@@ -1,6 +1,7 @@
 Application = require 'application'
+routes = require 'routes'
 
 # Initialize the application on DOM ready event.
 $ ->
-  app = new Application()
-  app.initialize()
+  new Application
+    controllerSuffix: '-controller', pushState: no, routes: routes
diff --git a/labs/dependency-examples/chaplin-brunch/app/lib/support.coffee b/labs/dependency-examples/chaplin-brunch/app/lib/support.coffee
diff --git a/labs/dependency-examples/chaplin-brunch/app/lib/utils.coffee b/labs/dependency-examples/chaplin-brunch/app/lib/utils.coffee
@@ -1,5 +1,3 @@
-Chaplin = require 'chaplin'
-
 # Application-specific utilities
 # ------------------------------
 

diff --git a/labs/dependency-examples/chaplin-brunch/app/lib/view-helper.coffee b/labs/dependency-examples/chaplin-brunch/app/lib/view-helper.coffee
@@ -1,5 +1,5 @@
 mediator = require 'mediator'
-utils = require 'chaplin/lib/utils'
+utils = require './utils'
 
 # Application-specific view helpers
 # ---------------------------------

diff --git a/labs/dependency-examples/chaplin-brunch/app/mediator.coffee b/labs/dependency-examples/chaplin-brunch/app/mediator.coffee
@@ -1 +1 @@
-module.exports = require('chaplin').mediator
+module.exports = Chaplin.mediator
diff --git a/labs/dependency-examples/chaplin-brunch/app/models/base/collection.coffee b/labs/dependency-examples/chaplin-brunch/app/models/base/collection.coffee
@@ -1,4 +1,3 @@
-Chaplin = require 'chaplin'
 Model = require 'models/base/model'
 
 module.exports = class Collection extends Chaplin.Collection

diff --git a/labs/dependency-examples/chaplin-brunch/app/models/base/model.coffee b/labs/dependency-examples/chaplin-brunch/app/models/base/model.coffee
@@ -1,5 +1,3 @@
-Chaplin = require 'chaplin'
-
 module.exports = class Model extends Chaplin.Model
   # Mixin a synchronization state machine
   # _(@prototype).extend Chaplin.SyncMachine
diff --git a/labs/dependency-examples/chaplin-brunch/app/views/base/collection-view.coffee b/labs/dependency-examples/chaplin-brunch/app/views/base/collection-view.coffee
@@ -1,4 +1,3 @@
-Chaplin = require 'chaplin'
 View = require 'views/base/view'
 
 module.exports = class CollectionView extends Chaplin.CollectionView

diff --git a/labs/dependency-examples/chaplin-brunch/app/views/base/view.coffee b/labs/dependency-examples/chaplin-brunch/app/views/base/view.coffee
@@ -1,4 +1,3 @@
-Chaplin = require 'chaplin'
 require 'lib/view-helper' # Just load the view helpers, no return value
 
 module.exports = class View extends Chaplin.View

diff --git a/...chaplin-brunch/public/stylesheets/app.css → ...ples/chaplin-brunch/app/views/filters.css b/...chaplin-brunch/public/stylesheets/app.css → ...ples/chaplin-brunch/app/views/filters.css
diff --git a/labs/dependency-examples/chaplin-brunch/app/views/footer-view.coffee b/labs/dependency-examples/chaplin-brunch/app/views/footer-view.coffee
@@ -4,26 +4,26 @@ template = require 'views/templates/footer'
 module.exports = class FooterView extends View
   autoRender: yes
   el: '#footer'
+  events:
+    'click #clear-completed': 'clearCompleted'
+  listen:
+    'todos:filter mediator': 'updateFilterer'
+    'all collection': 'renderCounter'
   template: template
 
-  initialize: ->
-    super
-    @subscribeEvent 'todos:filter', @updateFilterer
-    @modelBind 'all', @renderCounter
-    @delegate 'click', '#clear-completed', @clearCompleted
-
-  render: =>
+  render: ->
     super
     @renderCounter()
 
-  updateFilterer: (filterer) =>
+  updateFilterer: (filterer) ->
+    console.log 'updateFilterer'
     filterer = '' if filterer is 'all'
     @$('#filters a')
       .removeClass('selected')
       .filter("[href='#/#{filterer}']")
       .addClass('selected')
 
-  renderCounter: =>
+  renderCounter: ->
     total = @collection.length
     active = @collection.getActive().length
     completed = @collection.getCompleted().length

diff --git a/labs/dependency-examples/chaplin-brunch/app/views/header-view.coffee b/labs/dependency-examples/chaplin-brunch/app/views/header-view.coffee
@@ -4,15 +4,13 @@ template = require 'views/templates/header'
 module.exports = class HeaderView extends View
   autoRender: yes
   el: '#header'
+  events:
+    'keypress #new-todo': 'createOnEnter'
   template: template
 
-  initialize: ->
-    super
-    @delegate 'keypress', '#new-todo', @createOnEnter
-
-   createOnEnter: (event) =>
-     ENTER_KEY = 13
-     title = $(event.currentTarget).val().trim()
-     return if event.keyCode isnt ENTER_KEY or not title
-     @collection.create {title}
-     @$('#new-todo').val ''
+  createOnEnter: (event) =>
+    ENTER_KEY = 13
+    title = $(event.currentTarget).val().trim()
+    return if event.keyCode isnt ENTER_KEY or not title
+    @collection.create {title}
+    @$('#new-todo').val ''
diff --git a/labs/dependency-examples/chaplin-brunch/app/views/layout.coffee b/labs/dependency-examples/chaplin-brunch/app/views/layout.coffee
@@ -1,10 +1,7 @@
-Chaplin = require 'chaplin'
-
 # Layout is the top-level application ‘view’.
 module.exports = class Layout extends Chaplin.Layout
-  initialize: ->
-    super
-    @subscribeEvent 'todos:filter', @changeFilterer
+  listen:
+    'todos:filter mediator': 'changeFilterer'
 
   changeFilterer: (filterer = 'all') ->
     $('#todoapp').attr 'class', "filter-#{filterer}"
diff --git a/labs/dependency-examples/chaplin-brunch/app/views/todo-view.coffee b/labs/dependency-examples/chaplin-brunch/app/views/todo-view.coffee
@@ -2,18 +2,19 @@ View = require 'views/base/view'
 template = require 'views/templates/todo'
 
 module.exports = class TodoView extends View
+  events:
+    'click .toggle': 'toggle'
+    'dblclick label': 'edit'
+    'keypress .edit': 'save'
+    'blur .edit': 'save'
+    'click .destroy': 'destroy'
+
+  listen:
+    'change model': 'render'
+
   template: template
   tagName: 'li'
 
-  initialize: ->
-    super
-    @modelBind 'change', @render
-    @delegate 'click', '.destroy', @destroy
-    @delegate 'dblclick', 'label', @edit
-    @delegate 'keypress', '.edit', @save
-    @delegate 'click', '.toggle', @toggle
-    @delegate 'blur', '.edit', @save
-
   render: =>
     super
     # Reset classes, re-add the appropriate ones.

diff --git a/labs/dependency-examples/chaplin-brunch/app/views/todos-view.coffee b/labs/dependency-examples/chaplin-brunch/app/views/todos-view.coffee
@@ -4,16 +4,15 @@ TodoView = require 'views/todo-view'
 
 module.exports = class TodosView extends CollectionView
   el: '#main'
+  events:
+    'click #toggle-all': 'toggleCompleted'
   itemView: TodoView
   listSelector: '#todo-list'
+  listen:
+    'all collection': 'renderCheckbox'
+    'todos:clear mediator': 'clear'
   template: template
 
-  initialize: ->
-    super
-    @subscribeEvent 'todos:clear', @clear
-    @modelBind 'all', @renderCheckbox
-    @delegate 'click', '#toggle-all', @toggleCompleted
-
   render: =>
     super
     @renderCheckbox()

diff --git a/labs/dependency-examples/chaplin-brunch/bower.json b/labs/dependency-examples/chaplin-brunch/bower.json
@@ -2,6 +2,25 @@
   "name": "todomvc-chaplin-brunch",
   "version": "0.0.0",
   "dependencies": {
-    "todomvc-common": "~0.1.6"
+    "todomvc-common": "~0.1.6",
+    "chaplin": "~0.10.0",
+    "underscore": "~1.4.4",
+    "backbone.localStorage": "~1.1.0",
+    "jquery": "~2.0.0"
+  },
+  "overrides": {
+    "todomvc-common": {
+      "main": "bg.png"
+    },
+    "backbone": {
+      "main": "backbone.js",
+      "dependencies": {
+        "underscore": "*",
+        "jquery": "*"
+      }
+    },
+    "underscore": {
+      "main": "underscore.js"
+    }
   }
-}
+}
diff --git a/labs/dependency-examples/chaplin-brunch/bower_components/todomvc-common/base.js b/labs/dependency-examples/chaplin-brunch/bower_components/todomvc-common/base.js
@@ -136,10 +136,6 @@
 	}
 
 	function getFile(file, callback) {
-		if (!location.host) {
-			return console.info('Miss the info bar? Run TodoMVC from a server to avoid a cross-origin error.');
-		}
-
 		var xhr = new XMLHttpRequest();
 
 		xhr.open('GET', findRoot() + file, true);