react-leaflet-cluster - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

lib/index.d.ts

@@ -0,7 +1,7 @@
+import React from 'react';
 import L, { LeafletMouseEventHandlerFn } from 'leaflet';
 import 'leaflet.markercluster';
-import 'leaflet.markercluster/dist/MarkerCluster.css';
-import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
-import React from 'react';
-declare type ClusterEvents = {
+import './assets/MarkerCluster.css';
+import './assets/MarkerCluster.Default.css';
+type ClusterEvents = {
     onClick?: LeafletMouseEventHandlerFn;
@@ -8,0 +8,0 @@ onDblClick?: LeafletMouseEventHandlerFn;

lib/index.js

@@ -31,11 +31,9 @@ "use strict";
 require("leaflet.markercluster");
-require("leaflet.markercluster/dist/MarkerCluster.css");
-require("leaflet.markercluster/dist/MarkerCluster.Default.css");
-var react_1 = require("react");
-//webpack failing when loading leaflet marker icon
+require("./assets/MarkerCluster.css");
+require("./assets/MarkerCluster.Default.css");
 delete leaflet_1.default.Icon.Default.prototype._getIconUrl;
 leaflet_1.default.Icon.Default.mergeOptions({
-    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png').default,
-    iconUrl: require('leaflet/dist/images/marker-icon.png').default,
-    shadowUrl: require('leaflet/dist/images/marker-shadow.png').default,
+    iconRetinaUrl: require('./assets/marker-icon-2x.png').default,
+    iconUrl: require('./assets/marker-icon.png').default,
+    shadowUrl: require('./assets/marker-shadow.png').default,
 });
@@ -59,32 +57,21 @@ function getPropsAndEvents(props) {
     });
-    return [clusterProps, clusterEvents];
+    return { clusterProps: clusterProps, clusterEvents: clusterEvents };
 }
-function createMarkerCluster(props, context) {
-    var _a = getPropsAndEvents(props), clusterProps = _a[0], clusterEvents = _a[1];
-    var clusterGroup = new leaflet_1.default.MarkerClusterGroup(clusterProps);
-    (0, react_1.useEffect)(function () {
-        Object.entries(clusterEvents).forEach(function (_a) {
-            var eventAsProp = _a[0], callback = _a[1];
-            var clusterEvent = "cluster".concat(eventAsProp.substring(2).toLowerCase());
-            clusterGroup.on(clusterEvent, callback);
-        });
-        return function () {
-            Object.entries(clusterEvents).forEach(function (_a) {
-                var eventAsProp = _a[0];
-                var clusterEvent = "cluster".concat(eventAsProp.substring(2).toLowerCase());
-                clusterGroup.removeEventListener(clusterEvent);
-            });
-        };
-    }, [clusterEvents, clusterGroup]);
-    return {
-        instance: clusterGroup,
-        context: __assign(__assign({}, context), { layerContainer: clusterGroup }),
-    };
+function createMarkerClusterGroup(props, context) {
+    var _a = getPropsAndEvents(props), clusterProps = _a.clusterProps, clusterEvents = _a.clusterEvents;
+    var markerClusterGroup = new leaflet_1.default.MarkerClusterGroup(clusterProps);
+    Object.entries(clusterEvents).forEach(function (_a) {
+        var eventAsProp = _a[0], callback = _a[1];
+        var clusterEvent = "cluster".concat(eventAsProp.substring(2).toLowerCase());
+        markerClusterGroup.on(clusterEvent, callback);
+    });
+    return (0, core_1.createElementObject)(markerClusterGroup, (0, core_1.extendContext)(context, { layerContainer: markerClusterGroup }));
 }
 var updateMarkerCluster = function (instance, props, prevProps) {
     //TODO when prop change update instance
-    if (props.showCoverageOnHover !== prevProps.showCoverageOnHover) {
-    }
+    //   if (props. !== prevProps.center || props.size !== prevProps.size) {
+    //   instance.setBounds(getBounds(props))
+    // }
 };
-var MarkerClusterGroup = (0, core_1.createPathComponent)(createMarkerCluster, updateMarkerCluster);
+var MarkerClusterGroup = (0, core_1.createPathComponent)(createMarkerClusterGroup, updateMarkerCluster);
 exports.default = MarkerClusterGroup;

lib/index.min.js

@@ -1,1 +0,1 @@
-"use strict";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var r,t=1,a=arguments.length;t<a;t++)for(var n in r=arguments[t])Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);return e}).apply(this,arguments)},__rest=this&&this.__rest||function(e,r){var t={};for(n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var a=0,n=Object.getOwnPropertySymbols(e);a<n.length;a++)r.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(t[n[a]]=e[n[a]]);return t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}},core_1=(Object.defineProperty(exports,"__esModule",{value:!0}),require("@react-leaflet/core")),leaflet_1=__importDefault(require("leaflet")),react_1=(require("leaflet.markercluster"),require("leaflet.markercluster/dist/MarkerCluster.css"),require("leaflet.markercluster/dist/MarkerCluster.Default.css"),require("react"));function getPropsAndEvents(e){var a={},n={},e=(e.children,__rest(e,["children"]));return Object.entries(e).forEach(function(e){var r,t=e[0],e=e[1];t.startsWith("on")?n=__assign(__assign({},n),((r={})[t]=e,r)):a=__assign(__assign({},a),((r={})[t]=e,r))}),[a,n]}function createMarkerCluster(e,r){var e=getPropsAndEvents(e),t=e[0],a=e[1],n=new leaflet_1.default.MarkerClusterGroup(t);return(0,react_1.useEffect)(function(){return Object.entries(a).forEach(function(e){var r=e[0],e=e[1],r="cluster".concat(r.substring(2).toLowerCase());n.on(r,e)}),function(){Object.entries(a).forEach(function(e){e=e[0],e="cluster".concat(e.substring(2).toLowerCase());n.removeEventListener(e)})}},[a,n]),{instance:n,context:__assign(__assign({},r),{layerContainer:n})}}delete leaflet_1.default.Icon.Default.prototype._getIconUrl,leaflet_1.default.Icon.Default.mergeOptions({iconRetinaUrl:require("leaflet/dist/images/marker-icon-2x.png").default,iconUrl:require("leaflet/dist/images/marker-icon.png").default,shadowUrl:require("leaflet/dist/images/marker-shadow.png").default});var updateMarkerCluster=function(e,r,t){r.showCoverageOnHover,t.showCoverageOnHover},MarkerClusterGroup=(0,core_1.createPathComponent)(createMarkerCluster,updateMarkerCluster);exports.default=MarkerClusterGroup;
+"use strict";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var r,t=1,s=arguments.length;t<s;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e}).apply(this,arguments)},__rest=this&&this.__rest||function(e,r){var t={};for(a in e)Object.prototype.hasOwnProperty.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var s=0,a=Object.getOwnPropertySymbols(e);s<a.length;s++)r.indexOf(a[s])<0&&Object.prototype.propertyIsEnumerable.call(e,a[s])&&(t[a[s]]=e[a[s]]);return t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}},core_1=(Object.defineProperty(exports,"__esModule",{value:!0}),require("@react-leaflet/core")),leaflet_1=__importDefault(require("leaflet"));function getPropsAndEvents(e){var s={},a={},e=(e.children,__rest(e,["children"]));return Object.entries(e).forEach(function(e){var r,t=e[0],e=e[1];t.startsWith("on")?a=__assign(__assign({},a),((r={})[t]=e,r)):s=__assign(__assign({},s),((r={})[t]=e,r))}),{clusterProps:s,clusterEvents:a}}function createMarkerClusterGroup(e,r){var e=getPropsAndEvents(e),t=e.clusterProps,e=e.clusterEvents,s=new leaflet_1.default.MarkerClusterGroup(t);return Object.entries(e).forEach(function(e){var r=e[0],e=e[1],r="cluster".concat(r.substring(2).toLowerCase());s.on(r,e)}),(0,core_1.createElementObject)(s,(0,core_1.extendContext)(r,{layerContainer:s}))}require("leaflet.markercluster"),require("./assets/MarkerCluster.css"),require("./assets/MarkerCluster.Default.css"),delete leaflet_1.default.Icon.Default.prototype._getIconUrl,leaflet_1.default.Icon.Default.mergeOptions({iconRetinaUrl:require("./assets/marker-icon-2x.png").default,iconUrl:require("./assets/marker-icon.png").default,shadowUrl:require("./assets/marker-shadow.png").default});var updateMarkerCluster=function(e,r,t){},MarkerClusterGroup=(0,core_1.createPathComponent)(createMarkerClusterGroup,updateMarkerCluster);exports.default=MarkerClusterGroup;

