Skip to content

Commit c632fc4

Browse files
Merge pull request #214 from yuzhva:feat/support_esm
feat: support esm
2 parents a41f635 + e78ae07 commit c632fc4

File tree

6 files changed

+312
-20
lines changed

6 files changed

+312
-20
lines changed

.storybook/examples/region.jsx

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import { Polygon } from "leaflet";
33
import { createPathComponent } from "@react-leaflet/core";
4-
import { MapContainer, TileLayer } from "react-leaflet";
4+
import { MapContainer, TileLayer, Popup } from "react-leaflet";
55
import MarkerClusterGroup from "../../src/react-leaflet-markercluster";
66
import { MAP_ZOOM, MAP_MAX_ZOOM, MAP_CENTER_COORDINATES } from "./constants";
77
import "./styles.scss";
@@ -11,7 +11,7 @@ function randomCoords() {
1111
}
1212

1313
const ClusterableRegion = createPathComponent(function createClusterableRegion(
14-
{ coordinates, color = "blue", fillOpacity = 0.3, onClick },
14+
{ latlngs, color = "blue", fillOpacity = 0.3, ...props },
1515
ctx,
1616
) {
1717
// Define a clusterable region with a getLatLng method for clustering compatibility
@@ -28,10 +28,10 @@ const ClusterableRegion = createPathComponent(function createClusterableRegion(
2828
});
2929

3030
// Instantiate the ClusterablePolygon with provided positions and options
31-
const region = new ClusterableRegion(coordinates, {
31+
const region = new ClusterableRegion(latlngs, {
3232
color,
3333
fillOpacity,
34-
onclick: onClick,
34+
...props,
3535
});
3636

3737
return {
@@ -61,7 +61,7 @@ const RegionExample = () => (
6161
return (
6262
<ClusterableRegion
6363
key={i}
64-
coordinates={[
64+
latlngs={[
6565
centerCoords,
6666
[
6767
centerCoords[0] - Math.random(),
@@ -76,7 +76,30 @@ const RegionExample = () => (
7676
centerCoords[1] + Math.random(),
7777
],
7878
]}
79-
/>
79+
eventHandlers={{
80+
click: () => {
81+
console.log(`Region ${i} clicked`);
82+
},
83+
mouseover: (event) => {
84+
event.target.openPopup();
85+
},
86+
mouseout: (event) => {
87+
const target = event.target;
88+
if (
89+
target._popup &&
90+
target._popup._container.contains(
91+
//@ts-expect-error - toElement not recognized by TS
92+
event.originalEvent.toElement,
93+
)
94+
) {
95+
return;
96+
}
97+
target.closePopup();
98+
},
99+
}}
100+
>
101+
<Popup>Region {i}</Popup>
102+
</ClusterableRegion>
80103
);
81104
})}
82105
</MarkerClusterGroup>

babel.config.js

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
1+
// eslint-disable-next-line no-undef
2+
const isESM = process.env.BABEL_ENV === "esm";
3+
14
const babelConfig = {
25
presets: [
36
[
4-
'@babel/preset-env',
7+
"@babel/preset-env",
58
{
9+
modules: isESM ? false : "commonjs",
610
targets: {
7-
node: 'current',
8-
chrome: '60',
9-
firefox: '60',
10-
safari: '11.1',
11-
edge: '17',
12-
ie: '11',
11+
node: "current",
12+
chrome: "60",
13+
firefox: "60",
14+
safari: "11.1",
15+
edge: "17",
16+
ie: "11",
1317
},
1418
},
1519
],
16-
'@babel/preset-react',
20+
"@babel/preset-react",
1721
],
1822
};
1923

20-
module.exports = babelConfig;
24+
export default babelConfig;

dist/index.js renamed to dist/cjs/index.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
"use strict";
2+
23
function _typeof(o) {
34
"@babel/helpers - typeof";
45
return (
@@ -18,7 +19,9 @@ function _typeof(o) {
1819
_typeof(o)
1920
);
2021
}
21-
Object.defineProperty(exports, "__esModule", { value: true });
22+
Object.defineProperty(exports, "__esModule", {
23+
value: true,
24+
});
2225
exports.default = void 0;
2326
var _core = require("@react-leaflet/core");
2427
var _leaflet = _interopRequireDefault(require("leaflet"));
@@ -196,6 +199,8 @@ function createMarkerCluster(_ref, context) {
196199
props = _objectWithoutProperties(_ref, _excluded);
197200
var clusterProps = {};
198201
var clusterEvents = {};
202+
203+
// Splitting props and events to different objects
199204
Object.entries(props).forEach(function (_ref2) {
200205
var _ref3 = _slicedToArray(_ref2, 2),
201206
propName = _ref3[0],
@@ -205,6 +210,8 @@ function createMarkerCluster(_ref, context) {
205210
: (clusterProps[propName] = prop);
206211
});
207212
var instance = new _leaflet.default.MarkerClusterGroup(clusterProps);
213+
214+
// Initializing event listeners
208215
Object.entries(clusterEvents).forEach(function (_ref4) {
209216
var _ref5 = _slicedToArray(_ref4, 2),
210217
eventAsProp = _ref5[0],
@@ -217,7 +224,9 @@ function createMarkerCluster(_ref, context) {
217224
context: _objectSpread(
218225
_objectSpread({}, context),
219226
{},
220-
{ layerContainer: instance },
227+
{
228+
layerContainer: instance,
229+
},
221230
),
222231
};
223232
}

dist/esm/index.js

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
function _typeof(o) {
2+
"@babel/helpers - typeof";
3+
return (
4+
(_typeof =
5+
"function" == typeof Symbol && "symbol" == typeof Symbol.iterator
6+
? function (o) {
7+
return typeof o;
8+
}
9+
: function (o) {
10+
return o &&
11+
"function" == typeof Symbol &&
12+
o.constructor === Symbol &&
13+
o !== Symbol.prototype
14+
? "symbol"
15+
: typeof o;
16+
}),
17+
_typeof(o)
18+
);
19+
}
20+
var _excluded = ["children"];
21+
function ownKeys(e, r) {
22+
var t = Object.keys(e);
23+
if (Object.getOwnPropertySymbols) {
24+
var o = Object.getOwnPropertySymbols(e);
25+
r &&
26+
(o = o.filter(function (r) {
27+
return Object.getOwnPropertyDescriptor(e, r).enumerable;
28+
})),
29+
t.push.apply(t, o);
30+
}
31+
return t;
32+
}
33+
function _objectSpread(e) {
34+
for (var r = 1; r < arguments.length; r++) {
35+
var t = null != arguments[r] ? arguments[r] : {};
36+
r % 2
37+
? ownKeys(Object(t), !0).forEach(function (r) {
38+
_defineProperty(e, r, t[r]);
39+
})
40+
: Object.getOwnPropertyDescriptors
41+
? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t))
42+
: ownKeys(Object(t)).forEach(function (r) {
43+
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
44+
});
45+
}
46+
return e;
47+
}
48+
function _defineProperty(e, r, t) {
49+
return (
50+
(r = _toPropertyKey(r)) in e
51+
? Object.defineProperty(e, r, {
52+
value: t,
53+
enumerable: !0,
54+
configurable: !0,
55+
writable: !0,
56+
})
57+
: (e[r] = t),
58+
e
59+
);
60+
}
61+
function _toPropertyKey(t) {
62+
var i = _toPrimitive(t, "string");
63+
return "symbol" == _typeof(i) ? i : i + "";
64+
}
65+
function _toPrimitive(t, r) {
66+
if ("object" != _typeof(t) || !t) return t;
67+
var e = t[Symbol.toPrimitive];
68+
if (void 0 !== e) {
69+
var i = e.call(t, r || "default");
70+
if ("object" != _typeof(i)) return i;
71+
throw new TypeError("@@toPrimitive must return a primitive value.");
72+
}
73+
return ("string" === r ? String : Number)(t);
74+
}
75+
function _slicedToArray(r, e) {
76+
return (
77+
_arrayWithHoles(r) ||
78+
_iterableToArrayLimit(r, e) ||
79+
_unsupportedIterableToArray(r, e) ||
80+
_nonIterableRest()
81+
);
82+
}
83+
function _nonIterableRest() {
84+
throw new TypeError(
85+
"Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.",
86+
);
87+
}
88+
function _unsupportedIterableToArray(r, a) {
89+
if (r) {
90+
if ("string" == typeof r) return _arrayLikeToArray(r, a);
91+
var t = {}.toString.call(r).slice(8, -1);
92+
return (
93+
"Object" === t && r.constructor && (t = r.constructor.name),
94+
"Map" === t || "Set" === t
95+
? Array.from(r)
96+
: "Arguments" === t ||
97+
/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)
98+
? _arrayLikeToArray(r, a)
99+
: void 0
100+
);
101+
}
102+
}
103+
function _arrayLikeToArray(r, a) {
104+
(null == a || a > r.length) && (a = r.length);
105+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
106+
return n;
107+
}
108+
function _iterableToArrayLimit(r, l) {
109+
var t =
110+
null == r
111+
? null
112+
: ("undefined" != typeof Symbol && r[Symbol.iterator]) || r["@@iterator"];
113+
if (null != t) {
114+
var e,
115+
n,
116+
i,
117+
u,
118+
a = [],
119+
f = !0,
120+
o = !1;
121+
try {
122+
if (((i = (t = t.call(r)).next), 0 === l)) {
123+
if (Object(t) !== t) return;
124+
f = !1;
125+
} else
126+
for (
127+
;
128+
!(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l);
129+
f = !0
130+
);
131+
} catch (r) {
132+
(o = !0), (n = r);
133+
} finally {
134+
try {
135+
if (!f && null != t.return && ((u = t.return()), Object(u) !== u))
136+
return;
137+
} finally {
138+
if (o) throw n;
139+
}
140+
}
141+
return a;
142+
}
143+
}
144+
function _arrayWithHoles(r) {
145+
if (Array.isArray(r)) return r;
146+
}
147+
function _objectWithoutProperties(e, t) {
148+
if (null == e) return {};
149+
var o,
150+
r,
151+
i = _objectWithoutPropertiesLoose(e, t);
152+
if (Object.getOwnPropertySymbols) {
153+
var s = Object.getOwnPropertySymbols(e);
154+
for (r = 0; r < s.length; r++)
155+
(o = s[r]),
156+
t.includes(o) || ({}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]));
157+
}
158+
return i;
159+
}
160+
function _objectWithoutPropertiesLoose(r, e) {
161+
if (null == r) return {};
162+
var t = {};
163+
for (var n in r)
164+
if ({}.hasOwnProperty.call(r, n)) {
165+
if (e.includes(n)) continue;
166+
t[n] = r[n];
167+
}
168+
return t;
169+
}
170+
import { createPathComponent } from "@react-leaflet/core";
171+
import L from "leaflet";
172+
import "leaflet.markercluster";
173+
L.MarkerClusterGroup.include({
174+
_flushLayerBuffer: function _flushLayerBuffer() {
175+
this.addLayers(this._layerBuffer);
176+
this._layerBuffer = [];
177+
},
178+
addLayer: function addLayer(layer) {
179+
if (this._layerBuffer.length === 0) {
180+
setTimeout(this._flushLayerBuffer.bind(this), 50);
181+
}
182+
this._layerBuffer.push(layer);
183+
},
184+
});
185+
L.MarkerClusterGroup.addInitHook(function () {
186+
this._layerBuffer = [];
187+
});
188+
function createMarkerCluster(_ref, context) {
189+
var _c = _ref.children,
190+
props = _objectWithoutProperties(_ref, _excluded);
191+
var clusterProps = {};
192+
var clusterEvents = {};
193+
194+
// Splitting props and events to different objects
195+
Object.entries(props).forEach(function (_ref2) {
196+
var _ref3 = _slicedToArray(_ref2, 2),
197+
propName = _ref3[0],
198+
prop = _ref3[1];
199+
return propName.startsWith("on")
200+
? (clusterEvents[propName] = prop)
201+
: (clusterProps[propName] = prop);
202+
});
203+
var instance = new L.MarkerClusterGroup(clusterProps);
204+
205+
// Initializing event listeners
206+
Object.entries(clusterEvents).forEach(function (_ref4) {
207+
var _ref5 = _slicedToArray(_ref4, 2),
208+
eventAsProp = _ref5[0],
209+
callback = _ref5[1];
210+
var clusterEvent = "cluster".concat(eventAsProp.substring(2).toLowerCase());
211+
instance.on(clusterEvent, callback);
212+
});
213+
return {
214+
instance: instance,
215+
context: _objectSpread(
216+
_objectSpread({}, context),
217+
{},
218+
{
219+
layerContainer: instance,
220+
},
221+
),
222+
};
223+
}
224+
var MarkerCluster = createPathComponent(createMarkerCluster);
225+
export default MarkerCluster;

0 commit comments

Comments
 (0)