@luma.gl/webgl 9.0.0-alpha.16 → 9.0.0-alpha.19

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.0.0-alpha.16",
+  "version": "9.0.0-alpha.19",
   "description": "WebGL2 adapter for the luma.gl API",
+  "type": "module",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,11 +18,19 @@
     "3d"
   ],
   "types": "dist/index.d.ts",
-  "main": "dist/es5/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "files": [
     "src",
     "dist",
+    "dist.min.js",
     "README.md"
   ],
   "sideEffects": false,
@@ -30,14 +39,14 @@
     "gl/wrap": false
   },
   "scripts": {
-    "pre-build": "npm run build-bundle",
-    "build-bundle": "webpack --display=minimal --config ../../scripts/bundle.config.js"
+    "build-bundle": "ocular-bundle ./src/index.ts",
+    "pre-build": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/api": "9.0.0-alpha.16",
-    "@luma.gl/constants": "9.0.0-alpha.16",
-    "@probe.gl/env": "^4.0.0"
+    "@luma.gl/api": "9.0.0-alpha.19",
+    "@luma.gl/constants": "9.0.0-alpha.19",
+    "@probe.gl/env": "^4.0.2"
   },
-  "gitHead": "697bc4ef1deff8438e2f3be51bf0bd245882106a"
+  "gitHead": "d57e5fd81825ae4c7c23040ba63f54ad4ea7e972"
 }

package/src/adapter/converters/device-parameters.ts

@@ -5,6 +5,8 @@ import {pushContextState, popContextState} from '../../context/state-tracker/tra
 import {setParameters} from '../../context/parameters/unified-parameter-api';
 import WebGLDevice from '../webgl-device';
 
+/* eslint-disable no-unused-expressions */ // For expression ? gl.enable() : gl.disable()
+
 /**
  * Execute a function with a set of temporary WebGL parameter overrides
  * - Saves current "global" WebGL context settings
@@ -14,7 +16,7 @@ import WebGLDevice from '../webgl-device';
  * - Returns the return value of the supplied function
  * @deprecated use withDeviceParameters instead
  */
