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

.babelrc

@@ -1,21 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
-  ],
-  "plugins": [
-    "static-fs",
-    "react-hot-loader/babel",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/transform-runtime"
-  ],
-  "env": {
-    "test": {
-      "plugins": [
-        ["istanbul", {
-          "exclude": ["node_modules/**", "test/**"]
-        }]
-      ]
-    }
-  }
-}

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+      'eslint:recommended',
+      'plugin:react/recommended',
+      'plugin:react/jsx-runtime',
+      'plugin:react-hooks/recommended',
+    ],
+    ignorePatterns: ['dist', '.eslintrc.cjs'],
+    parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+    settings: { react: { version: '18.2' } },
+    plugins: ['react-refresh'],
+    rules: {
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }

.github/workflows/ci.yml

@@ -7,21 +7,6 @@ on:
     branches: [ main ]
 
 jobs:
-
-  # post a comment linking to codesandbox with the current branch
-  # meta-demo-comment:
-  #   name: meta/demo-comment
-  #   runs-on: ubuntu-latest
-
-  #   if: ${{ github.event_name == 'pull_request' }}
-
-  #   steps:
-  #   - uses: unsplash/comment-on-pr@v1.2.0
-  #     env:
-  #       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-  #     with:
-  #       msg: "Demo: <https://codesandbox.io/embed/github/${{ github.repository }}/tree/${{ github.head_ref }}?view=preview>"
-
   build-docker:
     name: build/docker
     runs-on: ${{ matrix.os }}
@@ -94,13 +79,7 @@ jobs:
       uses: actions/upload-artifact@v1
       with:
         name: editor
-        path: build/build
+        path: dist
-    - run: npm run profiling-build
-    - name: artifacts/editor-profiling
-      uses: actions/upload-artifact@v1
-      with:
-        name: editor-profiling
-        path: build/profiling
     - name: artifacts/storybook
       uses: actions/upload-artifact@v1
       with:

.gitignore

@@ -34,3 +34,4 @@ public
 /old
 /build
 /cypress/screenshots
+/dist/

.storybook/main.js

@@ -1,24 +1,9 @@
-const rules = require('../config/webpack.rules');
+const config = {
-
+  stories: ['../stories/**/*.stories.jsx'],
-module.exports = {
+  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-a11y/register', '@storybook/addon-storysource'],
-  stories: ['../stories/**/*.stories.js'],
+  framework: {
-  addons: [
+    name: '@storybook/react-vite',
-    '@storybook/addon-actions',
+    options: {}
-    '@storybook/addon-links',
+  }
-    '@storybook/addon-a11y/register',
-    '@storybook/addon-storysource',
-  ],
-  webpackFinal: async config => {
-    // do mutation to the config
-    console.log("config.module", config.module);
-
-    return {
-      ...config,
-      module: {
-        rules: [
-          ...rules,
-        ]
-      }
-    };
-  },
 };
+export default config;

Dockerfile

@@ -16,7 +16,7 @@ RUN npm run build
 FROM python:3-slim
 WORKDIR /maputnik
 
-COPY --from=builder /maputnik/build/build .
+COPY --from=builder /maputnik/dist .
 
 EXPOSE 8888
 CMD python -m http.server 8888

README.md

@@ -49,18 +49,14 @@ npm install
 npm run start
 ```
 
-If you want Maputnik to be accessible externally use the [`--host` option](https://webpack.js.org/configuration/dev-server/#devserverhost):
+If you want Maputnik to be accessible externally use the [`--host` option](https://vitejs.dev/config/server-options.html#server-host):
 
 ```bash
 # start externally accessible dev server
 npm run start -- --host 0.0.0.0
 ```
 
-The build process will watch for changes to the filesystem, rebuild and autoreload the editor. However note this from the [webpack-dev-server docs](https://webpack.js.org/configuration/dev-server/):
+The build process will watch for changes to the filesystem, rebuild and autoreload the editor.
-
-> webpack uses the file system to get notified of file changes. In some cases this does not work. For example, when using Network File System (NFS). Vagrant also has a lot of problems with this. ([snippet source](https://webpack.js.org/configuration/dev-server/#devserverwatchoptions-))
-
-To enable polling add `export WEBPACK_DEV_SERVER_POLLING=1` to your environment.
 
 ```
 npm run build

config/webpack.config.js

@@ -1,71 +0,0 @@
-"use strict";
-var path = require('path');
-var rules = require('./webpack.rules');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
-var CopyWebpackPlugin = require('copy-webpack-plugin');
-
-const HOST = process.env.HOST || "127.0.0.1";
-const PORT = process.env.PORT || "8888";
-
-module.exports = {
-  target: 'web',
-  mode: 'development',
-  entry: [
-    `webpack-dev-server/client?http://${HOST}:${PORT}`,
-    `webpack/hot/only-dev-server`,
-    `./src/index.jsx` // Your appʼs entry point
-  ],
-  devtool: process.env.WEBPACK_DEVTOOL || 'cheap-module-source-map',
-  output: {
-    path: path.join(__dirname, '..', 'public'),
-    filename: 'bundle.js'
-  },
-  resolve: {
-    extensions: ['.js', '.jsx']
-  },
-  module: {
-    rules: rules
-  },
-  node: {
-    fs: "empty",
-    net: 'empty',
-    tls: 'empty'
-  },
-  devServer: {
-    // enable HMR
-    hot: true,
-    // serve index.html in place of 404 responses to allow HTML5 history
-    historyApiFallback: true,
-    port: PORT,
-    host: HOST,
-    watchFiles: {
-      options: {
-        // Disabled polling by default as it causes lots of CPU usage and hence drains laptop batteries. To enable polling add WEBPACK_DEV_SERVER_POLLING to your environment
-        // See <https://webpack.js.org/configuration/watch/#watchoptions-poll> for details
-        usePolling: (!!process.env.WEBPACK_DEV_SERVER_POLLING ? true : false),
-        watch: false
-      }
-    }
-  },
-  optimization: {
-    noEmitOnErrors: true,
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      title: 'Maputnik',
-      template: './src/template.html'
-    }),
-    new HtmlWebpackInlineSVGPlugin({
-      runPreEmit: true,
-    }),
-    new CopyWebpackPlugin({
-      patterns: [
-        {
-          from: './src/manifest.json',
-          to: 'manifest.json'
-        }
-      ]
-    })
-  ]
-};

