@mapcomponents/react-maplibre 0.1.34 → 0.1.37

package/docs-build/vendors~main~dab50aa4.b0d58038.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vendors~main~dab50aa4.b0d58038.iframe.bundle.js","sources":["webpack:///vendors~main~dab50aa4.b0d58038.iframe.bundle.js"],"mappings":"AAAA;;;;;;;;;;AAuvRA;;;;;;;;AASA;;;;;;;;;;;;AAaA;;;;AAuBA;;;AAGA;AACA;AACA;;;AAGA;AACA;;;AAGA;;;;;;;;;AASA;;AAEA;AACA;AACA;;;AAGA;;;;;AAKA;;AAEA;;;;AAIA;;;;;;;;AAwoBA;;;;;;;;;;;;;;;AAgCA;AAqBA;AACA;AAiCA;AACA;;;;;AAwmBA","sourceRoot":""}

package/package.json

@@ -1,55 +1,149 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.34",
+  "version": "0.1.37",
+  "main": "index.js",
   "license": "MIT",
-  "private": false,
   "module": "dist/index.esm.js",
-  "source": "src/index.js",
+  "source": "src/index.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "start": "start-storybook -p 6006 -s public",
+    "test": "node scripts/test.js --env=jest-environment-jsdom-sixteen --watchAll=false --coverage",
+    "test:noninteractive": "node scripts/test.js --env=jest-environment-jsdom-sixteen --verbose --watchAll=false --coverage",
+    "test:generate-output": "node scripts/test.js --env=jest-environment-jsdom-sixteen --watchAll=false --json --outputFile=./src/.jest-test-results.json || true",
+    "build-storybook": "build-storybook -o docs-build -s public",
+    "storybook-docs": "start-storybook --docs --no-manager-cache",
+    "build-catalogue-meta": "node scripts/build-catalogue-meta.js",
+    "build-catalogue-markdown-docs": "node scripts/build-catalogue-markdown-docs.js",
+    "create-component": "./scripts/create-map-component.sh"
+  },
   "dependencies": {
-    "@emotion/css": "^11.1.3",
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
-    "@fontsource/roboto": "^4.5.1",
-    "@mapbox/mapbox-gl-draw": "^1.2.0",
+    "@emotion/css": "^11.7.1",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@mapbox/mapbox-gl-draw": "^1.3.0",
     "@mapbox/mapbox-gl-sync-move": "^0.3.0",
     "@mapcomponents/react-core": "^0.1.7",
-    "@mui/icons-material": "^5.3.1",
-    "@mui/material": "5.4.0",
-    "@mui/styles": "^5.3.0",
+    "@mui/icons-material": "^5.5.1",
+    "@mui/material": "5.5.3",
+    "@mui/styles": "^5.5.3",
     "@turf/turf": "^6.5.0",
     "jspdf": "^2.5.1",
     "maplibre-gl": "^2.1.7",
-    "react-i18next": "^11.14.3",
-    "three": "^0.137.5",
+    "three": "^0.139.1",
     "uuid": "^8.3.2",
     "wms-capabilities": "^0.5.1",
     "xmldom": "^0.6.0"
   },
