Add docs for core APIs

.babelrc

@@ -21,7 +21,7 @@
       "plugins": [
         [
           "@babel/plugin-transform-runtime",
-          { "corejs": 3, "version": "^7.9.2" }
+          { "corejs": 3, "version": "^7.10.4" }
         ]
       ]
     },
@@ -44,7 +44,7 @@
       "plugins": [
         [
           "@babel/plugin-transform-runtime",
-          { "corejs": 3, "version": "^7.9.2" }
+          { "corejs": 3, "version": "^7.10.4" }
         ]
       ]
     },
@@ -67,7 +67,7 @@
       "plugins": [
         [
           "@babel/plugin-transform-runtime",
-          { "corejs": 3, "useESModules": true, "version": "^7.9.2" }
+          { "corejs": 3, "useESModules": true, "version": "^7.10.4" }
         ]
       ]
     }

.eslintrc.json

@@ -19,8 +19,8 @@
   },
   "plugins": ["@typescript-eslint", "prettier", "react", "react-hooks"],
   "rules": {
-    "@typescript-eslint/ban-ts-ignore": "warn",
-    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/ban-ts-comment": "warn",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-unused-vars": [
       "error",
       { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
@@ -33,7 +33,8 @@
         "singleQuote": true,
         "trailingComma": "all"
       }
-    ]
+    ],
+    "react/prop-types": "warn"
   },
   "settings": {
     "react": {

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - 12
+  - 14
 cache:
   yarn: true
   directories:

CHANGELOG.md

@@ -1,6 +1,9 @@
-## master
+## v2.7.0 (2020-05-06)
 
-[website] Bump Leaflet docs links to v1.6.0 ([PR #686](https://github.com/PaulLeCam/react-leaflet/pull/686) by _moondef_).
+- Added `viewBox` and `preserveAspectRatio` props to `SVGOverlay` component ([PR #704](https://github.com/PaulLeCam/react-leaflet/pull/704) by _spectras_).
+- [website] Bump Leaflet docs links to v1.6.0 ([PR #686](https://github.com/PaulLeCam/react-leaflet/pull/686) by _moondef_).
+- [website] Set react-leaflet-markercluster v2 support ([PR #693](https://github.com/PaulLeCam/react-leaflet/pull/693) by _yuzhva_).
+- [website] Added react-leaflet-kml plugin ([PR #707](https://github.com/PaulLeCam/react-leaflet/pull/707) by _aviklai_).
 
 ## v2.6.3 (2020-03-13)
 

package.json

@@ -19,51 +19,51 @@
     "start": "yarn run lint && yarn run start:core && yarn run start:react-leaflet"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.6",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-export-default-from": "^7.5.2",
-    "@babel/plugin-transform-proto-to-assign": "^7.5.5",
-    "@babel/plugin-transform-runtime": "^7.9.6",
-    "@babel/plugin-transform-strict-mode": "^7.2.0",
-    "@babel/preset-env": "^7.9.6",
-    "@babel/preset-react": "^7.9.4",
-    "@babel/preset-typescript": "^7.9.0",
-    "@testing-library/react": "^10.0.4",
-    "@testing-library/react-hooks": "^3.2.1",
-    "@types/jest": "^25.2.1",
-    "@types/leaflet": "^1.5.12",
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.7",
+    "@babel/cli": "^7.10.4",
+    "@babel/core": "^7.10.4",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-export-default-from": "^7.10.4",
+    "@babel/plugin-transform-proto-to-assign": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.10.4",
+    "@babel/plugin-transform-strict-mode": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-typescript": "^7.10.4",
+    "@testing-library/react": "^10.4.5",
+    "@testing-library/react-hooks": "^3.3.0",
+    "@types/jest": "^26.0.4",
+    "@types/leaflet": "^1.5.16",
+    "@types/react": "^16.9.42",
+    "@types/react-dom": "^16.9.8",
     "@types/warning": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^2.31.0",
-    "@typescript-eslint/parser": "^2.31.0",
+    "@typescript-eslint/eslint-plugin": "^3.6.0",
+    "@typescript-eslint/parser": "^3.6.0",
     "babel-eslint": "^10.0.3",
-    "babel-jest": "^26.0.1",
+    "babel-jest": "^26.1.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-dev-expression": "^0.2.2",
     "cross-env": "^7.0.2",
-    "del-cli": "^3.0.0",
-    "eslint": "^6.8.0",
+    "del-cli": "^3.0.1",
+    "eslint": "^7.3.1",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^4.0.0",
-    "jest": "^26.0.1",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.0.7",
+    "jest": "^26.1.0",
     "leaflet": "^1.6.0",
     "prettier": "^2.0.5",
-    "prettier-eslint": "^9.0.1",
+    "prettier-eslint": "^11.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-test-renderer": "^16.13.1",
-    "snapshot-diff": "^0.7.0",
-    "ts-jest": "^25.4.0",
-    "typescript": "^3.8.3",
+    "snapshot-diff": "^0.8.1",
+    "ts-jest": "^26.1.1",
+    "typescript": "^3.9.6",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   }
 }

packages/core/__tests__/element.ts

@@ -9,7 +9,7 @@ describe('element', () => {
     const createElementMock = jest.fn()
 
     const useElement = createElementHook(createElementMock)
-    renderHook(() => useElement(context, props))
+    renderHook(() => useElement(props, context))
 
     expect(createElementMock).toBeCalledTimes(1)
     expect(createElementMock).toBeCalledWith(props, context)
@@ -22,7 +22,7 @@ describe('element', () => {
     const updateElementMock = jest.fn()
     const useElement = createElementHook(createElementMock, updateElementMock)
 
-    const { rerender } = renderHook((p) => useElement(context, p), {
+    const { rerender } = renderHook((p) => useElement(p, context), {
       initialProps: { test: true },
     })
     expect(createElementMock).toBeCalledTimes(1)

packages/core/package.json

@@ -40,7 +40,7 @@
     "types/*"
   ],
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.9.6",
+    "@babel/runtime-corejs3": "^7.10.4",
     "core-js": "^3.6.5"
   },
   "peerDependencies": {

packages/core/src/circle.ts

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

packages/core/src/context.ts

@@ -3,7 +3,7 @@ import { createContext, useContext } from 'react'
 
 export const CONTEXT_VERSION = 1
 
-interface ControlledLayer {
+export interface ControlledLayer {
   addLayer(layer: Layer): void
   removeLayer(layer: Layer): void
 }

packages/core/src/control.ts

@@ -9,9 +9,10 @@ export function createControlHook<E extends Control, P extends ControlOptions>(
 ) {
   return function useLeafletControl(props: P): ReturnType<ElementHook<E, P>> {
     const context = useLeafletContext()
-    const elementRef = useElement(context, props)
+    const elementRef = useElement(props, context)
     const { instance } = elementRef.current
     const positionRef = useRef(props.position)
+    const { position } = props
 
     useEffect(
       function addControl() {
@@ -26,12 +27,12 @@ export function createControlHook<E extends Control, P extends ControlOptions>(
 
     useEffect(
       function updateControl() {
-        if (props.position != null && props.position !== positionRef.current) {
-          instance.setPosition(props.position)
-          positionRef.current = props.position
+        if (position != null && position !== positionRef.current) {
+          instance.setPosition(position)
+          positionRef.current = position
         }
       },
-      [instance, props.position],
+      [instance, position],
     )
 
     return elementRef

packages/core/src/div-overlay.ts

@@ -29,7 +29,7 @@ export function createDivOverlayHook<
     setOpen: SetOpenFunc,
   ): ReturnType<ElementHook<E, P>> {
     const context = useLeafletContext()
-    const elementRef = useElement(context, props)
+    const elementRef = useElement(props, context)
 
     useEventHandlers(elementRef.current, props.eventHandlers)
     useLifecycle(elementRef.current, context, props, setOpen)

packages/core/src/dom.ts

@@ -4,29 +4,29 @@ function splitClassName(className: string): string[] {
   return className.split(' ').filter(Boolean)
 }
 
-export const addClassName = (container: HTMLElement, className: string) => {
+export function addClassName(element: HTMLElement, className: string) {
   splitClassName(className).forEach((cls) => {
-    DomUtil.addClass(container, cls)
+    DomUtil.addClass(element, cls)
   })
 }
 
-export const removeClassName = (container: HTMLElement, className: string) => {
+export function removeClassName(element: HTMLElement, className: string) {
   splitClassName(className).forEach((cls) => {
-    DomUtil.removeClass(container, cls)
+    DomUtil.removeClass(element, cls)
   })
 }
 
 export function updateClassName(
-  container?: HTMLElement,
+  element?: HTMLElement,
   prevClassName?: string,
   nextClassName?: string,
 ) {
-  if (container != null && nextClassName !== prevClassName) {
+  if (element != null && nextClassName !== prevClassName) {
     if (prevClassName != null && prevClassName.length > 0) {
-      removeClassName(container, prevClassName)
+      removeClassName(element, prevClassName)
     }
     if (nextClassName != null && nextClassName.length > 0) {
-      addClassName(container, nextClassName)
+      addClassName(element, nextClassName)
     }
   }
 }

packages/core/src/element.ts

@@ -2,17 +2,17 @@ import { MutableRefObject, useEffect, useRef } from 'react'
 
 import { LeafletContextInterface } from './context'
 
-export type ElementHook<E, P> = (
-  context: LeafletContextInterface,
-  props: P,
-) => MutableRefObject<LeafletElement<E>>
-
 export interface LeafletElement<T, C = any> {
   instance: T
   context: LeafletContextInterface
   container?: C | null
 }
 
+export type ElementHook<E, P> = (
+  props: P,
+  context: LeafletContextInterface,
+) => MutableRefObject<LeafletElement<E>>
+
 export function createElementHook<E, P, C = any>(
   createElement: (
     props: P,
@@ -22,16 +22,16 @@ export function createElementHook<E, P, C = any>(
 ) {
   if (updateElement == null) {
     return function useImmutableLeafletElement(
-      context: LeafletContextInterface,
       props: P,
+      context: LeafletContextInterface,
     ): ReturnType<ElementHook<E, P>> {
       return useRef<LeafletElement<E, C>>(createElement(props, context))
     }
   }
 
   return function useMutableLeafletElement(
-    context: LeafletContextInterface,
     props: P,
+    context: LeafletContextInterface,
   ): ReturnType<ElementHook<E, P>> {
     const elementRef = useRef<LeafletElement<E, C>>(
       createElement(props, context),

packages/core/src/grid-layer.ts

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

packages/core/src/layer.ts

@@ -31,8 +31,8 @@ export function useAttribution(
   )
 }
 
-export function useLayerLifecycle<E extends Layer>(
-  element: LeafletElement<E>,
+export function useLayerLifecycle(
+  element: LeafletElement<Layer>,
   context: LeafletContextInterface,
 ) {
   useEffect(
@@ -53,7 +53,7 @@ export function createLayerHook<E extends Layer, P extends LayerProps>(
 ) {
   return function useLayer(props: P): ReturnType<ElementHook<E, P>> {
     const context = useLeafletContext()
-    const elementRef = useElement(context, props)
+    const elementRef = useElement(props, context)
 
     useAttribution(context.map, props.attribution)
     useEventHandlers(elementRef.current, props.eventHandlers)

packages/core/src/path.ts

@@ -10,9 +10,9 @@ export interface PathProps extends EventedProps {
   pathOptions?: PathOptions
 }
 
-export function usePathOptions<P extends PathProps>(
+export function usePathOptions(
   element: LeafletElement<FeatureGroup | Path>,
-  props: P,
+  props: PathProps,
 ) {
   const optionsRef = useRef<PathOptions | void>()
 
@@ -34,11 +34,11 @@ export function createPathHook<
 >(useElement: ElementHook<E, P>) {
   return function usePath(props: P): ReturnType<ElementHook<E, P>> {
     const context = useLeafletContext()
-    const elementRef = useElement(context, props)
+    const elementRef = useElement(props, context)
 
     useEventHandlers(elementRef.current, props.eventHandlers)
     useLayerLifecycle(elementRef.current, context)
-    usePathOptions<P>(elementRef.current, props)
+    usePathOptions(elementRef.current, props)
 
     return elementRef
   }

packages/examples/package.json

@@ -11,6 +11,6 @@
   "devDependencies": {
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.11.0"
   }
 }

packages/examples/src/index.tsx

@@ -6,6 +6,7 @@ declare let module: any
 const MOUNT_NODE = document.getElementById('app')
 
 function render() {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const Examples = require('./components/Examples').default
   ReactDOM.render(<Examples />, MOUNT_NODE)
 }