config/webpack.production.config.js

@@ -1,63 +0,0 @@
-var webpack = require('webpack');
-var path = require('path');
-var rules = require('./webpack.rules');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
-var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
-var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-var CopyWebpackPlugin = require('copy-webpack-plugin');
-
-
-module.exports = {
-  entry: {
-    app: './src/index.jsx',
-  },
-  output: {
-    path: path.join(__dirname, '..', 'build', 'build'),
-    filename: '[name].[contenthash].js',
-    chunkFilename: '[contenthash].js'
-  },
-  resolve: {
-    extensions: ['.js', '.jsx']
-  },
-  module: {
-    rules: rules
-  },
-  node: {
-    fs: "empty",
-    net: 'empty',
-    tls: 'empty'
-  },
-  plugins: [
-    new webpack.NoEmitOnErrorsPlugin(),
-    new WebpackCleanupPlugin(),
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
-    new HtmlWebpackPlugin({
-      template: './src/template.html',
-      title: 'Maputnik'
-    }),
-    new HtmlWebpackInlineSVGPlugin({
-      runPreEmit: true,
-    }),
-    new CopyWebpackPlugin({
-      patterns: [
-        {
-          from: './src/manifest.json',
-          to: 'manifest.json'
-        }
-      ]
-    }),
-    new BundleAnalyzerPlugin({
-      analyzerMode: 'static',
-      defaultSizes: 'gzip',
-      openAnalyzer: false,
-      generateStatsFile: true,
-      reportFilename: 'bundle-stats.html',
-      statsFilename: 'bundle-stats.json',
-    })
-  ]
-};

config/webpack.profiling.config.js

@@ -1,18 +0,0 @@
-const webpackProdConfig = require('./webpack.production.config');
-var path = require('path');
-
-module.exports = {
-  ...webpackProdConfig,
-  output: {
-    ...webpackProdConfig.output,
-    path: path.join(__dirname, '..', 'build', 'profiling'),
-  },
-  resolve: {
-    ...webpackProdConfig.resolve,
-    alias: {
-      ...webpackProdConfig.resolve.alias,
-      'react-dom$': 'react-dom/profiling',
-      'scheduler/tracing': 'scheduler/tracing-profiling',
-    }
-  }
-};

