feat(static): use webpack instead of vite

gallery/easel/route/view/common/templates/base.html

@@ -12,7 +12,7 @@
   <link rel="stylesheet"
         href="/static/gallery.css?v={{version}}">
   <script type="module"
-          src="/static/gallery.es.js?v={{version}}"></script>
+          src="/static/gallery.js?v={{version}}"></script>
   <link rel="icon"
         href="/favicon.ico?v={{version}}"
         type="image/x-icon">

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "gallery",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}

package.json

@@ -0,0 +1 @@
+{}

static/package.json

@@ -2,8 +2,7 @@
   "name": "gallery",
   "version": "0.4.1",
   "scripts": {
-    "build": "vite build",
+    "build": "webpack"
-    "dev": "vite build --watch"
   },
   "author": "shmyga <shmyga.z@gmail.com>",
   "license": "ISC",
@@ -12,10 +11,21 @@
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.13.1",
-    "flag-icons": "^7.5.0",
+    "flag-icons": "^7.5.0"
-    "sass": "^1.99.0"
   },
   "devDependencies": {
-    "vite": "^8.0.9"
+    "@types/node": "^26.1.0",
+    "copy-webpack-plugin": "^14.0.0",
+    "css-loader": "^7.1.4",
+    "file-loader": "^6.2.0",
+    "mini-css-extract-plugin": "^2.10.2",
+    "sass": "^1.101.0",
+    "sass-loader": "^17.0.0",
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.6.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^6.0.3",
+    "webpack": "^5.108.3",
+    "webpack-cli": "^7.1.0"
   }
 }

static/src/index.ts

@@ -1,7 +1,7 @@
 import * as bootstrap from "bootstrap";
 import "./components";
 import "./language";
-import "./main.scss";
+//import "./main.scss";
 import "./theme";
 import "./weather/weather";
 import "./schedule/schedule";

static/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "target": "esnext",
+    "jsx": "react-jsx",
+    "allowJs": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}

static/vite.config.ts

@@ -1,14 +0,0 @@
-import { defineConfig } from "vite";
-import packageJson from "./package.json";
-
-export default defineConfig({
-  base: "./",
-  build: {
-    outDir: "./dist",
-    lib: {
-      entry: "./src/index.ts",
-      name: packageJson.name,
-      fileName: (format) => `${packageJson.name}.${format}.js`,
-    },
-  },
-});

static/webpack.config.ts

@@ -0,0 +1,69 @@
+import CopyPlugin from "copy-webpack-plugin";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import path from "node:path";
+import { fileURLToPath } from "url";
+import webpack from "webpack";
+import packageInfo from "./package.json" with { type: "json" };
+
+// in case you run into any TypeScript error when configuring `devServer`
+//import "webpack-dev-server";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const config: webpack.Configuration = {
+  entry: ["./src/index.ts", "./src/main.scss"],
+  module: {
+    rules: [
+      { test: /\.svg$/, use: ["file-loader"] },
+      {
+        test: /\.tsx?$/,
+        use: {
+          loader: "ts-loader",
+          options: {
+            transpileOnly: true, // TODO: fix errors
+          },
+        },
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: "css-loader", options: { sourceMap: true, url: false } },
+          { loader: "sass-loader", options: { sourceMap: true } },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".js"],
+  },
+  output: {
+    filename: `${packageInfo.name}.js`,
+    path: path.resolve(__dirname, "dist"),
+    clean: true,
+  },
+  plugins: [
+    new MiniCssExtractPlugin({ filename: `${packageInfo.name}.css` }),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: "./src/**/*.svg",
+          //to: "[path][name].[contenthash][ext]",
+          to: "svg/[name][ext]",
+        },
+        {
+          from: "./node_modules/bootstrap-icons/icons/*.svg",
+          to: "bootstrap-icons/icons/[name][ext]",
+        },
+        {
+          from: "./node_modules/flag-icons/flags/1x1/*.svg",
+          to: "flag-icons/flags/1x1/[name][ext]",
+        }
+      ],
+    }),
+  ],
+};
+
+export default config;