feat(pkg): refactor all of the things to support backstop latest, web…

…pack latest

.gitignore

@@ -32,3 +32,4 @@ backstop_data/*
 !backstop_data/casper_scripts
 *.iml
 *.idea
+cache.json

backstop.json

@@ -1,38 +1,48 @@
 {
-  "id": "prod_test",
+  "id": "octagon",
   "viewports": [
     {
-      "name": "tablet_h",
+      "label": "tablet",
       "width": 1024,
       "height": 768
     }
   ],
-  "debug": true,
+  "onBeforeScript": "chromy/onBefore.js",
+  "onReadyScript": "chromy/onReady.js",
   "scenarios": [
     {
       "label": "Octagon",
+      "cookiePath": "backstop_data/engine_scripts/cookies.json",
       "url": "http://localhost:3333",
-      "hideSelectors": [],
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 2000,
+      "hideSelectors": [
+        ".hide-in-test"
+      ],
       "removeSelectors": [],
-      "selectorExpansion": true,
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": "",
       "selectors": [
-        "[data-reactroot]:not(.hasSidebar-0-5)"
+        "[data-reactroot]:not(.hasSidebar-0-2)"
       ],
-      "readyEvent": null,
-      "delay": 5000,
+      "selectorExpansion": true,
       "misMatchThreshold" : 0.1,
-      "onBeforeScript": "onBefore.js",
-      "onReadyScript": "onReady.js"
+      "requireSameDimensions": true
     }
   ],
   "paths": {
     "bitmaps_reference": "backstop_data/bitmaps_reference",
     "bitmaps_test": "backstop_data/bitmaps_test",
-    "casper_scripts": "backstop_data/casper_scripts",
+    "engine_scripts": "backstop_data/engine_scripts",
     "html_report": "backstop_data/html_report",
     "ci_report": "backstop_data/ci_report"
   },
-  "casperFlags": [],
-  "engine": "phantomjs",
-  "report": []
+  "report": ["browser"],
+  "engine": "chrome",
+  "engineFlags": [],
+  "debug": false,
+  "debugWindow": false
 }

package.json

@@ -88,12 +88,12 @@
     "check-vulnerablities": "nsp check"
   },
   "standard": {
+    "parser": "babel-eslint",
     "ignore": [
       "lib",
       "semantic",
       "styleguide"
-    ],
-    "parser": "babel-eslint"
+    ]
   },
   "jest": {
     "collectCoverage": true,

scripts/postcss.config.js → postcss.config.js

@@ -1,9 +1,8 @@
 module.exports = {
   plugins: [
     require('postcss-import'),
-    require('postcss-cssnext'), // permit future css rules
-    require('postcss-neat'), // @TODO investigate purging? may be unused
     require('rucksack-css'), // css function superset (e.g. less like syntax)
-    require('autoprefixer')({ browsers: ['last 2 version'] })
+    require('postcss-cssnext'), // permit future css rules
+    require('postcss-neat') // @TODO investigate purging? may be unused
   ]
 }

scripts/build.js

@@ -4,7 +4,5 @@ require('perish')
 const builder = require('./builder')
 const task = process.argv[2]
 
-;(() => {
-  if (task) return builder[task]()
-  builder.build()
-})()
+if (task) builder[task]()
+else builder.build()

scripts/builder.js

@@ -8,6 +8,11 @@ const fs = require('fs-extra')
 const path = require('path')
 const pify = require('pify')
 const os = require('os')
+const execa = require('execa')
+const bb = require('bluebird')
+const folderHash = require('folder-hash')
+const toilet = require('toiletdb')
+const db = bb.promisifyAll(toilet(path.resolve(__dirname, 'cache.json')))
 
 const exec = pify(cp.exec, { multiArgs: true })
 const copy = pify(fs.copy)
@@ -22,7 +27,8 @@ module.exports = {
   get projectRoot () { return path.resolve(__dirname, '..') },
   get semanticDist () { return path.join(this.semanticPath, 'dist') },
   get semanticPath () { return path.join(this.projectRoot, 'semantic') },
-  get postCssConfig () { return path.join(this.projectRoot, 'scripts', 'postcss.config.js') },
+  get srcPath () { return path.join(this.projectRoot, 'src') },
+  get postCssConfig () { return path.join(this.projectRoot, 'postcss.config.js') },
   get semanticCSSFilename () { return path.join(this.stylesDist, 'semantic.css') },
   get stylesDist () { return path.join(this.distDir, 'styles') },
   get styleguidistDist () { return path.join(this.projectRoot, 'styleguide') },
@@ -31,14 +37,13 @@ module.exports = {
    * Build full lib.
    * @returns {Promise}
    */
