From d22c3b0c257f5daf5b401988a35ab9ce981a2341 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Fri, 12 Aug 2022 19:54:46 +0200
Subject: refactor(frontend): move from Webpack to Vite

Also overhaulds the building and linting for frontend assets.
---
 subprojects/frontend/src/index.tsx | 46 ++++++++++++++++++++++++++------------
 1 file changed, 32 insertions(+), 14 deletions(-)

(limited to 'subprojects/frontend/src/index.tsx')

diff --git a/subprojects/frontend/src/index.tsx b/subprojects/frontend/src/index.tsx
index 152c0bf7..2176b277 100644
--- a/subprojects/frontend/src/index.tsx
+++ b/subprojects/frontend/src/index.tsx
@@ -1,13 +1,25 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
 import CssBaseline from '@mui/material/CssBaseline';
+import React, { Suspense, lazy } from 'react';
+import { createRoot } from 'react-dom/client';
+import '@fontsource/jetbrains-mono/400.css';
+import '@fontsource/jetbrains-mono/400-italic.css';
+import '@fontsource/jetbrains-mono/700.css';
+import '@fontsource/jetbrains-mono/700-italic.css';
+import '@fontsource/jetbrains-mono/variable.css';
+import '@fontsource/jetbrains-mono/variable-italic.css';
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/300-italic.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/400-italic.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/500-italic.css';
+import '@fontsource/roboto/700.css';
+import '@fontsource/roboto/700-italic.css';
 
-import { App } from './App';
-import { RootStore, RootStoreProvider } from './RootStore';
-import { ThemeProvider } from './theme/ThemeProvider';
-import { getLogger } from './utils/logger';
-
-import './index.scss';
+import Loading from './Loading';
+import RootStore, { RootStoreProvider } from './RootStore';
+import ThemeProvider from './theme/ThemeProvider';
+import getLogger from './utils/getLogger';
 
 const log = getLogger('index');
 
@@ -60,13 +72,19 @@ scope Family = 1, Person += 5..10.
 
 const rootStore = new RootStore(initialValue);
 
+const App = lazy(() => import('./App.js'));
+
 const app = (
-  <RootStoreProvider rootStore={rootStore}>
-    <ThemeProvider>
-      <CssBaseline />
-      <App />
-    </ThemeProvider>
-  </RootStoreProvider>
+  <React.StrictMode>
+    <RootStoreProvider rootStore={rootStore}>
+      <ThemeProvider>
+        <CssBaseline enableColorScheme />
+        <Suspense fallback={<Loading />}>
+          <App />
+        </Suspense>
+      </ThemeProvider>
+    </RootStoreProvider>
+  </React.StrictMode>
 );
 
 const rootElement = document.getElementById('app');
-- 
cgit v1.2.3-54-g00ecf