package.json

 {
   "name": "react-leaflet-cluster",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React-leaflet-cluster is a plugin for react-leaflet. A wrapper component of Leaflet.markercluster.",
@@ -14,10 +14,11 @@ "main": "lib/index.js",
   "scripts": {
-    "build": "tsc && npm run minify",
+    "build": "tsc && npm run minify && npm run copy:assets",
     "minify": "uglifyjs --compress --mangle --output lib/index.min.js -- lib/index.js",
     "format": "prettier --write \"src/**/*.tsx\"",
     "lint": "tslint -p tsconfig.json",
-    "prepublishOnly": "npm test && npm run lint",
+    "prepublishOnly": "npm run lint",
     "preversion": "npm run lint",
     "version": "npm run format && git add -A src",
-    "postversion": "git push && git push --tags"
+    "postversion": "git push && git push --tags",
+    "copy:assets": "cpx 'src/assets/**' 'lib/assets'"
   },
@@ -41,2 +42,3 @@ "dependencies": {
     "@typescript-eslint/parser": "^4.33.0",
+    "cpx": "^1.5.0",
     "eslint": "^7.32.0",
@@ -43,0 +45,0 @@ "eslint-loader": "^4.0.2",

README.md

 # react-leaflet-cluster [![npm version](https://img.shields.io/npm/v/react-leaflet-cluster.svg)](https://www.npmjs.com/package/react-leaflet-cluster)
 
-- [x] React-leaflet v3 support
+- [x] React-leaflet v4 support
 - [x] Typescript support
@@ -24,5 +24,5 @@
 ```json
-"react": "16.x",
-"leaflet": "1.7.x",
-"react-leaflet": "3.0.x"
+"react": "18.x",
+"leaflet": "1.8.x",
+"react-leaflet": "4.0.x"
 ```
@@ -29,0 +29,0 @@

No alert changes

Improved metrics

Total package byte prevSize

18061

increased by53.89%

Number of package files

11

increased by83.33%

Lines of code

159

increased by50%

Worsened metrics

Dev dependency count

23

increased by4.55%

No dependency changes