-  build () {
-    return Promise.resolve()
-    .then(() => this.clean())
-    .then(() => this.octagonComponentJs())
-    .then(() => this.octagonComponentCss())
-    .then(() => this.octagonCopyAssets())
-    .then(() => this.semanticInit())
-    .then(() => console.log('dist build successfully'))
+  async build () {
+    await this.clean()
+    await this.octagonComponentJs()
+    await this.octagonComponentCss()
+    await this.octagonCopyAssets()
+    await this.semanticInit()
+    console.log('dist build successfully')
   },
   clean () {
     return Promise.all([
@@ -54,45 +59,58 @@ module.exports = {
   getBin (bin) {
     return path.join(this.projectRoot, 'node_modules', '.bin', bin) + (isWin ? '.cmd' : '')
   },
-  octagonComponentJs (opts) {
+  async octagonComponentJs (opts) {
     opts = opts || {}
     const args = [this.getBin('babel'), 'src', '-d', this.componentDist, '--source-maps']
     if (opts.watch) args.push('--watch')
-    return Promise.resolve()
-    .then(() => mkdirp(this.componentDist))
-    .then(() => exec(args.join(' '), { cwd: this.projectRoot, stdio: 'inherit' }))
-    .then(([stdout]) => console.log(stdout))
+    await mkdirp(this.componentDist)
+    const [stdout] = await exec(args.join(' '), { cwd: this.projectRoot, stdio: 'inherit' })
+    console.log(stdout)
   },
-  octagonComponentCss (opts) {
+  async octagonComponentCss (opts) {
     opts = opts || {}
     const outputDir = path.join(this.componentDist, 'styles', 'components')
     const inputDir = path.join(this.projectRoot, 'src', 'styles', 'components', '*.css')
     const args = [this.getBin('postcss'), inputDir, '-d', outputDir, '-c', this.postCssConfig]
-    return Promise.resolve()
-    .then(() => mkdirp(this.componentDist))
-    .then(() => exec(args.join(' '), { cwd: this.projectRoot, stdio: 'inherit' }))
-    .then(([stdout]) => console.log(stdout))
+    await mkdirp(this.componentDist)
+    const [stdout] = await exec(args.join(' '), { cwd: this.projectRoot, stdio: 'inherit' })
+    console.log(stdout)
   },
-  octagonCopyAssets (opts) {
+  async octagonCopyAssets (opts) {
     const assetSource = path.join(this.projectRoot, 'src', 'assets')
     const fontsDest = path.resolve(this.distDir, 'styles', 'themes', 'tripwire', 'assets', 'fonts')
     const latoSrc = path.resolve(this.projectRoot, 'node_modules', 'lato-font', 'fonts')
     const latoDest = path.join(fontsDest, 'lato')
     const elegantSrc = path.resolve(this.projectRoot, 'node_modules', 'elegant-icons', 'fonts')
     const elegantDest = path.join(fontsDest, 'elegant-icons')
-    return Promise.resolve('success')
-    .then(() => copy(assetSource, this.assetsDist))
-    .then(() => copy(latoSrc, latoDest))
-    .then(() => copy(elegantSrc, elegantDest))
+    await copy(assetSource, this.assetsDist)
+    await copy(latoSrc, latoDest)
+    await copy(elegantSrc, elegantDest)
   },
-  semanticBuild () {
-    return exec([this.getBin('gulp'), 'build'].join(' '), { cwd: this.semanticPath, stdio: 'inherit' })
-    .then(([stdout]) => console.log(stdout))
+  async semanticBuild () {
+    const [stdout] = await exec([this.getBin('gulp'), 'build'].join(' '), { cwd: this.semanticPath, stdio: 'inherit' })
+    console.log(stdout)
   },
-  semanticInit () {
+  async semanticInit () {
     // source maps not yet available!
     // ref: https://github.com/Semantic-Org/Semantic-UI/issues/2171
-    return this.semanticBuild()
-    .then(() => this.copySemanticAssets())
+    await this.semanticBuild()
+    return this.copySemanticAssets()
+  },
+  async styleguide () {
+    await db.openAsync()
+    const cache = await db.readAsync()
+    const [ { hash: srcHash }, { hash: semanticHash } ] = await Promise.all([
+      folderHash.hashElement(this.srcPath),
+      folderHash.hashElement(this.semanticPath)
+    ])
+    if (cache && cache.srcHash === srcHash && cache.semanticHash === semanticHash) {
+      return console.log('SKIPPING STYLEGUIDE BUILD')
+    }
+    await Promise.all([
+      db.writeAsync('srcHash', srcHash),
+      db.writeAsync('semanticHash', semanticHash)
+    ])
+    return execa('npm', ['run', 'styleguide:build'], { cwd: this.projectRoot, stdio: 'inherit' })
   }
 }

scripts/test.js

@@ -1,32 +1,31 @@
 'use strict'
 
 require('perish')
-
 const path = require('path')
-const cp = require('child_process')
-const projectRoot = path.resolve(__dirname, '..')
-const npmBin = path.resolve(projectRoot, 'node_modules', '.bin')
-
-let processHandles = []
-function kill () {
-  processHandles.forEach(handle => { try { handle.kill() } catch (err) {} })
-}
+const execa = require('execa')
+const bb = require('bluebird')
+const builder = require('./builder')
 
-const staticContentDir = path.join(projectRoot, 'styleguide')
-const server = cp.spawn('httpster', ['-d', staticContentDir], { cwd: npmBin, stdio: 'inherit' })
-processHandles.push(server)
-server.on('exit', code => {
-  if (code) throw new Error('httpster unable to serve')
-  kill()
-})
+const PROJECT_ROOT_DIR = path.resolve(__dirname, '..')
+const NPM_BIN_DIR = path.resolve(PROJECT_ROOT_DIR, 'node_modules', '.bin')
+const STATIC_CONTENT_DIR = path.join(PROJECT_ROOT_DIR, 'styleguide')
+const BACKSTOP_BIN = path.join(NPM_BIN_DIR, 'backstop')
 
-const backstopBin = path.join(npmBin, 'backstop')
-let backstop
-
-setTimeout(() => {
-  backstop = cp.spawn(backstopBin, ['test'], { cwd: projectRoot, stdio: 'inherit' })
-  processHandles.push(backstop.childProcess)
-  backstop.on('exit', code => process.exit(code))
-}, 5000)
+const test = {
+  async start () {
+    await builder.styleguide()
+    const server = execa('httpster', ['-d', STATIC_CONTENT_DIR], { cwd: NPM_BIN_DIR, stdio: 'inherit' })
+    server.on('exit', () => this.kill())
+    server.on('error', () => { throw new Error('httpster unable to serve') })
+    await bb.delay(5000)
+    try {
+      const backstop = await execa(BACKSTOP_BIN, ['test'], { cwd: PROJECT_ROOT_DIR, stdio: 'inherit' })
+      backstop.on('exit', code => process.exit(code))
+      process.on('exit', this.kill.bind(this))
+    } finally {
+      server.kill()
+    }
+  }
+}
 
-process.on('exit', kill)
+test.start()

src/components/LargeCard/LargeCard.jsx

@@ -1,4 +1,4 @@
-import '../../styles/components/large-card.css'
+import './large-card.css'
 import Flexbox from 'flexbox-react'
 import PropTypes from 'prop-types'
 import React from 'react'