Merge pull request #670 from mz8i/update-dependencies-202104

Update core dependencies (2021/04)

app/package.json

@@ -16,58 +16,64 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
+    "@loadable/component": "^5.14.1",
     "@mapbox/sphericalmercator": "^1.1.0",
     "ajv": "^7.1.1",
     "ajv-formats": "^1.5.1",
-    "babel-runtime": "^6.26.0",
     "body-parser": "^1.19.0",
     "bootstrap": "^4.5.0",
     "canvas-confetti": "^1.2.0",
     "connect-pg-simple": "^6.1.0",
     "express": "^4.17.1",
     "express-session": "^1.17.1",
-    "leaflet": "^1.6.0",
+    "geojson": "^0.5.0",
-    "lodash.isequal": "^4.5.0",
+    "leaflet": "^1.7.1",
-    "mapnik": "^4.4.0",
+    "lodash": "^4.17.21",
+    "mapnik": "^4.5.8",
     "node-fs": "^0.1.7",
     "nodemailer": "^6.4.11",
     "pg-promise": "^8.7.5",
     "query-string": "^6.13.1",
-    "react": "^16.13.1",
+    "react": "^17.0.2",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.2",
-    "react-leaflet": "^1.0.1",
+    "react-leaflet": "^3.1.0",
-    "react-leaflet-universal": "^2.2.1",
     "react-router-dom": "^5.2.0",
