Skip to content

Commit 3c2888f

Browse files
PaulLeCamPaulLeCam
committed
Update React to v19
1 parent 37164a1 commit 3c2888f

13 files changed

+1474
-1211
lines changed

‎biome.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"$schema": "https://biomejs.dev/schemas/1.7.1/schema.json",
2+
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
33
"organizeImports": {
44
"enabled": true
55
},
@@ -21,7 +21,7 @@
2121
"quoteProperties": "asNeeded",
2222
"quoteStyle": "single",
2323
"semicolons": "asNeeded",
24-
"trailingComma": "all"
24+
"trailingCommas": "all"
2525
}
2626
},
2727
"linter": {

‎example/App.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
import type { LatLngTuple } from 'leaflet'
12
import React from 'react'
23
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
34

4-
const position = [51.505, -0.09]
5+
const position: LatLngTuple = [51.505, -0.09,]
56

67
export default function App() {
78
return (

‎example/package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
"start": "vite"
88
},
99
"dependencies": {
10-
"react": "rc",
11-
"react-dom": "rc",
10+
"react": "^19.0.0",
11+
"react-dom": "^19.0.0",
1212
"react-leaflet": "workspace:^"
1313
},
1414
"devDependencies": {
15-
"@types/react": "npm:types-react@rc",
16-
"@types/react-dom": "npm:types-react-dom@rc",
17-
"@vitejs/plugin-react": "^4.3.0",
18-
"typescript": "^5.4.5",
19-
"vite": "^5.2.11"
15+
"@types/react": "^19.0.0",
16+
"@types/react-dom": "^19.0.0",
17+
"@vitejs/plugin-react": "^4.3.4",
18+
"typescript": "^5.7.2",
19+
"vite": "^6.0.3"
2020
}
2121
}

‎package.json

+18-20
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,40 @@
33
"version": "1.0.0",
44
"private": true,
55
"type": "module",
6+
"packageManager": "pnpm@9.14.4",
67
"scripts": {
7-
"lint": "biome check --apply ./packages",
8+
"lint": "biome check --write ./packages",
89
"lint:ci": "biome ci ./packages",
910
"test": "jest",
1011
"build": "turbo run build:clean && pnpm run -r build:types && turbo run build:js"
1112
},
1213
"devDependencies": {
13-
"@biomejs/biome": "^1.7.3",
14+
"@biomejs/biome": "^1.9.4",
1415
"@skypack/package-check": "^0.2.2",
15-
"@swc/cli": "^0.3.12",
16-
"@swc/core": "^1.5.7",
17-
"@swc/jest": "^0.2.24",
18-
"@testing-library/react": "^15.0.7",
19-
"@types/jest": "^29.4.0",
20-
"@types/leaflet": "^1.9.1",
16+
"@swc/cli": "^0.5.2",
17+
"@swc/core": "^1.10.0",
18+
"@swc/jest": "^0.2.37",
19+
"@testing-library/react": "^16.1.0",
20+
"@types/jest": "^29.5.14",
21+
"@types/leaflet": "^1.9.15",
2122
"@types/warning": "^3.0.0",
2223
"cross-env": "^7.0.3",
23-
"del-cli": "^5.0.0",
24+
"del-cli": "^6.0.0",
2425
"jest": "^29.4.3",
2526
"jest-environment-jsdom": "^29.4.3",
2627
"leaflet": "^1.9.3",
27-
"react": "rc",
28-
"react-dom": "rc",
28+
"react": "^19.0.0",
29+
"react-dom": "^19.0.0",
2930
"ts-jest-resolver": "^2.0.0",
30-
"turbo": "^1.8.3",
31-
"typescript": "^5.4.5"
31+
"turbo": "^2.3.3",
32+
"typescript": "^5.7.2"
3233
},
3334
"pnpm": {
34-
"overrides": {
35-
"@types/react": "npm:types-react@rc",
36-
"@types/react-dom": "npm:types-react-dom@rc",
37-
"react": "rc",
38-
"react-dom": "rc"
39-
}
35+
"overrides": {}
4036
},
4137
"jest": {
42-
"projects": ["<rootDir>/packages/*"]
38+
"projects": [
39+
"<rootDir>/packages/*"
40+
]
4341
}
4442
}

