v3.2.0

.eslintrc.json

@@ -7,9 +7,7 @@
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "prettier/@typescript-eslint",
-    "prettier/react"
+    "prettier"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

CHANGELOG.md

@@ -1,3 +1,9 @@
+## v3.2.0 (2021-05-15)
+
+- Change unmounting logic for some layers, which should fix issues related to removing or updating elements.
+- Make the `style` prop of `GeoJSON` mutable, this prop should be used instead of `pathOptions` (`pathOptions` can still be used but should be considered deprecated).
+- Fix documentation about `bounds` prop being an instance of `LatLngBounds`.
+
 ## v3.1.0 (2021-01-30)
 
 - Make `Pane` component compatible with React's `StrictMode` ([PR #810](https://github.com/PaulLeCam/react-leaflet/pull/810) by [zmbc](https://github.com/zmbc))

package.json

@@ -19,34 +19,34 @@
     "start": "yarn run lint && yarn run start:core && yarn run start:react-leaflet"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-export-default-from": "^7.12.1",
-    "@babel/plugin-transform-proto-to-assign": "^7.12.1",
-    "@babel/plugin-transform-strict-mode": "^7.12.1",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.12.10",
-    "@babel/preset-typescript": "^7.12.7",
-    "@testing-library/react": "^11.2.3",
-    "@testing-library/react-hooks": "^5.0.3",
-    "@types/jest": "^26.0.20",
-    "@types/leaflet": "^1.5.21",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@babel/cli": "^7.13.10",
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-export-default-from": "^7.12.13",
+    "@babel/plugin-transform-proto-to-assign": "^7.12.13",
+    "@babel/plugin-transform-strict-mode": "^7.12.13",
+    "@babel/preset-env": "^7.13.10",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/react-hooks": "^5.1.0",
+    "@types/jest": "^26.0.21",
+    "@types/leaflet": "^1.7.0",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.5",
     "@types/warning": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.1",
-    "@typescript-eslint/parser": "^4.14.1",
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^26.6.1",
     "cross-env": "^7.0.3",
     "del-cli": "^3.0.1",
-    "eslint": "^7.18.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint": "^7.22.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-import": "^2.23.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^26.6.1",
@@ -56,6 +56,6 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-test-renderer": "^17.0.1",
-    "typescript": "^4.1.3"
+    "typescript": "^4.2.3"
   }
 }

packages/core/__tests__/layer.ts

@@ -17,7 +17,7 @@ describe('layer', () => {
     expect(map.removeLayer).toBeCalledWith(element.instance)
   })
 
