React 19 support (#362)

* Bump react and @types/react

Bumps [react](https://github.com/facebook/react/tree/HEAD/packages/react) and [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react). These dependencies needed to be updated together.

Updates `react` from 18.3.1 to 19.0.0
- [Release notes](https://github.com/facebook/react/releases)
- [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/react/commits/v19.0.0/packages/react)

Updates `@types/react` from 18.3.8 to 19.0.8
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react)

---
updated-dependencies:
- dependency-name: react
  dependency-type: direct:development
  update-type: version-update:semver-major
- dependency-name: "@types/react"
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* add React 19

* update the changelog

* drop the explicit context

* leave React to set the context and delay init

* fix all types in the examples

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Momtchil Momtchev <momtchil@momtchev.com>

Author: dependabot[bot]

.github/workflows/node.js.yml

@@ -40,7 +40,9 @@ jobs:
               with:
                   node-version: 20.x
             - run: |
-                  npm i react@18 react-dom@18 react-test-renderer@18 @types/react@18 @types/react-dom@18 @testing-library/react@13
+                  npm i react@18 react-dom@18 react-test-renderer@18 \
+                    @types/react@18 @types/react-dom@18 @testing-library/react@13 \
+                    react-router@7.0.2
             - run: npm i
             - run: tsc
             - run: npm test
@@ -57,7 +59,9 @@ jobs:
               with:
                   node-version: 20.x
             - run: |
-                  npm i react@18.1 react-dom@18.1 react-test-renderer@18.1 @types/react@18 @types/react-dom@18 @testing-library/react@13
+                  npm i react@18.1 react-dom@18.1 react-test-renderer@18.1 \
+                    @types/react@18 @types/react-dom@18 @testing-library/react@13 \
+                    react-router@7.0.2
             - run: npm i
             - run: tsc
             - run: npm test
@@ -74,7 +78,9 @@ jobs:
               with:
                   node-version: 20.x
             - run: |
-                  npm i react@18.2 react-dom@18.2 react-test-renderer@18.2 @types/react@18 @types/react-dom@18 @testing-library/react@13
+                  npm i react@18.2 react-dom@18.2 react-test-renderer@18.2 \
+                    @types/react@18 @types/react-dom@18 @testing-library/react@13 \
+                    react-router@7.0.2
             - run: npm i
             - run: tsc
             - run: npm test
@@ -91,7 +97,28 @@ jobs:
               with:
                   node-version: 20.x
             - run: |
-                  npm i react@18.3.1 react-dom@18.3.1 react-test-renderer@18.3.1 @types/react@18.3.2 @types/react-dom@18.0.5 @testing-library/react@15.0.7
+                  npm i react@18.3.1 react-dom@18.3.1 react-test-renderer@18.3.1 \
+                    @types/react@18.3.2 @types/react-dom@18.0.5 @testing-library/react@15.0.7 \
+                    react-router@7.0.2
+            - run: npm i
+            - run: tsc
+            - run: npm test
+            - run: npm run build:examples
+
+    react-19:
+        runs-on: ubuntu-latest
+
+        steps:
+            - run: echo "::add-mask::${{ secrets.STADIA_MAPS_API_KEY }}"
+            - uses: actions/checkout@v4
+            - name: Use Node.js 20.x
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20.x
+            - run: |
+                  npm i react@19 react-dom@19 react-test-renderer@19 \
+                    @types/react@19 @types/react-dom@19 @testing-library/react@16.2.0 \
+                    react-router@7.1.5
             - run: npm i
             - run: tsc
             - run: npm test

CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.2.0] 2025-02-01
+
+-   React 19 support
+
 ### [3.3.1] 2025-01-10
 
 -   Fix `RLayerVectorImage` in OpenLayers 10.3.1

examples/Add-Delete.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {JSX} from 'react';
 import {fromLonLat} from 'ol/proj';
 import {Point} from 'ol/geom';
 import {Feature} from 'ol';
@@ -30,7 +30,7 @@ export default function Interactions(): JSX.Element {
                 })
         )
     );
-    const vectorRef = React.useRef() as React.RefObject<RLayerVector>;
+    const vectorRef = React.useRef(null) as React.RefObject<RLayerVector>;
     return (
         <React.Fragment>
             <RMap

examples/Addon.tsx

@@ -2,11 +2,11 @@
  * This example shows how to extend RLayers to include support for your custom component
  */
 
-import React from 'react';
+import React, {JSX} from 'react';
 import {fromLonLat} from 'ol/proj';
 import {MapboxVectorLayer as VectorMapbox} from 'ol-mapbox-style';
 
-import {RMap, RLayer, RLayerProps, RContextType} from 'rlayers';
+import {RMap, RLayer, RLayerProps} from 'rlayers';
 
 /**
  * The properties interface definition
@@ -25,9 +25,9 @@ class MyLayerMapbox extends RLayer<MyLayerMapboxProps> {
     // Tiled layers must extend RLayerRaster, non-tiled vector layers must extend RLayerVector
     // This allows you to have the same features as RLayers built-in components
     // Completely custom layers must extend RLayer
-    constructor(props: Readonly<MyLayerMapboxProps>, context?: React.Context<RContextType>) {
+    constructor(props: Readonly<MyLayerMapboxProps>) {
         // You must call the parent constructor
-        super(props, context);
+        super(props);
 
         // You must create the this.ol object which must be compatible with the this.ol of the parent
         this.ol = new VectorMapbox({

examples/AnimatedOverlay.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {JSX} from 'react';
 import {fromLonLat} from 'ol/proj';
 import {Coordinate} from 'ol/coordinate';
 import {Point} from 'ol/geom';

examples/App.tsx

@@ -2,7 +2,7 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './example.css';
 import './ghp.css';
-import React from 'react';
+import React, {JSX} from 'react';
 import {HashRouter as Router, Routes, Route, Link} from 'react-router-dom';
 import {VERSION as OL_VERSION} from 'ol';
 import semver from 'semver';

examples/Cluster.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, {JSX, useCallback} from 'react';
 import {fromLonLat} from 'ol/proj';
 import GeoJSON from 'ol/format/GeoJSON';
 import {createEmpty, extend, getHeight, getWidth} from 'ol/extent';
@@ -32,7 +32,7 @@ const extentFeatures = (features, resolution) => {
 export default function Cluster(): JSX.Element {
     const [distance, setDistance] = React.useState(20);
     const [selected, setSelected] = React.useState<string>('Click a cluster for details');
-    const earthquakeLayer = React.useRef();
+    const earthquakeLayer = React.useRef(null);
     return (
         <React.Fragment>
             <RMap className='example-map' initial={{center: fromLonLat([0, 0]), zoom: 1}}>

examples/CodePenButton.tsx

@@ -53,7 +53,7 @@ const CodePenButton = React.memo(function CodePenButton(props: {
         });
     }, [props.text]);
 
-    const ref = React.useRef<HTMLFormElement>();
+    const ref = React.useRef<HTMLFormElement>(null);
 
     if (text && text.match(/in CodePen/)) return null;
     return (

examples/Controls.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, {JSX, useCallback} from 'react';
 import {MapBrowserEvent} from 'ol';
 import {fromLonLat, toLonLat} from 'ol/proj';
 import 'ol/ol.css';

examples/Draw.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {JSX} from 'react';
 import {fromLonLat} from 'ol/proj';
 import {
     altShiftKeysOnly,