Use penthouse from npm

1. Install npm dependencies on Gem.pre_install.
2. Use a penthouse wrapper script.
3. Remove phantomjs ruby dependency and the vendored
   version of penthouse.
4. Add a basic test.

Refs #5

Author: glebm

.codeclimate.yml

@@ -1,4 +1,2 @@
 languages:
   Ruby: true
-exclude_paths:
-  - lib/penthouse/penthouse.js

.gitignore

@@ -17,3 +17,5 @@ test/version_tmp
 tmp
 
 .DS_Store
+/node_modules/
+.rspec_status

Gemfile

@@ -1,4 +1,17 @@
-# A sample Gemfile
-source "https://rubygems.org"
+source 'https://rubygems.org'
 
-gem 'rubocop', require: false
+gemspec
+
+group :development, :test do
+  gem 'byebug', platform: [:ruby], require: false
+  gem 'rubocop', require: false
+end
+
+# HACK: npm install on bundle
+unless $npm_commands_hook_installed # rubocop:disable Style/GlobalVars
+  Gem.pre_install do |installer|
+    next true unless installer.spec.name == 'critical-path-css-rails'
+    require_relative './ext/npm/install'
+  end
+  $npm_commands_hook_installed = true # rubocop:disable Style/GlobalVars
+end

critical-path-css-rails.gemspec

@@ -10,9 +10,11 @@ Gem::Specification.new do |s|
   s.description = 'Only load the CSS you need for the initial viewport in Rails!'
   s.license     = 'MIT'
 
-  s.add_runtime_dependency 'phantomjs', ['~> 2.1']
-
   s.files        = `git ls-files`.split("\n")
   s.executables  = `git ls-files -- bin/*`.split("\n").map { |f| File.basename(f) }
   s.require_path = 'lib'
+
+  s.add_development_dependency 'rspec', '~> 3.6'
+
+  s.extensions = ['ext/npm/extconf.rb']
 end

ext/npm/extconf.rb

@@ -0,0 +1,3 @@
+File.write 'Makefile',
+           "make:\n\t\ninstall:\n\truby install.rb\nclean:\n\t\n"
+

ext/npm/install.rb

@@ -0,0 +1,4 @@
+require_relative '../../lib/npm_commands'
+
+NpmCommands.new.install('--production', '.') ||
+  raise('Error while installing npm dependencies')

lib/critical-path-css-rails.rb

@@ -1,19 +1,21 @@
-module CriticalPathCss
-  require 'critical_path_css/css_fetcher'
+require 'critical_path_css/configuration'
+require 'critical_path_css/css_fetcher'
+require 'critical_path_css/rails/config_loader'
 
+module CriticalPathCss
   CACHE_NAMESPACE = 'critical-path-css'
 
   def self.generate(route)
     Rails.cache.write(
       route,
-      CssFetcher.new.fetch_route(route),
+      CssFetcher.new(config).fetch_route(route),
       namespace: CACHE_NAMESPACE,
       expires_in: nil
     )
   end
 
   def self.generate_all
-    CssFetcher.new.fetch.each do |route, css|
+    CssFetcher.new(config).fetch.each do |route, css|
       Rails.cache.write(route, css, namespace: CACHE_NAMESPACE, expires_in: nil)
     end
   end
@@ -29,4 +31,8 @@ def self.clear_matched(routes)
   def self.fetch(route)
     Rails.cache.read(route, namespace: CACHE_NAMESPACE) || ''
   end
+
+  def self.config
+    @config ||= Configuration.new(CriticalPathCss::Rails::ConfigLoader.new.load)
+  end
 end

lib/critical_path_css/configuration.rb

@@ -1,39 +1,29 @@
 require 'erb'
 module CriticalPathCss
   class Configuration
-    CONFIGURATION_FILENAME = 'critical_path_css.yml'
 
-    def initialize
-      @configurations = YAML.load(ERB.new(File.read(configuration_file_path)).result)[Rails.env]
+    def initialize(config)
+      @config = config
     end
 
     def base_url
-      @configurations['base_url']
+      @config['base_url']
     end
 
     def css_path
