Skip to content

Commit df0fb17

Browse files
silverwindlunny
silverwind
and
lunny
authored
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>
1 parent 0a8c030 commit df0fb17

File tree

5 files changed

+48
-51
lines changed

5 files changed

+48
-51
lines changed

‎Makefile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -761,7 +761,7 @@ generate-gitignore:
761761

762762
.PHONY: generate-images
763763
generate-images: | node_modules
764-
npm install --no-save --no-package-lock fabric@4 imagemin-zopfli@7
764+
npm install --no-save --no-package-lock fabric@5 imagemin-zopfli@7
765765
node build/generate-images.js $(TAGS)
766766

767767
.PHONY: generate-manpage

‎build/generate-images.js‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
1+
#!/usr/bin/env node
12
import imageminZopfli from 'imagemin-zopfli';
23
import {optimize} from 'svgo';
34
import {fabric} from 'fabric';
4-
import fs from 'fs';
5-
import {resolve, dirname} from 'path';
6-
import {fileURLToPath} from 'url';
7-
8-
const {readFile, writeFile} = fs.promises;
9-
const __dirname = dirname(fileURLToPath(import.meta.url));
10-
const logoFile = resolve(__dirname, '../assets/logo.svg');
11-
const faviconFile = resolve(__dirname, '../assets/favicon.svg');
5+
import {readFile, writeFile} from 'fs/promises';
126

137
function exit(err) {
148
if (err) console.error(err);
@@ -23,8 +17,10 @@ function loadSvg(svg) {
2317
});
2418
}
2519

