Switch from Webpack to Vite

.vscode/settings.json

@@ -12,6 +12,6 @@
     "**/.project": true,
     "**/.settings": true,
     "**/.factorypath": true,
-    "**/node_modules": true
+    "**/node_modules": false
   }
 }

package.json

@@ -9,7 +9,7 @@
   },
   "scripts": {
     "lint": "eslint .",
-    "start": "webpack serve",
+    "start": "vite src --host",
     "build:index-js": "create-index-js -i \"\" src -c dirs.txt --filesConfig files.txt",
     "build:logo": "node -r ts-node/register src/buildLogo",
     "build:webpack": "webpack --progress",
@@ -41,7 +41,6 @@
     "map-values": "^1.0.1",
     "matter-js": "^0.17.1",
     "mobx": "^6.3.7",
-    "mobx-autorun-cleanup": "^1.2.0",
     "mobx-observable-promise": "^0.5.16",
     "mobx-react-lite": "^3.2.2",
     "mobx-theme": "^3.0.0",
@@ -97,11 +96,11 @@
     "@types/webpack-env": "^1.16.2",
     "@types/webpack-stats-plugin": "^0.3.2",
     "@typescript-eslint/eslint-plugin": ">=4.0.1",
+    "@vitejs/plugin-react": "^2.0.1",
     "babel-loader": "^8.2.2",
     "babel-plugin-import": "^1.13.3",
     "babel-plugin-react-require": "^3.1.3",
     "cspell": "^6.7.0",
-    "css-loader": "^5.2.6",
     "css-minimizer-webpack-plugin": "^3.3.1",
     "eslint": ">=7.12.1",
     "eslint-config-standard-jsx": "^10.0.0",
@@ -116,11 +115,11 @@
     "rc-field-form": "^1.21.1",
     "react-refresh": "^0.11.0",
     "react-use-promise": "^0.3.1",
-    "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.0",
     "ts-node": "^10.1.0",
-    "typescript": "^4.3.5",
+    "typescript": "^4.8.2",
     "typescript-plugin-css-modules": "^3.4.0",
+    "vite": "^3.0.9",
     "webpack": "^5.44.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^4.7.2",

src/AllGames.tsx

@@ -20,7 +20,7 @@ import { css } from '@emotion/css'
 import { red } from '@ant-design/colors'
 import centerStyles from './centerStyles'
 
-const allTags = new Set([...games.values()].flatMap(({ tags }) => tags ?? []))
+const allTags = new Set(Object.values(games).flatMap(({ tags }) => tags ?? []))
 
 const AllGames: FC = () => {
   const [
@@ -43,8 +43,9 @@ const AllGames: FC = () => {
       <div>
         <h1 className={css(centerStyles)}>All Games</h1>
         {downloadedGamesError === undefined
-          ? <Table
-              dataSource={[...games]}
+          ? (
+            <Table
+              dataSource={Object.entries(games)}
               columns={[{
                 title: 'Name',
                 render: ([url, { name }]: [string, GameMeta]) => <Link to={`./${url}`}>{name}</Link>
@@ -108,12 +109,13 @@ const AllGames: FC = () => {
               }]}
               rowKey='0'
               pagination={{ hideOnSinglePage: true }}
-            />
-          : <ErrorResult
+            />)
+          : (
+            <ErrorResult
               error={downloadedGamesError}
               title='Error Getting Downloaded Games'
               retry={retry}
-            />}
+            />)}
       </div>
     </>
   )

src/Game.tsx

@@ -27,11 +27,14 @@ const Game: FC<GameProps> = props => {
   const navigate = useNavigate()
   const [retryAttempt, retry] = useUnique()
   const [gameExports, error, state] = usePromise<GameExports>(
-    async () => await import(
-      /* webpackInclude: /index.tsx/ */
-      /* webpackChunkName: "games/[request]" */
-      `./games/${id}`
-    ),
+    async () => {
+      throw new Error('disabled')
+      //   await import(
+      //   /* webpackInclude: /index.tsx/ */
+      //   /* webpackChunkName: "games/[request]" */
+      //   `./games/${id}`
+      // )
+    },
     [id, retryAttempt]
   )
   const ref = useRef(null)

src/games.ts

@@ -1,11 +1,5 @@
 import GameMeta from './types/GameMeta'
-import { dirname, normalize } from 'path'
 
-const gamesContext = require.context('./games', true, /meta\.ts/)
-
-const games = new Map<string, GameMeta>(gamesContext.keys().map(k => [
-  normalize(dirname(k)),
-  gamesContext(k).default
-]))
+const games = import.meta.glob<GameMeta>('./games/*/meta.ts', { eager: true, import: 'default' })
 
 export default games

src/index.html

@@ -3,10 +3,11 @@
 
 <head>
   <meta charset="UTF-8" />
+  <script type="module" src="./main.tsx"></script>
 </head>
 
 <body>
   <div id="app"></div>
 </body>
 
-</html>
+</html>

src/main.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react'
 import { createRoot } from 'react-dom/client'
 import IndexPage from './IndexPage'
-import light from './light.lazy.css'
-import dark from './dark.lazy.css'
+import light from 'antd/dist/antd.css?raw'
+import dark from 'antd/dist/antd.dark.css?raw'
 import { DefaultThemes } from 'mobx-theme'
-import LazyCss from './LazyCss'
-import { autorunCleanup } from 'mobx-autorun-cleanup'
 import theme from './theme'
 import never from 'never'
+import { autorun } from 'mobx'
 
-const themes: Record<DefaultThemes, LazyCss> = { light, dark }
+const themes: Record<DefaultThemes, string> = { light, dark }
 
 createRoot(document.getElementById('app') ?? never()).render(<IndexPage />)
 
-autorunCleanup(() => {
+const themeStyleElement = document.createElement('style')
+document.head.appendChild(themeStyleElement)
+autorun(() => {
   const currentTheme = theme.theme
-  themes[currentTheme].use()
-  return () => themes[currentTheme].unuse()
+  themeStyleElement.innerText = themes[currentTheme]
 })

src/types.d.ts

@@ -1,3 +1,5 @@
+import 'vite/client'
+
 interface LazyCss {
   use: () => void
   unuse: () => void

src/util/indexedDb/index.ts

@@ -0,0 +1,2 @@
+export type { default as Db } from './Db'
+export { default as openDb } from './openDb'

src/vite.config.js

@@ -0,0 +1,18 @@
+import react from '@vitejs/plugin-react'
+
+/** @type {import('vite').UserConfig} */
+export default {
+  resolve: {
+    alias: {
+      assert: require.resolve('assert-browserify')
+    }
+  },
+  define: {
+    process: require('process/browser'),
+    global: 'globalThis'
+  },
+  plugins: [react()],
+  build: {
+    sourcemap: true
+  }
+}

tsconfig.json

@@ -34,6 +34,7 @@
     "./src/**/*.tsx",
     "./src/**/*.ts",
     "./src/types.d.ts",
-    "./webpack.config.ts"
+    "./webpack.config.ts",
+    "vite/client"
   ]
-}
+}