config/webpack.rules.js

@@ -1,44 +0,0 @@
-const path = require("path");
-
-module.exports = [
-  {
-    test: /\.jsx?$/,
-    exclude: [
-      path.resolve(__dirname, '../node_modules')
-    ],
-    use: 'babel-loader'
-  },
-  {
-    test: /\.(eot|ttf|woff|woff2)$/,
-    use: 'file-loader?name=fonts/[name].[ext]'
-  },
-  {
-    test: /\.ico$/,
-    use: 'file-loader?name=[name].[ext]'
-  },
-  {
-    test: /\.(gif|jpg|png)$/,
-    use: 'file-loader?name=img/[name].[ext]'
-  },
-  {
-    test: /\.svg$/,
-    use: [
-      'svg-inline-loader'
-    ]
-  },
-  {
-    test: /[\/\\](node_modules|global|src)[\/\\].*\.scss$/,
-    use: [
-      'style-loader',
-      "css-loader",
-      "sass-loader"
-    ]
-  },
-  {
-    test: /[\/\\](node_modules|global|src)[\/\\].*\.css$/,
-    use: [
-      'style-loader',
-      'css-loader'
-    ]
-  }
-];

index.html

@@ -2,9 +2,9 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title><%= htmlWebpackPlugin.options.title %></title>
+  <title>Maputnik</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="manifest" href="manifest.json">
+  <link rel="manifest" href="src/manifest.json">
   <style>
     html {
       background-color: rgb(28, 31, 36);
@@ -23,7 +23,7 @@
       align-items: center;
     }
 
-    .loading__logo svg {
+    .loading__logo img {
       width: 200px;
       height: 200px;
     }
@@ -38,7 +38,6 @@
   </style>
 </head>
 <body>
-  <!-- TODO: Import dynamically -->
   <!-- From <https://github.com/hail2u/color-blindness-emulation> -->
   <svg
     aria-hidden="true"
@@ -123,10 +122,10 @@
   <div id="app"></div>
   <div class="loading">
     <div class="loading__logo">
-      <!-- replaced by 'html-webpack-inline-svg-plugin' -->
       <img inline src="node_modules/maputnik-design/logos/logo-loading.svg" />
     </div>
     <div class="loading__text">Loading&hellip;</div>
   </div>
+  <script type="module" src="/src/index.jsx"></script>
 </body>
 </html>

package.json

@@ -1,22 +1,17 @@
 {
   "name": "maputnik",
-  "version": "2.0.0-pre.1",
+  "version": "2.0.0-pre.2",
   "description": "A MapLibre GL visual style editor",
   "main": "''",
   "scripts": {
-    "stats": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config config/webpack.production.config.js --progress=profile --json > stats.json",
+    "start": "vite",
-    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config config/webpack.production.config.js --progress=profile --color",
+    "build": "tsc && vite build",
-    "profiling-build": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config config/webpack.profiling.config.js --progress=profile --color",
+    "lint": "eslint ./src --ext ts,tsx,js,jsx --report-unused-disable-directives --max-warnings 0 && npm run lint-css",
     "test": "cypress run",
     "cy:open": "cypress open",
-    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --progress=profile --color --config config/webpack.config.js",
-    "start-prod": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --progress=profile --color --config config/webpack.production.config.js",
-    "start-sandbox": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --disable-host-check --host 0.0.0.0 --progress=profile --color --config config/webpack.production.config.js",
-    "lint-js": "eslint --ext js --ext jsx src test",
     "lint-css": "stylelint \"src/styles/*.scss\"",
-    "lint": "npm run lint-js && npm run lint-css",
+    "storybook": "storybook dev -h 0.0.0.0 -p 6006",
-    "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -h 0.0.0.0 -p 6006",
+    "build-storybook": "storybook build -o build/storybook"
-    "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook -o build/storybook"
   },
   "repository": {
     "type": "git",
@@ -26,9 +21,9 @@
   "license": "MIT",
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
-    "@babel/runtime": "^7.17.9",
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
     "@maplibre/maplibre-gl-style-spec": "^17.0.1",
+    "@mdi/js": "^6.6.96",
     "@mdi/react": "^1.5.0",
     "array-move": "^4.0.0",
     "buffer": "^6.0.3",
@@ -89,84 +84,40 @@
       ]
     }
   },
