chore: update node and some deps (postlight#209)

* chore: update .nvmrc

* added prettier and pre-commit hooks

* update docker image to new node

* add karma-cli to get web tests working

* explictly install karma... seems to fix problem

* remove pre-built phantomjs

* swap install order

Author: adampash

.circleci/config.yml

@@ -2,33 +2,33 @@ version: 2
 jobs:
   test-node:
     docker:
-      - image: circleci/node:6.14-stretch
+      - image: circleci/node:8.10
     steps:
       - checkout
       - run: "yarn install"
       - run: "yarn lint:ci"
       - run: "yarn build"
       - run: "./scripts/pr-parser-preview.sh"
-      - run: "yarn test:node -- --maxWorkers=4"
+      - run: "yarn test:node --maxWorkers=4"
 
       - store_artifacts:
           path: tmp/artifacts
 
   test-web:
     docker:
-      - image: circleci/node:6.14-stretch
+      - image: circleci/node:8.10-browsers
     steps:
       - checkout
       - run: "yarn install"
       # For some reason phantomjs-prebuild is failing w/yarn, but npm installing works
       - run: "npm install phantomjs-prebuilt"
-      # Switch to 7 and lint
-      - run: "yarn test:web -- --maxWorkers=4"
-      - run: "yarn build:web -- --maxWorkers=4"
+      - run: "yarn add karma-cli --dev"
+      - run: "yarn test:web --maxWorkers=4"
+      - run: "yarn build:web --maxWorkers=4"
 
   update-fixtures:
     docker:
-      - image: circleci/node:6.14-stretch
+      - image: circleci/node:8.10
     steps:
       - checkout
       - run: "yarn install"

.eslintrc

@@ -2,7 +2,7 @@
 // Copy this file, and add rule overrides as needed.
 {
   "parser": "babel-eslint",
-  "extends": "airbnb",
+  "extends": ["airbnb", "prettier"],
   "plugins": [
     "babel"
   ],

.nvmrc

@@ -1 +1 @@
-6.10
+8.10

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": true
+}

package.json

@@ -49,29 +49,34 @@
     "changelog-maker": "^2.3.0",
     "eslint": "^3.8.1",
     "eslint-config-airbnb": "^12.0.0",
+    "eslint-config-prettier": "^3.5.0",
     "eslint-import-resolver-babel-module": "^2.0.1",
     "eslint-plugin-babel": "^3.3.0",
     "eslint-plugin-import": "^1.16.0",
     "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-react": "^6.4.1",
     "express": "^4.14.0",
+    "husky": "^1.3.1",
     "inquirer": "^1.1.3",
     "jasmine-core": "^2.5.2",
     "jest": "^16.0.2",
     "jest-cli": "^16.0.2",
     "karma": "^1.3.0",
     "karma-browserify": "^5.1.0",
     "karma-chrome-launcher": "^2.0.0",
+    "karma-cli": "^2.0.0",
     "karma-jasmine": "^1.0.2",
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "^1.0.2",
     "karma-requirejs": "^1.1.0",
+    "lint-staged": "^8.1.0",
     "mocha": "^3.1.2",
     "nock": "^9.0.2",
     "ora": "^0.3.0",
     "phantomjs-polyfill-find": "ptim/phantomjs-polyfill-find",
     "phantomjs-polyfill-string-includes": "^1.0.0",
     "phantomjs-prebuilt": "^2.1.14",
+    "prettier": "^1.15.3",
     "requirejs": "^2.3.2",
     "rollup": "^0.36.3",
     "rollup-plugin-babel": "^2.6.1",
@@ -104,5 +109,21 @@
     "request": "browser-request",
     "iconv-lite": "./src/shims/iconv-lite",
     "moment-timezone": "./node_modules/moment-timezone/builds/moment-timezone-with-data-2010-2020.min.js"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js}": [
+      "eslint --fix",
+      "prettier --write",
+      "git add"
+    ],
+    "*.{json,css,md}": [
+      "prettier --write",
+      "git add"
+    ]
   }
 }

scripts/check-build.test.js

@@ -8,8 +8,10 @@ let urls = [
     title: 'Iraqi troops storm town south of Mosul',
   },
   {
-    url: 'https://www.cnn.com/2018/10/12/us/before-after-aerial-images-mexico-beach-devastation-trnd/index.html',
-    title: 'Before and after images show there\'s nothing left in some parts of Mexico Beach',
+    url:
+      'https://www.cnn.com/2018/10/12/us/before-after-aerial-images-mexico-beach-devastation-trnd/index.html',
+    title:
+      "Before and after images show there's nothing left in some parts of Mexico Beach",
   },
 ];
 
