feat: support esm

.storybook/examples/region.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Polygon } from "leaflet";
 import { createPathComponent } from "@react-leaflet/core";
-import { MapContainer, TileLayer } from "react-leaflet";
+import { MapContainer, TileLayer, Popup } from "react-leaflet";
 import MarkerClusterGroup from "../../src/react-leaflet-markercluster";
 import { MAP_ZOOM, MAP_MAX_ZOOM, MAP_CENTER_COORDINATES } from "./constants";
 import "./styles.scss";
@@ -11,7 +11,7 @@ function randomCoords() {
 }
 
 const ClusterableRegion = createPathComponent(function createClusterableRegion(
-  { coordinates, color = "blue", fillOpacity = 0.3, onClick },
+  { latlngs, color = "blue", fillOpacity = 0.3, ...props },
   ctx,
 ) {
   // Define a clusterable region with a getLatLng method for clustering compatibility
@@ -28,10 +28,10 @@ const ClusterableRegion = createPathComponent(function createClusterableRegion(
   });
 
   // Instantiate the ClusterablePolygon with provided positions and options
-  const region = new ClusterableRegion(coordinates, {
+  const region = new ClusterableRegion(latlngs, {
     color,
     fillOpacity,
-    onclick: onClick,
+    ...props,
   });
 
   return {
@@ -61,7 +61,7 @@ const RegionExample = () => (
         return (
           <ClusterableRegion
             key={i}
-            coordinates={[
+            latlngs={[
               centerCoords,
               [
                 centerCoords[0] - Math.random(),
@@ -76,7 +76,30 @@ const RegionExample = () => (
                 centerCoords[1] + Math.random(),
               ],
             ]}
-          />
+            eventHandlers={{
+              click: () => {
+                console.log(`Region ${i} clicked`);
+              },
+              mouseover: (event) => {
+                event.target.openPopup();
+              },
+              mouseout: (event) => {
+                const target = event.target;
+                if (
+                  target._popup &&
+                  target._popup._container.contains(
+                    //@ts-expect-error - toElement not recognized by TS
+                    event.originalEvent.toElement,
+                  )
+                ) {
+                  return;
+                }
+                target.closePopup();
+              },
+            }}
+          >
+            <Popup>Region {i}</Popup>
+          </ClusterableRegion>
         );
       })}
     </MarkerClusterGroup>

babel.config.js

@@ -1,20 +1,24 @@
+// eslint-disable-next-line no-undef
+const isESM = process.env.BABEL_ENV === "esm";
+
 const babelConfig = {
   presets: [
     [
-      '@babel/preset-env',
+      "@babel/preset-env",
       {
+        modules: isESM ? false : "commonjs",
         targets: {
-          node: 'current',
-          chrome: '60',
-          firefox: '60',
-          safari: '11.1',
-          edge: '17',
-          ie: '11',
+          node: "current",
+          chrome: "60",
+          firefox: "60",
+          safari: "11.1",
+          edge: "17",
+          ie: "11",
         },
       },
     ],
-    '@babel/preset-react',
+    "@babel/preset-react",
   ],
 };
 
-module.exports = babelConfig;
+export default babelConfig;

dist/index.js → dist/cjs/index.js

@@ -1,4 +1,5 @@
 "use strict";
+
 function _typeof(o) {
   "@babel/helpers - typeof";
   return (
@@ -18,7 +19,9 @@ function _typeof(o) {
     _typeof(o)
   );
 }
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
 exports.default = void 0;
 var _core = require("@react-leaflet/core");
 var _leaflet = _interopRequireDefault(require("leaflet"));
@@ -196,6 +199,8 @@ function createMarkerCluster(_ref, context) {
     props = _objectWithoutProperties(_ref, _excluded);
   var clusterProps = {};
   var clusterEvents = {};
+
+  // Splitting props and events to different objects
   Object.entries(props).forEach(function (_ref2) {
     var _ref3 = _slicedToArray(_ref2, 2),
       propName = _ref3[0],
@@ -205,6 +210,8 @@ function createMarkerCluster(_ref, context) {
       : (clusterProps[propName] = prop);
   });
   var instance = new _leaflet.default.MarkerClusterGroup(clusterProps);
+
+  // Initializing event listeners
   Object.entries(clusterEvents).forEach(function (_ref4) {
     var _ref5 = _slicedToArray(_ref4, 2),
       eventAsProp = _ref5[0],
@@ -217,7 +224,9 @@ function createMarkerCluster(_ref, context) {
     context: _objectSpread(
       _objectSpread({}, context),
       {},
-      { layerContainer: instance },
+      {
+        layerContainer: instance,
+      },
     ),
   };
 }

dist/esm/index.js

@@ -0,0 +1,225 @@
+function _typeof(o) {
+  "@babel/helpers - typeof";
+  return (
+    (_typeof =
+      "function" == typeof Symbol && "symbol" == typeof Symbol.iterator
+        ? function (o) {
+            return typeof o;
+          }
+        : function (o) {
+            return o &&
+              "function" == typeof Symbol &&
+              o.constructor === Symbol &&
+              o !== Symbol.prototype
+              ? "symbol"
+              : typeof o;
+          }),
+    _typeof(o)
+  );
+}
+var _excluded = ["children"];
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r &&
+      (o = o.filter(function (r) {
+        return Object.getOwnPropertyDescriptor(e, r).enumerable;
+      })),
+      t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2
+      ? ownKeys(Object(t), !0).forEach(function (r) {
+          _defineProperty(e, r, t[r]);
+        })
+      : Object.getOwnPropertyDescriptors
+        ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t))
+        : ownKeys(Object(t)).forEach(function (r) {
+            Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+          });
+  }
+  return e;
+}
+function _defineProperty(e, r, t) {
+  return (
+    (r = _toPropertyKey(r)) in e
+      ? Object.defineProperty(e, r, {
+          value: t,
+          enumerable: !0,
+          configurable: !0,
+          writable: !0,
+        })
+      : (e[r] = t),
+    e
+  );
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : i + "";
+}
+function _toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != _typeof(i)) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _slicedToArray(r, e) {
+  return (
+    _arrayWithHoles(r) ||
+    _iterableToArrayLimit(r, e) ||
+    _unsupportedIterableToArray(r, e) ||
+    _nonIterableRest()
+  );
+}
+function _nonIterableRest() {
+  throw new TypeError(
+    "Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.",
+  );
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return (
+      "Object" === t && r.constructor && (t = r.constructor.name),
+      "Map" === t || "Set" === t
+        ? Array.from(r)
+        : "Arguments" === t ||
+            /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)
+          ? _arrayLikeToArray(r, a)
+          : void 0
+    );
+  }
+}
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _iterableToArrayLimit(r, l) {
+  var t =
+    null == r
+      ? null
+      : ("undefined" != typeof Symbol && r[Symbol.iterator]) || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (((i = (t = t.call(r)).next), 0 === l)) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else
+        for (
+          ;
+          !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l);
+          f = !0
+        );
+    } catch (r) {
+      (o = !0), (n = r);
+    } finally {
+      try {
+        if (!f && null != t.return && ((u = t.return()), Object(u) !== u))
+          return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var s = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < s.length; r++)
+      (o = s[r]),
+        t.includes(o) || ({}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]));
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r)
+    if ({}.hasOwnProperty.call(r, n)) {
+      if (e.includes(n)) continue;
+      t[n] = r[n];
+    }
+  return t;
+}
+import { createPathComponent } from "@react-leaflet/core";
+import L from "leaflet";
+import "leaflet.markercluster";
+L.MarkerClusterGroup.include({
+  _flushLayerBuffer: function _flushLayerBuffer() {
+    this.addLayers(this._layerBuffer);
+    this._layerBuffer = [];
+  },
+  addLayer: function addLayer(layer) {
+    if (this._layerBuffer.length === 0) {
+      setTimeout(this._flushLayerBuffer.bind(this), 50);
+    }
+    this._layerBuffer.push(layer);
+  },
+});
+L.MarkerClusterGroup.addInitHook(function () {
+  this._layerBuffer = [];
+});
+function createMarkerCluster(_ref, context) {
+  var _c = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var clusterProps = {};
+  var clusterEvents = {};
+
+  // Splitting props and events to different objects
+  Object.entries(props).forEach(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      propName = _ref3[0],
+      prop = _ref3[1];
+    return propName.startsWith("on")
+      ? (clusterEvents[propName] = prop)
+      : (clusterProps[propName] = prop);
+  });
+  var instance = new L.MarkerClusterGroup(clusterProps);
+
+  // Initializing event listeners
+  Object.entries(clusterEvents).forEach(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+      eventAsProp = _ref5[0],
+      callback = _ref5[1];
+    var clusterEvent = "cluster".concat(eventAsProp.substring(2).toLowerCase());
+    instance.on(clusterEvent, callback);
+  });
+  return {
+    instance: instance,
+    context: _objectSpread(
+      _objectSpread({}, context),
+      {},
+      {
+        layerContainer: instance,
+      },
+    ),
+  };
+}
+var MarkerCluster = createPathComponent(createMarkerCluster);
+export default MarkerCluster;