react-scripts 4 and associated eslint / prettier fixes

.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
   rules: {
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
+    '@typescript-eslint/ban-ts-comment': 'off'
     // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
     // e.g. "@typescript-eslint/explicit-function-return-type": "off",
   },

README.md

@@ -1,10 +1,12 @@
 ## React Azure Maps Playground
-  - How to link local package version:
-    - run yarn watch in `azure-maps-react`
-    - run yarn link `azure-maps-react`
-    - go to the `azure-maps-playground` and run `yarn link "react-azure-maps"`
+
+- How to link local package version:
+  - run yarn watch in `azure-maps-react`
+  - run yarn link `azure-maps-react`
+  - go to the `azure-maps-playground` and run `yarn link "react-azure-maps"`
 
 ### Subscription key
+
 Please remember to create file and add key to `/src/key.ts`
 
 `export const key = '<Your Subcription Key>'`

package.json

@@ -13,7 +13,7 @@
     "react-azure-maps": "^0.3.0",
     "react-dom": "^16.10.2",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "^3.4.4",
+    "react-scripts": "^4.0.3",
     "typescript": "3.6.4"
   },
   "scripts": {

src/App.css

@@ -3,8 +3,8 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
+    Helvetica Neue, sans-serif;
   font-size: 16px;
   color: #2c3e50;
 }
@@ -66,4 +66,4 @@ header img {
 .description span {
   display: block;
   font-weight: 600;
-}
+}

src/App.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import "./App.css";
+import React from 'react';
+import './App.css';
 
-import Layout from "./Layout/Layout";
+import Layout from './Layout/Layout';
 
