setup a eslint/prettier setup with plugins, and a basic webpack setup

.eslintignore

@@ -1,2 +1,5 @@
 assets
 public
+tests
+coverage
+gulpfile.js

.eslintrc.js

@@ -0,0 +1,53 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    es6: true,
+    'jest/globals': true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'kentcdodds/best-practices',
+    'kentcdodds/es6/possible-errors',
+    'kentcdodds/import',
+    'kentcdodds/jest',
+    'kentcdodds/possible-errors',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/errors',
+    'plugin:import/typescript',
+    'plugin:prettier/recommended',
+    'plugin:react/recommended',
+    'plugin:typescript-sort-keys/recommended',
+  ],
+  globals: {
+    browser: true,
+    chrome: true,
+    phantom: true,
+  },
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+  },
+  plugins: ['react', '@typescript-eslint', 'typescript-sort-keys', 'sort-keys-fix'],
+  rules: {
+    'prettier/prettier': 'error',
+    'sort-keys-fix/sort-keys-fix': 'error',
+  },
+  settings: {
+    'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
+    'import/ignore': ['.scss', '.css'],
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+};

.gitignore

@@ -34,3 +34,6 @@ vendor/bower_components
 public/
 web-ext-artifacts/
 .web-extension-id
+
+# Distribution folders
+dist

.jshintignore

@@ -1,5 +0,0 @@
-coverage/
-node_modules/
-public/
-vendor/
-tests/

.jshintrc

@@ -1,10 +0,0 @@
-{
-  "node": true,
-  "curly": true,
-  "latedef": true,
-  "quotmark": true,
-  "undef": true,
-  "unused": true,
-  "trailing": true,
-  "predef": ["chrome"]
-}

.prettierrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  plugins: [require('prettier-plugin-sort-json'), require('prettier-plugin-packagejson')],
   printWidth: 100,
   singleQuote: true,
   trailingComma: 'all',

.validate.json

@@ -1,6 +1,6 @@
 {
+  "pre-commit": ["lint", "validate", "test"],
   "scripts": {
     "lint": "jshint ."
-  },
-  "pre-commit": ["lint", "validate", "test"]
+  }
 }

manifest.json

@@ -1,23 +1,4 @@
 {
-  "manifest_version": 2,
-  "name": "WakaTime",
-  "version": "2.0.1",
-  "description": "Automatic time tracking for Chrome.",
-  "homepage_url": "https://wakatime.com",
-  "devtools_page": "devtools.html",
-  "icons": {
-    "16": "graphics/wakatime-logo-16.png",
-    "48": "graphics/wakatime-logo-48.png",
-    "128": "graphics/wakatime-logo-128.png"
-  },
-  "permissions": [
-    "https://api.wakatime.com/*",
-    "https://wakatime.com/*",
-    "alarms",
-    "tabs",
-    "storage",
-    "idle"
-  ],
   "background": {
     "scripts": ["public/js/browser-polyfill.min.js", "public/js/events.js"],
     "persistent": false
@@ -30,14 +11,33 @@
     "default_title": "WakaTime",
     "default_popup": "popup.html"
   },
-  "options_ui": {
-    "page": "options.html",
-    "chrome_style": false
-  },
   "browser_specific_settings": {
     "gecko": {
       "id": "addon@wakatime.com",
       "strict_min_version": "48.0"
     }
-  }
+  },
+  "description": "Automatic time tracking for Chrome.",
+  "devtools_page": "devtools.html",
+  "homepage_url": "https://wakatime.com",
+  "icons": {
+    "16": "graphics/wakatime-logo-16.png",
+    "48": "graphics/wakatime-logo-48.png",
+    "128": "graphics/wakatime-logo-128.png"
+  },
+  "manifest_version": 2,
+  "name": "WakaTime",
+  "options_ui": {
+    "page": "options.html",
+    "chrome_style": false
+  },
+  "permissions": [
+    "https://api.wakatime.com/*",
+    "https://wakatime.com/*",
+    "alarms",
+    "tabs",
+    "storage",
+    "idle"
+  ],
+  "version": "2.0.1"
 }

package.json

@@ -1,13 +1,14 @@
 {
   "name": "chrome-wakatime",
+  "private": true,
   "scripts": {
-    "test": "clap test",
-    "start": "clap build",
     "gulp": "gulp",
-    "watch": "gulp watch",
-    "lint": "clap lint",
     "postinstall": "clap postinstall",
-    "validate": "npm ls"
+    "lint": "clap lint",
+    "start": "clap build",
+    "test": "clap test",
+    "validate": "npm ls",
+    "watch": "gulp watch"
   },
   "husky": {
     "hooks": {
@@ -26,28 +27,54 @@
     ]
   },
   "jest": {
-    "verbose": true,
-    "testURL": "http://localhost/",
+    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
+    "testDirectoryName": "tests",
     "testFileExtensions": [
       "jest.js"
     ],
-    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
-    "testDirectoryName": "tests",
+    "testURL": "http://localhost/",
     "unmockedModulePathPatterns": [
       "<rootDir>/node_modules/react"
-    ]
+    ],
+    "verbose": true
+  },
+  "dependencies": {
+    "bootstrap": "3.4.1",
+    "classnames": "^2.2.5",
+    "create-react-class": "^15.6.3",
+    "font-awesome": "4.6.3",
+    "jquery": "^3.0.0",
+    "moment": "^2.13.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-transition-group": "^1.0.0",
+    "webextension-polyfill": "^0.4.0"
   },
