Bump loader-utils from 1.4.0 to 1.4.2

Bumps [loader-utils](https://github.com/webpack/loader-utils) from 1.4.0 to 1.4.2.
- [Release notes](https://github.com/webpack/loader-utils/releases)
- [Changelog](https://github.com/webpack/loader-utils/blob/v1.4.2/CHANGELOG.md)
- [Commits](https://github.com/webpack/loader-utils/compare/v1.4.0...v1.4.2)

---
updated-dependencies:
- dependency-name: loader-utils
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.babelrc

@@ -0,0 +1,21 @@
+{
+  "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

@@ -1,20 +0,0 @@
-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/ISSUE_TEMPLATE/bug_report.md

@@ -9,7 +9,7 @@ assignees: ''
 
 <!-- Thanks for your feedback! Please complete the following information: -->
 
-**Maputnik version**:<!-- e.g v1.7.0, main -->
+**Maputnik version**:<!-- e.g v1.7.0, master -->
 **Browser**:
 **OS**:<!-- (Windows, macOS, Linux) -->
 

.github/workflows/ci.yml

@@ -2,11 +2,26 @@ name: ci
 
 on:
   pull_request:
-    branches: [ main ]
+    branches: [ master ]
   push:
-    branches: [ main ]
+    branches: [ master ]
 
 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 }}
@@ -20,7 +35,7 @@ jobs:
 
     steps:
     - uses: actions/checkout@v4
-    - run: docker build -t docker.pkg.github.com/maputnik/editor/editor:main .
+    - run: docker build -t docker.pkg.github.com/maputnik/editor/editor:master .
 
   # build the editor
   build-node:
@@ -79,7 +94,13 @@ jobs:
       uses: actions/upload-artifact@v1
       with:
         name: editor
-        path: dist
+        path: build/build
+    - 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:

.github/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: deploy
 
 on:
   push:
-    branches: [ main ]
+    branches: [ master ]
     push:
       tags:
       - 'v*'
@@ -23,5 +23,5 @@ jobs:
     steps:
     - uses: actions/checkout@v4
     - run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login docker.pkg.github.com -u orangemug --password-stdin
-    - run: docker build -t docker.pkg.github.com/maputnik/editor/editor:main .
-    - run: docker push docker.pkg.github.com/maputnik/editor/editor:main
+    - run: docker build -t docker.pkg.github.com/maputnik/editor/editor:master .
+    - run: docker push docker.pkg.github.com/maputnik/editor/editor:master

.gitignore

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

.storybook/main.js

@@ -1,9 +1,24 @@
-const config = {
-  stories: ['../stories/**/*.stories.jsx'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-a11y/register', '@storybook/addon-storysource'],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {}
-  }
+const rules = require('../config/webpack.rules');
+
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: [
+    '@storybook/addon-actions',
+    '@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/dist .
+COPY --from=builder /maputnik/build/build .
 
 EXPOSE 8888
 CMD python -m http.server 8888

README.md

@@ -49,14 +49,18 @@ npm install
 npm run start
 ```
 
-If you want Maputnik to be accessible externally use the [`--host` option](https://vitejs.dev/config/server-options.html#server-host):
+If you want Maputnik to be accessible externally use the [`--host` option](https://webpack.js.org/configuration/dev-server/#devserverhost):
 
 ```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.
+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/):
+
+> 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

@@ -0,0 +1,71 @@
+"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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,44 @@
+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'
+    ]
+  }
+];

package.json

@@ -1,17 +1,22 @@
 {
   "name": "maputnik",
-  "version": "2.0.0-pre.2",
+  "version": "2.0.0-pre.1",
   "description": "A MapLibre GL visual style editor",
   "main": "''",
   "scripts": {
-    "start": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint ./src --ext ts,tsx,js,jsx --report-unused-disable-directives --max-warnings 0 && npm run lint-css",
+    "stats": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config config/webpack.production.config.js --progress=profile --json > stats.json",
+    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config config/webpack.production.config.js --progress=profile --color",
+    "profiling-build": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config config/webpack.profiling.config.js --progress=profile --color",
     "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\"",
-    "storybook": "storybook dev -h 0.0.0.0 -p 6006",
-    "build-storybook": "storybook build -o build/storybook"
+    "lint": "npm run lint-js && npm run lint-css",
+    "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -h 0.0.0.0 -p 6006",
+    "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook -o build/storybook"
   },
   "repository": {
     "type": "git",
@@ -21,9 +26,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",
@@ -84,40 +89,84 @@
       ]
     }
   },