-  test('useLayerLifecycle() adds and removes the layer to the layerContainer when set', () => {
+  test('useLayerLifecycle() adds the layer to the layerContainer when set and removes from the map', () => {
     const map = { addLayer: jest.fn(), removeLayer: jest.fn() }
     const layerContainer = { addLayer: jest.fn(), removeLayer: jest.fn() }
     const context = { layerContainer, map }
@@ -28,10 +28,10 @@ describe('layer', () => {
     expect(layerContainer.addLayer).toBeCalledWith(element.instance)
 
     unmount()
-    expect(layerContainer.removeLayer).toBeCalledTimes(1)
-    expect(layerContainer.removeLayer).toBeCalledWith(element.instance)
+    expect(layerContainer.removeLayer).toBeCalledTimes(0)
 
     expect(map.addLayer).toBeCalledTimes(0)
-    expect(map.removeLayer).toBeCalledTimes(0)
+    expect(map.removeLayer).toBeCalledTimes(1)
+    expect(map.removeLayer).toBeCalledWith(element.instance)
   })
 })

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-leaflet/core",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "React Leaflet core",
   "main": "cjs/index.js",
   "module": "esm/index.js",

packages/core/src/circle.ts

@@ -12,10 +12,10 @@ export interface CircleMarkerProps extends CircleMarkerOptions, PathProps {
   children?: ReactNode
 }
 
-export function updateCircle(
+export function updateCircle<P extends CircleMarkerProps = CircleMarkerProps>(
   layer: LeafletCircleMarker,
-  props: CircleMarkerProps,
-  prevProps: CircleMarkerProps,
+  props: P,
+  prevProps: P,
 ) {
   if (props.center !== prevProps.center) {
     layer.setLatLng(props.center)

packages/core/src/component.tsx

@@ -36,7 +36,7 @@ export function createContainerComponent<E, P extends PropsWithChildren>(
 
 export function createDivOverlayComponent<
   E extends DivOverlay,
-  P extends PropsWithChildren
+  P extends PropsWithChildren,
 >(useElement: ReturnType<DivOverlayHook<E, P>>) {
   function OverlayComponent(props: P, ref: Ref<E>) {
     const [isOpen, setOpen] = useState(false)

packages/core/src/context.ts

@@ -17,9 +17,8 @@ export interface LeafletContextInterface {
   pane?: string
 }
 
-export const LeafletContext = createContext<LeafletContextInterface | null>(
-  null,
-)
+export const LeafletContext =
+  createContext<LeafletContextInterface | null>(null)
 
 export const LeafletProvider = LeafletContext.Provider
 

packages/core/src/div-overlay.ts

@@ -25,7 +25,7 @@ export type DivOverlayHook<E extends DivOverlay, P> = (
 
 export function createDivOverlayHook<
   E extends DivOverlay,
-  P extends LayerProps
+  P extends LayerProps,
 >(useElement: ElementHook<E, P>, useLifecycle: DivOverlayLifecycleHook<E, P>) {
   return function useDivOverlay(
     props: P,

packages/core/src/generic.ts

@@ -22,7 +22,7 @@ interface PathWithChildrenProps extends PathProps, PropsWithChildren {}
 
 export function createControlComponent<
   E extends Control,
-  P extends ControlOptions
+  P extends ControlOptions,
 >(createInstance: (props: P) => E) {
   function createElement(
     props: P,
@@ -37,7 +37,7 @@ export function createControlComponent<
 
 export function createLayerComponent<
   E extends Layer,
-  P extends LayerWithChildrenProps
+  P extends LayerWithChildrenProps,
 >(
   createElement: (
     props: P,
@@ -52,7 +52,7 @@ export function createLayerComponent<
 
 export function createOverlayComponent<
   E extends DivOverlay,
-  P extends LayerWithChildrenProps
+  P extends LayerWithChildrenProps,
 >(
   createElement: (
     props: P,
@@ -67,7 +67,7 @@ export function createOverlayComponent<
 
 export function createPathComponent<
   E extends FeatureGroup | Path,
-  P extends PathWithChildrenProps
+  P extends PathWithChildrenProps,
 >(
   createElement: (
     props: P,

packages/core/src/grid-layer.ts

@@ -2,7 +2,7 @@ import { GridLayer, GridLayerOptions } from 'leaflet'
 
 export function updateGridLayer<
   E extends GridLayer,
-  P extends GridLayerOptions
+  P extends GridLayerOptions,
 >(layer: E, props: P, prevProps: P) {
   const { opacity, zIndex } = props
   if (opacity != null && opacity !== prevProps.opacity) {

packages/core/src/layer.ts

@@ -22,7 +22,8 @@ export function useLayerLifecycle(
       container.addLayer(element.instance)
 
       return function removeLayer() {
-        container.removeLayer(element.instance)
+        context.layersControl?.removeLayer(element.instance)
+        context.map.removeLayer(element.instance)
       }
     },
     [context, element],

packages/core/src/media-overlay.ts

@@ -17,7 +17,7 @@ export interface MediaOverlayProps
 
 export function updateMediaOverlay<
   E extends LeafletImageOverlay | LeafletSVGOverlay | LeafletVideoOverlay,
-  P extends MediaOverlayProps
+  P extends MediaOverlayProps,
 >(overlay: E, props: P, prevProps: P) {
   if (
     props.bounds instanceof LatLngBounds &&

packages/core/src/path.ts

@@ -31,7 +31,7 @@ export function usePathOptions(
 
 export function createPathHook<
   E extends FeatureGroup | Path,
-  P extends PathProps
+  P extends PathProps,
 >(useElement: ElementHook<E, P>) {
   return function usePath(props: P): ReturnType<ElementHook<E, P>> {
     const context = useLeafletContext()

packages/react-leaflet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "React components for Leaflet maps",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -43,19 +43,19 @@
     "umd/*"
   ],
   "dependencies": {
-    "@react-leaflet/core": "^1.0.2"
+    "@react-leaflet/core": "^1.1.0"
   },
   "peerDependencies": {
     "leaflet": "^1.7.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@rollup/plugin-babel": "^5.2.3",
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-node-resolve": "^11.1.1",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.3.4",
-    "rollup": "^2.38.1",
+    "rollup": "^2.48.0",
     "rollup-plugin-terser": "^7.0.0"
   }
 }

packages/react-leaflet/rollup.config.js

@@ -35,6 +35,7 @@ const config = {
       babelHelpers: 'bundled',
     }),
     replace({
+      preventAssignment: true,
       'process.env.NODE_ENV': JSON.stringify(env),
     }),
   ],

packages/react-leaflet/src/GeoJSON.tsx

@@ -16,4 +16,13 @@ export const GeoJSON = createPathComponent<LeafletGeoJSON, GeoJSONProps>(
     const instance = new LeafletGeoJSON(data, options)
     return { instance, context: { ...ctx, overlayContainer: instance } }
   },
+  function updateGeoJSON(layer, props, prevProps) {
+    if (props.style !== prevProps.style) {
+      if (props.style == null) {
+        layer.resetStyle()
+      } else {
+        layer.setStyle(props.style)
+      }
+    }
+  },
 )

packages/react-leaflet/src/LayersControl.tsx

@@ -8,9 +8,9 @@ import {
 import { Control, Layer } from 'leaflet'
 import React, {
   ForwardRefExoticComponent,
+  FunctionComponent,
   ReactNode,
   RefAttributes,
-  StatelessComponent,
   useCallback,
   useEffect,
   useMemo,
@@ -53,8 +53,8 @@ export interface ControlledLayerProps {
 export const LayersControl: ForwardRefExoticComponent<
   LayersControlProps & RefAttributes<Control.Layers>
 > & {
-  BaseLayer: StatelessComponent<ControlledLayerProps>
-  Overlay: StatelessComponent<ControlledLayerProps>
+  BaseLayer: FunctionComponent<ControlledLayerProps>
+  Overlay: FunctionComponent<ControlledLayerProps>
 } = createContainerComponent(useLayersControl)
 
 type AddLayerFunc = (

packages/react-leaflet/src/MapContainer.tsx

@@ -51,15 +51,17 @@ export function useMapElement(
   return map
 }
 
-export function MapContainer({
+export function MapContainer<
+  Props extends MapContainerProps = MapContainerProps,
+>({
   children,
   className,
   id,
   placeholder,
   style,
   whenCreated,
   ...options
-}: MapContainerProps) {
+}: Props) {
   const mapRef = useRef<HTMLDivElement>(null)
   const map = useMapElement(mapRef, options)
 

packages/react-leaflet/src/Pane.tsx

@@ -73,9 +73,10 @@ function createPane(
 export function Pane(props: PaneProps) {
   const [paneElement, setPaneElement] = useState<HTMLElement>()
   const context = useLeafletContext()
-  const newContext = useMemo(() => ({ ...context, pane: props.name }), [
-    context,
-  ])
+  const newContext = useMemo(
+    () => ({ ...context, pane: props.name }),
+    [context],
+  )
 
   useEffect(() => {
     setPaneElement(createPane(props, context))

packages/react-leaflet/src/Popup.tsx

@@ -75,12 +75,7 @@ export const Popup = createOverlayComponent<LeafletPopup, PopupProps>(
             popupopen: onPopupOpen,
             popupclose: onPopupClose,
           })
-
-          if (context.overlayContainer == null) {
-            context.map.removeLayer(instance)
-          } else {
-            context.overlayContainer.unbindPopup()
-          }
+          context.map.removeLayer(instance)
         }
       },
       [element, context, setOpen, onClose, onOpen, position],

packages/react-leaflet/src/Tooltip.tsx

@@ -70,7 +70,10 @@ export const Tooltip = createOverlayComponent<LeafletTooltip, TooltipProps>(
             tooltipopen: onTooltipOpen,
             tooltipclose: onTooltipClose,
           })
-          container.unbindTooltip()
+          // @ts-ignore protected property
+          if (container._map != null) {
+            container.unbindTooltip()
+          }
         }
       },
       [element, context, setOpen, onClose, onOpen],