Merge pull request #727 from ilyhalight/votjs-integration

Votjs integration

.github/workflows/build.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x, 20.x, 22.x]
+        node-version: [18.x, 22.x]
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v4

.gitignore

@@ -1,3 +1,6 @@
+dist/test-ui.user.js
+dist/*.txt
+
 src/localization/locales/generate_phrase.py
 src/localization/locales/regenerate_locales.py
 src/localization/locales/remove_phrase.py

.oxlintignore

@@ -0,0 +1 @@
+dist

.webpack/config.test.js

@@ -0,0 +1,66 @@
+import path from "path";
+import { fileURLToPath } from "url";
+
+import webpack from "webpack";
+
+import { monkey } from "webpack-monkey";
+import { styleLoaderInsertStyleElement } from "webpack-monkey/lib/client/css.js";
+import ESLintPlugin from "eslint-webpack-plugin";
+import TerserPlugin from "terser-webpack-plugin";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.resolve(path.dirname(__filename), "..");
+
+export default () => {
+  return monkey({
+    mode: "production",
+    resolve: {
+      extensions: [".js"],
+    },
+    performance: {
+      hints: "error",
+      maxEntrypointSize: 2000 * 10 ** 3,
+      maxAssetSize: 2000 * 10 ** 3,
+    },
+    entry: path.resolve(__dirname, "tests", "ui.js"),
+    output: {
+      path: path.resolve(__dirname, "dist"),
+      filename: "test-ui.user.js",
+    },
+    monkey: {
+      debug: false,
+      meta: {
+        resolve: path.resolve(__dirname, "tests", "headers.json"),
+      },
+    },
+    plugins: [
+      new ESLintPlugin({
+        configType: "flat",
+      }),
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+      new webpack.DefinePlugin({
+        DEBUG_MODE: true,
+        IS_BETA_VERSION: false,
+        __MK_GLOBAL__: {
+          styleLoaderInsertStyleElement,
+        },
+      }),
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.(css|scss|sass)$/i,
+          use: ["style-loader", "css-loader", "sass-loader"],
+        },
+      ],
+    },
+    optimization: {
+      emitOnErrors: true,
+      moduleIds: "named",
+      minimize: false,
+      minimizer: [new TerserPlugin()],
+    },
+  });
+};

webpack.config.js → .webpack/webpack.config.js

@@ -9,11 +9,18 @@ import { styleLoaderInsertStyleElement } from "webpack-monkey/lib/client/css.js"
 import ESLintPlugin from "eslint-webpack-plugin";
 import TerserPlugin from "terser-webpack-plugin";
 
+import {
+  sitesInvidious,
+  sitesPiped,
+  sitesProxiTok,
+  sitesPeertube,
+} from "vot.js/alternativeUrls";
+
 const repo =
   "https://raw.githubusercontent.com/ilyhalight/voice-over-translation";
 const dev = process.env.NODE_ENV === "development";
 const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const __dirname = path.resolve(path.dirname(__filename), "..");
 let isBeta = getHeaders().version.includes("beta");
 
 console.log("development mode: ", dev);
@@ -29,16 +36,16 @@ function getHeaders(lang) {
 }
 
 export default (env) => {
-  const build_mode = env.build_mode;
+  //const build_mode = env.build_mode;
   const build_type = env.build_type;
-  console.log("build mode: ", build_mode);
+  //console.log("build mode: ", build_mode);
   console.log("build type: ", build_type);
 
-  function get_filename() {
+  function getFilename() {
     let name = "vot";
-    if (build_mode === "cloudflare") {
-      name += "-cloudflare";
-    }
+    // if (build_mode === "cloudflare") {
+    //   name += "-cloudflare";
+    // }
 
     if (build_type === "minify") {
       name += "-min";
@@ -47,15 +54,24 @@ export default (env) => {
     return name + ".user.js";
   }
 
-  function get_name_by_build_mode(name) {
-    let finalName =
-      build_mode === "cloudflare"
-        ? name.replace("[VOT]", "[VOT Cloudflare]")
-        : name;
-
-    return finalName;
+  function altUrlsToMatch() {
+    // autogenerating match list by alternative urls sites
+    return [sitesInvidious, sitesPiped, sitesProxiTok, sitesPeertube]
+      .map((sites) =>
+        sites.map((site) => {
+          const isSubdomain = site.match(/\./g)?.length > 1;
+          return `*://${isSubdomain ? "" : "*."}${site}/*`;
+        }),
+      )
+      .flat();
   }
 
+  // function getNameByBuildMode(name) {
+  //   return build_mode === "cloudflare"
+  //     ? name.replace("[VOT]", "[VOT Cloudflare]")
+  //     : name;
+  // }
+
   return monkey({
     mode: dev ? "development" : "production",
     resolve: {
@@ -69,25 +85,25 @@ export default (env) => {
     entry: path.resolve(__dirname, "src", "index.js"),
     output: {
       path: path.resolve(__dirname, "dist"),
-      ...(!dev ? { filename: get_filename() } : {}),
+      ...(!dev ? { filename: getFilename() } : {}),
     },
     monkey: {
       debug: dev,
       meta: {
-        resolve: "headers.json",
+        resolve: path.resolve(__dirname, "src", "headers.json"),
         transform({ meta }) {
-          const extFileName = get_filename().slice(0, -8);
+          const extFileName = getFilename().slice(0, -8);
           const finalURL = `${repo}/${
             isBeta ? "dev" : "master"
           }/dist/${extFileName}.user.js`;
 
           meta.namespace = extFileName;
           meta.updateURL = meta.downloadURL = finalURL;
 
-          if (build_mode === "cloudflare") {
-            meta.name = meta.name.replace("[VOT]", "[VOT Cloudflare]");
-            meta["inject-into"] = "page";
-          }
+          // if (build_mode === "cloudflare") {
+          //   meta.name = meta.name.replace("[VOT]", "[VOT Cloudflare]");
+          //   meta["inject-into"] = "page";
+          // }
 
           const files = fs.readdirSync(
             path.resolve(__dirname, "src", "locales"),
@@ -105,22 +121,29 @@ export default (env) => {
             const localeHeaders = getHeaders(file);
             const lang = file.substring(0, 2);
 
-            meta.name[lang] = get_name_by_build_mode(localeHeaders.name);
+            meta.name[lang] = localeHeaders.name;
             meta.description[lang] = localeHeaders.description;
           }
 
+          meta.match = Array.from(
+            new Set([...meta.match, ...altUrlsToMatch()]),
+          );
+
           return meta;
         },
       },
     },
     plugins: [
-      new ESLintPlugin(),
+      new ESLintPlugin({
+        configType: "flat",
+      }),
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1,
       }),
       new webpack.DefinePlugin({
-        BUILD_MODE: JSON.stringify(build_mode),
-        DEBUG_MODE: dev,
+        // BUILD_MODE: JSON.stringify(build_mode),
+        // DEBUG_MODE: dev,
+        DEBUG_MODE: true,
         IS_BETA_VERSION: isBeta,
         ...(() => {
           if (!dev) {
@@ -144,7 +167,7 @@ export default (env) => {
     optimization: {
       emitOnErrors: true,
       moduleIds: "named",
-      minimize: build_type === "minify" ? true : false,
+      minimize: build_type === "minify",
       minimizer: [new TerserPlugin()],
     },
   });