v4 beta 1

CHANGELOG.md

@@ -1,3 +1,7 @@
+## v4.0.0-beta.1 (2022-04-18)
+
+Updated Leaflet dependency to v1.8 beta.
+
 ## v4.0.0-beta.0 (2022-04-02)
 
 Updated React dependencies to v18 stable.

package.json

@@ -18,34 +18,34 @@
   "devDependencies": {
     "@skypack/package-check": "^0.2.2",
     "@swc/cli": "^0.1.55",
-    "@swc/core": "^1.2.162",
+    "@swc/core": "^1.2.168",
     "@swc/jest": "^0.2.17",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/react-hooks": "^8.0.0-alpha",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/react-hooks": "^8.0.0",
     "@types/jest": "^27.4.0",
     "@types/leaflet": "^1.7.9",
     "@types/warning": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.10.2",
-    "@typescript-eslint/parser": "^5.10.2",
+    "@typescript-eslint/eslint-plugin": "^5.19.0",
+    "@typescript-eslint/parser": "^5.19.0",
     "cross-env": "^7.0.3",
     "del-cli": "^4.0.1",
-    "eslint": "^8.11.0",
+    "eslint": "^8.13.0",
     "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^27.5.0",
-    "leaflet": "^1.7.1",
-    "prettier": "^2.5.1",
+    "leaflet": "^1.8.0-beta.3",
+    "prettier": "^2.6.2",
     "prettier-eslint": "^13.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-test-renderer": "^18.0.0",
     "ts-jest-resolver": "^2.0.0",
-    "turbo": "^1.1.6",
+    "turbo": "^1.2.4",
     "typescript": "^4.5.5"
   },
   "jest": {

packages/core/__tests__/components.tsx

@@ -1,5 +1,5 @@
 import { act, render, screen } from '@testing-library/react'
-import React, { useEffect, useRef } from 'react'
+import React, { StrictMode, useEffect, useRef } from 'react'
 
 import {
   createElementHook,
@@ -28,7 +28,11 @@ describe('components', () => {
         return <Component ref={ref} />
       }
 
-      render(<TestWrapper />)
+      render(
+        <StrictMode>
+          <TestWrapper />
+        </StrictMode>,
+      )
       expect(refInstance).toBe(instance)
     })
 
@@ -98,9 +102,11 @@ describe('components', () => {
       }
 
       render(
-        <Component>
-          <Child />
-        </Component>,
+        <StrictMode>
+          <Component>
+            <Child />
+          </Component>
+        </StrictMode>,
       )
       expect(rendered).toBe(true)
     })
@@ -123,9 +129,11 @@ describe('components', () => {
       }
 
       render(
-        <Component>
-          <Child />
-        </Component>,
+        <StrictMode>
+          <Component>
+            <Child />
+          </Component>
+        </StrictMode>,
       )
       expect(childContext).toBe(containerContext)
     })
@@ -146,7 +154,11 @@ describe('components', () => {
         return <Component ref={ref} />
       }
 
-      render(<TestWrapper />)
+      render(
+        <StrictMode>
+          <TestWrapper />
+        </StrictMode>,
+      )
       expect(refInstance).toBe(instance)
     })
 
