begin vite stuff (does not work yet)

assets/js/app.js

@@ -8,3 +8,4 @@
 // Our code
 import './ujs';
 import './when-ready';
+import '../css/themes/default.scss';

assets/js/autocomplete.js

@@ -2,8 +2,8 @@
  * Autocomplete.
  */
 
-import { LocalAutocompleter } from 'utils/local-autocompleter';
+import { LocalAutocompleter } from './utils/local-autocompleter';
-import { handleError } from 'utils/requests';
+import { handleError } from './utils/requests';
 
 const cache = {};
 let inputField, originalTerm;

assets/package.json

@@ -1,11 +1,13 @@
 {
   "type": "module",
   "scripts": {
-    "deploy": "cross-env NODE_ENV=production webpack",
+    "deploy": "cross-env NODE_ENV=production tsc && cross-env NODE_ENV=production vite build",
     "lint": "eslint . --ext .js,.ts",
     "test": "jest --ci",
     "test:watch": "jest --watch",
-    "watch": "webpack --watch"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.3.0",
@@ -18,34 +20,22 @@
     "acorn": "^8.8.2",
     "autoprefixer": "^10.4.13",
     "brunch": "^4.0.2",
-    "copy-webpack-plugin": "^11.0.0",
     "copycat-brunch": "^1.1.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.7.3",
-    "css-minimizer-webpack-plugin": "^5.0.0",
     "eslint": "^8.34.0",
-    "eslint-webpack-plugin": "^4.0.0",
-    "file-loader": "^6.2.0",
-    "ignore-emit-webpack-plugin": "^2.0.6",
     "jest-environment-jsdom": "^29.4.3",
     "mini-css-extract-plugin": "^2.7.2",
     "normalize-scss": "^7.0.1",
     "postcss": "^8.4.31",
-    "postcss-loader": "^7.2.4",
     "postcss-scss": "^4.0.6",
     "postcss-url": "^10.1.3",
     "rollup": "^2.57.0",
     "rollup-plugin-includepaths": "^0.2.4",
     "sass": "^1.58.3",
-    "sass-loader": "^13.2.0",
     "source-map-support": "^0.5.21",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.6",
     "tslib": "^2.5.0",
-    "typescript": "^4.9",
+    "typescript": "^5.2",
-    "webpack": "^5.76.0",
+    "vite": "^5.2"
-    "webpack-cli": "^5.0.1",
-    "webpack-rollup-loader": "^0.8.1"
   },
   "devDependencies": {
     "@testing-library/dom": "^9.0.0",

assets/tsconfig.json

@@ -1,16 +1,24 @@
 {
   "compilerOptions": {
-    "noEmit": true,
     "baseUrl": "./js",
-    "target": "ES2018",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
     "esModuleInterop": true,
-    "moduleResolution": "Node",
     "allowJs": true,
     "skipLibCheck": true,
     "lib": [
-      "ES2018",
+      "ES2020",
-      "DOM"
+      "DOM",
+      "DOM.Iterable"
     ],
+
+    "moduleResolution": "Node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+
     "strict": true
   }
 }

assets/vite.config.ts

@@ -0,0 +1,58 @@
+import fs from 'fs';
+import path from 'path';
+import rollupPluginMultiEntry from '@rollup/plugin-multi-entry';
+import { defineConfig } from "vite";
+
+export default defineConfig(({ command }: any) => {
+  const isDev = command !== "build";
+
+  if (isDev) {
+    process.stdin.on("close", () => {
+      process.exit(0);
+    });
+
+    process.stdin.resume();
+  }
+
+  const themeNames =
+    fs.readdirSync(path.resolve(__dirname, 'css/themes')).map(name => {
+      const m = name.match(/([-a-z]+).scss/);
+
+      if (m) m[1]
+}   );
+
+  const themes = new Map();
+
+  for (const name of themeNames) {
+    themes.set(`css/${name}`, `./css/themes/${name}.scss`);
+  }
+
+  return {
+    publicDir: "static",
+    plugins: [rollupPluginMultiEntry()],
+    resolve: {
+      alias: {
+        common: path.resolve(__dirname, 'css/common/'),
+        views: path.resolve(__dirname, 'css/views/')
+      }
+    },
+    build: {
+      target: "es2020",
+      outDir: path.resolve(__dirname, '../priv/static'),
+      emptyOutDir: true,
+      sourcemap: isDev,
+      manifest: false,
+      rollupOptions: {
+        input: {
+          'js/app.js': "./js/app.js",
+          ...themes
+        },
+        output: {
+          entryFileNames: "assets/[name].js", // remove hash
+          chunkFileNames: "assets/[name].js",
+          assetFileNames: "assets/[name][extname]"
+        }
+      }
+    }
+  };
+});

config/dev.exs

@@ -16,11 +16,7 @@ config :philomena, PhilomenaWeb.Endpoint,
   check_origin: false,
   watchers: [
     node: [
-      "node_modules/webpack/bin/webpack.js",
+      "node_modules/vite/bin/vite.js",
-      "--mode",
-      "development",
-      "--watch",
-      "--watch-options-stdin",
       cd: Path.expand("../assets", __DIR__)
     ]
   ]