-  "eslintConfig": {
-    "plugins": [
-      "react"
-    ],
-    "extends": [
-      "plugin:react/recommended"
-    ],
-    "env": {
-      "browser": true,
-      "node": true,
-      "es6": true
-    },
-    "parser": "@babel/eslint-parser",
-    "parserOptions": {
-      "ecmaVersion": 6,
-      "sourceType": "module",
-      "ecmaFeatures": {
-        "impliedStrict": true,
-        "experimentalObjectRestSpread": true,
-        "jsx": true
-      }
-    },
-    "settings": {
-      "react": {
-        "version": "detect"
-      }
-    }
-  },
   "devDependencies": {
-    "@babel/core": "^7.17.9",
+    "@rollup/plugin-replace": "^5.0.5",
-    "@babel/eslint-parser": "^7.19.1",
+    "@storybook/addon-a11y": "^7.6.5",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@storybook/addon-actions": "^7.6.5",
-    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@storybook/addon-links": "^7.6.5",
-    "@babel/preset-env": "^7.16.11",
+    "@storybook/addon-storysource": "^7.6.5",
-    "@babel/preset-flow": "^7.16.7",
+    "@storybook/addons": "^7.6.5",
-    "@babel/preset-react": "^7.16.7",
+    "@storybook/builder-vite": "^7.6.5",
-    "@mdi/js": "^6.6.96",
+    "@storybook/react": "^7.6.5",
-    "@storybook/addon-a11y": "^6.4.20",
+    "@storybook/react-vite": "^7.6.5",
-    "@storybook/addon-actions": "^6.4.20",
+    "@storybook/theming": "^7.6.5",
-    "@storybook/addon-links": "^6.4.20",
-    "@storybook/addon-storysource": "^6.4.20",
-    "@storybook/addons": "^6.4.20",
-    "@storybook/react": "^6.4.20",
-    "@storybook/theming": "^6.4.20",
     "@types/cors": "^2.8.17",
+    "@types/react": "^16.14.52",
+    "@types/react-dom": "^16.9.24",
     "@types/uuid": "^9.0.7",
-    "babel-loader": "^8.2.4",
+    "@vitejs/plugin-react": "^4.2.0",
-    "babel-plugin-istanbul": "^6.1.1",
-    "babel-plugin-static-fs": "^3.0.0",
-    "copy-webpack-plugin": "^6.4.1",
     "cors": "^2.8.5",
-    "cross-env": "^7.0.3",
-    "css-loader": "^5.2.7",
     "cypress": "^13.6.1",
-    "eslint": "^8.12.0",
+    "eslint": "^8.53.0",
-    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
     "express": "^4.17.3",
-    "html-webpack-inline-svg-plugin": "^2.3.0",
-    "html-webpack-plugin": "^4.5.2",
     "istanbul": "^0.4.5",
     "istanbul-lib-coverage": "^3.2.0",
-    "mkdirp": "^1.0.4",
     "mocha": "^9.2.2",
     "postcss": "^8.4.12",
     "react-hot-loader": "^4.13.0",
-    "sass-loader": "^10.2.1",
+    "storybook": "^7.6.5",
-    "style-loader": "^2.0.0",
     "stylelint": "^14.6.1",
     "stylelint-config-recommended-scss": "^6.0.0",
     "stylelint-scss": "^4.2.0",
-    "svg-inline-loader": "^0.8.2",
+    "typescript": "^5.3.3",
-    "transform-loader": "^0.2.4",
-    "typescript": "^4.9.5",
     "uuid": "^8.3.2",
-    "webpack": "^4.46.0",
+    "vite": "^5.0.0"
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cleanup-plugin": "^0.5.1",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.8.1"
   }
 }

sandbox.config.json

@@ -1,5 +0,0 @@
-{
-  "container": {
-    "startScript": "start-sandbox"
-  }
-}

src/components/AppToolbar.jsx

@@ -4,9 +4,6 @@ import classnames from 'classnames'
 import {detect} from 'detect-browser';
 
 import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
-
-
-import logoImage from 'maputnik-design/logos/logo-color.svg'
 import pkgJson from '../../package.json'
 
 
