[dev] Add WatchFilePlugin (#5974)

.stylelintrc.json

@@ -14,7 +14,7 @@
     "stylelint-high-performance-animation",
     "stylelint-group-selectors",
     "stylelint-selector-tag-no-without-class",
-    "./dev/wholePixel.mjs"
+    "@mytonwallet/stylelint-whole-pixel"
   ],
   "rules": {
     "property-no-unknown": [

dev/wholePixel.mjs

@@ -1,84 +0,0 @@
-import { list } from 'postcss';
-import stylelint from 'stylelint';
-
-const ruleName = 'plugin/whole-pixel';
-
-const isString = (s) => typeof s === 'string';
-
-const messages = stylelint.utils.ruleMessages(ruleName, {
-  expected: (unfixed, fixed) => `Expected "${unfixed}" to be "${fixed}"`,
-});
-
-const PX_PER_REM = 16;
-const unitRegex = /(px|rem)$/;
-const numberRegex = /^([-0-9.]+)/;
-
-const plugin = stylelint.createPlugin(ruleName, (primaryOption, secondaryOptionObject, context) => {
-  const secondaryOptions = secondaryOptionObject || {};
-  return (root, result) => {
-    const validOptions = stylelint.utils.validateOptions(
-      result,
-      ruleName,
-      {
-        actual: secondaryOptions,
-        possible: {
-          pxPerRem: (value) => value % 1 === 0,
-          ignoreList: [isString],
-        },
-      },
-    );
-
-    if (!validOptions) {
-      return;
-    }
-    const pxPerRem = Number(secondaryOptions.pxPerRem) || PX_PER_REM;
-    const ignoreList = secondaryOptions.ignoreList || [];
-
-    const isAutoFixing = Boolean(context.fix);
-
-    const isValid = (value, unit) => {
-      if (unit === 'px') return Number.isInteger(value);
-      if (unit === 'rem') return Number.isInteger(value * pxPerRem);
-      return false;
-    };
-
-    const suggestFix = (value, unit) => {
-      if (unit === 'px') return `${Math.round(value)}px`;
-      if (unit === 'rem') return `${Math.round(value * pxPerRem) / pxPerRem}rem`;
-      return undefined;
-    };
-
-    const handleValue = (decl, value) => {
-      if (!unitRegex.test(value)) return;
-      const matched = value.match(numberRegex);
-      if (!matched) return;
-      const valueNumberString = matched[0];
-      const valueNumber = parseFloat(valueNumberString);
-      const unit = value.replace(valueNumberString, '');
-
-      if (isValid(valueNumber, unit)) return;
-      const suggestedValue = suggestFix(valueNumber, unit);
-      if (isAutoFixing) {
-        decl.value = decl.value.replace(value, suggestedValue);
-      } else {
-        stylelint.utils.report({
-          ruleName,
-          result,
-          node: decl,
-          message: messages.expected(value, suggestedValue),
-          word: value,
-        });
-      }
-    };
-
-    root.walkDecls((decl) => {
-      if (!decl.value || ignoreList.includes(decl.prop)) return;
-      const values = list.space(decl.value);
-      if (!values?.length) return;
-      values.forEach((value) => handleValue(decl, value));
-    });
-  };
-});
-
-export { ruleName, messages };
-export default plugin;

package.json

@@ -46,17 +46,19 @@
   "author": "Alexander Zinchuk (alexander@zinchuk.com)",
   "license": "GPL-3.0-or-later",
   "devDependencies": {
-    "@babel/core": "^7.27.1",
+    "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@babel/register": "^7.27.1",
-    "@eslint/js": "^9.27.0",
+    "@eslint/js": "^9.28.0",
     "@glen/jest-raw-loader": "^2.0.0",
+    "@mytonwallet/stylelint-whole-pixel": "github:mytonwallet-org/stylelint-whole-pixel#fd07e44d786460f7d469076b1d2cb1b05297896c",
+    "@mytonwallet/webpack-watch-file-plugin": "github:mytonwallet-org/webpack-watch-file-plugin#747b7fd29da9a928aa8b63299adfba461d2f1231",
     "@playwright/test": "^1.52.0",
     "@statoscope/cli": "5.29.0",
     "@statoscope/webpack-plugin": "5.29.0",
-    "@stylistic/eslint-plugin": "^4.2.0",
+    "@stylistic/eslint-plugin": "^4.4.0",
     "@stylistic/stylelint-config": "^2.0.0",
     "@stylistic/stylelint-plugin": "^3.1.2",
     "@testing-library/jest-dom": "^6.6.3",
@@ -65,16 +67,16 @@
     "@types/dom-view-transitions": "^1.0.6",
     "@types/hast": "^3.0.4",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.15.21",
+    "@types/node": "^22.15.29",
-    "@types/react": "^19.1.5",
+    "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.5",
     "@types/webpack": "^5.28.5",
-    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/eslint-plugin": "^8.33.1",
-    "@typescript-eslint/parser": "^8.32.1",
+    "@typescript-eslint/parser": "^8.33.1",
     "@webpack-cli/serve": "^3.0.1",
     "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
-    "babel-plugin-transform-import-meta": "^2.3.2",
+    "babel-plugin-transform-import-meta": "^2.3.3",
     "bindings": "git+https://github.com/zubiden/node-bindings#1f689378b1cd26f99d3b7156fe40a520365d1272",
     "browserlist": "^1.0.1",
     "buffer": "^6.0.3",
@@ -83,43 +85,45 @@
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
     "dotenv": "^16.5.0",
-    "electron": "^36.2.1",
+    "electron": "^36.3.2",
     "electron-builder": "^26.0.12",
     "electron-conf": "^1.3.0",
     "electron-context-menu": "^4.1.0",
     "electron-drag-click": "git+https://github.com/zubiden/electron-drag-click#cf6918ddb648e13ebcf6cf1e7aa008258edc06ad",
     "electron-updater": "^6.6.2",
     "electronmon": "^2.0.3",
-    "eslint": "^9.27.0",
+    "eslint": "^9.28.0",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-jest": "^28.12.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-no-null": "^1.0.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks-static-deps": "git+https://github.com/zubiden/eslint-plugin-react-hooks-static-deps#c16f35bf2e6e364cbc692c73cc350c1c5d46cc6e",
-    "eslint-plugin-react-x": "^1.49.0",
+    "eslint-plugin-react-x": "^1.51.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-tt-multitab": "git+https://github.com/zubiden/eslint-plugin-tt-multitab#15d542004d39ec7c29d50385484511bab0b77ea9",
     "eslint-plugin-unused-imports": "^4.1.4",
     "fake-indexeddb": "^6.0.1",
     "git-revision-webpack-plugin": "^5.0.0",
     "gitlog": "^5.1.0",
+    "glob": "^11.0.2",
     "html-webpack-plugin": "^5.6.3",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^16.0.0",
+    "lint-staged": "^16.1.0",
     "mini-css-extract-plugin": "^2.9.2",
+    "minimatch": "^10.0.1",
     "postcss-loader": "^8.1.1",
     "postcss-modules": "^6.0.1",
     "react": "^19.1.0",
-    "sass": "^1.89.0",
+    "sass": "^1.89.1",
     "sass-loader": "^16.0.5",
     "script-loader": "^0.7.2",
     "serve": "^14.2.4",
-    "stylelint": "^16.19.1",
+    "stylelint": "^16.20.0",
     "stylelint-config-clean-order": "^7.0.0",
-    "stylelint-config-recommended-scss": "^15.0.0",
+    "stylelint-config-recommended-scss": "^15.0.1",
     "stylelint-declaration-block-no-ignored-properties": "^2.8.0",
     "stylelint-group-selectors": "^1.0.10",
     "stylelint-high-performance-animation": "^1.11.0",
@@ -127,9 +131,9 @@
     "telegraph-node": "^1.0.4",
     "tsx": "^4.19.4",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1",
+    "typescript-eslint": "^8.33.1",
-    "webpack": "^5.99.8",
+    "webpack": "^5.99.9",
-    "webpack-dev-server": "^5.2.1"
+    "webpack-dev-server": "^5.2.2"
   },
   "dependencies": {
     "@cryptography/aes": "^0.1.1",

webpack.config.ts

@@ -1,6 +1,7 @@
 import 'webpack-dev-server';
 import 'dotenv/config';
 
+import WatchFilePlugin from '@mytonwallet/webpack-watch-file-plugin';
 import StatoscopeWebpackPlugin from '@statoscope/webpack-plugin';
 import { GitRevisionPlugin } from 'git-revision-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
@@ -74,9 +75,6 @@ export default function createConfig(
         {
           directory: path.resolve(__dirname, 'node_modules/opus-recorder/dist'),
         },
-        {
-          directory: path.resolve(__dirname, 'src/lib/webp'),
-        },
         {
           directory: path.resolve(__dirname, 'src/lib/rlottie'),
         },
@@ -236,9 +234,27 @@ export default function createConfig(
         saveReportTo: path.resolve('./public/statoscope-report.html'),
         saveStatsTo: path.resolve('./public/build-stats.json'),
         normalizeStats: true,
-        open: 'file',
+        open: false,
         extensions: [new WebpackContextExtension()],
       }),
+      new WatchFilePlugin({
+        rules: [
+          {
+            files: 'src/assets/localization/fallback.strings',
+            action: 'npm run lang:ts',
+          },
+          {
+            files: 'src/lib/gramjs/tl/static/**/*',
+            action: 'npm run gramjs:tl',
+            sharedAction: true,
+          },
+          {
+            files: 'src/assets/font-icons/*.svg',
+            action: 'npm run icons:build',
+            sharedAction: true,
+          },
+        ],
+      }),
     ],
 
     devtool: APP_ENV === 'production' && IS_PACKAGED_ELECTRON ? undefined : 'source-map',