Merge pull request #124 from yulinscottkang/r18

chore(deps): upgrade to react 18

Author: yulinscottkang

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "trailingComma": "none",
+    "semi": false,
+    "singleQuote": true
+}

commitlint.config.js

@@ -1 +1 @@
-module.exports = { extends: ['@commitlint/config-angular'] }
+module.exports = { extends: ['@commitlint/config-conventional'] }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-azure-maps",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "React Wrapper for Azure Maps",
   "keywords": [
     "react",
@@ -84,12 +84,11 @@
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-replace": "^2.3.4",
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/react-hooks": "^5.1.0",
+    "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "babel-preset-env": "^1.7.0",
     "concurrently": "^5.3.0",
     "cross-env": "^7.0.2",
@@ -98,8 +97,8 @@
     "lint-staged": "^10.5.2",
     "parcel-bundler": "1.12.3",
     "prettier": "^2.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-scripts": "4.0.1",
     "rollup": "^2.33.3",
     "rollup-plugin-copy": "^3.4.0",
@@ -117,8 +116,8 @@
     "azure-maps-control": "2.0.32",
     "guid-typescript": "^1.0.9",
     "mapbox-gl": "^1.10.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
   },
   "dependencies": {
     "azure-maps-control": "2.0.32",

preview/react-preview.jsx

@@ -1,22 +1,22 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { AzureMap, AzureMapsProvider } from '../dist/react-azure-maps.es5';
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { AzureMap, AzureMapsProvider } from '../dist/react-azure-maps.es5'
 
 const option = {
   authOptions: {
-    authType: "subscriptionKey",
-    subscriptionKey: "",
-  },
-};
+    authType: 'subscriptionKey',
+    subscriptionKey: ''
+  }
+}
 
-const DefaultMap= () => (
+const DefaultMap = () => (
   <AzureMapsProvider>
     <div style={{ height: '300px' }}>
       <AzureMap options={option} />
     </div>
   </AzureMapsProvider>
-);
+)
 
-export default DefaultMap;
+export default DefaultMap
 
-ReactDOM.render(<DefaultMap />, document.getElementById("root"));
+createRoot(document.getElementById('root')).render(<DefaultMap />)

src/components/AzureMap/useCreateMapControl.test.tsx

@@ -1,9 +1,5 @@
-import { renderHook } from '@testing-library/react-hooks'
-import {
-  createControl,
-  createMapControls,
-  createMapCustomControls
-} from './useCreateMapControls'
+import { renderHook } from '@testing-library/react'
+import { createControl, createMapControls, createMapCustomControls } from './useCreateMapControls'
 import { Map } from 'azure-maps-control'
 import { IAzureMapControls, IAzureCustomControls } from '../../types'
 

src/components/AzureMap/useCreateSprites.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import { createImageSprites } from './useCreateSprites'
 import { Map } from 'azure-maps-control'
 
@@ -25,7 +25,7 @@ describe('createImageSprites tests', () => {
     )
   })
 
-  it('should create image sprintes with no icon field and not call imageSprite.add ', async () => {
+  it('should create image sprintes with no icon field and not call imageSprite.add', async () => {
     const mockMap = new Map('#fake-container', {})
     const fakeImageSprite = {
       id: 'id',

src/components/AzureMapFeature/useFeature.test.tsx

@@ -1,7 +1,7 @@
 import atlas, { data, source } from 'azure-maps-control'
 import { useFeature } from './useFeature'
 import { IAzureMapFeature } from '../../types'
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 const fakePosition = new data.Point(new data.Position(0, 0))
 

src/components/AzureMapPopup/useCreateAzureMapPopup.test.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import { Map } from 'azure-maps-control'
 import React from 'react'
 import { AzureMapsContext } from '../../contexts/AzureMapContext'

src/contexts/AzureMapContext.test.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react'
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
+import { act } from 'react-dom/test-utils'
 import { Map } from 'azure-maps-control'
 import { AzureMapsContext, AzureMapsProvider } from '../contexts/AzureMapContext'
 
@@ -20,8 +21,10 @@ describe('AzureMapDataSourceProvider tests', () => {
     const { result } = renderHook(() => useContextConsumer(), {
       wrapper: wrapDataWithAzureMapsContext
     })
-    result.current.setMapRef(mapRef)
-    result.current.setMapReady(true)
+    act(() => {
+      result.current.setMapRef(mapRef)
+      result.current.setMapReady(true)
+    })
     expect(result.current.mapRef).toEqual(mapRef)
   })
 

src/contexts/AzureMapDataSourceContext.test.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import atlas, { Map } from 'azure-maps-control'
 import React from 'react'
 import { AzureMapsContext } from '../contexts/AzureMapContext'
@@ -66,7 +66,9 @@ describe('AzureMapDataSourceProvider tests', () => {
       wrapper: wrapWithDataSourceContext({ id: 'id', dataFromUrl: 'dataFromUrl' })
     })
     expect(result.current.dataSourceRef).toBeInstanceOf(atlas.source.DataSource)
-    expect((result.current.dataSourceRef as atlas.source.DataSource).importDataFromUrl).toHaveBeenCalledWith('dataFromUrl')
+    expect(
+      (result.current.dataSourceRef as atlas.source.DataSource).importDataFromUrl
+    ).toHaveBeenCalledWith('dataFromUrl')
   })
 
   it('should call add collection if collection was not falsy', () => {
@@ -95,6 +97,8 @@ describe('AzureMapDataSourceProvider tests', () => {
       wrapper: wrapWithDataSourceContext({ id: 'id', options: { option: 'option' } })
     })
     expect(result.current.dataSourceRef).toBeInstanceOf(atlas.source.DataSource)
-    expect((result.current.dataSourceRef as atlas.source.DataSource).setOptions).toHaveBeenLastCalledWith({ option: 'option' })
+    expect(
+      (result.current.dataSourceRef as atlas.source.DataSource).setOptions
+    ).toHaveBeenLastCalledWith({ option: 'option' })
   })
 })

src/contexts/AzureMapVectorTileSourceProvider.test.tsx

@@ -1,7 +1,7 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import React, { useContext } from 'react'
 import { Map } from 'azure-maps-control'
-import { IAzureVectorTileSourceStatefulProviderProps } from "../types"
+import { IAzureVectorTileSourceStatefulProviderProps } from '../types'
 import { AzureMapsContext } from './AzureMapContext'
 import { AzureMapVectorTileSourceProvider } from './AzureMapVectorTileSourceProvider'
 import { AzureMapDataSourceContext } from '../contexts/AzureMapDataSourceContext'
@@ -32,7 +32,9 @@ const wrapWithVectorTileSourceContext = (props: IAzureVectorTileSourceStatefulPr
         mapRef
       }}
     >
