build: Use typescript, update webpack, linters etc.

* added 🐶husky to run prepush
* fix .editorconfig - corrected to use LF setting for all files
* lint: semi set to never
* lint: comma dange - always-multiline, because of duplicating lines
* moved jest config into .jestrc
* update package.json scripts
* added tsconfig, tslint, tsfmt for styling codebase
* migrated all impl to ts
* migrated non-vue tests to ts

Closes realreality#74 realreality#75

Author: vire

.editorconfig

@@ -1,24 +1,25 @@
 # EditorConfig helps developers define and maintain consistent
 # coding styles between different editors and IDEs
 # editorconfig.org
-
 root = true
 
-
 [*]
-
-# Change these settings to your own preference
+end_of_line = lf
+insert_final_newline = true
 indent_style = space
 indent_size = 2
-
-[*.json]
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
-insert_final_newline = true
+max_line_length = 120
+
+[*.{js,ts}]
+quote_type = single
+curly_bracket_next_line = false
+spaces_around_brackets = inside
+indent_brace_style = BSD KNF
+
+[*.html]
+quote_type = double
 
 [*.md]
 trim_trailing_whitespace = false

.eslintrc

@@ -18,6 +18,10 @@
       "error",
       "unix"
     ],
+    "comma-dangle": [
+      "error",
+      "always-multiline"
+    ],
     "no-unused-vars": ["warn", { "vars": "all", "args": "none" }],
     "no-console": ["off"],
     "no-var": "error",
@@ -28,7 +32,7 @@
     ],
     "semi": [
       "error",
-      "always"
+      "never"
     ]
   },
   "globals": {

.jestrc

@@ -0,0 +1,33 @@
+{
+  "globals": {
+    "__TS_CONFIG__": {
+      "module": "commonjs"
+    }
+  },
+  "collectCoverage": false,
+  "collectCoverageFrom": [
+    "**/src/js/*.js",
+    "**/src/**/*.vue",
+    "**/src/js/components/**.js",
+    "**/src/js/sites/**.js",
+    "**/src/js/services/**.js",
+    "!**/src/js/18n/*.js",
+    "!**/src/js/background.js"
+  ],
+  "moduleFileExtensions": [
+    "js",
+    "json",
+    "ts",
+    "vue"
+  ],
+  "roots": [
+    "<rootDir>/src"
+  ],
+  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|js)$",
+  "transform": {
+    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+    "^.+\\.(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js",
+    "^.+\\.vue$": "<rootDir>/node_modules/jest-vue-preprocessor"
+  },
+  "verbose": true
+}

.yarnrc

@@ -0,0 +1 @@
+save-prefix false

package.json

@@ -4,74 +4,69 @@
   "description": "Adds little side panel to some real estate sites which shows you quality of location eg. commutation times, air pollution.",
   "private": true,
   "scripts": {
-    "cleanup": "rm -rf build",
     "build": "node scripts/build.js",
+    "cleanup": "rm -rf build coverage",
     "commit": "git-cz",
-    "lint": "eslint -c .eslintrc ./src/",
-    "start": "yarn cleanup && node scripts/webserver.js",
-    "test": "jest",
-    "test:ci": "yarn lint && yarn test -- --coverage"
+    "js:lint": "eslint -c .eslintrc ./src/",
+    "js:lint:fix": "eslint -c .eslintrc --fix ./src/",
+    "prepush": "npm run js:lint && npm run ts:style && npm t",
+    "start": "npm run cleanup && node scripts/webserver.js",
+    "test": "jest --config .jestrc",
+    "test:ci": "npm run js:lint && npm run ts:style && npm t -- --watch false --coverage",
+    "test:watch": "npm t -- --watch",
+    "ts:format:fix": "tsfmt -r",
+    "ts:format": "tsfmt --verify",
+    "ts:lint:fix": "npm run ts:lint -- --fix",
+    "ts:lint": "tslint \"src/**/*.ts\"",
+    "ts:style:fix": "npm run ts:format:fix && npm run ts:lint:fix",
+    "ts:style": "npm run ts:format && npm run ts:lint"
   },
   "dependencies": {
-    "dotenv": "2.0.0",
-    "font-awesome": "^4.7.0",
+    "font-awesome": "4.7.0",
     "jquery": "3.2.1",
+    "ts-jest": "19.0.6",
     "vue": "2.1.4",
     "vue-i18n": "5.0.3"
   },
   "devDependencies": {
+    "@types/chrome": "0.0.44",
+    "@types/jest": "19.2.2",
+    "@types/jquery": "2.0.41",
+    "awesome-typescript-loader": "3.1.2",
     "babel-core": "6.24.0",
-    "babel-loader": "6.4.1",
     "babel-plugin-transform-runtime": "6.23.0",
     "babel-preset-es2015": "6.24.0",
-    "chai": "^3.5.0",
+    "chai": "3.5.0",
     "commitizen": "2.9.6",
-    "copy-webpack-plugin": "^4.0.1",
+    "copy-webpack-plugin": "4.0.1",
     "css-loader": "0.28.0",
     "cz-conventional-changelog": "2.0.0",
+    "dotenv": "4.0.0",
     "eslint": "3.19.0",
     "eslint-loader": "1.7.1",
-    "expose-loader": "0.7.1",
+    "expose-loader": "0.7.3",
     "extract-text-webpack-plugin": "2.1.0",
     "fs-extra": "2.1.2",
     "html-loader": "0.4.5",
     "html-webpack-plugin": "2.28.0",
+    "husky": "0.13.3",
     "jest": "19.0.2",
     "jest-vue-preprocessor": "0.2.0",
     "postcss-loader": "1.3.3",
-    "precss": "^1.4.0",
+    "precss": "1.4.0",
     "progress-bar-webpack-plugin": "1.9.3",
     "pug": "2.0.0-beta11",
     "style-loader": "0.16.1",
+    "tslint": "4.5.0",
+    "tslint-config-standard": "4.0.0",
+    "typescript": "2.2.2",
+    "typescript-formatter": "5.1.2",
     "vue-loader": "11.3.4",
     "vue-template-compiler": "2.1.4",
-    "webpack": "2.3.2",
+    "webpack": "2.3.3",
     "webpack-dev-server": "2.4.2",
     "write-file-webpack-plugin": "4.0.0"
   },
