Web ext integration for dev mode(#116)

* add web-ext dep

* create xrun tasks to wrap running extension targets

* add wait-on dep to delay launch of task when ready

* add legacy wait files for web-ext scripts

* create a dev task for next builds

* add dev:legacy task to allow for a quick dev mode

* reuse watch task to have dev env

package.json

@@ -2,6 +2,7 @@
   "name": "chrome-wakatime",
   "private": true,
   "scripts": {
+    "dev": "clap dev",
     "postinstall": "clap postinstall",
     "lint": "clap lint",
     "start": "clap build",
@@ -16,13 +17,13 @@
     }
   },
   "lint-staged": {
+    "*.json": [
+      "prettier --write"
+    ],
     "*.{js|jsx|ts|tsx}": [
       "eslint",
       "prettier --write",
       "git add"
-    ],
-    "*.json": [
-      "prettier --write"
     ]
   },
   "dependencies": {
@@ -63,6 +64,7 @@
     "@types/redux-logger": "^3.0.8",
     "@types/remote-redux-devtools": "^0.5.4",
     "@types/shelljs": "^0.8.8",
+    "@types/wait-on": "^5.2.0",
     "@typescript-eslint/eslint-plugin": "^4.13.0",
     "@typescript-eslint/parser": "^4.13.0",
     "@xarc/run": "^1.0.4",
@@ -114,6 +116,8 @@
     "ts-loader": "^8.0.14",
     "ts-node": "^9.1.1",
     "typescript": "^4.1.3",
+    "wait-on": "^5.2.1",
+    "web-ext": "^5.5.0",
     "webpack": "^5.14.0",
     "webpack-cli": "^4.3.1"
   }

src/stores/createStore.ts

@@ -1,3 +1,4 @@
+import { EHOSTUNREACH } from 'constants';
 import { configureStore, Store } from '@reduxjs/toolkit';
 import logger from 'redux-logger';
 import { reduxBatch } from '@manaflair/redux-batch';
@@ -18,12 +19,10 @@ const preloadedState: RootState = {
 
 export type RootStore = Store<RootState>;
 export default (appName: string): RootStore => {
-  const enhancers = [reduxBatch];
+  const enhancers = [];
+  enhancers.push(reduxBatch);
   if (!isProd()) {
     enhancers.push(
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       devToolsEnhancer({ hostname: 'localhost', name: appName, port: 8000, realtime: true }),
     );
   }

webpack.config.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import { join } from 'path';
 import * as webpack from 'webpack';
-import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import CopyPlugin from 'copy-webpack-plugin';
 
 type BrowserTypes = 'chrome' | 'firefox';
@@ -40,7 +39,6 @@ const getConfigByBrowser = (isProd: boolean, browser: BrowserTypes): webpack.Con
       path: join(__dirname, 'dist', browser),
     },
     plugins: [
-      new CleanWebpackPlugin(),
       new CopyPlugin({
         patterns: [
           { from: cssFolder, to: 'public/css' },

xclap.ts

@@ -4,8 +4,41 @@
 import * as fs from 'fs';
 import { join } from 'path';
 import * as shelljs from 'shelljs';
+import waitOn from 'wait-on';
 const { load, exec, serial, concurrent } = require('@xarc/run');
 
+const waitForFilesTask = (...files: string[]) => (): Promise<unknown> => {
+  return waitOn({
+    delay: 2000,
+    interval: 3000,
+    resources: [...files],
+    verbose: true,
+  });
+};
+const nextBuildFolder = join(__dirname, 'dist');
+const ffNextBuildFolder = join(nextBuildFolder, 'firefox');
+const chromeNextBuildFolder = join(nextBuildFolder, 'chrome');
+const filesNeededForNextBuild = [
+  'manifest.json',
+  'background.js',
+  'options.js',
+  'options.html',
+  'popup.js',
+  'popup.html',
+  'public/js/browser-polyfill.min.js',
+  'public/css/app.css',
+  'graphics/wakatime-logo-16.png',
+];
+const chromeNextBuildFileWaitTask = waitForFilesTask(
+  nextBuildFolder,
+  chromeNextBuildFolder,
+  ...filesNeededForNextBuild.map((f) => join(chromeNextBuildFolder, f)),
+);
+const ffNextBuildFileWaitTask = waitForFilesTask(
+  nextBuildFolder,
+  ffNextBuildFolder,
+  ...filesNeededForNextBuild.map((f) => join(ffNextBuildFolder, f)),
+);
 const makePublicFolder = () => {
   if (!fs.existsSync('public/js')) {
     if (!fs.existsSync('public')) {
@@ -30,9 +63,26 @@ const copyFromNodeModules = () => {
   );
 };
 load({
-  build: [serial('postinstall', exec('gulp')), 'webpack'],
-  clean: [exec('rimraf public coverage vendor'), 'clean:webpack'],
+  build: [
+    serial('postinstall', exec('gulp')),
+    'webpack',
+    concurrent(
+      exec('web-ext build'),
+      exec(`web-ext build -a dist/firefox/web-ext-artifacts --source-dir ${ffNextBuildFolder}`),
+    ),
+  ],
+  clean: [exec('rimraf public coverage vendor web-ext-artifacts'), 'clean:webpack'],
   'clean:webpack': exec('rimraf dist'),
+  dev: [
+    'clean',
+    'postinstall',
+    concurrent('watch', 'web-ext:run:firefox-next', 'web-ext:run:chrome-next'),
+  ],
+  'dev:legacy': [
+    'clean',
+    'postinstall',
+    concurrent(exec('gulp watch'), 'web-ext:run:firefox-legacy', 'web-ext:run:chrome-legacy'),
+  ],
   eslint: exec('eslint src . --fix'),
   less: exec('lessc assets/less/app.less public/css/app.css'),
   lint: ['prettier', 'eslint'],
@@ -43,8 +93,32 @@ load({
   'test-jest': [exec('jest --clearCache'), exec('jest --verbose --coverage')],
   'test-jest-update': exec('jest -u'),
   'test-js': 'phantomjs tests/run.js',
+  'wait:legacy-files': waitForFilesTask(
+    'manifest.json',
+    'public/js/browser-polyfill.min.js',
+    'public/js/events.js',
+    'options.html',
+  ),
   watch: concurrent('watch-jest', 'webpack:watch', 'remotedev-server'),
   'watch-jest': exec('jest --watch'),
+  'web-ext:run:chrome': concurrent('web-ext:run:chrome-next', 'web-ext:run:chrome-legacy'),
+  'web-ext:run:chrome-legacy': [
+    'wait:legacy-files',
+    exec('web-ext run -t chromium --source-dir .'),
+  ],
+  'web-ext:run:chrome-next': [
+    chromeNextBuildFileWaitTask,
+    exec('web-ext run -t chromium --source-dir dist/chrome'),
+  ],
+  'web-ext:run:firefox': concurrent('web-ext:run:firefox-next', 'web-ext:run:firefox-legacy'),
+  'web-ext:run:firefox-legacy': [
+    'wait:legacy-files',
+    exec('web-ext run -t firefox-desktop --source-dir .'),
+  ],
+  'web-ext:run:firefox-next': [
+    ffNextBuildFileWaitTask,
+    exec('web-ext run -t firefox-desktop --source-dir dist/firefox'),
+  ],
   webpack: ['clean:webpack', exec('webpack --mode production')],
   'webpack:dev': ['clean:webpack', exec('webpack --mode development')],
   'webpack:watch': ['clean:webpack', exec('webpack --mode development --watch')],