feat: automated replacement

frontend/.babelrc

@@ -1,15 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "useBuiltIns": "usage",
-        "corejs": "3.0.0"
-      }
-    ]
-  ],
-  "plugins": [
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-proposal-class-properties"
-  ]
-}

frontend/.browserslistrc

@@ -1,11 +0,0 @@
-[production staging]
->5%
-last 2 versions
-not ie > 0
-not ie_mob > 0
-Firefox ESR
-
-[development]
-last 1 chrome version
-last 1 firefox version
-last 1 edge version

frontend/.gitignore

@@ -1,15 +0,0 @@
-# dependencies
-node_modules
-
-# production
-build
-
-# misc
-.DS_Store
-
-npm-debug.log
-yarn-error.log
-yarn.lock
-.yarnclean
-.vscode
-.idea

frontend/.nvmrc

@@ -1 +0,0 @@
-lts/hydrogen

frontend/.stylelintrc.json

@@ -1,15 +0,0 @@
-{
-  "extends": "stylelint-config-standard-scss",
-  "rules": {
-    "at-rule-no-unknown": null,
-    "scss/at-rule-no-unknown": [
-      true,
-      {
-        "ignoreAtRules": [
-          "tailwind"
-        ]
-      }
-    ],
-    "scss/at-import-partial-extension": null
-  }
-}

frontend/eslint.config.mjs

@@ -1,39 +0,0 @@
-import { defineConfig } from "eslint/config";
-import globals from "globals";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
-import babelParser from "@babel/eslint-parser";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-    baseDirectory: __dirname,
-    recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all
-});
-
-export default defineConfig([{
-    extends: compat.extends("eslint:recommended"),
-
-    languageOptions: {
-        globals: {
-            ...globals.browser,
-            ...globals.node,
-        },
-
-        ecmaVersion: 8,
-        sourceType: "module",
-        parser: babelParser,
-
-        parserOptions: {
-            requireConfigFile: false,
-        },
-    },
-
-    rules: {
-        semi: 2,
-        "no-unused-vars": "warn",
-    },
-}]);

frontend/vite.config.js

@@ -0,0 +1,48 @@
+import {resolve, dirname} from 'path';
+import {fileURLToPath} from 'url';
+import {defineConfig} from 'vite';
+import tailwindcss from '@tailwindcss/vite'
+
+// ESM-compatible equivalent of __dirname
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default defineConfig({
+    root: resolve(__dirname, 'src'),
+    base: '/static/',
+
+    plugins: [
+        tailwindcss(),
+    ],
+
+    server: {
+        host: 'localhost',
+        port: 5173,
+        open: false,
+        watch: {
+            usePolling: true,
+            disableGlobbing: false,
+        },
+    },
+
+    resolve: {
+        extensions: ['.js', '.json', '.scss'],
+    },
+
+    build: {
+        outDir: resolve(__dirname, '../app/static/dist'),
+        assetsDir: '',
+        manifest: "manifest.json",
+        emptyOutDir: true,
+        target: 'es2015',
+        rollupOptions: {
+            input: {
+                // Make the input path absolute for consistency
+                main: resolve(__dirname, 'src/main.js'),
+            },
+            output: {
+                chunkFileNames: undefined,
+            },
+        },
+    },
+});

frontend/webpack/webpack.common.cjs

@@ -1,76 +0,0 @@
-const glob = require("glob");
-const Path = require("path");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const WebpackAssetsManifest = require("webpack-assets-manifest").WebpackAssetsManifest;
-// eslint-disable-next-line no-unused-vars
-const webpack = require("webpack");
-
-const getEntryObject = () => {
-    const entries = {};
-    glob.sync(Path.join(__dirname, "../src/application/*.js")).forEach((path) => {
-        const name = Path.basename(path, ".js");
-        entries[name] = path;
-    });
-    return entries;
-};
-
-module.exports = {
-    entry: getEntryObject(),
-    output: {
-        path: Path.join(__dirname, "../build"),
-        filename: "js/[name].js",
-        publicPath: "/static/",
-        assetModuleFilename: "[path][name][ext]",
-    },
-    // optimization: {
-    //     splitChunks: {
-    //         chunks: "all",
-    //     },
-    //
-    //     runtimeChunk: "single",
-    // },
-    plugins: [
-        new CleanWebpackPlugin(),
-        new CopyWebpackPlugin({
-            patterns: [
-                {from: Path.resolve(__dirname, "../vendors"), to: "vendors"},
-            ],
-        }),
-        new CopyWebpackPlugin({
-            patterns: [
-                {from: Path.resolve(__dirname, "../assets"), to: "assets"},
-            ],
-        }),
-        new WebpackAssetsManifest({
-            entrypoints: true,
-            output: "manifest.json",
-            writeToDisk: true,
-            publicPath: true,
-        }),
-    ],
-    resolve: {
-        alias: {
-            "~": Path.resolve(__dirname, "../src"),
-            jquery: "jquery/dist/jquery"
-        },
-    },
-    module: {
-        rules: [
-            {
-                test: /\.mjs$/,
-                include: /node_modules/,
-                type: "javascript/auto",
-            },
-            {
-                test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
-                type: "asset",
-            },
-            {
-                test: /\.css$/i,
-                include: Path.resolve(__dirname, 'src'),
-                use: ['style-loader', 'css-loader', 'postcss-loader'],
-            },
-        ],
-    },
-};

