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

.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
-    - run: npm run profiling-build
-    - name: artifacts/editor-profiling
-      uses: actions/upload-artifact@v1
-      with:
-        name: editor-profiling
-        path: build/profiling
+        path: dist
     - 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');
-
-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,
-        ]
-      }
-    };
-  },
+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: {}
+  }
 };
+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/):
-
-> 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.
+The build process will watch for changes to the filesystem, rebuild and autoreload the editor.
 
 ```
 npm run build

src/template.html → 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>