From a34cd1a5414eec5a059c5f20a3940bf4ef6b977e Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Tue, 28 May 2024 14:41:33 -0700
Subject: Tried importing svgs in an esbuild plugin
---
esbuild-server.mjs | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 file changed, 75 insertions(+), 2 deletions(-)
diff --git a/esbuild-server.mjs b/esbuild-server.mjs
index 72ab68b..3d9b0ca 100644
--- a/esbuild-server.mjs
+++ b/esbuild-server.mjs
@@ -13,11 +13,79 @@ const colors = {
yellow: '\x1b[33m',
}
-const regex = new RegExp('mapsheets\..+\.svg');
+let version;
+
+const importSvg = {
+ name: 'importSvg',
+ setup(build) {
+ const regex = new RegExp(/\.svg$/);
+
+ build.onResolve({ filter: /\*\.svg$/ }, args => {
+ console.log('onresolve', args);
+
+ return {
+ path: path.join('public', 'assets', args.path),
+ namespace: 'svg-stub'
+ }
+ });
+
+ build.onLoad({ filter: /\.svg$/, namespace: 'svg-stub' }, async (args) => {
+ console.log('onload', args);
+
+ const svgs = fs.readdirSync(path.resolve(path.dirname(args.path))).filter(fn => regex.test(fn));;
+
+ console.log(svgs);
+
+ console.log('resolved path', path.join(path.dirname(args.path), 'mapsheets.svg'));
+ console.log('cwd', process.cwd());
+
+ // const contents = `import mapsheets from ./${path.join(path.dirname(args.path), 'mapsheets.svg')};
+ // console.log('mapsheets', mapsheets);
+ // export default mapsheets;`;
+
+ // const contents = `
+ // import svg from '/usr/src/app/public/assets/images/scenario-side_show.svg';
+ // export default svg;
+ // `;
+
+ // const contents = `
+ // import svg from '/usr/src/app/public/assets/images/scenario-side_show.svg';
+ // export default svg;
+ // `;
+
+ // const contents = `
+ // export { default as scenario_sideShow } from '/usr/src/app/public/assets/images/scenario-side_show.svg';
+ // export { default as mapsheets } from '/usr/src/app/public/assets/images/mapsheets.svg';
+ // `;
+
+ const contents = `
+ // export { default as countorLines } from './contour-lines.svg';
+ export { default as mapsheets } from './mapsheets.svg';
+ `;
+
+ console.log('resolveDir', path.dirname(args.path));
+ console.log('contents', contents);
+
+ return {
+ contents: contents,
+ resolveDir: path.dirname(args.path) //'./public/assets/images'
+ }
+ });
+
+ // build.onLoad({ filter: /.*/, namespace: 'svg-stub' }, async (args) => ({
+ // contents: `import svg from ${JSON.stringify(args.path)}
+ // export default (imports) =>
+ // WebAssembly.instantiate(wasm, imports).then(
+ // result => result.instance.exports)`,
+ // }));
+ }
+};
const svgUseCacheBust = {
name: 'svgUseCacheBust',
setup(build) {
+ const regex = new RegExp('mapsheets\..+\.svg');
+
build.onStart(() => {
console.log("BUILD START");
@@ -38,7 +106,10 @@ const ctx = await esbuild.context({
entryPoints: ['src/*.js'],
bundle: true,
outdir: 'build',
- plugins: [svgUseCacheBust],
+ plugins: [svgUseCacheBust, importSvg],
+ loader: {
+ '.svg': 'file'
+ },
});
await ctx.watch();
@@ -92,6 +163,8 @@ http.createServer((req, res) => {
path.join(dir, url.pathname === '/' ? 'index.html' : url.pathname)
);
+ console.log('filepath', filePath);
+
for (const k in res.headers) {
res.setHeader(k, res.headers[k]);
}
--
cgit v1.2.3