+  "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": {
-    "@rollup/plugin-replace": "^5.0.5",
-    "@storybook/addon-a11y": "^7.6.5",
-    "@storybook/addon-actions": "^7.6.5",
-    "@storybook/addon-links": "^7.6.5",
-    "@storybook/addon-storysource": "^7.6.5",
-    "@storybook/addons": "^7.6.5",
-    "@storybook/builder-vite": "^7.6.5",
-    "@storybook/react": "^7.6.5",
-    "@storybook/react-vite": "^7.6.5",
-    "@storybook/theming": "^7.6.5",
+    "@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",
+    "@babel/preset-flow": "^7.16.7",
+    "@babel/preset-react": "^7.16.7",
+    "@mdi/js": "^6.6.96",
+    "@storybook/addon-a11y": "^6.4.20",
+    "@storybook/addon-actions": "^6.4.20",
+    "@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",
-    "@vitejs/plugin-react": "^4.2.0",
+    "babel-loader": "^8.2.4",
+    "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.53.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.4",
+    "eslint": "^8.12.0",
+    "eslint-plugin-react": "^7.29.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",
-    "storybook": "^7.6.5",
+    "sass-loader": "^10.2.1",
+    "style-loader": "^2.0.0",
     "stylelint": "^14.6.1",
     "stylelint-config-recommended-scss": "^6.0.0",
     "stylelint-scss": "^4.2.0",
-    "typescript": "^5.3.3",
+    "svg-inline-loader": "^0.8.2",
+    "transform-loader": "^0.2.4",
+    "typescript": "^4.9.5",
     "uuid": "^8.3.2",
-    "vite": "^5.0.0"
+    "webpack": "^4.46.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

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

src/components/AppToolbar.jsx

@@ -4,6 +4,9 @@ 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'
 
 
@@ -214,7 +217,7 @@ export default class AppToolbar extends React.Component {
             rel="noreferrer noopener"
             href="https://github.com/maputnik/editor"
           >
-            <img src="node_modules/maputnik-design/logos/logo-color.svg" />
+            <span dangerouslySetInnerHTML={{__html: logoImage}} />
             <h1>
               <span className="maputnik-toolbar-name">{pkgJson.name}</span>
               <span className="maputnik-toolbar-version">v{pkgJson.version}</span>

src/components/Doc.jsx

@@ -21,14 +21,14 @@ export default class Doc extends React.Component {
 
     const renderValues = (
       !!values &&
-      // HACK: Currently we merge additional values into the style spec, so this is required
-      // See <https://github.com/maputnik/editor/blob/main/src/components/PropertyGroup.jsx#L16>
+      // HACK: Currently we merge additional values into the stylespec, so this is required
+      // See <https://github.com/maputnik/editor/blob/master/src/components/fields/PropertyGroup.jsx#L16>
       !Array.isArray(values)
     );
 
     return (
       <>
-        {doc &&
+        {doc && 
           <div className="SpecDoc">
             <div className="SpecDoc__doc">{doc}</div>
             {renderValues &&

src/components/MapOpenLayers.jsx

@@ -1,12 +1,13 @@
 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, Overlay} from 'ol';
+import {Map, View, Proj, 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();
     }
 
-    setTimeout(() => {
+    setImmediate(() => {
       this.props.onOpenToggle(false);
-    }, 0);
+    });
   }
 
   render() {

src/components/ModalExport.jsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Slugify from 'slugify'
-import {saveAs} from 'file-saver'
-import {version} from 'maplibre-gl'
+import { saveAs } from 'file-saver'
+import pkgLockJson from '../../package-lock.json'
+
 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'
@@ -12,7 +14,7 @@ import style from '../libs/style'
 import fieldSpecAdditional from '../libs/field-spec-additional'
 
 
-const MAPLIBRE_GL_VERSION = version;
+const MAPLIBRE_GL_VERSION = pkgLockJson.dependencies["maplibre-gl"].version;
 
 
 export default class ModalExport extends React.Component {

src/components/SpecField.jsx

@@ -8,6 +8,7 @@ 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,3 +1,11 @@
 import MapLibreGl from "maplibre-gl"
+import {readFileSync} from 'fs'
 
-MapLibreGl.setRTLTextPlugin('https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js');
+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, () => {});

src/libs/urlopen.js

@@ -0,0 +1,65 @@
+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

@@ -1,31 +0,0 @@
-// @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;
   }
 
-  img {
+  svg {
     width: 30px;
     padding-right: $margin-2;
     vertical-align: top;

src/template.html

@@ -2,9 +2,9 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Maputnik</title>
+  <title><%= htmlWebpackPlugin.options.title %></title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="manifest" href="src/manifest.json">
+  <link rel="manifest" href="manifest.json">
   <style>
     html {
       background-color: rgb(28, 31, 36);
@@ -23,7 +23,7 @@
       align-items: center;
     }
 
-    .loading__logo img {
+    .loading__logo svg {
       width: 200px;
       height: 200px;
     }
@@ -38,6 +38,7 @@
   </style>
 </head>
 <body>
+  <!-- TODO: Import dynamically -->
   <!-- From <https://github.com/hail2u/color-blindness-emulation> -->
   <svg
     aria-hidden="true"
@@ -122,10 +123,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>

stories/FieldArray.stories.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -1,11 +1,15 @@
 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -1,11 +1,14 @@
 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,13 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,13 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -2,10 +2,12 @@ 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.js

@@ -1,10 +1,14 @@
 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.js

@@ -1,11 +1,14 @@
 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.js

@@ -1,9 +1,14 @@
 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.js

@@ -1,10 +1,14 @@
 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.js

@@ -1,11 +1,14 @@
 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.js

@@ -1,11 +1,14 @@
 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.js

@@ -1,11 +1,14 @@
 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.js

@@ -1,11 +1,14 @@
 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.js

@@ -1,11 +1,14 @@
 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.js

@@ -2,11 +2,13 @@ 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.js

@@ -2,10 +2,13 @@ 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.js

@@ -2,11 +2,13 @@ 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.js

@@ -1,11 +1,14 @@
 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.js

@@ -1,11 +1,14 @@
 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,32 +1,103 @@
 {
-    "compilerOptions": {
-      "target": "ES2020",
-      "useDefineForClassFields": true,
-      "lib": ["ES2020", "DOM", "DOM.Iterable"],
-      "module": "ESNext",
-      "skipLibCheck": true,
-  
-      /* Bundler mode */
-      "moduleResolution": "bundler",
-      "allowImportingTsExtensions": true,
-      "resolveJsonModule": true,
-      "isolatedModules": true,
-      "noEmit": true,
-      "jsx": "react-jsx",
-  
-      /* Linting */
-      "strict": true,
-      "noUnusedLocals": true,
-      "noUnusedParameters": true,
-      "noFallthroughCasesInSwitch": true
-    },
-    "include": ["src"],
-    "references": [{ "path": "./tsconfig.node.json" }],
-    // TODO: Remove when issue is resolved https://github.com/cypress-io/cypress/issues/27448
-    "ts-node": {
-      "compilerOptions": {
-        "module": "ESNext",
-        "moduleResolution": "Node"
-      }
-    }
-}
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "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. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "commonjs",                                /* Specify what module code is generated. */
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    // "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

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

vite.config.ts

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