@mapcomponents/react-maplibre 0.1.63 → 0.1.65

package/coverage/lcov-report/src/hooks/useSource.ts.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">79.31% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/29</span>
+                <span class='fraction'>23/29</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">55% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/20</span>
+                <span class='fraction'>11/20</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/6</span>
+                <span class='fraction'>6/6</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">80.76% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/26</span>
+                <span class='fraction'>21/26</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line low'></div>
+    <div class='status-line medium'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -166,38 +166,38 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">40x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">40x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -207,11 +207,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">20x</span>
+<span class="cline-any cline-yes">15x</span>
+<span class="cline-any cline-yes">15x</span>
+<span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -222,7 +222,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">40x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -234,11 +234,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { useEffect, useRef, useCallback, useState } from "react";
 import useMap, { useMapType } from "./useMap";
 import MapLibreGlWrapper from "../components/MapLibreMap/lib/MapLibreGlWrapper";
-import { SourceSpecification } from "maplibre-gl";
+import { Source, SourceSpecification } from "maplibre-gl";
 &nbsp;
 type useSourceType = {
 	map: MapLibreGlWrapper | undefined;
-	source: SourceSpecification;
+	source: Source | undefined;
 	componentId: string;
 	mapHook: useMapType;
 };
@@ -249,39 +249,39 @@ interface useSourceProps {
 	sourceId: string;
 }
 &nbsp;
