v4.2.0

CHANGELOG.md

@@ -1,3 +1,9 @@
+## v4.2.0 (2022-11-27)
+
+Added support for mutable `url` prop on `TileLayer`
+([PR #1047](https://github.com/PaulLeCam/react-leaflet/pull/1047) by
+[goto-bus-stop](https://github.com/goto-bus-stop))
+
 ## v4.1.0 (2022-09-24)
 
 - Updated Leaflet dependency to v1.9.

package.json

@@ -11,36 +11,36 @@
   "devDependencies": {
     "@skypack/package-check": "^0.2.2",
     "@swc/cli": "^0.1.55",
-    "@swc/core": "^1.3.3",
-    "@swc/jest": "^0.2.22",
+    "@swc/core": "^1.3.20",
+    "@swc/jest": "^0.2.23",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/jest": "^29.0.3",
-    "@types/leaflet": "^1.8.0",
+    "@types/jest": "^29.2.3",
+    "@types/leaflet": "^1.9.0",
     "@types/warning": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.38.0",
-    "@typescript-eslint/parser": "^5.38.0",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.44.0",
     "cross-env": "^7.0.3",
     "del-cli": "^5.0.0",
-    "eslint": "^8.24.0",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^6.0.1",
-    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.0.3",
-    "jest-environment-jsdom": "^29.0.3",
-    "leaflet": "^1.9.1",
-    "prettier": "^2.7.1",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "leaflet": "^1.9.3",
+    "prettier": "^2.8.0",
     "prettier-eslint": "^15.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "ts-jest-resolver": "^2.0.0",
-    "turbo": "^1.5.3",
-    "typescript": "^4.8.3"
+    "turbo": "^1.6.3",
+    "typescript": "^4.9.3"
   },
   "jest": {
     "projects": [

packages/core/package.json

@@ -46,8 +46,8 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6"
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9"
   },
   "jest": {
     "extensionsToTreatAsEsm": [

packages/core/src/index.ts

@@ -50,4 +50,3 @@ export {
 export { type MediaOverlayProps, updateMediaOverlay } from './media-overlay.js'
 export { withPane } from './pane.js'
 export { type PathProps, createPathHook, usePathOptions } from './path.js'
-export { updateTileLayer } from './tile-layer.js'

packages/react-leaflet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "React components for Leaflet maps",
   "repository": {
     "type": "git",
@@ -51,9 +51,9 @@
   },
   "devDependencies": {
     "@types/geojson": "^7946.0.10",
-    "@types/leaflet": "^1.8.0",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6"
+    "@types/leaflet": "^1.9.0",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9"
   },
   "jest": {
     "extensionsToTreatAsEsm": [

packages/react-leaflet/src/MapContainer.tsx

@@ -66,6 +66,7 @@ function MapContainerComponent<
       }
       setContext(createLeafletContext(map))
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {

packages/react-leaflet/src/Pane.tsx

@@ -80,6 +80,7 @@ function PaneComponent(
   const [paneElement, setPaneElement] = useState<HTMLElement | null>(null)
   useImperativeHandle(forwardedRef, () => paneElement, [paneElement])
   const context = useLeafletContext()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const newContext = useMemo(() => ({ ...context, pane: paneName }), [context])
 
   useEffect(() => {

packages/react-leaflet/src/TileLayer.tsx

@@ -2,7 +2,7 @@ import {
   type LayerProps,
   createElementObject,
   createTileLayerComponent,
-  updateTileLayer,
+  updateGridLayer,
   withPane,
 } from '@react-leaflet/core'
 import { TileLayer as LeafletTileLayer, type TileLayerOptions } from 'leaflet'
@@ -14,7 +14,17 @@ export interface TileLayerProps extends TileLayerOptions, LayerProps {
 export const TileLayer = createTileLayerComponent<
   LeafletTileLayer,
   TileLayerProps
->(function createTileLayer({ url, ...options }, context) {
-  const layer = new LeafletTileLayer(url, withPane(options, context))
-  return createElementObject(layer, context)
-}, updateTileLayer)
+>(
+  function createTileLayer({ url, ...options }, context) {
+    const layer = new LeafletTileLayer(url, withPane(options, context))
+    return createElementObject(layer, context)
+  },
+  function updateTileLayer(layer, props, prevProps) {
+    updateGridLayer(layer, props, prevProps)
+
+    const { url } = props
+    if (url != null && url !== prevProps.url) {
+      layer.setUrl(url)
+    }
+  },
+)