v4 beta 0

CHANGELOG.md

@@ -1,3 +1,7 @@
+## v4.0.0-beta.0 (2022-04-02)
+
+Updated React dependencies to v18 stable.
+
 ## v4.0.0-alpha.2 (2022-03-12)
 
 - Added `createLeafletContext` function to core.

package.json

@@ -18,12 +18,12 @@
   "devDependencies": {
     "@skypack/package-check": "^0.2.2",
     "@swc/cli": "^0.1.55",
-    "@swc/core": "^1.2.153",
+    "@swc/core": "^1.2.162",
     "@swc/jest": "^0.2.17",
-    "@testing-library/react": "^13.0.0-alpha",
+    "@testing-library/react": "^13.0.0",
     "@testing-library/react-hooks": "^8.0.0-alpha",
     "@types/jest": "^27.4.0",
-    "@types/leaflet": "~1.7.9",
+    "@types/leaflet": "^1.7.9",
     "@types/warning": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
@@ -38,12 +38,12 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^27.5.0",
-    "leaflet": "~1.7.1",
+    "leaflet": "^1.7.1",
     "prettier": "^2.5.1",
     "prettier-eslint": "^13.0.0",
-    "react": "^18.0.0-rc.2",
-    "react-dom": "^18.0.0-rc.2",
-    "react-test-renderer": "^18.0.0-rc.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-test-renderer": "^18.0.0",
     "ts-jest-resolver": "^2.0.0",
     "turbo": "^1.1.6",
     "typescript": "^4.5.5"

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-leaflet/core",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-beta.0",
   "description": "React Leaflet core",
   "repository": {
     "type": "git",
@@ -41,9 +41,9 @@
     "prepublishOnly": "package-check"
   },
   "peerDependencies": {
-    "leaflet": "~1.7.1",
-    "react": "^18.0.0-rc.2",
-    "react-dom": "^18.0.0-rc.2"
+    "leaflet": "^1.7.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "jest": {
     "extensionsToTreatAsEsm": [

packages/react-leaflet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-beta.0",
   "description": "React components for Leaflet maps",
   "repository": {
     "type": "git",
@@ -42,15 +42,15 @@
     "prepublishOnly": "package-check"
   },
   "dependencies": {
-    "@react-leaflet/core": "^2.0.0-alpha.1"
+    "@react-leaflet/core": "^2.0.0-beta.0"
   },
   "peerDependencies": {
-    "leaflet": "~1.7.1",
-    "react": "^18.0.0-rc.2",
-    "react-dom": "^18.0.0-rc.2"
+    "leaflet": "^1.7.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@types/leaflet": "~1.7.9"
+    "@types/leaflet": "^1.7.9"
   },
   "jest": {
     "extensionsToTreatAsEsm": [

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.skypack.dev/react-leaflet@next/Marker.js'
+import { Marker } from 'https://cdn.esm.sh/react-leaflet@next/Marker'
 ```
 
 </TabItem>
@@ -182,7 +182,7 @@ import { Marker } from 'react-leaflet/Marker'
 <TabItem value="absolute">
 
 ```js
-import { Popup } from 'https://cdn.skypack.dev/react-leaflet@next/Popup.js'
+import { Popup } from 'https://cdn.esm.sh/react-leaflet@next/Popup'
 ```
 
 </TabItem>
@@ -220,7 +220,7 @@ import { Popup } from 'react-leaflet/Popup'
 <TabItem value="absolute">
 
 ```js
-import { Tooltip } from 'https://cdn.skypack.dev/react-leaflet@next/Tooltip.js'
+import { Tooltip } from 'https://cdn.esm.sh/react-leaflet@next/Tooltip'
 ```
 
 </TabItem>
@@ -260,7 +260,7 @@ import { Tooltip } from 'react-leaflet/Tooltip'
 <TabItem value="absolute">
 
 ```js
-import { TileLayer } from 'https://cdn.skypack.dev/react-leaflet@next/TileLayer.js'
+import { TileLayer } from 'https://cdn.esm.sh/react-leaflet@next/TileLayer'
 ```
 
 </TabItem>
@@ -299,7 +299,7 @@ import { TileLayer } from 'react-leaflet/TileLayer'
 <TabItem value="absolute">
 
 ```js
-import { WMSTileLayer } from 'https://cdn.skypack.dev/react-leaflet@next/WMSTileLayer.js'
+import { WMSTileLayer } from 'https://cdn.esm.sh/react-leaflet@next/WMSTileLayer'
 ```
 
 </TabItem>
@@ -339,7 +339,7 @@ import { WMSTileLayer } from 'react-leaflet/WMSTileLayer'
 <TabItem value="absolute">
 
 ```js
-import { ImageOverlay } from 'https://cdn.skypack.dev/react-leaflet@next/ImageOverlay.js'
+import { ImageOverlay } from 'https://cdn.esm.sh/react-leaflet@next/ImageOverlay'
 ```
 
 </TabItem>
@@ -378,7 +378,7 @@ import { ImageOverlay } from 'react-leaflet/ImageOverlay'
 <TabItem value="absolute">
 
 ```js
-import { VideoOverlay } from 'https://cdn.skypack.dev/react-leaflet@next/VideoOverlay.js'
+import { VideoOverlay } from 'https://cdn.esm.sh/react-leaflet@next/VideoOverlay'
 ```
 
 </TabItem>
@@ -420,7 +420,7 @@ import { VideoOverlay } from 'react-leaflet/VideoOverlay'
 <TabItem value="absolute">
 
 ```js
-import { Circle } from 'https://cdn.skypack.dev/react-leaflet@next/Circle.js'
+import { Circle } from 'https://cdn.esm.sh/react-leaflet@next/Circle'
 ```
 
 </TabItem>
@@ -460,7 +460,7 @@ import { Circle } from 'react-leaflet/Circle'
 <TabItem value="absolute">
 
 ```js
-import { CircleMarker } from 'https://cdn.skypack.dev/react-leaflet@next/CircleMarker.js'
+import { CircleMarker } from 'https://cdn.esm.sh/react-leaflet@next/CircleMarker'
 ```
 
 </TabItem>
@@ -499,7 +499,7 @@ import { CircleMarker } from 'react-leaflet/CircleMarker'
 <TabItem value="absolute">
 
 ```js
-import { Polyline } from 'https://cdn.skypack.dev/react-leaflet@next/Polyline.js'
+import { Polyline } from 'https://cdn.esm.sh/react-leaflet@next/Polyline'
 ```
 
 </TabItem>
@@ -536,7 +536,7 @@ import { Polyline } from 'react-leaflet/Polyline'
 <TabItem value="absolute">
 
 ```js
-import { Polygon } from 'https://cdn.skypack.dev/react-leaflet@next/Polygon.js'
+import { Polygon } from 'https://cdn.esm.sh/react-leaflet@next/Polygon'
 ```
 
 </TabItem>
@@ -575,7 +575,7 @@ import { Polygon } from 'react-leaflet/Polygon'
 <TabItem value="absolute">
 
 ```js
-import { Rectangle } from 'https://cdn.skypack.dev/react-leaflet@next/Rectangle.js'
+import { Rectangle } from 'https://cdn.esm.sh/react-leaflet@next/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.skypack.dev/react-leaflet@next/SVGOverlay.js'
+import { SVGOverlay } from 'https://cdn.esm.sh/react-leaflet@next/SVGOverlay'
 ```
 
 </TabItem>
@@ -653,7 +653,7 @@ import { SVGOverlay } from 'react-leaflet/SVGOverlay'
 <TabItem value="absolute">
 
 ```js
-import { LayerGroup } from 'https://cdn.skypack.dev/react-leaflet@next/LayerGroup.js'
+import { LayerGroup } from 'https://cdn.esm.sh/react-leaflet@next/LayerGroup'
 ```
 
 </TabItem>
@@ -690,7 +690,7 @@ import { LayerGroup } from 'react-leaflet/LayerGroup'
 <TabItem value="absolute">
 
 ```js
-import { FeatureGroup } from 'https://cdn.skypack.dev/react-leaflet@next/FeatureGroup.js'
+import { FeatureGroup } from 'https://cdn.esm.sh/react-leaflet@next/FeatureGroup'
 ```
 
 </TabItem>
@@ -729,7 +729,7 @@ import { FeatureGroup } from 'react-leaflet/FeatureGroup'
 <TabItem value="absolute">
 
 ```js
-import { GeoJSON } from 'https://cdn.skypack.dev/react-leaflet@next/GeoJSON.js'
+import { GeoJSON } from 'https://cdn.esm.sh/react-leaflet@next/GeoJSON'
 ```
 
 </TabItem>
@@ -766,7 +766,7 @@ import { GeoJSON } from 'react-leaflet/GeoJSON'
 <TabItem value="absolute">
 
 ```js
-import { ZoomControl } from 'https://cdn.skypack.dev/react-leaflet@next/ZoomControl.js'
+import { ZoomControl } from 'https://cdn.esm.sh/react-leaflet@next/ZoomControl'
 ```
 
 </TabItem>
@@ -801,7 +801,7 @@ import { ZoomControl } from 'react-leaflet/ZoomControl'
 <TabItem value="absolute">
 
 ```js
-import { AttributionControl } from 'https://cdn.skypack.dev/react-leaflet@next/AttributionControl.js'
+import { AttributionControl } from 'https://cdn.esm.sh/react-leaflet@next/AttributionControl'
 ```
 
 </TabItem>
@@ -837,7 +837,7 @@ import { AttributionControl } from 'react-leaflet/AttributionControl'
 <TabItem value="absolute">
 
 ```js
-import { LayersControl } from 'https://cdn.skypack.dev/react-leaflet@next/LayersControl.js'
+import { LayersControl } from 'https://cdn.esm.sh/react-leaflet@next/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.skypack.dev/react-leaflet@next/ScaleControl.js'
+import { ScaleControl } from 'https://cdn.esm.sh/react-leaflet@next/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.skypack.dev/react-leaflet@next/Pane.js'
+import { Pane } from 'https://cdn.esm.sh/react-leaflet@next/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.skypack.dev/react-leaflet@next/MapContainer.js'
+import { MapContainer } from 'https://cdn.esm.sh/react-leaflet@next/MapContainer'
 ```
 
 </TabItem>
@@ -84,7 +84,7 @@ function MyMapComponent() {
 <TabItem value="absolute">
 
 ```js
-import { useMap } from 'https://cdn.skypack.dev/react-leaflet@next/hooks.js'
+import { useMap } from 'https://cdn.esm.sh/react-leaflet@next/hooks'
 ```
 
 </TabItem>
@@ -134,7 +134,7 @@ function MyMapComponent() {
 <TabItem value="absolute">
 
 ```js
-import { useMapEvents } from 'https://cdn.skypack.dev/react-leaflet@next/hooks.js'
+import { useMapEvents } from 'https://cdn.esm.sh/react-leaflet@next/hooks'
 ```
 
 </TabItem>
@@ -179,7 +179,7 @@ function MyMapComponent() {
 <TabItem value="absolute">
 
 ```js
-import { useMapEvent } from 'https://cdn.skypack.dev/react-leaflet@next/hooks.js'
+import { useMapEvent } from 'https://cdn.esm.sh/react-leaflet@next/hooks'
 ```
 
 </TabItem>

packages/website/docs/core-introduction.mdx

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

packages/website/docs/example-layers-control.md

@@ -11,19 +11,11 @@ const rectangle = [
 
 render(
   <MapContainer center={center} zoom={13} scrollWheelZoom={false}>
+    <TileLayer
+      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    />
     <LayersControl position="topright">
-      <LayersControl.BaseLayer checked name="OpenStreetMap.Mapnik">
-        <TileLayer
-          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-        />
-      </LayersControl.BaseLayer>
-      <LayersControl.BaseLayer name="OpenStreetMap.BlackAndWhite">
-        <TileLayer
-          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-          url="https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
-        />
-      </LayersControl.BaseLayer>
       <LayersControl.Overlay name="Marker with popup">
         <Marker position={center}>
           <Popup>

packages/website/docs/start-installation.mdx

@@ -22,17 +22,17 @@ Before using React Leaflet, you must setup your project following [Leaflet's Qui
 ## Adding React Leaflet
 
 :::caution Alpha version
-React Leaflet v4 is currently in alpha and will only officially support React v18, even if it works with React v17.
+React Leaflet v4 is currently in beta and will only officially support React v18, even if it works with React v17.
 :::
 
 ### Using ESM imports
 
-React Leaflet export [ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) that can be imported by URL, notably from CDNs such as [Skypack](https://www.skypack.dev/):
+React Leaflet export [ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) that can be imported by URL, notably from CDNs such as [esm.sh](https://esm.sh/):
 
 ```js
-import { MapContainer } from 'https://cdn.skypack.dev/react-leaflet@next/MapContainer.js'
-import { TileLayer } from 'https://cdn.skypack.dev/react-leaflet@next/TileLayer.js'
-import { useMap } from 'https://cdn.skypack.dev/react-leaflet@next/hooks.js'
+import { MapContainer } from 'https://cdn.esm.sh/react-leaflet@next/MapContainer'
+import { TileLayer } from 'https://cdn.esm.sh/react-leaflet@next/TileLayer'
+import { useMap } from 'https://cdn.esm.sh/react-leaflet@next/hooks'
 ```
 
 Or importing the full library at once:
@@ -42,7 +42,7 @@ import {
   MapContainer,
   TileLayer,
   useMap,
-} from 'https://cdn.skypack.dev/react-leaflet@next/index.js'
+} from 'https://cdn.esm.sh/react-leaflet@next'
 ```
 
 ### Using a package registry
@@ -62,14 +62,14 @@ React, React DOM and Leaflet are required peer dependencies. You must add them t
 <TabItem value="npm">
 
 ```bash
-npm install react@^18.0.0-rc react-dom@^18.0.0-rc leaflet
+npm install react react-dom leaflet
 ```
 
 </TabItem>
 <TabItem value="yarn">
 
 ```bash
-yarn add react@^18.0.0-rc react-dom@^18.0.0-rc leaflet
+yarn add react react-dom leaflet
 ```
 
 </TabItem>