tools: Add thegrid-designsystem-run

For executing/developing designsystems locally

Author: jonnor

bin/thegrid-designsystem-run

@@ -0,0 +1,3 @@
+#!/bin/env node
+require('coffee-script/register');
+require('../tools/designsystem-run').main();

blueprint/designsystem.apib

@@ -85,10 +85,21 @@ For instance, if you have an option for 'density', use something like `mysystem_
 
 All changes to site configuration will trigger a rebuild of the pages on the site.
 
-# Debugging
+# Running locally
 
-There are currently no tools to run a page build job locally.
-There is currently no way to get the output/errors from a failed page build job.
+Assuming `mypage.json` is a page input datastructure, you can execute your designsystem locally using
+
+    thegrid-designsystem-run https://developer.thegrid.io/designsystems/original-html.js mypage.json > output.html
+
+You can now open `output.html` in your browser.
+
+You should have PhantomJS 2.x installed, and `phantomjs` should existing on PATH.
+This is then executed in the same way as on the production infrastructure.
+
+
+<!-- TODO:
+- tool for getting page input datastructure
+-->
 
 # Tools
 

jsjobs/polyfills/function-bind.js

@@ -0,0 +1,36 @@
+// https://raw.githubusercontent.com/facebook/react/master/src/test/phantomjs-shims.js
+(function() {
+
+var Ap = Array.prototype;
+var slice = Ap.slice;
+var Fp = Function.prototype;
+
+if (!Fp.bind) {
+  // PhantomJS doesn't support Function.prototype.bind natively, so
+  // polyfill it whenever this module is required.
+  Fp.bind = function(context) {
+    var func = this;
+    var args = slice.call(arguments, 1);
+
+    function bound() {
+      var invokedAsConstructor = func.prototype && (this instanceof func);
+      return func.apply(
+        // Ignore the context parameter when invoking the bound function
+        // as a constructor. Note that this includes not only constructor
+        // invocations using the new keyword but also calls to base class
+        // constructors such as BaseClass.call(this, ...) or super(...).
+        !invokedAsConstructor && context || this,
+        args.concat(slice.call(arguments))
+      );
+    }
+
+    // The bound function must share the .prototype of the unbound
+    // function so that any object created by one constructor will count
+    // as an instance of both constructors.
+    bound.prototype = func.prototype;
+
+    return bound;
+  };
+}
+
+})();

jsjobs/polyfills/polysolvepage.js

@@ -0,0 +1,56 @@
+
+
+// JsJob compatibility wrapper script for poly
+window.jsJobRun = function(data, o, callback) {
+  var isDefined = function(obj) {
+    return typeof obj != 'undefined' && obj != null;
+  };
+  var setIfNotDefined = function(obj, key, val) {
+    if (!isDefined(obj[key])) {
+      obj[key] = val;
+    }
+  };
+
+  var options = {};
+  if (isDefined(data.options)) {
+    options = data.options;
+  }
+
+  window.polySolvePage(data, options, function (err, result, details) {
+    if (err) {
+      // Inject page info to error
+      err.site = data.site;
+      err.path = data.path;
+      err.style = data.style;
+      err.job = data.job;
+      err.options = data.options;
+      setIfNotDefined(err, 'job', null);
+      setIfNotDefined(err, 'options', null);
+      return callback(err);
+    }
+
+    var solved = {
+      path: data.path,
+      site: data.site,
+      page: data.id,
+      format: data.format,
+      style: data.style,
+      html: result,
+      solution: details,
+      staging: data.staging,
+      review: data.review,
+      job: data.job,
+      options: data.options,
+      gss: '',
+      css: '',
+    };
+    setIfNotDefined(solved, 'staging', false);
+    setIfNotDefined(solved, 'review', false);
+    setIfNotDefined(solved, 'job', null);
+    setIfNotDefined(solved, 'options', null);
+
+    return callback(null, solved, details);
+  });
+
+
+};

package.json

@@ -15,6 +15,7 @@
   "bin": {
     "thegrid-authenticate": "./bin/thegrid-authenticate",
     "thegrid-designsystem-update": "./bin/thegrid-designsystem-update",
+    "thegrid-designsystem-run": "./bin/thegrid-designsystem-run",
     "thegrid-designsystem-collaborators": "./bin/thegrid-designsystem-collaborators",
     "thegrid-share-file": "./bin/thegrid-share-file",
     "thegrid-share-url": "./bin/thegrid-share-url",
@@ -33,6 +34,7 @@
   "dependencies": {
     "coffee-script": "^1.7.1",
     "js-yaml": "^3.2.5",
+    "jsjob": "^0.10.5",
     "jsonwebtoken": "^5.0.1",
     "minimist": "^1.2.0",
     "semver": "^4.3.4"

tools/designsystem-run.coffee

@@ -0,0 +1,102 @@
+
+jsjob = require 'jsjob'
+fs = require 'fs'
+path = require 'path'
+
+readPolyfill = (name) ->
+  p = path.join __dirname, '../jsjobs/polyfills', name
+  return fs.readFileSync p, 'utf-8'
+
+polyFillFunctionBind = readPolyfill 'function-bind.js'
+polyCompat = readPolyfill 'polysolvepage.js'
+
+startRunner = (options, callback) ->
+  options.scripts = [
+    polyFillFunctionBind,
+    polyCompat
+  ]
+  runner = new jsjob.Runner options
+  runner.start (err) ->
+    return callback err, runner
+
+runJob = (runner, filterUrl, data, callback) ->
+  jobOptions = data.options
+  jobOptions = {} if not jobOptions
+  runner.runJob filterUrl, data, jobOptions, (err, outpage) ->
+    if err
+      return callback err
+    unless outpage
+      return callback new Error "JsJob returned falsy and no Error"
+    return callback null, outpage
+
+usageError = (msg) ->
+  new Error "#{msg}\nUsage: thegrid-designsystem-run designsystem-url file"
+
+parse = (args) ->
+  if args.length < 2
+    throw usageError "Wrong number of arguments, got #{args.length}, expected 2."
+
+  minimist = require 'minimist'
+  parseOptions =
+    boolean: []
+    default:
+      output: 'html'
+  parsed = minimist args, parseOptions
+
+  parsed.designsystem = parsed._[0]
+  parsed.file = parsed._[1]
+
+  return parsed
+
+collectStream = (s, callback) ->
+  data = ""
+  s.on 'error', (err) ->
+    return callback err
+  s.on 'data', (d) ->
+    data += d.toString()
+  s.on 'end', () ->
+    return callback null, data
+  s.read()
+
+
+readInput = (file, callback) ->
+  if file == '-'
+    return collectStream process.stdin, callback
+  else
+    s = fs.createReadStream file, { encoding: 'utf-8' }
+    return collectStream s, callback
+
+startAndRun = (data, options, outerCallback) ->
+  runner = null
+  callback = (err, r, d) ->
+    if runner
+      runner.stop (e) ->
+        return outerCallback err, r, d
+    else
+      return outerCallback err, r, d
+
+  startRunner options, (err, r) ->
+    runner = r
+    return callback err if err
+    return runJob runner, options.designsystem, data, callback
+
+main = () ->
+  options = parse process.argv.slice(2)
+
+  callback = (err, results, details) ->
+    if err
+      console.error err
+      process.exit 1
+    else
+      if options.output
+        results = results[options.output]
+      console.log results
+      process.exit 0
+  
+  readInput options.file, (err, input) ->
+    return callback err if err
+    return callback new Error 'Input did not contain data' if not input
+    data = JSON.parse input
+    return startAndRun data, options, callback
+
+module.exports.main = main