esbuild-plugin-glslify-inline

1.1.0 verified Fri May 01 auth: no javascript

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.

Common errors

error Error: Cannot find module 'glslify' ↓

cause glslify peer dependency is not installed.

fix

npm install --save-dev glslify

error TypeError: glslifyInline is not a function ↓

cause Incorrect import: using default import instead of named import.

fix

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

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

cause 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´...´

Warnings

breaking Requires 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

gotcha The 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'.

gotcha glslify 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.

deprecated The `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

Install

npm install esbuild-plugin-glslify-inline

yarn add esbuild-plugin-glslify-inline

pnpm add esbuild-plugin-glslify-inline

Imports

glslifyInline
wrong
```
const glslifyInline = require('esbuild-plugin-glslify-inline')
```
correct
```
import { glslifyInline } from '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

wrong

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

correct

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

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

type import

wrong

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

correct

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

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

Quickstart

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)