-      @css_path ||= begin
-        relative_path = @configurations['css_path'] || manifest_path
-        "#{Rails.root}/public#{relative_path}"
-      end
+      @config['css_path']
     end
 
     def manifest_name
-      @configurations['manifest_name']
+      @config['manifest_name']
     end
 
     def routes
-      @configurations['routes']
+      @config['routes']
     end
 
-    private
-
-    def configuration_file_path
-      @configuration_file_path ||= Rails.root.join('config', CONFIGURATION_FILENAME)
-    end
-
-    def manifest_path
-      @manifest_path ||= ActionController::Base.helpers.stylesheet_path(manifest_name, host: '')
+    def penthouse_options
+      @config['penthouse_options'] || {}
     end
   end
 end

lib/critical_path_css/css_fetcher.rb

@@ -1,12 +1,12 @@
+require 'json'
+require 'open3'
+
 module CriticalPathCss
   class CssFetcher
-    require 'phantomjs'
-    require 'critical_path_css/configuration'
-
-    PENTHOUSE_PATH = "#{File.dirname(__FILE__)}/../penthouse/penthouse.js"
+    GEM_ROOT = File.expand_path(File.join('..', '..'), File.dirname(__FILE__))
 
-    def initialize
-      @config = Configuration.new
+    def initialize(config)
+      @config = config
     end
 
     def fetch
@@ -20,15 +20,50 @@ def fetch_route(route)
     protected
 
     def css_for_route(route)
-      url = @config.base_url + route
-
-      Phantomjs.run(
-        '--ignore-ssl-errors=true',
-        '--ssl-protocol=tlsv1',
-        PENTHOUSE_PATH,
-        url,
-        @config.css_path
-      )
+      options = {
+        'url' => @config.base_url + route,
+        'css' => @config.css_path,
+        ## optional params
+        # viewport dimensions
+        'width' => 1300,
+        'height' => 900,
+        # CSS selectors to always include, e.g.:
+        'forceInclude' => [
+          #  '.keepMeEvenIfNotSeenInDom',
+          #  '^\.regexWorksToo'
+        ],
+        # ms; abort critical CSS generation after this timeout
+        'timeout' => 30000,
+        # set to true to throw on CSS errors (will run faster if no errors)
+        'strict' => false,
+        # characters; strip out inline base64 encoded resources larger than this
+        'maxEmbeddedBase64Length' => 1000,
+        # specify which user agent string when loading the page
+        'userAgent' => 'Penthouse Critical Path CSS Generator',
+        # ms; render wait timeout before CSS processing starts (default: 100)
+        'renderWaitTime' => 100,
+        # set to false to load (external) JS (default: true)
+        'blockJSRequests' => true,
+        # see `phantomjs --help` for the list of all available options
+        'phantomJsOptions' => {
+          'ignore-ssl-errors' => true,
+          'ssl-protocol' => 'tlsv1'
+        },
+        'customPageHeaders' => {
+          # use if getting compression errors like 'Data corrupted':
+          'Accept-Encoding' => 'identity'
+        }
+      }.merge(@config.penthouse_options)
+      out, err, st = Dir.chdir(GEM_ROOT) do
+        Open3.capture3('node', 'lib/fetch-css.js', JSON.dump(options))
+      end
+      if !st.exitstatus.zero? || out.empty? && !err.empty?
+        STDOUT.puts out
+        STDERR.puts err
+        raise "Failed to get CSS for route #{route}\n" \
+              "  with options=#{options.inspect}"
+      end
+      out
     end
   end
 end

lib/critical_path_css/rails/config_loader.rb

@@ -0,0 +1,24 @@
+module CriticalPathCss
+  module Rails
+    module ConfigLoader
+      CONFIGURATION_FILENAME = 'critical_path_css.yml'
+
+      def load
+        config = YAML.load(ERB.new(File.read(configuration_file_path)).result)[Rails.env]
+        config['css_path'] = "#{Rails.root}/public" + (
+            config['css_path'] ||
+              ActionController::Base.helpers.stylesheet_path(
+                config['manifest_name'], host: ''
+              )
+        )
+        config
+      end
+
+      private
+
+      def configuration_file_path
+        @configuration_file_path ||= Rails.root.join('config', CONFIGURATION_FILENAME)
+      end
+    end
+  end
+end