Skip to content

Commit 1b95aa5

Browse files
vrubezhnyvrubezhny
committed
[build] Fix incompatible 'esbuild-plugin-svgr' plugin when updating to esbuild v.0.25.0
Signed-off-by: Victor Rubezhny <[email protected]>
1 parent b3fe41f commit 1b95aa5

File tree

4 files changed

+118
-36
lines changed

4 files changed

+118
-36
lines changed

‎build/esbuild-watch.mjs‎

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55

66
/* eslint-disable no-console */
77

8+
import { transform } from '@svgr/core';
89
import { watch } from 'chokidar';
910
import * as esbuild from 'esbuild';
1011
import { sassPlugin } from 'esbuild-sass-plugin';
11-
import * as fs from 'node:fs/promises';
12-
import process from 'node:process';
1312
import * as cp from 'node:child_process';
14-
import svgr from 'esbuild-plugin-svgr';
13+
import { cp as copyFile, readdir, readFile } from 'node:fs/promises';
14+
import process from 'node:process';
1515

1616
// This script runs tsc and esbuild in parallel when there are filesystem changes.
1717
// It outputs predictable markers for the beginning and ending of the compilation,
@@ -24,10 +24,61 @@ import svgr from 'esbuild-plugin-svgr';
2424
// in order to reduce the number of times the build is run
2525
let timeout = undefined;
2626

27-
const webviews = (await fs.readdir('./src/webview', { withFileTypes: true }))
27+
const webviews = (await readdir('./src/webview', { withFileTypes: true }))
2828
.filter((dirent) => dirent.isDirectory() && !['@types', 'common', 'common-ext'].includes(dirent.name))
2929
.map((dirent) => dirent.name);
3030

