update instance when prop changes

Author: akursat

CONTRIBUTING.md

@@ -1,25 +1,2 @@
 ## Prerequisites
-
-[Node.js](http://nodejs.org/) >= 10 must be installed.
-
-## Installation
-
-- Running `npm install` in the component's root directory will install everything you need for development.
-
-## Demo Development Server
-
-- `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
-
-## Running Tests
-
-- `npm test` will run the tests once.
-
-- `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
-
-- `npm run test:watch` will run the tests on every change.
-
-## Building
-
-- `npm run build` will build the component for publishing to npm and also bundle the demo app.
-
-- `npm run clean` will delete built resources.
+Build package locally and test it with example project with `npm link` command.

dist/index.js

@@ -32,6 +32,21 @@ function createMarkerClusterGroup(props, context) {
   );
 }
 var updateMarkerCluster = (instance, props, prevProps) => {
+  const { clusterProps, clusterEvents } = getPropsAndEvents(props);
+  const { clusterProps: prevClusterProps, clusterEvents: prevClusterEvents } = getPropsAndEvents(prevProps);
+  Object.keys(clusterProps).forEach((key) => {
+    if (clusterProps[key] !== prevClusterProps[key]) {
+      instance.options[key] = clusterProps[key];
+    }
+  });
+  Object.entries(prevClusterEvents).forEach(([eventAsProp, callback]) => {
+    const clusterEvent = `cluster${eventAsProp.substring(2).toLowerCase()}`;
+    instance.off(clusterEvent, callback);
+  });
+  Object.entries(clusterEvents).forEach(([eventAsProp, callback]) => {
+    const clusterEvent = `cluster${eventAsProp.substring(2).toLowerCase()}`;
+    instance.on(clusterEvent, callback);
+  });
 };
 var MarkerClusterGroup = createPathComponent(
   createMarkerClusterGroup,

package-lock.json

@@ -11,7 +11,7 @@
   "scripts": {
     "build": "tsup src/index.tsx --format esm --dts --clean --external @react-leaflet/core && npm run copy:assets",
     "format": "prettier --write \"src/**/*.tsx\"",
-    "lint": "eslint src/**/*.{ts,tsx}",
+    "lint": "eslint 'src/**/*.{ts,tsx}'",
     "prepublishOnly": "npm run lint",
     "preversion": "npm run lint",
     "version": "npm run format && git add -A src",
@@ -22,11 +22,11 @@
     "leaflet.markercluster": "^1.5.3"
   },
   "peerDependencies": {
+    "@react-leaflet/core": "^3.0.0",
     "leaflet": "^1.9.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-leaflet": "^5.0.0",
-    "@react-leaflet/core": "^3.0.0"
+    "react-leaflet": "^5.0.0"
   },
   "devDependencies": {
     "@types/leaflet": "^1.9.0",
@@ -38,6 +38,7 @@
     "@typescript-eslint/parser": "^4.33.0",
     "cpx": "^1.2.1",
     "eslint": "^7.32.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",

package.json

@@ -69,10 +69,29 @@ const updateMarkerCluster = (
   props: MarkerClusterControl,
   prevProps: MarkerClusterControl,
 ) => {
-  //TODO when prop change update instance
-  //   if (props. !== prevProps.center || props.size !== prevProps.size) {
-  //   instance.setBounds(getBounds(props))
-  // }
+  const { clusterProps, clusterEvents } = getPropsAndEvents(props)
+  const { clusterProps: prevClusterProps, clusterEvents: prevClusterEvents } =
+    getPropsAndEvents(prevProps)
+
+  // Update Options
+  Object.keys(clusterProps).forEach((key) => {
+    if (clusterProps[key] !== prevClusterProps[key]) {
+      // eslint-disable-next-line
+      // @ts-ignore
+      instance.options[key] = clusterProps[key]
+    }
+  })
+
+  // Update Events
+  Object.entries(prevClusterEvents).forEach(([eventAsProp, callback]) => {
+    const clusterEvent = `cluster${eventAsProp.substring(2).toLowerCase()}`
+    instance.off(clusterEvent, callback)
+  })
+
+  Object.entries(clusterEvents).forEach(([eventAsProp, callback]) => {
+    const clusterEvent = `cluster${eventAsProp.substring(2).toLowerCase()}`
+    instance.on(clusterEvent, callback)
+  })
 }
 
 const MarkerClusterGroup = createPathComponent<L.MarkerClusterGroup, MarkerClusterControl>(