Spree master assets namespacing part 2

When you are working with the latest master of Spree, there is a breaking change committed here .

The source for this change was this (closed and fixed) issue #4050.

When I was working on the spree_auth_devise gem to add some promotion code I was getting strange and unexpected rspec failures like this:

Accounts editing should be able to edit an admin user  
  Failure/Error: visit spree.login_path
  ActionView::Template::Error:
   couldn't find file 'spree/frontend/spree_auth'    

WTFBBQ? That was my first response to be honest. Since I keep my forked repository of Spree in sync on a daily basis (and I read up on the commits) I found the culprit pretty quickly. Ryan already mentioned it in his commit:

"This definitely breaks existing behaviour."

The assets are scoped in backend and frontend and the manifest (js and css) files are named equal to the extension name. So let's have a spree_brands extension as a sample to show how the javascripts and stylesheets are organized.

app/assets

javascripts

app/assets/javascripts/spree/backend/spree_brands.js  
app/assets/javascripts/spree/frontend/spree_brands.js  

The javascript manifest files for this extension are scoped for the frontend and backend. The naming of the manifest files is equal to the extension name. When this PR get's merged in master you will see this content in those files: (sample is for the backend scope)

// Placeholder manifest file.
// the installer will append this file to the app vendored assets here: vendor/assets/javascripts/spree/backend/all.js'

You can add all the loading in this file to get your coffeescript files for this extension in the Spree storefront.

stylesheets

app/assets/stylesheets/spree/backend/spree_brands.css  
app/assets/stylesheets/spree/frontend/spree_brands.css  

For the stylesheets it is the same, they are scoped within the spree namespace and divided again by frontend and backend. These files are also manifest files, so you can specifiy all the specific style for your extension in these files.

A sample stylesheet manifest file will look like this:

/*
Placeholder manifest file.  
the installer will append this file to the app vendored assets here: 'vendor/assets/stylesheets/spree/backend/all.css'  
*/

lib/generators/spreebrands/install/installgenerator.rb

The installer for the extension needs install the extension specific manifest files into the vendored assets manifest within your Spree storefront. To make that happen you need to make sure that the add_javascripts and the add_stylesheets methods are updated to reflect the samples below. The updated extension generator is in the aforementioned pull request.

def add_javascripts  
  append_file 'vendor/assets/javascripts/spree/frontend/all.js', "//= require spree/frontend/spree_brands.js\n"
  append_file 'vendor/assets/javascripts/spree/backend/all.js', "//= require spree/backend/spree_brands.js\n"
end  
def add_stylesheets  
  inject_into_file 'vendor/assets/stylesheets/spree/frontend/all.css', " *= require spree/frontend/spree_brands.css\n", :before => /\*\//, :verbose => true
  inject_into_file 'vendor/assets/stylesheets/spree/backend/all.css', " *= require spree/backend/spree_brands.css\n", :before => /\*\//, :verbose => true
end  

When you don't have any assets for the frontend or backend, you can simply remove the specific lines from the install_generator but don't forget to add them back in when you do need them later one. :)

Meet us at SpreeConf NY 2014