-  "dependenciesComment": {
-    "xmldom": "MlGPXLayer"
-  },
-  "browser": {
-    "fs": false,
-    "path": false,
-    "os": false
-  },
-  "scripts": {
-    "start": "start-storybook -p 6006 -s public",
-    "build": "rollup -c",
-    "test": "react-scripts test --env=jsdom --verbose --watchAll=true --coverage",
-    "test:noninteractive": "react-scripts test --verbose --watchAll=false --coverage",
-    "test:generate-output": "react-scripts test --watchAll=false --json --outputFile=./src/.jest-test-results.json || true",
-    "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -o docs-build -s public",
-    "storybook-docs": "start-storybook --docs --no-manager-cache",
-    "build-catalogue-meta": "node scripts/build-catalogue-meta.js",
-    "build-catalogue-markdown-docs": "node scripts/build-catalogue-markdown-docs.js",
-    "create-component": "./scripts/create-map-component.sh",
-    "docs-create": "jsdoc -r -c ./jsdoc.json -d docs/jsdocs/react-map-components-maplibre/$npm_package_version",
-    "docs-serve": "http-server ./js-docs/react-map-components-maplibre/$npm_package_version -p 3001"
+  "devDependencies": {
+    "@babel/preset-react": "^7.16.7",
+    "@rollup/plugin-alias": "^3.1.9",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^21.0.3",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-url": "^6.1.0",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-docs": "^6.4.20",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/node-logger": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/theming": "^6.4.19",
+    "@svgr/rollup": "^6.2.1",
+    "@testing-library/react": "^12.1.2",
+    "@types/enzyme": "^3.10.11",
+    "@types/mapbox__mapbox-gl-draw": "^1.2.3",
+    "@types/mapbox__point-geometry": "^0.1.2",
+    "@types/mapbox__vector-tile": "^1.3.0",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@types/uuid": "^8.3.4",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+    "babel-jest": "^26.6.0",
+    "babel-plugin-inline-react-svg": "^2.0.1",
+    "babel-plugin-styled-components": "^2.0.6",
+    "babel-preset-react-app": "^10.0.1",
+    "docz": "^2.4.0",
+    "enzyme": "^3.11.0",
+    "glob": "^7.2.0",
+    "jest": "26.6.0",
+    "jest-circus": "26.6.0",
+    "jest-environment-jsdom-sixteen": "^2.0.0",
+    "jest-enzyme": "^7.1.2",
+    "jest-resolve": "26.6.0",
+    "jest-watch-typeahead": "0.6.1",
+    "postcss": "^8.4.12",
+    "react": "^17.0.2",
+    "react-app-polyfill": "^3.0.0",
+    "react-dev-utils": "^12.0.0",
+    "react-dom": "^17.0.2",
+    "react-i18next": "^11.16.2",
+    "rollup": "^2.70.1",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-import-css": "^3.0.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.31.2",
+    "showdown": "^2.0.3",
+    "ts-jest": "^27.1.4",
+    "typedoc": "^0.22.13",
+    "typedoc-plugin-missing-exports": "^0.22.6",
+    "typedoc-twilio-theme": "^1.0.1",
+    "typescript": "^4.6.3"
   },
   "jest": {
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts"
+    ],
+    "setupFiles": [
+      "react-app-polyfill/jsdom"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.js"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
+    ],
+    "testEnvironment": "jsdom",
+    "testRunner": "./node_modules/jest-circus/runner.js",
+    "transform": {
+      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
+      "^.+\\.module\\.(css|sass|scss)$"
+    ],
+    "modulePaths": [],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web",
+      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
+      "^!maplibre-gl$": "<rootDir>/node_modules/maplibre-gl"
+    },
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "web.ts",
+      "ts",
+      "web.tsx",
+      "tsx",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node"
+    ],
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ],
+    "resetMocks": true,
     "coveragePathIgnorePatterns": [
       "/node_modules/",
       "/src/decorators/",
@@ -73,86 +167,10 @@
       ".*/utils/.*",
       ".*/util/.*",
       ".*/assets/.*",
+      ".*/custom.d.tsx",
       "custom\\-.*\\-mode\\.js$",
       "(.stories)\\.(ts|tsx|js)$",
       "/distribution/.*\\.(ts|js)$"
-    ],
-    "moduleNameMapper": {
-      "^!maplibre-gl$": "<rootDir>/node_modules/maplibre-gl"
-    }
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "rules": {
-      "import/no-webpack-loader-syntax": "off"
-    }
-  },
-  "browserslist": {
-    "production": [
-      "defaults",
-      "not ie 11"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
     ]
-  },
-  "prettier": {
-    "arrowParens": "always"
-  },
-  "peerDependencies": {},
-  "devDependencies": {
-    "@babel/cli": "^7.15.4",
-    "@babel/core": "^7.17.5",
-    "@babel/plugin-external-helpers": "^7.14.5",
-    "@babel/plugin-syntax-jsx": "^7.14.5",
-    "@babel/preset-env": "^7.13.9",
-    "@babel/preset-react": "^7.14.5",
-    "@emotion/babel-plugin": "^11.3.0",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-url": "^6.1.0",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-docs": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/addons": "^6.3.12",
-    "@storybook/node-logger": "^6.3.12",
-    "@storybook/preset-create-react-app": "^3.1.5",
-    "@storybook/react": "^6.3.12",
-    "@storybook/theming": "^6.3.12",
-    "@svgr/rollup": "^5.5.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
-    "babel-jest": "^27.5.1",
-    "better-docs": "^2.3.2",
-    "canvas": "^2.7.0",
-    "enzyme": "^3.11.0",
-    "glob": "^7.1.6",
-    "http-server": "^13.0.2",
-    "jest-enzyme": "^7.1.2",
-    "jest-webgl-canvas-mock": "^0.2.3",
-    "puppeteer": "^8.0.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "4.0.3",
-    "react-spinners": "^0.10.6",
-    "react-test-renderer": "^17.0.2",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-import-css": "^3.0.2",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "sass": "^1.42.1",
-    "showdown": "^1.9.1",
-    "taffydb": "^2.7.3",
-    "ts-jest": "^26.5.3",
-    "typescript": "^4.4.2",
-    "web-vitals": "^0.2.4",
-    "webpack-merge": "^5.8.0"
   }
 }

