v4.0.1

PaulLeCam · Jun 25, 2022 · dc2c245 · dc2c245
1 parent 0566183
commit dc2c245
Show file tree

Hide file tree

Showing 17 changed files with 2,467 additions and 2,072 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md
@@ -28,4 +28,4 @@ Please describe.
 
 ### Steps to reproduce
 
-Please provide the simplest example possible to reproduce the issue, based on [this CodePen](https://codepen.io/PaulLeCam/pen/OJxEbBW).
+Please provide the simplest example possible to reproduce the issue, based on [this StackBlitz](https://stackblitz.com/edit/react-leaflet-v4?file=src/App.js).
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -24,4 +24,4 @@ If you are looking for implementations of features provided by plugins, they wil
 
 Please check among existing issues (open **and** closed) if the problem you encounter has not been solved before.\
 If you have questions about React or Leaflet not directly related to this library, please ask them using their respective support platforms.\
-For any other issue, please provide a simple description, if relevant with codes examples. You can use [this CodePen](https://codepen.io/PaulLeCam/pen/OJxEbBW) as a starting example.
+For any other issue, please provide a simple description, if relevant with codes examples. You can use [this StackBlitz](https://stackblitz.com/edit/react-leaflet-v4?file=src/App.js) as a starting example.
diff --git a/package.json b/package.json
@@ -18,36 +18,36 @@
   "devDependencies": {
     "@skypack/package-check": "^0.2.2",
     "@swc/cli": "^0.1.55",
-    "@swc/core": "^1.2.183",
+    "@swc/core": "^1.2.205",
     "@swc/jest": "^0.2.21",
-    "@testing-library/react": "^13.2.0",
-    "@testing-library/react-hooks": "^8.0.0",
-    "@types/jest": "^27.5.1",
-    "@types/leaflet": "^1.7.10",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/jest": "^28.1.3",
+    "@types/leaflet": "^1.7.11",
     "@types/warning": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.23.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
     "cross-env": "^7.0.3",
     "del-cli": "^4.0.1",
-    "eslint": "^8.15.0",
+    "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
-    "jest": "^28.1.0",
-    "jest-environment-jsdom": "^28.1.0",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
     "leaflet": "^1.8.0",
-    "prettier": "^2.6.2",
-    "prettier-eslint": "^14.0.3",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-test-renderer": "^18.1.0",
+    "prettier": "^2.7.1",
+    "prettier-eslint": "^15.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "ts-jest-resolver": "^2.0.0",
-    "turbo": "^1.2.9",
-    "typescript": "^4.6.4"
+    "turbo": "^1.3.1",
+    "typescript": "^4.7.4"
   },
   "jest": {
     "projects": [

diff --git a/packages/react-leaflet/__tests__/MapContainer.tsx b/packages/react-leaflet/__tests__/MapContainer.tsx
@@ -14,6 +14,20 @@ describe('MapContainer', () => {
     expect(container).toMatchSnapshot()
   })
 
+  test('re-renders the containing div', () => {
+    const { container, rerender } = render(
+      <StrictMode>
+        <MapContainer key="one" center={[0, 0]} zoom={10} />
+      </StrictMode>,
+    )
+    rerender(
+      <StrictMode>
+        <MapContainer key="two" center={[0, 0]} zoom={10} />
+      </StrictMode>,
+    )
+    expect(container).toMatchSnapshot()
+  })
+
   describe('provides the Map instance', () => {
     test('with the useMap() hook', (done) => {
       function TestChild() {

diff --git a/packages/react-leaflet/__tests__/__snapshots__/MapContainer.tsx.snap b/packages/react-leaflet/__tests__/__snapshots__/MapContainer.tsx.snap
@@ -1,5 +1,99 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`MapContainer re-renders the containing div 1`] = `
+<div>
+  <div
+    class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+    style="position: relative;"
+    tabindex="0"
+  >
+    <div
+      class="leaflet-pane leaflet-map-pane"
+      style="left: 0px; top: 0px;"
+    >
+      <div
+        class="leaflet-pane leaflet-tile-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-overlay-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-shadow-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-marker-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-tooltip-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-popup-pane"
+      />
+    </div>
+    <div
+      class="leaflet-control-container"
+    >
+      <div
+        class="leaflet-top leaflet-left"
+      >
+        <div
+          class="leaflet-control-zoom leaflet-bar leaflet-control"
+        >
+          <a
+            aria-disabled="false"
+            aria-label="Zoom in"
+            class="leaflet-control-zoom-in"
+            href="#"
+            role="button"
+            title="Zoom in"
+          >
+            <span
+              aria-hidden="true"
+            >
+              +
+            </span>
+          </a>
+          <a
+            aria-disabled="false"
+            aria-label="Zoom out"
+            class="leaflet-control-zoom-out"
+            href="#"
+            role="button"
+            title="Zoom out"
+          >
+            <span
+              aria-hidden="true"
+            >
+              −
+            </span>
+          </a>
+        </div>
+      </div>
+      <div
+        class="leaflet-top leaflet-right"
+      />
+      <div
+        class="leaflet-bottom leaflet-left"
+      />
+      <div
+        class="leaflet-bottom leaflet-right"
+      >
+        <div
+          class="leaflet-control-attribution leaflet-control"
+        >
+          <a
+            href="https://leafletjs.com"
+            title="A JavaScript library for interactive maps"
+          >
+            Leaflet
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`MapContainer renders the containing div 1`] = `
 <div>
   <div

diff --git a/packages/react-leaflet/package.json b/packages/react-leaflet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "React components for Leaflet maps",
   "repository": {
     "type": "git",
@@ -50,7 +50,7 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@types/leaflet": "^1.7.10"
+    "@types/leaflet": "^1.7.11"
   },
   "jest": {
     "extensionsToTreatAsEsm": [

diff --git a/packages/react-leaflet/src/MapContainer.tsx b/packages/react-leaflet/src/MapContainer.tsx
@@ -72,7 +72,7 @@ function MapContainerComponent<
     return () => {
       context?.map.remove()
     }
-  }, [])
+  }, [context])
 
   const contents = context ? (
     <LeafletProvider value={context}>{children}</LeafletProvider>

diff --git a/packages/website/docusaurus.config.js b/packages/website/docusaurus.config.js
@@ -7,7 +7,7 @@ module.exports = {
   favicon: 'img/logo.svg',
   organizationName: 'PaulLeCam',
   projectName: 'react-leaflet',
-  stylesheets: ['//unpkg.com/leaflet@1.7.1/dist/leaflet.css'],
+  stylesheets: ['//unpkg.com/leaflet@1.8.0/dist/leaflet.css'],
   themeConfig: {
     // algolia: {
     //   apiKey: '5ec5ae3523b2e316c32bbe5e948cb48d',

diff --git a/packages/website/package.json b/packages/website/package.json
@@ -4,21 +4,21 @@
   "private": true,
   "scripts": {
     "start": "docusaurus start",
-    "build": "docusaurus build",
+    "build": "USE_SIMPLE_CSS_MINIFIER=true docusaurus build",
     "swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy"
+    "deploy": "USE_SIMPLE_CSS_MINIFIER=true docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.20",
-    "@docusaurus/preset-classic": "2.0.0-beta.20",
-    "@docusaurus/theme-live-codeblock": "2.0.0-beta.20",
+    "@docusaurus/core": "2.0.0-beta.21",
+    "@docusaurus/preset-classic": "2.0.0-beta.21",
+    "@docusaurus/theme-live-codeblock": "2.0.0-beta.21",
     "@react-leaflet/docusaurus-plugin": "^1.0.1",
     "classnames": "^2.2.6",
     "leaflet": "^1.8.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-leaflet": "^4.0.0",
-    "typescript": "^4.6.4"
+    "typescript": "^4.7.4"
   },
   "browserslist": {
     "production": [

diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css
@@ -33,3 +33,85 @@
   border-bottom: 2px solid var(--ifm-font-color-base);
   padding-bottom: 5px;
 }
+
+#carbonads * {
+  margin: initial;
+  padding: initial;
+}
+#carbonads {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+  display: flex;
+  max-width: 299px;
+  background-color: hsl(0, 0%, 98%);
+  box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
+  z-index: 100;
+}
+[data-theme='dark'] #carbonads {
+  background-color: hsl(0, 0%, 10%);
+}
+/* Container for mobile display in DocItem */
+.carbonads-container {
+  height: 100px;
+  margin-bottom: 15px;
+}
+.carbonads-container #carbonads {
+  max-width: 100%;
+}
+#carbonads a {
+  color: inherit;
+  text-decoration: none;
+}
+[data-theme='dark'] #carbonads a {
+  color: #ddd;
+}
+#carbonads a:hover {
+  color: inherit;
+}
+[data-theme='dark'] #carbonads a:hover {
+  color: #ddd;
+}
+#carbonads span {
+  position: relative;
+  display: block;
+  overflow: hidden;
+}
+#carbonads .carbon-wrap {
+  display: flex;
+}
+#carbonads .carbon-img {
+  display: block;
+  margin: 0;
+  line-height: 1;
+}
+#carbonads .carbon-img img {
+  display: block;
+}
+#carbonads .carbon-text {
+  font-size: 13px;
+  padding: 10px;
+  margin-bottom: 16px;
+  line-height: 1.5;
+  text-align: left;
+}
+#carbonads .carbon-poweredby {
+  display: block;
+  padding: 6px 8px;
+  background: #f1f1f2;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 1;
+  border-top-left-radius: 3px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+[data-theme='dark'] #carbonads .carbon-poweredby {
+  color: #aaa;
+  background: #1e2021;
+}
+
diff --git a/packages/website/src/theme/CarbonAd.js b/packages/website/src/theme/CarbonAd.js
@@ -0,0 +1,20 @@
+import React, { useEffect, useRef } from 'react'
+
+export default function CarbonAd() {
+  const scriptAddedRef = useRef(false)
+  const containerRef = useRef()
+
+  useEffect(() => {
+    if (containerRef.current != null && scriptAddedRef.current === false) {
+      const scriptTag = document.createElement('script')
+      scriptTag.type = 'text/javascript'
+      scriptTag.src =
+        '//cdn.carbonads.com/carbon.js?serve=CEAIC2QL&placement=react-leafletjsorg'
+      scriptTag.id = '_carbonads_js'
+      containerRef.current.appendChild(scriptTag)
+      scriptAddedRef.current = true
+    }
+  }, [containerRef.current])
+
+  return <span ref={containerRef} />
+}
diff --git a/packages/website/src/theme/DocItem/index.d.ts b/packages/website/src/theme/DocItem/index.d.ts
@@ -0,0 +1,4 @@
+/// <reference types="@docusaurus/plugin-content-docs" />
+/// <reference types="react" />
+import type { Props } from '@theme/DocItem';
+export default function DocItem(props: Props): JSX.Element;