refactor(static): refactor static module

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">

static/package.json

@@ -1,9 +1,10 @@
 {
   "name": "gallery",
   "version": "0.4.1",
+  "type": "module",
   "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch"
+    "build": "webpack --mode production",
+    "dev": "webpack --watch --mode development"
   },
   "author": "shmyga <shmyga.z@gmail.com>",
   "license": "ISC",
@@ -12,10 +13,22 @@
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.13.1",
-    "flag-icons": "^7.5.0",
-    "sass": "^1.99.0"
+    "flag-icons": "^7.5.0"
   },
   "devDependencies": {
-    "vite": "^8.0.9"
+    "@types/bootstrap": "^5.2.11",
+    "@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/app/common/language.ts

@@ -19,7 +19,7 @@
   setLanguage(getPreferredLanguage());
 
   const showActiveLanguage = (language: string, focus = false) => {
-    const languageSwitcher = document.querySelector("#bd-language");
+    const languageSwitcher = document.querySelector<HTMLElement>("#bd-language");
 
     if (!languageSwitcher) {
       return;
@@ -27,24 +27,26 @@
 
     const languageSwitcherText = document.querySelector("#bd-language-text");
     const activeLanguageIcon = document.querySelector(".language-icon-active");
-    const btnToActive = document.querySelector(`[data-bs-language-value="${language}"]`);
-    const activeLanguageIconClass = btnToActive.querySelector(".fi").className.match(/fi-[\w-]+/)[0];
+    const btnToActive = document.querySelector<HTMLElement>(`[data-bs-language-value="${language}"]`);
+    const activeLanguageIconClass = (btnToActive?.querySelector(".fi")?.className.match(/fi-[\w-]+/) || [])[0] || "";
 
     document.querySelectorAll("[data-bs-language-value]").forEach((element) => {
       element.classList.remove("active");
       element.setAttribute("aria-pressed", "false");
     });
 
-    btnToActive.classList.add("active");
-    btnToActive.setAttribute("aria-pressed", "true");
-    const classesToRemove = Array.from(activeLanguageIcon.classList).filter((className) => className.startsWith("fi-"));
-    activeLanguageIcon.classList.remove(...classesToRemove);
-    activeLanguageIcon.classList.add(activeLanguageIconClass);
-    const languageSwitcherLabel = `${languageSwitcherText.textContent} (${btnToActive.dataset.bsLanguageValue})`;
+    btnToActive?.classList.add("active");
+    btnToActive?.setAttribute("aria-pressed", "true");
+    const classesToRemove = Array.from(activeLanguageIcon?.classList || []).filter((className) =>
+      className.startsWith("fi-"),
+    );
+    activeLanguageIcon?.classList.remove(...classesToRemove);
+    activeLanguageIcon?.classList.add(activeLanguageIconClass);
+    const languageSwitcherLabel = `${languageSwitcherText?.textContent} (${btnToActive?.dataset.bsLanguageValue})`;
     languageSwitcher.setAttribute("aria-label", languageSwitcherLabel);
 
     if (focus) {
-      languageSwitcher.focus();
+      languageSwitcher?.focus();
     }
   };
 

static/src/app/common/theme.ts

@@ -25,7 +25,7 @@
   setTheme(getPreferredTheme());
 
   const showActiveTheme = (theme: string, focus = false) => {
-    const themeSwitcher = document.querySelector("#bd-theme");
+    const themeSwitcher = document.querySelector<HTMLElement>("#bd-theme");
 
     if (!themeSwitcher) {
       return;
@@ -33,24 +33,26 @@
 
     const themeSwitcherText = document.querySelector("#bd-theme-text");
     const activeThemeIcon = document.querySelector(".theme-icon-active");
-    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
-    const activeThemeIconClass = btnToActive.querySelector(".bi").className.match(/bi-[\w-]+/)[0];
+    const btnToActive = document.querySelector<HTMLElement>(`[data-bs-theme-value="${theme}"]`);
+    const activeThemeIconClass = (btnToActive?.querySelector(".bi")?.className.match(/bi-[\w-]+/) || [])[0] || "";
 
     document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
       element.classList.remove("active");
       element.setAttribute("aria-pressed", "false");
     });
 
-    btnToActive.classList.add("active");
-    btnToActive.setAttribute("aria-pressed", "true");
-    const classesToRemove = Array.from(activeThemeIcon.classList).filter((className) => className.startsWith("bi-"));
-    activeThemeIcon.classList.remove(...classesToRemove);
-    activeThemeIcon.classList.add(activeThemeIconClass);
-    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
+    btnToActive?.classList.add("active");
+    btnToActive?.setAttribute("aria-pressed", "true");
+    const classesToRemove = Array.from(activeThemeIcon?.classList || []).filter((className) =>
+      className.startsWith("bi-"),
+    );
+    activeThemeIcon?.classList.remove(...classesToRemove);
+    activeThemeIcon?.classList.add(activeThemeIconClass);
+    const themeSwitcherLabel = `${themeSwitcherText?.textContent} (${btnToActive?.dataset.bsThemeValue})`;
     themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
 
     if (focus) {
-      themeSwitcher.focus();
+      themeSwitcher?.focus();
     }
   };
 
@@ -66,7 +68,7 @@
 
     document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
       toggle.addEventListener("click", () => {
-        const theme = toggle.getAttribute("data-bs-theme-value") || '';
+        const theme = toggle.getAttribute("data-bs-theme-value") || "";
         setStoredTheme(theme);
         setTheme(theme);
         showActiveTheme(theme, true);

static/src/app/common/tooltips.ts

@@ -0,0 +1,6 @@
+import { Tooltip } from "bootstrap";
+
+document.addEventListener("DOMContentLoaded", (event) => {
+  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+  const tooltipList = [...tooltipTriggerList].map((tooltipTriggerEl) => new Tooltip(tooltipTriggerEl));
+});

static/src/app/schedule.ts

@@ -108,4 +108,3 @@ declare global {
 
 window.scheduleChannelStorage = new ScheduleChannelStorage();
 window.scheduleChannelManager = new ScheduleChannelManager();
-console.log("ok");

static/src/index.ts

@@ -1,12 +1,6 @@
-import * as bootstrap from "bootstrap";
-import "./components";
-import "./language";
-import "./main.scss";
-import "./theme";
-import "./weather/weather";
-import "./schedule/schedule";
-
-document.addEventListener("DOMContentLoaded", (event) => {
-  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-  const tooltipList = [...tooltipTriggerList].map((tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl));
-});
+import "./app/common/language";
+import "./app/common/theme";
+import "./app/common/tooltips";
+import "./app/components/app-link";
+import "./app/schedule";
+import "./app/weather";

static/src/lib/flag-icons.scss

@@ -1,12 +1,5 @@
 @use "flag-icons/sass/flag-icons" with (
   $flag-icons-path: "flag-icons/flags",
-  $flag-icons-included-countries: (
-    "gb",
-    "ru",
-    "by",
-    "ua",
-    "kz",
-  )
 );
 
 .fir {

static/src/lib/weather-icons.scss

@@ -0,0 +1,3 @@
+@use "./weather-icons/sass/weather-icons" with (
+  $weather-icons-path: "weather-icons/icons"
+);

static/src/lib/weather-icons/build.py

@@ -1,22 +0,0 @@
-from pathlib import Path
-from string import Template
-
-LIST_ITEM = Template(
-    """.$name {
-  mask-image: url(./svg/$name.svg);
-}
-"""
-)
-
-
-def generate():
-    work_dir = Path(__file__).parent
-    data = ""
-    for item in (work_dir / "svg").glob("*.svg"):
-        data += LIST_ITEM.substitute({"name": item.stem})
-    target = work_dir / "classes-list.scss"
-    target.write_text(data)
-
-
-if __name__ == "__main__":
-    generate()

static/src/lib/weather-icons/classes-list.scss

@@ -1,93 +0,0 @@
-.wi-day-snow {
-  mask-image: url(./svg/wi-day-snow.svg);
-}
-.wi-rain-mix {
-  mask-image: url(./svg/wi-rain-mix.svg);
-}
-.wi-thunderstorm {
-  mask-image: url(./svg/wi-thunderstorm.svg);
-}
-.wi-hail {
-  mask-image: url(./svg/wi-hail.svg);
-}
-.wi-day-rain {
-  mask-image: url(./svg/wi-day-rain.svg);
-}
-.wi-cloudy {
-  mask-image: url(./svg/wi-cloudy.svg);
-}
-.wi-day-hail {
-  mask-image: url(./svg/wi-day-hail.svg);
-}
-.wi-night-clear {
-  mask-image: url(./svg/wi-night-clear.svg);
-}
-.wi-day-cloudy {
-  mask-image: url(./svg/wi-day-cloudy.svg);
-}
-.wi-day-storm-showers {
-  mask-image: url(./svg/wi-day-storm-showers.svg);
-}
-.wi-lightning {
-  mask-image: url(./svg/wi-lightning.svg);
-}
-.wi-day-rain-mix {
-  mask-image: url(./svg/wi-day-rain-mix.svg);
-}
-.wi-day-showers {
-  mask-image: url(./svg/wi-day-showers.svg);
-}
-.wi-storm-showers {
-  mask-image: url(./svg/wi-storm-showers.svg);
-}
-.wi-snow {
-  mask-image: url(./svg/wi-snow.svg);
-}
-.wi-cloud {
-  mask-image: url(./svg/wi-cloud.svg);
-}
-.wi-night-alt-snow {
-  mask-image: url(./svg/wi-night-alt-snow.svg);
-}
-.wi-night-alt-lightning {
-  mask-image: url(./svg/wi-night-alt-lightning.svg);
-}
-.wi-day-sunny {
-  mask-image: url(./svg/wi-day-sunny.svg);
-}
-.wi-night-alt-hail {
-  mask-image: url(./svg/wi-night-alt-hail.svg);
-}
-.wi-night-alt-cloudy {
-  mask-image: url(./svg/wi-night-alt-cloudy.svg);
-}
-.wi-night-alt-storm-showers {
-  mask-image: url(./svg/wi-night-alt-storm-showers.svg);
-}
-.wi-day-thunderstorm {
-  mask-image: url(./svg/wi-day-thunderstorm.svg);
-}
-.wi-wind-deg {
-  mask-image: url(./svg/wi-wind-deg.svg);
-}
-.wi-showers {
-  mask-image: url(./svg/wi-showers.svg);
-}
-.wi-night-alt-rain-mix {
-  mask-image: url(./svg/wi-night-alt-rain-mix.svg);
-}
-.wi-rain {
-  mask-image: url(./svg/wi-rain.svg);
-}
-.wi-night-alt-thunderstorm {
-  mask-image: url(./svg/wi-night-alt-thunderstorm.svg);
-}
-.wi-night-alt-showers {
-  mask-image: url(./svg/wi-night-alt-showers.svg);
-}
-.wi-day-lightning {
-  mask-image: url(./svg/wi-day-lightning.svg);
-}
-.wi-night-alt-rain {
-  mask-image: url(./svg/wi-night-alt-rain.svg);
-}

static/src/lib/weather-icons/sass/_variables.scss

@@ -0,0 +1,34 @@
+$weather-icons-path: "../icons" !default;
+$weather-icons-included: (
+  "wi-cloud",
+  "wi-cloudy",
+  "wi-day-cloudy",
+  "wi-day-hail",
+  "wi-day-lightning",
+  "wi-day-rain-mix",
+  "wi-day-rain",
+  "wi-day-showers",
+  "wi-day-snow",
+  "wi-day-storm-showers",
+  "wi-day-sunny",
+  "wi-day-thunderstorm",
+  "wi-hail",
+  "wi-lightning",
+  "wi-night-alt-cloudy",
+  "wi-night-alt-hail",
+  "wi-night-alt-lightning",
+  "wi-night-alt-rain-mix",
+  "wi-night-alt-rain",
+  "wi-night-alt-showers",
+  "wi-night-alt-snow",
+  "wi-night-alt-storm-showers",
+  "wi-night-alt-thunderstorm",
+  "wi-night-clear",
+  "wi-rain-mix",
+  "wi-rain",
+  "wi-showers",
+  "wi-snow",
+  "wi-storm-showers",
+  "wi-thunderstorm",
+  "wi-wind-deg"
+) !default;

static/src/lib/weather-icons/sass/_weather-icons-base.scss

@@ -1,5 +1,4 @@
-@import "./classes-list";
-@import "./classes-wind-aliases";
+@use "variables";
 
 .wi {
   display: inline-block;
@@ -21,3 +20,9 @@
     font-size: 3.5rem;
   }
 }
+
+@mixin weather-icon($icon) {
+  .#{$icon} {
+    mask-image: url(#{variables.$weather-icons-path}/#{$icon}.svg);
+  }
+}

static/src/lib/weather-icons/sass/_weather-icons-list.scss

@@ -0,0 +1,6 @@
+@use "variables";
+@use "weather-icons-base";
+
+@each $icon in variables.$weather-icons-included {
+  @include weather-icons-base.weather-icon($icon);
+}

static/src/lib/weather-icons/sass/weather-icons.scss

@@ -0,0 +1,4 @@
+@forward "variables";
+@use "weather-icons-base";
+@use "weather-icons-list";
+@use "weather-wind-aliases";

static/src/main.scss

@@ -1,40 +1,9 @@
 @import "./lib/flag-icons";
 @import "./lib/bootstrap";
 @import "./lib/bootstrap-icons";
-@import "./lib/weather-icons/weather-icons";
+@import "./lib/weather-icons";
 
-@import "./widget.scss";
-@import "./weather/weather.scss";
-
-.table.table-compact {
-  td {
-    padding: 0.1rem 0.4rem;
-  }
-}
-
-.icon-header {
-  @include font-size($h4-font-size);
-}
-
-.app-header {
-  display: flex;
-  flex-direction: row;
-
-  > .link-list {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-
-    app-link {
-      display: flex;
-      align-items: center;
-
-      &:not(:last-child)::after {
-        margin-left: 1rem;
-        content: "|";
-      }
-    }
-  }
-}
-
-@import "./mobile";
+@import "./styles/weather.scss";
+@import "./styles/app";
+@import "./styles/widget.scss";
+@import "./styles/mobile";

static/src/styles/app.scss

@@ -0,0 +1,32 @@
+@import "../lib/bootstrap";
+
+.table.table-compact {
+  td {
+    padding: 0.1rem 0.4rem;
+  }
+}
+
+.icon-header {
+  @include font-size($h4-font-size);
+}
+
+.app-header {
+  display: flex;
+  flex-direction: row;
+
+  > .link-list {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+
+    app-link {
+      display: flex;
+      align-items: center;
+
+      &:not(:last-child)::after {
+        margin-left: 1rem;
+        content: "|";
+      }
+    }
+  }
+}

static/src/styles/mobile.scss

@@ -1,4 +1,4 @@
-@import "./lib/bootstrap";
+@import "../lib/bootstrap";
 
 $default-space: 2;
 

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,77 @@
+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" };
+
+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",
+        },
+        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,
+              sassOptions: { quietDeps: true, silenceDeprecations: ["color-functions", "global-builtin", "import"] },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  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/lib/weather-icons/icons/*.svg",
+          to: "weather-icons/icons/[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]",
+        },
+        {
+          from: "./node_modules/flag-icons/flags/4x3/*.svg",
+          to: "flag-icons/flags/4x3/[name][ext]",
+        },
+      ],
+    }),
+  ],
+  performance: {
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+};
+
+export default config;