Modernize JS build scripts (#19824)

- Remove __dirname, use file URLs instead
- Upgrade fabric dependency
- Use fs/promises syntax, this breaks node 12 but we require 14 already

The change in public/img/favicon.svg is not caused by the fabric
upgrade, but it seems it was not properly generated when introduced.

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

Makefile

@@ -761,7 +761,7 @@ generate-gitignore:
 
 .PHONY: generate-images
 generate-images: | node_modules
-	npm install --no-save --no-package-lock fabric@4 imagemin-zopfli@7
+	npm install --no-save --no-package-lock fabric@5 imagemin-zopfli@7
 	node build/generate-images.js $(TAGS)
 
 .PHONY: generate-manpage

build/generate-images.js

@@ -1,14 +1,8 @@
+#!/usr/bin/env node
 import imageminZopfli from 'imagemin-zopfli';
 import {optimize} from 'svgo';
 import {fabric} from 'fabric';
-import fs from 'fs';
-import {resolve, dirname} from 'path';
-import {fileURLToPath} from 'url';
-
-const {readFile, writeFile} = fs.promises;
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const logoFile = resolve(__dirname, '../assets/logo.svg');
-const faviconFile = resolve(__dirname, '../assets/favicon.svg');
+import {readFile, writeFile} from 'fs/promises';
 
 function exit(err) {
   if (err) console.error(err);
@@ -23,8 +17,10 @@ function loadSvg(svg) {
   });
 }
 