frontend/webpack/webpack.config.dev.cjs

@@ -1,73 +0,0 @@
-const Path = require("path");
-const Webpack = require("webpack");
-const { merge } = require("webpack-merge");
-const StylelintPlugin = require("stylelint-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const ESLintPlugin = require("eslint-webpack-plugin");
-
-const common = require("./webpack.common.cjs");
-
-module.exports = merge(common, {
-  target: "web",
-  mode: "development",
-  devtool: "inline-source-map",
-  output: {
-    chunkFilename: "js/[name].chunk.js",
-    publicPath: "http://localhost:9091/",
-  },
-  devServer: {
-    hot: true,
-    host: "0.0.0.0",
-    port: 9091,
-    headers: {
-      "Access-Control-Allow-Origin": "*",
-    },
-    devMiddleware: {
-      writeToDisk: true,
-    },
-  },
-  plugins: [
-    new Webpack.DefinePlugin({
-      "process.env.NODE_ENV": JSON.stringify("development"),
-    }),
-    new StylelintPlugin({
-      files: Path.resolve(__dirname, "../src/**/*.s?(a|c)ss"),
-    }),
-    new ESLintPlugin({
-      extensions: "js",
-      emitWarning: true,
-      files: Path.resolve(__dirname, "../src"),
-    }),
-    new MiniCssExtractPlugin({
-      filename: "css/[name].css",
-      chunkFilename: "css/[id].css",
-    }),
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.html$/i,
-        loader: "html-loader",
-      },
-      {
-        test: /\.js$/,
-        include: Path.resolve(__dirname, "../src"),
-        loader: "babel-loader",
-      },
-      {
-        test: /\.s?css$/i,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: "css-loader",
-            options: {
-              sourceMap: true,
-            },
-          },
-          "postcss-loader",
-          "sass-loader",
-        ],
-      },
-    ],
-  },
-});

frontend/webpack/webpack.config.prod.cjs

@@ -1,45 +0,0 @@
-const Webpack = require("webpack");
-const { merge } = require("webpack-merge");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const TerserPlugin = require("terser-webpack-plugin");
-const common = require("./webpack.common.cjs");
-
-module.exports = merge(common, {
-  mode: "production",
-  bail: true,
-  output: {
-    filename: "js/[name].[chunkhash:8].js",
-    chunkFilename: "js/[name].[chunkhash:8].chunk.js",
-  },
-  plugins: [
-    new Webpack.DefinePlugin({
-      "process.env.NODE_ENV": JSON.stringify("production"),
-    }),
-    new MiniCssExtractPlugin({
-      filename: "css/[name].[contenthash].css",
-      chunkFilename: "css/[id].[contenthash].css",
-    }),
-  ],
-  optimization: {
-    minimize: true,
-    minimizer: [new TerserPlugin()],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: "babel-loader",
-      },
-      {
-        test: /\.s?css/i,
-        use: [
-          MiniCssExtractPlugin.loader,
-          "css-loader",
-          "postcss-loader",
-          "sass-loader",
-        ],
-      },
-    ],
-}
-});

frontend/webpack/webpack.config.watch.cjs

@@ -1,61 +0,0 @@
-const Path = require("path");
-const Webpack = require("webpack");
-const { merge } = require("webpack-merge");
-const StylelintPlugin = require("stylelint-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const ESLintPlugin = require("eslint-webpack-plugin");
-
-const common = require("./webpack.common.cjs");
-
-module.exports = merge(common, {
-  target: "web",
-  mode: "development",
-  devtool: "inline-source-map",
-  output: {
-    chunkFilename: "js/[name].chunk.js",
-  },
-  plugins: [
-    new Webpack.DefinePlugin({
-      "process.env.NODE_ENV": JSON.stringify("development"),
-    }),
-    new StylelintPlugin({
-      files: Path.resolve(__dirname, "../src/**/*.s?(a|c)ss"),
-    }),
-    new ESLintPlugin({
-      extensions: "js",
-      emitWarning: true,
-      files: Path.resolve(__dirname, "../src"),
-    }),
-    new MiniCssExtractPlugin({
-      filename: "css/[name].css",
-      chunkFilename: "css/[id].css",
-    }),
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.html$/i,
-        loader: "html-loader",
-      },
-      {
-        test: /\.js$/,
-        include: Path.resolve(__dirname, "../src"),
-        loader: "babel-loader",
-      },
-      {
-        test: /\.s?css$/i,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: "css-loader",
-            options: {
-              sourceMap: true,
-            },
-          },
-          "postcss-loader",
-          "sass-loader",
-        ],
-      },
-    ],
-  },
-});