v4 release

.github/ISSUE_TEMPLATE/bug-report-v4.md → .github/ISSUE_TEMPLATE/bug-report.md

@@ -1,6 +1,6 @@
 ---
 name: Bug report in v4
-about: Report a bug in v4 (alpha)
+about: Report a bug in v4
 ---
 
 ## Bug report in v4
@@ -11,12 +11,12 @@ Please make sure to check the following boxes before submitting an issue.\
 **Issues opened without using this template will be closed unless they have a good reason not to follow this template.**
 
 - [ ] All peer dependencies are installed: React, ReactDOM and Leaflet.
-- [ ] Using the latest RC version of React and ReactDOM v18.
-- [ ] Using the supported version of Leaflet (v1.7.1 minimum) and its corresponding CSS file is loaded.
+- [ ] Using the latest version of React and ReactDOM v18.
+- [ ] Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
 - [ ] Using the [latest v4 version of React-Leaflet](https://github.com/PaulLeCam/react-leaflet/releases).
 - [ ] The issue has not already been reported.
 - [ ] Make sure you have followed the [quick start guide](https://leafletjs.com/examples/quick-start.html) for Leaflet.
-- [ ] Make sure you have fully read the [documentation](https://react-leaflet.js.org/docs/next/start-introduction) and that you understand the [limitations](https://react-leaflet.js.org/docs/next/start-introduction#limitations).
+- [ ] Make sure you have fully read the [documentation](https://react-leaflet.js.org/docs/start-introduction) and that you understand the [limitations](https://react-leaflet.js.org/docs/start-introduction#limitations).
 
 ### Expected behavior
 

CHANGELOG.md

@@ -1,3 +1,25 @@
+## v4.0.0 (2022-04-18)
+
+Changes from v3:
+
+### Breaking changes
+
+- React v18 and Leaflet v1.8 are now required as peer dependency.
+- ES2020 is the new compilation target version.
+- Removed `useMapElement` hook.
+- Removed `MapConsumer` component.
+- Removed `whenCreated` property from the `MapContainer` component (a `ref` callback can be used instead).
+- Removed `onOpen` and `onClose` properties from `Popup` and `Tooltip` components.
+- Removed CommonJS distribution.
+- Removed UMD distribution.
+
+### Other changes
+
+- Added support for React v18 (concurrent mode).
+- Added support for `ref` in the `MapContainer` and `Pane` components.
+- Added `createLeafletContext` function to core.
+- The created element and context objects are now frozen (immutable).
+
 ## v4.0.0-beta.1 (2022-04-18)
 
 Updated Leaflet dependency to v1.8 beta.

CONTRIBUTING.md

@@ -18,10 +18,10 @@ However, please **do not** send pull requests to add features that are not suppo
 ## Features requests
 
 This library aims only to support the features provided by Leaflet. If any of these features is not implemented yet, please submit a feature request to add it.\
-If you are looking for implementations of features provided by plugins, they will not be provided by this library, but [can be found on npm](https://www.npmjs.com/search?q=keywords%3Areact-leaflet-v3).
+If you are looking for implementations of features provided by plugins, they will not be provided by this library, but [can be found on npm](https://www.npmjs.com/search?q=keywords%3Areact-leaflet-v4).
 
 ## Other issues
 
 Please check among existing issues (open **and** closed) if the problem you encounter has not been solved before.\
 If you have questions about React or Leaflet not directly related to this library, please ask them using their respective support platforms.\
-For any other issue, please provide a simple description, if relevant with codes examples. You can use [this CodePen](https://codepen.io/PaulLeCam/pen/xxOgovP) as a starting example.
+For any other issue, please provide a simple description, if relevant with codes examples. You can use [this CodePen](https://codepen.io/PaulLeCam/pen/OJxEbBW) as a starting example.

package.json

@@ -38,7 +38,7 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^27.5.0",
-    "leaflet": "^1.8.0-beta.3",
+    "leaflet": "^1.8.0",
     "prettier": "^2.6.2",
     "prettier-eslint": "^13.0.0",
     "react": "^18.0.0",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-leaflet/core",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0",
   "description": "React Leaflet core",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "prepublishOnly": "package-check"
   },
   "peerDependencies": {
-    "leaflet": "^1.8.0-beta.3",
+    "leaflet": "^1.8.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

packages/react-leaflet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0",
   "description": "React components for Leaflet maps",
   "repository": {
     "type": "git",
@@ -42,10 +42,10 @@
     "prepublishOnly": "package-check"
   },
   "dependencies": {
-    "@react-leaflet/core": "^2.0.0-beta.1"
+    "@react-leaflet/core": "^2.0.0"
   },
   "peerDependencies": {
-    "leaflet": "^1.8.0-beta.3",
+    "leaflet": "^1.8.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

packages/website/docs/api-components.mdx

@@ -144,7 +144,7 @@ Applies to [control components](#controls), making their [`position: ControlPosi
 <TabItem value="absolute">
 
 ```js
-import { Marker } from 'https://cdn.esm.sh/react-leaflet@next/Marker'
+import { Marker } from 'https://cdn.esm.sh/react-leaflet/Marker'
 ```
 
 </TabItem>
@@ -182,7 +182,7 @@ import { Marker } from 'react-leaflet/Marker'
 <TabItem value="absolute">
 
 ```js
-import { Popup } from 'https://cdn.esm.sh/react-leaflet@next/Popup'
+import { Popup } from 'https://cdn.esm.sh/react-leaflet/Popup'
 ```
 
 </TabItem>
@@ -220,7 +220,7 @@ import { Popup } from 'react-leaflet/Popup'
 <TabItem value="absolute">
 
 ```js
-import { Tooltip } from 'https://cdn.esm.sh/react-leaflet@next/Tooltip'
+import { Tooltip } from 'https://cdn.esm.sh/react-leaflet/Tooltip'
 ```
 
 </TabItem>
@@ -260,7 +260,7 @@ import { Tooltip } from 'react-leaflet/Tooltip'
 <TabItem value="absolute">
 
 ```js
-import { TileLayer } from 'https://cdn.esm.sh/react-leaflet@next/TileLayer'
+import { TileLayer } from 'https://cdn.esm.sh/react-leaflet/TileLayer'
 ```
 
 </TabItem>
@@ -299,7 +299,7 @@ import { TileLayer } from 'react-leaflet/TileLayer'
 <TabItem value="absolute">
 
 ```js
-import { WMSTileLayer } from 'https://cdn.esm.sh/react-leaflet@next/WMSTileLayer'
+import { WMSTileLayer } from 'https://cdn.esm.sh/react-leaflet/WMSTileLayer'
 ```
 
 </TabItem>
@@ -339,7 +339,7 @@ import { WMSTileLayer } from 'react-leaflet/WMSTileLayer'
 <TabItem value="absolute">
 
 ```js
-import { ImageOverlay } from 'https://cdn.esm.sh/react-leaflet@next/ImageOverlay'
+import { ImageOverlay } from 'https://cdn.esm.sh/react-leaflet/ImageOverlay'
 ```
 
 </TabItem>
@@ -378,7 +378,7 @@ import { ImageOverlay } from 'react-leaflet/ImageOverlay'
 <TabItem value="absolute">
 
 ```js
-import { VideoOverlay } from 'https://cdn.esm.sh/react-leaflet@next/VideoOverlay'
+import { VideoOverlay } from 'https://cdn.esm.sh/react-leaflet/VideoOverlay'
 ```
 
 </TabItem>
@@ -420,7 +420,7 @@ import { VideoOverlay } from 'react-leaflet/VideoOverlay'
 <TabItem value="absolute">
 
 ```js
-import { Circle } from 'https://cdn.esm.sh/react-leaflet@next/Circle'
+import { Circle } from 'https://cdn.esm.sh/react-leaflet/Circle'
 ```
 
 </TabItem>
@@ -460,7 +460,7 @@ import { Circle } from 'react-leaflet/Circle'
 <TabItem value="absolute">
 
 ```js
-import { CircleMarker } from 'https://cdn.esm.sh/react-leaflet@next/CircleMarker'
+import { CircleMarker } from 'https://cdn.esm.sh/react-leaflet/CircleMarker'
 ```
 
 </TabItem>
@@ -499,7 +499,7 @@ import { CircleMarker } from 'react-leaflet/CircleMarker'
 <TabItem value="absolute">
 
 ```js
-import { Polyline } from 'https://cdn.esm.sh/react-leaflet@next/Polyline'
+import { Polyline } from 'https://cdn.esm.sh/react-leaflet/Polyline'
 ```
 
 </TabItem>
@@ -536,7 +536,7 @@ import { Polyline } from 'react-leaflet/Polyline'
 <TabItem value="absolute">
 
 ```js
-import { Polygon } from 'https://cdn.esm.sh/react-leaflet@next/Polygon'
+import { Polygon } from 'https://cdn.esm.sh/react-leaflet/Polygon'
 ```
 
 </TabItem>
@@ -575,7 +575,7 @@ import { Polygon } from 'react-leaflet/Polygon'
 <TabItem value="absolute">
 
 ```js
-import { Rectangle } from 'https://cdn.esm.sh/react-leaflet@next/Rectangle'
+import { Rectangle } from 'https://cdn.esm.sh/react-leaflet/Rectangle'
 ```
 
 </TabItem>
@@ -614,7 +614,7 @@ The `attributes` must be valid [`SVGSVGElement` properties](https://developer.mo
 <TabItem value="absolute">
 
 ```js
-import { SVGOverlay } from 'https://cdn.esm.sh/react-leaflet@next/SVGOverlay'
+import { SVGOverlay } from 'https://cdn.esm.sh/react-leaflet/SVGOverlay'
 ```
 
 </TabItem>
@@ -653,7 +653,7 @@ import { SVGOverlay } from 'react-leaflet/SVGOverlay'
 <TabItem value="absolute">
 
 ```js
-import { LayerGroup } from 'https://cdn.esm.sh/react-leaflet@next/LayerGroup'
+import { LayerGroup } from 'https://cdn.esm.sh/react-leaflet/LayerGroup'
 ```
 
 </TabItem>
@@ -690,7 +690,7 @@ import { LayerGroup } from 'react-leaflet/LayerGroup'
 <TabItem value="absolute">
 
 ```js
-import { FeatureGroup } from 'https://cdn.esm.sh/react-leaflet@next/FeatureGroup'
+import { FeatureGroup } from 'https://cdn.esm.sh/react-leaflet/FeatureGroup'
 ```
 
 </TabItem>
@@ -729,7 +729,7 @@ import { FeatureGroup } from 'react-leaflet/FeatureGroup'
 <TabItem value="absolute">
 
 ```js
-import { GeoJSON } from 'https://cdn.esm.sh/react-leaflet@next/GeoJSON'
+import { GeoJSON } from 'https://cdn.esm.sh/react-leaflet/GeoJSON'
 ```
 
 </TabItem>
@@ -766,7 +766,7 @@ import { GeoJSON } from 'react-leaflet/GeoJSON'
 <TabItem value="absolute">
 
 ```js
-import { ZoomControl } from 'https://cdn.esm.sh/react-leaflet@next/ZoomControl'
+import { ZoomControl } from 'https://cdn.esm.sh/react-leaflet/ZoomControl'
 ```
 
 </TabItem>
@@ -801,7 +801,7 @@ import { ZoomControl } from 'react-leaflet/ZoomControl'
 <TabItem value="absolute">
 
 ```js
-import { AttributionControl } from 'https://cdn.esm.sh/react-leaflet@next/AttributionControl'
+import { AttributionControl } from 'https://cdn.esm.sh/react-leaflet/AttributionControl'
 ```
 
 </TabItem>
@@ -837,7 +837,7 @@ import { AttributionControl } from 'react-leaflet/AttributionControl'
 <TabItem value="absolute">
 
 ```js
-import { LayersControl } from 'https://cdn.esm.sh/react-leaflet@next/LayersControl'
+import { LayersControl } from 'https://cdn.esm.sh/react-leaflet/LayersControl'
 ```
 
 </TabItem>
@@ -900,7 +900,7 @@ Note: a `ref` cannot be attached to this element, it should be attached to the c
 <TabItem value="absolute">
 
 ```js
-import { ScaleControl } from 'https://cdn.esm.sh/react-leaflet@next/ScaleControl'
+import { ScaleControl } from 'https://cdn.esm.sh/react-leaflet/ScaleControl'
 ```
 
 </TabItem>
@@ -944,7 +944,7 @@ The `name` prop must be unique to the pane and different from the [default Leafl
 <TabItem value="absolute">
 
 ```js
-import { Pane } from 'https://cdn.esm.sh/react-leaflet@next/Pane'
+import { Pane } from 'https://cdn.esm.sh/react-leaflet/Pane'
 ```
 
 </TabItem>

packages/website/docs/api-map.mdx

@@ -38,7 +38,7 @@ The Leaflet `Map` instance created by the `MapContainer` element can be accessed
 <TabItem value="absolute">
 
 ```js
-import { MapContainer } from 'https://cdn.esm.sh/react-leaflet@next/MapContainer'
+import { MapContainer } from 'https://cdn.esm.sh/react-leaflet/MapContainer'
 ```
 
 </TabItem>
@@ -84,7 +84,7 @@ function MyMapComponent() {
 <TabItem value="absolute">
 
 ```js
-import { useMap } from 'https://cdn.esm.sh/react-leaflet@next/hooks'
+import { useMap } from 'https://cdn.esm.sh/react-leaflet/hooks'
 ```
 
 </TabItem>
@@ -134,7 +134,7 @@ function MyMapComponent() {
 <TabItem value="absolute">
 
 ```js
-import { useMapEvents } from 'https://cdn.esm.sh/react-leaflet@next/hooks'
+import { useMapEvents } from 'https://cdn.esm.sh/react-leaflet/hooks'
 ```
 
 </TabItem>
@@ -179,7 +179,7 @@ function MyMapComponent() {
 <TabItem value="absolute">
 
 ```js
-import { useMapEvent } from 'https://cdn.esm.sh/react-leaflet@next/hooks'
+import { useMapEvent } from 'https://cdn.esm.sh/react-leaflet/hooks'
 ```
 
 </TabItem>

packages/website/docs/core-introduction.mdx

@@ -39,7 +39,7 @@ values={[
 <TabItem value="absolute">
 
 ```js
-import { createControlComponent } from 'https://cdn.esm.sh/@react-leaflet/core@next'
+import { createControlComponent } from 'https://cdn.esm.sh/@react-leaflet/core'
 import { Control } from 'https://cdn.esm.sh/leaflet'
 
 export const ZoomControl = createControlComponent(