feat: TypeScript basic

package.json

@@ -22,6 +22,9 @@
     "react-dom": "^16.4.0"
   },
   "devDependencies": {
+    "@types/react": "^16.7.18",
+    "@types/react-dom": "^16.0.11",
+    "awesome-typescript-loader": "^5.2.1",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.2",
@@ -31,7 +34,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
-    "copy-webpack-plugin": "^4.2.0",
+    "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^0.28.7",
     "eslint": "^4.19.1",
     "eslint-plugin-babel": "^5.1.0",
@@ -46,9 +49,11 @@
     "react-life-hook": "^0.2.0",
     "style-loader": "^0.19.0",
     "svgr": "^1.6.0",
+    "typescript": "^3.2.2",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.6.2",
-    "webpack": "^3.8.1"
+    "webpack": "^4.28.2",
+    "webpack-cli": "^3.1.2"
   },
   "prettier": {
     "printWidth": 100,

src/analytics.ts

@@ -1,4 +1,4 @@
-import { version } from '../package'
+import { version } from '../package.json'
 // TODO: set this through ENV or something else
 const LOG_ENDPOINT = 'https://enix.one/gitako/log'
 

src/content.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
 import Gitako from 'components/Gitako'
 import { addMiddleware } from 'driver/connect'
 import { withErrorLog } from 'analytics'

tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "files": ["src/content.jsx"],
+  "compilerOptions": {
+    "target": "es2015",
+    "outDir": "dist",
+    "jsx": "react",
+    "allowJs": true,
+    "module": "commonjs",
+    "noImplicitAny": true,
+    "resolveJsonModule": true,
+    "lib": ["dom", "es2015"],
+    "baseUrl": ".",
+    "experimentalDecorators": true,
+    "paths": {
+      "*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}

webpack.config.js

@@ -20,7 +20,8 @@ const plugins = [
   new webpack.SourceMapDevToolPlugin({}),
 ]
 
-if (process.env.NODE_ENV === 'production') {
+const IN_PRODUCTION_MODE = process.env.NODE_ENV === 'production'
+if (IN_PRODUCTION_MODE) {
   plugins.push(
     new UglifyJSWebpackPlugin({
       cache: true,
@@ -40,25 +41,32 @@ if (process.env.NODE_ENV === 'production') {
 
 module.exports = {
   entry: {
-    content: './src/content.js',
+    content: './src/content.jsx',
   },
+  mode: IN_PRODUCTION_MODE ? 'production' : 'development',
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: '[name].js',
   },
   resolve: {
-    modules: [srcPath, packagesPath, 'node_modules']
+    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+    modules: [srcPath, packagesPath, 'node_modules'],
   },
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.jsx?$/,
         loader: 'babel-loader',
         options: {
           cacheDirectory: true,
         },
         include: [srcPath, packagesPath],
       },
+      {
+        test: /\.tsx?$/,
+        include: [srcPath],
+        loader: 'awesome-typescript-loader',
+      },
       {
         test: /\.less$/,
         loader: ['style-loader', 'css-loader', 'less-loader'],