Mithril js framework, enable hot reload?

Question

I am using Mithril javascript framework with Vite bundler. Application is really complex and during debugging, for every change (even a small HTML edit), it takes me like 10-20 seconds to get to the screen and state that I need to debug the new code, because any small change (like adding one letter to HTML p tag) refreshes my whole application.

This is my vite config:

import { defineConfig } from 'vite';
import basicSsl from '@vitejs/plugin-basic-ssl';
import { VitePWA } from 'vite-plugin-pwa';
import eslint from 'vite-plugin-eslint';

export default defineConfig({
  define: {
    global: {},
  },
  esbuild: {
    jsx: 'transform',
    jsxFactory: 'm',
    jsxInject: `import m from 'mithril'`,
    jsxFragment: "'['",
  },
  server: {
    host: '0.0.0.0',
    port: '5173',
    https: true,
  },
  plugins: [
    basicSsl(),
    VitePWA({
      registerType: 'autoUpdate',
      devOptions: {
        enabled: true,
      },
      manifest: {
        name: '...',
        short_name: '...',
        description: '...',
        theme_color: '#9977BB',
        icons: [],
      },
    }),
    eslint(),
  ],
});

And relevant parts of package.json:

{
    "scripts": {
        "start": "npm run dev",
        "dev": "npx vite --host 0.0.0.0",
        "build": "npx vite build",
        "preview": "npx vite preview",
        "check": "npx prettier --check src/**/*.js"
    },
    "devDependencies": {
        "@vitejs/plugin-basic-ssl": "^1.0.1",
        "eslint": "^8.32.0",
        "eslint-plugin-mithril": "^0.2.0",
        "prettier": "^2.8.1",
        "sass": "^1.57.1",
        "vite": "^4.0.3",
        "vite-plugin-eslint": "^1.8.1",
        "vite-plugin-pwa": "^0.14.1"
    },
    "dependencies": {
        "mithril": "^2.2.2",
    }
}

Is there a way to enable hot reloading here? Also, one interesting behaviour that maybe is worth noting is that SASS edits do not refresh whole page. I tried changing screens that are currently not open in the app and I still experience whole page reload (live reload).

Also, here is my index.jsx file:

import Authentication from './screens/Authentication';
import Drive from './screens/Drive';
import BrowserIncompatible from './screens/BrowserIncompatible';
import Loading from './screens/Loading';

import '@primer/css/index.scss';

import * as packageJson from '../package.json';

// log version for bug reporting
console.info(`version: ${packageJson.version}`);

const isBrowserCompatible = () =>
  navigator &&
  getComputedStyle &&
  setTimeout &&
  Uint8Array &&
  console &&
  Promise &&
  TextDecoder &&
  TextEncoder &&
  prompt &&
  alert &&
  clearTimeout &&
  crypto &&
  CryptoKey &&
  AbortController &&
  Blob &&
  URL;

m.route(document.body, '/loading', {
  '/authentication': Authentication,
  '/': Drive,
  '/incompatible': BrowserIncompatible,
  '/loading': Loading,
});

// redrect to BrowserIncompatible page if browser is incompatible
isBrowserCompatible() || m.route.set('/incompatible');

It is loaded in index.html as a module, like this:

<script src="src/index.jsx" type="module"></script>

P.S. to be clear, I am looking for the React-like behaviour, where I would change something and not experience going to the default router page and losing whole state.