Merge pull request #75 from agiledigital/ts-conversion

Convert to TypeScript

.circleci/config.yml

@@ -25,7 +25,6 @@ jobs:
             - ./node_modules
           key: v2-dependencies-{{ checksum "package.json" }}
 
-
       - persist_to_workspace:
           root: ~/repo
           paths:
@@ -53,4 +52,4 @@ workflows:
             - build
           filters:
             branches:
-              only: /master/
+              only: /master/

package.json

@@ -4,7 +4,7 @@
   "description": "Overlays the Mule Preview plugin over SCM web applications",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.6.0",
+    "@babel/core": "^7.6.2",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-decorators": "^7.6.0",
     "@babel/plugin-proposal-do-expressions": "^7.6.0",
@@ -21,34 +21,34 @@
     "@babel/plugin-proposal-throw-expressions": "^7.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-syntax-import-meta": "^7.0.0",
-    "@babel/preset-env": "^7.6.0",
+    "@babel/preset-env": "^7.6.2",
     "@babel/preset-react": "^7.0.0",
     "@semantic-release/changelog": "^3.0.4",
     "@semantic-release/commit-analyzer": "^6.3.0",
     "@semantic-release/git": "^7.0.16",
     "@semantic-release/github": "^5.4.4",
     "@semantic-release/npm": "^5.1.15",
     "@semantic-release/release-notes-generator": "^7.3.0",
+    "@types/react": "^16.9.3",
+    "@types/react-dom": "^16.9.1",
     "addons-linter": "^1.14.0",
+    "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.0",
     "chrome-webstore-upload-cli": "^1.2.0",
     "concurrently": "^4.1.2",
     "core-js": "^3.2.1",
     "css-loader": "^3.2.0",
     "cz-conventional-changelog": "^3.0.2",
-    "eslint": "^6.3.0",
-    "eslint-config-prettier": "^6.2.0",
-    "eslint-loader": "^2.2.1",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.14.3",
     "file-loader": "^4.2.0",
+    "hard-source-webpack-plugin": "^0.13.1",
     "install": "^0.13.0",
     "mini-css-extract-plugin": "^0.8.0",
     "node-libs-browser": "^2.2.1",
     "node-sass": "^4.6.0",
     "npm": "^6.11.3",
     "prettier": "^1.18.2",
+    "prettier-check": "^2.0.0",
     "prettier-stylelint": "^0.4.2",
     "rimraf": "^2.7.1",
     "sass-loader": "^7.3.1",
@@ -58,31 +58,46 @@
     "source-map-loader": "github:noxharmonium/source-map-loader",
     "style-loader": "^0.23.1",
     "stylelint": "^10.1.0",
-    "stylelint-config-prettier": "^5.2.0",
+    "stylelint-config-prettier": "^5.3.0",
     "stylelint-config-standard": "^18.3.0",
     "stylelint-prettier": "^1.1.1",
     "stylelint-webpack-plugin": "^0.10.5",
+    "tslint": "^5.20.0",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-eslint-rules": "^5.4.0",
+    "tslint-immutable": "^6.0.1",
+    "tslint-loader": "^3.5.4",
+    "tslint-sonarts": "^1.9.0",
+    "type-coverage": "^2.3.0",
+    "typescript": "^3.6.3",
     "url-loader": "^2.1.0",
-    "web-ext": "^3.1.0",
-    "webpack": "^4.39.3",
+    "web-ext": "^3.2.0",
+    "webextension-polyfill-ts": "^0.10.0",
+    "webpack": "^4.41.0",
     "webpack-cli": "^3.3.9"
   },
   "scripts": {
     "prebuild": "rimraf ./extension/dist/ && rimraf .cache && rimraf build/*",
     "watch-extension": "web-ext run -s extension/ --verbose",
     "watch-webpack": "webpack --config webpack.config.js -w -d",
     "start": "npm run prebuild && concurrently --kill-others \"npm run watch-extension\" \"npm run watch-webpack\"",
-    "build": "npm run prebuild && webpack --config webpack.production.config.js -p",
-    "lint": "eslint --fix src && npx stylelint --fix \"src/**/*.scss\" \"src/**/*.css\" \"src/**/*.html\"",
-    "release": "semantic-release"
+    "build": "npm run prebuild && npm run lint && npm run format-check && npm run type-coverage && webpack --config webpack.production.config.js -p",
+    "lint": "npx stylelint --fix \"src/**/*.scss\" \"src/**/*.css\" \"src/**/*.html\" && tslint --fix -p tsconfig.json -c tslint.json",
+    "release": "semantic-release",
+    "format": "prettier --write '{src,test}/**/*.{ts,tsx,js,jsx}'",
+    "format-check": "prettier-check src/**/*",
+    "type-coverage": "type-coverage --strict --detail --ignore-catch"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/NoxHarmonium/mule-preview"
   },
   "keywords": [
     "extension",
-    "extension-boilerplate",
+    "mulesoft",
+    "scm",
+    "diff",
+    "bitbucket",
     "chrome-extension",
     "firefox-addon"
   ],
