Add a penthouse wrapper script

glebm · glebm · commit e50eb376e34b · 2017-06-03T20:31:06.000+01:00
diff --git a/.codeclimate.yml b/.codeclimate.yml
@@ -1,4 +1,2 @@
 languages:
   Ruby: true
-exclude_paths:
-  - lib/penthouse/penthouse.js
diff --git a/critical-path-css-rails.gemspec b/critical-path-css-rails.gemspec
@@ -10,8 +10,6 @@ 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'
diff --git a/lib/critical_path_css/css_fetcher.rb b/lib/critical_path_css/css_fetcher.rb
@@ -1,9 +1,11 @@
+require 'open3'
+
 module CriticalPathCss
   class CssFetcher
-    require 'phantomjs'
     require 'critical_path_css/configuration'
 
-    PENTHOUSE_PATH = "#{File.dirname(__FILE__)}/../penthouse/penthouse.js"
+    JS_FETCHER_PATH = File.expand_path('../fetch-css.js',
+                                       File.dirname(__FILE__)).freeze
 
     def initialize
       @config = Configuration.new
@@ -20,15 +22,22 @@ 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,
+        cssPath: @config.css_path,
+        phantomJsOptions: {
+          :'ignore-ssl-errors' => true,
+          :'ssl-protocol' => 'tlsv1'
+        }
+      }
+      out, err, st = Open3.capture3('node', JS_FETCHER_PATH, JSON.dump(options))
+      unless st.exitstatus.zero?
+        STDOUT.puts out
+        STDERR.puts err
+        raise "Failed to get CSS for route #{route}\n" \
+              "  with options=#{options.inspect}"
+      end
+      out
     end
   end
 end
diff --git a/lib/fetch-css.js b/lib/fetch-css.js
@@ -0,0 +1,40 @@
+const penthouse = require('penthouse');
+const fs = require('fs');
+
+const argOptions = JSON.parse(process.argv[2]);
+const penthouseOptions = Object.assign({
+  url: null, // required
+  css: null, // required
+  // OPTIONAL params
+  width: 1300,                    // viewport width
+  height: 900,                    // viewport height
+  forceInclude: [                 // CSS selectors to always include, e.g.:
+    //  '.keepMeEvenIfNotSeenInDom',
+    //    /^\.regexWorksToo/
+  ],
+  timeout: 30000,                 // ms; abort critical CSS generation after this timeout
+  strict: false,                  // set to true to throw on CSS errors (will run faster if no errors)
+  maxEmbeddedBase64Length: 1000,  // characters; strip out inline base64 encoded resources larger than this
+  userAgent: 'Penthouse Critical Path CSS Generator', // specify which user agent string when loading the page
+  renderWaitTime: 100,            // ms; render wait timeout before CSS processing starts (default: 100)
+  blockJSRequests: true,          // set to false to load (external) JS (default: true)
+  phantomJsOptions: {             // see `phantomjs --help` for the list of all available options
+    // 'proxy': 'http://proxy.company.com:8080',
+    // 'ssl-protocol': 'SSLv3'
+  },
+  customPageHeaders: {
+    'Accept-Encoding': 'identity' // add if getting compression errors like 'Data corrupted'
+  }
+}, argOptions);
+
+const STDOUT_FD = 1;
+const STDERR_FD = 2;
+
+penthouse(penthouseOptions).then(function(criticalCss) {
+  fs.writeSync(STDOUT_FD, criticalCss);
+  fs.fsyncSync(STDOUT_FD);
+}).catch(function(err) {
+  fs.writeSync(STDERR_FD, err);
+  fs.fsyncSync(STDERR_FD);
+  process.exit(1);
+});
