build: migrate to Vite for fast and smaller build

.eslintrc.cjs

@@ -92,6 +92,9 @@ const rules = {
     'error',
     {
       'caseSensitive': true,
+      'ignore': [
+        '.*\\.manifest$',
+      ],
     },
   ],
   'import/no-useless-path-segments': 'error',

.vscode/settings.json

@@ -29,7 +29,7 @@
     "*.jsx": "${capture}.js",
     "*.tsx": "${capture}.ts",
     "package.json": ".npmrc,package-lock.json, yarn.lock,.editorconfig,.eslintrc.cjs,.markdownlint.yml,.mocharc.cjs",
-    "tsconfig.json": "tsconfig.*.json,tsconfig-for-webpack.json",
+    "tsconfig.json": "tsconfig.*.json",
     ".gitignore": ".gitattributes",
     "README.md": "CONTRIBUTING.md,CODE_OF_CONDUCT.md,LICENSE"
   },
@@ -40,7 +40,7 @@
     "*.jsx": "${capture}.js",
     "*.tsx": "${capture}.ts",
     "package.json": ".npmrc,package-lock.json, yarn.lock,.editorconfig,.eslintrc.cjs,.markdownlint.yml,.mocharc.cjs",
-    "tsconfig.json": "tsconfig.*.json,tsconfig-for-webpack.json",
+    "tsconfig.json": "tsconfig.*.json",
     ".gitignore": ".gitattributes",
     "README.md": "CONTRIBUTING.md,CODE_OF_CONDUCT.md,LICENSE"
   }

package.json