@@ -24,7 +26,8 @@ if (process.env.CI) {
   if (cheerio.browser) {
     require('../dist/mercury.web');
   }
-  const Merc = typeof Mercury === 'undefined' ? require('../dist/mercury') : Mercury;
+  const Merc =
+    typeof Mercury === 'undefined' ? require('../dist/mercury') : Mercury;
 
   describe('Is Mercury build working', () => {
     beforeAll(() => {
@@ -38,15 +41,17 @@ if (process.env.CI) {
     });
 
     urls.map(article =>
-      it(`gets this title right ${article.title}`, (done) => {
-        Merc.parse(article.url).then((result) => {
-          assert.equal(article.title, result.title);
-          done();
-        }).catch((e) => {
-          console.log(e.name, e.message); // eslint-disable-line no-console
-          assert.equal(true, false);
-          done();
-        });
+      it(`gets this title right ${article.title}`, done => {
+        Merc.parse(article.url)
+          .then(result => {
+            assert.equal(article.title, result.title);
+            done();
+          })
+          .catch(e => {
+            console.log(e.name, e.message); // eslint-disable-line no-console
+            assert.equal(true, false);
+            done();
+          });
       })
     );
   });

scripts/comment-on-pr.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 const bot = require('@jesses/circle-github-bot').default.create();
 const Mercury = require('../dist/mercury.js');
-const fs = require("fs");
+const fs = require('fs');
 
 const run = () => {
   const screenshotPath = process.argv[2];
@@ -11,33 +11,42 @@ const run = () => {
   const html = fs.readFileSync(`${fixture}`);
 
   // first parse is just to get the url
-  Mercury.parse('http://example.com', html, { fallback: false }).then(({ url, domain, excerpt, word_count, direction }) => {
-    // with the url, second pass will test the correct parser
-    Mercury.parse(url, html, { fallback: false }).then(json => {
-      // removing excerpt b/c this comes from content, not necessary
-      delete json.excerpt
-
-      // adding items that aren't pulled in custom parser w/out fallback
-      Object.assign(json, { url, domain, word_count, direction });
-
-      // a quick preview of the parsed content in an html file
-      const previewHtml = `<h1>${json.title}</h1><img src=${json.lead_image_url} /><p>${json.author}</p>${json.content}`
-
-
-      const jsonPath = `${screenshotPath}-parsed.json`;
-      const fixtureArtifactPath = `tmp/artifacts/${fixture}`;
-      const previewPath = `tmp/artifacts/${fixture}.preview.html`;
-
-      fs.writeFileSync(previewPath, previewHtml);
-      fs.writeFileSync(jsonPath, JSON.stringify(json));
-      fs.writeFileSync(fixtureArtifactPath, html);
-
-      bot.comment(process.env.GH_AUTH_TOKEN, `### 🤖 Automated Parsing Preview 🤖
+  Mercury.parse('http://example.com', html, { fallback: false }).then(
+    ({ url, domain, excerpt, word_count, direction }) => {
+      // with the url, second pass will test the correct parser
+      Mercury.parse(url, html, { fallback: false }).then(json => {
+        // removing excerpt b/c this comes from content, not necessary
+        delete json.excerpt;
+
+        // adding items that aren't pulled in custom parser w/out fallback
+        Object.assign(json, { url, domain, word_count, direction });
+
+        // a quick preview of the parsed content in an html file
+        const previewHtml = `<h1>${json.title}</h1><img src=${
+          json.lead_image_url
+        } /><p>${json.author}</p>${json.content}`;
+
+        const jsonPath = `${screenshotPath}-parsed.json`;
+        const fixtureArtifactPath = `tmp/artifacts/${fixture}`;
+        const previewPath = `tmp/artifacts/${fixture}.preview.html`;
+
+        fs.writeFileSync(previewPath, previewHtml);
+        fs.writeFileSync(jsonPath, JSON.stringify(json));
+        fs.writeFileSync(fixtureArtifactPath, html);
+
+        bot.comment(
+          process.env.GH_AUTH_TOKEN,
+          `### 🤖 Automated Parsing Preview 🤖
 **Commit:** \`${bot.env.commitMessage}\`
 
-![Screenshot of fixture (this embed should work after repo is public)](${bot.artifactUrl(screenshotPath)})
+![Screenshot of fixture (this embed should work after repo is public)](${bot.artifactUrl(
+            screenshotPath
+          )})
 
-[Original Article](${url}) | ${bot.artifactLink(fixtureArtifactPath, 'HTML Fixture')} | ${bot.artifactLink(previewPath, 'Parsed Content Preview')}
+[Original Article](${url}) | ${bot.artifactLink(
+            fixtureArtifactPath,
+            'HTML Fixture'
+          )} | ${bot.artifactLink(previewPath, 'Parsed Content Preview')}
 
 <details>
 <summary><b>Parsed JSON</b></summary>
@@ -52,12 +61,15 @@ ${JSON.stringify(json, null, 2)}
 
 **\`null\` fields**
 
-${Object.keys(json).map(key => json[key] !== null ? '' : `  * \`${key}\n\``).join('') || 'None'}
+${Object.keys(json)
+            .map(key => (json[key] !== null ? '' : `  * \`${key}\n\``))
+            .join('') || 'None'}
 
 `
-      );
-    });
-  });
-}
+        );
+      });
+    }
+  );
+};
 
 run();

scripts/generate-custom-parser.js

@@ -7,10 +7,7 @@ import inquirer from 'inquirer';
 import ora from 'ora';
 import { exec } from 'child_process';
 
-import {
-  stripJunkTags,
-  makeLinksAbsolute,
-} from 'utils/dom';
+import { stripJunkTags, makeLinksAbsolute } from 'utils/dom';
 import Mercury from '../dist/mercury';
 import extractorTemplate from './templates/custom-extractor';
 import extractorTestTemplate from './templates/custom-extractor-test';
@@ -19,7 +16,8 @@ const questions = [
   {
     type: 'input',
     name: 'website',
-    message: 'Paste a url to an article you\'d like to create or extend a parser for:',
+    message:
+      "Paste a url to an article you'd like to create or extend a parser for:",
     validate(value) {
       const { hostname } = URL.parse(value);
       if (hostname) return true;
@@ -74,25 +72,25 @@ const urlArg = process.argv[2];
 if (urlArg) {
   scaffoldCustomParser(urlArg);
 } else {
-  inquirer.prompt(questions).then((answers) => {
+  inquirer.prompt(questions).then(answers => {
     scaffoldCustomParser(answers.website);
   });
 }
 
 function generateScaffold(url, file, result) {
   const { hostname } = URL.parse(url);
   const extractor = extractorTemplate(hostname, extractorName(hostname));
-  const extractorTest =
-    extractorTestTemplate(
-      file, url, getDir(url), result, extractorName(hostname)
-    );
+  const extractorTest = extractorTestTemplate(
+    file,
+    url,
+    getDir(url),
+    result,
+    extractorName(hostname)
+  );
 
   fs.writeFileSync(`${getDir(url)}/index.js`, extractor);
   fs.writeFileSync(`${getDir(url)}/index.test.js`, extractorTest);
-  fs.appendFileSync(
-    './src/extractors/custom/index.js',
-    exportString(url),
-  );
+  fs.appendFileSync('./src/extractors/custom/index.js', exportString(url));
   exec(`npm run lint-fix-quiet -- ${getDir(url)}/*.js`);
 }
 
@@ -116,9 +114,13 @@ function savePage($, [url], newParser) {
 
   fs.writeFileSync(file, html);
 
-  Mercury.parse(url, html).then((result) => {
+  Mercury.parse(url, html).then(result => {
     if (newParser) {
-      confirm(generateScaffold, [url, file, result], 'Generating parser and tests');
+      confirm(
+        generateScaffold,
+        [url, file, result],
+        'Generating parser and tests'
+      );
       console.log(`Your custom site extractor has been set up. To get started building it, run
       yarn watch:test -- ${hostname}
         -- OR --

scripts/generate-fixture-preview.js

@@ -3,7 +3,10 @@ const page = require('webpage').create();
 const system = require('system');
 const args = system.args;
 
-const fixtures = args.slice(1)[0].slice(0, -1).split(',');
+const fixtures = args
+  .slice(1)[0]
+  .slice(0, -1)
+  .split(',');
 const totalRenders = fixtures.length;
 
 var renderCount = 0;
@@ -17,12 +20,13 @@ function pageRenderComplete() {
 }
 
 function capturePage() {
-  const fixturePath = fixtures[renderCount]
+  const fixturePath = fixtures[renderCount];
   page.viewportSize = { width: 1366, height: 768 };
 
   page.open(fixturePath, function() {
     // set default background to white (otherwise can sometimes get transparent bg in png
-    const script = "function() { \
+    const script =
+      "function() { \
       var style = document.createElement('style'); \
       var text = document.createTextNode('body { background: #fff }'); \
       style.setAttribute('type', 'text/css'); \