From 214def951effe4a708c16f8e56287b64eed1cbf5 Mon Sep 17 00:00:00 2001 From: Paul Le Cam Date: Tue, 30 Apr 2024 23:06:39 +0100 Subject: [PATCH] Setup React 19 beta --- package.json | 14 +- packages/core/__tests__/attribution.ts | 20 +- packages/core/__tests__/context.tsx | 13 +- packages/core/__tests__/control.ts | 14 +- packages/core/__tests__/element.ts | 18 +- packages/core/__tests__/events.ts | 2 +- packages/core/__tests__/grid-layer.ts | 16 +- packages/core/__tests__/layer.ts | 22 +- packages/core/__tests__/media-overlay.ts | 24 +-- packages/core/__tests__/path.ts | 12 +- packages/core/package.json | 8 +- packages/core/src/component.tsx | 8 +- packages/core/src/context.ts | 6 +- packages/core/src/element.ts | 8 +- packages/core/src/events.ts | 4 +- packages/core/src/index.ts | 7 +- packages/core/src/path.ts | 2 +- packages/react-leaflet/package.json | 8 +- packages/react-leaflet/src/LayersControl.tsx | 4 +- packages/react-leaflet/src/MapContainer.tsx | 8 +- packages/react-leaflet/src/Pane.tsx | 8 +- pnpm-lock.yaml | 211 ++++++------------- 22 files changed, 174 insertions(+), 263 deletions(-) mode change 100755 => 100644 pnpm-lock.yaml diff --git a/package.json b/package.json index 258d4306..d958c566 100755 --- a/package.json +++ b/package.json @@ -16,7 +16,6 @@ "@swc/core": "^1.3.37", "@swc/jest": "^0.2.24", "@testing-library/react": "^15.0.5", - "@testing-library/react-hooks": "^8.0.1", "@types/jest": "^29.4.0", "@types/leaflet": "^1.9.1", "@types/warning": "^3.0.0", @@ -25,13 +24,20 @@ "jest": "^29.4.3", "jest-environment-jsdom": "^29.4.3", "leaflet": "^1.9.3", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-test-renderer": "^18.2.0", + "react": "beta", + "react-dom": "beta", "ts-jest-resolver": "^2.0.0", "turbo": "^1.8.3", "typescript": "^5.4.5" }, + "pnpm": { + "overrides": { + "@types/react": "npm:types-react@beta", + "@types/react-dom": "npm:types-react-dom@beta", + "react": "beta", + "react-dom": "beta" + } + }, "jest": { "projects": [ "/packages/*" diff --git a/packages/core/__tests__/attribution.ts b/packages/core/__tests__/attribution.ts index 1c745025..87cc9b3a 100755 --- a/packages/core/__tests__/attribution.ts +++ b/packages/core/__tests__/attribution.ts @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useAttribution } from '../src' @@ -15,21 +15,21 @@ describe('attribution', () => { }) rerender({ attribution: 'foo' }) - expect(attributionControl.addAttribution).toBeCalledTimes(1) - expect(attributionControl.removeAttribution).toBeCalledTimes(0) + expect(attributionControl.addAttribution).toHaveBeenCalledTimes(1) + expect(attributionControl.removeAttribution).toHaveBeenCalledTimes(0) rerender({ attribution: 'foo' }) - expect(attributionControl.addAttribution).toBeCalledTimes(1) - expect(attributionControl.removeAttribution).toBeCalledTimes(0) + expect(attributionControl.addAttribution).toHaveBeenCalledTimes(1) + expect(attributionControl.removeAttribution).toHaveBeenCalledTimes(0) rerender({ attribution: 'bar' }) - expect(attributionControl.addAttribution).toBeCalledTimes(2) - expect(attributionControl.addAttribution).toBeCalledWith('bar') - expect(attributionControl.removeAttribution).toBeCalledTimes(1) - expect(attributionControl.removeAttribution).toBeCalledWith('foo') + expect(attributionControl.addAttribution).toHaveBeenCalledTimes(2) + expect(attributionControl.addAttribution).toHaveBeenCalledWith('bar') + expect(attributionControl.removeAttribution).toHaveBeenCalledTimes(1) + expect(attributionControl.removeAttribution).toHaveBeenCalledWith('foo') rerender({ attribution: null }) - expect(attributionControl.removeAttribution).toBeCalledTimes(2) + expect(attributionControl.removeAttribution).toHaveBeenCalledTimes(2) expect(attributionControl.removeAttribution).toHaveBeenLastCalledWith('bar') }) }) diff --git a/packages/core/__tests__/context.tsx b/packages/core/__tests__/context.tsx index cad576d1..82a8a160 100755 --- a/packages/core/__tests__/context.tsx +++ b/packages/core/__tests__/context.tsx @@ -1,19 +1,14 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import type { Map } from 'leaflet' import React, { StrictMode, type ReactNode } from 'react' -import { - CONTEXT_VERSION, - LeafletProvider, - createLeafletContext, - useLeafletContext, -} from '../src' +import { CONTEXT_VERSION, LeafletContext, createLeafletContext, useLeafletContext } from '../src' export function createWrapper(context) { return function Wrapper({ children }: { children: ReactNode }) { return ( - {children} + {children} ) } @@ -33,7 +28,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/__tests__/control.ts b/packages/core/__tests__/control.ts index 61b0f2c4..aa42dec9 100755 --- a/packages/core/__tests__/control.ts +++ b/packages/core/__tests__/control.ts @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { createControlHook, createElementHook } from '../src' @@ -14,11 +14,11 @@ describe('control', () => { const useControl = createControlHook(useElement) const { unmount } = renderHook(() => useControl({}), { wrapper }) - expect(instance.addTo).toBeCalledTimes(1) - expect(instance.addTo).toBeCalledWith(context.map) + expect(instance.addTo).toHaveBeenCalledTimes(1) + expect(instance.addTo).toHaveBeenCalledWith(context.map) unmount() - expect(instance.remove).toBeCalledTimes(1) + expect(instance.remove).toHaveBeenCalledTimes(1) }) test('useLeafletControl() updates the position', () => { @@ -35,10 +35,10 @@ describe('control', () => { wrapper: createWrapper({ map: true }), }) rerender({ position: 'topleft' }) - expect(instance.setPosition).toBeCalledTimes(0) + expect(instance.setPosition).toHaveBeenCalledTimes(0) rerender({ position: 'topright' }) - expect(instance.setPosition).toBeCalledTimes(1) - expect(instance.setPosition).toBeCalledWith('topright') + expect(instance.setPosition).toHaveBeenCalledTimes(1) + expect(instance.setPosition).toHaveBeenCalledWith('topright') }) }) diff --git a/packages/core/__tests__/element.ts b/packages/core/__tests__/element.ts index 7d6427ac..1f149f4a 100755 --- a/packages/core/__tests__/element.ts +++ b/packages/core/__tests__/element.ts @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { createElementHook } from '../src' @@ -11,8 +11,8 @@ describe('element', () => { const useElement = createElementHook(createElementMock) renderHook(() => useElement(props, context)) - expect(createElementMock).toBeCalledTimes(1) - expect(createElementMock).toBeCalledWith(props, context) + expect(createElementMock).toHaveBeenCalledTimes(1) + expect(createElementMock).toHaveBeenCalledWith(props, context) }) test('calls the element update function', () => { @@ -25,20 +25,20 @@ describe('element', () => { const { rerender } = renderHook((p) => useElement(p, context), { initialProps: { test: true }, }) - expect(createElementMock).toBeCalledTimes(1) - expect(updateElementMock).toBeCalledTimes(0) + expect(createElementMock).toHaveBeenCalledTimes(1) + expect(updateElementMock).toHaveBeenCalledTimes(0) rerender({ test: false }) - expect(updateElementMock).toBeCalledTimes(1) - expect(updateElementMock).toBeCalledWith( + expect(updateElementMock).toHaveBeenCalledTimes(1) + expect(updateElementMock).toHaveBeenCalledWith( instance, { test: false }, { test: true }, ) rerender({ test: false }) - expect(updateElementMock).toBeCalledTimes(2) - expect(updateElementMock).toBeCalledWith( + expect(updateElementMock).toHaveBeenCalledTimes(2) + expect(updateElementMock).toHaveBeenCalledWith( instance, { test: false }, { test: false }, diff --git a/packages/core/__tests__/events.ts b/packages/core/__tests__/events.ts index 41e71a52..81112b49 100755 --- a/packages/core/__tests__/events.ts +++ b/packages/core/__tests__/events.ts @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { Layer } from 'leaflet' import { useEventHandlers } from '../src' diff --git a/packages/core/__tests__/grid-layer.ts b/packages/core/__tests__/grid-layer.ts index 138bd7db..a98b5a83 100755 --- a/packages/core/__tests__/grid-layer.ts +++ b/packages/core/__tests__/grid-layer.ts @@ -9,15 +9,15 @@ describe('grid-layer', () => { // No change when opacity is the same updateGridLayer(layer, { opacity }, { opacity }) - expect(layer.setOpacity).toBeCalledTimes(0) + expect(layer.setOpacity).toHaveBeenCalledTimes(0) // No change when opacity is nullish updateGridLayer(layer, { opacity: undefined }, { opacity }) - expect(layer.setOpacity).toBeCalledTimes(0) + expect(layer.setOpacity).toHaveBeenCalledTimes(0) updateGridLayer(layer, { opacity: 1 }, { opacity }) - expect(layer.setOpacity).toBeCalledTimes(1) - expect(layer.setOpacity).toBeCalledWith(1) + expect(layer.setOpacity).toHaveBeenCalledTimes(1) + expect(layer.setOpacity).toHaveBeenCalledWith(1) }) test('updateGridLayer() updates the zIndex', () => { @@ -28,14 +28,14 @@ describe('grid-layer', () => { // No change when zIndex is the same updateGridLayer(layer, { zIndex }, { zIndex }) - expect(layer.setZIndex).toBeCalledTimes(0) + expect(layer.setZIndex).toHaveBeenCalledTimes(0) // No change when zIndex is nullish updateGridLayer(layer, { zIndex: null }, { zIndex }) - expect(layer.setZIndex).toBeCalledTimes(0) + expect(layer.setZIndex).toHaveBeenCalledTimes(0) updateGridLayer(layer, { zIndex: 20 }, { zIndex }) - expect(layer.setZIndex).toBeCalledTimes(1) - expect(layer.setZIndex).toBeCalledWith(20) + expect(layer.setZIndex).toHaveBeenCalledTimes(1) + expect(layer.setZIndex).toHaveBeenCalledWith(20) }) }) diff --git a/packages/core/__tests__/layer.ts b/packages/core/__tests__/layer.ts index 8bb0f69d..7bff6a48 100755 --- a/packages/core/__tests__/layer.ts +++ b/packages/core/__tests__/layer.ts @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useLayerLifecycle } from '../src' @@ -9,12 +9,12 @@ describe('layer', () => { const element = jest.fn() const { unmount } = renderHook(() => useLayerLifecycle(element, context)) - expect(map.addLayer).toBeCalledTimes(1) - expect(map.addLayer).toBeCalledWith(element.instance) + expect(map.addLayer).toHaveBeenCalledTimes(1) + expect(map.addLayer).toHaveBeenCalledWith(element.instance) unmount() - expect(map.removeLayer).toBeCalledTimes(1) - expect(map.removeLayer).toBeCalledWith(element.instance) + expect(map.removeLayer).toHaveBeenCalledTimes(1) + expect(map.removeLayer).toHaveBeenCalledWith(element.instance) }) test('useLayerLifecycle() adds the layer to the layerContainer when set and removes from the map', () => { @@ -24,14 +24,14 @@ describe('layer', () => { const element = { instance: jest.fn() } const { unmount } = renderHook(() => useLayerLifecycle(element, context)) - expect(layerContainer.addLayer).toBeCalledTimes(1) - expect(layerContainer.addLayer).toBeCalledWith(element.instance) + expect(layerContainer.addLayer).toHaveBeenCalledTimes(1) + expect(layerContainer.addLayer).toHaveBeenCalledWith(element.instance) unmount() - expect(layerContainer.removeLayer).toBeCalledTimes(1) + expect(layerContainer.removeLayer).toHaveBeenCalledTimes(1) - expect(map.addLayer).toBeCalledTimes(0) - expect(map.removeLayer).toBeCalledTimes(1) - expect(map.removeLayer).toBeCalledWith(element.instance) + expect(map.addLayer).toHaveBeenCalledTimes(0) + expect(map.removeLayer).toHaveBeenCalledTimes(1) + expect(map.removeLayer).toHaveBeenCalledWith(element.instance) }) }) diff --git a/packages/core/__tests__/media-overlay.ts b/packages/core/__tests__/media-overlay.ts index d7f3d254..6006d3ba 100755 --- a/packages/core/__tests__/media-overlay.ts +++ b/packages/core/__tests__/media-overlay.ts @@ -11,16 +11,16 @@ describe('media-overlay', () => { // No change when bounds are the same updateMediaOverlay(overlay, { bounds }, { bounds }) - expect(overlay.setBounds).toBeCalledTimes(0) + expect(overlay.setBounds).toHaveBeenCalledTimes(0) // No change when bounds are not an instance of LatLngBounds updateMediaOverlay(overlay, { bounds: [] }, { bounds }) - expect(overlay.setBounds).toBeCalledTimes(0) + expect(overlay.setBounds).toHaveBeenCalledTimes(0) const newBounds = latLngBounds([11, 11], [20, 20]) updateMediaOverlay(overlay, { bounds: newBounds }, { bounds }) - expect(overlay.setBounds).toBeCalledTimes(1) - expect(overlay.setBounds).toBeCalledWith(newBounds) + expect(overlay.setBounds).toHaveBeenCalledTimes(1) + expect(overlay.setBounds).toHaveBeenCalledWith(newBounds) }) test('updateMediaOverlay() updates the opacity', () => { @@ -31,15 +31,15 @@ describe('media-overlay', () => { // No change when opacity is the same updateMediaOverlay(overlay, { opacity }, { opacity }) - expect(overlay.setOpacity).toBeCalledTimes(0) + expect(overlay.setOpacity).toHaveBeenCalledTimes(0) // No change when opacity is nullish updateMediaOverlay(overlay, { opacity: undefined }, { opacity }) - expect(overlay.setOpacity).toBeCalledTimes(0) + expect(overlay.setOpacity).toHaveBeenCalledTimes(0) updateMediaOverlay(overlay, { opacity: 1 }, { opacity }) - expect(overlay.setOpacity).toBeCalledTimes(1) - expect(overlay.setOpacity).toBeCalledWith(1) + expect(overlay.setOpacity).toHaveBeenCalledTimes(1) + expect(overlay.setOpacity).toHaveBeenCalledWith(1) }) test('updateMediaOverlay() updates the zIndex', () => { @@ -50,14 +50,14 @@ describe('media-overlay', () => { // No change when zIndex is the same updateMediaOverlay(overlay, { zIndex }, { zIndex }) - expect(overlay.setZIndex).toBeCalledTimes(0) + expect(overlay.setZIndex).toHaveBeenCalledTimes(0) // No change when zIndex is nullish updateMediaOverlay(overlay, { zIndex: null }, { zIndex }) - expect(overlay.setZIndex).toBeCalledTimes(0) + expect(overlay.setZIndex).toHaveBeenCalledTimes(0) updateMediaOverlay(overlay, { zIndex: 20 }, { zIndex }) - expect(overlay.setZIndex).toBeCalledTimes(1) - expect(overlay.setZIndex).toBeCalledWith(20) + expect(overlay.setZIndex).toHaveBeenCalledTimes(1) + expect(overlay.setZIndex).toHaveBeenCalledWith(20) }) }) diff --git a/packages/core/__tests__/path.ts b/packages/core/__tests__/path.ts index 9617eaca..20119055 100755 --- a/packages/core/__tests__/path.ts +++ b/packages/core/__tests__/path.ts @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { usePathOptions } from '../src' @@ -11,18 +11,18 @@ describe('path', () => { const { rerender } = renderHook((p) => usePathOptions(element, p), { initialProps: { pathOptions: firstOptions }, }) - expect(setStyle).toBeCalledTimes(1) + expect(setStyle).toHaveBeenCalledTimes(1) rerender({ pathOptions: firstOptions }) - expect(setStyle).toBeCalledTimes(1) + expect(setStyle).toHaveBeenCalledTimes(1) const secondOptions = { stroke: 2 } rerender({ pathOptions: secondOptions }) - expect(setStyle).toBeCalledTimes(2) - expect(setStyle).toBeCalledWith(secondOptions) + expect(setStyle).toHaveBeenCalledTimes(2) + expect(setStyle).toHaveBeenCalledWith(secondOptions) rerender({ pathOptions: null }) - expect(setStyle).toBeCalledTimes(3) + expect(setStyle).toHaveBeenCalledTimes(3) expect(setStyle.mock.calls[2][0]).toEqual({}) }) }) diff --git a/packages/core/package.json b/packages/core/package.json index 321d0af5..3e99c5b4 100755 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -35,12 +35,12 @@ }, "peerDependencies": { "leaflet": "^1.9.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "beta", + "react-dom": "beta" }, "devDependencies": { - "@types/react": "^18.0.28", - "@types/react-dom": "^18.0.11" + "@types/react": "npm:types-react@beta", + "@types/react-dom": "npm:types-react-dom@beta" }, "jest": { "extensionsToTreatAsEsm": [".ts", ".tsx"], diff --git a/packages/core/src/component.tsx b/packages/core/src/component.tsx index 718f02b7..142a186d 100755 --- a/packages/core/src/component.tsx +++ b/packages/core/src/component.tsx @@ -1,5 +1,5 @@ import React, { - type MutableRefObject, + type RefObject, type ReactNode, type Ref, forwardRef, @@ -9,11 +9,11 @@ import React, { } from 'react' import { createPortal } from 'react-dom' -import { LeafletProvider } from './context.js' +import { LeafletContext } from './context.js' import type { DivOverlay, DivOverlayHook } from './div-overlay.js' import type { LeafletElement } from './element.js' -type ElementHook = (props: P) => MutableRefObject> +type ElementHook = (props: P) => RefObject> export type PropsWithChildren = { children?: ReactNode @@ -27,7 +27,7 @@ export function createContainerComponent( useImperativeHandle(forwardedRef, () => instance) return props.children == null ? null : ( - {props.children} + {props.children} ) } diff --git a/packages/core/src/context.ts b/packages/core/src/context.ts index 51617288..31d90d71 100755 --- a/packages/core/src/context.ts +++ b/packages/core/src/context.ts @@ -1,5 +1,5 @@ import type { Control, Layer, LayerGroup, Map as LeafletMap } from 'leaflet' -import { createContext, useContext } from 'react' +import { createContext, use } from 'react' export const CONTEXT_VERSION = 1 @@ -32,10 +32,8 @@ export const LeafletContext = createContext( null, ) -export const LeafletProvider = LeafletContext.Provider - export function useLeafletContext(): LeafletContextInterface { - const context = useContext(LeafletContext) + const context = use(LeafletContext) if (context == null) { throw new Error( 'No context provided: useLeafletContext() can only be used in a descendant of ', diff --git a/packages/core/src/element.ts b/packages/core/src/element.ts index 01020531..064db102 100755 --- a/packages/core/src/element.ts +++ b/packages/core/src/element.ts @@ -1,4 +1,4 @@ -import { type MutableRefObject, useEffect, useRef } from 'react' +import { type RefObject, useEffect, useRef } from 'react' import type { LeafletContextInterface } from './context.js' @@ -19,7 +19,7 @@ export function createElementObject( export type ElementHook = ( props: P, context: LeafletContextInterface, -) => MutableRefObject> +) => RefObject> export function createElementHook( createElement: ( @@ -33,7 +33,7 @@ export function createElementHook( props: P, context: LeafletContextInterface, ): ReturnType> { - const elementRef = useRef>() as MutableRefObject< + const elementRef = useRef>(undefined) as RefObject< LeafletElement > if (!elementRef.current) @@ -46,7 +46,7 @@ export function createElementHook( props: P, context: LeafletContextInterface, ): ReturnType> { - const elementRef = useRef>() as MutableRefObject< + const elementRef = useRef>(undefined) as RefObject< LeafletElement > if (!elementRef.current) elementRef.current = createElement(props, context) diff --git a/packages/core/src/events.ts b/packages/core/src/events.ts index d7dfba83..9ce56d3a 100755 --- a/packages/core/src/events.ts +++ b/packages/core/src/events.ts @@ -11,7 +11,9 @@ export function useEventHandlers( element: LeafletElement, eventHandlers: LeafletEventHandlerFnMap | null | undefined, ) { - const eventHandlersRef = useRef() + const eventHandlersRef = useRef( + undefined, + ) useEffect( function addEventHandlers() { diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 95de4dd2..05c2a01c 100755 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,9 +1,5 @@ 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, @@ -13,7 +9,6 @@ export { CONTEXT_VERSION, type LeafletContextInterface, LeafletContext, - LeafletProvider, createLeafletContext, extendContext, useLeafletContext, diff --git a/packages/core/src/path.ts b/packages/core/src/path.ts index 03e99d32..55e29402 100755 --- a/packages/core/src/path.ts +++ b/packages/core/src/path.ts @@ -15,7 +15,7 @@ export function usePathOptions( element: LeafletElement, props: PathProps, ) { - const optionsRef = useRef() + const optionsRef = useRef(undefined) useEffect( function updatePathOptions() { diff --git a/packages/react-leaflet/package.json b/packages/react-leaflet/package.json index 1e27e254..4115c76b 100755 --- a/packages/react-leaflet/package.json +++ b/packages/react-leaflet/package.json @@ -39,14 +39,14 @@ }, "peerDependencies": { "leaflet": "^1.9.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "beta", + "react-dom": "beta" }, "devDependencies": { "@types/geojson": "^7946.0.10", "@types/leaflet": "^1.9.1", - "@types/react": "^18.0.28", - "@types/react-dom": "^18.0.11" + "@types/react": "npm:types-react@beta", + "@types/react-dom": "npm:types-react-dom@beta" }, "jest": { "extensionsToTreatAsEsm": [".ts", ".tsx"], diff --git a/packages/react-leaflet/src/LayersControl.tsx b/packages/react-leaflet/src/LayersControl.tsx index de7ad019..6171c88a 100755 --- a/packages/react-leaflet/src/LayersControl.tsx +++ b/packages/react-leaflet/src/LayersControl.tsx @@ -1,5 +1,5 @@ import { - LeafletProvider, + LeafletContext, createContainerComponent, createControlHook, createElementHook, @@ -119,7 +119,7 @@ export function createControlledLayer(addLayerToControl: AddLayerFunc) { }) return props.children ? ( - {props.children} + {props.children} ) : null } } diff --git a/packages/react-leaflet/src/MapContainer.tsx b/packages/react-leaflet/src/MapContainer.tsx index 893121a8..51e85b33 100755 --- a/packages/react-leaflet/src/MapContainer.tsx +++ b/packages/react-leaflet/src/MapContainer.tsx @@ -1,6 +1,6 @@ import { type LeafletContextInterface, - LeafletProvider, + LeafletContext, createLeafletContext, } from '@react-leaflet/core' import { @@ -47,11 +47,11 @@ function MapContainerComponent< zoom, ...options }: Props, - forwardedRef: Ref, + forwardedRef: Ref, ) { const [props] = useState({ className, id, style }) const [context, setContext] = useState(null) - useImperativeHandle(forwardedRef, () => context?.map ?? null, [context]) + useImperativeHandle(forwardedRef, () => context?.map ?? undefined, [context]) // biome-ignore lint/correctness/useExhaustiveDependencies: ref callback const mapRef = useCallback((node: HTMLDivElement | null) => { @@ -76,7 +76,7 @@ function MapContainerComponent< }, [context]) const contents = context ? ( - {children} + {children} ) : ( placeholder ?? null ) diff --git a/packages/react-leaflet/src/Pane.tsx b/packages/react-leaflet/src/Pane.tsx index 50a23afc..ab1626e5 100755 --- a/packages/react-leaflet/src/Pane.tsx +++ b/packages/react-leaflet/src/Pane.tsx @@ -1,6 +1,6 @@ import { type LeafletContextInterface, - LeafletProvider, + LeafletContext, addClassName, useLeafletContext, } from '@react-leaflet/core' @@ -74,10 +74,10 @@ function createPane( function PaneComponent( props: PaneProps, - forwardedRef: Ref, + forwardedRef: Ref, ) { const [paneName] = useState(props.name) - const [paneElement, setPaneElement] = useState(null) + const [paneElement, setPaneElement] = useState() useImperativeHandle(forwardedRef, () => paneElement, [paneElement]) const context = useLeafletContext() // biome-ignore lint/correctness/useExhaustiveDependencies: paneName is immutable @@ -107,7 +107,7 @@ function PaneComponent( return props.children != null && paneElement != null ? createPortal( - {props.children}, + {props.children}, paneElement, ) : null diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml old mode 100755 new mode 100644 index d9708676..d9930a48 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,12 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +overrides: + '@types/react': npm:types-react@beta + '@types/react-dom': npm:types-react-dom@beta + react: beta + react-dom: beta + importers: .: @@ -25,10 +31,7 @@ importers: version: 0.2.36(@swc/core@1.4.17) '@testing-library/react': specifier: ^15.0.5 - version: 15.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@testing-library/react-hooks': - specifier: ^8.0.1 - version: 8.0.1(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react-test-renderer@18.3.1(react@18.3.1))(react@18.3.1) + version: 15.0.5(react-dom@19.0.0-beta-4508873393-20240430(react@19.0.0-beta-4508873393-20240430))(react@19.0.0-beta-4508873393-20240430) '@types/jest': specifier: ^29.4.0 version: 29.5.12 @@ -54,14 +57,11 @@ importers: specifier: ^1.9.3 version: 1.9.4 react: - specifier: ^18.2.0 - version: 18.3.1 + specifier: beta + version: 19.0.0-beta-4508873393-20240430 react-dom: - specifier: ^18.2.0 - version: 18.3.1(react@18.3.1) - react-test-renderer: - specifier: ^18.2.0 - version: 18.3.1(react@18.3.1) + specifier: beta + version: 19.0.0-beta-4508873393-20240430(react@19.0.0-beta-4508873393-20240430) ts-jest-resolver: specifier: ^2.0.0 version: 2.0.1 @@ -78,18 +78,18 @@ importers: specifier: ^1.9.0 version: 1.9.4 react: - specifier: ^18.0.0 - version: 18.3.1 + specifier: beta + version: 19.0.0-beta-4508873393-20240430 react-dom: - specifier: ^18.0.0 - version: 18.3.1(react@18.3.1) + specifier: beta + version: 19.0.0-beta-4508873393-20240430(react@19.0.0-beta-4508873393-20240430) devDependencies: '@types/react': - specifier: ^18.0.28 - version: 18.3.1 + specifier: npm:types-react@beta + version: types-react@19.0.0-beta.1 '@types/react-dom': - specifier: ^18.0.11 - version: 18.3.0 + specifier: npm:types-react-dom@beta + version: types-react-dom@19.0.0-beta.1 packages/react-leaflet: dependencies: @@ -100,11 +100,11 @@ importers: specifier: ^1.9.0 version: 1.9.4 react: - specifier: ^18.0.0 - version: 18.3.1 + specifier: beta + version: 19.0.0-beta-4508873393-20240430 react-dom: - specifier: ^18.0.0 - version: 18.3.1(react@18.3.1) + specifier: beta + version: 19.0.0-beta-4508873393-20240430(react@19.0.0-beta-4508873393-20240430) devDependencies: '@types/geojson': specifier: ^7946.0.10 @@ -113,11 +113,11 @@ importers: specifier: ^1.9.1 version: 1.9.12 '@types/react': - specifier: ^18.0.28 - version: 18.3.1 + specifier: npm:types-react@beta + version: types-react@19.0.0-beta.1 '@types/react-dom': - specifier: ^18.0.11 - version: 18.3.0 + specifier: npm:types-react-dom@beta + version: types-react-dom@19.0.0-beta.1 packages: @@ -578,28 +578,12 @@ packages: resolution: {integrity: sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==} engines: {node: '>=18'} - '@testing-library/react-hooks@8.0.1': - resolution: {integrity: sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==} - engines: {node: '>=12'} - peerDependencies: - '@types/react': ^16.9.0 || ^17.0.0 - react: ^16.9.0 || ^17.0.0 - react-dom: ^16.9.0 || ^17.0.0 - react-test-renderer: ^16.9.0 || ^17.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - react-dom: - optional: true - react-test-renderer: - optional: true - '@testing-library/react@15.0.5': resolution: {integrity: sha512-ttodVWYA2i2w4hRa6krKrmS1vKxAEkwDz34y+CwbcrbZUxFzUYN3a5xZyFKo+K6LBseCRCUkwcjATpaNn/UsIA==} engines: {node: '>=18'} peerDependencies: - react: ^18.0.0 - react-dom: ^18.0.0 + react: beta + react-dom: beta '@tokenizer/token@0.3.0': resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==} @@ -665,15 +649,6 @@ packages: '@types/normalize-package-data@2.4.4': resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==} - '@types/prop-types@15.7.12': - resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==} - - '@types/react-dom@18.3.0': - resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==} - - '@types/react@18.3.1': - resolution: {integrity: sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==} - '@types/responselike@1.0.3': resolution: {integrity: sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==} @@ -1027,8 +1002,8 @@ packages: engines: {node: '>=12'} deprecated: Use your platform's native DOMException instead - electron-to-chromium@1.4.751: - resolution: {integrity: sha512-2DEPi++qa89SMGRhufWTiLmzqyuGmNF3SK4+PQetW1JKiZdEpF4XQonJXJCzyuYSA6mauiMhbyVhqYAP45Hvfw==} + electron-to-chromium@1.4.752: + resolution: {integrity: sha512-P3QJreYI/AUTcfBVrC4zy9KvnZWekViThgQMX/VpJ+IsOBbcX5JFpORM4qWapwWQ+agb2nYAOyn/4PMXOk0m2Q==} emittery@0.13.1: resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==} @@ -1569,10 +1544,6 @@ packages: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} engines: {node: '>=10'} - loose-envify@1.4.0: - resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} - hasBin: true - lowercase-keys@2.0.0: resolution: {integrity: sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==} engines: {node: '>=8'} @@ -1702,10 +1673,6 @@ packages: nwsapi@2.2.9: resolution: {integrity: sha512-2f3F0SEEer8bBu0dsNCFF50N0cTThV1nWFYcEYFZttdW0lDAoybv9cQoK7X7/68Z89S7FoRrVjP1LPX4XRf9vg==} - object-assign@4.1.1: - resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} - engines: {node: '>=0.10.0'} - once@1.4.0: resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} @@ -1843,16 +1810,10 @@ packages: resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==} engines: {node: '>=10'} - react-dom@18.3.1: - resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} + react-dom@19.0.0-beta-4508873393-20240430: + resolution: {integrity: sha512-/j97ai1qF3c6O3XV0nVzzExPV/0U2v8M75Sq6ThXYxePCi33kAnm+xRsCDpZOZOrIjz6nurLU/FzzPZIzXVvKQ==} peerDependencies: - react: ^18.3.1 - - react-error-boundary@3.1.4: - resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==} - engines: {node: '>=10', npm: '>=6'} - peerDependencies: - react: '>=16.13.1' + react: beta react-is@17.0.2: resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} @@ -1860,18 +1821,8 @@ packages: react-is@18.3.1: resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==} - react-shallow-renderer@16.15.0: - resolution: {integrity: sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==} - peerDependencies: - react: ^16.0.0 || ^17.0.0 || ^18.0.0 - - react-test-renderer@18.3.1: - resolution: {integrity: sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA==} - peerDependencies: - react: ^18.3.1 - - react@18.3.1: - resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} + react@19.0.0-beta-4508873393-20240430: + resolution: {integrity: sha512-//89udV7fhVq5pEzpNH7vlpmS5D4wDbPn0oif+G7vwDsuSks5yJGdqrE1uzn2CyFNL73FjV3/R3Pjyaxs+xnvg==} engines: {node: '>=0.10.0'} read-pkg-up@8.0.0: @@ -1947,8 +1898,8 @@ packages: resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} engines: {node: '>=v12.22.7'} - scheduler@0.23.2: - resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==} + scheduler@0.25.0-beta-4508873393-20240430: + resolution: {integrity: sha512-gk9vDoDOjTys0DpLgFll+hYk5gLhLnTipi81Pl+XSRtWkQnqQdjxLO2RF726t0g0jQ5tvwjLfBCgsvusgB6Luw==} semver-regex@4.0.5: resolution: {integrity: sha512-hunMQrEy1T6Jr2uEVjrAIqjwWcQTgOAcIM52C8MY1EZSD3DDNft04XzvYKPqjED65bNVVko0YI38nYeEHCX3yw==} @@ -2181,6 +2132,12 @@ packages: resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==} engines: {node: '>=10'} + types-react-dom@19.0.0-beta.1: + resolution: {integrity: sha512-fXQfv6OQOXxmgNQ7RuhX615Wx4680LqVbrEbxch+ZQ56ZDAZKXptLl3XoHaHU31Yd2xiig/VlXzohCexKXNzBQ==} + + types-react@19.0.0-beta.1: + resolution: {integrity: sha512-gQpuPdi+Gu+nIFmhnFLINkGQ4j0eRY7olV3lzncFJy2g5TfnSEFD1xU86u5KgRytFswwZ5pGEPWEizefwPaxTw==} + typescript@5.4.5: resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==} engines: {node: '>=14.17'} @@ -2869,23 +2826,13 @@ snapshots: lz-string: 1.5.0 pretty-format: 27.5.1 - '@testing-library/react-hooks@8.0.1(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react-test-renderer@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.24.5 - react: 18.3.1 - react-error-boundary: 3.1.4(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.1 - react-dom: 18.3.1(react@18.3.1) - react-test-renderer: 18.3.1(react@18.3.1) - - '@testing-library/react@15.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@testing-library/react@15.0.5(react-dom@19.0.0-beta-4508873393-20240430(react@19.0.0-beta-4508873393-20240430))(react@19.0.0-beta-4508873393-20240430)': dependencies: '@babel/runtime': 7.24.5 '@testing-library/dom': 10.1.0 - '@types/react-dom': 18.3.0 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) + '@types/react-dom': types-react-dom@19.0.0-beta.1 + react: 19.0.0-beta-4508873393-20240430 + react-dom: 19.0.0-beta-4508873393-20240430(react@19.0.0-beta-4508873393-20240430) '@tokenizer/token@0.3.0': {} @@ -2966,17 +2913,6 @@ snapshots: '@types/normalize-package-data@2.4.4': {} - '@types/prop-types@15.7.12': {} - - '@types/react-dom@18.3.0': - dependencies: - '@types/react': 18.3.1 - - '@types/react@18.3.1': - dependencies: - '@types/prop-types': 15.7.12 - csstype: 3.1.3 - '@types/responselike@1.0.3': dependencies: '@types/node': 20.12.7 @@ -3136,7 +3072,7 @@ snapshots: browserslist@4.23.0: dependencies: caniuse-lite: 1.0.30001614 - electron-to-chromium: 1.4.751 + electron-to-chromium: 1.4.752 node-releases: 2.0.14 update-browserslist-db: 1.0.13(browserslist@4.23.0) @@ -3340,7 +3276,7 @@ snapshots: dependencies: webidl-conversions: 7.0.0 - electron-to-chromium@1.4.751: {} + electron-to-chromium@1.4.752: {} emittery@0.13.1: {} @@ -4077,10 +4013,6 @@ snapshots: dependencies: p-locate: 5.0.0 - loose-envify@1.4.0: - dependencies: - js-tokens: 4.0.0 - lowercase-keys@2.0.0: {} lru-cache@4.1.5: @@ -4203,8 +4135,6 @@ snapshots: nwsapi@2.2.9: {} - object-assign@4.1.1: {} - once@1.4.0: dependencies: wrappy: 1.0.2 @@ -4320,37 +4250,16 @@ snapshots: quick-lru@5.1.1: {} - react-dom@18.3.1(react@18.3.1): + react-dom@19.0.0-beta-4508873393-20240430(react@19.0.0-beta-4508873393-20240430): dependencies: - loose-envify: 1.4.0 - react: 18.3.1 - scheduler: 0.23.2 - - react-error-boundary@3.1.4(react@18.3.1): - dependencies: - '@babel/runtime': 7.24.5 - react: 18.3.1 + react: 19.0.0-beta-4508873393-20240430 + scheduler: 0.25.0-beta-4508873393-20240430 react-is@17.0.2: {} react-is@18.3.1: {} - react-shallow-renderer@16.15.0(react@18.3.1): - dependencies: - object-assign: 4.1.1 - react: 18.3.1 - react-is: 18.3.1 - - react-test-renderer@18.3.1(react@18.3.1): - dependencies: - react: 18.3.1 - react-is: 18.3.1 - react-shallow-renderer: 16.15.0(react@18.3.1) - scheduler: 0.23.2 - - react@18.3.1: - dependencies: - loose-envify: 1.4.0 + react@19.0.0-beta-4508873393-20240430: {} read-pkg-up@8.0.0: dependencies: @@ -4424,9 +4333,7 @@ snapshots: dependencies: xmlchars: 2.2.0 - scheduler@0.23.2: - dependencies: - loose-envify: 1.4.0 + scheduler@0.25.0-beta-4508873393-20240430: {} semver-regex@4.0.5: {} @@ -4624,6 +4531,14 @@ snapshots: type-fest@1.4.0: {} + types-react-dom@19.0.0-beta.1: + dependencies: + '@types/react': types-react@19.0.0-beta.1 + + types-react@19.0.0-beta.1: + dependencies: + csstype: 3.1.3 + typescript@5.4.5: {} undici-types@5.26.5: {}