Q: Does the esbuild file loader support changing the file extension?

[btakita]

This is a Question. 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()
})

[evanw]

How about something like this?

const plugin = {
  name: 'esmsvg',
  setup(build) {
    build.onResolve(
      { filter: /\.svg\.(js|ts)$/ },
      async ({ path, ...args }) => {
        // Avoid recursion in resolve() below
        if (args.pluginData === 'esmsvg') return

        // Tell esbuild to resolve the path
        const result = await build.resolve(path, { ...args, pluginData: 'esmsvg' })
        if (result.errors.length > 0) return { errors: result.errors }

        return {
          path: result.path.slice(0, -3), // ".svg.js" => ".svg"
          pluginData: 'esmsvg:' + result.path, // Save the original path
        }
      }
    )

    build.onLoad(
      { filter: /\.svg$/ },
      async ({ pluginData }) => {
        // Load the original path
        if (!pluginData.startsWith('esmsvg:')) return
        const path = pluginData.slice('esmsvg:'.length)

        const contents = await import(path).then(mod => mod.default())
        return { contents, loader: 'file' }
      }
    )
  },
}

Use an onResolve callback to change the file extension, then use an onLoad callback to load it.

[btakita]

Thank you @evanw. It works. I ended up generalizing the plugin & released esbuild-plugin-esmfile.

I also released esbuild-plugin-esmcss.

[btakita]

Closing

See esbuild/community-plugins#181