@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));
```

Here's an example of importing and using shaders 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 `*.d.ts` file in your project. You can name it `env.d.ts` or something similar, and include the following line to ensure TypeScript can find the plugin's type declarations:

```ts
/// <reference types="@pizca/esbuild-webgl/types" />
```

## What it does

* Read `.vert`, `.frag`, and `.glsl` files as plain text and export them as strings at build time.
* Allow importing shaders directly in your code without manual loading or fetching.
* Simplify development with WebGL by keeping shaders separate and clean.

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