-  "private": true,
   "devDependencies": {
+    "@types/chrome": "0.0.128",
+    "@types/jest": "^26.0.20",
+    "@types/jquery": "^3.5.5",
     "@types/node": "^14.14.20",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.13.0",
+    "@typescript-eslint/parser": "^4.13.0",
     "@xarc/run": "^1.0.4",
     "babel-jest": "^22.1.0",
     "bower": "^1.7.9",
     "chai": "^4.1.2",
     "del": "^3.0.0",
     "eslint": "^7.17.0",
+    "eslint-config-kentcdodds": "^17.3.0",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-sort-keys-fix": "^1.1.1",
+    "eslint-plugin-typescript-sort-keys": "^1.5.0",
     "gulp": "^3.9.1",
     "husky": "^4.3.7",
+    "jest": "^26.6.3",
     "jest-cli": "^22.1.4",
     "jsdom": "^16.4.0",
     "jshint": "^2.9.2",
@@ -61,24 +88,17 @@
     "phantomjs": "^2.1.7",
     "popper.js": "^1.14.6",
     "prettier": "^2.2.1",
+    "prettier-plugin-packagejson": "^2.2.9",
+    "prettier-plugin-sort-json": "0.0.1",
     "rimraf": "^3.0.2",
     "sinon": "^4.2.2",
     "sinon-chai": "^2.8.0",
     "sinon-chrome": "^2.2.4",
     "traceur": "^0.0.111",
+    "ts-loader": "^8.0.14",
     "ts-node": "^9.1.1",
-    "typescript": "^4.1.3"
-  },
-  "dependencies": {
-    "bootstrap": "3.4.1",
-    "classnames": "^2.2.5",
-    "create-react-class": "^15.6.3",
-    "font-awesome": "4.6.3",
-    "jquery": "^3.0.0",
-    "moment": "^2.13.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-transition-group": "^1.0.0",
-    "webextension-polyfill": "^0.4.0"
+    "typescript": "^4.1.3",
+    "webpack": "^5.14.0",
+    "webpack-cli": "^4.3.1"
   }
 }

src/app.tsx

@@ -0,0 +1 @@
+// Stub for port of previous extension

tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "es5",
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react",
+    "outDir": "lib",
+    "lib": ["es2015", "es2016", "es2017", "dom"],
+    "baseUrl": "./",
+    "paths": {}
+  },
+  "exclude": ["**/lib/", "**/*.test.ts"]
+}

webpack.config.ts

@@ -0,0 +1,30 @@
+import * as path from 'path';
+import * as webpack from 'webpack';
+
+export default (): webpack.Configuration[] => {
+  const cfgs: webpack.Configuration[] = [];
+  const chromeExtCfg: webpack.Configuration = {
+    entry: {
+      app: [path.join(__dirname, 'src', 'app.tsx')],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx|ts|tsx)$/,
+          use: 'ts-loader',
+        },
+      ],
+    },
+    output: {
+      filename: '[name].js',
+      path: path.join(__dirname, 'dist', 'chrome'),
+    },
+    plugins: [],
+    resolve: {
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    },
+  };
+  cfgs.push(chromeExtCfg);
+
+  return cfgs;
+};

xclap.ts

@@ -1,12 +1,19 @@
-const { load, exec, concurrent, serial } = require('@xarc/run');
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { load, exec, serial } = require('@xarc/run');
 
 load({
-  build: ['postinstall', exec('gulp'), 'prettier'],
+  build: [serial('postinstall', exec('gulp'), 'webpack', 'prettier'), 'webpack'],
   clean: exec('rimraf public coverage vendor'),
-  prettier: [exec('prettier --write .')],
-  lint: ['prettier'],
+  'clean:webpack': exec('rimraf dist'),
+  eslint: exec('eslint src . --fix'),
+  lint: ['prettier', 'eslint'],
   postinstall: ['clean', exec('gulp postinstall')],
+  prettier: [exec('prettier --write .')],
   test: ['build', 'lint', 'test-jest', 'test-js'],
   'test-jest': [exec('jest --clearCache'), exec('jest --verbose --coverage')],
   'test-js': 'phantomjs tests/run.js',
+  webpack: ['clean:webpack', exec('webpack --mode production')],
+  'webpack:dev': ['clean:webpack', exec('webpack --mode development')],
 });