refactor: upgrade to react-leaflet@3.0.0 (#101)

* feat: upgrade to react-leaflet@3.0.0-beta

* chore: release version 2.0.0-alpha.0

* style: prettier config

* build: use @babel/runtime

* chore: release 2.0.0-alpha.1

* chore: configure eslint with jest

* feat: drop support for IE11

* chore: release v2.0.0-beta.0

* fix: fix commonjs build

* chore: release v2.0.0-beta.1

* chore: release v2.0.0-beta.2

* chore: make @babel/runtime dependency instead of peerdependency

* chore: drop support for edge 18

* build: typescript tooling

* chore: upgrade dependencies

* chore: use @typescript-eslint/parser

* chore: upgrade to react@^17.0.0-rc

* chore: upgrade dependencies

* chore: upgrade dependencies

* refactor: switch to named export

* build: add react-leaflet-v3 tag to npm keywords

* chore: upgrade dependencies

* chore: release v2.0.0-beta.4

* docs: update readme

* chore: upgrade dependencies

* chore: upgrade dependencies

.babelrc.js

@@ -0,0 +1,38 @@
+const ENV = process.env.BABEL_ENV || process.env.NODE_ENV || 'development';
+
+const config = {
+  presets: [
+    [
+      '@babel/env',
+      {
+        targets: {
+          browsers: [
+            'chrome > 74',
+            'edge >= 81',
+            'firefox >= 68',
+            'ios >= 12',
+            'opera >= 58',
+            'safari >= 12',
+            'samsung >= 10'
+          ]
+        },
+        modules: false,
+        loose: true,
+        bugfixes: true,
+        debug: false
+      }
+    ],
+    '@babel/react',
+    '@babel/typescript'
+  ],
+  env: {
+    cjs: {
+      plugins: ['@babel/transform-modules-commonjs']
+    },
+    test: {
+      plugins: ['@babel/transform-modules-commonjs']
+    }
+  }
+};
+
+module.exports = config;

.eslintrc

@@ -1,9 +1,9 @@
 {
-  "parser": "babel-eslint",
-  "plugins": [
-    "react", "flowtype"
-  ],
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react", "@typescript-eslint"],
   "parserOptions": {
+    "ecmaVersion": 2020,
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
@@ -13,5 +13,9 @@
     "browser": true,
     "es6": true
   },
-  "extends": ["eslint:recommended","plugin:react/recommended", "plugin:flowtype/recommended"]
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ]
 }

.prettierrc

@@ -1,3 +1,5 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "arrowParens": "always",
+  "trailingComma": "none"
 }

README.md

@@ -1,4 +1,5 @@
 # React-Leaflet-NmScale
+
 [![npm (scoped)](https://img.shields.io/npm/v/@marfle/react-leaflet-nmscale.svg)](https://www.npmjs.com/package/@marfle/react-leaflet-nmscale)
 
 React nautical mile scale component for [`React-Leaflet`](https://github.com/PaulLeCam/react-leaflet)
@@ -14,18 +15,18 @@ npm install @marfle/react-leaflet-nmscale
 ## Usage
 
 Import:
+
 ```javascript
-import { Map, TileLayer } from "react-leaflet";
-import NmScale from "@marfle/react-leaflet-nmscale";
+import { Map, TileLayer } from 'react-leaflet';
+import { NmScale } from '@marfle/react-leaflet-nmscale';
 ```
 
 Use:
+
 ```jsx
 <Map center={[0, 0]} zoom={10}>
-  <TileLayer
-    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-  <TileLayer
-    url="https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />
+  <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+  <TileLayer url="https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />
   <NmScale />
 </Map>
 ```

__tests__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}

__tests__/nmscale.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { renderIntoDocument } from 'react-dom/test-utils';
+
+import { MapContainer, TileLayer } from 'react-leaflet';
+
+import { NmScale } from '../src/nmscale';
+import LeafletNmScale from '../src/leafletnmscale';
+
+describe('NmScale', () => {
+  it('adds the scale to the map', (done) => {
+    const spy_updateNautical = jest.spyOn(
+      LeafletNmScale.prototype,
+      '_updateNautical'
+    );
+
+    renderIntoDocument(
+      <MapContainer
+        center={[0, 0]}
+        zoom={10}
+        whenCreated={() => {
+          expect(spy_updateNautical).toHaveBeenCalledTimes(1);
+          done();
+        }}
+      >
+        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+        <NmScale />
+      </MapContainer>
+    );
+  });
+});