@mapcomponents/react-maplibre 0.1.57 → 0.1.58

package/eslintErrorTest.js

@@ -0,0 +1,10 @@
+const eslintErrorTest = () => {
+  let c;
+  const b;
+  const ab;
+  const l =   "abc";
+  const j = 'oh no'
+    
+  for (let i = 0; i < 10; i--) {}
+  while (true) {}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.57",
+  "version": "0.1.58",
   "main": "index.js",
   "license": "MIT",
   "module": "dist/index.esm.js",
@@ -62,6 +62,8 @@
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
     "@types/uuid": "^8.3.4",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "babel-jest": "^26.6.0",
     "babel-plugin-inline-react-svg": "^2.0.1",
@@ -69,6 +71,9 @@
     "babel-preset-react-app": "^10.0.1",
     "docz": "^2.4.0",
     "enzyme": "^3.11.0",
+    "eslint": "^8.23.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-react": "^7.31.1",
     "glob": "^7.2.0",
     "jest": "26.6.0",
     "jest-circus": "26.6.0",
@@ -77,6 +82,7 @@
     "jest-resolve": "26.6.0",
     "jest-watch-typeahead": "0.6.1",
     "postcss": "^8.4.12",
+    "prettier": "2.7.1",
     "react": "^17.0.2",
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.0",

package/src/components/MapLibreMap/MapLibreMap.stories.js

@@ -8,93 +8,93 @@ import TopToolbar from "../../ui_components/TopToolbar";
 import sample_geojson_1 from "../MlGeoJsonLayer/assets/sample_1.json";
 
 const storyoptions = {
-  title: "Core/MapLibreMap",
-  component: MapLibreMap,
-  argTypes: {
-    options: {
-      control: {
-        type: "object",
-      },
-    },
-  },
+	title: "Core/MapLibreMap",
+	component: MapLibreMap,
+	argTypes: {
+		options: {
+			control: {
+				type: "object",
+			},
+		},
+	},
 };
 export default storyoptions;
 
 const Template = (args) => {
-  return (
-    <MapComponentsProvider>
-      <MapLibreMap
-        options={args.options}
-        style={{
-          position: "absolute",
-          height: "100vh",
-          width: "100vw",
-          top: 0,
-          right: 0,
-          left: 0,
-          bottom: 0,
-          zIndex: 100,
-        }}
-      />
-    </MapComponentsProvider>
-  );
+	return (
+		<MapComponentsProvider>
+			<MapLibreMap
+				options={args.options}
+				style={{
+					position: "absolute",
+					height: "100vh",
+					width: "100vw",
+					top: 0,
+					right: 0,
+					left: 0,
+					bottom: 0,
+					zIndex: 100,
+				}}
+			/>
+		</MapComponentsProvider>
+	);
 };
 
 export const ExampleConfig = Template.bind({});
 ExampleConfig.args = {
-  options: {
-    style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-    center: [8.607, 53.1409349],
-    zoom: 14,
-  },
+	options: {
+		style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+		center: [8.607, 53.1409349],
+		zoom: 14,
+	},
 };
 
 const StyleChangeTemplate = (args) => {
-  const [activeStyle, setActiveStyle] = useState(
-    "https://wms.wheregroup.com/tileserver/style/osm-fiord-color.json"
-  );
+	const [activeStyle, setActiveStyle] = useState(
+		"https://wms.wheregroup.com/tileserver/style/osm-fiord-color.json"
+	);
 
-  return (
-    <MapComponentsProvider>
-      <TopToolbar>
-        <Button
-          onClick={() =>
-            setActiveStyle("https://wms.wheregroup.com/tileserver/style/osm-bright.json")
-          }
-        >
-          OSM-Bright
-        </Button>
-        <Button
-          onClick={() =>
-            setActiveStyle("https://wms.wheregroup.com/tileserver/style/osm-fiord-color.json")
-          }
-        >
-          OSM-Fiord-Color
-        </Button>
-      </TopToolbar>
-      <MapLibreMap
-        options={{ ...args.options, style: activeStyle }}
-        style={{
-          position: "absolute",
-          height: "100vh",
-          width: "100vw",
-          top: 0,
-          right: 0,
-          left: 0,
-          bottom: 0,
-          zIndex: 100,
-        }}
-      />
-      <MlGeoJsonLayer type="line" geojson={sample_geojson_1} />
-    </MapComponentsProvider>
-  );
+	return (
+		<MapComponentsProvider>
+			<TopToolbar>
+				<Button
+					onClick={() =>
+						setActiveStyle("https://wms.wheregroup.com/tileserver/style/osm-bright.json")
+					}
+				>
+					OSM-Bright
+				</Button>
+				<Button
+					onClick={() =>
+						setActiveStyle("https://wms.wheregroup.com/tileserver/style/osm-fiord-color.json")
+					}
+				>
+					OSM-Fiord-Color
+				</Button>
+			</TopToolbar>
+			<MapLibreMap
+				options={{ ...args.options, style: activeStyle }}
+				style={{
+					position: "absolute",
+					height: "100vh",
+					width: "100vw",
+					top: 0,
+					right: 0,
+					left: 0,
+					bottom: 0,
+					zIndex: 100,
+				}}
+			/>
+			<MlGeoJsonLayer type="line" geojson={sample_geojson_1} />
+		</MapComponentsProvider>
+	);
 };
 
 export const StyleChangeConfig = StyleChangeTemplate.bind({});
 StyleChangeConfig.args = {
-  options: {
-    zoom: 14.5,
-    center: [7.0851268, 50.73884],
-  },
+	options: {
+		zoom: 14.5,
+		center: [7.0851268, 50.73884],
+	},
 };
 StyleChangeConfig.parameters = {};

package/src/components/MapLibreMap/MapLibreMap.test.js

@@ -5,80 +5,80 @@ import MapContext, { MapComponentsProvider } from "../../contexts/MapContext";
 import MapLibreMap from "./MapLibreMap";
 
 const MapLibreMapTestComponent = (props) => {
-  const mapContext = useContext(MapContext);
-  const [mapIsVisible, setMapIsVisible] = useState(true);
+	const mapContext = useContext(MapContext);
+	const [mapIsVisible, setMapIsVisible] = useState(true);
 
-  return (
-    <>
-      <button
-        className="toggle_map_is_visible"
-        onClick={() => {
-          setMapIsVisible(!mapIsVisible);
-        }}
-      >
-        toggle mapIsVisible
-      </button>
-      <div className="map_count">{mapContext.mapIds.length}</div>
+	return (
+		<>
+			<button
+				className="toggle_map_is_visible"
+				onClick={() => {
+					setMapIsVisible(!mapIsVisible);
+				}}
+			>
+				toggle mapIsVisible
+			</button>
+			<div className="map_count">{mapContext.mapIds.length}</div>
 
-      {!props.mapId && mapIsVisible && <MapLibreMap />}
-      {props.mapId && (
-        <>
-          <div className="map_1_exists">
-            {mapContext.getMap(props.mapId) ? "true" : "false"}
-          </div>
-          {mapIsVisible && <MapLibreMap mapId={props.mapId} />}
-        </>
-      )}
-    </>
-  );
+			{!props.mapId && mapIsVisible && <MapLibreMap />}
+			{props.mapId && (
+				<>
+					<div className="map_1_exists">
+						{mapContext.getMap(props.mapId) ? "true" : "false"}
+					</div>
+					{mapIsVisible && <MapLibreMap mapId={props.mapId} />}
+				</>
+			)}
+		</>
+	);
 };
 
 describe("<MapLibreMap>", () => {
-  it("should register an anonymous maplibre object to mapContext", async () => {
-    const wrapper = mount(
-      <MapComponentsProvider>
-        <MapLibreMapTestComponent />
-      </MapComponentsProvider>
-    );
+	it("should register an anonymous maplibre object to mapContext", async () => {
+		const wrapper = mount(
+			<MapComponentsProvider>
+				<MapLibreMapTestComponent />
+			</MapComponentsProvider>
+		);
 
-    expect(wrapper.find(".map_count").text()).toEqual("1");
-  });
+		expect(wrapper.find(".map_count").text()).toEqual("1");
+	});
 
-  it("should remove an anonymous maplibre object from mapContext", async () => {
-    const wrapper = mount(
-      <MapComponentsProvider>
-        <MapLibreMapTestComponent />
-      </MapComponentsProvider>
-    );
+	it("should remove an anonymous maplibre object from mapContext", async () => {
+		const wrapper = mount(
+			<MapComponentsProvider>
+				<MapLibreMapTestComponent />
+			</MapComponentsProvider>
+		);
 
-    expect(wrapper.find(".map_count").text()).toEqual("1");
+		expect(wrapper.find(".map_count").text()).toEqual("1");
 
-    wrapper.find(".toggle_map_is_visible").simulate("click");
+		wrapper.find(".toggle_map_is_visible").simulate("click");
 
-    expect(wrapper.find(".map_count").text()).toEqual("0");
-  });
+		expect(wrapper.find(".map_count").text()).toEqual("0");
+	});
 
-  it("should register a maplibre object with the id 'map_1' to mapContext", async () => {
-    const wrapper = mount(
-      <MapComponentsProvider>
-        <MapLibreMapTestComponent mapId="map_1" />
-      </MapComponentsProvider>
-    );
+	it("should register a maplibre object with the id 'map_1' to mapContext", async () => {
+		const wrapper = mount(
+			<MapComponentsProvider>
+				<MapLibreMapTestComponent mapId="map_1" />
+			</MapComponentsProvider>
+		);
 
-    expect(wrapper.find(".map_1_exists").text()).toEqual("true");
-  });
+		expect(wrapper.find(".map_1_exists").text()).toEqual("true");
+	});
 
-  it("should remove a maplibre object with the id 'map_1' to mapContext", async () => {
-    const wrapper = mount(
-      <MapComponentsProvider>
-        <MapLibreMapTestComponent mapId="map_1" />
-      </MapComponentsProvider>
-    );
+	it("should remove a maplibre object with the id 'map_1' to mapContext", async () => {
+		const wrapper = mount(
+			<MapComponentsProvider>
+				<MapLibreMapTestComponent mapId="map_1" />
+			</MapComponentsProvider>
+		);
 
-    expect(wrapper.find(".map_1_exists").text()).toEqual("true");
+		expect(wrapper.find(".map_1_exists").text()).toEqual("true");
 
-    wrapper.find(".toggle_map_is_visible").simulate("click");
+		wrapper.find(".toggle_map_is_visible").simulate("click");
 
-    expect(wrapper.find(".map_1_exists").text()).toEqual("false");
-  });
+		expect(wrapper.find(".map_1_exists").text()).toEqual("false");
+	});
 });

package/src/components/MapLibreMap/MapLibreMap.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useContext, FC,  RefObject } from "react";
+import React, { useRef, useEffect, useContext, FC,	RefObject } from "react";
 
 import MapContext from "../../contexts/MapContext";
 import MapLibreGlWrapper from "./lib/MapLibreGlWrapper";
