merge

.babelrc

@@ -12,16 +12,14 @@
           ]
         }
       }
-    ],
-    "@babel/preset-stage-2"
+    ]
   ],
   "plugins": [
     ["@babel/plugin-transform-runtime", {
       "helpers": true,
-      "polyfill": false,
-      "regenerator": true,
-      "moduleName": "@babel/runtime"
+      "regenerator": true
     }],
+    "@babel/plugin-syntax-dynamic-import",
     // "styled-components",
     "lodash"
   ]

.stylelintrc

@@ -0,0 +1,15 @@
+{
+  "processors": ["stylelint-processor-styled-components"],
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-styled-components"
+  ],
+  "syntax": "scss",
+  "rules": {
+    "declaration-empty-line-before": null,
+    "comment-empty-line-before": null,
+    "length-zero-no-unit": null,
+    "selector-list-comma-newline-after": null,
+    "block-no-empty": null
+  }
+}

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-- stable
+- "stable"
 
 before_deploy:
 - npm run build:prod

package.json

@@ -4,62 +4,70 @@
   "description": "A Champions League draw simulator",
   "main": "index.html",
   "dependencies": {
-    "bowser": "^1.9.3",
+    "async-manager-promise": "^0.0.5",
+    "bowser": "^2.0.0-beta.1",
     "delay.js": "^1.0.2",
     "fast-delete": "^1.0.1",
     "fast-levenshtein": "^2.0.6",
     "fastclick": "^1.0.6",
     "flag-icon-css": "^3.0.0",
     "history": "^4.7.2",
-    "lodash": "^4.17.5",
+    "lodash": "^4.17.10",
     "normalize.css": "^8.0.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.5.0",
+    "react-dom": "^16.5.0",
     "react-helmet": "^5.2.0",
     "react-import": "^1.5.3",
-    "react-router-dom": "^4.2.2",
-    "shallowequal": "^1.0.2",
-    "styled-components": "^3.2.3",
-    "timelimit": "^1.0.0"
+    "react-router-dom": "^4.3.1",
+    "shallowequal": "^1.1.0",
+    "styled-components": "^4.0.0-beta.1",
+    "timelimit": "^1.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0-beta.36",
-    "@babel/plugin-transform-runtime": "^7.0.0-beta.36",
-    "@babel/preset-env": "^7.0.0-beta.36",
-    "@babel/preset-react": "^7.0.0-beta.36",
-    "@babel/preset-stage-2": "^7.0.0-beta.36",
-    "@babel/runtime": "^7.0.0-beta.36",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/runtime": "^7.0.0",
     "@types/bowser": "^1.1.1",
     "@types/fast-levenshtein": "0.0.1",
     "@types/fastclick": "^1.0.28",
-    "@types/lodash": "^4.14.106",
-    "@types/react": "^16.0.41",
-    "@types/react-dom": "^16.0.3",
-    "@types/react-helmet": "^5.0.5",
-    "@types/react-router-dom": "^4.2.5",
-    "@types/shallowequal": "^0.2.1",
-    "awesome-typescript-loader": "^4.0.1",
-    "babel-plugin-lodash": "^3.2.11",
-    "babel-plugin-styled-components": "^1.1.7",
-    "copy-webpack-plugin": "^4.5.1",
-    "css-loader": "^0.28.11",
-    "file-loader": "^1.1.11",
-    "html-webpack-plugin": "^3.1.0",
+    "@types/lodash": "^4.14.116",
+    "@types/react": "^16.4.13",
+    "@types/react-dom": "^16.0.7",
+    "@types/react-helmet": "^5.0.7",
+    "@types/react-router-dom": "^4.3.0",
+    "@types/shallowequal": "^0.2.3",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-styled-components": "^1.6.3",
+    "copy-webpack-plugin": "^4.5.2",
+    "css-loader": "^1.0.0",
+    "file-loader": "^2.0.0",
+    "html-webpack-plugin": "^3.2.0",
     "rimraf": "^2.6.2",
-    "style-loader": "^0.20.3",
+    "style-loader": "^0.23.0",
+    "stylelint": "^9.5.0",
+    "stylelint-config-standard": "^18.2.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.3.2",
     "surge": "^0.20.1",
-    "tslint": "^5.9.1",
-    "tslint-react": "^3.4.0",
-    "typescript": "^2.7.1",
+    "tslint": "^5.11.0",
+    "tslint-react": "^3.6.0",
+    "typescript": "^3.0.3",
     "typescript-plugin-lodash": "^0.1.0",
-    "uglifyjs-webpack-plugin": "^1.2.4",
-    "webpack": "^3.10.0",
-    "webpack-bundle-analyzer": "^2.11.1",
-    "webpack-dev-server": "^2.11.2",
-    "worker-loader": "^1.1.1"
+    "uglifyjs-webpack-plugin": "^1.3.0",
+    "webpack": "^4.17.2",
+    "webpack-bundle-analyzer": "^2.13.1",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.8",
+    "worker-loader": "^2.0.0"
   },
   "scripts": {
     "clean": "rimraf docs",
+    "lint:js": "tslint -t stylish './src/**/*.ts'",
+    "lint:css": "stylelint './src/**/*.ts'",
     "build:prod": "webpack --colors --config webpack/webpack.config.js --env=prod",
     "build:analyze": "npm run clean && webpack --colors --config webpack/webpack.config.js --env=analyze",
     "start": "npm run clean && webpack-dev-server --colors --watch --config webpack/webpack.config.js --env=dev",

src/App.tsx

@@ -2,12 +2,16 @@ import React, { PureComponent } from 'react'
 import Import from 'react-import'
 import styled from 'styled-components'
 
-import Popup from 'components/Popup'
+import Notification from 'ui/Notification'
 
 const mainPromise = import(/* webpackChunkName: "main" */ './Main')
 
 const Root = styled.div`
   font-family: Tahoma, Arial, sans-serif;
+
+  & * {
+    box-sizing: border-box;
+  }
 `
 
 interface Props {}
@@ -42,7 +46,7 @@ class App extends PureComponent<Props, State> {
   }
 
   private getWrappedPopup = (props) => (
-    <Popup
+    <Notification
       {...props}
       noAnimation={this.state.initial}
     />

src/Main.tsx

@@ -15,6 +15,7 @@ interface Props {
 class Main extends PureComponent<Props> {
   render() {
     const { props } = this
+
     return (
       <>
         <Import component={versionPromise} />
@@ -28,6 +29,7 @@ class Main extends PureComponent<Props> {
   }
 }
 
+// @ts-ignore
 fastclick.attach(document.body)
 
 export default Main

src/Version.tsx

@@ -3,12 +3,23 @@ import Helmet from 'react-helmet'
 
 // @ts-ignore
 const version = __VERSION__
+// @ts-ignore
+const modificationDate = __MODIFICATION_DATE__
+
+console.log('modified at:', modificationDate)
 
 class Version extends PureComponent {
   render() {
     return (
       <Helmet>
-        <meta name="version" content={version} />
+        <meta
+          name="version"
+          content={version}
+        />
+        <meta
+          name="modification-date"
+          content={modificationDate}
+        />
       </Helmet>
     )
   }