@@ -18,9 +18,9 @@
     "package.json"
   ],
   "scripts": {
-    "build": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack --progress --config webpack/webpack.prod.ts",
-    "build-gh-pages": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack --config webpack/webpack.ghpages.ts",
-    "start": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack serve --config webpack/webpack.dev.ts",
+    "build": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
+    "build-gh-pages": "npm run build -- --sourcemap inline",
+    "start": "vite",
     "fetch-deps": "node --loader=ts-node/esm ./util/fetch_deps.ts",
     "tsc-no-emit": "tsc --noEmit",
     "lint": "run-s lint:**",
@@ -59,8 +59,14 @@
     "@babel/preset-typescript": "^7.14.5",
     "@dprint/json": "^0.16.0",
     "@dprint/typescript": "^0.75.0",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@rollup/plugin-virtual": "^3.0.2",
     "@types/argparse": "^1.0.38",
     "@types/chai": "^4.3.1",
+    "@types/dedent": "^0.7.2",
     "@types/inquirer": "^9.0.7",
     "@types/inquirer-fuzzy-path": "^2.3.9",
     "@types/is-ci": "^3.0.0",
@@ -71,18 +77,16 @@
     "@types/node": "^20.14.12",
     "@types/node-fetch": "^2.5.10",
     "@types/tar-fs": "^2.0.0",
-    "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.11.0",
     "@typescript-eslint/utils": "^7.11.0",
+    "@web/rollup-plugin-html": "^2.3.0",
     "babel-loader": "^8.2.2",
     "chai": "^4.3.6",
     "chalk": "^2.4.2",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^10.2.4",
     "cross-env": "^7.0.3",
     "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.4.1",
+    "dedent": "^1.5.3",
     "dprint": "^0.40.2",
     "eslint": "^8.56.0",
     "eslint-config-google": "^0.14.0",
@@ -94,9 +98,7 @@
     "eslint-plugin-tsc": "^2.0.0",
     "eslint-plugin-unicorn": "^44.0.2",
     "fast-levenshtein": "^3.0.0",
-    "fork-ts-checker-webpack-plugin": "^9.0.2",
     "fs-extra": "^10.1.0",
-    "html-webpack-plugin": "^5.5.0",
     "husky": "^4.2.5",
     "is-ci": "^3.0.1",
     "jsdom-global": "^3.0.2",
@@ -112,18 +114,21 @@
     "postcss": "^8.3.5",
     "proxy-agent": "^5.0.0",
     "recast": "^0.20.4",
+    "rollup": "^4.28.1",
+    "rollup-plugin-cleaner": "^1.0.0",
+    "rollup-plugin-css-only": "^4.5.2",
     "style-loader": "^3.3.1",
     "stylelint": "^14.8.2",
     "stylelint-config-standard": "^25.0.0",
+    "systemjs": "^6.15.1",
     "tar-fs": "^2.1.1",
     "ts-loader": "^9.3.0",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "^5.1.6",
-    "webpack": "^5.76.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.9.0",
-    "webpack-merge": "^5.8.0"
+    "vite": "^6.0.0",
+    "vite-plugin-checker": "^0.8.0",
+    "vite-plugin-minify": "^2.1.0",
+    "vite-plugin-static-copy": "^2.2.0"
   },
   "engines": {
     "node": ">=20.10.0"

rollup.config.ts

@@ -0,0 +1,90 @@
+import commonjs from '@rollup/plugin-commonjs';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import image from '@rollup/plugin-image';
+import { rollupPluginHTML as html } from '@web/rollup-plugin-html';
+import { defineConfig } from 'rollup';
+import cleaner from 'rollup-plugin-cleaner'
+import css from 'rollup-plugin-css-only';
+
+export default defineConfig({
+  plugins: [
+    typescript(),
+    nodeResolve(),
+    commonjs(),
+    cleaner({ targets: ['dist'] }),
+    image(),
+    css(),
+    html({
+      input: [
+        'ui/config/config.html',
+        // 'util/coverage/coverage.html',
+        // 'ui/dps/rdmty/dps.html',
+        // 'ui/dps/xephero/xephero-cactbot.html',
+        'ui/eureka/eureka.html',
+        'ui/jobs/jobs.html',
+        'ui/oopsyraidsy/oopsyraidsy.html',
+        'ui/oopsyraidsy/oopsy_summary.html',
+        'ui/oopsyraidsy/oopsy_viewer.html',
+        'ui/pullcounter/pullcounter.html',
+        'ui/radar/radar.html',
+        'ui/raidboss/raidboss.html',
+        'ui/raidboss/raidboss_alerts_only.html',
+        'ui/raidboss/raidboss_timeline_only.html',
+        'ui/raidboss/raidboss_silent.html',
+        'ui/raidboss/raidemulator.html',
+        'util/logtools/splitter.html',
+        'ui/test/test.html',
+      ],
+      extractAssets: false,
+      rootDir: '.',
+      flattenOutput: false,
+    }),
+  ],
+  output: {
+    dir: 'dist',
+    format: 'es',
+    sourcemap: 'inline',
+    chunkFileNames: '[name].bundle.js',
+    assetFileNames: '[name][extname]',
+    manualChunks: (id) => {
+      if (/ui\/raidboss\/data\/.*(?:ts|js|txt\?raw)$/.test(id) || /^\0?timeline:/.test(id)) {
+        return 'ui/common/raidboss_data';
+      }
+      if (/ui\/oopsyraidsy\/data\/.*(?:ts|js)$/.test(id)) {
+        return 'ui/common/oopsyraidsy_data';
+      }
+      if (/ui\/raidboss\/(?:raidemulator.ts$|emulator\/.*(?:ts|js)$)/.test(id)) {
+        return 'ui/raidboss/raidemulator';
+      }
+      if (/resources\/.*\.(?:ts|js)$/.test(id) || id.includes('node_modules')) {
+        return 'ui/common/vendor';
+      }
+      if (!/\.(?:ts|js)$/.test(id)) {
+        return;
+      }
+
+      const modules = {
+        'ui/config/': 'ui/config/config',
+        'util/coverage/': 'util/coverage/coverage',
+        'ui/dps/rdmty/': 'ui/dps/rdmty/dps',
+        'ui/dps/xephero/': 'ui/dps/xephero/xephero',
+        'ui/eureka/': 'ui/eureka/eureka',
+        'ui/jobs/': 'ui/jobs/jobs',
+        'ui/oopsyraidsy/': 'ui/oopsyraidsy/oopsyraidsy',
+        'ui/pullcounter/': 'ui/pullcounter/pullcounter',
+        'ui/radar/': 'ui/radar/radar',
+        'ui/raidboss/': 'ui/raidboss/raidboss',
+        'util/logtools/': 'util/logtools/web_splitter',
+        'ui/test/': 'ui/test/test',
+      };
+
+      for (const [match, module] of Object.entries(modules)) {
+        if (id.includes(match)) {
+          console.log(id, module);
+          return module;
+        }
+      }
+    },
+  }
+});

tsconfig.eslint.json

@@ -6,12 +6,13 @@
     "./resources",
     "./util",
     "./test",
-    "./webpack",
     "./user",
     "./.github/scripts",
     "./eslint",
     "./.eslintrc.cjs",
-    "./.mocharc.cjs"
+    "./.mocharc.cjs",
+    "./vite",
+    "./vite.config.ts"
   ],
   "exclude": [
     "./dist"

tsconfig.json

@@ -46,7 +46,6 @@
     "**/*.spec.ts"
   ],
   "references": [
-    { "path": "./tsconfig.node.json" },
-    { "path": "./tsconfig.webpack.json" }
+    { "path": "./tsconfig.node.json" }
   ]
 }