@@ -104,9 +119,8 @@
   "dependencies": {
     "@agiledigital/mule-preview": "^2.1.0",
     "cross-fetch": "^3.0.4",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "webextension-polyfill": "^0.4.0"
+    "react": "^16.10.1",
+    "react-dom": "^16.10.1"
   },
   "engines": {
     "node": ">= 10.0.0"
@@ -116,5 +130,8 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "typeCoverage": {
+    "atLeast": 99.79
   }
 }

src/app/background.js → src/app/background.ts

@@ -1,6 +1,7 @@
-import browser from "webextension-polyfill";
+import { browser, Runtime } from "webextension-polyfill-ts";
 import { messages } from "./constants";
 import { resetTab, toggleDiffOnTab } from "./messenging";
+import { Message } from "./types/messenging";
 
 const tabEnabledSet = new Set();
 
@@ -11,7 +12,9 @@ browser.tabs.onUpdated.addListener(async () => {
     active: true
   });
   const currentTabId = tabArray[0].id;
-  await resetTab(currentTabId);
+  if (currentTabId !== undefined) {
+    await resetTab(currentTabId);
+  }
 });
 
 const startDiff = async () => {
@@ -20,7 +23,9 @@ const startDiff = async () => {
     active: true
   });
   const currentTabId = tabArray[0].id;
-  await toggleDiffOnTab(currentTabId);
+  if (currentTabId !== undefined) {
+    await toggleDiffOnTab(currentTabId);
+  }
 };
 
 browser.browserAction.disable();
@@ -50,22 +55,28 @@ const updateButtonState = async () => {
   }
 };
 
