diff --git a/packages/core/__tests__/context.tsx b/packages/core/__tests__/context.tsx index 82a8a160..4ee2c782 100755 --- a/packages/core/__tests__/context.tsx +++ b/packages/core/__tests__/context.tsx @@ -2,7 +2,12 @@ import { renderHook } from '@testing-library/react' import type { Map } from 'leaflet' import React, { StrictMode, type ReactNode } from 'react' -import { CONTEXT_VERSION, LeafletContext, createLeafletContext, useLeafletContext } from '../src' +import { + CONTEXT_VERSION, + LeafletContext, + createLeafletContext, + useLeafletContext, +} from '../src' export function createWrapper(context) { return function Wrapper({ children }: { children: ReactNode }) { @@ -28,7 +33,7 @@ describe('context', () => { const { result } = renderHook(() => useLeafletContext()) return result.current }).toThrow( - 'No context provided: useLeafletContext() can only be used in a descendant of ' + 'No context provided: useLeafletContext() can only be used in a descendant of ', ) }) diff --git a/packages/core/package.json b/packages/core/package.json index 3e99c5b4..eebafc9e 100755 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@react-leaflet/core", - "version": "2.1.0", + "version": "3.0.0-beta.1", "description": "React Leaflet core", "repository": { "type": "git", diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 05c2a01c..b7d91552 100755 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,5 +1,9 @@ export { useAttribution } from './attribution.js' -export { type CircleMarkerProps, type CircleProps, updateCircle } from './circle.js' +export { + type CircleMarkerProps, + type CircleProps, + updateCircle, +} from './circle.js' export { createContainerComponent, createDivOverlayComponent, diff --git a/packages/react-leaflet/__tests__/MapContainer.tsx b/packages/react-leaflet/__tests__/MapContainer.tsx index afd68dc1..2869f566 100755 --- a/packages/react-leaflet/__tests__/MapContainer.tsx +++ b/packages/react-leaflet/__tests__/MapContainer.tsx @@ -1,5 +1,5 @@ import { render } from '@testing-library/react' -import { type LatLngExpression, Map } from 'leaflet' +import { type LatLngExpression, Map as LeafletMap } from 'leaflet' import React, { StrictMode, useEffect, useRef } from 'react' import { MapContainer, useMap } from '../src' @@ -30,10 +30,15 @@ describe('MapContainer', () => { describe('provides the Map instance', () => { test('with the useMap() hook', (done) => { + let doneCalled = false + function TestChild() { const map = useMap() - expect(map).toBeInstanceOf(Map) - done() + expect(map).toBeInstanceOf(LeafletMap) + if (!doneCalled) { + doneCalled = true + done() + } return null } @@ -49,10 +54,15 @@ describe('MapContainer', () => { }) test('in the ref function', (done) => { + let doneCalled = false + const ref = (map) => { - if (map !== null) { - expect(map).toBeInstanceOf(Map) - done() + if (map != null) { + expect(map).toBeInstanceOf(LeafletMap) + if (!doneCalled) { + doneCalled = true + done() + } } } @@ -64,14 +74,19 @@ describe('MapContainer', () => { }) test('in the ref object', (done) => { + let doneCalled = false + function Wrapper() { - const ref = useRef() + const ref = useRef(undefined) useEffect(() => { setTimeout(() => { - if (ref.current !== null) { - expect(ref.current).toBeInstanceOf(Map) - done() + if (ref.current != null) { + expect(ref.current).toBeInstanceOf(LeafletMap) + if (!doneCalled) { + doneCalled = true + done() + } } }, 50) }, []) @@ -86,12 +101,16 @@ describe('MapContainer', () => { test('sets center and zoom props', (done) => { const center: LatLngExpression = [1.2, 3.4] const zoom = 10 + let doneCalled = false const ref = (map) => { - if (map !== null) { + if (map != null) { expect(map.getCenter()).toEqual({ lat: 1.2, lng: 3.4 }) expect(map.getZoom()).toBe(zoom) - done() + if (!doneCalled) { + doneCalled = true + done() + } } } diff --git a/packages/react-leaflet/__tests__/Pane.tsx b/packages/react-leaflet/__tests__/Pane.tsx index 0ec0a510..8e21f943 100755 --- a/packages/react-leaflet/__tests__/Pane.tsx +++ b/packages/react-leaflet/__tests__/Pane.tsx @@ -102,7 +102,7 @@ describe('Pane', () => { describe('supports refs', () => { test('as callback function', (done) => { const ref = (pane) => { - if (pane !== null) { + if (pane != null) { expect(pane).toBeInstanceOf(HTMLElement) done() } @@ -126,7 +126,7 @@ describe('Pane', () => { test('as object', (done) => { function Wrapper() { - const ref = useRef() + const ref = useRef(undefined) useEffect(() => { setTimeout(() => { diff --git a/packages/react-leaflet/package.json b/packages/react-leaflet/package.json index 4115c76b..0bf55860 100755 --- a/packages/react-leaflet/package.json +++ b/packages/react-leaflet/package.json @@ -1,6 +1,6 @@ { "name": "react-leaflet", - "version": "4.2.1", + "version": "5.0.0-beta.1", "description": "React components for Leaflet maps", "repository": { "type": "git", @@ -35,7 +35,7 @@ "prepublishOnly": "package-check" }, "dependencies": { - "@react-leaflet/core": "workspace:^2.1.0" + "@react-leaflet/core": "workspace:^" }, "peerDependencies": { "leaflet": "^1.9.0", diff --git a/packages/react-leaflet/src/MapContainer.tsx b/packages/react-leaflet/src/MapContainer.tsx index 51e85b33..9ea47681 100755 --- a/packages/react-leaflet/src/MapContainer.tsx +++ b/packages/react-leaflet/src/MapContainer.tsx @@ -1,6 +1,6 @@ import { - type LeafletContextInterface, LeafletContext, + type LeafletContextInterface, createLeafletContext, } from '@react-leaflet/core' import { @@ -14,9 +14,9 @@ import React, { type ReactNode, type Ref, forwardRef, - useCallback, useEffect, useImperativeHandle, + useRef, useState, } from 'react' @@ -51,12 +51,13 @@ function MapContainerComponent< ) { const [props] = useState({ className, id, style }) const [context, setContext] = useState(null) - useImperativeHandle(forwardedRef, () => context?.map ?? undefined, [context]) + const mapInstanceRef = useRef(undefined) + useImperativeHandle(forwardedRef, () => mapInstanceRef.current) - // biome-ignore lint/correctness/useExhaustiveDependencies: ref callback - const mapRef = useCallback((node: HTMLDivElement | null) => { - if (node !== null && context === null) { + const mapRef = (node?: HTMLDivElement | null) => { + if (node != null && !mapInstanceRef.current) { const map = new LeafletMap(node, options) + mapInstanceRef.current = map if (center != null && zoom != null) { map.setView(center, zoom) } else if (bounds != null) { @@ -67,7 +68,7 @@ function MapContainerComponent< } setContext(createLeafletContext(map)) } - }, []) + } useEffect(() => { return () => { diff --git a/packages/react-leaflet/src/Pane.tsx b/packages/react-leaflet/src/Pane.tsx index ab1626e5..5a22242a 100755 --- a/packages/react-leaflet/src/Pane.tsx +++ b/packages/react-leaflet/src/Pane.tsx @@ -1,6 +1,6 @@ import { - type LeafletContextInterface, LeafletContext, + type LeafletContextInterface, addClassName, useLeafletContext, } from '@react-leaflet/core' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d9930a48..0d75fa03 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -94,7 +94,7 @@ importers: packages/react-leaflet: dependencies: '@react-leaflet/core': - specifier: workspace:^2.1.0 + specifier: workspace:^ version: link:../core leaflet: specifier: ^1.9.0