Migrate to using Vite (code4recovery#487)

* vite

* use vitest

generate lcov

set node version

Add helper test

* Add pettier

Add pettier

migrate prettier

globals

rm babel config

* add terser

* update compiler target, eslint config

use iife

simplify config

* update contributing notes

fix doc numbering

* add lint action step

Author: pjaudiomv

.eslintrc.js

@@ -11,16 +11,27 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: '22'
           cache: 'npm'
       - run: npm install
+
+      - name: Check Prettier formatting
+        run: npx prettier --check src/
+        # Let fail for now
+        continue-on-error: true
+
+      - name: Run ESLint
+        run: npx eslint src/
+        # Let fail for now
+        continue-on-error: true
+
       - run: npm run test-coverage
-      - run: npx mix --production
+      - run: npm run build
 
       - name: Coveralls
         uses: coverallsapp/github-action@master

.github/workflows/build.yml

@@ -268,15 +268,14 @@ Contributions are welcome. Ideally, please join [Code for Recovery](https://code
 Here are the steps to follow when developing:
 
 1. clone (or, if you are not a member, fork and clone) this repository
-1. create a branch for your changes
-1. run `npm i` in the project folder (install NPM if it is not installed)
-1. run `npm run serve` in one terminal window (or use another solution to serve files locally)
-1. run `npx mix watch` in another terminal window (this updates files in development as you change them)
-1. confirm your changes at, for example, `http://localhost:3000/tests/aasanjose` (there are a number of examples in that folder)
+2. create a branch for your changes
+3. run `npm i` in the project folder (install NPM if it is not installed)
+4. run `npm run dev` to start the Vite dev server with HMR at `index.html`
+5. to test other examples in `public/tests/`, run `npm run preview` after building
 
 When you are ready to make a PR:
 
 1. clean up your diff, try to change as few lines as possible
-1. run prettier locally to autoformat your files
-1. alphabetize things like component props and CSS rules (if applicable)
-1. run `npx mix --production` to minify files
+2. run prettier locally to autoformat your files
+3. alphabetize things like component props and CSS rules (if applicable)
+4. run `npm run build` to create the production bundle

.prettierrc

@@ -0,0 +1,62 @@
+import js from '@eslint/js';
+import globals from 'globals'
+import ts from 'typescript-eslint';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config';
+
+export default defineConfig([
+    globalIgnores(['public']),
+    {
+        files: ['**/*.{ts,tsx}'],
+        extends: [
+            js.configs.recommended,
+            ...ts.configs.recommended,
+            reactPlugin.configs.flat.recommended,
+            reactHooksPlugin.configs.flat.recommended,
+            reactRefresh.configs.vite,
+            reactPlugin.configs.flat['jsx-runtime'],
+        ],
+        languageOptions: {
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true,
+                },
+                ecmaVersion: 2020,
+                sourceType: 'module',
+            },
+            globals: {
+                ...globals.browser,
+                // Custom globals
+                Lang: 'readonly',
+                TSMLReactConfig: 'readonly',
+                Translation: 'readonly',
+            },
+        },
+        settings: {
+            react: {
+                version: 'detect',
+            },
+        },
+        rules: {
+            'react/jsx-uses-react': 'off',
+            'react/react-in-jsx-scope': 'off',
+            'react/no-unknown-property': ['error', { ignore: ['css'] }],
+            'no-unused-vars': [
+                'error',
+                {
+                    argsIgnorePattern: '^_',
+                    varsIgnorePattern: '^_',
+                    caughtErrorsIgnorePattern: '^_',
+                },
+            ],
+            // Turning these off for now to clean up warnings
+            'react-refresh/only-export-components': 'off',
+            'react-hooks/exhaustive-deps': 'off',
+            'react-hooks/set-state-in-effect': 'off',
+            'react-hooks/immutability': 'off',
+            'react-hooks/preserve-manual-memoization': 'off'
+        },
+    },
+]);

README.md

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TSML UI - Development</title>
+  </head>
+  <body>
+    <div
+      id="tsml-ui"
+      data-src="https://sheets.code4recovery.org/storage/12Ga8uwMG4WJ8pZ_SEU7vNETp_aQZ-2yNVsYDFqIwHyE.json"
+      data-timezone="America/New_York"
+    ></div>
+    <script type="module" src="/src/app.tsx"></script>
+  </body>
+</html>

babel.config.js

@@ -1,4 +1,7 @@
 [build]
   publish = "public/"
-  command = "npx mix --production"
+  command = "npm run build"
+
+[build.environment]
+  NODE_VERSION = "20"