-import { BrowserRouter as Router } from "react-router-dom";
+import { BrowserRouter as Router } from 'react-router-dom';
 const App: React.FC = () => {
   return (
     <div>

src/Layout/Description.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 const Description: React.FC = ({ children }) => {
   return (

src/Layout/Layout.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import Sidebar from "./Sidebar";
-import PageContent from "./PageContent";
-import logo from "../Assets/wired-logo.png";
+import React from 'react';
+import Sidebar from './Sidebar';
+import PageContent from './PageContent';
+import logo from '../Assets/wired-logo.png';
 
 const Layout: React.FC = () => {
   return (

src/Layout/PageContent.tsx

@@ -1,12 +1,12 @@
-import React from "react";
-import { Switch, Route } from "react-router-dom";
-import { examplesList } from "../examples/examplesList";
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { examplesList } from '../examples/examplesList';
 
 const PageContent = () => {
   return (
     <div className="content-page">
       <Switch>
-        {examplesList.map(item => (
+        {examplesList.map((item) => (
           <Route key={item.name} exact={item.exact} path={item.path}>
             <React.Fragment>
               <h1>{item.name}</h1>

src/Layout/Sidebar.tsx

@@ -1,19 +1,23 @@
-import React from "react";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemText from "@material-ui/core/ListItemText";
-import { Link } from "react-router-dom";
-import { examplesList } from "../examples/examplesList";
-import { withRouter, RouteProps } from "react-router";
-
+import React from 'react';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import { Link } from 'react-router-dom';
+import { examplesList } from '../examples/examplesList';
+import { withRouter, RouteProps } from 'react-router';
 
 const Sidebar = ({ location }: RouteProps) => {
-
   return (
     <div className="sidebar">
       <List disablePadding dense>
-        {examplesList.map(item => (
-          <ListItem selected={location && location.pathname === item.path} key={item.name} button component={Link} to={item.path}>
+        {examplesList.map((item) => (
+          <ListItem
+            selected={location && location.pathname === item.path}
+            key={item.name}
+            button
+            component={Link}
+            to={item.path}
+          >
             <ListItemText>{item.name}</ListItemText>
           </ListItem>
         ))}

src/examples/ArrowLinesExample.tsx

@@ -71,8 +71,9 @@ const ArrowLineExample: React.FC = () => {
         Arrows to end of paths
       </Typography>
       <Description>
-        This sample shows how to add arrow icons along a line on the map. When using a symbol layer, set the "placement"
-        option to "line", this will render the symbols along the line and rotate the icons (0 degrees = right).
+        This sample shows how to add arrow icons along a line on the map. When using a symbol layer, set the
+        &quot;placement&quot; option to &quot;line&quot;, this will render the symbols along the line and rotate the
+        icons (0 degrees = right).
       </Description>
       <AzureMapsProvider>
         <div style={wrapperStyles.map}>

src/examples/AsyncPopupExample.tsx

@@ -10,7 +10,7 @@ import {
 import { AuthenticationType, data } from 'azure-maps-control';
 import { key } from '../key';
 
-const AsyncPopupContent = ({ lazyData }: { lazyData: Object }) => {
+const AsyncPopupContent = ({ lazyData }: { lazyData: Record<string, unknown> }) => {
   return <div style={wrapperStyles.popupStyles}> {lazyData ? JSON.stringify(lazyData) : 'Loading'} </div>;
 };
 

src/examples/AzureLayer.tsx

@@ -101,17 +101,8 @@ const AzureLayer: React.FC = () => {
           <div style={styles.map}>
             <AzureMap options={option}>
               <AzureMapDataSourceProvider id={'LayerExample2 DataSource'}>
-                <AzureMapLayerProvider
-                  id={'LayerExample2 HeatMap'}
-                  options={{}}
-                  type={'HeatLayer'}
-                />
-                <AzureMapFeature
-                  id={'LayerExample2 MapFeature2'}
-                  key={'dddd'}
-                  type="Point"
-                  coordinate={point1}
-                />
+                <AzureMapLayerProvider id={'LayerExample2 HeatMap'} options={{}} type={'HeatLayer'} />
+                <AzureMapFeature id={'LayerExample2 MapFeature2'} key={'dddd'} type="Point" coordinate={point1} />
               </AzureMapDataSourceProvider>
             </AzureMap>
           </div>

src/examples/Buildings3D.tsx

@@ -1,43 +1,45 @@
-import React, {useState} from 'react'
-import {AzureMap, AzureMapsProvider, IAzureMapOptions} from 'react-azure-maps'
-import {AuthenticationType} from 'azure-maps-control'
-import {key} from '../key'
-import Description from "../Layout/Description";
-import {Button} from "@material-ui/core";
-import {wrapperStyles} from "./Options/ChangeOptionsWrapper";
+import React, { useState } from 'react';
+import { AzureMap, AzureMapsProvider, IAzureMapOptions } from 'react-azure-maps';
+import { AuthenticationType } from 'azure-maps-control';
+import { key } from '../key';
+import Description from '../Layout/Description';
+import { Button } from '@material-ui/core';
+import { wrapperStyles } from './Options/ChangeOptionsWrapper';
 
 const option: IAzureMapOptions = {
-    center: [-0.076083, 51.508120],
-    zoom: 16,
-    pitch: 60,
-    view: 'Auto',
-    authOptions: {
-        authType: AuthenticationType.subscriptionKey,
-        subscriptionKey: key
-    },
-}
+  center: [-0.076083, 51.50812],
+  zoom: 16,
+  pitch: 60,
+  view: 'Auto',
+  authOptions: {
+    authType: AuthenticationType.subscriptionKey,
+    subscriptionKey: key,
+  },
+};
 
 const Building3d: React.FC = () => {
-    const [showBuildingModels, setShowBuildingModels] = useState(true)
+  const [showBuildingModels, setShowBuildingModels] = useState(true);
 
-    return (<div>
-        <Description>Display 3D building footprints</Description>
-        <div style={wrapperStyles.buttonContainer}>
-            <Button
-                size="small"
-                variant="contained"
-                onClick={() => setShowBuildingModels(prev => !prev)}
-                color="secondary">
-                Toggle Buildings
-            </Button>
-        </div>
-        <div style={{height: '400px'}}>
-            <AzureMapsProvider>
-                <AzureMap options={option} styleOptions={{showBuildingModels: showBuildingModels}} >
-                </AzureMap>
-            </AzureMapsProvider>
-        </div>
-    </div>)
-}
+  return (
+    <div>
+      <Description>Display 3D building footprints</Description>
+      <div style={wrapperStyles.buttonContainer}>
+        <Button
+          size="small"
+          variant="contained"
+          onClick={() => setShowBuildingModels((prev) => !prev)}
+          color="secondary"
+        >
+          Toggle Buildings
+        </Button>
+      </div>
+      <div style={{ height: '400px' }}>
+        <AzureMapsProvider>
+          <AzureMap options={option} styleOptions={{ showBuildingModels: showBuildingModels }}></AzureMap>
+        </AzureMapsProvider>
+      </div>
+    </div>
+  );
+};
 
-export default Building3d
+export default Building3d;

src/examples/CustomControl/BringDataControl.tsx

@@ -25,7 +25,6 @@ const option: IAzureMapOptions = {
 
 const controls: [IAzureCustomControls] = [
   {
-    // @ts-ignore
     control: new BringDataIntoViewControl({
       units: 'imperial',
     }),

src/examples/CustomControl/BringDataControlHelper.ts

@@ -98,7 +98,7 @@ export class BringDataIntoViewControl implements atlas.Control {
       let data: atlas.data.Feature<atlas.data.Geometry, any>[] = [];
 
       // @ts-ignore
-      for (let s of this._map.sources['sources'].values()) {
+      for (const s of this._map.sources['sources'].values()) {
         if (s.toJson) {
           data = data.concat((<atlas.source.DataSource>s).toJson().features);
         }
@@ -112,12 +112,12 @@ export class BringDataIntoViewControl implements atlas.Control {
 
       const pos = [];
       // @ts-ignore
-      for (let marker of this._map.markers['markers'].values()) {
+      for (const marker of this._map.markers['markers'].values()) {
         pos.push(marker.getOptions().position);
       }
 
       if (pos.length > 0) {
-        var b = AtlasData.BoundingBox.fromPositions(pos);
+        const b = AtlasData.BoundingBox.fromPositions(pos);
         if (bounds === null) {
           bounds = b;
         } else {
@@ -129,7 +129,7 @@ export class BringDataIntoViewControl implements atlas.Control {
       for (let i = 0; i < l.length; i++) {
         if (l[i].getOptions) {
           // @ts-ignore
-          var b = AtlasData.BoundingBox.fromPositions((<atlas.layer.ImageLayer>l[i]).getOptions().coordinates);
+          const b = AtlasData.BoundingBox.fromPositions((<atlas.layer.ImageLayer>l[i]).getOptions().coordinates);
 
           if (bounds === null) {
             bounds = b;

src/examples/CustomLayer/HTMLCustomMarkerLayer.tsx

@@ -13,8 +13,8 @@ import { wrapperStyles } from '../PopupExample';
 import { HtmlMarkerLayer } from './HTMLMarkerLayer';
 
 function markerHovered(e: any) {
-  var content;
-  var marker = e.target;
+  let content;
+  const marker = e.target;
   if (marker.properties.cluster) {
     content = 'Cluster of ' + marker.properties.point_count_abbreviated + ' markers';
   } else {
@@ -92,7 +92,7 @@ const HTMLCustomMarkerLayer: React.FC = () => (
                     return marker;
                   },
                   clusterRenderCallback: function (id: any, position: any, properties: any) {
-                    var cluster = new HtmlMarker({
+                    const cluster = new HtmlMarker({
                       position: position,
                       color: 'DarkViolet',
                       text: properties.point_count_abbreviated,

src/examples/CustomTrafficVectorDatasourceExample.tsx

@@ -1,5 +1,11 @@
-import React from 'react'
-import { AzureMap, AzureMapLayerProvider, AzureMapsProvider, AzureMapVectorTileSourceProvider, IAzureMapOptions } from 'react-azure-maps'
+import React from 'react';
+import {
+  AzureMap,
+  AzureMapLayerProvider,
+  AzureMapsProvider,
+  AzureMapVectorTileSourceProvider,
+  IAzureMapOptions,
+} from 'react-azure-maps';
 import { key } from '../key';
 import { AuthenticationType } from 'azure-maps-control';
 import { wrapperStyles } from './RouteExample';
@@ -25,17 +31,19 @@ const CustomTrafficVectorDatasourceExample: React.FC = () => (
   <div style={wrapperStyles.map}>
     <Description>
       This sample shows how to create a custom vector tile datasource that renders traffic information
-    </Description>  
+    </Description>
     <AzureMapsProvider>
       <div style={styles.map}>
         <AzureMap options={option}>
-          <AzureMapVectorTileSourceProvider 
-            id={"Traffic Flow DataSource"} 
+          <AzureMapVectorTileSourceProvider
+            id={'Traffic Flow DataSource'}
             options={{
               maxZoom: 22,
-              tiles: ['https://{azMapsDomain}/traffic/flow/tile/pbf?api-version=1.0&style=relative&zoom={z}&x={x}&y={y}'], 
-            }}>
-            
+              tiles: [
+                'https://{azMapsDomain}/traffic/flow/tile/pbf?api-version=1.0&style=relative&zoom={z}&x={x}&y={y}',
+              ],
+            }}
+          >
             <AzureMapLayerProvider
               id={'Flow Layer'}
               type={'LineLayer'}
@@ -45,17 +53,14 @@ const CustomTrafficVectorDatasourceExample: React.FC = () => (
                   'interpolate',
                   ['linear'],
                   ['get', 'traffic_level'],
-                  0, 'red',
-                  0.33, 'orange',
-                  0.66, 'green'
+                  0,
+                  'red',
+                  0.33,
+                  'orange',
+                  0.66,
+                  'green',
                 ],
-                strokeWidth: [
-                  'interpolate',
-                  ['linear'],
-                  ['get', 'traffic_level'],
-                  0, 6,
-                  1, 1
-                ]
+                strokeWidth: ['interpolate', ['linear'], ['get', 'traffic_level'], 0, 6, 1, 1],
               }}
             />
           </AzureMapVectorTileSourceProvider>
@@ -63,6 +68,6 @@ const CustomTrafficVectorDatasourceExample: React.FC = () => (
       </div>
     </AzureMapsProvider>
   </div>
-)
+);
 
-export default CustomTrafficVectorDatasourceExample
+export default CustomTrafficVectorDatasourceExample;

src/examples/Live/COVID-19.tsx

@@ -11,7 +11,6 @@
 // import {key} from "../../key";
 // import {Button} from "@material-ui/core";
 
-
 // const option: IAzureMapOptions = {
 //   authOptions: {
 //     authType: AuthenticationType.subscriptionKey,

src/examples/Live/issPosition.tsx

@@ -12,7 +12,6 @@ import {
 import { AuthenticationType } from 'azure-maps-control';
 import { key } from '../../key';
 import Description from '../../Layout/Description';
-
 const option: IAzureMapOptions = {
   authOptions: {
     authType: AuthenticationType.subscriptionKey,
@@ -29,7 +28,7 @@ const spaceshipImageSprites: IAzureMapImageSprite = {
   icon: iconUrl,
 };
 
-const getData = (setIssPosition: Function) => {
+const getData = (setIssPosition: (position: AzureDataPosition) => void) => {
   // create a new XMLHttpRequest
   const xhr = new XMLHttpRequest();
 

src/examples/MarkersExample/MarkersExample.tsx

@@ -46,7 +46,7 @@ const memoizedOptions: SymbolLayerOptions = {
 
 const eventToMarker: Array<IAzureMapHtmlMarkerEvent> = [{ eventName: 'click', callback: onClick }];
 
-const renderPoint = (coordinates: data.Position): IAzureMapFeature  => {
+const renderPoint = (coordinates: data.Position): IAzureMapFeature => {
   const rendId = Math.random();
 
   return (
@@ -93,7 +93,7 @@ const markersStandardImages = [
   `pin-round-red`,
 ];
 
-const rand = () => ( markersStandardImages[Math.floor(Math.random() * markersStandardImages.length)] )
+const rand = () => markersStandardImages[Math.floor(Math.random() * markersStandardImages.length)];
 const MarkersExample: React.FC = () => {
   const [markers, setMarkers] = useState([point1, point2, point3]);
   const [htmlMarkers, setHtmlMarkers] = useState([point4]);

src/examples/MultiplePointWithPopup.tsx

@@ -64,7 +64,6 @@ const MarkersExample: React.FC = () => {
     setMarkers([]);
   };
 
-
   const memoizedMarkerRender: IAzureMapFeature[] = useMemo(
     (): IAzureMapFeature[] => markers.map((marker) => renderPoint(marker)),
     [markers],
@@ -74,7 +73,7 @@ const MarkersExample: React.FC = () => {
   return (
     <>
       <Description>
-        Simple example with marker's popup <br />
+        Simple example with marker&apos;s popup <br />
         Popup content are created from markers properties
       </Description>
       <div style={styles.buttonContainer}>

src/examples/Shape/Shape.tsx

@@ -22,7 +22,7 @@ const option: IAzureMapOptions = {
   view: 'Auto',
 };
 
-const randomColor = (): Object => {
+const randomColor = (): { color: string } => {
   const colorValue = '#000000'.replace(/0/g, function () {
     return (~~(Math.random() * 16)).toString(16);
   });

src/examples/TrafficOptions.tsx

@@ -26,7 +26,7 @@ const TrafficOptionsExample: React.FC = () => {
         This sample shows how the different Traffic Options change how the traffic overlay is rendered on the map.{' '}
         <br />
         As initial traffic options are: <br />
-        incidents: true, flow: 'absolute'
+        incidents: true, flow: &apos;absolute&apos;
       </Description>
       <div style={wrapperStyles.buttonContainer}>
         <Button

src/examples/examplesList.tsx

@@ -132,11 +132,11 @@ export const examplesList: MapExampleItem[] = [
   {
     name: 'Building 3D',
     component: Building3d,
-    path: '/building-3d'
+    path: '/building-3d',
   },
   {
     name: 'Vector Tile Datasource Traffic',
     component: CustomTrafficVectorDatasourceExample,
-    path: '/custom-traffic'
-  }
+    path: '/custom-traffic',
+  },
 ];

src/examples/mapHelper.tsx

@@ -28,7 +28,11 @@ export const lineData = [
   ]),
 ];
 
-export const renderMultiLine = (type: IAzureMapFeatureType, coordinates: data.Position[], properties: Object) => {
+export const renderMultiLine = (
+  type: IAzureMapFeatureType,
+  coordinates: data.Position[],
+  properties: Record<string, unknown>,
+) => {
   const rendId = Math.random();
 
   return (
@@ -42,7 +46,11 @@ export const renderMultiLine = (type: IAzureMapFeatureType, coordinates: data.Po
   );
 };
 
-const renderFeature = (type: IAzureMapFeatureType, coordinates: atlas.data.Position, properties: Object) => {
+const renderFeature = (
+  type: IAzureMapFeatureType,
+  coordinates: atlas.data.Position,
+  properties: Record<string, unknown>,
+) => {
   const rendId = Math.random();
 
   return (

src/index.css

@@ -1,15 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
 .pulseIcon {

src/serviceWorker.ts

@@ -15,9 +15,7 @@ const isLocalhost = Boolean(
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
     // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),
 );
 
 type Config = {
@@ -28,10 +26,7 @@ type Config = {
 export function register(config?: Config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(
-      (process as { env: { [key: string]: string } }).env.PUBLIC_URL,
-      window.location.href
-    );
+    const publicUrl = new URL((process as { env: { [key: string]: string } }).env.PUBLIC_URL, window.location.href);
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to
@@ -51,7 +46,7 @@ export function register(config?: Config) {
         navigator.serviceWorker.ready.then(() => {
           console.log(
             'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+              'worker. To learn more, visit https://bit.ly/CRA-PWA',
           );
         });
       } else {
@@ -65,7 +60,7 @@ export function register(config?: Config) {
 function registerValidSW(swUrl: string, config?: Config) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
@@ -79,7 +74,7 @@ function registerValidSW(swUrl: string, config?: Config) {
               // content until all client tabs are closed.
               console.log(
                 'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
               );
 
               // Execute callback
@@ -101,7 +96,7 @@ function registerValidSW(swUrl: string, config?: Config) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error('Error during service worker registration:', error);
     });
 }
@@ -109,15 +104,12 @@ function registerValidSW(swUrl: string, config?: Config) {
 function checkValidServiceWorker(swUrl: string, config?: Config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
+      if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -128,15 +120,13 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
       }
     })
     .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
+      console.log('No internet connection found. App is running in offline mode.');
     });
 }
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
+    navigator.serviceWorker.ready.then((registration) => {
       registration.unregister();
     });
   }