-function <span class="fstat-no" title="function not covered" >useSource(</span>props: useSourceProps): useSourceType {
-	const mapHook = <span class="cstat-no" title="statement not covered" >useMap({</span>
+function useSource(props: useSourceProps): useSourceType {
+	const mapHook = useMap({
 		mapId: props.mapId,
 	});
 &nbsp;
-	const initializedRef = <span class="cstat-no" title="statement not covered" >useRef&lt;boolean&gt;(false);</span>
-	const [source, setSource] = <span class="cstat-no" title="statement not covered" >useState&lt;any&gt;();</span>
-	const sourceId = <span class="cstat-no" title="statement not covered" >useRef(</span>
-		props.sourceId || (props.idPrefix ? props.idPrefix : "Source-") + mapHook.componentId
+	const initializedRef = useRef&lt;boolean&gt;(false);
+	const [source, setSource] = useState&lt;Source&gt;();
+	const sourceId = useRef(
+		props.sourceId || <span class="branch-1 cbranch-no" title="branch not covered" >(props.idPrefix ? props.idPrefix : "Source-") + mapHook.componentId</span>
 	);
 &nbsp;
-	const createSource = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >		if (!mapHook.map) <span class="cstat-no" title="statement not covered" >return;</span></span>
-<span class="cstat-no" title="statement not covered" >		initializedRef.current = true;</span>
+	const createSource = useCallback(() =&gt; {
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (!mapHook.map) <span class="cstat-no" title="statement not covered" >return;</span>
+		initializedRef.current = true;
 &nbsp;
-<span class="cstat-no" title="statement not covered" >		if (mapHook.map.map.getSource(sourceId.current)) {</span>
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (mapHook.map.map.getSource(sourceId.current)) {
 <span class="cstat-no" title="statement not covered" >			mapHook.cleanup();</span>
 		}
 &nbsp;
-<span class="cstat-no" title="statement not covered" >		mapHook.map?.addSource(sourceId.current, {</span>
+		mapHook.map?.addSource(sourceId.current, {
 			...props.source,
-		});
+		}, mapHook.componentId);
 &nbsp;
-<span class="cstat-no" title="statement not covered" >		setSource(mapHook.map.map.getSource(sourceId.current));</span>
+		setSource(mapHook.map.map.getSource(sourceId.current));
 	}, [props, mapHook.map]);
 &nbsp;
-<span class="cstat-no" title="statement not covered" >	useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >		if (!mapHook.map || initializedRef.current) <span class="cstat-no" title="statement not covered" >return;</span></span>
-<span class="cstat-no" title="statement not covered" >		createSource();</span>
+	useEffect(() =&gt; {
+		if (!mapHook.map || initializedRef.current) return;
+		createSource();
 	}, [mapHook.map, props, createSource]);
 &nbsp;
-<span class="cstat-no" title="statement not covered" >	useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >		if (!initializedRef.current || !mapHook.map?.map?.getSource(props.sourceId)) <span class="cstat-no" title="statement not covered" >return;</span></span>
+	useEffect(() =&gt; {
+		<span class="missing-if-branch" title="else path not taken" >E</span>if (!initializedRef.current || <span class="branch-1 cbranch-no" title="branch not covered" >!mapHook.map?.map?.getSource(props.sourceId))</span> return;
 &nbsp;
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		//@ts-ignore setData only exists on GeoJsonSource
@@ -291,11 +291,11 @@ function <span class="fstat-no" title="function not covered" >useSource(</span>p
 	}, [props.source?.data]);
 &nbsp;
 	//cleanup
-<span class="cstat-no" title="statement not covered" >	useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >		return <span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >			initializedRef.current = false;</span>
-<span class="cstat-no" title="statement not covered" >			if (mapHook.map) {</span>
-<span class="cstat-no" title="statement not covered" >				for (const [layerId, layer] of Object.entries(mapHook.map.map.style._layers)) {</span>
+	useEffect(() =&gt; {
+		return () =&gt; {
+			initializedRef.current = false;
+			if (mapHook.map) {
+				for (const [layerId, layer] of Object.entries(mapHook.map.map.style._layers)) {
 <span class="cstat-no" title="statement not covered" >					if (layer.source === sourceId.current) {</span>
 <span class="cstat-no" title="statement not covered" >						mapHook.map.map.removeLayer(layerId);</span>
 					}
@@ -306,7 +306,7 @@ function <span class="fstat-no" title="function not covered" >useSource(</span>p
 		};
 	}, [mapHook.map]);
 &nbsp;
-<span class="cstat-no" title="statement not covered" >	return {</span>
+	return {
 		map: mapHook.map,
 		source: source,
 		componentId: mapHook.componentId,
@@ -322,7 +322,7 @@ export default useSource;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2022-12-16T12:30:49.297Z
+                at 2023-01-23T12:27:40.277Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/hooks/{useWms.js.html → useWms.ts.html}

@@ -3,7 +3,7 @@
 <html lang="en">
 
 <head>
-    <title>Code coverage report for src/hooks/useWms.js</title>
+    <title>Code coverage report for src/hooks/useWms.ts</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../../prettify.css" />
     <link rel="stylesheet" href="../../base.css" />
@@ -19,7 +19,7 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/hooks</a> useWms.js</h1>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/hooks</a> useWms.ts</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
@@ -154,7 +154,33 @@
 <a name='L89'></a><a href='#L89'>89</a>
 <a name='L90'></a><a href='#L90'>90</a>
 <a name='L91'></a><a href='#L91'>91</a>
-<a name='L92'></a><a href='#L92'>92</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L92'></a><a href='#L92'>92</a>
+<a name='L93'></a><a href='#L93'>93</a>
+<a name='L94'></a><a href='#L94'>94</a>
+<a name='L95'></a><a href='#L95'>95</a>
+<a name='L96'></a><a href='#L96'>96</a>
+<a name='L97'></a><a href='#L97'>97</a>
+<a name='L98'></a><a href='#L98'>98</a>
+<a name='L99'></a><a href='#L99'>99</a>
+<a name='L100'></a><a href='#L100'>100</a>
+<a name='L101'></a><a href='#L101'>101</a>
+<a name='L102'></a><a href='#L102'>102</a>
+<a name='L103'></a><a href='#L103'>103</a>
+<a name='L104'></a><a href='#L104'>104</a>
+<a name='L105'></a><a href='#L105'>105</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -246,15 +272,28 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { useState, useEffect } from "react";
-import WMSCapabilities from "wms-capabilities";
+import WMSCapabilities, { WMSCapabilitiesJSON } from "wms-capabilities";
+&nbsp;
+export interface useWmsProps{
+	url?:string;
+	urlParameters?:{[key: string]: string};
+}
+&nbsp;
+export interface useWmsReturnType{
+		capabilities:WMSCapabilitiesJSON | null | undefined;
+		getFeatureInfoUrl:string | undefined;
+		wmsUrl:string | undefined;
+		error:string | undefined;
+		setUrl:(value:string|undefined) =&gt; void;
+}
 &nbsp;
-function <span class="fstat-no" title="function not covered" >useWms(</span>props) {
+function <span class="fstat-no" title="function not covered" >useWms(</span>props:useWmsProps):useWmsReturnType {
 	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-	const [getFeatureInfoUrl, setGetFeatureInfoUrl] = <span class="cstat-no" title="statement not covered" >useState(undefined);</span>
+	const [getFeatureInfoUrl, setGetFeatureInfoUrl] = <span class="cstat-no" title="statement not covered" >useState&lt;string&gt;();</span>
 	const [url, setUrl] = <span class="cstat-no" title="statement not covered" >useState(props.url);</span>
 	const [wmsUrl, setWmsUrl] = <span class="cstat-no" title="statement not covered" >useState("");</span>
-	const [capabilities, setCapabilities] = <span class="cstat-no" title="statement not covered" >useState(undefined);</span>
-	const [error, setError] = <span class="cstat-no" title="statement not covered" >useState(undefined);</span>
+	const [capabilities, setCapabilities] = <span class="cstat-no" title="statement not covered" >useState&lt;WMSCapabilitiesJSON | null | undefined&gt;();</span>
+	const [error, setError] = <span class="cstat-no" title="statement not covered" >useState();</span>
 &nbsp;
 	const clearState = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
 <span class="cstat-no" title="statement not covered" >		setGetFeatureInfoUrl(undefined);</span>
@@ -276,16 +315,16 @@ function <span class="fstat-no" title="function not covered" >useWms(</span>prop
 <span class="cstat-no" title="statement not covered" >			_propsUrlParams = url.split("?");</span>
 <span class="cstat-no" title="statement not covered" >			_wmsUrl = _propsUrlParams[0];</span>
 		}
-		let _urlParamsFromUrl = <span class="cstat-no" title="statement not covered" >new URLSearchParams(_propsUrlParams?.[1]);</span>
+		const _urlParamsFromUrl = <span class="cstat-no" title="statement not covered" >new URLSearchParams(_propsUrlParams?.[1]);</span>
 &nbsp;
-		let urlParamsObj = <span class="cstat-no" title="statement not covered" >{</span>
+		const urlParamsObj = <span class="cstat-no" title="statement not covered" >{</span>
 			...Object.fromEntries(_urlParamsFromUrl),
 			...props.urlParameters,
 		};
 		// create URLSearchParams object to assemble the URL Parameters
-		let urlParams = <span class="cstat-no" title="statement not covered" >new URLSearchParams(urlParamsObj);</span>
+		const urlParams = <span class="cstat-no" title="statement not covered" >new URLSearchParams(urlParamsObj);</span>
 &nbsp;
-		let urlParamsStr =
+		const urlParamsStr =
 <span class="cstat-no" title="statement not covered" >			decodeURIComponent(urlParams.toString()) + "".replace(/%2F/g, "/").replace(/%3A/g, ":");</span>
 &nbsp;
 <span class="cstat-no" title="statement not covered" >		fetch(_wmsUrl + "?" + urlParamsStr)</span>
@@ -296,8 +335,8 @@ function <span class="fstat-no" title="function not covered" >useWms(</span>prop
 <span class="cstat-no" title="statement not covered" >					return res.text();</span>
 				}
 			})
-			.then(<span class="fstat-no" title="function not covered" >(d</span>ata) =&gt; {
-<span class="cstat-no" title="statement not covered" >				setCapabilities(new WMSCapabilities(data).toJSON());</span>
+			.then(<span class="fstat-no" title="function not covered" >(d</span>ata:string) =&gt; {
+<span class="cstat-no" title="statement not covered" >				setCapabilities(new WMSCapabilities(data, window.DOMParser).toJSON());</span>
 			})
 			.catch(<span class="fstat-no" title="function not covered" >(e</span>rror) =&gt; {
 				//reset local state
@@ -343,7 +382,7 @@ export default useWms;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2022-12-16T12:30:49.297Z
+                at 2023-01-23T12:27:40.277Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2022-12-16T12:30:49.297Z
+                at 2023-01-23T12:27:40.277Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/index.ts.html

@@ -177,11 +177,11 @@ export { default as MlLayerSwipe } from "./components/MlLayerSwipe/MlLayerSwipe"
 export { default as MlTransitionGeoJsonLayer } from "./components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer";
 export { default as MlMarker } from "./components/MlMarker/MlMarker";
  
-export { default as MlGPXViewer } from "./components/MlGPXViewer/MlGPXViewer";
-export { default as GeoJsonProvider } from "./components/MlGPXViewer/util/GeoJsonProvider";
-export { default as GeoJsonContext } from "./components/MlGPXViewer/util/GeoJsonContext";
+export { default as MlGpxViewer } from "./components/MlGpxViewer/MlGpxViewer";
+export { default as GeoJsonProvider } from "./components/MlGpxViewer/util/GeoJsonProvider";
+export { default as GeoJsonContext } from "./components/MlGpxViewer/util/GeoJsonContext";
  
-export { default as MlSpatialElevationProfile } from "./components/MlSpatialElevationProfile/MlSpatialElevationProfile.js";
+export { default as MlSpatialElevationProfile } from "./components/MlSpatialElevationProfile/MlSpatialElevationProfile";
  
 export { default as MlOsmLayer } from "./components/MlOsmLayer/MlOsmLayer.js";
 export { default as MlBasicComponent } from "./components/MlBasicComponent.js";
@@ -189,7 +189,7 @@ export { default as MlBasicComponent } from "./components/MlBasicComponent.js";
 export { default as useLayer } from "./hooks/useLayer";
 export { default as useMapState } from "./hooks/useMapState";
 export { default as useMap } from "./hooks/useMap";
-export { default as useWms } from "./hooks/useWms.js";
+export { default as useWms } from "./hooks/useWms";
 export { default as useSource } from "./hooks/useSource";
 export { default as useExportMap } from "./hooks/useExportMap";
 export { default as useCameraFollowPath } from "./hooks/useCameraFollowPath/useCameraFollowPath";
@@ -205,7 +205,7 @@ export { default as SimpleDataContext } from "./contexts/SimpleDataContext";
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2022-12-16T12:30:49.297Z
+                at 2023-01-23T12:27:40.277Z
             </div>
         <script src="../prettify.js"></script>
         <script>