Dev env.md

Dev environment 2016-2017

Style guide linter

• linting: xo using eslint
• testing: ava
• BDD: ava-spec
• test doubles: testdouble.js
• browser testing: browser-env
• code coverage: nyc with coveralls.io
• E2E: [cypress] or [nightwatch]
• Bundling webpack
• Complexity analysis [plato]

Recipe

For ava tips, read this recipe

yarn i babel-cli -g

create package

• yarn init

babel

• yarn add babel-register babel-polyfill babel-plugin-transform-runtime --D
• yarn add babel-preset-latest-minimal --save-dev

webpack

• yarn add webpack webpack-node-externals --D

testing

• yarn add ava ava-spec testdouble --D

coverage

• yarn add nyc coveralls --D

lint styleing

• yarn add xo --D

complexity analysis

• yarn add plato --D

browser testing (for modules used in web apps only) yarn i add browser-env --D

CI

.travis.yml

after_success:
    - './node_modules/.bin/nyc report --reporter=text-lcov | ./node_modules/.bin/coveralls'

Tools of the trade

This library was created using the guides:

• moving-to-webpack-2
• webpack usage
• WebpackTutorial 1 & 2
• how-to-write-a-good-npm-module.html
• code-coverage-with-instanbul-and-coveralls
• babel handbook
• webpack testing
• es7-decorators-babel6

Libs used

• babel-loader
• babel-preset-latest-minimal
• npm-install-webpack-plugin

Testing

• test double vs sinon

• debugging-mocha-unit-tests-in-visual-studio-code

$ mocha --debug-brk
Debugger listening on 127.0.0.1:5858

Configure .launch.json file in root with this host and port.

Code coverage

Use cross-env and nyc interface

npm i nyc --save-dev

• babel-plugin-coverage
• es6-code-coverage-with-babel-plugin
• node-mocha-travis-istanbul-coveralls

"Using a babel plugin for coverage is a no-brainer." - @kentcdodds

Even better:

• babel-plugin-istanbul

npm install --save-dev babel-plugin-istanbul

Decorator

• lodash-decorators
• core-decorators

Documentation

• documentation.js

Karma

• karma-mocha-reporter

Flowtype

• flowtype

Plato reports

npm-run plato -r -d reports ./

Code style

• xo
• standard - javascript standard code style

eslint --init to configure and initialize ESlint

{
    "extends": "standard",
    "installedESLint": true,
    "plugins": [
        "standard",
        "promise"
    ]
}

• eslint-and-mocha

Babel plugins

List current plugins needed according to the version of node:

npm-run babel-node-list-required

[ 'transform-es2015-duplicate-keys',
  'transform-es2015-modules-commonjs',
  'syntax-trailing-function-commas',
  'transform-async-to-generator' ]

npm i babel-plugin-transform-es2015-duplicate-keys babel-plugin-transform-es2015-modules-commonjs babel-plugin-syntax-trailing-function-commas babel-plugin-transform-async-to-generator --save-dev

For Vue projects

npm install --save-dev eslint-config-vue eslint-plugin-vue

• eslint-config-vue
• eslint-plugin-vue

Objectives

Read project directory as stream of files

• pass through filter (add metadata for type of file basd on location/context and file name + extension)
• operate on file
• send to output stream, writing it back or sending file to new location

API

Create new file

operator({
  model: 'person'
})
.extends('base')
.constructor(['name'])
.async.fun('speak', ['text'])
.fun('walk', ['distance'])

Creates file src\models\person.js

import Base from './base'

export default class Person {
  constructor(name) {
    super()
    this.name = name
  }

  async speak(text) {
  }

  walk(distance) {
  }
}

Note: Could also be performed on multiple files!

Modify existing file

Change speak to not be async and remove function walk

operator({
  model: 'person'
})
.fun('speak', ['text'])
.remove('walk')

Note: Could also be performed on multiple files!

Delete existing file

operator({
  model: 'person',
  view: 'person'
})
.delete()

Multiple delete

operator({
  models: ['person', 'account'],
  views: ['person', 'account']
})
.delete()

Delete all domain files of the given names except the test files:

operator({
  domains: ['person', 'account']
  exceptFor: ['test']
})
.delete()