More progress to switching to vite

ChocolateLoverRaj · Aug 27, 2022 · 2a31c44 · 2a31c44
1 parent 3944a69
commit 2a31c44
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 24 deletions.
diff --git a/package.json b/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",
@@ -97,6 +97,7 @@
     "@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",
@@ -121,6 +122,7 @@
     "ts-node": "^10.1.0",
     "typescript": "^4.3.5",
     "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",

diff --git a/src/AllGames.tsx b/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>
     </>
   )

diff --git a/src/Game.tsx b/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)

diff --git a/src/dark.lazy.css b/src/dark.lazy.css
@@ -1 +1 @@
-@import "~antd/dist/antd.dark.css";
+@import "antd/dist/antd.dark.css";
diff --git a/src/games.ts b/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
diff --git a/src/index.html b/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>
diff --git a/src/light.lazy.css b/src/light.lazy.css
@@ -1 +1 @@
-@import "~antd/dist/antd.css";
+@import "antd/dist/antd.css";
diff --git a/src/types.d.ts b/src/types.d.ts
@@ -1,3 +1,5 @@
+import 'vite/client'
+
 interface LazyCss {
   use: () => void
   unuse: () => void

diff --git a/src/util/indexedDb/index.ts b/src/util/indexedDb/index.ts
@@ -0,0 +1,2 @@
+export type { default as Db } from './Db'
+export { default as openDb } from './openDb'
diff --git a/src/vite.config.js b/src/vite.config.js
@@ -0,0 +1,20 @@
+import react from '@vitejs/plugin-react'
+
+/** @type {import('vite').UserConfig} */
+const config = {
+  resolve: {
+    alias: {
+      assert: require.resolve('assert-browserify')
+    }
+  },
+  define: {
+    process: require('process/browser'),
+    global: 'globalThis'
+  },
+  plugins: [react()],
+  build: {
+    sourcemap: true
+  }
+}
+
+export default config
diff --git a/tsconfig.json b/tsconfig.json
@@ -34,6 +34,7 @@
     "./src/**/*.tsx",
     "./src/**/*.ts",
     "./src/types.d.ts",
-    "./webpack.config.ts"
+    "./webpack.config.ts",
+    "vite/client"
   ]
-}
+}