@@ -7,45 +7,45 @@ import { MapOptions as MapOptionsType } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 type MapLibreMapProps = {
-  /**
-   * Id of the MapLibreGl(Wrapper) instance in mapContext
-   */
-  mapId?: string;
-  /**
-   * Config object that is passed to the MapLibreGl constructor as first parameter.
-   * See https://maplibre.org/maplibre-gl-js-docs/api/map/ for a formal documentation of al
-   * available properties.
-   */
-  options?: Partial<MapOptionsType>;
-  /**
-   * css style definition passed to the map container DOM element
-   */
-  style?: object;
+	/**
+	 * Id of the MapLibreGl(Wrapper) instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * Config object that is passed to the MapLibreGl constructor as first parameter.
+	 * See https://maplibre.org/maplibre-gl-js-docs/api/map/ for a formal documentation of al
+	 * available properties.
+	 */
+	options?: Partial<MapOptionsType>;
+	/**
+	 * css style definition passed to the map container DOM element
+	 */
+	style?: object;
 };
 
 const defaultProps: MapLibreMapProps = {
-  mapId: undefined,
-  options: {
-    center: { lng: 8.607, lat: 53.1409349 },
-    zoom: 11,
-    container: '',
-    style: {
-      version: 8,
-      name: "blank",
-      center: [0, 0],
-      zoom: 0,
-      sources: {},
-      layers: [
-        {
-          id: "background",
-          type: "background",
-          paint: {
-            "background-color": "rgba(0,0,0,0)",
-          },
-        },
-      ],
-    },
-  },
+	mapId: undefined,
+	options: {
+		center: { lng: 8.607, lat: 53.1409349 },
+		zoom: 11,
+		container: '',
+		style: {
+			version: 8,
+			name: "blank",
+			center: [0, 0],
+			zoom: 0,
+			sources: {},
+			layers: [
+				{
+					id: "background",
+					type: "background",
+					paint: {
+						"background-color": "rgba(0,0,0,0)",
+					},
+				},
+			],
+		},
+	},
 };
 
 /**
@@ -59,59 +59,59 @@ const defaultProps: MapLibreMapProps = {
  * @category Map components
  */
 const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