package/rollup.config.js

@@ -1,10 +1,16 @@
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "rollup-plugin-typescript2";
+
 import babel from "@rollup/plugin-babel";
 import url from "@rollup/plugin-url";
 import external from "rollup-plugin-peer-deps-external";
 
 import css from "rollup-plugin-import-css";
 import del from "rollup-plugin-delete";
-import svgr from '@svgr/rollup';
+import svgr from "@svgr/rollup";
+
 import pkg from "./package.json";
 
 const config = {
@@ -15,10 +21,18 @@ const config = {
       svgo: false,
     }),
     url(),
-    external(),
     babel({
       exclude: "node_modules/**",
       babelHelpers: "bundled",
+      presets: ["@babel/preset-react"],
+    }),
+    external(),
+    peerDepsExternal(),
+    resolve(),
+    commonjs(),
+    typescript({
+      useTsconfigDeclarationDir: true,
+      tsconfig: "tsconfig.json",
     }),
     css(),
     del({ targets: ["dist/*"] }),
@@ -28,7 +42,16 @@ const config = {
     "d3",
     "@emotion/react",
     "@emotion/styled",
-    ...Object.keys(pkg.peerDependencies || {}),
+    ...Object.keys(pkg.peerDependencies || pkg.devDependencies),
   ],
+  inlineDynamicImports: true,
+  onwarn: function (warning, warn) {
+    if (
+      warning.code === "CIRCULAR_DEPENDENCY" ||
+      warning.code === "THIS_IS_UNDEFINED"
+    )
+      return;
+    warn(warning);
+  },
 };
 export default config;

package/scripts/start.js