-      <AzureMapVectorTileSourceProvider {...{ ...props }}>{children}</AzureMapVectorTileSourceProvider>
+      <AzureMapVectorTileSourceProvider {...{ ...props }}>
+        {children}
+      </AzureMapVectorTileSourceProvider>
     </AzureMapsContext.Provider>
   )
 }
@@ -58,12 +60,15 @@ describe('AzureMapVectorTileSourceProvider tests', () => {
   it('should add event to data source', () => {
     mapRef.events.add = jest.fn()
     renderHook(() => useContextConsumer(), {
-      wrapper: wrapWithVectorTileSourceContext({ id: 'id', events: { sourceadded: (source) => {} } })
+      wrapper: wrapWithVectorTileSourceContext({
+        id: 'id',
+        events: { sourceadded: (source) => {} }
+      })
     })
     expect(mapRef.events.add).toHaveBeenCalledWith(
       'sourceadded',
       expect.any(Object),
       expect.any(Function)
     )
   })
-})
+})

src/hooks/useAzureMapLayer.test.tsx

@@ -1,6 +1,6 @@
 import atlas, { source, layer } from 'azure-maps-control'
 import { ReactNode } from 'react'
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import { useAzureMapLayer } from './useAzureMapLayer'
 import { Map } from 'azure-maps-control'
 import React from 'react'

src/hooks/useCheckRef.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import { useCheckRef, useCheckRefMount } from './useCheckRef'
 
 describe('useCheckRef tests', () => {

src/types.ts

@@ -1,4 +1,4 @@
-import { ComponentClass, CSSProperties, ReactElement, StatelessComponent } from 'react'
+import { ComponentClass, CSSProperties, ReactElement, ReactNode, FunctionComponent } from 'react'
 import atlas, {
   AnimationOptions,
   CameraBoundsOptions,
@@ -51,7 +51,7 @@ export type IAzureMap = {
   providedMapId?: string
   containerClassName?: string
   styles?: CSSProperties
-  LoaderComponent?: ComponentClass<any> | StatelessComponent<any>
+  LoaderComponent?: ComponentClass<any> | FunctionComponent<any>
   options?: IAzureMapOptions
   imageSprites?: IAzureMapImageSprite[]
   controls?: IAzureMapControls[]
@@ -129,7 +129,7 @@ export type IAzureMapLayerContextState = {
 }
 
 export type IAzureDataSourceChildren =
-  | IAzureMapFeature
+  | (IAzureMapFeature & ReactNode)
   | ReactElement<IAzureMapFeature>
   | ReactElement<IAzureLayerStatefulProviderProps>
 
@@ -160,9 +160,10 @@ export type IAzureMapEvent = {
 
 export type IAzureDataSourceStatefulProviderProps = {
   id: string
-  children?: | Array<IAzureDataSourceChildren | IAzureDataSourceChildren[] | null>
-  | IAzureDataSourceChildren
-  | null
+  children?:
+    | Array<IAzureDataSourceChildren | IAzureDataSourceChildren[] | null>
+    | IAzureDataSourceChildren
+    | null
   options?: DataSourceOptions
   events?: IAzureMapDataSourceEvent | any
   dataFromUrl?: string
@@ -177,11 +178,12 @@ export type IAzureDataSourceStatefulProviderProps = {
 }
 
 export type IAzureVectorTileSourceStatefulProviderProps = {
-  id: string,
-  children?: | Array<IAzureVectorTileSourceChildren | IAzureVectorTileSourceChildren[] | null>
-  | IAzureVectorTileSourceChildren
-  | null
-  options?: VectorTileSourceOptions,
+  id: string
+  children?:
+    | Array<IAzureVectorTileSourceChildren | IAzureVectorTileSourceChildren[] | null>
+    | IAzureVectorTileSourceChildren
+    | null
+  options?: VectorTileSourceOptions
   events?: IAzureMapVectorTileSourceEvent
   // NOTE: not sure yet why this is needed, haven't seen this used in AzureMapsDataSource, though IAzureGeoJSONDataSourceStatefulProviderProps has it
   index?: number