A way to load .wglsl files in Typescript files using esbuild?

Question

I'm using esbuild as a tool to bundle my Typescript code but i can't find a way to configure a loader for ".wgsl" files.

Mi app.ts file :

import shader from './shader.wgsl';
//webgpu logic

My shader.d.ts :

declare module '*.wgsl'{
  const value: string;
  export default value;
}

My esbuild file (as you can see i can't use ts-shader-loader):

import { build } from "esbuild";
import * as ShaderLoader from "ts-shader-loader";

build({
    entryPoints: ['./src/app.ts'],
    bundle: true,
    sourcemap : true,
    target : 'es2015',
    format:'esm',
    minify : true,
    outfile: './dist/js/app.js',
    tsconfig: './tsconfig.json'
    plugins: [ShaderLoader]
}).catch(() => process.exit(1));

Answer 1

I had to contribute to esbuild-plugin-glsl to allow other users to load a .wgsl file. Here's my esbuild file. Use the version 1.1.0^

import { build } from "esbuild";
import { glsl } from "esbuild-plugin-glsl";

build({
    entryPoints: ['./src/app.ts'],
    bundle: true,
    sourcemap : true,
    target : 'es2015',
    format:'esm',
    minify : true,
    outfile: './dist/js/app.js',
    tsconfig: './tsconfig.json',
    plugins: [
        glsl({
            minify: true,
        })
    ]
  }).catch(() => process.exit(1));

the d.ts file should have this :

declare module '*.wgsl'{
    const value: string;
    export default value;
}

the way to import a shader is :

//This file has the Fragment and Vertex Shader Code.
import shader from './shader.wgsl';