@@ -173,9 +185,11 @@ describe('components', () => {
       const useOverlay = createDivOverlayHook(useElement, jest.fn())
       const Component = createDivOverlayComponent(useOverlay)
       render(
-        <Component>
-          <span>Test</span>
-        </Component>,
+        <StrictMode>
+          <Component>
+            <span>Test</span>
+          </Component>
+        </StrictMode>,
         { wrapper: createWrapper({}) },
       )
       screen.getByText('Test')
@@ -195,7 +209,12 @@ describe('components', () => {
 
       const useOverlay = createDivOverlayHook(useElement, useLifecycle)
       const Component = createDivOverlayComponent(useOverlay)
-      render(<Component />, { wrapper: createWrapper({}) })
+      render(
+        <StrictMode>
+          <Component />
+        </StrictMode>,
+        { wrapper: createWrapper({}) },
+      )
 
       expect(update).not.toHaveBeenCalled()
       act(() => {

packages/core/__tests__/context.tsx

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react-hooks'
 import type { Map } from 'leaflet'
-import React, { type ReactNode } from 'react'
+import React, { StrictMode, type ReactNode } from 'react'
 
 import {
   CONTEXT_VERSION,
@@ -11,7 +11,11 @@ import {
 
 export function createWrapper(context) {
   return function Wrapper({ children }: { children: ReactNode }) {
-    return <LeafletProvider value={context}>{children}</LeafletProvider>
+    return (
+      <StrictMode>
+        <LeafletProvider value={context}>{children}</LeafletProvider>
+      </StrictMode>
+    )
   }
 }
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-leaflet/core",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "description": "React Leaflet core",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "prepublishOnly": "package-check"
   },
   "peerDependencies": {
-    "leaflet": "^1.7.1",
+    "leaflet": "^1.8.0-beta.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

packages/react-leaflet/__tests__/MapContainer.tsx

@@ -1,12 +1,16 @@
 import { render } from '@testing-library/react'
 import { type LatLngExpression, Map } from 'leaflet'
-import React, { useEffect, useRef } from 'react'
+import React, { StrictMode, useEffect, useRef } from 'react'
 
 import { MapContainer, useMap } from '../src'
 
 describe('MapContainer', () => {
   test('renders the containing div', () => {
-    const { container } = render(<MapContainer center={[0, 0]} zoom={10} />)
+    const { container } = render(
+      <StrictMode>
+        <MapContainer center={[0, 0]} zoom={10} />
+      </StrictMode>,
+    )
     expect(container).toMatchSnapshot()
   })
 

packages/react-leaflet/__tests__/Pane.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react'
-import React, { useEffect, useRef } from 'react'
+import React, { StrictMode, useEffect, useRef } from 'react'
 
 import { MapContainer, Pane, TileLayer } from '../src'
 
@@ -17,20 +17,20 @@ describe('Pane', () => {
 
   test('renders in Strict Mode', () => {
     const { container } = render(
-      <React.StrictMode>
+      <StrictMode>
         <MapContainer center={[0, 0]} zoom={10}>
           <Pane name="foo" style={{ zIndex: 1001 }}>
             <TileLayer attribution="tiles attribution" url="http://localhost" />
           </Pane>
         </MapContainer>
-      </React.StrictMode>,
+      </StrictMode>,
     )
     expect(container).toMatchSnapshot()
   })
 
   test('renders nested panes', () => {
     const { container } = render(
-      <React.StrictMode>
+      <StrictMode>
         <MapContainer center={[0, 0]} zoom={10}>
           <Pane name="foo" style={{ zIndex: 1001 }}>
             <Pane name="bar" style={{ zIndex: 4000 }}>
@@ -45,48 +45,56 @@ describe('Pane', () => {
             />
           </Pane>
         </MapContainer>
-      </React.StrictMode>,
+      </StrictMode>,
     )
     expect(container).toMatchSnapshot()
   })
 
   test('can unmount and remount with the same name', () => {
     const { rerender, container } = render(
-      <MapContainer center={[0, 0]} zoom={10}>
-        <Pane name="foo" style={{ zIndex: 1001 }}>
-          <Pane name="bar" style={{ zIndex: 4000 }}>
+      <StrictMode>
+        <MapContainer center={[0, 0]} zoom={10}>
+          <Pane name="foo" style={{ zIndex: 1001 }}>
+            <Pane name="bar" style={{ zIndex: 4000 }}>
+              <TileLayer
+                attribution="tiles attribution"
+                url="http://localhost/nested"
+              />
+            </Pane>
             <TileLayer
               attribution="tiles attribution"
-              url="http://localhost/nested"
+              url="http://localhost/not-nested"
             />
           </Pane>
-          <TileLayer
-            attribution="tiles attribution"
-            url="http://localhost/not-nested"
-          />
-        </Pane>
-      </MapContainer>,
+        </MapContainer>
+      </StrictMode>,
     )
     expect(container).toMatchSnapshot()
 
-    rerender(<MapContainer center={[0, 0]} zoom={10}></MapContainer>)
+    rerender(
+      <StrictMode>
+        <MapContainer center={[0, 0]} zoom={10}></MapContainer>
+      </StrictMode>,
+    )
     expect(container).toMatchSnapshot()
 
     rerender(
-      <MapContainer center={[0, 0]} zoom={10}>
-        <Pane name="bar" style={{ zIndex: 1001 }}>
-          <Pane name="foo" style={{ zIndex: 4000 }}>
+      <StrictMode>
+        <MapContainer center={[0, 0]} zoom={10}>
+          <Pane name="bar" style={{ zIndex: 1001 }}>
+            <Pane name="foo" style={{ zIndex: 4000 }}>
+              <TileLayer
+                attribution="tiles attribution"
+                url="http://localhost/new-foo-nested"
+              />
+            </Pane>
             <TileLayer
               attribution="tiles attribution"
-              url="http://localhost/new-foo-nested"
+              url="http://localhost/new-bar-not-nested"
             />
           </Pane>
-          <TileLayer
-            attribution="tiles attribution"
-            url="http://localhost/new-bar-not-nested"
-          />
-        </Pane>
-      </MapContainer>,
+        </MapContainer>
+      </StrictMode>,
     )
     expect(container).toMatchSnapshot()
   })

packages/react-leaflet/__tests__/__snapshots__/AttributionControl.tsx.snap

@@ -3,7 +3,7 @@
 exports[`AttributionControl renders and unmounts 1`] = `
 <div>
   <div
-    class="leaflet-container leaflet-grab leaflet-touch-drag"
+    class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
     style="position: relative;"
     tabindex="0"
   >
@@ -15,10 +15,10 @@ exports[`AttributionControl renders and unmounts 1`] = `
         class="leaflet-pane leaflet-tile-pane"
       />
       <div
-        class="leaflet-pane leaflet-shadow-pane"
+        class="leaflet-pane leaflet-overlay-pane"
       />
       <div
-        class="leaflet-pane leaflet-overlay-pane"
+        class="leaflet-pane leaflet-shadow-pane"
       />
       <div
         class="leaflet-pane leaflet-marker-pane"
@@ -40,22 +40,32 @@ exports[`AttributionControl renders and unmounts 1`] = `
           class="leaflet-control-zoom leaflet-bar leaflet-control"
         >
           <a
+            aria-disabled="false"
             aria-label="Zoom in"
             class="leaflet-control-zoom-in"
             href="#"
             role="button"
             title="Zoom in"
           >
-            +
+            <span
+              aria-hidden="true"
+            >
+              +
+            </span>
           </a>
           <a
+            aria-disabled="false"
             aria-label="Zoom out"
             class="leaflet-control-zoom-out"
             href="#"
             role="button"
             title="Zoom out"
           >
-            −
+            <span
+              aria-hidden="true"
+            >
+              −
+            </span>
           </a>
         </div>
       </div>
@@ -70,7 +80,7 @@ exports[`AttributionControl renders and unmounts 1`] = `
         >
           <a
             href="https://leafletjs.com"
-            title="A JS library for interactive maps"
+            title="A JavaScript library for interactive maps"
           >
             Leaflet
           </a>
@@ -84,7 +94,7 @@ exports[`AttributionControl renders and unmounts 1`] = `
         >
           <a
             href="https://leafletjs.com"
-            title="A JS library for interactive maps"
+            title="A JavaScript library for interactive maps"
           >
             Leaflet
           </a>