Registry / devops / esbuild-plugin-webgl

esbuild-plugin-webgl

library0.0.3jsnpmunverified

ESBuild plugin for loading WebGL shaders from .glsl files (v0.0.3, unstable). Provides easy integration of GLSL shader imports into JavaScript/TypeScript projects using esbuild or tsup. Key differentiators: automatic shader compression for smaller bundles, TypeScript type declarations included, and support for both esbuild and tsup out of the box. Currently in early development with limited documentation and few releases. Not recommended for production use.

devops web-framework

npm install esbuild-plugin-webgl

github ↗package ↗

INSTALL

IMPORT

SIG · ESBUILD-PLUGIN-WEB

esbuild-plugin-webgl

devopsjavascriptv0.0.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

webglPlugin

✓ import { webglPlugin } from 'esbuild-plugin-webgl'

✗ import webglPlugin from 'esbuild-plugin-webgl'

Named export; default import does not exist. TypeScript types are included.

WebglPluginOptions

✓ import type { WebglPluginOptions } from 'esbuild-plugin-webgl'

Use import type for type-only imports. Options type is exported for configuration.

Shaders

✓ import vertexShader from './shaders/vertex.glsl'

✗ const vertexShader = require('./shaders/vertex.glsl')

GLSL files are imported as default string exports; CommonJS require will fail at runtime.

Shows basic esbuild configuration with webglPlugin and how to import/use GLSL shader files.

import { webglPlugin } from 'esbuild-plugin-webgl'; import { build } from 'esbuild'; await build({ entryPoints: ['src/index.ts'], bundle: true, outfile: 'dist/bundle.js', plugins: [webglPlugin()], }); // In src/index.ts: import vertexShader from './shaders/vertex.glsl'; import fragmentShader from './shaders/fragment.glsl'; const gl = document.createElement('canvas').getContext('webgl'); const vs = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vs, vertexShader); gl.compileShader(vs); const fs = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fs, fragmentShader); gl.compileShader(fs); const program = gl.createProgram(); gl.attachShader(program, vs); gl.attachShader(program, fs); gl.linkProgram(program);

Debug

Known issues

gotchaPlugin is in early development (v0.0.3). API may change without notice. Not production-ready.

fix

Pin exact version and test thoroughly before upgrading.

affects: >=0.0.0

gotchaGLSL files must use .glsl extension. Other extensions like .vert, .frag are not supported.

fix

Rename shader files to use .glsl extension.

affects: >=0.0.0

breakingImported shader strings are minified/compressed. Original formatting removed.

fix

Do not rely on shader source formatting; use separate source maps if needed.

affects: >=0.0.0

gotchaPlugin only works with esbuild and tsup. Not compatible with webpack, rollup, or parcel.

fix

Use with esbuild or tsup build tools. For other bundlers, look for alternative plugins.

affects: >=0.0.0

Errors

Common errors & fixes

Error: No loader is configured for ".glsl" files: src/shaders/vertex.glsl

Missing webglPlugin in esbuild plugins configuration.

fix

Add `plugins: [webglPlugin()]` to esbuild build options.

Cannot find module 'esbuild-plugin-webgl' or its corresponding type declarations.

Package not installed or missing type definitions.

fix

Run `npm install esbuild-plugin-webgl` or `yarn add esbuild-plugin-webgl`.

TypeError: webglPlugin is not a function

Incorrect import or missing call.

fix

Use `import { webglPlugin } from 'esbuild-plugin-webgl'` and call as `webglPlugin()`.

Upgrade

Version history

0.0.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/react18-tools/esbuild-plugin-webgl ↗

packagehttps://www.npmjs.com/package/esbuild-plugin-webgl ↗