- export function withGLParameters<T = unknown>(device: Device, parameters: GLParameters, func: (device?: Device) => T): T {
+export function withGLParameters<T = unknown>(device: Device, parameters: GLParameters, func: (device?: Device) => T): T {
   if (isObjectEmpty(parameters)) {
     // Avoid setting state if no parameters provided. Just call and return
     return func(device);
@@ -102,7 +104,8 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
     gl.depthMask(mapBoolean('depthWriteEnabled', parameters.depthWriteEnabled));
   }
 
- if (parameters.depthCompare) {
+  if (parameters.depthCompare) {
+
     parameters.depthCompare !== 'always' ? gl.enable(GL.DEPTH_TEST) : gl.disable(GL.DEPTH_TEST);
     gl.depthFunc(convertCompareFunction('depthCompare', parameters.depthCompare));
   }

package/src/adapter/converters/sampler-parameters.ts

@@ -4,6 +4,8 @@ import GL from '@luma.gl/constants';
 import {GLSamplerParameters} from '../../types/webgl';
 import {convertCompareFunction, convertToCompareFunction} from './device-parameters';
 
+/* eslint-disable consistent-return */
+
 /**
  * Convert WebGPU-style sampler props to WebGL
  * @param props
@@ -38,7 +40,7 @@ export function convertSamplerParametersToWebGL(props: SamplerParameters): GLSam
     params[GL.TEXTURE_COMPARE_MODE] = GL.COMPARE_REF_TO_TEXTURE;
   }
   if (props.compare) {
-      params[GL.TEXTURE_COMPARE_FUNC] = convertCompareFunction('compare', props.compare);
+    params[GL.TEXTURE_COMPARE_FUNC] = convertCompareFunction('compare', props.compare);
   }
   // Note depends on WebGL extension
   if (props.maxAnisotropy) {
@@ -84,7 +86,7 @@ function convertMinFilterMode(minFilter: 'nearest' | 'linear', mipmapFilter?: 'n
  * @param props
  * @returns
  */
- export function convertToSamplerParameters(params: GLSamplerParameters): SamplerParameters {
+export function convertToSamplerParameters(params: GLSamplerParameters): SamplerParameters {
   const props: SamplerParameters = {};
   if (params[GL.TEXTURE_WRAP_S]) {
     props.addressModeU = convertToAddressMode(params[GL.TEXTURE_WRAP_S]);

package/src/adapter/converters/texture-formats.ts

@@ -3,6 +3,8 @@ import {decodeTextureFormat} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
 import {isWebGL2} from '../../context/context/webgl-checks';
 
+/* eslint-disable camelcase */
+
 // TEXTURE FEATURES
 
 // Define local device feature strings to optimize minification
@@ -240,7 +242,7 @@ export const TEXTURE_FORMATS: Record<TextureFormat, Format> = {
   // "depth24unorm-stencil8" feature
   'depth24unorm-stencil8': {gl: GL.DEPTH24_STENCIL8, b: 4, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT},
   // "depth32float-stencil8" feature
-  "depth32float-stencil8": {gl: GL.DEPTH32F_STENCIL8, b: 5, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT},
+  'depth32float-stencil8': {gl: GL.DEPTH32F_STENCIL8, b: 5, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT},
 
   // BC compressed formats: check device.features.has("texture-compression-bc");
 

package/src/adapter/device-helpers/get-device-info.ts

@@ -28,24 +28,24 @@ export function getDeviceInfo(gl: WebGLRenderingContext): DeviceInfo {
 }
 
 function identifyGPUVendor(vendor: string, renderer: string): 'nvidia' | 'intel' | 'apple' | 'amd' | 'software' | 'unknown' {
-  if (vendor.match(/NVIDIA/i) || renderer.match(/NVIDIA/i)) {
+  if ((/NVIDIA/i.exec(vendor)) || (/NVIDIA/i.exec(renderer))) {
     return 'nvidia';
   }
-  if (vendor.match(/INTEL/i) || renderer.match(/INTEL/i)) {
+  if ((/INTEL/i.exec(vendor)) || (/INTEL/i.exec(renderer))) {
     return 'intel';
   }
-  if (vendor.match(/Apple/i) || renderer.match(/Apple/i)) {
+  if ((/Apple/i.exec(vendor)) || (/Apple/i.exec(renderer))) {
     return 'apple';
   }
   if (
-    vendor.match(/AMD/i) ||
-    renderer.match(/AMD/i) ||
-    vendor.match(/ATI/i) ||
-    renderer.match(/ATI/i)
+    (/AMD/i.exec(vendor)) ||
+    (/AMD/i.exec(renderer)) ||
+    (/ATI/i.exec(vendor)) ||
+    (/ATI/i.exec(renderer))
   ) {
     return 'amd';
   }
-  if (vendor.match(/SwiftShader/i) || renderer.match(/SwiftShader/i)) {
+  if ((/SwiftShader/i.exec(vendor)) || (/SwiftShader/i.exec(renderer))) {
     return 'software';
   }
   

package/src/adapter/helpers/get-shader-info.ts

@@ -19,7 +19,7 @@ export function getShaderInfo(source: string, defaultName?: string): ShaderInfo
 /** Extracts GLSLIFY style naming of shaders: `#define SHADER_NAME ...` */
 function getShaderName(shader: string, defaultName: string = 'unnamed'): string {
   const SHADER_NAME_REGEXP = /#define[\s*]SHADER_NAME[\s*]([A-Za-z0-9_-]+)[\s*]/;
-  const match = shader.match(SHADER_NAME_REGEXP);
+  const match = SHADER_NAME_REGEXP.exec(shader);
   return match ? match[1] : defaultName;
 }
 

package/src/adapter/helpers/get-shader-layout.ts

@@ -137,7 +137,7 @@ function readAttributeBindings(
     // Add only user provided attributes, for built-in attributes like
     // `gl_InstanceID` locaiton will be < 0
     if (location >= 0) {
-      const {glType, components} = decodeAttributeType(compositeType);;
+      const {glType, components} = decodeAttributeType(compositeType);
       const accessor: AccessorObject = {type: glType, size: size * components};
       // Any attribute name containing the word "instance" will be assumed to be instanced
       if (/instance/i.test(name)) {
@@ -172,7 +172,7 @@ function readVaryings(gl: WebGLRenderingContext, program: WebGLProgram): Varying
       throw new Error('activeInfo');
     }
     const {name, type: compositeType, size} = activeInfo;
-    const {glType, components} = decodeUniformType(compositeType);;
+    const {glType, components} = decodeUniformType(compositeType);
     const accessor = new Accessor({type: glType, size: size * components});
     const varying = {location, name, accessor}; // Base values
     varyings.push(varying);
@@ -333,7 +333,7 @@ type SamplerInfo =   | {
 };
 
 function getSamplerInfo(type: GL): SamplerInfo {
-  let sampler = SAMPLER_UNIFORMS_GL_TO_GPU[type];
+  const sampler = SAMPLER_UNIFORMS_GL_TO_GPU[type];
   if (!sampler) {
     throw new Error('sampler');
   }
@@ -355,7 +355,7 @@ function parseUniformName(name: string): {name: string; length: number; isArray:
 
   // if array name then clean the array brackets
   const UNIFORM_NAME_REGEXP = /([^[]*)(\[[0-9]+\])?/;
-  const matches = name.match(UNIFORM_NAME_REGEXP);
+  const matches = UNIFORM_NAME_REGEXP.exec(name);
   if (!matches || matches.length < 2) {
     throw new Error(`Failed to parse GLSL uniform name ${name}`);
   }

package/src/adapter/helpers/parse-shader-compiler-log.ts

@@ -16,7 +16,7 @@ export function parseShaderCompilerLog(errLog: string) : readonly CompilerMessag
 
   for (const line of lines) {
     if (line.length <= 1) {
-      continue;
+      continue; // eslint-disable-line no-continue
     }
 
     const segments: string[] = line.split(':');

package/src/adapter/helpers/set-uniform.ts

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 // Uniforms
 import GL from '@luma.gl/constants';
 

package/src/adapter/objects/webgl-renderbuffer.ts

@@ -35,7 +35,7 @@ const DEFAULT_RENDERBUFFER_PROPS: Required<RenderbufferProps> = {
  * Renderbuffer objects also natively accommodate Multisampling (MSAA).
  */
 export default class WEBGLRenderbuffer extends WebGLResource<RenderbufferProps> {
- override get [Symbol.toStringTag](): string { return 'Renderbuffer'; }
+  override get [Symbol.toStringTag](): string { return 'Renderbuffer'; }
 
   get width(): number { return this.props.width; }
   get height(): number { return this.props.height; }

package/src/adapter/objects/webgl-resource.ts

@@ -13,7 +13,7 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
 /**
  * Base class for WebGL object wrappers
  */
- export default abstract class WebGLResource<Props extends ResourceProps> extends Resource<Props> {
+export default abstract class WebGLResource<Props extends ResourceProps> extends Resource<Props> {
   readonly device: WebGLDevice;
   readonly gl: WebGLRenderingContext;
   readonly gl2: WebGL2RenderingContext;

package/src/adapter/objects/webgl-vertex-array-object.ts

@@ -17,7 +17,7 @@ export type VertexArrayObjectProps = ResourceProps & {
 
 /** VertexArrayObject wrapper */
 export default class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps> {
- override get [Symbol.toStringTag](): string {
+  override get [Symbol.toStringTag](): string {
     return 'BaseVertexArrayObject';
   }
 

package/src/adapter/resources/webgl-buffer.ts

@@ -21,6 +21,7 @@ export default class WEBGLBuffer extends Buffer {
 
   // accessor: {};
 
+  
   constructor(device: WebGLDevice, props: BufferProps = {}) {
     super(device, props);
 
@@ -28,10 +29,9 @@ export default class WEBGLBuffer extends Buffer {
     this.gl = this.device.gl;
     this.gl2 = this.device.gl2;
 
-    const handle = typeof props === 'object' ? (props as BufferProps).handle : undefined;
+    const handle = typeof props === 'object' ? (props ).handle : undefined;
     this.handle = handle || this.gl.createBuffer();
-    // @ts-expect-error Add metadata for spector
-    this.handle.__SPECTOR_Metadata = {...this.props, data: typeof this.props.data}; // {name: this.props.id};
+    device.setSpectorMetadata(this.handle, {...this.props, data: typeof this.props.data});
 
     // In WebGL1, need to make sure we use GL.ELEMENT_ARRAY_BUFFER when initializing element buffers
     // otherwise buffer type will lock to generic (non-element) buffer
@@ -55,7 +55,7 @@ export default class WEBGLBuffer extends Buffer {
     // Object.seal(this);
   }
 
-   // PRIVATE METHODS
+  // PRIVATE METHODS
 
   // Allocate a new buffer and initialize to contents of typed array
   _initWithData(data, byteOffset: number = 0, byteLength: number = data.byteLength + byteOffset): this {
@@ -124,7 +124,7 @@ export default class WEBGLBuffer extends Buffer {
       this.device.assertWebGL2();
 
       // @ts-expect-error
-      this.gl.bufferSubData(this.target, offset, data, srcOffset, byteLength);
+      this.gl.bufferSubData(this.target, byteOffset, data, srcOffset, byteLength);
     } else {
       this.gl.bufferSubData(target, byteOffset, data);
     }
@@ -168,7 +168,7 @@ export default class WEBGLBuffer extends Buffer {
 
   _getReadTarget() {
     return this.target;
-    return this.device.isWebGL2 ? GL.COPY_READ_BUFFER : this.target;
+    // return this.device.isWebGL2 ? GL.COPY_READ_BUFFER : this.target;
   }
 }
 

package/src/adapter/resources/webgl-command-encoder.ts

@@ -55,4 +55,4 @@ export default class WEBGLCommandEncoder extends CommandEncoder {
   //   destination: Buffer,
   //   destinationOffset?: number;
   // }): void;
-};
+}

package/src/adapter/resources/webgl-framebuffer.ts

@@ -29,8 +29,7 @@ export default class WEBGLFramebuffer extends Framebuffer {
     this.handle = this.props.handle !== undefined ? this.props.handle : this.gl.createFramebuffer();
 
     if (this.handle) { // default framebuffer is null...
-      // @ts-expect-error Per SPECTOR docs
-      this.handle.__SPECTOR_Metadata = {id: this.props.id, props: this.props};
+      device.setSpectorMetadata(this.handle, {id: this.props.id, props: this.props});
     }
 
     this.colorAttachments = this._createColorAttachments();
@@ -131,7 +130,7 @@ export default class WEBGLFramebuffer extends Framebuffer {
       //   [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
       //   [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
       // }
-    }) as WebGLTexture;
+    }) ;
     this._ownResources.push(texture);
     return texture;
   }
@@ -220,7 +219,7 @@ export default class WEBGLFramebuffer extends Framebuffer {
    * @param layer = 0 - index into WebGLTextureArray and Texture3D or face for `TextureCubeMap`
    * @param level  = 0 - mipmapLevel (must be 0 in WebGL1)
    */
-   protected _attachTexture(attachment: GL, texture: WebGLTexture, layer: number, level: number): void {
+  protected _attachTexture(attachment: GL, texture: WebGLTexture, layer: number, level: number): void {
     const {gl, gl2} = this.device;
     gl.bindTexture(texture.target, texture.handle);
 

package/src/adapter/resources/webgl-render-pipeline.ts

@@ -49,8 +49,7 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     super(device, props);
     this.device = device;
     this.handle = this.props.handle || this.device.gl.createProgram();
-    // @ts-expect-error
-    this.handle.__SPECTOR_Metadata = {id: this.props.id};
+    this.device.setSpectorMetadata(this.handle, {id: this.props.id});
 
     // Create shaders if needed
     this.vs = cast<WEBGLShader>(props.vs);
@@ -94,7 +93,7 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
       const attribute = getAttributeLayout(this.layout, name);
       if (!attribute) {
         log.warn(`Ignoring buffer supplied for unknown attribute "${name}" in pipeline "${this.id}" (buffer "${buffer.id}")`)();
-        continue;
+        continue; // eslint-disable-line no-continue
       }
       const decoded = decodeVertexFormat(attribute.format);
       const {type: typeString, components: size, byteLength: stride, normalized, integer} = decoded;
@@ -122,7 +121,7 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
       const binding = this.layout.bindings.find((binding) => binding.name === name);
       if (!binding) {
         log.warn(`Unknown binding ${name} in render pipeline ${this.id}`)();
-        continue;
+        continue; // eslint-disable-line no-continue
       }
       if (!value) {
         log.warn(`Unsetting binding ${name} in render pipeline ${this.id}`)();
@@ -371,14 +370,14 @@ function getDrawMode(
 ): GL.POINTS | GL.LINES | GL.LINE_STRIP | GL.LINE_LOOP | GL.TRIANGLES | GL.TRIANGLE_STRIP | GL.TRIANGLE_FAN {
   // prettier-ignore
   switch (topology) {
-  case 'point-list': return GL.POINTS;
-  case 'line-list': return GL.LINES;
-  case 'line-strip': return GL.LINE_STRIP;
-  case 'line-loop': return GL.LINE_LOOP;
-  case 'triangle-list': return GL.TRIANGLES;
-  case 'triangle-strip': return GL.TRIANGLE_STRIP;
-  case 'triangle-fan': return GL.TRIANGLE_FAN;
-  default: throw new Error(topology);
+    case 'point-list': return GL.POINTS;
+    case 'line-list': return GL.LINES;
+    case 'line-strip': return GL.LINE_STRIP;
+    case 'line-loop': return GL.LINE_LOOP;
+    case 'triangle-list': return GL.TRIANGLES;
+    case 'triangle-strip': return GL.TRIANGLE_STRIP;
+    case 'triangle-fan': return GL.TRIANGLE_FAN;
+    default: throw new Error(topology);
   }
 }
 
@@ -386,14 +385,14 @@ function getDrawMode(
 function getGLPrimitive(topology: PrimitiveTopology): GL.POINTS | GL.LINES | GL.TRIANGLES {
   // prettier-ignore
   switch (topology) {
-  case 'point-list': return GL.POINTS;
-  case 'line-list': return GL.LINES;
-  case 'line-strip': return GL.LINES;
-  case 'line-loop': return GL.LINES;
-  case 'triangle-list': return GL.TRIANGLES;
-  case 'triangle-strip': return GL.TRIANGLES;
-  case 'triangle-fan': return GL.TRIANGLES;
-  default: throw new Error(topology);
+    case 'point-list': return GL.POINTS;
+    case 'line-list': return GL.LINES;
+    case 'line-strip': return GL.LINES;
+    case 'line-loop': return GL.LINES;
+    case 'triangle-list': return GL.TRIANGLES;
+    case 'triangle-strip': return GL.TRIANGLES;
+    case 'triangle-fan': return GL.TRIANGLES;
+    default: throw new Error(topology);
   }
 }
 

package/src/adapter/resources/webgl-shader.ts

@@ -8,7 +8,7 @@ import WebGLDevice from '../webgl-device';
 /**
  * An immutable compiled shader program that execute portions of the GPU Pipeline
  */
- export default class WEBGLShader extends Shader {
+export default class WEBGLShader extends Shader {
   readonly device: WebGLDevice;
   readonly handle: WebGLShader;
 

package/src/adapter/resources/webgl-texture.ts

@@ -176,8 +176,7 @@ export default class WEBGLTexture extends Texture {
     this.gl = this.device.gl;
     this.gl2 = this.device.gl2;
     this.handle = this.props.handle || this.gl.createTexture();
-    // @ts-expect-error Per SPECTOR docs
-    this.handle.__SPECTOR_Metadata = {...this.props, data: typeof this.props.data}; // {name: this.props.id};
+    this.device.setSpectorMetadata(this.handle, {...this.props, data: typeof this.props.data}); // {name: this.props.id};
 
     this.target = getWebGLTextureTarget(this.props);
 
@@ -238,7 +237,7 @@ export default class WEBGLTexture extends Texture {
       return this;
     }
 
-    let {parameters = {}  as Record<GL, any>} = props;
+    const {parameters = {}  as Record<GL, any>} = props;
 
     const {
       pixels = null, recreate = false, pixelStore = {}, textureUnit = undefined} = props;
@@ -490,7 +489,7 @@ export default class WEBGLTexture extends Texture {
     withParameters(this.gl, parameters, () => {
       switch (dataType) {
         case 'null':
-          gl.texImage2D(target, level, format, width, height, 0 /*border*/, dataFormat, type, data);
+          gl.texImage2D(target, level, format, width, height, 0 /* border*/, dataFormat, type, data);
           break;
         case 'typed-array':
           // Looks like this assert is not necessary, as offset is ignored under WebGL1
@@ -519,7 +518,7 @@ export default class WEBGLTexture extends Texture {
             format,
             width,
             height,
-            0 /*border*/,
+            0 /* border*/,
             dataFormat,
             type,
             offset
@@ -534,7 +533,7 @@ export default class WEBGLTexture extends Texture {
               format,
               width,
               height,
-              0 /*border*/,
+              0 /* border*/,
               dataFormat,
               type,
               data
@@ -819,7 +818,7 @@ export default class WEBGLTexture extends Texture {
       resolvedFaces[index].forEach((image, lodLevel) => {
         // TODO: adjust width & height for LOD!
         if (width && height) {
-          gl.texImage2D(face, lodLevel, format, width, height, 0 /*border*/, format, type, image);
+          gl.texImage2D(face, lodLevel, format, width, height, 0 /* border*/, format, type, image);
         } else {
           gl.texImage2D(face, lodLevel, format, format, type, image);
         }
@@ -858,7 +857,7 @@ export default class WEBGLTexture extends Texture {
         )
       );
     } else if (this.width || this.height) {
-      gl.texImage2D(face, 0, format, width, height, 0 /*border*/, format, type, imageData);
+      gl.texImage2D(face, 0, format, width, height, 0 /* border*/, format, type, imageData);
     } else {
       gl.texImage2D(face, 0, format, format, type, imageData);
     }
@@ -956,7 +955,7 @@ export default class WEBGLTexture extends Texture {
     this.gl.bindTexture(this.target, this.handle);
     for (const [pname, pvalue] of Object.entries(parameters)) {
       const param = Number(pname);
-      let value = pvalue;
+      const value = pvalue;
 
       // Apparently there are integer/float conversion issues requires two parameter setting functions in JavaScript.
       // For now, pick the float version for parameters specified as GLfloat.

package/src/adapter/webgl-canvas-context.ts

@@ -49,7 +49,7 @@ export default class WebGLCanvasContext extends CanvasContext {
    *  canvas CSS width * devicePixelRatio x canvas CSS height * devicePixelRatio
    * See http://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
    */
-   resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {
+  resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {
     // Resize browser context .
     if (this.canvas) {
       this.setDevicePixelRatio(devicePixelRatio, options);
@@ -58,7 +58,7 @@ export default class WebGLCanvasContext extends CanvasContext {
 
     // Resize headless gl context
     const ext = this.device.gl.getExtension('STACKGL_resize_drawingbuffer');
-    if (ext && options && `width` in options && `height` in options) {
+    if (ext && options && 'width' in options && 'height' in options) {
       ext.resize(options.width, options.height);
     }
   }

package/src/adapter/webgl-device.ts

@@ -341,7 +341,7 @@ ${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`
     // this.canvasContext.commit();
   }
 
-    //
+  //
   // WebGL-only API (not part of `Device` API)
   //
 
@@ -379,7 +379,7 @@ ${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`
    * @note Triggers context loss, mainly for testing
    * @todo Promote to `Device` API?
    */
-   loseDevice(): void {
+  loseDevice(): void {
     const ext = this.gl.getExtension('WEBGL_lose_context');
     if (ext) {
       ext.loseContext();
@@ -400,6 +400,16 @@ ${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`
   popState(): void {
     popContextState(this.gl);
   }
+
+  /** 
+   * Storing data on a special field on WebGLObjects makes that data visible in SPECTOR chrome debug extension 
+   * luma.gl ids and props can be inspected
+   */
+  setSpectorMetadata(handle: unknown, props: Record<string, unknown>) {
+    // @ts-expect-error
+    // eslint-disable-next-line camelcase
+    handle.__SPECTOR_Metadata = props;
+  }
 }
 
 /** Check if supplied parameter is a WebGLRenderingContext */

package/src/classic/accessor.ts

@@ -85,7 +85,7 @@ export default class Accessor implements AccessorObject {
 
       // Auto-deduce integer type?
       if (props.type === GL.INT || props.type === GL.UNSIGNED_INT) {
-      this.integer = true;
+        this.integer = true;
       }
     }
     if (props.size !== undefined) {

package/src/classic/buffer.ts

@@ -50,11 +50,11 @@ function getWEBGLBufferProps(props: ClassicBufferProps | ArrayBufferView | numbe
 
   // Signature: `new Buffer(gl, 100)`
   else if (typeof props === 'number') {
-    return {byteLength: props as number};
+    return {byteLength: props };
   }
 
   props = checkProps('Buffer', props, PROP_CHECKS_INITIALIZE);
-  const bufferProps = {...props as ClassicBufferProps};
+  const bufferProps = {...props };
   if (bufferProps.offset) {
     bufferProps.byteOffset = bufferProps.offset;
   }
@@ -362,7 +362,7 @@ export default class ClassicBuffer extends WEBGLBuffer {
   getDebugData(): {
     data: any;
     changed: boolean;
-  } {
+    } {
     if (!this.debugData) {
       this.debugData = this.getData({length: Math.min(DEBUG_DATA_LENGTH, this.byteLength)});
       return {data: this.debugData, changed: true};

package/src/classic/typed-array-utils.ts

@@ -92,7 +92,7 @@ export function getTypedArrayFromGLType(
  * how-can-i-flip-the-result-of-webglrenderingcontext-readpixels
  * @param {*} param0
  */
- export function flipRows(options: {
+export function flipRows(options: {
   data: any;
   width: any;
   height: any;

package/src/context/context/create-browser-context.ts

@@ -37,7 +37,9 @@ const DEFAULT_CONTEXT_PROPS: ContextProps = {
   webgl2: true, // Attempt to create a WebGL2 context
   webgl1: true, // Attempt to create a WebGL1 context (false to fail if webgl2 not available)
   powerPreference: 'high-performance', // After all, most apps are using WebGL for performance reasons
+  // eslint-disable-next-line no-console
   onContextLost: () => console.error('WebGL context lost'),
+  // eslint-disable-next-line no-console
   onContextRestored: () => console.info('WebGL context restored'),
 };
 
@@ -46,8 +48,8 @@ const DEFAULT_CONTEXT_PROPS: ContextProps = {
  * Note calling this multiple time on the same canvas does return the same context
 * @param canvas A canvas element or offscreen canvas
  */
- export function createBrowserContext(canvas: HTMLCanvasElement | OffscreenCanvas, props: ContextProps): WebGLRenderingContext {
-   props = {...DEFAULT_CONTEXT_PROPS, ...props};
+export function createBrowserContext(canvas: HTMLCanvasElement | OffscreenCanvas, props: ContextProps): WebGLRenderingContext {
+  props = {...DEFAULT_CONTEXT_PROPS, ...props};
 
   // Try to extract any extra information about why context creation failed
   let errorMessage = null;

package/src/context/context/create-headless-context.ts

@@ -1,10 +1,10 @@
 const ERR_HEADLESSGL_FAILED =
   'Failed to create WebGL context in Node.js, headless gl returned null';
 
-const ERR_HEADLESSGL_LOAD = `\
+const ERR_HEADLESSGL_LOAD = '\
   luma.gl: loaded under Node.js without headless gl installed, meaning that WebGL \
   contexts can not be created. This may not be an error. For example, this is a \
-  typical configuration for isorender applications running on the server.`;
+  typical configuration for isorender applications running on the server.';
 
 const CONTEXT_DEFAULTS = {
   width: 1,