diff --git a/package-lock.json b/package-lock.json index dae824e..8eb44a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1937,12 +1937,6 @@ "isarray": "1.0.0" } }, - "dom-walk": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz", - "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=", - "dev": true - }, "domain-browser": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.1.7.tgz", @@ -2135,15 +2129,6 @@ "is-arrayish": "0.2.1" } }, - "error-stack-parser": { - "version": "1.3.6", - "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-1.3.6.tgz", - "integrity": "sha1-4Oc7k+QXE40c18C3RrGkoUhUwpI=", - "dev": true, - "requires": { - "stackframe": "0.3.1" - } - }, "es-abstract": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.9.0.tgz", @@ -3678,24 +3663,6 @@ "is-glob": "2.0.1" } }, - "global": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz", - "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=", - "dev": true, - "requires": { - "min-document": "2.19.0", - "process": "0.5.2" - }, - "dependencies": { - "process": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz", - "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=", - "dev": true - } - } - }, "globals": { "version": "9.18.0", "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz", @@ -4869,15 +4836,6 @@ "mime-db": "1.30.0" } }, - "min-document": { - "version": "2.19.0", - "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz", - "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=", - "dev": true, - "requires": { - "dom-walk": "0.1.1" - } - }, "minimalistic-assert": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz", @@ -6242,71 +6200,12 @@ "integrity": "sha1-+p4xn/3u6zWycpbvDz03TawvUqc=", "dev": true }, - "react": { - "version": "15.6.2", - "resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz", - "integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=", - "requires": { - "create-react-class": "15.6.2", - "fbjs": "0.8.16", - "loose-envify": "1.3.1", - "object-assign": "4.1.1", - "prop-types": "15.6.0" - } - }, "react-addons-test-utils": { "version": "15.6.2", "resolved": "https://registry.npmjs.org/react-addons-test-utils/-/react-addons-test-utils-15.6.2.tgz", "integrity": "sha1-wStu/cIkfBDae4dw0YUICnsEcVY=", "dev": true }, - "react-deep-force-update": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/react-deep-force-update/-/react-deep-force-update-2.1.1.tgz", - "integrity": "sha1-jqQmPNZFWgULN0RbPwj9g52G6Qk=", - "dev": true - }, - "react-dom": { - "version": "15.6.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.2.tgz", - "integrity": "sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=", - "requires": { - "fbjs": "0.8.16", - "loose-envify": "1.3.1", - "object-assign": "4.1.1", - "prop-types": "15.6.0" - } - }, - "react-hot-loader": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-3.1.1.tgz", - "integrity": "sha512-TxvSs1KN+YZxdXIX5sq0AKEy8dBdyiUE9nK9ML4Op6S06tkvNAg51V8OSvlQemCQkOfk8gTc5O8azUCvV4vTUw==", - "dev": true, - "requires": { - "global": "4.3.2", - "react-deep-force-update": "2.1.1", - "react-proxy": "3.0.0-alpha.1", - "redbox-react": "1.5.0", - "source-map": "0.6.1" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - } - } - }, - "react-proxy": { - "version": "3.0.0-alpha.1", - "resolved": "https://registry.npmjs.org/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz", - "integrity": "sha1-RABCa8+oDKpnJMd1VpUxUgn6Swc=", - "dev": true, - "requires": { - "lodash": "4.17.4" - } - }, "react-redux": { "version": "4.4.8", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-4.4.8.tgz", @@ -6384,18 +6283,6 @@ "resolve": "1.5.0" } }, - "redbox-react": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/redbox-react/-/redbox-react-1.5.0.tgz", - "integrity": "sha512-mdxArOI3sF8K5Nay5NG+lv/VW516TbXjjd4h1wcV1Iy4IMDQPnCayjoQXBAycAFSME4nyXRUXCjHxsw2rYpVRw==", - "dev": true, - "requires": { - "error-stack-parser": "1.3.6", - "object-assign": "4.1.1", - "prop-types": "15.6.0", - "sourcemapped-stacktrace": "1.1.7" - } - }, "redent": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz", @@ -7042,23 +6929,6 @@ "source-map": "0.5.7" } }, - "sourcemapped-stacktrace": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.7.tgz", - "integrity": "sha512-pgHNUACbafkQ+M5zR00NSOtSKBc/i40prgN+SY07J/pghClwVNWNTTMa0JuXj4lriR2TvMKcPAHw5KN9tVFRhA==", - "dev": true, - "requires": { - "source-map": "0.5.6" - }, - "dependencies": { - "source-map": { - "version": "0.5.6", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", - "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=", - "dev": true - } - } - }, "spdx-correct": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-1.0.2.tgz", @@ -7135,12 +7005,6 @@ "tweetnacl": "0.14.5" } }, - "stackframe": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-0.3.1.tgz", - "integrity": "sha1-M6qE8Rd6VUjIk1Uzy/6zQgl19aQ=", - "dev": true - }, "statuses": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz", diff --git a/package.json b/package.json index 5f1f711..9431758 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "Run or walk for your transport?", "main": "start.js", "engines": { - "node": "8.7.0" + "node": "9.0.0" }, "scripts": { "start": "node start.js", @@ -42,8 +42,10 @@ "lodash.isequal": "^4.5.0", "moment": "^2.15.1", "morgan": "^1.7.0", - "react": "^15.3.2", - "react-dom": "^15.3.2", + "prop-types": "^15.6.0", + "react": "^16.1.1", + "react-dom": "^16.1.1", + "react-hot-loader": "^3.1.3", "react-redux": "^4.4.5", "redux": "^3.6.0", "redux-thunk": "^2.1.0", @@ -62,7 +64,6 @@ "jsdom": "^9.8.0", "mocha": "^3.1.2", "react-addons-test-utils": "^15.3.2", - "react-hot-loader": "^3.0.0-beta.6", "tap-spec": "^4.1.1", "webpack-dev-server": "^2.4.2" } diff --git a/src/js/app.js b/src/js/app.js index fa4559c..ecad5c6 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -1,9 +1,10 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import { AppContainer } from 'react-hot-loader'; import { Provider } from 'react-redux'; import { store } from './store.js'; import { getArrivals } from './actions.js'; -import ArrivalsContainer from './containers/arrivals.js'; +import ArrivalsContainer from './containers/arrivals.js'; require('../styles.css'); @@ -11,10 +12,21 @@ const { direction } = store.getState(); store.dispatch(getArrivals('train', direction)); store.dispatch(getArrivals('dlr', direction)); -ReactDOM.render( +const render = AppRoot => { - - - , - document.querySelector(".container") -); + ReactDOM.render( + + + + + , + document.querySelector(".container") + ); +}; + +render(ArrivalsContainer); + +// Webpack Hot Module Replacement API +if (module.hot) { + module.hot.accept('./containers/arrivals', () => { render(ArrivalsContainer); }); +} diff --git a/src/js/components/arrivals.js b/src/js/components/arrivals.js index 78b41d8..057406a 100644 --- a/src/js/components/arrivals.js +++ b/src/js/components/arrivals.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import Card from './card'; diff --git a/src/js/components/card.js b/src/js/components/card.js index d19fa98..d5bb616 100644 --- a/src/js/components/card.js +++ b/src/js/components/card.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import moment from 'moment'; const normaliseStationName = (stationName, mode) => { diff --git a/webpack.dev.config.js b/webpack.dev.config.js index fc69492..742064a 100644 --- a/webpack.dev.config.js +++ b/webpack.dev.config.js @@ -5,6 +5,7 @@ const path = require('path'); module.exports = { entry: [ + "react-hot-loader/patch", "./src/js/app.js", "webpack/hot/dev-server", "webpack-dev-server/client?http://localhost:8080/" @@ -12,8 +13,10 @@ module.exports = { entry: './src/js/app.js', output: { path: path.resolve(__dirname, 'dist'), - filename: 'bundle.js' + filename: 'bundle.js', + publicPath: "/" }, + devtool: 'inline-source-map', module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }, diff --git a/yarn.lock b/yarn.lock index 9ca5960..98488f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1336,7 +1336,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" -create-react-class@^15.5.1, create-react-class@^15.6.0: +create-react-class@^15.5.1: version "15.6.2" resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.2.tgz#cf1ed15f12aad7f14ef5f2dfe05e6c42f91ef02a" dependencies: @@ -4119,7 +4119,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.10, prop-types@^15.5.4: +prop-types@^15.5.4, prop-types@^15.6.0: version "15.6.0" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" dependencies: @@ -4238,18 +4238,18 @@ react-deep-force-update@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.1.1.tgz#8ea4263cd6455a050b37445b3f08fd839d86e909" -react-dom@^15.3.2: - version "15.6.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730" +react-dom@^16.1.1: + version "16.1.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.1.1.tgz#b2e331b6d752faf1a2d31399969399a41d8d45f8" dependencies: - fbjs "^0.8.9" + fbjs "^0.8.16" loose-envify "^1.1.0" - object-assign "^4.1.0" - prop-types "^15.5.10" + object-assign "^4.1.1" + prop-types "^15.6.0" -react-hot-loader@^3.0.0-beta.6: - version "3.1.1" - resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-3.1.1.tgz#e06db8cd0841c41e3ab0b395b2b774126fc8914e" +react-hot-loader@^3.1.3: + version "3.1.3" + resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-3.1.3.tgz#6f92877326958c7cb0134b512474517869126082" dependencies: global "^4.3.0" react-deep-force-update "^2.1.1" @@ -4274,15 +4274,14 @@ react-redux@^4.4.5: loose-envify "^1.1.0" prop-types "^15.5.4" -react@^15.3.2: - version "15.6.2" - resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72" +react@^16.1.1: + version "16.1.1" + resolved "https://registry.yarnpkg.com/react/-/react-16.1.1.tgz#d5c4ef795507e3012282dd51261ff9c0e824fe1f" dependencies: - create-react-class "^15.6.0" - fbjs "^0.8.9" + fbjs "^0.8.16" loose-envify "^1.1.0" - object-assign "^4.1.0" - prop-types "^15.5.10" + object-assign "^4.1.1" + prop-types "^15.6.0" read-pkg-up@^1.0.1: version "1.0.1"