-    "serialize-javascript": "^2.1.1",
+    "serialize-javascript": "^5.0.1",
-    "sharp": "^0.22.1",
+    "sharp": "^0.28.1",
     "use-throttle": "0.0.3"
   },
   "devDependencies": {
     "@types/express": "^4.17.7",
     "@types/express-session": "^1.17.0",
-    "@types/jest": "^24.9.1",
+    "@types/geojson": "^7946.0.7",
-    "@types/lodash": "^4.14.158",
+    "@types/jest": "^26.0.22",
-    "@types/lodash.isequal": "^4.5.5",
+    "@types/leaflet": "^1.7.0",
+    "@types/loadable__component": "^5.13.3",
+    "@types/lodash": "^4.14.168",
     "@types/mapbox__sphericalmercator": "^1.1.3",
     "@types/node": "^12.12.53",
     "@types/nodemailer": "^6.4.0",
-    "@types/react": "^16.9.44",
+    "@types/react": "^17.0.3",
-    "@types/react-dom": "^16.9.8",
+    "@types/react-dom": "^17.0.3",
-    "@types/react-leaflet": "^2.5.2",
     "@types/react-router-dom": "^4.3.5",
-    "@types/sharp": "^0.22.3",
+    "@types/sharp": "^0.28.0",
-    "@types/webpack-env": "^1.15.2",
+    "@types/webpack-env": "^1.16.0",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^2.34.0",
+    "@typescript-eslint/parser": "^4.22.0",
-    "babel-eslint": "^10.1.0",
+    "copy-webpack-plugin": "^8.1.1",
-    "copy-webpack-plugin": "^6.2.1",
+    "eslint": "^7.24.0",
-    "eslint": "^5.16.0",
+    "eslint-plugin-jest": "^24.3.5",
-    "eslint-plugin-jest": "^22.21.0",
+    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react": "^7.20.5",
+    "html-webpack-plugin": "^5.2.0",
-    "razzle": "^3.1.6",
+    "mini-css-extract-plugin": "^0.9.0",
-    "razzle-plugin-typescript": "^3.1.6",
+    "postcss": "^8.2.4",
-    "ts-jest": "^24.3.0",
+    "razzle": "^4.0.4",
-    "typescript": "^3.9.7"
+    "razzle-dev-utils": "^4.0.4",
+    "razzle-plugin-typescript": "^4.0.4",
+    "ts-jest": "^26.5.5",
+    "typescript": "^4.2.4",
+    "webpack": "^5.24.0",
+    "webpack-dev-server": "^3.11.0"
   },
   "jest": {
     "transform": {

app/razzle.config.js

@@ -1,37 +1,31 @@
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = {
     plugins: [
         {
-            name: "typescript",
+            name: 'typescript',
             options: {
-                useBabel: true,
-                useEslint: true,
                 forkTsChecker: {
-                    tsconfig: "./tsconfig.json",
+                    eslint: undefined // { files: './src/**/*.{ts,tsx,js,jsx}' }
-                    tslint: undefined,
-                    watch: "./src",
-                    typeCheck: true,
                 },
             },
         },
     ],
-    modify: (config, { target, dev }, webpack) => {
+    modifyWebpackConfig({ env: { target, dev }, webpackConfig }) {
         // load webfonts
-        const rules = config.module.rules || [];
+        webpackConfig.module.rules = webpackConfig.module.rules || [];
-        rules.push({
+        webpackConfig.module.rules.push({
             test: /\.(eot|svg|ttf|woff|woff2)$/,
-            loader: 'file-loader?name=public/fonts/[name].[ext]'
+            type: 'asset/resource'
-        })
+        });
-        config.module.rules = rules;
 
         // add the map_styles directory to the build output
-        const plugins = config.plugins || [];
+        const plugins = webpackConfig.plugins || [];
-        plugins.push(new CopyWebpackPlugin({
+        plugins.push(new CopyPlugin({
-            patterns: [ {from: 'map_styles', to: "map_styles"}]
+            patterns: [ {from: 'map_styles', to: 'map_styles'}]
         }));
-        config.plugins = plugins;
+        webpackConfig.plugins = plugins;
 
-        return config;
+        return webpackConfig;
     },
 };

app/src/api/services/__tests__/domainLogic/landUse.test.ts

@@ -1,4 +1,4 @@
-import * as _ from 'lodash';
+import _ from 'lodash';
 
 import { ArgumentError } from '../../../errors/general';
 import { LandUseState, updateLandUse } from '../../domainLogic/landUse';

app/src/api/services/building/base.ts

@@ -2,7 +2,7 @@
  * Building data access
  *
  */
-import * as _ from 'lodash';
+import _ from 'lodash';
 
 import { pickFields } from '../../../helpers';
 import { dataFieldsConfig } from '../../config/dataFields';

app/src/api/services/building/save.ts

@@ -1,5 +1,5 @@
 import { ITask } from 'pg-promise';
-import * as _ from 'lodash';
+import _ from 'lodash';
 
 import db from '../../../db';
 import * as buildingDataAccess from '../../dataAccess/building';

app/src/api/services/domainLogic/processBuildingUpdate.ts

@@ -1,4 +1,4 @@
-import * as _ from 'lodash';
+import _ from 'lodash';
 
 import { hasAnyOwnProperty } from '../../../helpers';
 import { Building, BuildingUpdate } from '../../config/dataFields';

app/src/frontend/building/data-containers/dynamics/dynamics-data-entry.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import * as _ from 'lodash';
+import _ from 'lodash';
 
 import { BuildingAttributes } from '../../../models/building';
 import { FieldRow } from '../../data-components/field-row';

app/src/frontend/helpers.ts

@@ -1,4 +1,4 @@
-import isEqual from 'lodash.isequal';
+import _ from 'lodash';
 import urlapi from 'url';
 
 function sanitiseURL(string){
@@ -67,7 +67,7 @@ function compareObjects(objA: object, objB: object): [object, object] {
     const reverse = {};
     const forward = {};
     for (const [key, value] of Object.entries(objB)) {
-        if (!isEqual(objA[key], value)) {
+        if (!_.isEqual(objA[key], value)) {
             reverse[key] = objA[key];
             forward[key] = value;
         }

app/src/frontend/map-app.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
+import loadable from '@loadable/component';
 
 import { useRevisionId } from './hooks/use-revision';
 import { useBuildingData } from './hooks/use-building-data';
@@ -14,7 +15,6 @@ import Categories from './building/categories';
 import { EditHistory } from './building/edit-history/edit-history';
 import MultiEdit from './building/multi-edit';
 import Sidebar from './building/sidebar';
-import ColouringMap from './map/map';
 import { Building, UserVerified } from './models/building';
 import Welcome from './pages/welcome';
 import { PrivateRoute } from './route';
@@ -23,6 +23,22 @@ import { Category } from './config/categories-config';
 import { defaultMapCategory } from './config/category-maps-config';
 import { useMultiEditData } from './hooks/use-multi-edit-data';
 
+/**
+ * Load and render ColouringMap component on client-side only.
+ * This is because leaflet and react-leaflet currently don't work on the server
+ * (leaflet assumes the presence of browser-specific global `window` variable).
+ * 
+ * The previous solution involved installing react-leaflet-universal,
+ * but that doesn't work with latest react-leaflet.
+ * 
+ * The limitation is that ColouringMap needs to be the single entry point in the whole app
+ * to all modules that import leaflet or react-leaflet.
+ */
+const ColouringMap = loadable(
+    () => import('./map/map'),
+    { ssr: false }
+);
+
 interface MapAppProps {
     building?: Building;
     building_like?: boolean;

app/src/frontend/map/map.tsx

@@ -1,6 +1,6 @@
 import { GeoJsonObject } from 'geojson';
 import React, { Component, Fragment } from 'react';
-import { AttributionControl, GeoJSON, Map, TileLayer, ZoomControl } from 'react-leaflet-universal';
+import { AttributionControl, GeoJSON, MapContainer, TileLayer, ZoomControl, useMapEvent } from 'react-leaflet';
 
 import 'leaflet/dist/leaflet.css';
 import './map.css';
@@ -101,6 +101,7 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
             attribution={attribution}
             maxNativeZoom={18}
             maxZoom={19}
+            detectRetina={true}
         />;
 
         const buildingsBaseUrl = `/tiles/base_${this.state.theme}/{z}/{x}/{y}{r}.png`;
@@ -116,16 +117,18 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
                 url={`/tiles/${tileset}/{z}/{x}/{y}{r}.png?rev=${this.props.revisionId}`}
                 minZoom={9}
                 maxZoom={19}
+                detectRetina={true}
             />;
 
         // highlight
         const highlightLayer = this.props.selectedBuildingId != undefined &&
             <TileLayer
-                key={this.props.selectedBuildingId}
+                key={this.props.selectedBuildingId + tileset}
                 url={`/tiles/highlight/{z}/{x}/{y}{r}.png?highlight=${this.props.selectedBuildingId}&base=${tileset}`}
                 minZoom={13}
                 maxZoom={19}
                 zIndex={100}
+                detectRetina={true}
             />;
 
         const numbersLayer = <TileLayer
@@ -134,6 +137,7 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
             zIndex={200}
             minZoom={17}
             maxZoom={19}
+            detectRetina={true}
         />
 
         const hasSelection = this.props.selectedBuildingId != undefined;
@@ -141,7 +145,7 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
 
         return (
             <div className="map-container">
-                <Map
+                <MapContainer
                     center={position}
                     zoom={this.state.zoom}
                     minZoom={9}
@@ -149,9 +153,8 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
                     doubleClickZoom={false}
                     zoomControl={false}
                     attributionControl={false}
-                    onClick={this.handleClick}
-                    detectRetina={true}
                 >
+                    <ClickHandler onClick={this.handleClick} />
                     { baseLayer }
                     { buildingBaseLayer }
                     { boundaryLayer }
@@ -160,7 +163,7 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
                     { numbersLayer }
                     <ZoomControl position="topright" />
                     <AttributionControl prefix=""/>
-                </Map>
+                </MapContainer>
                 {
                     this.props.mode !== 'basic' &&
                     <Fragment>
@@ -180,4 +183,10 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
     }
 }
 
+function ClickHandler({ onClick }: {onClick: (e) => void}) {
+    useMapEvent('click', (e) => onClick(e));
+    
+    return null;
+}
+
 export default ColouringMap;

app/src/frontend/map/react-leaflet-universal.d.ts

@@ -1,9 +0,0 @@
-/**
- * Export all type declarations available for react-leaflet as types for react-leaflet-universal.
- * This is because the latter doesn't have type declarations published as of 2019-09-09
- * but we can re-use types from react-leaflet as universal is mostly a wrapper, so the types
- * still apply.
- */
-declare module 'react-leaflet-universal' {
-    export * from 'react-leaflet';
-}

app/tsconfig.json

@@ -2,6 +2,7 @@
     "compilerOptions": {
         "outDir": "./build",
         "allowJs": true,
+        "module": "es2020",
         "target": "es2017",
         "jsx": "react",
         "lib": ["es6", "es2015", "es2017", "dom"],