diff --git a/.storybook/examples/marker-cluster-options.jsx b/.storybook/examples/marker-cluster-options.jsx index 6145910..5a1bc27 100644 --- a/.storybook/examples/marker-cluster-options.jsx +++ b/.storybook/examples/marker-cluster-options.jsx @@ -1,22 +1,21 @@ -import React from 'react'; +import React from "react"; -import L from 'leaflet'; -import { MapContainer, TileLayer, Marker } from 'react-leaflet'; +import L from "leaflet"; +import { MapContainer, TileLayer, Marker } from "react-leaflet"; -import MarkerClusterGroup from './../../src/react-leaflet-markercluster'; +import MarkerClusterGroup from "./../../src/react-leaflet-markercluster"; -import { MAP_ZOOM, MAP_MAX_ZOOM, MAP_CENTER_COORDINATES } from './constants'; +import { MAP_ZOOM, MAP_MAX_ZOOM, MAP_CENTER_COORDINATES } from "./constants"; -import './styles.scss'; +import "./styles.scss"; // Function for creating custom icon for cluster group // https://github.com/Leaflet/Leaflet.markercluster#customising-the-clustered-markers // NOTE: iconCreateFunction is running by leaflet, which is not support ES6 arrow func syntax -// eslint-disable-next-line -const createClusterCustomIcon = function(cluster) { +const createClusterCustomIcon = function (cluster) { return L.divIcon({ html: `${cluster.getChildCount()}`, - className: 'marker-cluster-custom', + className: "marker-cluster-custom", iconSize: L.point(40, 40, true), }); }; diff --git a/.storybook/examples/marker-tooltip.jsx b/.storybook/examples/marker-tooltip.jsx index 366656f..76bb9b3 100644 --- a/.storybook/examples/marker-tooltip.jsx +++ b/.storybook/examples/marker-tooltip.jsx @@ -1,13 +1,12 @@ -import React from 'react'; +import React from "react"; -import L from 'leaflet'; -import { MapContainer, TileLayer, Marker, Tooltip } from 'react-leaflet'; +import { MapContainer, TileLayer, Marker, Tooltip } from "react-leaflet"; -import MarkerClusterGroup from './../../src/react-leaflet-markercluster'; +import MarkerClusterGroup from "./../../src/react-leaflet-markercluster"; -import { MAP_ZOOM, MAP_MAX_ZOOM, MAP_CENTER_COORDINATES } from './constants'; +import { MAP_ZOOM, MAP_MAX_ZOOM, MAP_CENTER_COORDINATES } from "./constants"; -import './styles.scss'; +import "./styles.scss"; // Setup Tooltip according to react-leaflet documentation // https://react-leaflet.js.org/docs/en/examples.html diff --git a/eslint.config.mjs b/eslint.config.mjs index db03547..894cf33 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -1,14 +1,16 @@ -import pluginJs from '@eslint/js'; -import eslintConfigPrettier from 'eslint-config-prettier'; -import pluginReact from 'eslint-plugin-react'; -import storybook from 'eslint-plugin-storybook'; -import globals from 'globals'; +import pluginJs from "@eslint/js"; +import eslintConfigPrettier from "eslint-config-prettier"; +import pluginReact from "eslint-plugin-react"; +import storybook from "eslint-plugin-storybook"; +import globals from "globals"; export default [ - { files: ['**/*.{js,mjs,cjs,jsx}'] }, + { files: ["**/*.{js,mjs,cjs,jsx}"] }, + { ignores: ["dist/**"] }, { languageOptions: { globals: globals.browser } }, + { settings: { react: { version: "detect" } } }, pluginJs.configs.recommended, pluginReact.configs.flat.recommended, eslintConfigPrettier, - ...storybook.configs['flat/recommended'], + ...storybook.configs["flat/recommended"], ]; diff --git a/package.json b/package.json index 29e28ac..7c12a9c 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "private": false, "scripts": { "dev": "storybook dev -p 6006", - "lint": "eslint --ext .js ./ --ignore-pattern '/dist/'", + "lint": "eslint", "build:cjs": "cross-env BABEL_ENV=cjs babel ./src -o ./dist/cjs/index.js", "build:esm": "cross-env BABEL_ENV=esm babel ./src -o ./dist/esm/index.js", "build:code": "npm run build:cjs && npm run build:esm && cp ./index.d.ts ./dist/index.d.ts", diff --git a/src/react-leaflet-markercluster.js b/src/react-leaflet-markercluster.js index 3c72a7c..e4938fb 100644 --- a/src/react-leaflet-markercluster.js +++ b/src/react-leaflet-markercluster.js @@ -1,6 +1,6 @@ -import { createPathComponent } from '@react-leaflet/core'; -import L from 'leaflet'; -import 'leaflet.markercluster'; +import { createPathComponent } from "@react-leaflet/core"; +import L from "leaflet"; +import "leaflet.markercluster"; L.MarkerClusterGroup.include({ _flushLayerBuffer() { @@ -16,19 +16,20 @@ L.MarkerClusterGroup.include({ }, }); -L.MarkerClusterGroup.addInitHook(function() { +L.MarkerClusterGroup.addInitHook(function () { this._layerBuffer = []; }); +// eslint-disable-next-line no-unused-vars function createMarkerCluster({ children: _c, ...props }, context) { const clusterProps = {}; const clusterEvents = {}; - + // Splitting props and events to different objects Object.entries(props).forEach(([propName, prop]) => - propName.startsWith('on') + propName.startsWith("on") ? (clusterEvents[propName] = prop) - : (clusterProps[propName] = prop) + : (clusterProps[propName] = prop), ); const instance = new L.MarkerClusterGroup(clusterProps);