Reduce bundle size

- Use the browsers fetch rather than the request module
 - base64-loader -> raw-loader
 - Remove ol3 because it's been broken for a while
 - Removed old GitHub gist support as it's no longer functional
 - Removed Mousetrap as we were only using a small part of the functionality
 - Moved to single js file to make things simplier

src/libs/accessibility.js

@@ -1,8 +1,8 @@
-import lodash from 'lodash'
+import throttle from 'lodash.throttle'
 
 
 // Throttle for 3 seconds so when a user enables it they don't have to refresh the page.
-const reducedMotionEnabled = lodash.throttle(() => {
+const reducedMotionEnabled = throttle(() => {
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches
 }, 3000);
 

src/libs/apistore.js

@@ -1,4 +1,3 @@
-import request from 'request'
 import style from './style.js'
 import ReconnectingWebSocket from 'reconnecting-websocket'
 
@@ -14,15 +13,20 @@ export class ApiStyleStore {
   }
 
   init(cb) {
-    request(localUrl + '/styles', (error, response, body) => {
-      if (!error && body && response.statusCode == 200) {
-        const styleIds = JSON.parse(body)
-        this.latestStyleId = styleIds[0]
-        this.notifyLocalChanges()
-        cb(null)
-      } else {
-        cb(new Error('Can not connect to style API'))
-      }
+    fetch(localUrl + '/styles', {
+      mode: 'cors',
+    })
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(body) {
+      const styleIds = body;
+      this.latestStyleId = styleIds[0]
+      this.notifyLocalChanges()
+      cb(null)
+    })
+    .catch(function() {
+      cb(new Error('Can not connect to style API'))
     })
   }
 
@@ -44,8 +48,14 @@ export class ApiStyleStore {
 
   latestStyle(cb) {
     if(this.latestStyleId) {
-      request(localUrl + '/styles/' + this.latestStyleId, (error, response, body) => {
-        cb(style.ensureStyleValidity(JSON.parse(body)))
+      fetch(localUrl + '/styles/' + this.latestStyleId, {
+        mode: 'cors',
+      })
+      .then(function(response) {
+        return response.json();
+      })
+      .then(function(body) {
+        cb(style.ensureStyleValidity(body))
       })
     } else {
       throw new Error('No latest style available. You need to init the api backend first.')
@@ -55,11 +65,15 @@ export class ApiStyleStore {
   // Save current style replacing previous version
   save(mapStyle) {
     const id = mapStyle.id
-    request.put({
-      url: localUrl + '/styles/' + id,
-      json: true,
-      body: mapStyle
-    }, (error, response, body) => {
+    fetch(localUrl + '/styles/' + id, {
+      method: "PUT",
+      mode: 'cors',
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      body: JSON.stringify(mapStyle)
+    })
+    .catch(function(error) {
       if(error) console.error(error)
     })
     return mapStyle

src/libs/mapbox-rtl.js

@@ -1,9 +1,9 @@
-import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js'
+import MapboxGl from 'mapbox-gl'
 
 // Load mapbox-gl-rtl-text using object urls without needing http://localhost for AJAX.
-const data = require("base64-loader?mimetype=text/javascript!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js");
+const data = require("raw-loader?mimetype=text/javascript!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js");
 
-const blob = new window.Blob([window.atob(data)]);
+const blob = new window.Blob([data]);
 const objectUrl = window.URL.createObjectURL(blob, {
   type: "text/javascript"
 });

src/libs/metadata.js

@@ -1,22 +1,19 @@
-import request from 'request'
 import npmurl from 'url'
 
 function loadJSON(url, defaultValue, cb) {
-  request({
-    url: url,
-    withCredentials: false,
-  }, (error, response, body) => {
-    if (!error && body && response.statusCode == 200) {
-      try {
-        cb(JSON.parse(body))
-      } catch(err) {
-        console.error(err)
-        cb(defaultValue)
-      }
-    } else {
-      console.warn('Can not metadata for ' + url)
-      cb(defaultValue)
-    }
+  fetch(url, {
+    mode: 'cors',
+    credentials: "same-origin"
+  })
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(body) {
+    cb(body)
+  })
+  .catch(function() {
+    console.warn('Can not metadata for ' + url)
+    cb(defaultValue)
   })
 }
 

src/libs/stylestore.js

@@ -2,7 +2,6 @@ import { colorizeLayers } from './style.js'
 import style from './style.js'
 import { loadStyleUrl } from './urlopen'
 import publicSources from '../config/styles.json'
-import request from 'request'
 
 const storagePrefix = "maputnik"
 const stylePrefix = 'style'

src/libs/urlopen.js

@@ -1,4 +1,3 @@
-import request from 'request'
 import url from 'url'
 import style from './style.js'
 
@@ -9,34 +8,40 @@ export function initialStyleUrl() {
 
 export function loadStyleUrl(styleUrl, cb) {
   console.log('Loading style', styleUrl)
-  request({
-    url: styleUrl,
-    withCredentials: false,
-  }, (error, response, body) => {
-      if (!error && response.statusCode == 200) {
-        cb(style.ensureStyleValidity(JSON.parse(body)))
-      } else {
-        console.warn('Could not fetch default style', styleUrl)
-        cb(style.emptyStyle)
-      }
+  fetch(styleUrl, {
+    mode: 'cors',
+    credentials: "same-origin"
+  })
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(body) {
+    cb(style.ensureStyleValidity(body))
+  })
+  .catch(function() {
+    console.warn('Could not fetch default style', styleUrl)
+    cb(style.emptyStyle)
   })
 }
 
 export function loadJSON(url, defaultValue, cb) {
-  request({
-    url: url,
-    withCredentials: false,
-  }, (error, response, body) => {
-    if (!error && body && response.statusCode == 200) {
-      try {
-        cb(JSON.parse(body))
-      } catch(err) {
-        console.error(err)
-        cb(defaultValue)
-      }
-    } else {
-      console.error('Can not load JSON from ' + url)
+  fetch(url, {
+    mode: 'cors',
+    credentials: "same-origin"
+  })
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(body) {
+    try {
+      cb(body)
+    } catch(err) {
+      console.error(err)
       cb(defaultValue)
     }
   })
+  .catch(function() {
+    console.error('Can not load JSON from ' + url)
+    cb(defaultValue)
+  })
 }