# 1. Write scripts to lint, build, test, and serve blocks

Date: 2019-01-07

## Status

Accepted

## Context

Each block in the [Element Blocks repo](https://github.com/Volusion2Dev/zero-Blocks) has a handful of duplicated configuration files and nearly two dozen shared `devDependencies`. In order to allow internal block developers to focus on creating and maintaining blocks, this proposal is being extended to consolidate all of the configuration around block development: linting, running tests, building blocks, and then serving them. The concept is heavily based on [react-scripts](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts) (more info on react-scripts' functionality is [here](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/template)).

## Decision

This package, `block-scripts`, will expose four possible arguments: `start`, `build`, `lint`, and `test`. These scripts will be invoked by using npm's scripts tool — `npm start` to invoke `block-scripts start`, `npm run lint` for `block-scripts lint`, etc. — in each block. The effect is that the configurations will be shared across blocks, from one location.

## Consequences

These scripts will need to be published to npm, so as to be available for all repos. In the future, semantic versioning will be important, to avoid breaking existing blocks using older versions of these scripts.

Each block will have to be updated to remove the configuration files, and replace the devDependencies and `scripts` section of each block's `package.json` with this package and its exposed commands. For example, for the newsletter block, instead of

```json
{
  "name": "zero-blocknewsletterjs",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "test:watch": "npm test -- --watch",
    "build": "npm test && rollup -c rollup.config.prod.js",
    "start": "rollup -c rollup.config.dev.js --watch"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "@volusion/element-components": "^1.0.1",
    "@volusion/element-proptypes": "^1.0.0",
    "aphrodite": "^2.2.3",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.7.1",
    "enzyme-to-json": "^3.3.5",
    "eslint": "^4.19.1",
    "eslint-config-prettier": "^2.9.0",
    "eslint-config-standard-react": "^6.0.0",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "^7.8.2",
    "get-port": "^4.0.0",
    "jest": "^23.6.0",
    "jest-aphrodite-react": "^2.2.0",
    "jest-runner-eslint": "^0.7.1",
    "prettier": "^1.13.3",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "rollup": "^0.59.2",
    "rollup-plugin-babel": "^3.0.4",
    "rollup-plugin-commonjs": "^9.1.3",
    "rollup-plugin-eslint": "^4.0.0",
    "rollup-plugin-livereload": "^0.6.0",
    "rollup-plugin-node-resolve": "^3.3.0",
    "rollup-plugin-replace": "^2.0.0",
    "rollup-plugin-serve": "^0.6.0",
    "rollup-plugin-uglify": "^4.0.0"
  }
}
```

the file would look like

```json
{
  "name": "zero-blocknewsletterjs",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "block-scripts test",
    "test:watch": "npm test -- --watch",
    "build": "npm test && block-scripts build",
    "start": "block-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "@volusion/block-scripts": "1.0.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  }
}
```