babel-plugin-inline-webgl-constants

1.0.3 verified Sat Apr 25 auth: no javascript

A Babel plugin that replaces long WebGL constants (e.g., gl.TEXTURE_2D) with their corresponding numeric values at build time. Version 1.0.3 is stable, used primarily within the luma.gl ecosystem. It reduces bundle size and avoids runtime lookups, particularly useful for WebGL applications deployed in production. The plugin is lightweight, with no additional runtime dependencies, and integrates seamlessly into existing Babel configurations. It is differentiated by its specific focus on WebGL constants, whereas general constant inlining plugins are broader.

Common errors

error Error: Module 'babel-plugin-inline-webgl-constants' not found ↓

cause Plugin not installed as a dev dependency.

fix

Run: npm install --save-dev babel-plugin-inline-webgl-constants

error Cannot read property 'TEXTURE_2D' of undefined ↓

cause WebGL context not initialized correctly or plugin inlined constant incorrectly.

fix

Ensure gl context is properly created and the plugin is configured correctly; check for dynamic access patterns.

error Unexpected token: expected ( after argument list (preval) ↓

cause Babel configuration conflict with other plugins (e.g., preval).

fix

Reorder plugins in .babelrc so that inline-webgl-constants runs before other transformations.

Warnings

breaking Plugin may break if constants are accessed dynamically (e.g., via gl['TEXTURE_2D']) ↓

fix Use direct property access (gl.TEXTURE_2D) in source code.

deprecated This plugin is primarily maintained for luma.gl v8 and below; newer projects may benefit from tree-shaking or other minification techniques. ↓

fix Consider using a general purpose constant inliner or rely on bundler optimization.

gotcha Plugin does not handle constants from extensions like 'gl.getExtension('OES_texture_float')'. ↓

fix Manually inline or reference numeric values for extension constants.

breaking Only works with Babel 7; Babel 6 users must upgrade or use alternative. ↓

fix Upgrade to Babel 7 or use a different version of the plugin if available.

gotcha Plugin may produce incorrect output if WebGL context is not named 'gl'. ↓

fix Rename WebGL context variable to 'gl' or adjust plugin configuration (if supported).

Install

npm install babel-plugin-inline-webgl-constants

yarn add babel-plugin-inline-webgl-constants

pnpm add babel-plugin-inline-webgl-constants

Imports

default

wrong

const inlineWebglConstants = require('babel-plugin-inline-webgl-constants');

correct

import inlineWebglConstants from 'babel-plugin-inline-webgl-constants';

Default export; required as a Babel plugin string in .babelrc or babel.config.js.

INLINE_WEBGL_CONSTANTS
```
import { INLINE_WEBGL_CONSTANTS } from 'babel-plugin-inline-webgl-constants';
```
Named export for the plugin function, available since v1.0.0.

WebGLConstants

wrong

import WebGLConstants from 'babel-plugin-inline-webgl-constants';

correct

import { WebGLConstants } from 'babel-plugin-inline-webgl-constants';

Named export for mapping object; TypeScript types include this interface.

Quickstart

Shows configuring the plugin in babel.config.js and the transformation of a WebGL constant to its numeric value.

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-inline-webgl-constants', {
      // Optional: exclude specific constants from inlining
      exclude: ['gl.TEXTURE_CUBE_MAP']
    }]
  ]
};

// Input source.js
gl.bindTexture(gl.TEXTURE_2D, texture);
// Output after Babel
gl.bindTexture(3553, texture);