Registry / devops / esbuild-plugin-glslify-inline

esbuild-plugin-glslify-inline

library1.1.0jsnpmunverified

An esbuild plugin that transforms inline GLSL template literals tagged with `glsl` from glslify into resolved shader code at build time. Version 1.1.0 is the current stable release with an optional minify flag. It integrates esbuild's bundling pipeline, applying glslify to inline shader strings so you can use `#pragma glslify: require(...)` inside JavaScript/TypeScript source files. Unlike separate file processing, this plugin keeps shaders co-located with code. Requires glslify as a peer dependency and node >= 12. Actively maintained.

devops web-framework

npm install esbuild-plugin-glslify-inline

github ↗package ↗

INSTALL

IMPORT

SIG · ESBUILD-PLUGIN-GLS

esbuild-plugin-glslify-inline

devopsjavascriptv1.1.0

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.

glslifyInline

✓ import { glslifyInline } from 'esbuild-plugin-glslify-inline'

✗ const glslifyInline = require('esbuild-plugin-glslify-inline')

The package exports a named function. CommonJS require works but TypeScript types may not resolve correctly in some setups.

default import

✓ import { glslifyInline } from 'esbuild-plugin-glslify-inline'

✗ import glslifyInline from 'esbuild-plugin-glslify-inline'

There is no default export; only named export 'glslifyInline' exists.

type import

✓ import type { GlslifyInlineOptions } from 'esbuild-plugin-glslify-inline'

✗ import { GlslifyInlineOptions } from 'esbuild-plugin-glslify-inline'

Options interface is exported as a type for TypeScript users. Use `import type` to avoid runtime errors.

Shows how to configure esbuild with the plugin and use glslify to inline a GLSL shader that imports a noise function from npm package.

// build.mjs import { build } from 'esbuild' import { glslifyInline } from 'esbuild-plugin-glslify-inline' await build({ entryPoints: ['src/index.js'], outfile: 'dist/bundle.js', bundle: true, plugins: [glslifyInline()], format: 'esm', }) // src/index.js import glsl from 'glslify' const shader = glsl` #pragma glslify: noise = require(glsl-noise/simplex/3d) uniform float time; void main() { float n = noise(vec3(uv, time)); gl_FragColor = vec4(n, 0.0, 0.0, 1.0); } ` console.log(shader)

Debug

Known issues

breakingRequires peer dependency glslify installed. Missing glslify causes 'Cannot find module' error at build time.

fix

Install glslify as a dev dependency: npm install --save-dev glslify

affects: >=1.0

gotchaThe plugin only transforms tagged template literals with the `glsl` tag. Other methods of inlining GLSL (like raw strings) are not processed.

fix

Ensure all inline shader code is inside glsl`...` tagged templates imported from 'glslify'.

affects: >=1.0

gotchaglslify will only resolve `#pragma glslify: require(...)` calls. Plain `#include` or custom pragmas are ignored.

fix

Use the documented `#pragma glslify: require(...)` syntax for importing GLSL modules.

affects: >=1.0

deprecatedThe `minify` option is new in v1.1.0; earlier versions do not support it. Using `minify` with v1.0.0 will silently fail or cause build errors.

fix

Upgrade to v1.1.0 to use the minify option: npm install esbuild-plugin-glslify-inline@latest

affects: <=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'glslify'

glslify peer dependency is not installed.

fix

npm install --save-dev glslify

TypeError: glslifyInline is not a function

Incorrect import: using default import instead of named import.

fix

Use `import { glslifyInline } from 'esbuild-plugin-glslify-inline'`

Error: No loader is configured for ".glsl" files

Trying to import a .glsl file instead of using inline tagged templates. The plugin does not handle file imports.

fix

Use glsl tag: `import glsl from 'glslify'; const shader = glsl´...´`

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

glslifyrequiredpeer dependency for processing GLSL imports and transforms

glslify-bundlerequiredused internally to bundle shader dependency graphs

glslify-depsrequiredused internally to resolve local and package-based GLSL dependencies

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/marcofugaro/esbuild-plugin-glslify-inline ↗

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