From fa2042233f9c94b753e4aa02f1ca209fb43a68ac Mon Sep 17 00:00:00 2001
From: AlliVil <45206423+AlliVil@users.noreply.github.com>
Date: Sun, 20 Oct 2019 18:19:27 +0200
Subject: [PATCH 01/14] - run npm audit fix for lodash dependency
---
package-lock.json | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 2f2ca23..bda3fb0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5561,9 +5561,9 @@
}
},
"lodash": {
- "version": "4.17.11",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
- "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+ "version": "4.17.15",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+ "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
"dev": true
},
"loglevel": {
From e34eefe78e2c02ded142892dce8b3f53e162e90f Mon Sep 17 00:00:00 2001
From: AlliVil <45206423+AlliVil@users.noreply.github.com>
Date: Sun, 20 Oct 2019 19:04:50 +0200
Subject: [PATCH 02/14] - install devDependencies for typescript, react types,
and loaders for webpack
---
package-lock.json | 149 ++++++++++++++++++++++++++++++++++++++++++++++
package.json | 5 ++
2 files changed, 154 insertions(+)
diff --git a/package-lock.json b/package-lock.json
index bda3fb0..b903a4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -998,6 +998,31 @@
"integrity": "sha512-b8bbUOTwzIY3V5vDTY1fIJ+ePKDUBqt2hC2woVGotdQQhG/2Sh62HOKHrT7ab+VerXAcPyAiTEipPu/FsreUtg==",
"dev": true
},
+ "@types/prop-types": {
+ "version": "15.7.3",
+ "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+ "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+ "dev": true
+ },
+ "@types/react": {
+ "version": "16.9.9",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.9.tgz",
+ "integrity": "sha512-L+AudFJkDukk+ukInYvpoAPyJK5q1GanFOINOJnM0w6tUgITuWvJ4jyoBPFL7z4/L8hGLd+K/6xR5uUjXu0vVg==",
+ "dev": true,
+ "requires": {
+ "@types/prop-types": "*",
+ "csstype": "^2.2.0"
+ }
+ },
+ "@types/react-dom": {
+ "version": "16.9.2",
+ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.2.tgz",
+ "integrity": "sha512-hgPbBoI1aTSTvZwo8HYw35UaTldW6n2ETLvHAcfcg1FaOuBV3olmyCe5eMpx2WybWMBPv0MdU2t5GOcQhP+3zA==",
+ "dev": true,
+ "requires": {
+ "@types/react": "*"
+ }
+ },
"@types/tapable": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.4.tgz",
@@ -2486,6 +2511,12 @@
"integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
"dev": true
},
+ "csstype": {
+ "version": "2.6.7",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
+ "integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==",
+ "dev": true
+ },
"cyclist": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -6515,6 +6546,12 @@
"sha.js": "^2.4.8"
}
},
+ "picomatch": {
+ "version": "2.0.7",
+ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.0.7.tgz",
+ "integrity": "sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==",
+ "dev": true
+ },
"pify": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
@@ -7695,6 +7732,48 @@
"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
"dev": true
},
+ "source-maps-loader": {
+ "version": "0.1.9",
+ "resolved": "https://registry.npmjs.org/source-maps-loader/-/source-maps-loader-0.1.9.tgz",
+ "integrity": "sha1-rU7XNgauHM2vAdxSnnqn+H+ZWi4=",
+ "dev": true,
+ "requires": {
+ "async": "^1.4.2",
+ "loader-utils": "~0.2.2"
+ },
+ "dependencies": {
+ "async": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+ "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
+ "dev": true
+ },
+ "big.js": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
+ "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
+ "dev": true
+ },
+ "json5": {
+ "version": "0.5.1",
+ "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+ "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+ "dev": true
+ },
+ "loader-utils": {
+ "version": "0.2.17",
+ "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
+ "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+ "dev": true,
+ "requires": {
+ "big.js": "^3.1.3",
+ "emojis-list": "^2.0.0",
+ "json5": "^0.5.0",
+ "object-assign": "^4.0.1"
+ }
+ }
+ }
+ },
"spdx-correct": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
@@ -8178,6 +8257,70 @@
"integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
"dev": true
},
+ "ts-loader": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-6.2.0.tgz",
+ "integrity": "sha512-Da8h3fD+HiZ9GvZJydqzk3mTC9nuOKYlJcpuk+Zv6Y1DPaMvBL+56GRzZFypx2cWrZFMsQr869+Ua2slGoLxvQ==",
+ "dev": true,
+ "requires": {
+ "chalk": "^2.3.0",
+ "enhanced-resolve": "^4.0.0",
+ "loader-utils": "^1.0.2",
+ "micromatch": "^4.0.0",
+ "semver": "^6.0.0"
+ },
+ "dependencies": {
+ "braces": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+ "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+ "dev": true,
+ "requires": {
+ "fill-range": "^7.0.1"
+ }
+ },
+ "fill-range": {
+ "version": "7.0.1",
+ "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+ "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+ "dev": true,
+ "requires": {
+ "to-regex-range": "^5.0.1"
+ }
+ },
+ "is-number": {
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+ "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+ "dev": true
+ },
+ "micromatch": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+ "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+ "dev": true,
+ "requires": {
+ "braces": "^3.0.1",
+ "picomatch": "^2.0.5"
+ }
+ },
+ "semver": {
+ "version": "6.3.0",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+ "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+ "dev": true
+ },
+ "to-regex-range": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+ "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+ "dev": true,
+ "requires": {
+ "is-number": "^7.0.0"
+ }
+ }
+ }
+ },
"tslib": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
@@ -8215,6 +8358,12 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
"dev": true
},
+ "typescript": {
+ "version": "3.6.4",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.6.4.tgz",
+ "integrity": "sha512-unoCll1+l+YK4i4F8f22TaNVPRHcD9PA3yCuZ8g5e0qGqlVlJ/8FSateOLLSagn+Yg5+ZwuPkL8LFUc0Jcvksg==",
+ "dev": true
+ },
"ua-parser-js": {
"version": "0.7.20",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
diff --git a/package.json b/package.json
index 3f224cc..16bf3da 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
"@babel/core": "^7.6.4",
"@babel/preset-env": "^7.6.3",
"@babel/preset-react": "^7.6.3",
+ "@types/react": "^16.9.9",
+ "@types/react-dom": "^16.9.2",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
@@ -31,6 +33,9 @@
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.18.2",
"react-hot-loader": "^4.12.15",
+ "source-maps-loader": "^0.1.9",
+ "ts-loader": "^6.2.0",
+ "typescript": "^3.6.4",
"webpack": "^4.41.2",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.9",
From eb0f425ba02fdcbec8f38056e10d9ee616845ee8 Mon Sep 17 00:00:00 2001
From: AlliVil <45206423+AlliVil@users.noreply.github.com>
Date: Sun, 20 Oct 2019 21:54:47 +0200
Subject: [PATCH 03/14] - enable linting/validating on .ts and .tsx files
---
.vscode/settings.json | 8 ++++++++
1 file changed, 8 insertions(+)
create mode 100644 .vscode/settings.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..33017e7
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+ "eslint.validate": [
+ "javascript",
+ "javascriptreact",
+ { "language": "typescript", "autoFix": true },
+ { "language": "typescriptreact", "autoFix": true }
+ ],
+}
\ No newline at end of file
From 4cdc6b68fce20a3d592620996c512e8ac293672c Mon Sep 17 00:00:00 2001
From: AlliVil <45206423+AlliVil@users.noreply.github.com>
Date: Sun, 20 Oct 2019 22:34:15 +0200
Subject: [PATCH 04/14] - include typescript preset for babel along with the
class properties and object spread proposals
---
.babelrc | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/.babelrc b/.babelrc
index 2b7bafa..49f21d0 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,11 @@
{
- "presets": ["@babel/preset-env", "@babel/preset-react"]
+ "presets": [
+ "@babel/env",
+ "@babel/react",
+ ["@babel/typescript", {
+ "isTSX": true,
+ "allExtensions": true
+ }]
+ ],
+ "plugins": ["@babel/proposal-class-properties", "@babel/proposal-object-rest-spread"]
}
From 39ed88d26fb2dbb5898cb46dd12b4fc93a55ea8b Mon Sep 17 00:00:00 2001
From: AlliVil <45206423+AlliVil@users.noreply.github.com>
Date: Sun, 20 Oct 2019 22:37:47 +0200
Subject: [PATCH 05/14] - add .ts and .tsx extensions to allow babel to be able
to find typescript files and remove the .js extension on the entry path to
allow index.tsx to be found
---
build-utils/webpack.common.js | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/build-utils/webpack.common.js b/build-utils/webpack.common.js
index a0f56a3..cc28131 100644
--- a/build-utils/webpack.common.js
+++ b/build-utils/webpack.common.js
@@ -3,18 +3,18 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
- entry: './src/index.js',
+ entry: './src/index',
module: {
rules: [
{
- test: /\.(js|jsx)$/,
+ test: /\.(ts|tsx|js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader'],
},
],
},
resolve: {
- extensions: ['*', '.js', '.jsx'],
+ extensions: ['*', '.ts', '.tsx', '.js', '.jsx'],
},
plugins: [
new CleanWebpackPlugin(),
From a0e8d8fec9e1af8ea5d6cab7c7ad1e5baabaa00a Mon Sep 17 00:00:00 2001
From: AlliVil <45206423+AlliVil@users.noreply.github.com>
Date: Sun, 20 Oct 2019 22:40:31 +0200
Subject: [PATCH 06/14] - install babel presets and plugins to enable
typescript on babel
- install weback-env types to resolve "Property 'hot' does not exist on type 'NodeModule'" error from index.tsx file
---
package-lock.json | 172 ++++++++++++++++------------------------------
package.json | 6 +-
2 files changed, 64 insertions(+), 114 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index b903a4e..596e7af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -127,6 +127,20 @@
"@babel/types": "^7.4.4"
}
},
+ "@babel/helper-create-class-features-plugin": {
+ "version": "7.6.0",
+ "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.6.0.tgz",
+ "integrity": "sha512-O1QWBko4fzGju6VoVvrZg0RROCVifcLxiApnGP3OWfWzvxRZFCoBD81K5ur5e3bVY2Vf/5rIJm8cqPKn8HUJng==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-function-name": "^7.1.0",
+ "@babel/helper-member-expression-to-functions": "^7.5.5",
+ "@babel/helper-optimise-call-expression": "^7.0.0",
+ "@babel/helper-plugin-utils": "^7.0.0",
+ "@babel/helper-replace-supers": "^7.5.5",
+ "@babel/helper-split-export-declaration": "^7.4.4"
+ }
+ },
"@babel/helper-define-map": {
"version": "7.5.5",
"resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.5.5.tgz",
@@ -352,6 +366,16 @@
"@babel/plugin-syntax-async-generators": "^7.2.0"
}
},
+ "@babel/plugin-proposal-class-properties": {
+ "version": "7.5.5",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.5.5.tgz",
+ "integrity": "sha512-AF79FsnWFxjlaosgdi421vmYG6/jg79bVD0dpD44QdgobzHKuLZ6S3vl8la9qIeSwGi8i1fS0O1mfuDAAdo1/A==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-create-class-features-plugin": "^7.5.5",
+ "@babel/helper-plugin-utils": "^7.0.0"
+ }
+ },
"@babel/plugin-proposal-dynamic-import": {
"version": "7.5.0",
"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.5.0.tgz",
@@ -457,6 +481,15 @@
"@babel/helper-plugin-utils": "^7.0.0"
}
},
+ "@babel/plugin-syntax-typescript": {
+ "version": "7.3.3",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.3.3.tgz",
+ "integrity": "sha512-dGwbSMA1YhVS8+31CnPR7LB4pcbrzcV99wQzby4uAfrkZPYZlQ7ImwdpzLqi6Z6IL02b8IAL379CaMwo0x5Lag==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-plugin-utils": "^7.0.0"
+ }
+ },
"@babel/plugin-transform-arrow-functions": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz",
@@ -802,6 +835,17 @@
"@babel/helper-plugin-utils": "^7.0.0"
}
},
+ "@babel/plugin-transform-typescript": {
+ "version": "7.6.3",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.6.3.tgz",
+ "integrity": "sha512-aiWINBrPMSC3xTXRNM/dfmyYuPNKY/aexYqBgh0HBI5Y+WO5oRAqW/oROYeYHrF4Zw12r9rK4fMk/ZlAmqx/FQ==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-create-class-features-plugin": "^7.6.0",
+ "@babel/helper-plugin-utils": "^7.0.0",
+ "@babel/plugin-syntax-typescript": "^7.2.0"
+ }
+ },
"@babel/plugin-transform-unicode-regex": {
"version": "7.6.2",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.6.2.tgz",
@@ -884,6 +928,16 @@
"@babel/plugin-transform-react-jsx-source": "^7.0.0"
}
},
+ "@babel/preset-typescript": {
+ "version": "7.6.0",
+ "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.6.0.tgz",
+ "integrity": "sha512-4xKw3tTcCm0qApyT6PqM9qniseCE79xGHiUnNdKGdxNsGUc2X7WwZybqIpnTmoukg3nhPceI5KPNzNqLNeIJww==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-plugin-utils": "^7.0.0",
+ "@babel/plugin-transform-typescript": "^7.6.0"
+ }
+ },
"@babel/runtime": {
"version": "7.6.3",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz",
@@ -1067,6 +1121,12 @@
}
}
},
+ "@types/webpack-env": {
+ "version": "1.14.1",
+ "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.14.1.tgz",
+ "integrity": "sha512-0Ki9jAAhKDSuLDXOIMADg54Hu60SuBTEsWaJGGy5cV+SSUQ63J2a+RrYYGrErzz39fXzTibhKrAQJAb8M7PNcA==",
+ "dev": true
+ },
"@webassemblyjs/ast": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@@ -6546,12 +6606,6 @@
"sha.js": "^2.4.8"
}
},
- "picomatch": {
- "version": "2.0.7",
- "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.0.7.tgz",
- "integrity": "sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==",
- "dev": true
- },
"pify": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
@@ -7732,48 +7786,6 @@
"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
"dev": true
},
- "source-maps-loader": {
- "version": "0.1.9",
- "resolved": "https://registry.npmjs.org/source-maps-loader/-/source-maps-loader-0.1.9.tgz",
- "integrity": "sha1-rU7XNgauHM2vAdxSnnqn+H+ZWi4=",
- "dev": true,
- "requires": {
- "async": "^1.4.2",
- "loader-utils": "~0.2.2"
- },
- "dependencies": {
- "async": {
- "version": "1.5.2",
- "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
- "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
- "dev": true
- },
- "big.js": {
- "version": "3.2.0",
- "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
- "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
- "dev": true
- },
- "json5": {
- "version": "0.5.1",
- "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
- "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
- "dev": true
- },
- "loader-utils": {
- "version": "0.2.17",
- "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
- "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
- "dev": true,
- "requires": {
- "big.js": "^3.1.3",
- "emojis-list": "^2.0.0",
- "json5": "^0.5.0",
- "object-assign": "^4.0.1"
- }
- }
- }
- },
"spdx-correct": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
@@ -8257,70 +8269,6 @@
"integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
"dev": true
},
- "ts-loader": {
- "version": "6.2.0",
- "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-6.2.0.tgz",
- "integrity": "sha512-Da8h3fD+HiZ9GvZJydqzk3mTC9nuOKYlJcpuk+Zv6Y1DPaMvBL+56GRzZFypx2cWrZFMsQr869+Ua2slGoLxvQ==",
- "dev": true,
- "requires": {
- "chalk": "^2.3.0",
- "enhanced-resolve": "^4.0.0",
- "loader-utils": "^1.0.2",
- "micromatch": "^4.0.0",
- "semver": "^6.0.0"
- },
- "dependencies": {
- "braces": {
- "version": "3.0.2",
- "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
- "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
- "dev": true,
- "requires": {
- "fill-range": "^7.0.1"
- }
- },
- "fill-range": {
- "version": "7.0.1",
- "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
- "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
- "dev": true,
- "requires": {
- "to-regex-range": "^5.0.1"
- }
- },
- "is-number": {
- "version": "7.0.0",
- "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
- "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
- "dev": true
- },
- "micromatch": {
- "version": "4.0.2",
- "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
- "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
- "dev": true,
- "requires": {
- "braces": "^3.0.1",
- "picomatch": "^2.0.5"
- }
- },
- "semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
- "dev": true
- },
- "to-regex-range": {
- "version": "5.0.1",
- "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
- "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
- "dev": true,
- "requires": {
- "is-number": "^7.0.0"
- }
- }
- }
- },
"tslib": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
diff --git a/package.json b/package.json
index 16bf3da..4c1e26f 100644
--- a/package.json
+++ b/package.json
@@ -14,10 +14,14 @@
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.6.4",
+ "@babel/plugin-proposal-class-properties": "^7.5.5",
+ "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
"@babel/preset-env": "^7.6.3",
"@babel/preset-react": "^7.6.3",
+ "@babel/preset-typescript": "^7.6.0",
"@types/react": "^16.9.9",
"@types/react-dom": "^16.9.2",
+ "@types/webpack-env": "^1.14.1",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
@@ -33,8 +37,6 @@
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.18.2",
"react-hot-loader": "^4.12.15",
- "source-maps-loader": "^0.1.9",
- "ts-loader": "^6.2.0",
"typescript": "^3.6.4",
"webpack": "^4.41.2",
"webpack-bundle-analyzer": "^3.6.0",
From b117cda5ed8497acba60113ddf45cc557cc34a9e Mon Sep 17 00:00:00 2001
From: AlliVil <45206423+AlliVil@users.noreply.github.com>
Date: Sun, 20 Oct 2019 22:43:26 +0200
Subject: [PATCH 07/14] - turn of rules for prop-types as typescript will be
now used for type safety
- add settings to resolve imports with file extensions other than .js for ESLint's "Cannot find module 'module'" error
---
.eslintrc | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/.eslintrc b/.eslintrc
index 683e8c7..87d0b78 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -10,6 +10,14 @@
"rules": {
"prettier/prettier": ["error"],
"import/no-extraneous-dependencies": 0,
- "react/jsx-filename-extension": 0
+ "react/jsx-filename-extension": 0,
+ "react/prop-types": 0
+ },
+ "settings": {
+ "import/resolver": {
+ "node": {
+ "extensions": [".js", ".jsx", ".ts", ".tsx"]
+ }
+ }
}
}
From 4b324e8220f3d7f2e7cbd810462377eaa67fdff3 Mon Sep 17 00:00:00 2001
From: AlliVil <45206423+AlliVil@users.noreply.github.com>
Date: Sun, 20 Oct 2019 22:44:15 +0200
Subject: [PATCH 08/14] - convert to a typescript file
---
src/{index.js => index.tsx} | 0
1 file changed, 0 insertions(+), 0 deletions(-)
rename src/{index.js => index.tsx} (100%)
diff --git a/src/index.js b/src/index.tsx
similarity index 100%
rename from src/index.js
rename to src/index.tsx
From 0d0c099a667ecaaceb972c755ffa69fa4553eb0b Mon Sep 17 00:00:00 2001
From: AlliVil <45206423+AlliVil@users.noreply.github.com>
Date: Sun, 20 Oct 2019 22:45:10 +0200
Subject: [PATCH 09/14] - convert to a typescript file
- use TypeScript interface to replace propTypes
---
src/App.js | 10 ----------
src/App.tsx | 9 +++++++++
2 files changed, 9 insertions(+), 10 deletions(-)
delete mode 100644 src/App.js
create mode 100644 src/App.tsx
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index b121ab2..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const App = ({ title }) => {title}
;
-
-App.propTypes = {
- title: PropTypes.string.isRequired,
-};
-
-export default App;
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..f37eb86
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface AppProps {
+ title: string;
+}
+
+const App: React.FC = ({ title }) => {title}
;
+
+export default App;
From 946b508fe515f8a221c97d9c68b78e64acb4f550 Mon Sep 17 00:00:00 2001
From: AlliVil <45206423+AlliVil@users.noreply.github.com>
Date: Sun, 20 Oct 2019 22:51:21 +0200
Subject: [PATCH 10/14] -convert .js files to .ts
---
...pack.bundleanalyze.js => webpack.bundleanalyze.ts} | 11 ++++++-----
...undlevisualizer.js => webpack.bundlevisualizer.ts} | 6 ++----
2 files changed, 8 insertions(+), 9 deletions(-)
rename build-utils/addons/{webpack.bundleanalyze.js => webpack.bundleanalyze.ts} (74%)
rename build-utils/addons/{webpack.bundlevisualizer.js => webpack.bundlevisualizer.ts} (65%)
diff --git a/build-utils/addons/webpack.bundleanalyze.js b/build-utils/addons/webpack.bundleanalyze.ts
similarity index 74%
rename from build-utils/addons/webpack.bundleanalyze.js
rename to build-utils/addons/webpack.bundleanalyze.ts
index bab7698..bbb4630 100644
--- a/build-utils/addons/webpack.bundleanalyze.js
+++ b/build-utils/addons/webpack.bundleanalyze.ts
@@ -1,11 +1,12 @@
-const WebpackBundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const WebpackBundleAnalyzer = require('webpack-bundle-analyzer')
+ .BundleAnalyzerPlugin;
module.exports = {
plugins: [
new WebpackBundleAnalyzer({
analyzerMode: 'static',
reportFilename: './report.html',
- openAnalyzer: false
- })
- ]
-};
\ No newline at end of file
+ openAnalyzer: false,
+ }),
+ ],
+};
diff --git a/build-utils/addons/webpack.bundlevisualizer.js b/build-utils/addons/webpack.bundlevisualizer.ts
similarity index 65%
rename from build-utils/addons/webpack.bundlevisualizer.js
rename to build-utils/addons/webpack.bundlevisualizer.ts
index 222e587..4ece17a 100644
--- a/build-utils/addons/webpack.bundlevisualizer.js
+++ b/build-utils/addons/webpack.bundlevisualizer.ts
@@ -1,7 +1,5 @@
const Visualizer = require('webpack-visualizer-plugin');
module.exports = {
- plugins: [
- new Visualizer()
- ]
-};
\ No newline at end of file
+ plugins: [new Visualizer()],
+};
From aa6248c7cb38fa949a3ae264d8d82fe50d191a45 Mon Sep 17 00:00:00 2001
From: AlliVil <45206423+AlliVil@users.noreply.github.com>
Date: Sun, 20 Oct 2019 23:00:56 +0200
Subject: [PATCH 11/14] - uninstall typescript to make it more of a
minimalistic support
---
package-lock.json | 6 ------
package.json | 1 -
2 files changed, 7 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 596e7af..935e337 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8306,12 +8306,6 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
"dev": true
},
- "typescript": {
- "version": "3.6.4",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.6.4.tgz",
- "integrity": "sha512-unoCll1+l+YK4i4F8f22TaNVPRHcD9PA3yCuZ8g5e0qGqlVlJ/8FSateOLLSagn+Yg5+ZwuPkL8LFUc0Jcvksg==",
- "dev": true
- },
"ua-parser-js": {
"version": "0.7.20",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
diff --git a/package.json b/package.json
index 4c1e26f..22341ac 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,6 @@
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.18.2",
"react-hot-loader": "^4.12.15",
- "typescript": "^3.6.4",
"webpack": "^4.41.2",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.9",
From b091379b21a4db2b2862fefac91a2e8b942f06fd Mon Sep 17 00:00:00 2001
From: AlliVil <45206423+AlliVil@users.noreply.github.com>
Date: Mon, 21 Oct 2019 11:23:28 +0200
Subject: [PATCH 12/14] -convert webpack files to .ts files
---
build-utils/{webpack.common.js => webpack.common.ts} | 0
build-utils/{webpack.config.js => webpack.config.ts} | 2 +-
build-utils/{webpack.dev.js => webpack.dev.ts} | 0
build-utils/{webpack.prod.js => webpack.prod.ts} | 0
4 files changed, 1 insertion(+), 1 deletion(-)
rename build-utils/{webpack.common.js => webpack.common.ts} (100%)
rename build-utils/{webpack.config.js => webpack.config.ts} (90%)
rename build-utils/{webpack.dev.js => webpack.dev.ts} (100%)
rename build-utils/{webpack.prod.js => webpack.prod.ts} (100%)
diff --git a/build-utils/webpack.common.js b/build-utils/webpack.common.ts
similarity index 100%
rename from build-utils/webpack.common.js
rename to build-utils/webpack.common.ts
diff --git a/build-utils/webpack.config.js b/build-utils/webpack.config.ts
similarity index 90%
rename from build-utils/webpack.config.js
rename to build-utils/webpack.config.ts
index 8629ce8..af9d9b1 100644
--- a/build-utils/webpack.config.js
+++ b/build-utils/webpack.config.ts
@@ -3,7 +3,7 @@
const webpackMerge = require('webpack-merge');
-const commonConfig = require('./webpack.common.js');
+const commonConfig = require('./webpack.common');
const getAddons = addonsArgs => {
const addons = Array.isArray(addonsArgs)
diff --git a/build-utils/webpack.dev.js b/build-utils/webpack.dev.ts
similarity index 100%
rename from build-utils/webpack.dev.js
rename to build-utils/webpack.dev.ts
diff --git a/build-utils/webpack.prod.js b/build-utils/webpack.prod.ts
similarity index 100%
rename from build-utils/webpack.prod.js
rename to build-utils/webpack.prod.ts
From 05188793ca2cbcd097136f026e5cbee2375bdbef Mon Sep 17 00:00:00 2001
From: AlliVil <45206423+AlliVil@users.noreply.github.com>
Date: Mon, 21 Oct 2019 11:40:33 +0200
Subject: [PATCH 13/14] - webpack requires explicit file extensions.
- update build and start scripts to use .ts extensions for webpack
---
build-utils/webpack.config.ts | 6 +++---
package.json | 4 ++--
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/build-utils/webpack.config.ts b/build-utils/webpack.config.ts
index af9d9b1..7ce056a 100644
--- a/build-utils/webpack.config.ts
+++ b/build-utils/webpack.config.ts
@@ -3,7 +3,7 @@
const webpackMerge = require('webpack-merge');
-const commonConfig = require('./webpack.common');
+const commonConfig = require('./webpack.common.ts');
const getAddons = addonsArgs => {
const addons = Array.isArray(addonsArgs)
@@ -12,11 +12,11 @@ const getAddons = addonsArgs => {
return addons
.filter(Boolean)
- .map(name => require(`./addons/webpack.${name}.js`));
+ .map(name => require(`./addons/webpack.${name}.ts`));
};
module.exports = ({ env, addon }) => {
- const envConfig = require(`./webpack.${env}.js`);
+ const envConfig = require(`./webpack.${env}.ts`);
return webpackMerge(commonConfig, envConfig, ...getAddons(addon));
};
diff --git a/package.json b/package.json
index 22341ac..d402447 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
"description": "",
"main": "index.js",
"scripts": {
- "start": "webpack-dev-server --config build-utils/webpack.config.js --env.env=dev",
- "build": "webpack --config build-utils/webpack.config.js --env.env=prod",
+ "start": "webpack-dev-server --config build-utils/webpack.config.ts --env.env=dev",
+ "build": "webpack --config build-utils/webpack.config.ts --env.env=prod",
"build:analyze": "npm run build -- --env.addon=bundleanalyze --env.addon=bundlevisualizer",
"test": "echo \"Error: no test specified\" && exit 0"
},
From 57eb0ccdc590916c69aa4ed82ca054dcb5c9e605 Mon Sep 17 00:00:00 2001
From: AlliVil <45206423+AlliVil@users.noreply.github.com>
Date: Mon, 21 Oct 2019 12:32:25 +0200
Subject: [PATCH 14/14] - uninstall prop-types
---
package.json | 1 -
1 file changed, 1 deletion(-)
diff --git a/package.json b/package.json
index d402447..0f5a0ca 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,6 @@
"webpack-visualizer-plugin": "^0.1.11"
},
"dependencies": {
- "prop-types": "^15.7.2",
"react": "^16.10.2",
"react-dom": "^16.10.2"
}