@mapcomponents/react-maplibre 0.1.34 → 0.1.37

package/src/hooks/{useMapState.js → useMapState.ts}

@@ -1,25 +1,53 @@
 import { useContext, useCallback, useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import { v4 as uuidv4 } from "uuid";
+// @ts-ignore
 import { MapContext } from "@mapcomponents/react-core";
-
+import MapLibreGlWrapper, {
+  LayerState,
+  ViewportState,
+} from "../components/MapLibreMap/lib/MapLibreGlWrapper";
+
+type useMapStateType = {
+  layers: (LayerState | undefined)[];
+  viewport: ViewportState | undefined;
+};
+type MapContext = {
+  mapIds: [string?];
+  mapExists: Function;
+  maps: [];
+  getMap: Function;
+  setMap: Function;
+};
 /**
  * React hook that allows subscribing to map state changes
  *
  * @component
  */
-function useMapState(props) {
+function useMapState(props: {
+  mapId?: string;
+  watch?: {
+    layers?: boolean;
+    sources?: boolean;
+    viewport?: boolean;
+  };
+  filter?: {
+    includeBaseLayers?: boolean;
+    matchLayerIds?: RegExp | string;
+    matchSourceIds?: RegExp | string;
+  };
+}): useMapStateType {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapContext = useContext(MapContext);
+  const mapContext: MapContext = useContext(MapContext);
 
   const initializedRef = useRef(false);
-  const mapRef = useRef(undefined);
+  const mapRef = useRef<MapLibreGlWrapper>();
 
-  const [viewport, setViewport] = useState(undefined);
+  const [viewport, setViewport] = useState<ViewportState | undefined>();
   const viewportRef = useRef(undefined);
 
-  const [layers, setLayers] = useState(undefined);
-  const layersRef = useRef(undefined);
+  const [layers, setLayers] = useState<(LayerState | undefined)[]>([]);
+  const layersRef = useRef<string>();
   //const mapRef = useRef(props.map);
   const componentId = useRef(uuidv4());
 
@@ -49,6 +77,8 @@ function useMapState(props) {
   );
 
   const refreshLayerState = useCallback(() => {
+    if (!mapRef.current) return;
+
     let _layerState = mapRef.current.wrapper.layerState.filter(layerIdFilter);
     let _layerStateString = JSON.stringify(_layerState);
     if (layersRef.current !== _layerStateString) {
@@ -77,6 +107,11 @@ function useMapState(props) {
     initializedRef.current = true;
     mapRef.current = mapContext.getMap(props.mapId);
 
+    if (!mapRef.current) {
+      initializedRef.current = false;
+      return;
+    }
+
     if (props?.watch?.viewport) {
       setViewport(mapRef.current.wrapper.viewportState);
 

package/src/{index.js → index.ts}

@@ -1,27 +1,34 @@
 export { default as MapLibreMap } from "./components/MapLibreMap/MapLibreMap";
 export { default as MlComponentTemplate } from "./components/MlComponentTemplate/MlComponentTemplate";
+export { default as MlCreatePdfButton } from "./components/MlCreatePdfButton/MlCreatePdfButton";
+export { default as MlFeatureEditor } from "./components/MlFeatureEditor/MlFeatureEditor";
 export { default as MlFillExtrusionLayer } from "./components/MlFillExtrusionLayer/MlFillExtrusionLayer";
 export { default as MlFollowGps } from "./components/MlFollowGps/MlFollowGps";
-export { default as MlCreatePdfButton } from "./components/MlCreatePdfButton/MlCreatePdfButton";
 export { default as MlGeoJsonLayer } from "./components/MlGeoJsonLayer/MlGeoJsonLayer";
 export { default as MlImageMarkerLayer } from "./components/MlImageMarkerLayer/MlImageMarkerLayer";
 export { default as MlNavigationTools } from "./components/MlNavigationTools/MlNavigationTools";
 export { default as MlNavigationCompass } from "./components/MlNavigationCompass/MlNavigationCompass";
 export { default as MlLayer } from "./components/MlLayer/MlLayer";
-export { default as MlOsmLayer } from "./components/MlOsmLayer/MlOsmLayer";
 export { default as MlVectorTileLayer } from "./components/MlVectorTileLayer/MlVectorTileLayer";
 export { default as MlWmsLayer } from "./components/MlWmsLayer/MlWmsLayer";
-export { default as MlFeatureEditor } from "./components/MlFeatureEditor/MlFeatureEditor";
-export { default as MlBasicComponent } from "./components/MlBasicComponent";
+
 export { default as MlLayerMagnify } from "./components/MlLayerMagnify/MlLayerMagnify";
 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 MlSpatialElevationProfile } from "./components/MlSpatialElevationProfile/MlSpatialElevationProfile";
-export { default as MlTransitionGeoJsonLayer } from "./components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer";
-export { default as MlMarker } from "./components/MlMarker/MlMarker";
 
+export { default as MlSpatialElevationProfile } from "./components/MlSpatialElevationProfile/MlSpatialElevationProfile.js";
+
+export { default as MlOsmLayer } from "./components/MlOsmLayer/MlOsmLayer.js";
+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";
+export { default as useWms } from "./hooks/useWms.js";
+//

package/tsconfig.json

@@ -1,33 +1,27 @@
 {
   "compilerOptions": {
-    "declaration": true,
-    "declarationDir": "build",
+    "outDir": "build/esm",
     "module": "esnext",
     "target": "es5",
-    "lib": [
-      "es6",
-      "dom",
-      "es2016",
-      "es2017"
-    ],
-    "sourceMap": true,
-    "jsx": "react-jsx",
+    "lib": ["es6", "dom", "es2016", "es2017"],
+    "jsx": "react",
+    "declaration": true,
     "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "esModuleInterop": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
     "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true
   },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["src", "src/custom.d.tsx"],
+  "exclude": ["node_modules", "lib"],
+  "typedocOptions": {
+    "entryPoints": ["src/index.ts"],
+    "out": "docs",
+  }
 }

package/.env

@@ -1 +0,0 @@
-SKIP_PREFLIGHT_CHECK=true

package/.storybook/main.bck.js

@@ -1,56 +0,0 @@
-const path = require("path");
-const fs = require("fs");
-const { merge } = require("webpack-merge");
-
-function getPackageDir(filepath) {
-  let currDir = path.dirname(require.resolve(filepath));
-  while (true) {
-    if (fs.existsSync(path.join(currDir, "package.json"))) {
-      return currDir;
-    }
-    const { dir, root } = path.parse(currDir);
-    if (dir === root) {
-      throw new Error(
-        `Could not find package.json in the parent directories starting from ${filepath}.`
-      );
-    }
-    currDir = dir;
-  }
-}
-
-module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app",
-  ],
-  webpackFinal: async (config, { configType }) => {
-    config.module.rules.push({
-      test: /\.(js)$/,
-      loader: require.resolve("babel-loader"),
-      options: {
-        plugins: ["@emotion"],
-      },
-    });
-
-    // split into more chunks
-    config.optimization = {
-      splitChunks: {
-        chunks: "all",
-        minSize: 30 * 1024, // 30KB
-        maxSize: 1024 * 1024, // 1MB
-      },
-    };
-
-    return merge(config, {
-      resolve: {
-        alias: {
-          "@emotion/core": getPackageDir("@emotion/react"),
-          "@emotion/styled": getPackageDir("@emotion/styled"),
-          "emotion-theming": getPackageDir("@emotion/react"),
-        },
-      },
-    });
-  },
-};

package/babel.config.json

@@ -1,4 +0,0 @@
-{
-  "plugins": ["@emotion"],
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
-}

package/coverage/lcov-report/src/translations/english.js.html

@@ -1,94 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for src/translations/english.js</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="../../prettify.css" />
-    <link rel="stylesheet" href="../../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type='text/css'>
-        .coverage-summary .sorter {
-            background-image: url(../../sort-arrow-sprite.png);
-        }
-    </style>
-</head>
-    
-<body>
-<div class='wrapper'>
-    <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/translations</a> english.js</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>0/1</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Branches</span>
-                <span class='fraction'>0/0</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Functions</span>
-                <span class='fraction'>0/0</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
-                <span class="quiet">Lines</span>
-                <span class='fraction'>0/1</span>
-            </div>
-        
-            
-        </div>
-        <p class="quiet">
-            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
-        </p>
-        <template id="filterTemplate">
-            <div class="quiet">
-                Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
-            </div>
-        </template>
-    </div>
-    <div class='status-line low'></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>
-<a name='L3'></a><a href='#L3'>3</a>
-<a name='L4'></a><a href='#L4'>4</a></td><td class="line-coverage quiet"><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-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">const english = <span class="cstat-no" title="statement not covered" >{</span>
-    "en": { "Layer": "Layer" }
-}
-export default english;</pre></td></tr></table></pre>
-
-                <div class='push'></div><!-- for sticky footer -->
-            </div><!-- /wrapper -->
-            <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 Thu Mar 24 2022 19:39:33 GMT+0000 (Coordinated Universal Time)
-            </div>
-        <script src="../../prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="../../sorter.js"></script>
-        <script src="../../block-navigation.js"></script>
-    </body>
-</html>
-    

package/coverage/lcov-report/src/translations/german.js.html

@@ -1,94 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for src/translations/german.js</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="../../prettify.css" />
-    <link rel="stylesheet" href="../../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type='text/css'>
-        .coverage-summary .sorter {
-            background-image: url(../../sort-arrow-sprite.png);
-        }
-    </style>
-</head>
-    
-<body>
-<div class='wrapper'>
-    <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/translations</a> german.js</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>0/1</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Branches</span>
-                <span class='fraction'>0/0</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Functions</span>
-                <span class='fraction'>0/0</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
-                <span class="quiet">Lines</span>
-                <span class='fraction'>0/1</span>
-            </div>
-        
-            
-        </div>
-        <p class="quiet">
-            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
-        </p>
-        <template id="filterTemplate">
-            <div class="quiet">
-                Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
-            </div>
-        </template>
-    </div>
-    <div class='status-line low'></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>
-<a name='L3'></a><a href='#L3'>3</a>
-<a name='L4'></a><a href='#L4'>4</a></td><td class="line-coverage quiet"><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-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">const german = <span class="cstat-no" title="statement not covered" >{</span>
-    "de": { "Layer": "Ebene" }
-}
-export default german;</pre></td></tr></table></pre>
-
-                <div class='push'></div><!-- for sticky footer -->
-            </div><!-- /wrapper -->
-            <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 Thu Mar 24 2022 19:39:33 GMT+0000 (Coordinated Universal Time)
-            </div>
-        <script src="../../prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="../../sorter.js"></script>
-        <script src="../../block-navigation.js"></script>
-    </body>
-</html>
-    

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

@@ -1,131 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for src/translations</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="../../prettify.css" />
-    <link rel="stylesheet" href="../../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type='text/css'>
-        .coverage-summary .sorter {
-            background-image: url(../../sort-arrow-sprite.png);
-        }
-    </style>
-</head>
-    
-<body>
-<div class='wrapper'>
-    <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> src/translations</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>0/2</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Branches</span>
-                <span class='fraction'>0/0</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Functions</span>
-                <span class='fraction'>0/0</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
-                <span class="quiet">Lines</span>
-                <span class='fraction'>0/2</span>
-            </div>
-        
-            
-        </div>
-        <p class="quiet">
-            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
-        </p>
-        <template id="filterTemplate">
-            <div class="quiet">
-                Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
-            </div>
-        </template>
-    </div>
-    <div class='status-line low'></div>
-    <div class="pad1">
-<table class="coverage-summary">
-<thead>
-<tr>
-   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
-   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
-   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
-   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
-   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
-   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
-   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
-</tr>
-</thead>
-<tbody><tr>
-	<td class="file low" data-value="english.js"><a href="english.js.html">english.js</a></td>
-	<td data-value="0" class="pic low">
-	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
-	</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="1" class="abs low">0/1</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="1" class="abs low">0/1</td>
-	</tr>
-
-<tr>
-	<td class="file low" data-value="german.js"><a href="german.js.html">german.js</a></td>
-	<td data-value="0" class="pic low">
-	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
-	</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="1" class="abs low">0/1</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="1" class="abs low">0/1</td>
-	</tr>
-
-</tbody>
-</table>
-</div>
-                <div class='push'></div><!-- for sticky footer -->
-            </div><!-- /wrapper -->
-            <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 Thu Mar 24 2022 19:39:33 GMT+0000 (Coordinated Universal Time)
-            </div>
-        <script src="../../prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="../../sorter.js"></script>
-        <script src="../../block-navigation.js"></script>
-    </body>
-</html>
-    

package/jest.config.json

@@ -1,16 +0,0 @@
-{
- "setupFiles": ["jest-webgl-canvas-mock","<rootDir>/src/setupTests.js"],
- "testRegex": "/*.test.js$",
- "collectCoverage": true,
- "coverageReporters": ["lcov"],
- "coverageDirectory": "test-coverage",
- "coverageThreshold": {
-  "global": {
-  "branches": 0,
-  "functions": 0,
-  "lines": 0,
-  "statements": 0
-  }
- },
- "moduleDirectories": ["node_modules", "src"]
-}

package/jsdoc.json

@@ -1,21 +0,0 @@
-{
-    "tags": {
-        "allowUnknownTags": [
-            "pailhead",
-            "component",
-            "component"
-        ] 
-    },
-    "recurseDepth": 10,
-    "opts": {
-      "template": "node_modules/better-docs",
-      "destination": "docs/jsdocs"
-    },
-    "source": {
-        "include": ["./src/"],
-        "excludePattern": ".*/(utils|MlFeatureEditor\/lib)/.*"
-    },
-    "plugins": [
-        "node_modules/better-docs/component"
-    ]
-}