Update React to version 18 and other deps (#890)

This PR aims at updating some packages. I'll keep this in draft until I'll be more happy with the results. Current setup seems to work, I'll let the CI run and see how bad this is. Packages that needs to be updated/replaces: - [x] ~autocompete - The only warning left in the console is related to the autocomplete, which probably needs to be updated since it's a package that wasn't updated in the last 6 years.~ #611 - [x] ~Codemirror is also something that will need an update, but it looks too complicated at this point in time, so let's see how this goes.~ #891 - [ ] react-color - [x] ~react-aria-menubutton~ #846 - [ ] Others? Most of the changes here are related to types, which is good.
2025-12-05 22:00:00 +00:00 · 2024-03-21 22:51:29 +02:00
parent 355b663e7e
commit ff15b77b7f
15 changed files with 2570 additions and 6288 deletions
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1 @@
+legacy-peer-deps = true
--- a/4
+++ b/4
@@ -2,8 +2,8 @@ FROM node:18 as builder
 WORKDIR /maputnik

 # Only copy package.json to prevent npm install from running on every build
-COPY package.json package-lock.json ./
-RUN npm install
+COPY package.json package-lock.json .npmrc ./
+RUN npm ci

 # Build maputnik
 COPY . .
--- a/README.md
+++ b/README.md
@@ -93,11 +93,6 @@ You can also see the tests as they run or select which suites to run by executin
 npm run cy:open
 ```

-
-## Related Projects
-
- [maputnik-dev-server](https://github.com/nycplanning/labs-maputnik-dev-server) - An express.js server that allows for quickly loading the style from any mapboxGL map into mapuntnik.
-
 ## Sponsors

 Thanks to the supporters of the **[Kickstarter campaign](https://www.kickstarter.com/projects/174808720/maputnik-visual-map-editor-for-mapbox-gl)**. This project would not be possible without these commercial and individual sponsors.
--- a/cypress/e2e/maputnik-driver.ts
+++ b/cypress/e2e/maputnik-driver.ts
@@ -1,3 +1,5 @@
+/// <reference types="cypress-plugin-tab" />
+
 import { CypressHelper } from "@shellygo/cypress-test-utils";
 import { Assertable, then } from "@shellygo/cypress-test-utils/assertable";
 import MaputnikCypressHelper from "./maputnik-cypress-helper";
@@ -14,7 +16,7 @@ const styleFromWindow = (win: Window) => {
 export class MaputnikAssertable<T> extends Assertable<T> {
  shouldEqualToStoredStyle = () =>
    then(
-      new CypressHelper().get.window().then((win) => {
+      new CypressHelper().get.window().then((win: Window) => {
        const style = styleFromWindow(win);
        then(this.chainable).shouldDeepNestedInclude(style);
      })
--- a/cypress/e2e/modals.cy.ts
+++ b/cypress/e2e/modals.cy.ts
@@ -142,7 +142,7 @@ describe("modals", () => {
      );
      when.click("modal:settings.name");
      then(
-        get.styleFromLocalStorage().pipe((style) => style.metadata)
+        get.styleFromLocalStorage().then((style) => style.metadata)
      ).shouldInclude({
        "maputnik:openmaptiles_access_token": apiKey,
      });
@@ -156,7 +156,7 @@ describe("modals", () => {
      );
      when.click("modal:settings.name");
      then(
-        get.styleFromLocalStorage().pipe((style) => style.metadata)
+        get.styleFromLocalStorage().then((style) => style.metadata)
      ).shouldInclude({ "maputnik:thunderforest_access_token": apiKey });
    });

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -23,19 +23,21 @@
    "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
    "@maplibre/maplibre-gl-geocoder": "^1.5.0",
    "@maplibre/maplibre-gl-inspect": "^1.6.3",
-    "@maplibre/maplibre-gl-style-spec": "^20.1.0",
-    "@mdi/js": "^6.6.96",
-    "@mdi/react": "^1.5.0",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
+    "@maplibre/maplibre-gl-style-spec": "^20.1.1",
+    "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
    "array-move": "^4.0.0",
    "buffer": "^6.0.3",
-    "classnames": "^2.3.1",
+    "classnames": "^2.5.1",
    "codemirror": "^5.65.2",
    "color": "^4.2.3",
+    "cypress-plugin-tab": "^1.0.5",
    "detect-browser": "^5.3.0",
+    "events": "^3.3.0",
    "file-saver": "^2.0.5",
-    "json-stringify-pretty-compact": "^3.0.0",
+    "json-stringify-pretty-compact": "^4.0.0",
    "json-to-ast": "^2.1.0",
    "jsonlint": "github:josdejong/jsonlint#85a19d7",
    "lodash": "^4.17.21",
@@ -45,29 +47,29 @@
    "lodash.get": "^4.4.2",
    "lodash.isequal": "^4.5.0",
    "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^4.0.0",
+    "maplibre-gl": "^4.1.1",
    "maputnik-design": "github:maputnik/design#172b06c",
    "ol": "^6.14.1",
    "ol-mapbox-style": "^7.1.1",
    "prop-types": "^15.8.1",
-    "react": "^16.0.0",
-    "react-accessible-accordion": "^4.0.0",
+    "react": "^18.2.0",
+    "react-accessible-accordion": "^5.0.0",
    "react-aria-menubutton": "^7.0.3",
-    "react-aria-modal": "^4.0.1",
+    "react-aria-modal": "^5.0.2",
    "react-autobind": "^1.0.6",
    "react-autocomplete": "^1.8.1",
    "react-collapse": "^5.1.1",
    "react-color": "^2.19.3",
-    "react-dom": "^16.0.0",
+    "react-dom": "^18.2.0",
    "react-file-reader-input": "^2.0.0",
    "react-icon-base": "^2.1.2",
-    "react-icons": "^4.3.1",
+    "react-icons": "^5.0.1",
    "react-sortable-hoc": "^2.0.0",
    "reconnecting-websocket": "^4.4.0",
-    "sass": "^1.50.0",
-    "slugify": "^1.6.5",
+    "sass": "^1.72.0",
+    "slugify": "^1.6.6",
    "string-hash": "^1.1.3",
-    "url": "^0.11.0"
+    "url": "^0.11.3"
  },
  "jshintConfig": {
    "esversion": 6
@@ -87,15 +89,15 @@
    }
  },
  "devDependencies": {
-    "@cypress/code-coverage": "^3.12.15",
+    "@cypress/code-coverage": "^3.12.30",
    "@istanbuljs/nyc-config-typescript": "^1.0.2",
    "@rollup/plugin-replace": "^5.0.5",
-    "@shellygo/cypress-test-utils": "^2.0.17",
+    "@shellygo/cypress-test-utils": "^2.0.52",
    "@types/codemirror": "^5.60.15",
    "@types/color": "^3.0.6",
    "@types/cors": "^2.8.17",
    "@types/file-saver": "^2.0.7",
-    "@types/geojson": "^7946.0.13",
+    "@types/geojson": "^7946.0.14",
    "@types/json-to-ast": "^2.1.4",
    "@types/lodash.capitalize": "^4.2.9",
    "@types/lodash.clamp": "^4.0.9",
@@ -103,37 +105,37 @@
    "@types/lodash.get": "^4.4.9",
    "@types/lodash.isequal": "^4.5.8",
    "@types/lodash.throttle": "^4.1.9",
+    "@types/mocha": "^10.0.6",
    "@types/randomcolor": "^0.5.9",
-    "@types/react": "^16.14.52",
-    "@types/react-aria-menubutton": "^6.2.13",
-    "@types/react-aria-modal": "^4.0.9",
-    "@types/react-autocomplete": "^1.8.9",
+    "@types/react": "^18.2.67",
+    "@types/react-aria-menubutton": "^6.2.14",
+    "@types/react-aria-modal": "^4.0.10",
+    "@types/react-autocomplete": "^1.8.10",
    "@types/react-collapse": "^5.0.4",
-    "@types/react-color": "^3.0.10",
-    "@types/react-dom": "^16.9.24",
+    "@types/react-color": "^3.0.12",
+    "@types/react-dom": "^18.2.22",
    "@types/react-file-reader-input": "^2.0.4",
    "@types/react-icon-base": "^2.1.6",
    "@types/string-hash": "^1.1.3",
-    "@types/uuid": "^9.0.7",
-    "@vitejs/plugin-react": "^4.2.0",
+    "@types/uuid": "^9.0.8",
+    "@vitejs/plugin-react": "^4.2.1",
    "cors": "^2.8.5",
-    "cypress": "^13.6.1",
-    "eslint": "^8.56.0",
-    "eslint-plugin-react": "^7.33.2",
+    "cypress": "^13.7.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "express": "^4.17.3",
+    "eslint-plugin-react-refresh": "^0.4.6",
    "istanbul": "^0.4.5",
-    "istanbul-lib-coverage": "^3.2.0",
-    "mocha": "^9.2.2",
-    "postcss": "^8.4.12",
-    "react-hot-loader": "^4.13.0",
-    "stylelint": "^14.6.1",
-    "stylelint-config-recommended-scss": "^6.0.0",
-    "stylelint-scss": "^4.2.0",
-    "typescript": "^5.3.3",
-    "uuid": "^8.3.2",
-    "vite": "^5.0.12",
-    "vite-plugin-istanbul": "^5.0.0"
+    "istanbul-lib-coverage": "^3.2.2",
+    "mocha": "^10.3.0",
+    "postcss": "^8.4.38",
+    "react-hot-loader": "^4.13.1",
+    "stylelint": "^16.2.1",
+    "stylelint-config-recommended-scss": "^14.0.0",
+    "stylelint-scss": "^6.2.1",
+    "typescript": "^5.4.3",
+    "uuid": "^9.0.1",
+    "vite": "^5.2.2",
+    "vite-plugin-istanbul": "^6.0.0"
  }
 }
--- a/src/components/AppMessagePanel.tsx
+++ b/src/components/AppMessagePanel.tsx
@@ -4,7 +4,7 @@ import {LayerSpecification, StyleSpecification} from 'maplibre-gl';

 type AppMessagePanelProps = {
  errors?: unknown[]
-  infos?: unknown[]
+  infos?: string[]
  mapStyle?: StyleSpecification
  onLayerSelect?(...args: unknown[]): unknown
  currentLayer?: LayerSpecification
--- a/src/components/Block.tsx
+++ b/src/components/Block.tsx
@@ -1,10 +1,10 @@
-import React, {SyntheticEvent} from 'react'
+import React, {PropsWithChildren, SyntheticEvent} from 'react'
 import classnames from 'classnames'
 import FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'


-type BlockProps = {
+type BlockProps = PropsWithChildren & {
  "data-wd-key"?: string
  label?: string
  action?: React.ReactElement
--- a/src/components/FieldDocLabel.tsx
+++ b/src/components/FieldDocLabel.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'

 type FieldDocLabelProps = {
-  label: object | string | undefined
+  label: JSX.Element | string | undefined
  fieldSpec?: {
    doc?: string
  }
--- a/src/components/Fieldset.tsx
+++ b/src/components/Fieldset.tsx
@@ -1,9 +1,9 @@
-import React, { ReactElement } from 'react'
+import React, { PropsWithChildren, ReactElement } from 'react'
 import FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'
 import generateUniqueId from '../libs/document-uid';

-type FieldsetProps = {
+type FieldsetProps = PropsWithChildren & {
  label?: string,
  fieldSpec?: { doc?: string },
  action?: ReactElement,
--- a/src/components/FilterEditorBlock.tsx
+++ b/src/components/FilterEditorBlock.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import InputButton from './InputButton'
 import {MdDelete} from 'react-icons/md'

-type FilterEditorBlockProps = {
+type FilterEditorBlockProps = PropsWithChildren & {
  onDelete(...args: unknown[]): unknown
 };

--- a/src/components/LayerListItem.tsx
+++ b/src/components/LayerListItem.tsx
@@ -139,6 +139,6 @@ class LayerListItem extends React.Component<LayerListItemProps> {
  }
 }

-const LayerListItemSortable = SortableElement((props: LayerListItemProps) => <LayerListItem {...props} />);
+const LayerListItemSortable = SortableElement<LayerListItemProps>((props: LayerListItemProps) => <LayerListItem {...props} />);

 export default LayerListItemSortable;
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import {MdClose} from 'react-icons/md'
 import AriaModal from 'react-aria-modal'
 import classnames from 'classnames';


-type ModalProps = {
+type ModalProps = PropsWithChildren & {
  "data-wd-key"?: string
  isOpen: boolean
  title: string
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,15 +1,15 @@
 import { IconContext } from "react-icons";
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';

 import './favicon.ico'
 import './styles/index.scss'
 import App from './components/App';

-ReactDOM.render(
+const root = createRoot(document.querySelector("#app"));
+root.render(
  <IconContext.Provider value={{className: 'react-icons'}}>
    <App/>
-  </IconContext.Provider>,
-  document.querySelector("#app")
+  </IconContext.Provider>
 );

 // Hide the loader.