Does the esbuild file loader support changing the file extension?

60 views Asked by At

I would like to dynamically generate a svg file using js/ts. In attempting to do this, I created a project plugin + favicon.svg.ts, which dynamically generates svg. The problem with using the file loader is it will generate the file with a .ts extension...but I want it to generate a file with the .svg extension. Does the file loader support this behavior with some configuration? If not, could I use a text loader & somehow add the generated file into the build from the plugin?

Here is the plugin using the file loader:

{
    name: 'esmsvg',
    setup(build) {
      build.onLoad(
        { filter: /\.svg\.(js|ts)$/ },
        async (config)=>{
          const { path, suffix } = config
          const contents = await import(path + (suffix ?? '')).then(mod=>mod.default())
          return { contents, loader: 'file' }
        }
      )
    },
  }

Here is favicon.svg.ts:

import { my_svg_component } from './my_svg_component.js'
export default ()=>my_svg_component({
  css: `
svg { stroke: black; }
@media (prefers-color-scheme: dark) {
  svg { stroke: white; }
}
  `.trim()
})

See https://github.com/evanw/esbuild/issues/3653

0

There are 0 answers