26-
async function generate(svg, outputFile, {size, bg}) {
27-
if (outputFile.endsWith('.svg')) {
20+
async function generate(svg, path, {size, bg}) {
21+
const outputFile = new URL(path, import.meta.url);
22+
23+
if (String(outputFile).endsWith('.svg')) {
2824
const {data} = optimize(svg, {
2925
plugins: [
3026
'preset-default',
@@ -69,19 +65,18 @@ async function generate(svg, outputFile, {size, bg}) {
6965

7066
async function main() {
7167
const gitea = process.argv.slice(2).includes('gitea');
72-
const logoSvg = await readFile(logoFile, 'utf8');
73-
const faviconSvg = await readFile(faviconFile, 'utf8');
68+
const logoSvg = await readFile(new URL('../assets/logo.svg', import.meta.url), 'utf8');
69+
const faviconSvg = await readFile(new URL('../assets/favicon.svg', import.meta.url), 'utf8');
7470

7571
await Promise.all([
76-
generate(logoSvg, resolve(__dirname, '../public/img/logo.svg'), {size: 32}),
77-
generate(logoSvg, resolve(__dirname, '../public/img/logo.png'), {size: 512}),
78-
generate(faviconSvg, resolve(__dirname, '../public/img/favicon.svg'), {size: 32}),
79-
generate(faviconSvg, resolve(__dirname, '../public/img/favicon.png'), {size: 180}),
80-
generate(logoSvg, resolve(__dirname, '../public/img/avatar_default.png'), {size: 200}),
81-
generate(logoSvg, resolve(__dirname, '../public/img/apple-touch-icon.png'), {size: 180, bg: true}),
82-
gitea && generate(logoSvg, resolve(__dirname, '../public/img/gitea.svg'), {size: 32}),
72+
generate(logoSvg, '../public/img/logo.svg', {size: 32}),
73+
generate(logoSvg, '../public/img/logo.png', {size: 512}),
74+
generate(faviconSvg, '../public/img/favicon.svg', {size: 32}),
75+
generate(faviconSvg, '../public/img/favicon.png', {size: 180}),
76+
generate(logoSvg, '../public/img/avatar_default.png', {size: 200}),
77+
generate(logoSvg, '../public/img/apple-touch-icon.png', {size: 180, bg: true}),
78+
gitea && generate(logoSvg, '../public/img/gitea.svg', {size: 32}),
8379
]);
8480
}
8581

8682
main().then(exit).catch(exit);
87-

‎build/generate-svg.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1+
#!/usr/bin/env node
12
import fastGlob from 'fast-glob';
23
import {optimize} from 'svgo';
3-
import {resolve, parse, dirname} from 'path';
4-
import fs from 'fs';
4+
import {parse} from 'path';
5+
import {readFile, writeFile, mkdir} from 'fs/promises';
56
import {fileURLToPath} from 'url';
67

7-
const {readFile, writeFile, mkdir} = fs.promises;
8-
const __dirname = dirname(fileURLToPath(import.meta.url));
9-
const glob = (pattern) => fastGlob.sync(pattern, {cwd: resolve(__dirname), absolute: true});
10-
const outputDir = resolve(__dirname, '../public/img/svg');
8+
const glob = (pattern) => fastGlob.sync(pattern, {
9+
cwd: fileURLToPath(new URL('..', import.meta.url)),
10+
absolute: true,
11+
});
1112

1213
function exit(err) {
1314
if (err) console.error(err);
@@ -16,7 +17,6 @@ function exit(err) {
1617

1718
async function processFile(file, {prefix, fullName} = {}) {
1819
let name;
19-
2020
if (fullName) {
2121
name = fullName;
2222
} else {
@@ -35,7 +35,8 @@ async function processFile(file, {prefix, fullName} = {}) {
3535
{name: 'addAttributesToSVGElement', params: {attributes: [{'width': '16'}, {'height': '16'}, {'aria-hidden': 'true'}]}},
3636
],
3737
});
38-
await writeFile(resolve(outputDir, `${name}.svg`), data);
38+
39+
await writeFile(fileURLToPath(new URL(`../public/img/svg/${name}.svg`, import.meta.url)), data);
3940
}
4041

4142
function processFiles(pattern, opts) {
@@ -44,15 +45,14 @@ function processFiles(pattern, opts) {
4445

4546
async function main() {
4647
try {
47-
await mkdir(outputDir);
48+
await mkdir(fileURLToPath(new URL('../public/img/svg', import.meta.url)), {recursive: true});
4849
} catch {}
4950

5051
await Promise.all([
51-
...processFiles('../node_modules/@primer/octicons/build/svg/*-16.svg', {prefix: 'octicon'}),
52-
...processFiles('../web_src/svg/*.svg'),
53-
...processFiles('../public/img/gitea.svg', {fullName: 'gitea-gitea'}),
52+
...processFiles('node_modules/@primer/octicons/build/svg/*-16.svg', {prefix: 'octicon'}),
53+
...processFiles('web_src/svg/*.svg'),
54+
...processFiles('public/img/gitea.svg', {fullName: 'gitea-gitea'}),
5455
]);
5556
}
5657

5758
main().then(exit).catch(exit);
58-

‎public/img/favicon.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎webpack.config.js‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,17 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
66
import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
77
import VueLoader from 'vue-loader';
88
import EsBuildLoader from 'esbuild-loader';
9-
import {resolve, parse, dirname} from 'path';
9+
import {parse, dirname} from 'path';
1010
import webpack from 'webpack';
1111
import {fileURLToPath} from 'url';
1212

1313
const {VueLoaderPlugin} = VueLoader;
1414
const {ESBuildMinifyPlugin} = EsBuildLoader;
1515
const {SourceMapDevToolPlugin} = webpack;
16-
const __dirname = dirname(fileURLToPath(import.meta.url));
17-
const glob = (pattern) => fastGlob.sync(pattern, {cwd: __dirname, absolute: true});
16+
const glob = (pattern) => fastGlob.sync(pattern, {
17+
cwd: dirname(fileURLToPath(new URL(import.meta.url))),
18+
absolute: true,
19+
});
1820

1921
const themes = {};
2022
for (const path of glob('web_src/less/themes/*.less')) {
@@ -43,29 +45,29 @@ export default {
4345
mode: isProduction ? 'production' : 'development',
4446
entry: {
4547
index: [
46-
resolve(__dirname, 'web_src/js/jquery.js'),
47-
resolve(__dirname, 'web_src/fomantic/build/semantic.js'),
48-
resolve(__dirname, 'web_src/js/index.js'),
49-
resolve(__dirname, 'node_modules/easymde/dist/easymde.min.css'),
50-
resolve(__dirname, 'web_src/fomantic/build/semantic.css'),
51-
resolve(__dirname, 'web_src/less/misc.css'),
52-
resolve(__dirname, 'web_src/less/index.less'),
48+
fileURLToPath(new URL('web_src/js/jquery.js', import.meta.url)),
49+
fileURLToPath(new URL('web_src/fomantic/build/semantic.js', import.meta.url)),
50+
fileURLToPath(new URL('web_src/js/index.js', import.meta.url)),
51+
fileURLToPath(new URL('node_modules/easymde/dist/easymde.min.css', import.meta.url)),
52+
fileURLToPath(new URL('web_src/fomantic/build/semantic.css', import.meta.url)),
53+
fileURLToPath(new URL('web_src/less/misc.css', import.meta.url)),
54+
fileURLToPath(new URL('web_src/less/index.less', import.meta.url)),
5355
],
5456
swagger: [
55-
resolve(__dirname, 'web_src/js/standalone/swagger.js'),
56-
resolve(__dirname, 'web_src/less/standalone/swagger.less'),
57+
fileURLToPath(new URL('web_src/js/standalone/swagger.js', import.meta.url)),
58+
fileURLToPath(new URL('web_src/less/standalone/swagger.less', import.meta.url)),
5759
],
5860
serviceworker: [
59-
resolve(__dirname, 'web_src/js/serviceworker.js'),
61+
fileURLToPath(new URL('web_src/js/serviceworker.js', import.meta.url)),
6062
],
6163
'eventsource.sharedworker': [
62-
resolve(__dirname, 'web_src/js/features/eventsource.sharedworker.js'),
64+
fileURLToPath(new URL('web_src/js/features/eventsource.sharedworker.js', import.meta.url)),
6365
],
6466
...themes,
6567
},
6668
devtool: false,
6769
output: {
68-
path: resolve(__dirname, 'public'),
70+
path: fileURLToPath(new URL('public', import.meta.url)),
6971
filename: ({chunk}) => {
7072
// serviceworker can only manage assets below it's script's directory so
7173
// we have to put it in / instead of /js/
@@ -165,7 +167,7 @@ export default {
165167
},
166168
{
167169
test: /\.svg$/,
168-
include: resolve(__dirname, 'public/img/svg'),
170+
include: fileURLToPath(new URL('public/img/svg', import.meta.url)),
169171
type: 'asset/source',
170172
},
171173
{

0 commit comments

Comments
 (0)