Add typescript

Author: kungfux

README.md

@@ -10,4 +10,14 @@
 
 ### How to build and test
 
-- TBD
+- Install latest LTS versions of [Node.js](https://nodejs.org/en) and npm
+- Execute `npm install` to restore project dependencies
+- Run `npm run start` to compile and bundle source code
+- Load unpacked extension from `dist` folder into your browser
+  - [Firefox](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension#installing)
+  - [Chrome](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked)
+
+# License information
+
+- Check out [LICENSE](LICENSE) for the license details
+- Icons by [Flatart](https://www.freepik.com/author/flatart)

package.json

@@ -4,7 +4,8 @@
   "description": "Browser extension to automate typical actions in JIRA",
   "private": true,
   "scripts": {
-    "build": "webpack",
+    "start": "webpack --watch --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -19,7 +20,10 @@
   "homepage": "https://github.com/kungfux/jira-automation-extension#readme",
   "devDependencies": {
     "copy-webpack-plugin": "^11.0.0",
+    "ts-loader": "^9.4.2",
+    "typescript": "^5.0.4",
     "webpack": "^5.78.0",
-    "webpack-cli": "^5.0.1"
+    "webpack-cli": "^5.0.1",
+    "webpack-merge": "^5.8.0"
   }
 }

src/index.js renamed to src/index.ts

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "moduleResolution": "node"
+  }
+}

tsconfig.json

@@ -2,11 +2,23 @@ const path = require('path');
 const CopyPlugin = require("copy-webpack-plugin");
 
 module.exports = {
-  entry: './src/index.js',
+  entry: './src/index.ts',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
   plugins: [
     new CopyPlugin({
       patterns: [
@@ -15,4 +27,4 @@ module.exports = {
       ],
     }),
   ],
-};
+};

webpack.config.js renamed to webpack.common.js

@@ -0,0 +1,7 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+});

webpack.dev.js

@@ -0,0 +1,6 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+});