Replace copy/watching of non-language assets with copy-webpack-plugin

element-hq · Nov 16, 2023 · d2fa827 · d2fa827
1 parent fd2f788
commit d2fa827
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 409 deletions.
diff --git a/package.json b/package.json
@@ -123,7 +123,7 @@
         "babel-loader": "^8.2.2",
         "chokidar": "^3.5.1",
         "concurrently": "^8.0.0",
-        "cpx": "1.5.0",
+        "copy-webpack-plugin": "^6.0.0",
         "cronstrue": "^2.41.0",
         "css-loader": "^4",
         "dotenv": "^16.0.2",

diff --git a/scripts/copy-res.ts b/scripts/copy-res.ts
@@ -6,7 +6,6 @@ import parseArgs from "minimist";
 import * as chokidar from "chokidar";
 import * as fs from "node:fs";
 import _ from "lodash";
-import { Cpx } from "cpx";
 import * as loaderUtils from "loader-utils";
 import { Translations } from "matrix-web-i18n";
 
@@ -16,23 +15,6 @@ const INCLUDE_LANGS = [...new Set([...fs.readdirSync(I18N_BASE_PATH), ...fs.read
     .filter((fn) => fn.endsWith(".json"))
     .map((f) => f.slice(0, -5));
 
-// cpx includes globbed parts of the filename in the destination, but excludes
-// common parents. Hence, "res/{a,b}/**": the output will be "dest/a/..." and
-// "dest/b/...".
-const COPY_LIST: [sourceGlob: string, outputPath: string][] = [
-    ["res/apple-app-site-association", "webapp"],
-    ["res/manifest.json", "webapp"],
-    ["res/sw.js", "webapp"],
-    ["res/welcome.html", "webapp"],
-    ["res/welcome/**", "webapp/welcome"],
-    ["res/themes/**", "webapp/themes"],
-    ["res/vector-icons/**", "webapp/vector-icons"],
-    ["res/decoder-ring/**", "webapp/decoder-ring"],
-    ["node_modules/matrix-react-sdk/res/media/**", "webapp/media"],
-    ["node_modules/@matrix-org/olm/olm_legacy.js", "webapp"],
-    ["./config.json", "webapp"],
-    ["contribute.json", "webapp"],
-];
 const argv = parseArgs(process.argv.slice(2), {});
 
 const watch = argv.w;
@@ -54,59 +36,12 @@ if (!fs.existsSync("webapp/i18n/")) {
     fs.mkdirSync("webapp/i18n/");
 }
 
-function createCpx(source: string, dest: string): Cpx {
-    const cpx = new Cpx(source, dest);
-    if (verbose) {
-        cpx.on("copy", (event) => {
-            console.log(`Copied: ${event.srcPath} --> ${event.dstPath}`);
-        });
-    }
-    return cpx;
-}
-
 const logWatch = (path: string) => {
     if (verbose) {
         console.log(`Watching: ${path}`);
     }
 };
 
-function next(i: number, err?: Error): void {
-    errCheck(err);
-
-    if (i >= COPY_LIST.length) {
-        return;
-    }
-
-    const ent = COPY_LIST[i];
-    const source = ent[0];
-    const dest = ent[1];
-
-    const cb = (err?: Error): void => {
-        next(i + 1, err);
-    };
-
-    if (watch) {
-        // cpx -w creates a watcher for the parent of any files specified,
-        // which in the case of e.g. config.json is '.', which inevitably takes
-        // ages to crawl. To prevent this, we only use cpx for copying and resort
-        // to chokidar for watching.
-        const copy = (path: string): void => {
-            createCpx(path, dest).copy(errCheck);
-        };
-        chokidar
-            .watch(source, { ignoreInitial: true })
-            .on("ready", () => {
-                logWatch(source);
-                cb();
-            })
-            .on("add", copy)
-            .on("change", copy)
-            .on("error", errCheck);
-    } else {
-        createCpx(source, dest).copy(cb);
-    }
-}
-
 function prepareLangFile(lang: string, dest: string): [filename: string, json: string] {
     const reactSdkFile = REACT_I18N_BASE_PATH + lang + ".json";
     const riotWebFile = I18N_BASE_PATH + lang + ".json";
@@ -213,6 +148,3 @@ if (watch) {
 } else {
     genLangList(I18N_FILENAME_MAP);
 }
-
-// non-language resources
-next(0);
diff --git a/src/@types/cpx.d.ts b/src/@types/cpx.d.ts
diff --git a/src/@types/loader-utils.d.ts b/src/@types/loader-utils.d.ts
@@ -24,5 +24,3 @@ declare module "loader-utils" {
         maxLength: number,
     ): string;
 }
-
-export as namespace Cpx;
diff --git a/webpack.config.js b/webpack.config.js
@@ -10,6 +10,7 @@ const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const HtmlWebpackInjectPreload = require("@principalstudio/html-webpack-inject-preload");
 const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");
 const crypto = require("crypto");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 // XXX: mangle Crypto::createHash to replace md4 with sha256, output.hashFunction is insufficient as multiple bits
 // of webpack hardcode md4. The proper fix it to upgrade to webpack 5.
@@ -709,6 +710,23 @@ module.exports = (env, argv) => {
                     },
                 }),
             new webpack.EnvironmentPlugin(["VERSION"]),
+
+            new CopyWebpackPlugin({
+                patterns: [
+                    "res/apple-app-site-association",
+                    "res/manifest.json",
+                    "res/sw.js",
+                    "res/welcome.html",
+                    { from: "welcome/**", context: path.resolve(__dirname, "res") },
+                    { from: "themes/**", context: path.resolve(__dirname, "res") },
+                    { from: "vector-icons/**", context: path.resolve(__dirname, "res") },
+                    { from: "decoder-ring/**", context: path.resolve(__dirname, "res") },
+                    { from: "media/**", context: path.resolve(__dirname, "node_modules/matrix-react-sdk/res/") },
+                    "node_modules/@matrix-org/olm/olm_legacy.js",
+                    "config.json",
+                    "contribute.json",
+                ],
+            }),
         ].filter(Boolean),
 
         output: {