tsconfig.node.json

@@ -10,7 +10,9 @@
   },
   "include": [
     "./util",
-    "./test"
+    "./test",
+    "./vite",
+    "./vite.config.ts"
   ],
   "references": [{ "path": "./tsconfig.json" }]
 }

types/env.d.ts

@@ -0,0 +1,4 @@
+/* eslint-disable spaced-comment */
+/// <reference types="vite/client" />
+
+export {};

types/manifest.d.ts

@@ -1,9 +1,9 @@
-declare module '*/raidboss_manifest.txt' {
+declare module 'raidboss.manifest' {
   const raidbossFileData: import('./trigger').RaidbossFileData;
   export default raidbossFileData;
 }
 
-declare module '*/oopsy_manifest.txt' {
+declare module 'oopsy.manifest' {
   const oopsyFileData: import('./oopsy').OopsyFileData;
   export default oopsyFileData;
 }

ui/config/config.html

@@ -2,6 +2,8 @@
 <head>
   <title>Cactbot Configuration</title>
   <meta charset="utf-8" />
+
+  <script type="module" src="./config.ts"></script>
 </head>
 <body>
   <div id="butter-margin" class="hidden">

ui/dps/rdmty/dps.html

@@ -7,6 +7,8 @@
   <script src="https://unpkg.com/[email protected]/lodash.min.js"></script>
   <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
   <script src="../../../user/rdmty.js"></script>
+
+  <script type="module" src="./dps.js"></script>
 </head>
 <body>
   <div id="container"></div>

ui/dps/xephero/xephero-cactbot.html

@@ -6,6 +6,8 @@
   <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
 
   <script src="../../../user/xephero.js"></script>
+
+<script type="module" src="./xephero.js"></script>
 </head>
 <body>
 <ol id="overlaysource">

ui/jobs/jobs.html

@@ -2,6 +2,8 @@
 <head>
   <meta charset="utf-8" />
   <title>Cactbot Jobs</title>
+
+  <script type="module" src="./jobs.ts"></script>
 </head>
 <body>
 <div id="container">

ui/oopsyraidsy/oopsy_summary.html

@@ -6,6 +6,8 @@
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/solid.min.css"
   />
+
+  <script type="module" src="./oopsy_summary.ts"></script>
 </head>
 <body>
 <div id="container">

ui/oopsyraidsy/oopsy_viewer.html

@@ -6,6 +6,8 @@
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/solid.min.css"
   />
+
+  <script type="module" src="./oopsy_viewer.ts"></script>
 </head>
 <body>
 <div id="filedrop"></div>

ui/oopsyraidsy/oopsy_viewer.ts

@@ -1,11 +1,12 @@
+import oopsyFileData from 'oopsy.manifest';
+
 import { UnreachableCode } from '../../resources/not_reached';
 import { callOverlayHandler } from '../../resources/overlay_plugin_api';
 import PartyTracker from '../../resources/party';
 import UserConfig from '../../resources/user_config';
 import { LocaleText } from '../../types/trigger';
 
 import { DamageTracker, earlyPullTriggerId } from './damage_tracker';
-import oopsyFileData from './data/oopsy_manifest.txt';
 import { MistakeCollector } from './mistake_collector';
 import defaultOptions, { OopsyOptions } from './oopsy_options';
 import { OopsySummaryList, OopsySummaryTable } from './oopsy_summary_list';

ui/oopsyraidsy/oopsyraidsy.html

@@ -6,6 +6,8 @@
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/solid.min.css"
   />
+
+  <script type="module" src="./oopsyraidsy.ts"></script>
 </head>
 <body>
 <div id="container">

ui/oopsyraidsy/oopsyraidsy.ts

@@ -1,11 +1,12 @@
+import oopsyFileData from 'oopsy.manifest';
+
 import { UnreachableCode } from '../../resources/not_reached';
 import { addOverlayListener, callOverlayHandler } from '../../resources/overlay_plugin_api';
 import PartyTracker from '../../resources/party';
 import UserConfig from '../../resources/user_config';
 import { OopsyMistakeType } from '../../types/oopsy';
 
 import { DamageTracker } from './damage_tracker';
-import oopsyFileData from './data/oopsy_manifest.txt';
 import { MistakeCollector } from './mistake_collector';
 import { OopsyLiveList } from './oopsy_live_list';
 import defaultOptions from './oopsy_options';