@@ -217,7 +214,7 @@ export default class AppToolbar extends React.Component {
             rel="noreferrer noopener"
             href="https://github.com/maputnik/editor"
           >
-            <span dangerouslySetInnerHTML={{__html: logoImage}} />
+            <img src="node_modules/maputnik-design/logos/logo-color.svg" />
             <h1>
               <span className="maputnik-toolbar-name">{pkgJson.name}</span>
               <span className="maputnik-toolbar-version">v{pkgJson.version}</span>

src/components/MapOpenLayers.jsx

@@ -1,13 +1,12 @@
 import React from 'react'
 import {throttle} from 'lodash';
 import PropTypes from 'prop-types'
-import { loadJSON } from '../libs/urlopen'
 
 import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup';
 
 import 'ol/ol.css'
 import {apply} from 'ol-mapbox-style';
-import {Map, View, Proj, Overlay} from 'ol';
+import {Map, View, Overlay} from 'ol';
 
 import {toLonLat} from 'ol/proj';
 import {toStringHDMS} from 'ol/coordinate';

src/components/Modal.jsx

@@ -27,9 +27,9 @@ export default class Modal extends React.Component {
       document.activeElement.blur();
     }
 
-    setImmediate(() => {
+    setTimeout(() => {
       this.props.onOpenToggle(false);
-    });
+    }, 0);
   }
 
   render() {

src/components/ModalExport.jsx

@@ -1,12 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Slugify from 'slugify'
-import { saveAs } from 'file-saver'
+import {saveAs} from 'file-saver'
-import pkgLockJson from '../../package-lock.json'
+import {version} from 'maplibre-gl'
-
 import {format} from '@maplibre/maplibre-gl-style-spec'
 import FieldString from './FieldString'
-import FieldCheckbox from './FieldCheckbox'
 import InputButton from './InputButton'
 import Modal from './Modal'
 import {MdFileDownload} from 'react-icons/md'
@@ -14,7 +12,7 @@ import style from '../libs/style'
 import fieldSpecAdditional from '../libs/field-spec-additional'
 
 
-const MAPLIBRE_GL_VERSION = pkgLockJson.dependencies["maplibre-gl"].version;
+const MAPLIBRE_GL_VERSION = version;
 
 
 export default class ModalExport extends React.Component {

src/components/SpecField.jsx

@@ -8,7 +8,6 @@ import Fieldset from './Fieldset'
 const typeMap = {
   color: () => Block,
   enum: ({fieldSpec}) => (Object.keys(fieldSpec.values).length <= 3 ? Fieldset : Block),
-  number: () => Block,
   boolean: () => Block,
   array: () => Fieldset,
   resolvedImage: () => Block,

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

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())
+}

src/styles/_toolbar.scss

@@ -30,7 +30,7 @@
     line-height: 26px;
   }
 
-  svg {
+  img {
     width: 30px;
     padding-right: $margin-2;
     vertical-align: top;

stories/FieldArray.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldArray from '../src/components/FieldArray';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldArray',
   component: FieldArray,
-  decorators: [withA11y],
 };
 
 

stories/FieldAutocomplete.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldAutocomplete from '../src/components/FieldAutocomplete';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldAutocomplete',
   component: FieldAutocomplete,
-  decorators: [withA11y],
 };
 
 

stories/FieldCheckbox.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldCheckbox from '../src/components/FieldCheckbox';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldCheckbox',
   component: FieldCheckbox,
-  decorators: [withA11y],
 };
 
 

stories/FieldColor.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldColor from '../src/components/FieldColor';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldColor',
   component: FieldColor,
-  decorators: [withA11y],
 };
 
 

stories/FieldDynamicArray.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldDynamicArray from '../src/components/FieldDynamicArray';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldDynamicArray',
   component: FieldDynamicArray,
-  decorators: [withA11y],
 };
 
 

stories/FieldEnum.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldEnum from '../src/components/FieldEnum';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldEnum',
   component: FieldEnum,
-  decorators: [withA11y],
 };
 
 

stories/FieldFunction.stories.jsx

@@ -1,15 +1,11 @@
 import React from 'react';
 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 '@maplibre/maplibre-gl-style-spec'
 
 
 export default {
   title: 'FieldFunction',
   component: FieldFunction,
-  decorators: [withA11y],
 };
 
 export const Basic = () => {

stories/FieldMultiInput.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldMultiInput from '../src/components/FieldMultiInput';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldMultiInput',
   component: FieldMultiInput,
-  decorators: [withA11y],
 };
 
 

