v1.8.2

.travis.yml

@@ -3,6 +3,7 @@ language: node_js
 node_js:
   - 8
   - 6
+  - 9
 cache:
   yarn: true
   directories:

CHANGELOG.md

@@ -1,3 +1,10 @@
+## v1.8.2 (2018-02-26)
+
+* Fixed `Map` unmounting when `preferCanvas` is set.
+* Added `es` folder to npm package ([PR #449](https://github.com/PaulLeCam/react-leaflet/pull/449) by _jonathanchrisp_).
+* [website] Fixed link in examples page.
+* [internal] Updated examples to webpack 4.
+
 ## v1.8.1 (2018-02-21)
 
 * Fixed `Tooltip` component unmounting.

docs/examples.md

@@ -17,7 +17,7 @@ Different examples are available in the [example folder](https://github.com/Paul
 * [Draggable marker toggle](https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/draggable-marker.js)
 * [Map with bounds](https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/bounds.js)
 * [Custom component: a list of markers](https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/custom-component.js)
-* [Animated map](https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/animated.js)
+* [Animated map](https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/animate.js)
 * [WMS tile layer](https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/wms-tile-layer.js)
 * [Video overlay](https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/video-overlay.js)
 

docs/plugins.md

@@ -10,21 +10,21 @@ open pull requests to update this list!
 * [`react-leaflet-bing`](https://www.npmjs.com/package/react-leaflet-bing)
 * [`react-leaflet-choropleth`](https://www.npmjs.com/package/react-leaflet-choropleth)
 * [`react-leaflet-cluster-layer`](https://www.npmjs.com/package/react-leaflet-cluster-layer)
-* [`react-leaflet-markercluster`](https://www.npmjs.com/package/react-leaflet-markercluster)
 * [`react-leaflet-control`](https://www.npmjs.com/package/react-leaflet-control)
+* [`react-leaflet-deflate`](https://www.npmjs.com/package/react-leaflet-deflate)
 * [`react-leaflet-div-icon`](https://www.npmjs.com/package/react-leaflet-div-icon)
 * [`react-leaflet-draggable-polyline`](https://www.npmjs.com/package/react-leaflet-draggable-polyline)
 * [`react-leaflet-draw`](https://www.npmjs.com/package/react-leaflet-draw)
+* [`react-leaflet-easyprint`](https://www.npmjs.com/package/react-leaflet-easyprint)
 * [`react-leaflet-geojson-cluster`](https://www.npmjs.com/package/react-leaflet-geojson-cluster)
 * [`react-leaflet-google`](https://www.npmjs.com/package/react-leaflet-google)
 * [`react-leaflet-heatmap-layer`](https://www.npmjs.com/package/react-leaflet-heatmap-layer)
+* [`react-leaflet-markercluster`](https://www.npmjs.com/package/react-leaflet-markercluster)
 * [`react-leaflet-marker-layer`](https://www.npmjs.com/package/react-leaflet-marker-layer)
+* [`react-leaflet-measure`](https://www.npmjs.com/package/react-leaflet-measure)
 * [`react-leaflet-pane`](https://www.npmjs.com/package/react-leaflet-pane)
 * [`react-leaflet-rotatedmarker`](https://www.npmjs.com/package/react-leaflet-rotatedmarker)
 * [`react-leaflet-shapefile`](https://www.npmjs.com/package/react-leaflet-shapefile)
-* [`react-leaflet-zoom-display`](https://www.npmjs.com/package/react-leaflet-zoom-display)
 * [`react-leaflet-sidebarv2`](https://www.npmjs.com/package/react-leaflet-sidebarv2)
+* [`react-leaflet-zoom-display`](https://www.npmjs.com/package/react-leaflet-zoom-display)
 * [`react-mapbox-components`](https://www.npmjs.com/package/react-mapbox-components)
-* [`react-leaflet-deflate`](https://www.npmjs.com/package/react-leaflet-deflate)
-* [`react-leaflet-measure`](https://www.npmjs.com/package/react-leaflet-measure)
-* [`react-leaflet-easyprint`](https://www.npmjs.com/package/react-leaflet-easyprint)

example/index.html

@@ -6,6 +6,9 @@
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
     <style>
+      body {
+        padding-bottom: 30px;
+      }
       h1, h2, p {
         font-family: sans-serif;
         text-align: center;
@@ -19,6 +22,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="/build/app.js"></script>
+    <script src="/bundle.js"></script>
   </body>
 </html>

example/webpack.config.js

@@ -0,0 +1,24 @@
+const path = require('path')
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    index: [path.join(__dirname, 'index.js')],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+      },
+    ],
+  },
+  output: {
+    filename: 'bundle.js',
+  },
+  serve: {
+    content: [__dirname],
+    port: 8000,
+  },
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "React components for Leaflet maps",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,8 +23,7 @@
     "test:watch": "npm run lint && npm run flow && npm run jest:watch",
     "start": "npm run test && npm run build",
     "prepublishOnly": "npm run build",
-    "examples":
-      "webpack-dev-server --config ./example/webpack.config.babel.js --progress"
+    "examples": "webpack-serve ./example/webpack.config.js"
   },
   "repository": {
     "type": "git",
@@ -53,8 +52,8 @@
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.2",
-    "babel-jest": "^22.4.0",
-    "babel-loader": "^7.1.2",
+    "babel-jest": "^22.4.1",
+    "babel-loader": "^7.1.3",
     "babel-plugin-dev-expression": "^0.2.1",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-lodash": "^3.3.2",
@@ -65,30 +64,30 @@
     "cross-env": "^5.1.3",
     "eslint": "^4.18.1",
     "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-flowtype": "^2.45.0",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-node": "^6.0.0",
+    "eslint-plugin-flowtype": "^2.46.1",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-node": "^6.0.1",
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-react": "^7.7.0",
     "flow-bin": "^0.66.0",
     "flow-copy-source": "^1.3.0",
-    "jest-cli": "^22.4.0",
+    "jest-cli": "^22.4.2",
     "leaflet": "^1.3.1",
     "prettier": "^1.10.2",
     "prettier-eslint": "^8.8.1",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "rimraf": "^2.6.2",
-    "rollup": "^0.56.2",
+    "rollup": "^0.56.3",
     "rollup-plugin-babel": "^3.0.3",
     "rollup-plugin-commonjs": "^8.3.0",
     "rollup-plugin-node-resolve": "^3.0.3",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-uglify": "^3.0.0",
-    "webpack": "^3.11.0",
-    "webpack-dev-server": "^2.11.1"
+    "webpack": "^4.0.0",
+    "webpack-serve": "^0.1.4"
   },
   "jest": {
     "collectCoverage": true,

src/Map.js

@@ -271,9 +271,14 @@ export default class Map extends MapComponent<LeafletElement, Props> {
 
   componentWillUnmount() {
     super.componentWillUnmount()
-    this.leafletElement.off('move', this.onViewportChange)
-    this.leafletElement.off('moveend', this.onViewportChanged)
-    this.leafletElement.remove()
+    // The canvas renderer uses requestAnimationFrame, making a deferred call to a deleted object
+    // When preferCanvas is set, use simpler teardown logic
+    if (this.props.preferCanvas === true) {
+      this.leafletElement._initEvents(true)
+      this.leafletElement._stop()
+    } else {
+      this.leafletElement.remove()
+    }
   }
 
   bindContainer = (container: ?HTMLDivElement): void => {