‎packages/core/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-leaflet/core",
3-
"version": "3.0.0-rc.1",
3+
"version": "3.0.0-rc.2",
44
"description": "React Leaflet core",
55
"repository": {
66
"type": "git",
@@ -35,12 +35,12 @@
3535
},
3636
"peerDependencies": {
3737
"leaflet": "^1.9.0",
38-
"react": "rc",
39-
"react-dom": "rc"
38+
"react": "^19.0.0",
39+
"react-dom": "^19.0.0"
4040
},
4141
"devDependencies": {
42-
"@types/react": "npm:types-react@rc",
43-
"@types/react-dom": "npm:types-react-dom@rc"
42+
"@types/react": "^19.0.0",
43+
"@types/react-dom": "^19.0.0"
4444
},
4545
"jest": {
4646
"extensionsToTreatAsEsm": [".ts", ".tsx"],

‎packages/core/src/component.tsx

+14-10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, {
2+
type PropsWithoutRef,
23
type RefObject,
34
type ReactNode,
45
type Ref,
@@ -15,19 +16,20 @@ import type { LeafletElement } from './element.js'
1516

1617
type ElementHook<E, P> = (props: P) => RefObject<LeafletElement<E>>
1718

18-
export type PropsWithChildren = {
19+
export type PropsWithChildren = PropsWithoutRef<{
1920
children?: ReactNode
20-
}
21+
}>
2122

2223
export function createContainerComponent<E, P extends PropsWithChildren>(
23-
useElement: ElementHook<E, P>,
24+
useElement: ElementHook<E, PropsWithoutRef<P>>,
2425
) {
25-
function ContainerComponent(props: P, forwardedRef: Ref<E>) {
26+
function ContainerComponent(props: PropsWithoutRef<P>, forwardedRef: Ref<E>) {
2627
const { instance, context } = useElement(props).current
2728
useImperativeHandle(forwardedRef, () => instance)
2829

29-
return props.children == null ? null : (
30-
<LeafletContext value={context}>{props.children}</LeafletContext>
30+
const { children } = props as PropsWithChildren
31+
return children == null ? null : (
32+
<LeafletContext value={context}>{children}</LeafletContext>
3133
)
3234
}
3335

@@ -37,8 +39,8 @@ export function createContainerComponent<E, P extends PropsWithChildren>(
3739
export function createDivOverlayComponent<
3840
E extends DivOverlay,
3941
P extends PropsWithChildren,
40-
>(useElement: ReturnType<DivOverlayHook<E, P>>) {
41-
function OverlayComponent(props: P, forwardedRef: Ref<E>) {
42+
>(useElement: ReturnType<DivOverlayHook<E, PropsWithoutRef<P>>>) {
43+
function OverlayComponent(props: PropsWithoutRef<P>, forwardedRef: Ref<E>) {
4244
const [isOpen, setOpen] = useState(false)
4345
const { instance } = useElement(props, setOpen).current
4446

@@ -61,8 +63,10 @@ export function createDivOverlayComponent<
6163
return forwardRef(OverlayComponent)
6264
}
6365

64-
export function createLeafComponent<E, P>(useElement: ElementHook<E, P>) {
65-
function LeafComponent(props: P, forwardedRef: Ref<E>) {
66+
export function createLeafComponent<E, P>(
67+
useElement: ElementHook<E, PropsWithoutRef<P>>,
68+
) {
69+
function LeafComponent(props: PropsWithoutRef<P>, forwardedRef: Ref<E>) {
6670
const { instance } = useElement(props).current
6771
useImperativeHandle(forwardedRef, () => instance)
6872

‎packages/core/src/generic.ts

+23-10
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type {
55
Layer,
66
Path,
77
} from 'leaflet'
8+
import type { PropsWithoutRef } from 'react'
89

910
import {
1011
type PropsWithChildren,
@@ -33,9 +34,9 @@ interface PathWithChildrenProps extends PathProps, PropsWithChildren {}
3334
export function createControlComponent<
3435
E extends Control,
3536
P extends ControlOptions,
36-
>(createInstance: (props: P) => E) {
37+
>(createInstance: (props: PropsWithoutRef<P>) => E) {
3738
function createElement(
38-
props: P,
39+
props: PropsWithoutRef<P>,
3940
context: LeafletContextInterface,
4041
): LeafletElement<E> {
4142
return createElementObject(createInstance(props), context)
@@ -50,10 +51,14 @@ export function createLayerComponent<
5051
P extends LayerWithChildrenProps,
5152
>(
5253
createElement: (
53-
props: P,
54+
props: PropsWithoutRef<P>,
5455
context: LeafletContextInterface,
5556
) => LeafletElement<E>,
56-
updateElement?: (instance: E, props: P, prevProps: P) => void,
57+
updateElement?: (
58+
instance: E,
59+
props: PropsWithoutRef<P>,
60+
prevProps: PropsWithoutRef<P>,
61+
) => void,
5762
) {
5863
const useElement = createElementHook(createElement, updateElement)
5964
const useLayer = createLayerHook(useElement)
@@ -65,10 +70,10 @@ export function createOverlayComponent<
6570
P extends LayerWithChildrenProps,
6671
>(
6772
createElement: (
68-
props: P,
73+
props: PropsWithoutRef<P>,
6974
context: LeafletContextInterface,
7075
) => LeafletElement<E>,
71-
useLifecycle: DivOverlayLifecycleHook<E, P>,
76+
useLifecycle: DivOverlayLifecycleHook<E, PropsWithoutRef<P>>,
7277
) {
7378
const useElement = createElementHook(createElement)
7479
const useOverlay = createDivOverlayHook(useElement, useLifecycle)
@@ -80,10 +85,14 @@ export function createPathComponent<
8085
P extends PathWithChildrenProps,
8186
>(
8287
createElement: (
83-
props: P,
88+
props: PropsWithoutRef<P>,
8489
context: LeafletContextInterface,
8590
) => LeafletElement<E>,
86-
updateElement?: (instance: E, props: P, prevProps: P) => void,
91+
updateElement?: (
92+
instance: E,
93+
props: PropsWithoutRef<P>,
94+
prevProps: PropsWithoutRef<P>,
95+
) => void,
8796
) {
8897
const useElement = createElementHook(createElement, updateElement)
8998
const usePath = createPathHook(useElement)
@@ -92,10 +101,14 @@ export function createPathComponent<
92101

93102
export function createTileLayerComponent<E extends Layer, P extends LayerProps>(
94103
createElement: (
95-
props: P,
104+
props: PropsWithoutRef<P>,
96105
context: LeafletContextInterface,
97106
) => LeafletElement<E>,
98-
updateElement?: (instance: E, props: P, prevProps: P) => void,
107+
updateElement?: (
108+
instance: E,
109+
props: PropsWithoutRef<P>,
110+
prevProps: PropsWithoutRef<P>,
111+
) => void,
99112
) {
100113
const useElement = createElementHook(createElement, updateElement)
101114
const useLayer = createLayerHook(useElement)

‎packages/react-leaflet/package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-leaflet",
3-
"version": "5.0.0-rc.1",
3+
"version": "5.0.0-rc.2",
44
"description": "React components for Leaflet maps",
55
"repository": {
66
"type": "git",
@@ -39,14 +39,14 @@
3939
},
4040
"peerDependencies": {
4141
"leaflet": "^1.9.0",
42-
"react": "rc",
43-
"react-dom": "rc"
42+
"react": "^19.0.0",
43+
"react-dom": "^19.0.0"
4444
},
4545
"devDependencies": {
46-
"@types/geojson": "^7946.0.10",
47-
"@types/leaflet": "^1.9.1",
48-
"@types/react": "npm:types-react@rc",
49-
"@types/react-dom": "npm:types-react-dom@rc"
46+
"@types/geojson": "^7946.0.15",
47+
"@types/leaflet": "^1.9.15",
48+
"@types/react": "^19.0.0",
49+
"@types/react-dom": "^19.0.0"
5050
},
5151
"jest": {
5252
"extensionsToTreatAsEsm": [".ts", ".tsx"],

‎packages/react-leaflet/src/ImageOverlay.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const ImageOverlay = createLayerComponent<
1616
LeafletImageOverlay,
1717
ImageOverlayProps
1818
>(
19-
function createImageOveraly({ bounds, url, ...options }, ctx) {
19+
function createImageOverlay({ bounds, url, ...options }, ctx) {
2020
const overlay = new LeafletImageOverlay(url, bounds, options)
2121
return createElementObject(
2222
overlay,

‎packages/react-leaflet/src/MapContainer.tsx

+14-6
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,15 @@ import React, {
1414
type ReactNode,
1515
type Ref,
1616
forwardRef,
17+
useCallback,
1718
useEffect,
1819
useImperativeHandle,
1920
useRef,
2021
useState,
2122
} from 'react'
2223

24+
export type MapRef = LeafletMap | null
25+
2326
export interface MapContainerProps extends MapOptions {
2427
bounds?: LatLngBoundsExpression
2528
boundsOptions?: FitBoundsOptions
@@ -47,15 +50,20 @@ function MapContainerComponent<
4750
zoom,
4851
...options
4952
}: Props,
50-
forwardedRef: Ref<LeafletMap | undefined>,
53+
forwardedRef: Ref<MapRef>,
5154
) {
5255
const [props] = useState({ className, id, style })
5356
const [context, setContext] = useState<LeafletContextInterface | null>(null)
5457
const mapInstanceRef = useRef<LeafletMap>(undefined)
55-
useImperativeHandle(forwardedRef, () => mapInstanceRef.current)
58+
useImperativeHandle<MapRef, MapRef>(
59+
forwardedRef,
60+
() => context?.map ?? null,
61+
[context],
62+
)
5663

57-
const mapRef = (node?: HTMLDivElement | null) => {
58-
if (node != null && !mapInstanceRef.current) {
64+
// biome-ignore lint/correctness/useExhaustiveDependencies: ref callback
65+
const mapRef = useCallback((node: HTMLDivElement | null) => {
66+
if (node !== null && !mapInstanceRef.current) {
5967
const map = new LeafletMap(node, options)
6068
mapInstanceRef.current = map
6169
if (center != null && zoom != null) {
@@ -68,7 +76,7 @@ function MapContainerComponent<
6876
}
6977
setContext(createLeafletContext(map))
7078
}
71-
}
79+
}, [])
7280

7381
useEffect(() => {
7482
return () => {
@@ -79,7 +87,7 @@ function MapContainerComponent<
7987
const contents = context ? (
8088
<LeafletContext value={context}>{children}</LeafletContext>
8189
) : (
82-
placeholder ?? null
90+
(placeholder ?? null)
8391
)
8492
return (
8593
<div {...props} ref={mapRef}>

0 commit comments

Comments
 (0)