Update build to use Vite instead of create-react-app (#28)

* use vite maybe idk

* use npm

* add ~ path

* use ~ path

* close to working build

* getting there

* fix process.env

* fix emotion stuff

* fix things

* fix background color

* fix buffer usage

* dont convert to uint8array

* fix build

* remove old manifest

* remove reference to old manifest

* dont define public url default

* remove default base url

* update github actions

* update package-lock.json

* fix npm commands

* fix eslint things

* fix warning about cascading

* update github actions

* add more aggressive tree shaking

* use web-first slippi-js

* don't precache all character images

* remove backup file

* dont try to externalize iconv-lite

* fix deps

Author: vinceau

.eslintignore

@@ -15,28 +15,20 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [20.x]
         os: [ubuntu-latest]
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }} on ${{ matrix.os }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - name: Cache node modules
-        uses: actions/cache@v1
-        id: cache
-        with:
-          path: node_modules
-          key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.OS }}-build-${{ env.cache-name }}-
-            ${{ runner.OS }}-build-
-            ${{ runner.OS }}-
+          cache: "npm"
       - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: |
-          yarn install
+        run: npm install
+      - name: Run type checking
+        run: npm run typecheck
+      - name: Run linting
+        run: npm run lint
       - name: Build
-        run: |
-          CI=false yarn run build
+        run: npm run build

.eslintrc.json

@@ -14,36 +14,28 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [20.x]
         os: [ubuntu-latest]
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }} on ${{ matrix.os }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - name: Cache node modules
-        uses: actions/cache@v1
-        id: cache
-        with:
-          path: node_modules
-          key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.OS }}-build-${{ env.cache-name }}-
-            ${{ runner.OS }}-build-
-            ${{ runner.OS }}-
+          cache: "npm"
       - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: |
-          yarn install
+        run: npm install
+      - name: Run type checking
+        run: npm run typecheck
+      - name: Run linting
+        run: npm run lint
       - name: Build and deploy
-        run: |
-          CI=false yarn run build
+        run: npm run build
         env:
           PUBLIC_URL: /slippi-stats
-      - name: Publish
-        uses: peaceiris/actions-gh-pages@v2.4.0
-        env:
-          ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
-          PUBLISH_BRANCH: gh-pages
-          PUBLISH_DIR: ./build
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v4
+        if: github.ref == 'refs/heads/master'
+        with:
+          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
+          publish_dir: ./dist

.github/workflows/build.yml

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

.github/workflows/publish.yml

@@ -35,7 +35,7 @@ Determining who wins a game seems easy at first but once you consider the possib
 
 ### How do I show different stats?
 
-First click the *customize stats* button in the top right of the SLP file list to show the list of available stats. Then toggle the checkboxes to enable and disable certain stats from being calculated.
+First click the _customize stats_ button in the top right of the SLP file list to show the list of available stats. Then toggle the checkboxes to enable and disable certain stats from being calculated.
 
 ![how to customize stats](https://i.imgur.com/6CCWPMr.gif)
 
@@ -72,21 +72,21 @@ Clone the repo and install dependencies:
 ```bash
 git clone https://github.com/vinceau/slippi-stats
 cd slippi-stats
-yarn install
+npm install
 ```
 
 In the project directory, you can run:
 
 ```bash
-yarn run start
+npm run start
 ```
 
 This runs the app in the development mode. Open <http://localhost:3000> to view it in the browser. The page will reload as you make changes.
 
 To build the app for production, run:
 
 ```bash
-yarn run build
+npm run build
 ```
 
 ### Adding Custom Stats

.gitignore

@@ -0,0 +1,68 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  {
+    ignores: ["dist/**", "node_modules/", "**/*.test.{js,jsx,ts,tsx}", "build/**", "stats-old/**"],
+  },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: {
+        ...globals.browser,
+        ...globals.es2020,
+      },
+      parserOptions: {
+        project: ["./tsconfig.app.json", "./tsconfig.node.json"],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      "simple-import-sort": simpleImportSort,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      // TypeScript rules
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-member-accessibility": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-unused-expressions": "warn",
+      "@typescript-eslint/interface-name-prefix": "off",
+
+      // React rules
+      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+
+      // Import sorting
+      "simple-import-sort/sort": "warn",
+
+      // General rules
+      "no-console": "off",
+      "sort-keys": "off",
+      "sort-imports": "off",
+    },
+  },
+  {
+    extends: [js.configs.recommended],
+    files: ["**/*.{js,jsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: {
+        ...globals.browser,
+        ...globals.es2020,
+        ...globals.node,
+      },
+    },
+    rules: {
+      "no-console": "off",
+    },
+  }
+);

README.md

@@ -2,16 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#286163" />
     <meta name="description" content="Instantly compute Slippi stats and beautifully render the results." />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -65,15 +60,6 @@
   <body class="themed">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>