31+
// The following 'svgrPlugin' const have been stolen from 'esbuild-plugin-scgr' due to lack of support of the latest 'esbuild' versions
32+
// by the plugin itself.
33+
// See: https://github.com/kazijawad/esbuild-plugin-svgr/issues/20
34+
//
35+
const svgrPlugin = (options = {
36+
markExternal: true
37+
}) => ({
38+
name: 'svgr',
39+
setup(build) {
40+
build.onResolve({ filter: /\.svg$/ }, async (args) => {
41+
switch (args.kind) {
42+
case 'import-statement':
43+
case 'require-call':
44+
case 'dynamic-import':
45+
case 'require-resolve':
46+
return
47+
default:
48+
if (options.markExternal) {
49+
return {
50+
external: true,
51+
}
52+
}
53+
}
54+
})
55+
56+
build.onLoad({ filter: /\.svg$/ }, async (args) => {
57+
const svg = await readFile(args.path, { encoding: 'utf8' })
58+
59+
if (options.plugins && !options.plugins.includes('@svgr/plugin-jsx')) {
60+
options.plugins.push('@svgr/plugin-jsx')
61+
} else if (!options.plugins) {
62+
options.plugins = ['@svgr/plugin-jsx']
63+
}
64+
65+
const contents = await transform(svg, { ...options }, { filePath: args.path })
66+
67+
if (args.suffix === '?url') {
68+
return {
69+
contents: args.path,
70+
loader: 'text',
71+
}
72+
}
73+
74+
return {
75+
contents,
76+
loader: options.typescript ? 'tsx' : 'jsx',
77+
}
78+
})
79+
},
80+
});
81+
3182
// build the esbuild contexts
3283
const esbuildContext = await esbuild.context({
3384
entryPoints: webviews.map(webview => `./src/webview/${webview}/app/index.tsx`),
@@ -42,9 +93,7 @@ const esbuildContext = await esbuild.context({
4293
},
4394
plugins: [
4495
sassPlugin(),
45-
svgr({
46-
plugins: ['@svgr/plugin-jsx'],
47-
}),
96+
svgrPlugin({ plugins: ['@svgr/plugin-jsx'] }),
4897
],
4998
});
5099

@@ -82,7 +131,7 @@ async function runBuildProcess() {
82131
promiseExec('npx tsc -p ./'),
83132
promiseExec('npx tsc -p ./src/webview -noEmit'),
84133
esbuildContext.rebuild(),
85-
...webviews.map((webview) => fs.cp(
134+
...webviews.map((webview) => copyFile(
86135
`./src/webview/${webview}/app/index.html`,
87136
`./out/${webview}/app/index.html`)),
88137
]);

‎build/esbuild.mjs‎

Lines changed: 59 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
* Licensed under the MIT License. See LICENSE file in the project root for license information.
44
*-----------------------------------------------------------------------------------------------*/
55

6+
import { transform } from '@svgr/core';
67
import * as esbuild from 'esbuild';
7-
import svgr from 'esbuild-plugin-svgr';
88
import { sassPlugin } from 'esbuild-sass-plugin';
9-
import * as fs from 'fs/promises';
109
import * as glob from 'glob';
1110
import { createRequire } from 'module';
11+
import { cp, mkdir, readFile, stat } from 'node:fs/promises';
1212
import * as path from 'path';
1313
import { fileURLToPath } from 'url';
1414

@@ -115,6 +115,57 @@ const nativeNodeModulesPlugin = {
115115
},
116116
};
117117

118+
// The following 'svgrPlugin' const have been stolen from 'esbuild-plugin-scgr' due to lack of support of the latest 'esbuild' versions
119+
// by the plugin itself.
120+
// See: https://github.com/kazijawad/esbuild-plugin-svgr/issues/20
121+
//
122+
const svgrPlugin = (options = {
123+
markExternal: true
124+
}) => ({
125+
name: 'svgr',
126+
setup(build) {
127+
build.onResolve({ filter: /\.svg$/ }, async (args) => {
128+
switch (args.kind) {
129+
case 'import-statement':
130+
case 'require-call':
131+
case 'dynamic-import':
132+
case 'require-resolve':
133+
return
134+
default:
135+
if (options.markExternal) {
136+
return {
137+
external: true,
138+
}
139+
}
140+
}
141+
})
142+
143+
build.onLoad({ filter: /\.svg$/ }, async (args) => {
144+
const svg = await readFile(args.path, { encoding: 'utf8' })
145+
146+
if (options.plugins && !options.plugins.includes('@svgr/plugin-jsx')) {
147+
options.plugins.push('@svgr/plugin-jsx')
148+
} else if (!options.plugins) {
149+
options.plugins = ['@svgr/plugin-jsx']
150+
}
151+
152+
const contents = await transform(svg, { ...options }, { filePath: args.path })
153+
154+
if (args.suffix === '?url') {
155+
return {
156+
contents: args.path,
157+
loader: 'text',
158+
}
159+
}
160+
161+
return {
162+
contents,
163+
loader: options.typescript ? 'tsx' : 'jsx',
164+
}
165+
})
166+
},
167+
});
168+
118169
const baseConfig = {
119170
bundle: true,
120171
target: 'chrome108',
@@ -149,9 +200,7 @@ if (production) {
149200
},
150201
plugins: [
151202
sassPlugin(),
152-
svgr({
153-
plugins: ['@svgr/plugin-jsx']
154-
}),
203+
svgrPlugin({ plugins: ['@svgr/plugin-jsx'] }),
155204
esbuildProblemMatcherPlugin // this one is to be added to the end of plugins array
156205
]
157206
};
@@ -168,9 +217,7 @@ if (production) {
168217
},
169218
plugins: [
170219
sassPlugin(),
171-
svgr({
172-
plugins: ['@svgr/plugin-jsx']
173-
}),
220+
svgrPlugin({ plugins: ['@svgr/plugin-jsx'] }),
174221
esbuildProblemMatcherPlugin // this one is to be added to the end of plugins array
175222
]
176223
};
@@ -179,7 +226,7 @@ if (production) {
179226

180227
async function dirExists(path) {
181228
try {
182-
if ((await fs.stat(path)).isDirectory()) {
229+
if ((await stat(path)).isDirectory()) {
183230
return true;
184231
}
185232
} catch {
@@ -193,10 +240,10 @@ await Promise.all([
193240
...webviews.map(async webview => {
194241
const targetDir = path.join(__dirname, `${outDir}/${webview}/app`);
195242
if (!dirExists(targetDir)) {
196-
await fs.mkdir(targetDir, { recursive: true, mode: 0o750} );
243+
await mkdir(targetDir, { recursive: true, mode: 0o750} );
197244
}
198245
glob.sync([ `${srcDir}/webview/${webview}/app/index.html` ]).map(async srcFile => {
199-
await fs.cp(path.join(__dirname, srcFile), path.join(targetDir, `${path.basename(srcFile)}`))
246+
await cp(path.join(__dirname, srcFile), path.join(targetDir, `${path.basename(srcFile)}`))
200247
});
201248
})
202-
]);
249+
]);

‎package-lock.json‎

Lines changed: 1 addition & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
"@rjsf/utils": "^5.24.3",
9292
"@rjsf/validator-ajv8": "^5.24.3",
9393
"@segment/analytics-next": "^1.77.0",
94+
"@svgr/core": "^8.1.0",
9495
"@svgr/plugin-jsx": "^8.1.0",
9596
"@types/chai": "^4.3.20",
9697
"@types/dockerode": "^3.3.34",
@@ -130,7 +131,6 @@
130131
"dpdm": "^3.14.0",
131132
"esbuild": "^0.25.0",
132133
"esbuild-node-externals": "^1.18.0",
133-
"esbuild-plugin-svgr": "^3.1.0",
134134
"esbuild-sass-plugin": "^3.3.1",
135135
"eslint": "^9.20.1",
136136
"eslint-config-prettier": "^10.0.1",

0 commit comments

Comments
 (0)