-async function generate(svg, outputFile, {size, bg}) {
-  if (outputFile.endsWith('.svg')) {
+async function generate(svg, path, {size, bg}) {
+  const outputFile = new URL(path, import.meta.url);
+
+  if (String(outputFile).endsWith('.svg')) {
     const {data} = optimize(svg, {
       plugins: [
         'preset-default',
@@ -69,19 +65,18 @@ async function generate(svg, outputFile, {size, bg}) {
 
 async function main() {
   const gitea = process.argv.slice(2).includes('gitea');
-  const logoSvg = await readFile(logoFile, 'utf8');
-  const faviconSvg = await readFile(faviconFile, 'utf8');
+  const logoSvg = await readFile(new URL('../assets/logo.svg', import.meta.url), 'utf8');
+  const faviconSvg = await readFile(new URL('../assets/favicon.svg', import.meta.url), 'utf8');
 
   await Promise.all([
-    generate(logoSvg, resolve(__dirname, '../public/img/logo.svg'), {size: 32}),
-    generate(logoSvg, resolve(__dirname, '../public/img/logo.png'), {size: 512}),
-    generate(faviconSvg, resolve(__dirname, '../public/img/favicon.svg'), {size: 32}),
-    generate(faviconSvg, resolve(__dirname, '../public/img/favicon.png'), {size: 180}),
-    generate(logoSvg, resolve(__dirname, '../public/img/avatar_default.png'), {size: 200}),
-    generate(logoSvg, resolve(__dirname, '../public/img/apple-touch-icon.png'), {size: 180, bg: true}),
-    gitea && generate(logoSvg, resolve(__dirname, '../public/img/gitea.svg'), {size: 32}),
+    generate(logoSvg, '../public/img/logo.svg', {size: 32}),
+    generate(logoSvg, '../public/img/logo.png', {size: 512}),
+    generate(faviconSvg, '../public/img/favicon.svg', {size: 32}),
+    generate(faviconSvg, '../public/img/favicon.png', {size: 180}),
+    generate(logoSvg, '../public/img/avatar_default.png', {size: 200}),
+    generate(logoSvg, '../public/img/apple-touch-icon.png', {size: 180, bg: true}),
+    gitea && generate(logoSvg, '../public/img/gitea.svg', {size: 32}),
   ]);
 }
 
 main().then(exit).catch(exit);
-

build/generate-svg.js

@@ -1,13 +1,14 @@
+#!/usr/bin/env node
 import fastGlob from 'fast-glob';
 import {optimize} from 'svgo';
-import {resolve, parse, dirname} from 'path';
-import fs from 'fs';
+import {parse} from 'path';
+import {readFile, writeFile, mkdir} from 'fs/promises';
 import {fileURLToPath} from 'url';
 
-const {readFile, writeFile, mkdir} = fs.promises;
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const glob = (pattern) => fastGlob.sync(pattern, {cwd: resolve(__dirname), absolute: true});
-const outputDir = resolve(__dirname, '../public/img/svg');
+const glob = (pattern) => fastGlob.sync(pattern, {
+  cwd: fileURLToPath(new URL('..', import.meta.url)),
+  absolute: true,
+});
 
 function exit(err) {
   if (err) console.error(err);
@@ -16,7 +17,6 @@ function exit(err) {
 
 async function processFile(file, {prefix, fullName} = {}) {
   let name;
-
   if (fullName) {
     name = fullName;
   } else {
@@ -35,7 +35,8 @@ async function processFile(file, {prefix, fullName} = {}) {
       {name: 'addAttributesToSVGElement', params: {attributes: [{'width': '16'}, {'height': '16'}, {'aria-hidden': 'true'}]}},
     ],
   });
-  await writeFile(resolve(outputDir, `${name}.svg`), data);
+
+  await writeFile(fileURLToPath(new URL(`../public/img/svg/${name}.svg`, import.meta.url)), data);
 }
 
 function processFiles(pattern, opts) {
@@ -44,15 +45,14 @@ function processFiles(pattern, opts) {
 
 async function main() {
   try {
-    await mkdir(outputDir);
+    await mkdir(fileURLToPath(new URL('../public/img/svg', import.meta.url)), {recursive: true});
   } catch {}
 
   await Promise.all([
-    ...processFiles('../node_modules/@primer/octicons/build/svg/*-16.svg', {prefix: 'octicon'}),
-    ...processFiles('../web_src/svg/*.svg'),
-    ...processFiles('../public/img/gitea.svg', {fullName: 'gitea-gitea'}),
+    ...processFiles('node_modules/@primer/octicons/build/svg/*-16.svg', {prefix: 'octicon'}),
+    ...processFiles('web_src/svg/*.svg'),
+    ...processFiles('public/img/gitea.svg', {fullName: 'gitea-gitea'}),
   ]);
 }
 
 main().then(exit).catch(exit);
-

webpack.config.js

@@ -6,15 +6,17 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
 import VueLoader from 'vue-loader';
 import EsBuildLoader from 'esbuild-loader';
-import {resolve, parse, dirname} from 'path';
+import {parse, dirname} from 'path';
 import webpack from 'webpack';
 import {fileURLToPath} from 'url';
 
 const {VueLoaderPlugin} = VueLoader;
 const {ESBuildMinifyPlugin} = EsBuildLoader;
 const {SourceMapDevToolPlugin} = webpack;
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const glob = (pattern) => fastGlob.sync(pattern, {cwd: __dirname, absolute: true});
+const glob = (pattern) => fastGlob.sync(pattern, {
+  cwd: dirname(fileURLToPath(new URL(import.meta.url))),
+  absolute: true,
+});
 
 const themes = {};
 for (const path of glob('web_src/less/themes/*.less')) {
@@ -43,29 +45,29 @@ export default {
   mode: isProduction ? 'production' : 'development',
   entry: {
     index: [
-      resolve(__dirname, 'web_src/js/jquery.js'),
-      resolve(__dirname, 'web_src/fomantic/build/semantic.js'),
-      resolve(__dirname, 'web_src/js/index.js'),
-      resolve(__dirname, 'node_modules/easymde/dist/easymde.min.css'),
-      resolve(__dirname, 'web_src/fomantic/build/semantic.css'),
-      resolve(__dirname, 'web_src/less/misc.css'),
-      resolve(__dirname, 'web_src/less/index.less'),
+      fileURLToPath(new URL('web_src/js/jquery.js', import.meta.url)),
+      fileURLToPath(new URL('web_src/fomantic/build/semantic.js', import.meta.url)),
+      fileURLToPath(new URL('web_src/js/index.js', import.meta.url)),
+      fileURLToPath(new URL('node_modules/easymde/dist/easymde.min.css', import.meta.url)),
+      fileURLToPath(new URL('web_src/fomantic/build/semantic.css', import.meta.url)),
+      fileURLToPath(new URL('web_src/less/misc.css', import.meta.url)),
+      fileURLToPath(new URL('web_src/less/index.less', import.meta.url)),
     ],
     swagger: [
-      resolve(__dirname, 'web_src/js/standalone/swagger.js'),
-      resolve(__dirname, 'web_src/less/standalone/swagger.less'),
+      fileURLToPath(new URL('web_src/js/standalone/swagger.js', import.meta.url)),
+      fileURLToPath(new URL('web_src/less/standalone/swagger.less', import.meta.url)),
     ],
     serviceworker: [
-      resolve(__dirname, 'web_src/js/serviceworker.js'),
+      fileURLToPath(new URL('web_src/js/serviceworker.js', import.meta.url)),
     ],
     'eventsource.sharedworker': [
-      resolve(__dirname, 'web_src/js/features/eventsource.sharedworker.js'),
+      fileURLToPath(new URL('web_src/js/features/eventsource.sharedworker.js', import.meta.url)),
     ],
     ...themes,
   },
   devtool: false,
   output: {
-    path: resolve(__dirname, 'public'),
+    path: fileURLToPath(new URL('public', import.meta.url)),
     filename: ({chunk}) => {
       // serviceworker can only manage assets below it's script's directory so
       // we have to put it in / instead of /js/
@@ -165,7 +167,7 @@ export default {
       },
       {
         test: /\.svg$/,
-        include: resolve(__dirname, 'public/img/svg'),
+        include: fileURLToPath(new URL('public/img/svg', import.meta.url)),
         type: 'asset/source',
       },
       {