From e04eff53460af8e15d258dccec13c3550d35f96d Mon Sep 17 00:00:00 2001 From: Rajas Paranjpe <52586855+ChocolateLoverRaj@users.noreply.github.com> Date: Sat, 27 Aug 2022 12:47:38 -0700 Subject: [PATCH] More progress to switching to vite --- .vscode/settings.json | 2 +- package.json | 7 +++---- src/AllGames.tsx | 14 ++++++++------ src/Game.tsx | 13 ++++++++----- src/dark.lazy.css | 1 - src/games.ts | 8 +------- src/index.html | 3 ++- src/light.lazy.css | 1 - src/main.tsx | 16 ++++++++-------- src/types.d.ts | 2 ++ src/util/indexedDb/index.ts | 2 ++ src/vite.config.js | 20 ++++++++++++++++++++ tsconfig.json | 5 +++-- 13 files changed, 58 insertions(+), 36 deletions(-) delete mode 100644 src/dark.lazy.css delete mode 100644 src/light.lazy.css create mode 100644 src/util/indexedDb/index.ts create mode 100644 src/vite.config.js diff --git a/.vscode/settings.json b/.vscode/settings.json index 4f70e30..e5cae0e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -12,6 +12,6 @@ "**/.project": true, "**/.settings": true, "**/.factorypath": true, - "**/node_modules": true + "**/node_modules": false } } diff --git a/package.json b/package.json index d989bfb..feb87a4 100644 --- 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", @@ -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-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 index cfe1cb7..f53f391 100644 --- 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 = () => {

All Games

{downloadedGamesError === undefined - ? {name} @@ -108,12 +109,13 @@ const AllGames: FC = () => { }]} rowKey='0' pagination={{ hideOnSinglePage: true }} - /> - : ) + : ( + } + />)} ) diff --git a/src/Game.tsx b/src/Game.tsx index 102a69b..bf97940 100644 --- a/src/Game.tsx +++ b/src/Game.tsx @@ -27,11 +27,14 @@ const Game: FC = props => { const navigate = useNavigate() const [retryAttempt, retry] = useUnique() const [gameExports, error, state] = usePromise( - 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 deleted file mode 100644 index 15e6a86..0000000 --- a/src/dark.lazy.css +++ /dev/null @@ -1 +0,0 @@ -@import "~antd/dist/antd.dark.css"; diff --git a/src/games.ts b/src/games.ts index fa24d08..168e216 100644 --- 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(gamesContext.keys().map(k => [ - normalize(dirname(k)), - gamesContext(k).default -])) +const games = import.meta.glob('./games/*/meta.ts', { eager: true, import: 'default' }) export default games diff --git a/src/index.html b/src/index.html index fa7b305..41ebcc7 100644 --- a/src/index.html +++ b/src/index.html @@ -3,10 +3,11 @@ +
- \ No newline at end of file + diff --git a/src/light.lazy.css b/src/light.lazy.css deleted file mode 100644 index c4c61e7..0000000 --- a/src/light.lazy.css +++ /dev/null @@ -1 +0,0 @@ -@import "~antd/dist/antd.css"; diff --git a/src/main.tsx b/src/main.tsx index 912f29f..1bec43d 100644 --- a/src/main.tsx +++ b/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 = { light, dark } +const themes: Record = { light, dark } createRoot(document.getElementById('app') ?? never()).render() -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] }) diff --git a/src/types.d.ts b/src/types.d.ts index 0f2bedc..6ba95de 100644 --- 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 new file mode 100644 index 0000000..18b3b9a --- /dev/null +++ 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 new file mode 100644 index 0000000..6453c77 --- /dev/null +++ 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 index 2af7d43..d9934c8 100644 --- 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" ] -} \ No newline at end of file +}