-  "jest": {
-    "collectCoverage": false,
-    "collectCoverageFrom": [
-      "**/src/js/*.js",
-      "**/src/**/*.vue",
-      "**/src/js/components/**.js",
-      "**/src/js/sites/**.js",
-      "**/src/js/services/**.js",
-      "!**/src/js/18n/*.js",
-      "!**/src/js/background.js"
-    ],
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "vue"
-    ],
-    "testRegex": "<rootDir>/src/.*\\.spec\\.(js)$",
-    "transform": {
-      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
-      "^.+\\.vue$": "<rootDir>/node_modules/jest-vue-preprocessor"
-    },
-    "verbose": true
-  },
   "engines": {
     "node": ">=6.3"
   },

scripts/build.js

@@ -1,11 +1,11 @@
-process.env.NODE_ENV = 'production';
+process.env.NODE_ENV = 'production'
 
-const webpack = require('webpack');
-const config = require('../webpack.config');
+const webpack = require('webpack')
+const config = require('../webpack.config')
 
-require('./prepare');
+require('./prepare')
 
 webpack(
   config,
-  function (err) { if (err) throw err; }
-);
+  function (err) { if (err) throw err }
+)

scripts/prepare.js

@@ -1,13 +1,13 @@
-const fs = require('fs-extra');
-const manifest = require('../src/manifest.json');
-const packageJson = require('../package.json');
-const path = require('path');
+const fs = require('fs-extra')
+const manifest = require('../src/manifest.json')
+const packageJson = require('../package.json')
+const path = require('path')
 
 // generates the manifest file using the package.json information
 fs.outputFile(
   path.join(__dirname, '../build/manifest.json'),
   JSON.stringify(Object.assign({}, manifest, {
     description: packageJson.description,
-    version: packageJson.version
+    version: packageJson.version,
   }))
-);
+)

scripts/webserver.js

@@ -1,45 +1,45 @@
-const WebpackDevServer = require('webpack-dev-server');
-const webpack = require('webpack');
-const path = require('path');
-const WriteFilePlugin = require('write-file-webpack-plugin');
+const WebpackDevServer = require('webpack-dev-server')
+const webpack = require('webpack')
+const path = require('path')
+const WriteFilePlugin = require('write-file-webpack-plugin')
 
-const config = require('../webpack.config');
-const env = require('./../config/env');
+const config = require('../webpack.config')
+const env = require('./../config/env')
 
-require('./prepare');
+require('./prepare')
 
 const {
   entry,
   excludeEntriesToHotReload = [],
   plugins = [],
-} = config;
+} = config
 
 Object.keys(entry)
   .filter(entryName => !excludeEntriesToHotReload.includes(entryName)) // not possible to hot-reload contentscript
   .forEach(entryName => {
     entry[entryName] = [
       `webpack-dev-server/client?https://localhost:${env.PORT}`,
       'webpack/hot/dev-server',
-      entry[entryName]
-    ];
-  });
+      entry[entryName],
+    ]
+  })
 
 const compilerOptions = Object.assign({}, config, {
   entry,
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new WriteFilePlugin({ log: false}),
-    ...plugins
-  ]
-});
+    ...plugins,
+  ],
+})
 
-const compiler = webpack(compilerOptions);
+const compiler = webpack(compilerOptions)
 const server = new WebpackDevServer(compiler, {
   hot: true,
   https: true,
   contentBase: path.join(__dirname, '../build'),
   headers: { 'Access-Control-Allow-Origin': '*' },
-  stats: { colors: true }
-});
+  stats: { colors: true },
+})
 
-server.listen(env.PORT);
+server.listen(env.PORT)

src/globals.d.ts

@@ -0,0 +1,12 @@
+declare module '*.vue' {
+  import * as Vue from 'vue'
+  export default typeof Vue
+}
+
+declare module 'vue-i18n'
+
+declare module '*.html'
+
+declare namespace RR {
+  function logInfo(s: string): void
+}

src/js/background.js

@@ -0,0 +1,15 @@
+/**
+ * Code that detects host page and switches icons in toolbar.
+ */
+chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
+  console.log('request', request)
+  if (request.switchIconOn) {
+    chrome.browserAction.setIcon({
+      path: {
+        19: 'images/icon-19.png',
+        38: 'images/icon-19.png',
+      },
+      tabId: sender.tab && sender.tab.id,
+    })
+  }
+})