Allow modules resolve to multiple loaders about esbuild HOT 2 CLOSED

const { readFile: read } = require('node:fs/promises');
const path = require('node:path');

const JS_IMPORTS = ['import-statement', 'require-call', 'dynamic-import', 'require-resolve'];

/** Converts `my-image.svg` to `MyImage` */
const filename = fn => {
    return `${fn.split('-').map(s => `${s[0].toUpperCase()}${s.substring(1)}`).join('')}`.replace(/\.svg$/, '').replace(/^(\d)/, '_$1');
};

/**
 * esbuild plugin that converts SVG files to import-able ES modules.
 * @param {{}} options
 * @returns {import('esbuild').Plugin}
 */
module.exports = (options = {}) => {
    return {
        name: 'svg-resolver',
        setup(build) {
            build.onResolve({ filter: /\.svg$/ }, async args => {
                if (args.namespace !== 'svg-component' && JS_IMPORTS.includes(args.kind))
                    return { path: path.join(process.cwd(), 'src', args.path), namespace: 'svg-component' };
                else if (!args.path.startsWith(path.join(process.cwd(), 'src')))
                    return { path: path.join(process.cwd(), 'src', args.path), namespace: 'file' };
                else
                    return { path: args.path, namespace: 'file' };
            });

            build.onLoad({ filter: /.*/, namespace: 'svg-component' }, async (args) => {
                const fn = args.path.split('\\').at(-1);

                const fname = `Svg${filename(fn)}`;
                const contents =
`import React from 'react';
import contents from ${JSON.stringify(args.path)};

function ${fname}(props) {
    return (
        <img src={contents} {...props} />
    );
}

export { ${fname} as ReactComponent };

export default contents;
`;

                return {
                    contents,
                    loader: 'jsx',
                    resolveDir: process.cwd()
                };
            });

            build.onLoad({ filter: /.*/, namespace: 'svg-file' }, async (args) => {
                const fn = args.path;
                const svg = await read(args.path, { encoding: 'utf8' });
                const sanitized = svg.match(/<svg[^]+?<\/svg>/)?.[0];

                if (!sanitized)
                    return { errors: [{ pluginName: 'svgr', location: args.path, text: `${fn} is not a valid svg.` }] };

                return { contents: sanitized, loader: 'file' };
            });
        }
    };
};