react-map-gl - npm Package Compare versions

Comparing version 7.0.3 to 7.0.4

CHANGELOG.md

@@ -5,2 +5,6 @@ # CHANGELOG
 
+## 7.0.4 (Feb 7, 2022)
+
+- Add reuseMaps prop (#1730)
+
 ## 7.0.3 (Feb 7, 2022)
@@ -7,0 +11,0 @@

dist/es5/components/map.d.ts

@@ -15,2 +15,3 @@ /// <reference types="mapbox-gl" />
     mapLib?: any;
+    reuseMaps?: boolean;
     /** Map container id */
@@ -125,2 +126,3 @@ id?: string;
     mapLib?: any;
+    reuseMaps?: boolean;
     /** Map container id */
@@ -127,0 +129,0 @@ id?: string;

dist/es5/components/map.js

@@ -87,4 +87,8 @@ "use strict";
                 (0, set_globals_1.default)(mapboxgl, props);
-                mapbox = new mapbox_1.default(mapboxgl.Map, props);
-                mapbox.initialize(containerRef.current);
+                if (props.reuseMaps) {
+                    mapbox = mapbox_1.default.reuse(props, containerRef.current);
+                }
+                if (!mapbox) {
+                    mapbox = new mapbox_1.default(mapboxgl.Map, props, containerRef.current);
+                }
                 contextValue.map = mapbox.map;
@@ -111,3 +115,8 @@ contextValue.mapLib = mapboxgl;
                 mountedMapsContext === null || mountedMapsContext === void 0 ? void 0 : mountedMapsContext.onMapUnmount(props.id);
-                mapbox.destroy();
+                if (props.reuseMaps) {
+                    mapbox.recycle();
+                }
+                else {
+                    mapbox.destroy();
+                }
             }
@@ -114,0 +123,0 @@ };

dist/es5/components/marker.js

@@ -28,2 +28,3 @@ "use strict";
 };
+/* eslint-disable complexity,max-statements */
 function Marker(props) {
@@ -30,0 +31,0 @@ var _a = (0, react_1.useContext)(map_1.MapContext), map = _a.map, mapLib = _a.mapLib;

dist/es5/components/popup.js

@@ -36,2 +36,3 @@ "use strict";
 }
