Upgrade deps; migrate to Vite

Dockerfile

@@ -4,7 +4,7 @@ WORKDIR /editor
 
 COPY package.json /editor/package.json
 COPY tsconfig.json /editor/tsconfig.json
-COPY webpack.config.js /editor/webpack.config.js
+COPY vite.config.ts /editor/vite.config.ts
 RUN yarn
 
 COPY public /editor/public

eslint.config.mjs

@@ -0,0 +1,59 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint, { parser as tsParser } from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+import pluginReactHooks from "eslint-plugin-react-hooks";
+import pluginJsxA11y from "eslint-plugin-jsx-a11y";
+import { fixupPluginRules } from "@eslint/compat";
+import path from 'path';
+import stylistic from '@stylistic/eslint-plugin'
+
+
+export default [
+    {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
+    {languageOptions: { globals: globals.browser }},
+    pluginJs.configs.recommended,
+    ...tseslint.configs.recommended,
+    pluginReact.configs.flat.recommended,
+    pluginJsxA11y.flatConfigs.strict,
+    {
+        plugins: {
+            "react-hooks": fixupPluginRules(pluginReactHooks),
+            '@stylistic': stylistic
+        },
+        settings: {
+            react: {
+                version: "detect"
+            }
+        },
+        rules: {
+            "no-prototype-builtins": "off",
+            "prefer-const": "error",
+            "semi": "error",
+            "@stylistic/indent": ["error", 4, {"SwitchCase": 1}],
+            "jsx-a11y/no-static-element-interactions": "error",
+            "react-hooks/rules-of-hooks": "error",
+            "react-hooks/exhaustive-deps": "error",
+            "@typescript-eslint/no-unused-vars": ["error", {
+                "argsIgnorePattern": "^_",
+                "varsIgnorePattern": "^_"
+            }],
+            "@typescript-eslint/ban-ts-comment": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/no-empty-interface": "error",
+            "@typescript-eslint/explicit-module-boundary-types": "off",
+            "@typescript-eslint/no-floating-promises": "error",
+            "react/jsx-no-target-blank": "off", // https://github.com/isaacphysics/isaac-react-app/pull/1134#discussion_r1774839755
+        },
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                ecmaFeatures: {
+                    "jsx": true
+                },
+                projectService: true,
+                tsconfigRootDir: path.__dirname,
+            },
+        }
+    }
+];

public/index.html → index.html

@@ -14,4 +14,5 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
+  <script type="module" src="/src/index.tsx"></script>
 </html>

package.json

@@ -3,58 +3,54 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.1",
-    "@codemirror/commands": "^6.6.2",
-    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/lang-python": "^6.1.6",
-    "@codemirror/lang-sql": "^6.7.1",
-    "@codemirror/language": "^6.10.3",
-    "@codemirror/state": "6.4.1",
-    "@codemirror/view": "^6.34.1",
-    "@lezer/common": "^1.2.1",
-    "@sqlite.org/sqlite-wasm": "^3.46.1-build3",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xterm/addon-webgl": "^0.18.0",
-    "@xterm/xterm": "^5.5.0",
-    "acorn": "^8.12.1",
-    "bootstrap": "^5.3.3",
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.10.4",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/state": "6.7.1",
+    "@codemirror/view": "^6.43.6",
+    "@lezer/common": "^1.5.2",
+    "@sqlite.org/sqlite-wasm": "^3.53.0-build1",
+    "@vitejs/plugin-react": "^6.0.4",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-webgl": "^0.19.0",
+    "@xterm/xterm": "^6.0.0",
+    "acorn": "^8.17.0",
+    "bootstrap": "^5.3.8",
     "classnames": "^2.5.1",
-    "codemirror": "^6.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "codemirror": "^6.0.2",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "reactstrap": "^9.2.3",
     "skulpt": "^1.2.0",
-    "uuid": "^10.0.0"
+    "uuid": "^14.0.1",
+    "vite": "^8.1.5"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.13",
-    "@types/node": "^22.7.4",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
-    "@types/uuid": "^10.0.0",
-    "@webpack-cli/generators": "^3.0.7",
-    "css-loader": "^7.1.2",
-    "html-webpack-plugin": "^5.6.0",
-    "sass": "^1.79.4",
-    "sass-loader": "^16.0.2",
-    "style-loader": "^4.0.0",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.6.2",
-    "webpack": "^5.95.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0"
+    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^26.1.1",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@types/uuid": "^11.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.60.1",
+    "@typescript-eslint/parser": "^8.60.1",
+    "css-loader": "^7.1.4",
+    "eslint": "^9.39.4",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "sass": "^1.101.7",
+    "typescript": "^7.0.2"
   },
   "scripts": {
-    "start": "webpack-dev-server --hot --port 3000 --history-api-fallback",
-    "build": "webpack --mode=production --node-env=production",
-    "test": "echo \"we have no tests...\"",
-    "build:dev": "webpack --mode=development",
-    "build:prod": "webpack --mode=production --node-env=production",
-    "watch": "webpack --watch",
-    "serve": "webpack serve"
+    "start": "vite --port 3000",
+    "build": "vite build",
+    "test": "echo \"we have no tests...\""
   },
   "eslintConfig": {
     "extends": [

src/index.tsx

@@ -1,10 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
 import "./scss/cs/isaac.scss";
+import { createRoot } from 'react-dom/client';
 import { Sandbox } from "./app/Sandbox";
 
-ReactDOM.render(
-	<Sandbox />,
-	document.getElementById("root")
-);
+const root = createRoot(document.getElementById('root')!);
+
+root.render(<Sandbox />);

src/scss/cs/isaac.scss

@@ -34,7 +34,7 @@ $tertiary-font: 'arconrounded-regular', sans-serif;
 
 // ISAAC
 // Node module imports
-@import "~bootstrap/scss/bootstrap";
+@import "bootstrap/scss/bootstrap";
 
 
 // Utility

tsconfig.json

@@ -2,15 +2,15 @@
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "noImplicitAny": true,
-    "module": "es2022",
-    "target": "es5",
+    "module": "node16",
+    "target": "es6",
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "moduleResolution": "node",
+    "moduleResolution": "node16",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx"

vite.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+    plugins: [
+        react(),
+    ],
+
+    build: {
+        target: 'es2022',
+        outDir: 'build',
+        emptyOutDir: true,
+        assetsInlineLimit: 0, // prevent inlining fonts (breaks content security policy)
+        rollupOptions: {
+            input: {
+                main: `./index.html`,
+            },
+            output: {
+                entryFileNames: 'assets/[name].[hash].js',
+                chunkFileNames: 'assets/[name].[hash].js',
+                assetFileNames: 'assets/[name].[hash].[ext]',
+            },
+        }
+    },
+
+    css: {
+        devSourcemap: true,
+        preprocessorOptions: {
+            scss: {
+                // https://github.com/twbs/bootstrap/issues/40962 – should be able to remove when Bootstrap 6 is available
+                silenceDeprecations: ['color-functions', 'global-builtin', 'if-function', 'import'],
+            },
+        },
+    },
+
+    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+});