brunch / brunch-with-chaplin Goto Github PK

Boilerplate application for Brunch with Chaplin framework included.

CoffeeScript 50.30% CSS 12.71% HTML 36.99%

brunch-with-chaplin's Introduction

Brunch

Web applications made easy. Since 2011.

Fast front-end web app build tool with simple declarative config and seamless incremental compilation for rapid development.

Usage

Install Brunch with a simple node.js package manager command:

npm install -g brunch

Create a new Brunch project: brunch new [--skeleton url]
- skeleton specifies a skeleton from which your application will be initialized. The default skeleton (dead-simple) doesn't have any opinions about frameworks or libraries.
- brunch.io/skeletons contains over 50 boilerplate projects, which you can use to init your app from.
Develop with Brunch: brunch watch --server
- tells Brunch to watch your project and incrementally rebuild it when source files are changed. The optional server flag launches a simple web server with push state support.
Deploy with Brunch: brunch build --production
- builds a project for distribution. By default it enables minification.

Learn

Visit brunch.io
Read brunch docs
Follow us on Twitter: @brunch
Ask questions on Stack Overflow with #brunch tag

Contributing

See the CONTRIBUTING.md document for more info on how to file issues or get your head into the Brunch's internals.

To install edge version (from GitHub master branch): npm install -g brunch/brunch
To enable debug mode, simply pass -d flag to any command like that: brunch build -d
To create your own plugin, check out our plugin boilerplate as a starting point.

License

See LICENSE file.

brunch-with-chaplin's People

Contributors

Stargazers

Watchers

Forkers

addyosmani noachic meshachcode andreasgerstmayr vip32 koide ddubyah jollyburnz danethurber lambder marsch sambernard steffenmllr rashfael bysoft bc-luke robmccreary lemieux mmerayo strogo jbhg iangreenleaf akre54 hasseily atefzed yavorsky evidenceprime fujimura kyanny kaihowl liluxdev tagoro9 web5design polymetis terrycy pombredanne kominami katt mgallo aheuermann kelleyk jackhung nickhudkins mskchaitanya kozborn arpithub rklancer davidey sizovs leito987 reubano asplogic szelga emminnn rambabumadineni khaccounts rainboyan romainaubry resilientred

brunch-with-chaplin's Issues

Latest change (commit 15c8ef6, "Update to latest Chaplin.") make skeleton stop working

My sandbox project is here. My collection view "services_view" won't render properly. If I reset my brunch-with-chaplin to commit 19689e "Update to brunch 1.2.", regenerate the code with it, add into my codes, the collection view renders properly.

another fork adding twitter bootstrap

Just FYI, I've created a fork of brunch-with-chaplin that adds twitter bootstrap. It's similar to brunch-with-chaplin-and-bootstrap, except that it includes the individual
bootstrap style and javascript plugin files so you can modify or omit ones you don't want.
brunch-with-chaplin-and-bootstrap includes only the compiled versions of those files.

Also, I've created a fork of the todos app that uses this skeleton. Most of the work involved incorporating chaplin. This is my first attempt at a brunch-with-chaplin app; I'd appreciate any feedback.

Note: there appears to a problem running brunch test on the app when package.json contains less-brunch in brunch 1.3.0. Not sure what causes it, but the problem goes away if I remove less-brunch. The problem appears to have been fixed in brunch 1.4.0-pre.

The bower integration doesnt work

A white page is returned from the vanilla cloned repository.

The Safari console shows the following error:

ReferenceError: Can't find variable: Chaplin app.js:97

I cloned the repository and ran "bower install". All the vendor scripts got installed to bower_components.

$ ls -a bower_components/
. .. backbone chaplin console-polyfill jquery lodash moment normalize-css

