Update React to v19

Author: PaulLeCam

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.7.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
   "organizeImports": {
     "enabled": true
   },
@@ -21,7 +21,7 @@
       "quoteProperties": "asNeeded",
       "quoteStyle": "single",
       "semicolons": "asNeeded",
-      "trailingComma": "all"
+      "trailingCommas": "all"
     }
   },
   "linter": {

example/App.tsx

@@ -1,7 +1,8 @@
+import type { LatLngTuple } from 'leaflet'
 import React from 'react'
 import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
 
-const position = [51.505, -0.09]
+const position: LatLngTuple = [51.505, -0.09,]
 
 export default function App() {
   return (

example/package.json

@@ -7,15 +7,15 @@
     "start": "vite"
   },
   "dependencies": {
-    "react": "rc",
-    "react-dom": "rc",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-leaflet": "workspace:^"
   },
   "devDependencies": {
-    "@types/react": "npm:types-react@rc",
-    "@types/react-dom": "npm:types-react-dom@rc",
-    "@vitejs/plugin-react": "^4.3.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11"
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
   }
 }

package.json

@@ -3,42 +3,40 @@
   "version": "1.0.0",
   "private": true,
   "type": "module",
+  "packageManager": "[email protected]",
   "scripts": {
-    "lint": "biome check --apply ./packages",
+    "lint": "biome check --write ./packages",
     "lint:ci": "biome ci ./packages",
     "test": "jest",
     "build": "turbo run build:clean && pnpm run -r build:types && turbo run build:js"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.7.3",
+    "@biomejs/biome": "^1.9.4",
     "@skypack/package-check": "^0.2.2",
-    "@swc/cli": "^0.3.12",
-    "@swc/core": "^1.5.7",
-    "@swc/jest": "^0.2.24",
-    "@testing-library/react": "^15.0.7",
-    "@types/jest": "^29.4.0",
-    "@types/leaflet": "^1.9.1",
+    "@swc/cli": "^0.5.2",
+    "@swc/core": "^1.10.0",
+    "@swc/jest": "^0.2.37",
+    "@testing-library/react": "^16.1.0",
+    "@types/jest": "^29.5.14",
+    "@types/leaflet": "^1.9.15",
     "@types/warning": "^3.0.0",
     "cross-env": "^7.0.3",
-    "del-cli": "^5.0.0",
+    "del-cli": "^6.0.0",
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.4.3",
     "leaflet": "^1.9.3",
-    "react": "rc",
-    "react-dom": "rc",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "ts-jest-resolver": "^2.0.0",
-    "turbo": "^1.8.3",
-    "typescript": "^5.4.5"
+    "turbo": "^2.3.3",
+    "typescript": "^5.7.2"
   },
   "pnpm": {
-    "overrides": {
-      "@types/react": "npm:types-react@rc",
-      "@types/react-dom": "npm:types-react-dom@rc",
-      "react": "rc",
-      "react-dom": "rc"
-    }
+    "overrides": {}
   },
   "jest": {
-    "projects": ["<rootDir>/packages/*"]
+    "projects": [
+      "<rootDir>/packages/*"
+    ]
   }
 }

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-leaflet/core",
-  "version": "3.0.0-rc.1",
+  "version": "3.0.0-rc.2",
   "description": "React Leaflet core",
   "repository": {
     "type": "git",
@@ -35,12 +35,12 @@
   },
   "peerDependencies": {
     "leaflet": "^1.9.0",
-    "react": "rc",
-    "react-dom": "rc"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "npm:types-react@rc",
-    "@types/react-dom": "npm:types-react-dom@rc"
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
   },
   "jest": {
     "extensionsToTreatAsEsm": [".ts", ".tsx"],

packages/core/src/component.tsx

@@ -1,4 +1,5 @@
 import React, {
+  type PropsWithoutRef,
   type RefObject,
   type ReactNode,
   type Ref,
@@ -15,19 +16,20 @@ import type { LeafletElement } from './element.js'
 
 type ElementHook<E, P> = (props: P) => RefObject<LeafletElement<E>>
 
-export type PropsWithChildren = {
+export type PropsWithChildren = PropsWithoutRef<{
   children?: ReactNode
-}
+}>
 
 export function createContainerComponent<E, P extends PropsWithChildren>(
-  useElement: ElementHook<E, P>,
+  useElement: ElementHook<E, PropsWithoutRef<P>>,
 ) {
-  function ContainerComponent(props: P, forwardedRef: Ref<E>) {
+  function ContainerComponent(props: PropsWithoutRef<P>, forwardedRef: Ref<E>) {
     const { instance, context } = useElement(props).current
     useImperativeHandle(forwardedRef, () => instance)
 
-    return props.children == null ? null : (
-      <LeafletContext value={context}>{props.children}</LeafletContext>
+    const { children } = props as PropsWithChildren
+    return children == null ? null : (
+      <LeafletContext value={context}>{children}</LeafletContext>
     )
   }
 
@@ -37,8 +39,8 @@ export function createContainerComponent<E, P extends PropsWithChildren>(
 export function createDivOverlayComponent<
   E extends DivOverlay,
   P extends PropsWithChildren,
->(useElement: ReturnType<DivOverlayHook<E, P>>) {
-  function OverlayComponent(props: P, forwardedRef: Ref<E>) {
+>(useElement: ReturnType<DivOverlayHook<E, PropsWithoutRef<P>>>) {
+  function OverlayComponent(props: PropsWithoutRef<P>, forwardedRef: Ref<E>) {
     const [isOpen, setOpen] = useState(false)
     const { instance } = useElement(props, setOpen).current
 
@@ -61,8 +63,10 @@ export function createDivOverlayComponent<
   return forwardRef(OverlayComponent)
 }
 
-export function createLeafComponent<E, P>(useElement: ElementHook<E, P>) {
-  function LeafComponent(props: P, forwardedRef: Ref<E>) {
+export function createLeafComponent<E, P>(
+  useElement: ElementHook<E, PropsWithoutRef<P>>,
+) {
+  function LeafComponent(props: PropsWithoutRef<P>, forwardedRef: Ref<E>) {
     const { instance } = useElement(props).current
     useImperativeHandle(forwardedRef, () => instance)
 

packages/core/src/generic.ts

@@ -5,6 +5,7 @@ import type {
   Layer,
   Path,
 } from 'leaflet'
+import type { PropsWithoutRef } from 'react'
 
 import {
   type PropsWithChildren,
@@ -33,9 +34,9 @@ interface PathWithChildrenProps extends PathProps, PropsWithChildren {}
 export function createControlComponent<
   E extends Control,
   P extends ControlOptions,
->(createInstance: (props: P) => E) {
+>(createInstance: (props: PropsWithoutRef<P>) => E) {
   function createElement(
-    props: P,
+    props: PropsWithoutRef<P>,
     context: LeafletContextInterface,
   ): LeafletElement<E> {
     return createElementObject(createInstance(props), context)
@@ -50,10 +51,14 @@ export function createLayerComponent<
   P extends LayerWithChildrenProps,
 >(
   createElement: (
-    props: P,
+    props: PropsWithoutRef<P>,
     context: LeafletContextInterface,
   ) => LeafletElement<E>,
-  updateElement?: (instance: E, props: P, prevProps: P) => void,
+  updateElement?: (
+    instance: E,
+    props: PropsWithoutRef<P>,
+    prevProps: PropsWithoutRef<P>,
+  ) => void,
 ) {
   const useElement = createElementHook(createElement, updateElement)
   const useLayer = createLayerHook(useElement)
@@ -65,10 +70,10 @@ export function createOverlayComponent<
   P extends LayerWithChildrenProps,
 >(
   createElement: (
-    props: P,
+    props: PropsWithoutRef<P>,
     context: LeafletContextInterface,
   ) => LeafletElement<E>,
-  useLifecycle: DivOverlayLifecycleHook<E, P>,
+  useLifecycle: DivOverlayLifecycleHook<E, PropsWithoutRef<P>>,
 ) {
   const useElement = createElementHook(createElement)
   const useOverlay = createDivOverlayHook(useElement, useLifecycle)
@@ -80,10 +85,14 @@ export function createPathComponent<
   P extends PathWithChildrenProps,
 >(
   createElement: (
-    props: P,
+    props: PropsWithoutRef<P>,
     context: LeafletContextInterface,
   ) => LeafletElement<E>,
-  updateElement?: (instance: E, props: P, prevProps: P) => void,
+  updateElement?: (
+    instance: E,
+    props: PropsWithoutRef<P>,
+    prevProps: PropsWithoutRef<P>,
+  ) => void,
 ) {
   const useElement = createElementHook(createElement, updateElement)
   const usePath = createPathHook(useElement)
@@ -92,10 +101,14 @@ export function createPathComponent<
 
 export function createTileLayerComponent<E extends Layer, P extends LayerProps>(
   createElement: (
-    props: P,
+    props: PropsWithoutRef<P>,
     context: LeafletContextInterface,
   ) => LeafletElement<E>,
-  updateElement?: (instance: E, props: P, prevProps: P) => void,
+  updateElement?: (
+    instance: E,
+    props: PropsWithoutRef<P>,
+    prevProps: PropsWithoutRef<P>,
+  ) => void,
 ) {
   const useElement = createElementHook(createElement, updateElement)
   const useLayer = createLayerHook(useElement)

packages/react-leaflet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet",
-  "version": "5.0.0-rc.1",
+  "version": "5.0.0-rc.2",
   "description": "React components for Leaflet maps",
   "repository": {
     "type": "git",
@@ -39,14 +39,14 @@
   },
   "peerDependencies": {
     "leaflet": "^1.9.0",
-    "react": "rc",
-    "react-dom": "rc"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/geojson": "^7946.0.10",
-    "@types/leaflet": "^1.9.1",
-    "@types/react": "npm:types-react@rc",
-    "@types/react-dom": "npm:types-react-dom@rc"
+    "@types/geojson": "^7946.0.15",
+    "@types/leaflet": "^1.9.15",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
   },
   "jest": {
     "extensionsToTreatAsEsm": [".ts", ".tsx"],

packages/react-leaflet/src/ImageOverlay.tsx

@@ -16,7 +16,7 @@ export const ImageOverlay = createLayerComponent<
   LeafletImageOverlay,
   ImageOverlayProps
 >(
-  function createImageOveraly({ bounds, url, ...options }, ctx) {
+  function createImageOverlay({ bounds, url, ...options }, ctx) {
     const overlay = new LeafletImageOverlay(url, bounds, options)
     return createElementObject(
       overlay,

packages/react-leaflet/src/MapContainer.tsx

@@ -14,12 +14,15 @@ import React, {
   type ReactNode,
   type Ref,
   forwardRef,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useRef,
   useState,
 } from 'react'
 
+export type MapRef = LeafletMap | null
+
 export interface MapContainerProps extends MapOptions {
   bounds?: LatLngBoundsExpression
   boundsOptions?: FitBoundsOptions
@@ -47,15 +50,20 @@ function MapContainerComponent<
     zoom,
     ...options
   }: Props,
-  forwardedRef: Ref<LeafletMap | undefined>,
+  forwardedRef: Ref<MapRef>,
 ) {
   const [props] = useState({ className, id, style })
   const [context, setContext] = useState<LeafletContextInterface | null>(null)
   const mapInstanceRef = useRef<LeafletMap>(undefined)
-  useImperativeHandle(forwardedRef, () => mapInstanceRef.current)
+  useImperativeHandle<MapRef, MapRef>(
+    forwardedRef,
+    () => context?.map ?? null,
+    [context],
+  )
 
-  const mapRef = (node?: HTMLDivElement | null) => {
-    if (node != null && !mapInstanceRef.current) {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: ref callback
+  const mapRef = useCallback((node: HTMLDivElement | null) => {
+    if (node !== null && !mapInstanceRef.current) {
       const map = new LeafletMap(node, options)
       mapInstanceRef.current = map
       if (center != null && zoom != null) {
@@ -68,7 +76,7 @@ function MapContainerComponent<
       }
       setContext(createLeafletContext(map))
     }
-  }
+  }, [])
 
   useEffect(() => {
     return () => {
@@ -79,7 +87,7 @@ function MapContainerComponent<
   const contents = context ? (
     <LeafletContext value={context}>{children}</LeafletContext>
   ) : (
-    placeholder ?? null
+    (placeholder ?? null)
   )
   return (
     <div {...props} ref={mapRef}>