Vite + TypeScript (#836)

Resolves #803

This is an initial commit to allow migrating to typescript bit by bit.
It introduces vite.
It removes all the webpack configuration (which I have no clue what all
the profiling are needed for, and couldn't find anything in the readme).
It also changes a single file from javascript to typescript:
`urlopen.js` -> `urlopen.ts`
Which was done manually, later on I'll see if I can automate most of the
migration.
For now, everything seems to work as expected.
I also upgrades storybook to use vite and renames the stories to jsx (I
honestly don't know why this complexity is needed here, but I'll keep it
for now).

cc: @damianstasik

src/libs/maplibre-rtl.js

@@ -1,11 +1,3 @@
 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");
-
-const blob = new window.Blob([data], {
-  type: "text/javascript"
-});
-const objectUrl = window.URL.createObjectURL(blob);
-
-MapLibreGl.setRTLTextPlugin(objectUrl, () => {});
+MapLibreGl.setRTLTextPlugin('https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js');

src/libs/urlopen.js

@@ -1,65 +0,0 @@
-import url from 'url'
-import querystring from 'querystring'
-import style from './style.js'
-
-export function initialStyleUrl() {
-  const initialUrl = url.parse(window.location.href, true)
-  return (initialUrl.query || {}).style
-}
-
-export function loadStyleUrl(styleUrl, cb) {
-  console.log('Loading style', styleUrl)
-  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 removeStyleQuerystring() {
-  const initialUrl = url.parse(window.location.href, true)
-  let qs = querystring.parse(window.location.search.slice(1))
-  delete qs["style"]
-  if(Object.getOwnPropertyNames(qs).length === 0) {
-    qs = ""
-  } else {
-    qs = "?" + querystring.stringify(qs)
-  }
-  let newUrlHash = initialUrl.hash
-  if(newUrlHash === null) {
-    newUrlHash = ""
-  } 
-  const newUrl = initialUrl.protocol + "//" + initialUrl.host + initialUrl.pathname + qs + newUrlHash
-  window.history.replaceState({}, document.title, newUrl)
-}
-
-export function loadJSON(url, defaultValue, cb) {
-  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)
-  })
-}

src/libs/urlopen.ts

@@ -0,0 +1,31 @@
+// @ts-ignore
+import style from './style'
+
+export function initialStyleUrl() {
+  const initialUrl = new URL(window.location.href);
+  return initialUrl.searchParams.get('style');
+}
+
+export function loadStyleUrl(styleUrl: string, cb: (...args: any[]) => void) {
+  console.log('Loading style', styleUrl)
+  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 removeStyleQuerystring() {
+  const initialUrl = new URL(window.location.href);
+  initialUrl.searchParams.delete('style');
+  window.history.replaceState({}, document.title, initialUrl.toString())
+}