stories/FieldNumber.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldNumber from '../src/components/FieldNumber';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldNumber',
   component: FieldNumber,
-  decorators: [withA11y],
 };
 
 export const Basic = () => {

stories/FieldSelect.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldSelect from '../src/components/FieldSelect';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldSelect',
   component: FieldSelect,
-  decorators: [withA11y],
 };
 
 

stories/FieldString.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldString from '../src/components/FieldString';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldString',
   component: FieldString,
-  decorators: [withA11y],
 };
 
 

stories/FieldUrl.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldUrl from '../src/components/FieldUrl';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldUrl',
   component: FieldUrl,
-  decorators: [withA11y],
 };
 
 

stories/IconLayer.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import IconLayer from '../src/components/IconLayer';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'IconLayer',
   component: IconLayer,
-  decorators: [withA11y],
 };
 
 export const IconList = () => {

stories/InputArray.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputArray from '../src/components/InputArray';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputArray',
   component: InputArray,
-  decorators: [withA11y],
 };
 
 

stories/InputAutocomplete.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputAutocomplete from '../src/components/InputAutocomplete';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputAutocomplete',
   component: InputAutocomplete,
-  decorators: [withA11y],
 };
 
 

stories/InputButton.stories.jsx

@@ -2,13 +2,10 @@ import React from 'react';
 import InputButton from '../src/components/InputButton';
 import {action} from '@storybook/addon-actions';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
 
 export default {
   title: 'InputButton',
   component: InputButton,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/InputCheckbox.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputCheckbox from '../src/components/InputCheckbox';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputCheckbox',
   component: InputCheckbox,
-  decorators: [withA11y],
 };
 
 

stories/InputColor.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputColor from '../src/components/InputColor';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputColor',
   component: InputColor,
-  decorators: [withA11y],
 };
 
 

stories/InputDynamicArray.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputDynamicArray from '../src/components/InputDynamicArray';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputDynamicArray',
   component: InputDynamicArray,
-  decorators: [withA11y],
 };
 
 

stories/InputEnum.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputEnum from '../src/components/InputEnum';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputEnum',
   component: InputEnum,
-  decorators: [withA11y],
 };
 
 

stories/InputJson.stories.jsx

@@ -2,13 +2,10 @@ import React from 'react';
 import InputJson from '../src/components/InputJson';
 import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
 
 export default {
   title: 'InputJson',
   component: InputJson,
-  decorators: [withA11y],
 };
 
 export const Basic = () => {

stories/InputMultiInput.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputMultiInput from '../src/components/InputMultiInput';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputMultiInput',
   component: InputMultiInput,
-  decorators: [withA11y],
 };
 
 

stories/InputNumber.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputNumber from '../src/components/InputNumber';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputNumber',
   component: InputNumber,
-  decorators: [withA11y],
 };
 
 export const Basic = () => {

stories/InputSelect.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputSelect from '../src/components/InputSelect';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputSelect',
   component: InputSelect,
-  decorators: [withA11y],
 };
 
 

stories/InputString.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputString from '../src/components/InputString';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputString',
   component: InputString,
-  decorators: [withA11y],
 };
 
 

stories/InputUrl.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputUrl from '../src/components/InputUrl';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputUrl',
   component: InputUrl,
-  decorators: [withA11y],
 };
 
 

stories/LayerEditor.stories.jsx