+/* eslint-disable complexity,max-statements */
 function Popup(props) {
@@ -38,0 +39,0 @@ var e_1, _a, e_2, _b;

dist/es5/mapbox/mapbox.d.ts

@@ -293,7 +293,10 @@ /// <reference types="mapbox-gl" />
     private _deferredEvents;
-    constructor(MapClass: typeof MapboxMap, props: MapboxProps);
+    static savedMaps: Mapbox[];
+    constructor(MapClass: typeof MapboxMap, props: MapboxProps, container: HTMLDivElement);
     get map(): MapboxMap;
     get transform(): Transform;
     setProps(props: MapboxProps): void;
-    initialize(container: HTMLDivElement): void;
+    static reuse(props: MapboxProps, container: HTMLDivElement): Mapbox;
+    _initialize(container: HTMLDivElement): void;
+    recycle(): void;
     destroy(): void;
@@ -300,0 +303,0 @@ redraw(): void;

dist/es5/mapbox/mapbox.js

@@ -99,3 +99,3 @@ "use strict";
 var Mapbox = /** @class */ (function () {
-    function Mapbox(MapClass, props) {
+    function Mapbox(MapClass, props, container) {
         var _this = this;
@@ -157,2 +157,3 @@ // mapboxgl.Map instance. Not using type here because we are accessing
         this.props = props;
+        this._initialize(container);
     }
@@ -192,3 +193,36 @@ Object.defineProperty(Mapbox.prototype, "map", {
     };
-    Mapbox.prototype.initialize = function (container) {
+    Mapbox.reuse = function (props, container) {
+        var that = Mapbox.savedMaps.pop();
+        if (!that) {
+            return null;
+        }
+        var map = that.map;
+        // When reusing the saved map, we need to reparent the map(canvas) and other child nodes
+        // intoto the new container from the props.
+        // Step1: reparenting child nodes from old container to new container
+        var oldContainer = map.getContainer();
+        container.className = oldContainer.className;
+        while (oldContainer.childNodes.length > 0) {
+            container.appendChild(oldContainer.childNodes[0]);
+        }
+        // Step2: replace the internal container with new container from the react component
+        // @ts-ignore
+        map._container = container;
+        // Step 3: apply new props
+        if (props.initialViewState) {
+            that._updateViewState(props.initialViewState, false);
+        }
+        map.resize();
+        that.setProps(__assign(__assign({}, props), { styleDiffing: false }));
+        // Simulate load event
+        if (map.isStyleLoaded()) {
+            map.fire('load');
+        }
+        else {
+            map.once('styledata', function () { return map.fire('load'); });
+        }
+        return that;
+    };
+    /* eslint-disable complexity,max-statements */
+    Mapbox.prototype._initialize = function (container) {
         var _this = this;
@@ -256,2 +290,6 @@ var props = this.props;
     };
+    /* eslint-enable complexity,max-statements */
+    Mapbox.prototype.recycle = function () {
+        Mapbox.savedMaps.push(this);
+    };
     Mapbox.prototype.destroy = function () {
@@ -510,2 +548,3 @@ this._map.remove();
     };
+    Mapbox.savedMaps = [];
     return Mapbox;
@@ -512,0 +551,0 @@ }());

dist/es5/utils/deep-equal.js

@@ -29,2 +29,3 @@ "use strict";
 exports.arePointsEqual = arePointsEqual;
+/* eslint-disable complexity */
 /**
@@ -31,0 +32,0 @@ * Compare any two objects

dist/es5/utils/transform.js

@@ -20,2 +20,3 @@ "use strict";
 exports.transformToViewState = transformToViewState;
+/* eslint-disable complexity */
 /**
@@ -22,0 +23,0 @@ * Mutate a transform to match the given view state

dist/esm/components/map.d.ts

@@ -15,2 +15,3 @@ /// <reference types="mapbox-gl" />
     mapLib?: any;
+    reuseMaps?: boolean;
     /** Map container id */
@@ -125,2 +126,3 @@ id?: string;
     mapLib?: any;
+    reuseMaps?: boolean;
     /** Map container id */
@@ -127,0 +129,0 @@ id?: string;

dist/esm/components/map.js

@@ -57,4 +57,8 @@ import * as React from 'react';
                 setGlobals(mapboxgl, props);
-                mapbox = new Mapbox(mapboxgl.Map, props);
-                mapbox.initialize(containerRef.current);
+                if (props.reuseMaps) {
+                    mapbox = Mapbox.reuse(props, containerRef.current);
+                }
+                if (!mapbox) {
+                    mapbox = new Mapbox(mapboxgl.Map, props, containerRef.current);
+                }
                 contextValue.map = mapbox.map;
@@ -81,3 +85,8 @@ contextValue.mapLib = mapboxgl;
                 mountedMapsContext?.onMapUnmount(props.id);
-                mapbox.destroy();
+                if (props.reuseMaps) {
+                    mapbox.recycle();
+                }
+                else {
+                    mapbox.destroy();
+                }
             }
@@ -84,0 +93,0 @@ };

dist/esm/components/marker.js

@@ -15,2 +15,3 @@ /* global document */
 };
+/* eslint-disable complexity,max-statements */
 function Marker(props) {
@@ -17,0 +18,0 @@ const { map, mapLib } = useContext(MapContext);

dist/esm/components/popup.js

@@ -12,2 +12,3 @@ /* global document */
 }
+/* eslint-disable complexity,max-statements */
 function Popup(props) {
@@ -14,0 +15,0 @@ const { map, mapLib } = useContext(MapContext);

dist/esm/mapbox/mapbox.d.ts

@@ -293,7 +293,10 @@ /// <reference types="mapbox-gl" />
     private _deferredEvents;
-    constructor(MapClass: typeof MapboxMap, props: MapboxProps);
+    static savedMaps: Mapbox[];
+    constructor(MapClass: typeof MapboxMap, props: MapboxProps, container: HTMLDivElement);
     get map(): MapboxMap;
     get transform(): Transform;
     setProps(props: MapboxProps): void;
-    initialize(container: HTMLDivElement): void;
+    static reuse(props: MapboxProps, container: HTMLDivElement): Mapbox;
+    _initialize(container: HTMLDivElement): void;
+    recycle(): void;
     destroy(): void;
@@ -300,0 +303,0 @@ redraw(): void;

dist/esm/mapbox/mapbox.js

@@ -75,3 +75,3 @@ import { transformToViewState, applyViewStateToTransform } from '../utils/transform';
 export default class Mapbox {
-    constructor(MapClass, props) {
+    constructor(MapClass, props, container) {
         // mapboxgl.Map instance. Not using type here because we are accessing
@@ -132,2 +132,3 @@ // private members and methods
         this.props = props;
+        this._initialize(container);
     }
@@ -159,3 +160,36 @@ get map() {
     }
-    initialize(container) {
+    static reuse(props, container) {
+        const that = Mapbox.savedMaps.pop();
+        if (!that) {
+            return null;
+        }
+        const map = that.map;
+        // When reusing the saved map, we need to reparent the map(canvas) and other child nodes
+        // intoto the new container from the props.
+        // Step1: reparenting child nodes from old container to new container
+        const oldContainer = map.getContainer();
+        container.className = oldContainer.className;
+        while (oldContainer.childNodes.length > 0) {
+            container.appendChild(oldContainer.childNodes[0]);
+        }
+        // Step2: replace the internal container with new container from the react component
+        // @ts-ignore
+        map._container = container;
+        // Step 3: apply new props
+        if (props.initialViewState) {
+            that._updateViewState(props.initialViewState, false);
+        }
+        map.resize();
+        that.setProps({ ...props, styleDiffing: false });
+        // Simulate load event
+        if (map.isStyleLoaded()) {
+            map.fire('load');
+        }
+        else {
+            map.once('styledata', () => map.fire('load'));
+        }
+        return that;
+    }
+    /* eslint-disable complexity,max-statements */
+    _initialize(container) {
         const { props } = this;
@@ -228,2 +262,6 @@ const mapOptions = {
     }
+    /* eslint-enable complexity,max-statements */
+    recycle() {
+        Mapbox.savedMaps.push(this);
+    }
     destroy() {
@@ -462,2 +500,3 @@ this._map.remove();
 }
+Mapbox.savedMaps = [];
 /**
@@ -464,0 +503,0 @@ * Access token can be provided via one of:

dist/esm/utils/deep-equal.js

@@ -14,2 +14,3 @@ /**
 }
+/* eslint-disable complexity */
 /**
@@ -16,0 +17,0 @@ * Compare any two objects

dist/esm/utils/transform.js

@@ -16,2 +16,3 @@ /**
 }
+/* eslint-disable complexity */
 /**
@@ -18,0 +19,0 @@ * Mutate a transform to match the given view state

package.json

 {
   "name": "react-map-gl",
   "description": "React components for Mapbox GL JS-compatible libraries",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "keywords": [
@@ -6,0 +6,0 @@ "mapbox",

README.md

@@ -57,5 +57,3 @@ <p align="right">
 
-But we would recommend using something like [dotenv](https://github.com/motdotla/dotenv) and put your key in an untracked `.env` file, that will then expose it as a `process.env` variable, with much less leaking risks.
 
-
 ### Contribute
@@ -62,0 +60,0 @@

src/components/marker.ts

@@ -76,2 +76,3 @@ /* global document */
 
+/* eslint-disable complexity,max-statements */
 function Marker(props: MarkerProps) {
@@ -78,0 +79,0 @@ const {map, mapLib} = useContext(MapContext);

src/components/popup.ts

@@ -72,2 +72,3 @@ /* global document */
 
+/* eslint-disable complexity,max-statements */
 function Popup(props: PopupProps) {
@@ -74,0 +75,0 @@ const {map, mapLib} = useContext(MapContext);

src/mapbox/mapbox.ts

@@ -432,5 +432,8 @@ import {transformToViewState, applyViewStateToTransform} from '../utils/transform';
 
-  constructor(MapClass: typeof MapboxMap, props: MapboxProps) {
+  static savedMaps: Mapbox[] = [];
+
+  constructor(MapClass: typeof MapboxMap, props: MapboxProps, container: HTMLDivElement) {
     this._MapClass = MapClass;
     this.props = props;
+    this._initialize(container);
   }
@@ -468,3 +471,39 @@
 
-  initialize(container: HTMLDivElement) {
+  static reuse(props: MapboxProps, container: HTMLDivElement) {
+    const that = Mapbox.savedMaps.pop();
+    if (!that) {
+      return null;
+    }
+
+    const map = that.map;
+    // When reusing the saved map, we need to reparent the map(canvas) and other child nodes
+    // intoto the new container from the props.
+    // Step1: reparenting child nodes from old container to new container
+    const oldContainer = map.getContainer();
+    container.className = oldContainer.className;
+    while (oldContainer.childNodes.length > 0) {
+      container.appendChild(oldContainer.childNodes[0]);
+    }
+    // Step2: replace the internal container with new container from the react component
+    // @ts-ignore
+    map._container = container;
+
+    // Step 3: apply new props
+    if (props.initialViewState) {
+      that._updateViewState(props.initialViewState, false);
+    }
+    map.resize();
+    that.setProps({...props, styleDiffing: false});
+
+    // Simulate load event
+    if (map.isStyleLoaded()) {
+      map.fire('load');
+    } else {
+      map.once('styledata', () => map.fire('load'));
+    }
+    return that;
+  }
+
+  /* eslint-disable complexity,max-statements */
+  _initialize(container: HTMLDivElement) {
     const {props} = this;
@@ -542,3 +581,8 @@ const mapOptions = {
   }
+  /* eslint-enable complexity,max-statements */
 
+  recycle() {
+    Mapbox.savedMaps.push(this);
+  }
+
   destroy() {
@@ -545,0 +589,0 @@ this._map.remove();

src/utils/deep-equal.ts

@@ -17,2 +17,3 @@ import type {PointLike} from '../types';
 
+/* eslint-disable complexity */
 /**
@@ -19,0 +20,0 @@ * Compare any two objects

src/utils/transform.ts

@@ -20,2 +20,3 @@ import type {MapboxProps} from '../mapbox/mapbox';
 
+/* eslint-disable complexity */
 /**
@@ -22,0 +23,0 @@ * Mutate a transform to match the given view state

No alert changes

Improved metrics

Total package byte prevSize

423885

increased by2.08%

Lines of code

7510

increased by2.25%

Worsened metrics

Number of lines in readme file

70

decreased by-2.78%

No dependency changes