Merge pull request #396 from HSLdevcom/#AB25283-node-update

#AB25283 Node/React update

.babelrc

@@ -1,4 +1,16 @@
 {
-    "presets": ["react", "env", "stage-0"],
-    "plugins": ["transform-runtime", "react-hot-loader/babel"]
-}
+    "presets": [
+        "@babel/preset-react",
+        "@babel/preset-env"
+    ],
+    "plugins": [
+        "@babel/plugin-transform-runtime"
+    ],
+    "env": {
+      "development": {
+        "plugins": [
+            "react-refresh/babel"
+        ]
+      }
+    }
+  }

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16.20-buster-slim
+FROM node:18-buster-slim
 
 RUN apt-get update \
     && DEBIAN_FRONTEND=noninteractive apt-get install -yq wget curl gnupg fontconfig fonts-liberation ca-certificates --no-install-recommends \
@@ -11,6 +11,7 @@ RUN apt-get update \
     && cp ./azcopy /usr/bin/ \
     && rm -rf /var/lib/apt/lists/*
 
+ENV NODE_OPTIONS=--openssl-legacy-provider
 
 ENV WORK /opt/publisher
 

package.json

@@ -45,15 +45,16 @@
   },
   "homepage": "https://github.com/HSLdevcom/hsl-map-publisher#readme",
   "engines": {
-    "node": ">=8.0.0"
+    "node": ">=14.0.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
+    "@babel/core": "^7.23.9",
+    "@babel/plugin-transform-runtime": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
     "babel-eslint": "^9.0.0",
-    "babel-loader": "^7.1.4",
+    "babel-loader": "^8.3.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
     "cross-env": "^5.1.1",
     "css-loader": "^0.28.7",
     "eslint": "^5.8.0",
@@ -68,21 +69,22 @@
     "husky": "^8.0.0",
     "lint-staged": "^13.0.2",
     "prettier": "^1.14.3",
+    "react-refresh": "^0.14.0",
     "webpack-cli": "^3.0.8",
     "webpack-serve": "^1.0.4",
     "worker-loader": "^2.0.0"
   },
   "dependencies": {
     "@azure/storage-blob": "^10.4.0",
     "@koa/cors": "^2.2.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@turf/turf": "^6.5.0",
     "apollo-cache-inmemory": "^1.1.1",
     "apollo-client": "^2.0.3",
     "apollo-link": "^1.2.2",
     "apollo-link-http": "^1.2.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
+
     "babel-polyfill": "^6.26.0",
-    "babel-preset-stage-0": "^6.24.1",
     "bullmq": "^1.86.2",
     "cheerio": "=1.0.0-rc.3",
     "classnames": "^2.2.5",
@@ -113,10 +115,9 @@
     "qrcode": "^1.0.0",
     "qs": "^6.5.2",
     "raw-loader": "^0.5.1",
-    "react": "^16.5.1",
+    "react": "18.2.0",
     "react-apollo": "^2.0.1",
-    "react-dom": "^16.5.1",
-    "react-hot-loader": "^4.3.3",
+    "react-dom": "18.2.0",
     "react-measure": "^2.5.2",
     "recompose": "^0.30.0",
     "segseg": "^0.2.2",

src/components/a3Timetable/a3Timetable.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { hot } from 'react-hot-loader';
 import { chunk, last, groupBy, findIndex } from 'lodash';
 import renderQueue from 'util/renderQueue';
 
@@ -34,11 +33,8 @@ class Timetable extends Component {
     };
   }
 
-  componentWillMount() {
-    renderQueue.add(this);
-  }
-
   componentDidMount() {
+    renderQueue.add(this);
     let departures = [];
     const weekdays = this.rowsByHour(this.props.weekdays);
     const saturdays = this.rowsByHour(this.props.saturdays);
@@ -229,6 +225,7 @@ class Timetable extends Component {
         groupedRows.pop();
         weekdays.groupedRows = groupedRows;
       }
+      // eslint-disable-next-line no-constant-condition
       while (true) {
         const lastGroupedRows = last(groupedRows);
         const lastRow = last(lastGroupedRows);
@@ -454,4 +451,4 @@ Timetable.propTypes = {
   updateHook: PropTypes.func.isRequired,
 };
 
-export default hot(module)(Timetable);
+export default Timetable;

src/components/a3stopPoster/a3stopPoster.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { hot } from 'react-hot-loader';
 import { JustifiedColumn } from 'components/util';
 import renderQueue from 'util/renderQueue';
 import { colorsByMode } from 'util/domain';
@@ -32,11 +31,8 @@ class A3StopPoster extends Component {
     };
   }
 
-  componentWillMount() {
-    renderQueue.add(this);
-  }
-
   componentDidMount() {
+    renderQueue.add(this);
     this.updateLayout();
     renderQueue.onEmpty(error => !error && this.updateLayout(), {
       ignore: this,
@@ -203,4 +199,4 @@ A3StopPoster.defaultProps = {
   routeFilter: '',
 };
 
-export default hot(module)(A3StopPoster);
+export default A3StopPoster;

src/components/app.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { hot } from 'react-hot-loader';
 import { ApolloClient } from 'apollo-client';
 import { createHttpLink } from 'apollo-link-http';
 import { InMemoryCache } from 'apollo-cache-inmemory';
@@ -118,4 +117,4 @@ class App extends Component {
   }
 }
 
-export default hot(module)(App);
+export default App;

src/components/qrCode.js

@@ -13,9 +13,9 @@ class QrCode extends Component {
     this.updateCode(this.props.url);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.url !== this.props.url) {
-      this.updateCode(nextProps.url);
+  componentDidUpdate(prevProps) {
+    if (this.props.url !== prevProps.url) {
+      this.updateCode(this.props.url);
     }
   }
 

src/components/stopPoster/stopPoster.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { hot } from 'react-hot-loader';
 import { get, cloneDeep } from 'lodash';
 import { JustifiedColumn, Spacer } from 'components/util';
 import renderQueue from 'util/renderQueue';
@@ -526,4 +525,4 @@ StopPoster.defaultProps = {
   legend: false,
 };
 
-export default hot(module)(StopPoster);
+export default StopPoster;

src/components/stopPoster/terminalPoster.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { hot } from 'react-hot-loader';
 import { get, cloneDeep } from 'lodash';
 import { JustifiedColumn, Spacer } from 'components/util';
 import renderQueue from 'util/renderQueue';
@@ -532,4 +531,4 @@ TerminalPoster.defaultProps = {
   legend: false,
 };
 
-export default hot(module)(TerminalPoster);
+export default TerminalPoster;

src/components/timetable/timetable.js

@@ -201,7 +201,7 @@ class Timetable extends Component {
               ? `${getWeekdayName(dayNames[0], 'en')} - ${getWeekdayName(dayNames[1], 'en')}`
               : `${getWeekdayName(dayNames[0], 'en')}`;
           return (
-            <div>
+            <div key={`tableheader_container_${fiTitle}`}>
               <TableHeader
                 title={fiTitle}
                 subtitleSw={svTitle}

src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from 'components/app';
 import 'styles/base.css';
 import './util/mockGetTemplate';
@@ -8,6 +8,7 @@ if (!window.serverLog) {
   window.serverLog = console.log.bind(console);
 }
 
-const root = document.body.appendChild(document.createElement('div'));
+const container = document.body.appendChild(document.createElement('div'));
+const root = createRoot(container);
 
-render(<App />, root);
+root.render(<App />);

webpack.common.js

@@ -1,8 +1,11 @@
 const path = require('path');
+
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
 
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
 module.exports = {
   entry: ['babel-polyfill', './src/index.js'],
   plugins: [
@@ -59,6 +62,14 @@ module.exports = {
         test: /\.svg$/,
         loader: 'raw-loader',
       },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        options: {
+          plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean),
+        },
+      },
     ],
   },
 };

webpack.dev.js

@@ -1,5 +1,6 @@
 const merge = require('webpack-merge');
 const webpackCommon = require('./webpack.common');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const PORT = process.env.PORT || 5000;
 
@@ -12,4 +13,5 @@ module.exports = merge.smart(webpackCommon, {
       hmr: true,
     },
   },
+  plugins: [new ReactRefreshWebpackPlugin()],
 });