Migrate from webpack to Vite (#133)

## Summary
- Migrate the build system from webpack to Vite to align with jsbeeb dependency
- Add support for Monaco editor using vite-plugin-monaco-editor
- Fix all tests to work properly with JSDOM environment
- Update documentation and configuration files

## Details

This PR migrates the Owlet Editor from webpack to Vite. The primary motivation is to align with the jsbeeb dependency, which recently moved to Vite, causing integration challenges.

### Key Changes
- Replace webpack configuration with Vite equivalent
- Update package.json with Vite dependencies and scripts
- Configure Monaco editor with vite-plugin-monaco-editor
- Set up proper paths for jsbeeb ROM loading
- Fix path resolution for assets and imports
- Add test setup for proper JSDOM environment
- Update documentation in README.md

### Technical Implementation
- Use ESM import syntax throughout the codebase
- Implement proper static file copying with vite-plugin-static-copy
- Configure LESS preprocessing for styles
- Set up source maps for better debugging
- Implement favicon generation with vite-plugin-favicon
- Document known issue with Monaco editor source maps

## Test Plan
- All tests pass with vitest
- Development server works as expected with `make run`
- Production build generates correctly with `npm run build`
- Monaco editor functions properly with syntax highlighting
- jsbeeb emulator loads correctly with proper ROM paths

## Known Issues
- Minor source map warnings from Monaco editor (documented in README)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: mattgodbolt

CLAUDE.md

@@ -0,0 +1,24 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Build, Lint, Test Commands
+- Build: `npm run build` or `make build`
+- Start dev server: `npm run dev` or `make run`
+- Preview production build: `npm run preview`
+- Lint: `npm run lint` or `make lint`
+- Lint & fix: `npm run lint-fix` or `make lint-fix`
+- Run all tests: `npm run test` or `make test`
+- Run specific test: `npx vitest run test/file_name_test.js`
+- Run all checks: `make check` (tests + lint-fix)
+
+## Code Style
+- Use ESLint + Prettier configuration
+- 4-space indentation for JS, 2-space for JSON/YAML/LESS
+- camelCase variables/functions, PascalCase for classes
+- Use `let`/`const` (not `var`)
+- Prefer named ES6 imports
+- Add appropriate error handling for file operations
+- Follow existing patterns in the codebase
+
+Always run linters before committing to fix formatting issues automatically.

Makefile

@@ -25,9 +25,8 @@ roms: $(ROM_DIR)/gxr.rom
 $(ROM_DIR)/gxr.rom: $(NPM_UPDATED)
 	curl -sL https://mdfs.net/System/ROMs/Graphics/GXR120 -o $@
 
-WEBPACK:=./node_modules/webpack-cli/bin/cli.js
-.PHONY: webpack
-webpack: prereqs  ## Runs webpack (useful only for debugging webpack)
+.PHONY: build
+build: prereqs  ## Builds the project
 	$(NPM) run build
 
 .PHONY: lint
@@ -52,11 +51,10 @@ clean:  ## Cleans up everything
 
 .PHONY: run
 run: prereqs  ## Runs a local version on port 8080
-	$(NPM) start
+	$(NPM) run dev
 
 HASH := $(shell git rev-parse HEAD)
 .PHONY: dist
 dist: export NODE_ENV=production
-dist: export WEBPACK_ARGS=-p
-dist: prereqs webpack  ## Creates a distribution
+dist: prereqs build  ## Creates a distribution
 	echo $(HASH) > dist/git_hash

README.md

@@ -26,7 +26,17 @@ Try the beta now at [bbcmic.ro](https://bbcmic.ro) and get coding!
 ## To develop
 
 ```
-$ make run
+$ make run   # Starts the Vite development server
+$ npm run build   # Build for production
+$ npm run preview   # Preview the production build locally
 ```
 
-then visit http://localhost:8080
+Then visit http://localhost:8080
+
+## Build System
+
+Owlet Editor uses Vite as its build system. The project was migrated from webpack to Vite to align with the jsbeeb dependency, which also uses Vite.
+
+## Known Issues
+
+- When running tests, you may see warnings about missing source maps for Monaco Editor. This is a [known issue with Monaco Editor 0.52.0+](https://github.com/microsoft/monaco-editor/issues/4712) and doesn't affect functionality.

eslint.config.mjs

@@ -35,7 +35,7 @@ export default [
         },
     },
     {
-        files: ["**/webpack.config.js"],
+        files: ["**/webpack.config.js", "**/vite.config.js", "**/test/setup.js", "**/vitest.config.mjs"],
 
         languageOptions: {
             globals: {

index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Owlet BBC BASIC Editor</title>
+  <link rel="icon" href="/assets/images/owlet.png" type="image/png" />
+  
+  <%- injectAnalytics ? include(analytics.path) : '' %>
+</head>
+<body>
+  <script type="module" src="/src/index.js"></script>
+</body>
+</html>