Initial work to convert from Mapbox GL v1.13 to MapLibre v2.4.0.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "maputnik",
-  "version": "1.7.0",
-  "description": "A MapboxGL visual style editor",
+  "version": "2.0.0-pre.1",
+  "description": "A MapLibre GL visual style editor",
   "main": "''",
   "scripts": {
     "stats": "webpack --config config/webpack.production.config.js --progress=profile --json > stats.json",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@babel/runtime": "^7.17.9",
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
-    "@mapbox/mapbox-gl-style-spec": "^13.23.1",
+    "@maplibre/maplibre-gl-style-spec": "^17.0.1",
     "@mdi/react": "^1.5.0",
     "array-move": "^4.0.0",
     "classnames": "^2.3.1",
@@ -46,7 +46,7 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^1.13.2",
+    "maplibre-gl": "^2.4.0",
     "mapbox-gl-inspect": "^1.3.1",
     "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^6.14.1",
@@ -100,7 +100,7 @@
       "node": true,
       "es6": true
     },
-    "parser": "babel-eslint",
+    "parser": "@babel/eslint-parser",
     "parserOptions": {
       "ecmaVersion": 6,
       "sourceType": "module",
@@ -118,6 +118,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
@@ -136,7 +137,6 @@
     "@wdio/mocha-framework": "^7.19.3",
     "@wdio/selenium-standalone-service": "^7.19.1",
     "@wdio/spec-reporter": "^7.19.1",
-    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.4",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-static-fs": "^3.0.0",

src/components/App.jsx

@@ -25,7 +25,7 @@ import ModalSurvey from './ModalSurvey'
 import ModalDebug from './ModalDebug'
 
 import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
-import {latest, validate} from '@mapbox/mapbox-gl-style-spec'
+import {latest, validate} from '@maplibre/maplibre-gl-style-spec'
 import style from '../libs/style'
 import { initialStyleUrl, loadStyleUrl, removeStyleQuerystring } from '../libs/urlopen'
 import { undoMessages, redoMessages } from '../libs/diffmessage'

src/components/Collapse.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Collapse as ReactCollapse from 'react-collapse'
+import { Collapse as ReactCollapse } from 'react-collapse'
 import accessibility from '../../libs/accessibility'
 
 

src/components/FieldFunction.jsx

@@ -5,7 +5,7 @@ import SpecProperty from './_SpecProperty'
 import DataProperty from './_DataProperty'
 import ZoomProperty from './_ZoomProperty'
 import ExpressionProperty from './_ExpressionProperty'
-import {function as styleFunction} from '@mapbox/mapbox-gl-style-spec';
+import {function as styleFunction} from '@maplibre/maplibre-gl-style-spec';
 import {findDefaultFromSpec} from '../util/spec-helper';
 
 

src/components/FieldId.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputString from './InputString'
 

src/components/FieldMaxZoom.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputNumber from './InputNumber'
 

src/components/FieldMinZoom.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputNumber from './InputNumber'
 

src/components/FieldSource.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputAutocomplete from './InputAutocomplete'
 

src/components/FieldSourceLayer.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputAutocomplete from './InputAutocomplete'
 

src/components/FieldType.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputSelect from './InputSelect'
 import InputString from './InputString'

src/components/FilterEditor.jsx

@@ -4,7 +4,7 @@ import { combiningFilterOps } from '../libs/filterops.js'
 import {mdiTableRowPlusAfter} from '@mdi/js';
 import {isEqual} from 'lodash';
 
-import {latest, validate, migrate, convertFilter} from '@mapbox/mapbox-gl-style-spec'
+import {latest, migrate, convertFilter} from '@maplibre/maplibre-gl-style-spec'
 import InputSelect from './InputSelect'
 import Block from './Block'
 import SingleFilterEditor from './SingleFilterEditor'

src/components/MapMapboxGl.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
-import MapboxGl from 'mapbox-gl'
+import MapLibreGl from 'maplibre-gl'
 import MapboxInspect from 'mapbox-gl-inspect'
 import MapMapboxGlLayerPopup from './MapMapboxGlLayerPopup'
 import MapMapboxGlFeaturePropertyPopup from './MapMapboxGlFeaturePropertyPopup'
@@ -10,12 +10,12 @@ import colors from 'mapbox-gl-inspect/lib/colors'
 import Color from 'color'
 import ZoomControl from '../libs/zoomcontrol'
 import { colorHighlightedLayer } from '../libs/highlight'
-import 'mapbox-gl/dist/mapbox-gl.css'
+import 'maplibre-gl/dist/maplibre-gl.css'
 import '../mapboxgl.css'
 import '../libs/mapbox-rtl'
 
 
-const IS_SUPPORTED = MapboxGl.supported();
+const IS_SUPPORTED = MapLibreGl.supported();
 
 function renderPopup(popup, mountNode) {
   ReactDOM.render(popup, mountNode);
@@ -107,7 +107,7 @@ export default class MapMapboxGl extends React.Component {
     return should;
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState, snapshot) {
     if(!IS_SUPPORTED) return;
 
     const map = this.state.map;

src/components/MapMapboxGlLayerPopup.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import IconLayer from './IconLayer'
-import {latest, expression, function as styleFunction} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 
 function groupFeaturesBySourceLayer(features) {
   const sources = {}

src/components/ModalAdd.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import InputButton from './InputButton'
 import Modal from './Modal'
 

src/components/ModalExport.jsx

@@ -4,7 +4,7 @@ import Slugify from 'slugify'
 import { saveAs } from 'file-saver'
 import pkgLockJson from '../../package-lock.json'
 
-import {format} from '@mapbox/mapbox-gl-style-spec'
+import {format} from '@maplibre/maplibre-gl-style-spec'
 import FieldString from './FieldString'
 import FieldCheckbox from './FieldCheckbox'
 import InputButton from './InputButton'

src/components/ModalSettings.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldArray from './FieldArray'
 import FieldNumber from './FieldNumber'

src/components/ModalSources.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Modal from './Modal'
 import InputButton from './InputButton'
 import Block from './Block'

src/components/ModalSourcesTypeEditor.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldUrl from './FieldUrl'
 import FieldNumber from './FieldNumber'

src/components/_DataProperty.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 
 import InputButton from './InputButton'
 import InputSpec from './InputSpec'

src/components/_FieldId.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldString from './FieldString'
 

src/components/_FieldMaxZoom.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldNumber from './FieldNumber'
 

src/components/_FieldMinZoom.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldNumber from './FieldNumber'
 

src/components/_FieldSource.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldAutocomplete from './FieldAutocomplete'
 

src/components/_FieldSourceLayer.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldAutocomplete from './FieldAutocomplete'
 

src/components/_FieldType.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldSelect from './FieldSelect'
 import FieldString from './FieldString'

src/components/_ZoomProperty.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 
 import InputButton from './InputButton'
 import InputSpec from './InputSpec'

src/libs/apistore.js

@@ -1,5 +1,5 @@
 import style from './style.js'
-import {format} from '@mapbox/mapbox-gl-style-spec'
+import {format} from '@maplibre/maplibre-gl-style-spec'
 import ReconnectingWebSocket from 'reconnecting-websocket'
 
 export class ApiStyleStore {

src/libs/diffmessage.js

@@ -1,4 +1,4 @@
-import {diff} from '@mapbox/mapbox-gl-style-spec'
+import {diff} from '@maplibre/maplibre-gl-style-spec'
 
 export function diffMessages(beforeStyle, afterStyle) {
   const changes = diff(beforeStyle, afterStyle)

src/libs/filterops.js

@@ -1,4 +1,4 @@
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 export const combiningFilterOps = ['all', 'any', 'none']
 export const setFilterOps = ['in', '!in']
 export const otherFilterOps = Object

src/libs/layer.js

@@ -1,4 +1,4 @@
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 
 export function changeType(layer, newType) {
   const changedPaintProps = { ...layer.paint }

src/libs/mapbox-rtl.js

@@ -1,4 +1,4 @@
-import MapboxGl from 'mapbox-gl'
+import MapLibreGl from "maplibre-gl"
 import {readFileSync} from 'fs'
 
 const data = readFileSync(__dirname+"/../../node_modules/@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js", "utf8");
@@ -8,4 +8,4 @@ const blob = new window.Blob([data], {
 });
 const objectUrl = window.URL.createObjectURL(blob);
 
-MapboxGl.setRTLTextPlugin(objectUrl);
+MapLibreGl.setRTLTextPlugin(objectUrl, () => {});

src/libs/query-util.js

@@ -1,11 +1,6 @@
 function asBool(queryObj, key) {
   if(queryObj.hasOwnProperty(key)) {
-    if(queryObj[key].match(/^false|0$/)) {
-      return false;
-    }
-    else {
-      return true;
-    }
+    return !queryObj[key].match(/^false|0$/);
   }
   else {
     return false;

src/libs/sort-numerically.js

@@ -1,6 +1,6 @@
 export default function(a, b) {
-  a = parseFloat(a, 10);
-  b = parseFloat(b, 10);
+  a = parseFloat(a);
+  b = parseFloat(b);
 
   if(a < b) {
     return -1

src/libs/source.js

@@ -1,11 +1,10 @@
 export function deleteSource(mapStyle, sourceId) {
   const remainingSources = { ...mapStyle.sources}
   delete remainingSources[sourceId]
-  const changedStyle = {
+  return {
     ...mapStyle,
     sources: remainingSources
   }
-  return changedStyle
 }
 
 
@@ -18,10 +17,9 @@ export function changeSource(mapStyle, sourceId, source) {
     ...mapStyle.sources,
     [sourceId]: source
   }
-  const changedStyle = {
+  return {
     ...mapStyle,
     sources: changedSources
   }
-  return changedStyle
 }
 

src/libs/style.js

@@ -1,4 +1,4 @@
-import deref from '@mapbox/mapbox-gl-style-spec/deref'
+import {derefLayers} from '@maplibre/maplibre-gl-style-spec'
 import tokens from '../config/tokens.json'
 
 // Empty style is always used if no style could be restored or fetched
@@ -25,19 +25,17 @@ function ensureHasNoInteractive(style) {
     return changedLayer
   })
 
-  const nonInteractiveStyle = {
+  return {
     ...style,
     layers: changedLayers
   }
-  return nonInteractiveStyle
 }
 
 function ensureHasNoRefs(style) {
-  const derefedStyle = {
+  return {
     ...style,
-    layers: deref(style.layers)
+    layers: derefLayers(style.layers)
   }
-  return derefedStyle
 }
 
 function ensureStyleValidity(style) {

src/libs/stylestore.js

@@ -30,7 +30,7 @@ function loadStoredStyles() {
 
 function isStyleKey(key) {
   const parts = key.split(":")
-  return parts.length == 3 && parts[0] === storagePrefix && parts[1] === stylePrefix
+  return parts.length === 3 && parts[0] === storagePrefix && parts[1] === stylePrefix
 }
 
 // Load style id from key

src/mapboxgl.css

@@ -1,3 +1,5 @@
+/* TODO */
+
 .mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
  border-bottom-color: rgb(28, 31, 36);
 }

src/util/codemirror-mgl.js

@@ -1,7 +1,7 @@
 import jsonlint from 'jsonlint';
 import CodeMirror from 'codemirror';
 import jsonToAst from 'json-to-ast';
-import {expression, validate, latest} from '@mapbox/mapbox-gl-style-spec';
+import {expression, validate} from '@maplibre/maplibre-gl-style-spec';
 
 
 CodeMirror.defineMode("mgl", function(config, parserConfig) {
@@ -97,7 +97,9 @@ CodeMirror.registerHelper("lint", "mgl", function(text, opts, doc) {
   let out;
   if (context === "layer") {
     // Just an empty style so we can validate a layer.
-    const errors = validate({
+    // TODO: this seems to be a hack caused by TypeScript or something causing issues.
+    // TODO: Needs to be investigated and fixed.
+    const errors = validate(JSON.stringify({
       "version": 8,
       "name": "Empty Style",
       "metadata": {},
@@ -107,7 +109,7 @@ CodeMirror.registerHelper("lint", "mgl", function(text, opts, doc) {
       "layers": [
         input
       ]
-    });
+    }));
 
     if (errors) {
       out = {
@@ -115,12 +117,7 @@ CodeMirror.registerHelper("lint", "mgl", function(text, opts, doc) {
         value: errors
           .filter(err => {
             // Remove missing 'layer source' errors, because we don't include them
-            if (err.message.match(/^layers\[0\]: source ".*" not found$/)) {
-              return false;
-            }
-            else {
-              return true;
-            }
+            return !err.message.match(/^layers\[0\]: source ".*" not found$/);
           })
           .map(err => {
             // Remove the 'layers[0].' as we're validating the layer only here

stories/FieldFunction.stories.js

@@ -3,7 +3,7 @@ import FieldFunction from '../src/components/FieldFunction';
 import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
 import {withA11y} from '@storybook/addon-a11y';
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 
 
 export default {

stories/LayerEditor.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import LayerEditor from '../src/components/LayerEditor';
 import {action} from '@storybook/addon-actions';
 import {withA11y} from '@storybook/addon-a11y';
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 
 
 export default {