-browser.runtime.onMessage.addListener(function(message, sender) {
-  const senderTabId = sender.tab.id;
-  console.log(
-    `Received message from [${senderTabId}]: [${JSON.stringify(message)}]`
-  );
-  if (message.type === messages.Supported && message.value) {
-    console.log("Adding tab to enabled set!");
-    tabEnabledSet.add(senderTabId);
-    console.log(tabEnabledSet);
-  } else {
-    console.log("Removing tab from enabled set!");
-    tabEnabledSet.delete(senderTabId);
-    console.log(tabEnabledSet);
+browser.runtime.onMessage.addListener(
+  async (rawMessage: unknown, sender: Runtime.MessageSender) => {
+    const message = rawMessage as Message;
+    if (sender.tab === undefined) {
+      return;
+    }
+    const senderTabId = sender.tab.id;
+    console.log(
+      `Received message from [${senderTabId}]: [${JSON.stringify(message)}]`
+    );
+    if (message.type === messages.Supported && message.value === true) {
+      console.log("Adding tab to enabled set!");
+      tabEnabledSet.add(senderTabId);
+      console.log(tabEnabledSet);
+    } else {
+      console.log("Removing tab from enabled set!");
+      tabEnabledSet.delete(senderTabId);
+      console.log(tabEnabledSet);
+    }
+    updateButtonState();
+    return false;
   }
-  updateButtonState();
-  return false;
-});
+);
 
 browser.tabs.onActivated.addListener(updateButtonState);

src/app/constants.js → src/app/constants.ts

@@ -1,6 +1,6 @@
-export const messages = Object.freeze({
+export const messages: Readonly<Record<string, string>> = {
   ToggleDiff: "ToggleDiff",
   Reset: "Reset",
   Supported: "Supported",
   BitbucketDataScraped: "BitbucketDataScraped"
-});
+};

src/app/inject.js → src/app/inject.ts

@@ -6,10 +6,13 @@
  * @param  {type} tag The tag as string, where the script will be append (default: 'body').
  * @see    {@link http://stackoverflow.com/questions/20499994/access-window-variable-from-content-script}
  */
-export const injectScript = (file_path, tag) => {
-  var node = document.getElementsByTagName(tag)[0];
-  var script = document.createElement("script");
+export const injectScript = (
+  filePath: string,
+  tag: string
+): HTMLScriptElement => {
+  const node = document.getElementsByTagName(tag)[0];
+  const script = document.createElement("script");
   script.setAttribute("type", "text/javascript");
-  script.setAttribute("src", file_path);
-  node.appendChild(script);
+  script.setAttribute("src", filePath);
+  return node.appendChild(script);
 };

src/app/main.js → src/app/main.ts

@@ -1,42 +1,46 @@
-import browser from "webextension-polyfill";
+import { browser, Runtime } from "webextension-polyfill-ts";
+import "../scss/extension.scss";
+import { messages } from "./constants";
+import { setTabSupportsMulePreview } from "./messenging";
+import { isDiffMode, stopDiff, toggleDiff } from "./modes/diff";
+import { isPreviewMode, togglePreview } from "./modes/preview";
 import {
   getBitbucketDiffElement,
-  isRunningInBitbucket,
-  getBitbucketFilePreviewElement
+  getBitbucketFilePreviewElement,
+  isRunningInBitbucket
 } from "./scms/bitbucket/ui";
-import { messages } from "./constants";
-import { toggleDiff, stopDiff, isDiffMode } from "./modes/diff";
-import { isPreviewMode, togglePreview } from "./modes/preview";
-import "../scss/extension.scss";
-import { setTabSupportsMulePreview } from "./messenging";
+import { Message } from "./types/messenging";
 
-const bitbucketPollPeriod = 1000; //ms
-const timeout = bitbucketPollPeriod * 10; //ms
+const bitbucketPollPeriod = 1000; // ms
+const timeout = bitbucketPollPeriod * 10; // ms
 const startTime = new Date().getTime();
 
 console.log("[Mule Preview] Plugin Initialising");
 
 const getRuntime = () => new Date().getTime() - startTime;
 const isTimedOut = () => getRuntime() > timeout;
 
-browser.runtime.onMessage.addListener(function(message, sender) {
-  console.log(
-    `[Mule Preview] Received message from [${sender}]: [${JSON.stringify(
-      message
-    )}]`
-  );
-  if (message.type === messages.ToggleDiff) {
-    if (getBitbucketDiffElement() !== null) {
-      toggleDiff();
-    }
-    if (getBitbucketFilePreviewElement() !== null) {
-      togglePreview();
+browser.runtime.onMessage.addListener(
+  async (rawMessage: unknown, sender: Runtime.MessageSender) => {
+    const message = rawMessage as Message;
+    console.log(
+      `[Mule Preview] Received message from [${sender}]: [${JSON.stringify(
+        message
+      )}]`
+    );
+    if (message.type === messages.ToggleDiff) {
+      if (getBitbucketDiffElement() !== null) {
+        toggleDiff();
+      }
+      if (getBitbucketFilePreviewElement() !== null) {
+        togglePreview();
+      }
+    } else if (message.type === messages.Reset) {
+      reset();
     }
-  } else if (message.type === messages.Reset) {
-    reset();
+    return true; // Enable async
   }
-  return true; // Enable async
-});
+);
 
 const onReady = () => {
   console.log("[Mule Preview] Bitbucket ready. Enabling button");

src/app/messenging.ts

@@ -0,0 +1,25 @@
+import { browser } from "webextension-polyfill-ts";
+import { messages } from "./constants";
+import { Message } from "./types/messenging";
+
+const sendMessageRobust = async (currentTabId: number, message: Message) =>
+  browser.tabs.sendMessage(currentTabId, message).catch((error: unknown) => {
+    console.warn(`Could not send message: [${error}]. Ignoring...`);
+  });
+
+export const setTabSupportsMulePreview = async (supported: boolean) => {
+  await browser.runtime.sendMessage({
+    type: messages.Supported,
+    value: supported
+  });
+};
+
+export const resetTab = async (tabId: number) =>
+  sendMessageRobust(tabId, {
+    type: messages.Reset
+  });
+
+export const toggleDiffOnTab = async (tabId: number) =>
+  sendMessageRobust(tabId, {
+    type: messages.ToggleDiff
+  });