@pizca/esbuild-webgl/README.md

An esbuild plugin to import WebGL shader files as strings, with optional comment stripping for cleaner bundles.

# @pizca/esbuild-webgl

An esbuild plugin that imports shader files (`.vert`, `.frag`, `.glsl`) as strings, ready to use with WebGL.

## Installation

```bash
npm i -D @pizca/esbuild-webgl
```

## Usage

Import the plugin and add it to your esbuild build configuration:

```js
import esbuild from 'esbuild';
import webglPlugin from '@pizca/esbuild-webgl';

esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outdir: 'dist',
  plugins: [
    webglPlugin({
      stripComments: true // Removes comments
    })
  ],
}).catch(() => process.exit(1));
```

Example in a TypeScript file:

```ts
import vertexShader from './shaders/basic.vert';
import fragmentShader from './shaders/basic.frag';

const program = createProgram(gl, vertexShader, fragmentShader);
```

To avoid TypeScript type errors, create a `shader.d.ts` file or another file with a `.d.ts` extension in your root directory (`src/`) with the following declarations:

```ts
declare module '*.glsl' {
  const content: string;
  export default content;
}

declare module '*.vert' {
  const content: string;
  export default content;
}

declare module '*.frag' {
  const content: string;
  export default content;
}
```

## What it does

* Reads `.vert`, `.frag`, and `.glsl` files as plain text and exports them as strings at build time.
* Allows you to import shaders directly in your code without manual loading or fetching.
* Simplifies development with WebGL by keeping shaders separate and clean.

This plugin lets you integrate shaders easily and directly into your esbuild workflow.