Migrate to using Vite

[pjaudiomv]

This PR aims to modernize the build and development files.

Changes

• Removes Laravel Mix and Webpack. Adds Vite giving us faster builds and HMR
• Removes Jest. Adds Vitest with native ESM support and Vite integration
• Migrated from .eslintrc.js to flat config (eslint.config.js)
• Moved from .prettierrc to prettier.config.js

Notes

• npm run format should prob be ran in subsequent PR, I chose not to run it as didn't want to create larger diff than necessary. We could then add checks to github ci for prettier to pass.
• The Eslint file should/needs some tweaking, I used a generic react config and merged in some of the previous settings. We could then add checks to github ci for lint to pass.
• IIFE format isolates the bundle's variables inside a function scope, preventing any collisions with jQuery or other globals on the host page. Code's internal $ and jQuery references (from Leaflet, React, etc.) stay private and never interfere with the page's existing variables.

Development Workflow

Before (Laravel Mix):

npm run serve    # Serve files
npx mix watch    # Watch and rebuild
npx mix --production  # Production build

After (Vite):

npm run dev      # Dev server with HMR (vite)
npm start        # Alias for dev
npm run build    # Production build (vite build)
npm run preview  # Preview production build
npm run serve    # Static file server (unchanged)

Benefits

• Faster dev server with instant HMR
• Faster test execution
• Unified config for build and test in vite.config.ts
• Smaller node_modules

Testing this (my fork)

Option 1: Add new remote to your existing tsml-ui repo

git remote add pjaudiomv https://github.com/pjaudiomv/tsml-ui.git
git fetch pjaudiomv
git checkout pj/vite

Option 2: Just clone fork

git clone https://github.com/pjaudiomv/tsml-ui.git
git checkout pj/vite

[netlify]

✅ Deploy Preview for tsml-ui ready!

Name	Link
🔨 Latest commit	9e3f0c1
🔍 Latest deploy log	https://app.netlify.com/projects/tsml-ui/deploys/69149c99caa35e000864a212
😎 Deploy Preview	https://deploy-preview-487--tsml-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pjaudiomv]

I think I have addressed all of the previous issues and concerns with previous effort to move to Vite.

1. Production JS errors (CRITICAL) - Fixed the SyntaxError: Can't create duplicate variable: '$' that broke live sites by switching to IIFE format (formats: 'iife'), which wraps the entire bundle in a function scope to isolate all internal variables ($, jQuery, etc.) from conflicting with host page globals
2. Jest tests failing - Migrated to Vitest with native ESM support; all 83 tests now passing
3. Configured inlineDynamicImports: true to output single app.js file only
4. Public directory conflicts - Set publicDir: false and emptyOutDir: false to properly handle build output

[pjaudiomv]

I also successfully reproduced and verified the fix using the Recovery Dharma production site (https://recoverydharma.org/meetings/) by saving the complete HTML locally and testing both builds: the broken flat bundle format produced SyntaxError: redeclaration of let $ due to conflicts with the site's existing jQuery and WordPress plugins, while the IIFE format completely isolated the bundle and allowed meetings to load successfully with no console errors, confirming the fix works in a real-world WordPress environment with heavy JavaScript dependencies. I also confirmed it works aastl.org but was unable to reproduce issue on their site (maybe deps changed since last year)

[joshreisner]

thanks @pjaudiomv ! works well for me locally. i noticed the bundle size went from 590kb with mix to 586kb with vite.

this is especially great because mix is officially EOL so some vulnerabilities were starting to accumulate.

also thank you for doing that testing on the RD website 🙌

[joshreisner]

i'm not clear on what this file is doing - we do want to preserve this page: https://tsml-ui.code4recovery.org

it still works for me locally

[pjaudiomv]

The separate index.html at the root is strictly for dev (npm run dev with HMR) and public/index.html stays there and is for the actual site page. This was the cleanest way to have HMR working and the separate public/index.html site. The files in public/tests/ cant be used with hmr (though viewing works fine for npm run dev) as need to have the one valid entrypoint. They can be tested with npm run previewafter build though ornpm run serve`

[pjaudiomv]

TL;DR its needed for dev entrypoint, public/index.html is still preserved for https://tsml-ui.code4recovery.org/

[pjaudiomv]

You can't have HMR on multiple entry points in a single dev server (the public/tests/*.html files) so we have to pick one test to develop against with HMR (the root index.html)

[pjaudiomv]

https://vite.dev/guide/#index-html-and-project-root

[pjaudiomv]

closes #486