-  const map: any = useRef<MapLibreGlWrapper>(null);
-  const mapContainer = useRef<HTMLDivElement>();
+	const map: any = useRef<MapLibreGlWrapper>(null);
+	const mapContainer = useRef<HTMLDivElement>();
 
-  const mapContext: any = useContext<MapContextType>(MapContext);
+	const mapContext: any = useContext<MapContextType>(MapContext);
 
-  const mapIdRef = useRef(props.mapId);
-  const initializedRef = useRef(false);
-  const currentStyle = useRef(props.options?.style);
+	const mapIdRef = useRef(props.mapId);
+	const initializedRef = useRef(false);
+	const currentStyle = useRef(props.options?.style);
 
-  useEffect(() => {
-    let mapId = mapIdRef.current;
+	useEffect(() => {
+		let mapId = mapIdRef.current;
 
-    return () => {
-      mapContext.removeMap(mapId);
-      map.current?.remove?.();
-      map.current = null;
-    };
-  }, []);
+		return () => {
+			mapContext.removeMap(mapId);
+			map.current?.remove?.();
+			map.current = null;
+		};
+	}, []);
 
-  useEffect(() => {
-    if (initializedRef.current) return;
+	useEffect(() => {
+		if (initializedRef.current) return;
 
-    if (mapContainer.current) {
-      initializedRef.current = true;
-      map.current = new MapLibreGlWrapper({
-        mapOptions: {
-          style: '',
-          container: mapContainer.current,
-          ...props.options,
-        },
-        onReady: (map: any, wrapper: any) => {
-          map.once("load", () => {
-            if (props.mapId) {
-              mapContext.registerMap(props.mapId, wrapper);
-            } else {
-              mapContext.setMap(wrapper);
-            }
-          });
-        },
-      });
-    }
-  }, [props.options, props.mapId]);
+		if (mapContainer.current) {
+			initializedRef.current = true;
+			map.current = new MapLibreGlWrapper({
+				mapOptions: {
+					style: '',
+					container: mapContainer.current,
+					...props.options,
+				},
+				onReady: (map: any, wrapper: any) => {
+					map.once("load", () => {
+						if (props.mapId) {
+							mapContext.registerMap(props.mapId, wrapper);
+						} else {
+							mapContext.setMap(wrapper);
+						}
+					});
+				},
+			});
+		}
+	}, [props.options, props.mapId]);
 
-  useEffect(() => {
-    if (map.current?.map && props?.options?.style && currentStyle.current !== props.options.style) {
-      console.log("set style");
-      currentStyle.current = props.options.style;
-      map.current.map.setStyle(props.options.style);
-    }
-    // @ts-ignore: props.options is either passed or populated with default values
-  }, [props.options.style])
+	useEffect(() => {
+		if (map.current?.map && props?.options?.style && currentStyle.current !== props.options.style) {
+			console.log("set style");
+			currentStyle.current = props.options.style;
+			map.current.map.setStyle(props.options.style);
+		}
+		// @ts-ignore: props.options is either passed or populated with default values
+	}, [props.options.style])
 
-  return <div ref={mapContainer as RefObject<HTMLDivElement>} className="mapContainer" style={props.style} />;
+	return <div ref={mapContainer as RefObject<HTMLDivElement>} className="mapContainer" style={props.style} />;
 };
 
 MapLibreMap.defaultProps = defaultProps;