CabezaDeTermo::Assets::Library

A framework to declare bundles of assets in your application and collect them resolving the dependencies. This framework does not publish, compile, nor transform the assets in any way. All it does is resolve the dependencies of the assets and collect them into a collection. This collection of assets can then be included in your template, or passed to another framework to transform or compile the assets.

This framework was written to be used in Hanami applications, but it can be used anywhere actually.

Status

Gem Version Build Status Coverage Status

Installation

Add this line to your application's Gemfile:

gem 'assets-library-for-hanami', '~> 3.0'

And then execute:

$ bundle

Or install it yourself as:

$ gem install assets-library-for-hanami

Using this framework in an Hanami application

To define the assets bundles, require these files in your Hanami application.rb file:

require 'cabeza-de-termo/assets/library'
require 'cabeza-de-termo/assets/rendering-scope-adaptors/hanami-rendering-scope'

and then add the CabezaDeTermo::Assets::Library.definition to your Application class:

module Web
    class Application < Hanami::Application
        configure do
            ...

            # Define the asset bundles
            CabezaDeTermo::Assets::Library.definition do
                # Css
                bundle :'bootstrap-css' do
                    include '/vendor/bootstrap/css/bootstrap.min.css' # include this asset in the bundle
                end

                # Js
                bundle :jquery do
                    include '/vendor/jquery/jquery-1.11.3.min.js'
                end

                bundle :'bootstrap-js' do
                    require :jquery             # declare that this bundle depends on the :jquery bundle
                    include '/vendor/bootstrap/js/bootstrap.min.js'
                end
            end

            ...
        end
    end
end

To define the assets to be included in the layout, you can add these methods to your Web::Views::ApplicationLayout class:

module Web
    module Views
            class ApplicationLayout
                ...
                # Define the stylesheet for this layout
                def layout_stylesheets(assets_collector)
                    assets_collector.require :'bootstrap-css'   # include the bundle :'bootstrap-css'
                    assets_collector.include 'layout.css'           # include the asset layout.css'
                end

                # Define the javascripts for this layout
                def layout_javascripts(assets_collector)
                    assets_collector.require :'bootstrap-js'
                end
                ...
            end
        end
end

To define the assets to be included in the view, you can add these methods to your Web::Views::SomeView class:

module Web::Views::LandingPage
  class Index
        include Web::View

        # Define the stylesheet for this view
        def view_stylesheets(assets_collector)
            assets_collector.include 'landing-page.css'
        end

        # Define the javascripts for this view
        def view_javascripts(assets_collector)
            assets_collector.include 'landing-page.js'
        end
  end
end

To collect the assets, call this from your template or helper:

<% CabezaDeTermo::Assets::HanamiRenderingScope.each_stylesheet_from(self) do |css| %>
    <%= "<link href=\"#{css}\" rel=\"stylesheet\" type=\"text/css\">" %>
<% end %>

<% CabezaDeTermo::Assets::HanamiRenderingScope.each_javascript_from(self) do |js| %>
    <%= "<script src=\"#{js}\" type=\"text/javascript\"></script>" %>
<% end %>

Using this framework in another application

To define the bundles, require this file:

require 'cabeza-de-termo/assets/library'

and then add the CabezaDeTermo::Assets::Library.definition:

# Define the asset bundles
CabezaDeTermo::Assets::Library.definition do
    # Css
    bundle :'bootstrap-css' do
        include '/vendor/bootstrap/css/bootstrap.min.css' # include this asset in the bundle
    end

    # Js
    bundle :jquery do
        include '/vendor/jquery/jquery-1.11.3.min.js'
    end

    bundle :'bootstrap-js' do
        require :jquery                         # declare that this bundle depends on the :jquery bundle
        include '/vendor/bootstrap/js/bootstrap.min.js'
    end
end

Then define an object that responds the methods:

class OtherFrameworkRenderingScope
    # Delegate the :collect_stylesheets_with method to the actual view
    def collect_stylesheets_with(assets_collector)
        ...
    end

    # Delegate the :collect_javascripts_with method to the actual view
    def collect_javascripts_with(assets_collector)
        ...
    end
end

You can see the CabezaDeTermo::Assets::HanamiRenderingScope class as an example. Then pass that rendering_scope to CabezaDeTermo::Assets::Library to collect the assets for a view:

<%= CabezaDeTermo::Assets::Library.stylesheets_for rendering_scope %>
<%= CabezaDeTermo::Assets::Library.javascripts_for rendering_scope %>

Running the tests

  • bundle install
  • bundle exec rspec

Contributing

  1. Fork it ( https://github.com/cabeza-de-termo/assets-library-for-hanami/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request