@@ -1,14 +1,10 @@
 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 '@maplibre/maplibre-gl-style-spec'
 
 
 export default {
   title: 'LayerEditor',
   component: LayerEditor,
-  decorators: [withA11y],
 };
 
 export const Background = () => (

stories/LayerListItem.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import LayerList from '../src/components/LayerList';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'LayerList',
   component: LayerList,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/MapMaplibreGl.stories.jsx

@@ -1,14 +1,9 @@
 import React from 'react';
 import MapMaplibreGl from '../src/components/MapMaplibreGl';
-import {action} from '@storybook/addon-actions';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
 
 export default {
   title: 'MapMaplibreGl',
   component: MapMaplibreGl,
-  decorators: [withA11y],
 };
 
 const mapStyle = {

stories/MapOpenLayers.stories.jsx

@@ -1,14 +1,10 @@
 import React from 'react';
 import MapOpenLayers from '../src/components/MapOpenLayers';
-import {action} from '@storybook/addon-actions';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'MapOpenLayers',
   component: MapOpenLayers,
-  decorators: [withA11y],
 };
 
 const mapStyle = {

stories/Modal.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import Modal from '../src/components/Modal';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'Modal',
   component: Modal,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalAdd.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import ModalAdd from '../src/components/ModalAdd';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ModalAdd',
   component: ModalAdd,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalDebug.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import ModalDebug from '../src/components/ModalDebug';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ModalDebug',
   component: ModalDebug,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalExport.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import ModalExport from '../src/components/ModalExport';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ModalExport',
   component: ModalExport,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalLoading.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import ModalLoading from '../src/components/ModalLoading';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ModalLoading',
   component: ModalLoading,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalOpen.stories.jsx

@@ -2,13 +2,11 @@ import React from 'react';
 import ModalOpen from '../src/components/ModalOpen';
 import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ModalOpen',
   component: ModalOpen,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalSettings.stories.jsx

@@ -2,13 +2,10 @@ import React from 'react';
 import ModalSettings from '../src/components/ModalSettings';
 import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
 
 export default {
   title: 'ModalSettings',
   component: ModalSettings,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalSources.stories.jsx

@@ -2,13 +2,11 @@ import React from 'react';
 import ModalSources from '../src/components/ModalSources';
 import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ModalSources',
   component: ModalSources,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalSurvey.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import ModalSurvey from '../src/components/ModalSurvey';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ModalSurvey',
   component: ModalSurvey,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ScrollContainer.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import ScrollContainer from '../src/components/ScrollContainer';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ScrollContainer',
   component: ScrollContainer,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

tsconfig.json

@@ -1,103 +1,32 @@
 {
-  "compilerOptions": {
+    "compilerOptions": {
-    /* Visit https://aka.ms/tsconfig to read more about this file */
+      "target": "ES2020",
-
+      "useDefineForClassFields": true,
-    /* Projects */
+      "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+      "module": "ESNext",
-    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+      "skipLibCheck": true,
-    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+  
-    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+      /* Bundler mode */
-    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+      "moduleResolution": "bundler",
-    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+      "allowImportingTsExtensions": true,
-
+      "resolveJsonModule": true,
-    /* Language and Environment */
+      "isolatedModules": true,
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+      "noEmit": true,
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+      "jsx": "react-jsx",
-    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+  
-    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+      /* Linting */
-    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+      "strict": true,
-    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+      "noUnusedLocals": true,
-    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+      "noUnusedParameters": true,
-    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+      "noFallthroughCasesInSwitch": true
-    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    },
-    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    "include": ["src"],
-    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    "references": [{ "path": "./tsconfig.node.json" }],
-    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+    // TODO: Remove when issue is resolved https://github.com/cypress-io/cypress/issues/27448
-
+    "ts-node": {
-    /* Modules */
+      "compilerOptions": {
-    "module": "commonjs",                                /* Specify what module code is generated. */
+        "module": "ESNext",
-    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+        "moduleResolution": "Node"
-    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+      }
-    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    }
-    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+}
-    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
-    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
-    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
-    "resolveJsonModule": true,                        /* Enable importing .json files. */
-    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
-
-    /* JavaScript Support */
-    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
-    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
-    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
-
-    /* Emit */
-    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
-    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
-    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
-    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
-    // "removeComments": true,                           /* Disable emitting comments. */
-    "noEmit": true,                                   /* Disable emitting files from a compilation. */
-    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
-    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
-    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
-    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
-    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
-    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
-    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
-    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
-    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
-    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
-    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
-    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
-    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
-    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
-
-    /* Interop Constraints */
-    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
-    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
-    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
-
-    /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
-    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
-    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
-    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
-    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
-    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
-    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
-    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
-    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
-    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
-    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
-    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
-    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
-    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
-
-    /* Completeness */
-    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
-  }
-}

tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+      "composite": true,
+      "skipLibCheck": true,
+      "module": "ESNext",
+      "moduleResolution": "bundler",
+      "allowSyntheticDefaultImports": true
+    },
+    "include": ["vite.config.ts"]
+  }
+  

vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  server: {
+    port: 8888
+  },
+  plugins: [react()],
+  define: {
+    global: "window",
+  },
+});