@@ -0,0 +1,166 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'development';
+process.env.NODE_ENV = 'development';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+
+const fs = require('fs');
+const chalk = require('react-dev-utils/chalk');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const clearConsole = require('react-dev-utils/clearConsole');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const {
+  choosePort,
+  createCompiler,
+  prepareProxy,
+  prepareUrls,
+} = require('react-dev-utils/WebpackDevServerUtils');
+const openBrowser = require('react-dev-utils/openBrowser');
+const semver = require('semver');
+const paths = require('../config/paths');
+const configFactory = require('../config/webpack.config');
+const createDevServerConfig = require('../config/webpackDevServer.config');
+const getClientEnvironment = require('../config/env');
+const react = require(require.resolve('react', { paths: [paths.appPath] }));
+
+const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
+const useYarn = fs.existsSync(paths.yarnLockFile);
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// Tools like Cloud9 rely on this.
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const HOST = process.env.HOST || '0.0.0.0';
+
+if (process.env.HOST) {
+  console.log(
+    chalk.cyan(
+      `Attempting to bind to HOST environment variable: ${chalk.yellow(
+        chalk.bold(process.env.HOST)
+      )}`
+    )
+  );
+  console.log(
+    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
+  );
+  console.log(
+    `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
+  );
+  console.log();
+}
+
+// We require that you explicitly set browsers and do not fall back to
+// browserslist defaults.
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // We attempt to use the default port but if it is busy, we offer the user to
+    // run on a different port. `choosePort()` Promise resolves to the next free port.
+    return choosePort(HOST, DEFAULT_PORT);
+  })
+  .then(port => {
+    if (port == null) {
+      // We have not found a port.
+      return;
+    }
+
+    const config = configFactory('development');
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const appName = require(paths.appPackageJson).name;
+
+    const useTypeScript = fs.existsSync(paths.appTsConfig);
+    const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+    const urls = prepareUrls(
+      protocol,
+      HOST,
+      port,
+      paths.publicUrlOrPath.slice(0, -1)
+    );
+    const devSocket = {
+      warnings: warnings =>
+        devServer.sockWrite(devServer.sockets, 'warnings', warnings),
+      errors: errors =>
+        devServer.sockWrite(devServer.sockets, 'errors', errors),
+    };
+    // Create a webpack compiler that is configured with custom messages.
+    const compiler = createCompiler({
+      appName,
+      config,
+      devSocket,
+      urls,
+      useYarn,
+      useTypeScript,
+      tscCompileOnError,
+      webpack,
+    });
+    // Load proxy config
+    const proxySetting = require(paths.appPackageJson).proxy;
+    const proxyConfig = prepareProxy(
+      proxySetting,
+      paths.appPublic,
+      paths.publicUrlOrPath
+    );
+    // Serve webpack assets generated by the compiler over a web server.
+    const serverConfig = createDevServerConfig(
+      proxyConfig,
+      urls.lanUrlForConfig
+    );
+    const devServer = new WebpackDevServer(compiler, serverConfig);
+    // Launch WebpackDevServer.
+    devServer.listen(port, HOST, err => {
+      if (err) {
+        return console.log(err);
+      }
+      if (isInteractive) {
+        clearConsole();
+      }
+
+      if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
+        console.log(
+          chalk.yellow(
+            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
+          )
+        );
+      }
+
+      console.log(chalk.cyan('Starting the development server...\n'));
+      openBrowser(urls.localUrlForBrowser);
+    });
+
+    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
+      process.on(sig, function () {
+        devServer.close();
+        process.exit();
+      });
+    });
+
+    if (process.env.CI !== 'true') {
+      // Gracefully exit when stdin ends
+      process.stdin.on('end', function () {
+        devServer.close();
+        process.exit();
+      });
+    }
+  })
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });

package/scripts/test.js

@@ -0,0 +1,53 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+
+const jest = require('jest');
+const execSync = require('child_process').execSync;
+let argv = process.argv.slice(2);
+
+function isInGitRepository() {
+  try {
+    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function isInMercurialRepository() {
+  try {
+    execSync('hg --cwd . root', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+// Watch unless on CI or explicitly running all tests
+if (
+  !process.env.CI &&
+  argv.indexOf('--watchAll') === -1 &&
+  argv.indexOf('--watchAll=false') === -1
+) {
+  // https://github.com/facebook/create-react-app/issues/5210
+  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
+  argv.push(hasSourceControl ? '--watch' : '--watchAll');
+}
+
+
+jest.run(argv);

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

@@ -18,7 +18,19 @@ export default storyoptions;
 
 const Template = (args) => (
   <MapComponentsProvider>
-    <MapLibreMap options={args.options} />
+    <MapLibreMap
+      options={args.options}
+      style={{
+        position: "absolute",
+        height: "100vh",
+        width: "100vw",
+        top: 0,
+        right: 0,
+        left: 0,
+        bottom: 0,
+        zIndex: 100,
+      }}
+    />
   </MapComponentsProvider>
 );
 
@@ -27,10 +39,7 @@ ExampleConfig.args = {
   options: {
     style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
     center: [8.607, 53.1409349],
-    maxBounds: [
-      [1.40625, 43.452919],
-      [17.797852, 55.973798],
-    ],
+    zoom: 14
   },
 };
 ExampleConfig.parameters = {};

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

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { mount, configure } from "enzyme";
 import { waitFor } from "@testing-library/react";
 import { MapContext, MapComponentsProvider } from "@mapcomponents/react-core";