But the vendor.js hasnt packed the files under bower_components/*. I think brunch doesnt know how to include the files under bower_components because there are more then just .js files and there are also a lot of unneeded .js files like examples, tests and so on.

collection test generator

Collection = require 'models/base/collection'

is this really needed in collection-test generator?
I mean do ppl use it in their tests?

Please update chaplin-2dc3b2.coffee for skeleton.

First let me say that I very much appreciate the work you and the team are doing on this project.

I spend some time today tracking down the cause of Firefox doing full reloads for every hashUrl change. This was kind of strange since neither Chrome nor IE9 showed this issue. When I compared the chaplin-2dc3b2.coffee files in the ost.io project with the one found in my skeleton generated today I found several differences. Replacing the chaplin-2dc3b2.coffee from the skeleton with the one from ost.io solved the problem.

Please update the chaplin-2dc3b2.coffee in the skeleton.

Thanks, Bernd

676c676
ost.io:       window.scrollTo.apply window, @settings.scrollTo if @settings.scrollTo

---
brunch:       scrollTo @settings.scrollTo if @settings.scrollTo
1012c1012
ost.io:         if $el.is('input, textarea, select, button')

---
brunch:         if $el.is(':input')
1505,1508c1505,1506
ost.io:         if @useCssAnimation
ost.io:           $viewEl.addClass 'animated-item-view' 
ost.io:         else
ost.io:           $viewEl.css 'opacity', 0 if animationDuration

---
brunch:         $viewEl.addClass 'opacity-transitionable' if animationDuration
brunch:         $viewEl.css 'opacity', 0 if animationDuration
1540,1546c1538,1539
ost.io:         if @useCssAnimation
ost.io:           # Wait for DOM state change.
ost.io:           setTimeout =>
ost.io:             $viewEl.addClass 'animated-item-view-end'
ost.io:           , 0
ost.io:         else
ost.io:           $viewEl.animate {opacity: 1}, animationDuration

---
brunch:         $viewEl.addClass 'opacity-transitionable-end'
brunch:         $viewEl.animate {opacity: 1}, animationDuration

Simple LS version

Hello,

I find this example applications (brunch-with-chaplin and simple-coffee-skeleton) really interesting, and I'd like to know if you'd be interested in having these translated into LS. There's not much code, but that'd be nice to have them in ls. No need to translate anything.

Let me know !

remove template: template

Error when brunch t

Testing in browser works greatly now, but in cli:

chaplin $ brunch t     
18 Jun 07:51:41 - info: compiled in 773ms

module.js:337
    throw new Error("Cannot find module '" + request + "'");
    ^
Error: Cannot find module './buster-event-emitter'
    at Function._resolveFilename (module.js:337:11)
    at Function._load (module.js:279:25)
    at Module.require (module.js:359:17)
    at require (module.js:375:17)
    at /Users/paul/Development/brunch/chaplin/public/test/javascripts/test-vendor.js:8080:27
    at Object.<anonymous> (/Users/paul/Development/brunch/chaplin/public/test/javascripts/test-vendor.js:11521:16)
    at Module._compile (module.js:446:26)
    at Object..js (module.js:464:10)
    at Module.load (module.js:353:31)
    at Function._load (module.js:311:12)

@andihit any ideas?

Add view-template generator

RequireJS/AMD

This is not really an issue, but creating a branch with AMD implementation would be lovely and hows the generator for yeoman going.

Thanks

Is 0.5.0 is the latest version of Chaplin?

Check vendor/scripts/chaplin-0.5.0.coffee

Possible issue with the design of page_view?

Hi paulmillr,

Thanks for the great work with brunch, it saves me quite a lot time.

However, i have this bug:

I have a page view (which extends this code) containing a form for user input. Upon submit, the view will call its collection to create an item. The page view will re-render (the submit event is preventDefauted of course). However, when I do the submit the second or more time (with no page-reload), the page will not re-render.

I've tracked this issue down to initialize prototyped function. I think it has something to do with the rendered = no in the closure, because it causes the page view to re-render upon the first change event.

I don't know if it's with a design intention or not, but in cases like mine, the collection changes on every submit, I want it to re-render on every or none submits.

Please let me know your opinion.

Thanks!
Jimexist

Switching to Eco

Is there a special things I should know to safely switch to Eco template engine?

header_test.coffee global leak detected

I get this strange test failure when running the tests in browser.

Running brunch test however works correctly. Any idea?

return this.model = new Header();

Is mocha-1.4.2.js still up-to-date version?

On testing I got this error:

global leak detected: top
@http://localhost/test/javascripts/test-vendor.js:8302
@http://localhost/test/javascripts/test-vendor.js:8216
@http://localhost/test/javascripts/test-vendor.js:4912
@http://localhost/test/javascripts/test-vendor.js:8530
@http://localhost/test/javascripts/test-vendor.js:8163
@http://localhost/test/javascripts/test-vendor.js:8473
@http://localhost/test/javascripts/test-vendor.js:8519
next@http://localhost/test/javascripts/test-vendor.js:8401
@http://localhost/test/javascripts/test-vendor.js:8410
next@http://localhost/test/javascripts/test-vendor.js:8358
@http://localhost/test/javascripts/test-vendor.js:8378
@http://localhost/test/javascripts/test-vendor.js:9298

Looks like an issue mochajs/mocha#463

re-evaluate generators plural

update to use chaplin-boilerplate

Would be cool if this skeleton could be updated to use the chaplin-boilerplate at https://github.com/chaplinjs/chaplin-boilerplate

Loading Bootstrapped Models/Collections

I've been banging my head for hours trying to implement a bootstrapped collection.

<script>
  var accounts = new Backbone.Collection;
  accounts.reset(<%= @accounts.to_json %>);
  var projects = new Backbone.Collection;
  projects.reset(<%= @projects.to_json(:collaborators => true) %>);
</script>

From what I've read, I should bootstrap in the template by passing the collection and data from the view. I figured out how to pass data to the template but can't quite get everything to work. Using the todomvc setup I have something like this.

graph-hdr-view.coffee

View = require 'views/base/view'
template = require 'views/templates/graph-hdr'

module.exports = class HeaderView extends View
    autoRender: yes
    el: '#graph-header'
    template: template

    getTemplateData: =>
        graphs: [{title: 'E0009'}, {title: 'E0015'}, {title: 'E0019'}]
        collection: @collection

    initialize: ->
        super
        graphs = [{title: 'E0009'}, {title: 'E0015'}, {title: 'E0019'}]
        @delegate 'keypress', '#new-graph', @createOnEnter
        @delegate 'click', '#refresh', @refresh

    refresh: =>
        graphs = [{title: 'E0009'}, {title: 'E0015'}, {title: 'E0019'}]
        @publishEvent 'graphs:clear'
        (@collection.create graph for graph in graphs)

    createOnEnter: (event) =>
        ENTER_KEY = 13
        value = $(event.currentTarget).val().trim()
        return if event.keyCode isnt ENTER_KEY or not value
        @collection.create {title: value}
        @$('#new-graph').val ''

graph-hdr.hbs

<a class="btn btn-large" id="refresh"><i class="icon-refresh"></i> Refresh</a>
<input id="new-graph" placeholder="What needs to be done?" autofocus>
<script>
    \\ I have no idea what to put here... 
    \\ Have tried various combinations of {{graph}}, {{collection}}, toJSON, 
    \\ JSON.stringify, and with no luck 
</script>

Right now, I have to click the "refresh" button to load the collection but I want the collection to load automatically when I first render the app.

brunch build wont generate vendor.js for all bower_components

I just downloaded the templates and followed "npm install" and "bower install".
when I run "brunch build", it completes successfully but it will not generate vendor.js. I see only app.js. This is causing the app not to load because there are no Chaplin libs loaded.

I checked the config.coffee, I dont see any obvious things missing. Its the default one I am using. and it has this line "'javascripts/vendor.js': /^(bower_components|vendor)/". I was wondering why its not generating the vendor.js file.

Thanks
Ravi Ada

brunch new project with brunch-with-chaplin does not work (in windows)

I have created new project with command:

brunch n brunchChaplin -s git://github.com/paulmillr/brunch-with-chaplin.git

when I execute command:

brunch build

I have this error:

C:\Incubator\backbone\brunchChaplin>brunch build
18 Apr 03:04:33 - error: [Error: Cannot find module 'C:\Incubator\backbone\brunc
hChaplin/node_modules/javascript-brunch']

Reverse router lookups without events

When dealing with chaplinjs/chaplin#467, I was convinced for a while that our problems were stemming from this Handlebars helper:

Handlebars.registerHelper 'url', (routeName, params..., options) ->
  url = null
  mediator.publish '!router:reverse', routeName, params, (result) ->
    url = if result
      "/#{result}"
    else
      routeName
  url

That publish has an async call signature, and if it was async, this helper would not work.

It seems like an odd use of an event to me. We're not really triggering an event and waiting for it to be handled -- we're just asking the router to translate a name into a route. Could we have a way to ask the router directly, or would that violate the separation of concerns?

In our app, I refitted the helper like so:

Handlebars.registerHelper 'url', (routeName, params...) ->
  url = window.MyApp.router.reverse routeName, params
  "/#{url}"

Of course, this needs a global reference to the application:

# initialize.coffee
$ ->
  app = window.MyApp = new Application()

Thoughts?

Simple service provider example

Service providers are great.

But also at the same time it's not so obvious about how all that stuff works:

chaplin.js <-- session_controller.js <-- service_provider.js <-- facebook.js <-- http://connect.facebook.net/en_US/all.js

Should I actually follow this way and code own service provider for my API, or should I just reject all that stuff and rewrite session_controller.js with simple basics?
It would be awesome if you guys provide some simple example of custom service provider for Rails app where session data stores in Cookie (this is just how it works in most Rails apps).

Thanks.

Wrong path on generators/controller_test/controller_test.coffee.hbs

Hey Paul, sorry for not doing a pull request on this easy thing, but I can push things to github from this connection.

The template has a require for models/{{name}} instead of controllers/{{name}}.

Assumption Of Chaplin Directory Structure

You might want to reconsider just stating to copy chaplin.js into the vendor directory. Although it's nice that Brunch has gone ahead and wrapped the requirement blocks around the modules and has turned chaplin into 1 file, you have know the path of the file as it existed in pieces since require names modules based upon directory structure.

Catch params

Hi,

UPDATE

Uhm.. I found out.. Simple adding params to the function was enough.. Like I said: stupid question..

I'm fairly new to Brunch and Chaplin, so please forgive me if I ask stupid questions :) I'v been looking on the internet for a few hours now and I can't find any answer on my very simple questions ( I think they are simple ).

I want to catch my (url) params, but I can't figure out how I can catch them. It's just some basic routing, to figure out how everything works, so I hope you guys can help me out.

What I'm trying to do, is to get the id ( localhost:3333/project/123 ) to get project 123 out of the database ( will make a call to an api ), but I can't figure out how to get '123'.

These are my routes and controller.

module.exports = (match) ->

    # Base routes
    match '', 'home#index'
    match 'project/:id', 'project#index'
    match 'search/:query', 'project#search'

    # Project specific routes
    match 'new-project', 'project#new'
    match 'all-projects', 'project#overview'

Controller = require 'controllers/base/controller'
ProjectView = require 'views/project-view'

module.exports = class ProjectsController extends Controller
    index: ->
            # console.log params
            @view = new ProjectView region: 'main'

can't load core nodejs modules

When I try the following code in a my app as nodify.coffee...

vm = require 'vm'
fs = require 'fs'

module.exports = (path, context) ->
  data = fs.readFileSync(path)
  vm.runInNewContext(data, context, path)

I get an error Error: Cannot find module "vm"

$ echo $NODE_PATH
/opt/local/lib:/opt/local/lib/node_modules:

$ npm ls -g
/opt/local/lib

$ npm ls
[email protected]

$ coffee
coffee> vm = require 'vm'
{ [Function: Script]
  Script: [Circular],
  createScript: [Function],
  createContext: [Function],
  runInContext: [Function],
  runInThisContext: [Function],
  runInNewContext: [Function] }
coffee> 

$ node -pe "var vm = require('vm');"
undefined

mac osx 10.7.5
brunch 1.5.3
node v0.8.9
npm 1.1.61

Any idea what im doing wrong??

Remove bootstrap, include html5boilerplate css

Bootstrap can be included by user if needed, as always.

HTML5BP 4.0.0 upgrade

Any plans to upgrade to HTML5BP 4.0.0?

Not loading app when accessing public/index.html directly

Hi, I'm trying to build an application with brunch using chaplin skeleton. When I run 'brunch w -s', everything works fine! My application is loaded and I can navigate.

But, when I run 'brunch build' and open the generated production project at public dir, the browser shows only a blank screen.

I could see that javascripts are been loaded, but the require('initialize') function call is not working.

Please, help me to fix that.

How do i update those libraries in /vendor/?

The library (chaplin,jquery, underscore) in vendor/ updates frequently, that's nice, but is there a way to update them automatically? i can't find a way to do this in https://brunch.readthedocs.org/

Remove application.coffee

Bootstrap rendering problem

Hello, I'm using the out-of-the box brunch with chaplin, I removed the box-sizing: borderbox from application.styl but when I try to render an input text box near a button, it looks odd, do you know if this is because of some css in brunch-with-chaplin?

http://imgur.com/Bf6G3

Uncaught TypeError: Object #<Object> has no method 'merge'

on line 481 app.js

helpers = this.merge(helpers, Handlebars.helpers); data = data || {};

reproduce

git clone https://github.com/paulmillr/brunch-with-chaplin.git
cd brunch-with-chaplin
npm install brunch
npm install
./node_modules/.bin/brunch watch --server
#04 Jun 11:10:30 - info: application started on http://localhost:3333/
#04 Jun 11:10:31 - info: compiled in 1463ms

Chaplinjs's channel on Freenode

Guys it would be awesome if you create #chaplinjs channel on irc.freenode.net to make chatting more realtime and convenient.

Need more convention over configuration

If view has no template param, it should auto-require ./templates/#{view name}. Of course, with convention TweetView -> ./templates/tweet.
Same with collections: Tweets -> require './tweet'.

maybe something else too

Im sti

Im still abit of fuzzy in the head after easter holidays so Im calling out here for help :)

How do you guys use the new reverse helpers in Chaplin 0.8.1 with Handlebars?

{{#url_for "like" "105"}}{{/url}} doesnt work because you need to pass in the argument as an object. {{#url_for "like" id:105}}{{/url}} or something like that.

Yuck I need to get rid of handlebars.

Wrong path on generators/controller_test/controller_test.coffee.hbs

Hey Paul, sorry for not doing a pull request on this easy thing, but I can push things to github from this connection.

The template has a require for models/{{name}} instead of controllers/{{name}}.

`brunch new` doesn't install same skeleton version as what is on github

It uses old versions in the vendor dir. brunch new <project> -s https://github.com/paulmillr/brunch-with-chaplin.git pulls most recent skeleton.

Question: Routing Changes

Hi,

I switched to today's code base and looks like my routing hashes have been removed. Are there any changes are setup needed to get the routing corrected? How to I setup to get the hashes back?

in my route file:
match 'test', 'test#index'

and in my template i have a link
test

being served by single index.html file
http://localhost:3000/index.html

Now when i click on the link i get redirected to
http://localhost:3000/test

instead of
http://localhost:3000/index.html#test

Order of the javascript joins

Why does brunch.io doesnt look for bower.json files and check the dependencies, and loads the dependencies first and afterwards the component. At the moment i cant see a way to join the vendor/bower_components files in the needed order together.

Cannot find module "underscore"

My actions:

brunch new --skeleton gh:paulmillr/brunch-with-chaplin
npm install
bower install
brunch watch --server

All like in your instructions, but i see this error:

Than i try to put bower's packages into vendor directory:

cp -r bower_components/* vendor/

And now "Cannot find module "underscore":

When to update to latest chaplin?

The version of chaplin here is somewhat different than the latest version (I'm sure you're aware). Any idea when you anticipate updating to the latest version? I'm trying to decide if I should download the latest version of chaplin and remove the AMD headers and update brunch-with-chaplin to work with it, in which case I could issue a pull request when I've finished. Otherwise if you're planning to do it soon, I can wait.

Bower problem: status code of git: 128

Hello.
Something wrong with bower.json:

There were errors, here's a summary of them:
- console-polyfill status code of git: 128
fatal: read error: Connection reset by peer

- chaplin status code of git: 128
fatal: read error: Connection reset by peer
fatal: early EOF
fatal: index-pack failed

- jquery status code of git: 128
fatal: read error: Connection reset by peer

- lodash status code of git: 128
- normalize-css status code of git: 128
fatal: read error: Connection reset by peer

- moment status code of git: 128
fatal: The remote end hung up unexpectedly
fatal: early EOF
fatal: index-pack failed

Service provider [I would really appreciate your help - not really an issue]

Please pardon my ignorance, but how does the following snippet of code work. I have a working provider based on my own api and i dont really understand how the following code would break as soon as a session is retrieved.

getSession: ->
@loadServiceProviders()
for name, serviceProvider of SessionController.serviceProviders
serviceProvider.done serviceProvider.getLoginStatus

I still dont grasp fully how jquery defers work, i know that the done list is only called after the resolve function. I really want to understand this and i'm sure there are better js programmer than i am (i'm mostly backend).

Please do help

initComposer

application.coffee needs to run initComposer

Switch to relative paths in generators

Can't find underscore.js

When creating a brand new app, the javascript will fail on the client browser with:

can't find module "underscore"

even though underscore-1.4.4.js is there, and embedded correctly within vendor.js.

I'm looking to see where the difference lies between Chaplin 0.7 and 0.8.1, because the old version didn't exhibit that bug.

Issue with CollectionView?

Hi Paul,

Please see this screen shot (easier to provide all info than pasting):
http://i47.tinypic.com/35buyhz.jpg

Do you have any idea what could be causing the "Uncaught TypeError: View#modelBind: no model or collection set "? The controller is receiving the collection fine.

Much thanks,

-Brian

Brunch-with-chaplin in JavaScript

Do you have this project skeleton in pure JavaScript?

Another error when brunch t?

When running brunch test on a new brunch project (created today), I get

In order to run tests in a CLI/jsdom environment, you have to install jsdom.
Enter the following in your terminal (in the current directory):

npm install jsdom

After installing jsdom (version 0.2.14) and re-running brunch test, I get

/home/dallan/recipes/brunch-chaplin/node_modules/jsdom/lib/jsdom.js:171
    features   = JSON.parse(JSON.stringify(window.document.implementation._fea
                                                          ^
TypeError: Cannot read property 'implementation' of undefined
    at /home/dallan/recipes/brunch-chaplin/node_modules/jsdom/lib/jsdom.js:171:59
    at Object.env (/home/dallan/recipes/brunch-chaplin/node_modules/jsdom/lib/jsdom.js:262:5)
    at /usr/local/lib/node_modules/brunch/lib/commands/test.js:85:28
    at /usr/local/lib/node_modules/brunch/node_modules/async/lib/async.js:190:13
    at /usr/local/lib/node_modules/brunch/node_modules/async/lib/async.js:94:25
    at /usr/local/lib/node_modules/brunch/node_modules/async/lib/async.js:187:17
    at [object Object].<anonymous> (fs.js:115:5)
    at [object Object].emit (events.js:64:17)
    at afterRead (fs.js:1117:12)
    at Object.wrapper [as oncomplete] (fs.js:254:17)

Any ideas? Tests are working fine in the browser.