chore: Enable TypeScript null checks (#2270)

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,5 +1,5 @@
-name: Bug Report
-description: Something does not work as expected
+name: Open a Bug Report (GitHub Issue)
+description: GitHub Issues are for confirmed bugs or approved feature requests ONLY. Please ask generic questions or request help via GitHub Discussions. 
 title: "[Bug]"
 labels: bug
 body:
@@ -14,7 +14,7 @@ body:
       luma.gl primarily uses [GitHub Discussions](https://github.com/visgl/luma.gl/discussions) 
       and the [Open Visualization OpenJS Foundation slack channels](https://www.openvisualization.org/#get-involved) to interact with users.
       GitHub Issues are for confirmed bugs only.
-      
+
       Please start in the Discussions section rather than opening an issue if you are e.g.
       - not yet sure if you are hitting a bug or just using the APIs wrong
       - having issues with your particular build environment that are not yet clearly root caused,

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,5 @@
 blank_issues_enabled: false
 contact_links:
-  - name: I have a question / I need help
+  - name: Start a Discussion: Open a GitHub Discussion (I have a question / I need help)
     url: https://github.com/visgl/loaders.gl/discussions
-    about: Please ask generic questions or request help in discussions. Non-specific issues will be closed by maintainers.
+    about: Please ask generic questions or request help here in discussions. "Issues" are for confirmed bugs or approved feature requests.

docs/whats-new.md

@@ -2,15 +2,19 @@
 
 *This page contains news for recent luma.gl releases. For older releases (through v8.5) refer to the  [Legacy What's New](/docs/legacy/legacy-upgrade-guide) page.*
 
-## Version 9.2 (In Planning)
+## Version 9.2 (In Development)
 
-Target Date: Q3, 2024
+Target Date: Q4, 2024
 
 Production quality WebGPU backend
 
-## Version 9.1 (In Development)
+**General**
+- TypeScript v5.6, strictNullChecks enabled.
 
-Target Date: Aug 15, 2024
+
+## Version 9.1 (In Beta)
+
+Target Date: Sep 30, 2024
 
 Improvements focused on enhancing WebGPU support.
 

modules/constants/tsconfig.json

@@ -3,8 +3,6 @@
   "include": ["src/**/*"],
   "exclude": ["node_modules"],
   "compilerOptions": {
-    "strict": true,
-    "noImplicitAny": true,
     "composite": true,
     "rootDir": "src",
     "outDir": "dist"

modules/core/tsconfig.json

@@ -3,8 +3,6 @@
   "include": ["src/**/*"],
   "exclude": ["node_modules"],
   "compilerOptions": {
-    "strict": true,
-    "strictNullChecks": true,
     "noImplicitAny": true,
     "composite": true,
     "rootDir": "src",

modules/effects/tsconfig.json

@@ -3,8 +3,6 @@
   "include": ["src/**/*"],
   "exclude": ["node_modules", "test"],
   "compilerOptions": {
-    "strict": true,
-    "strictNullChecks": true,
     "noImplicitAny": true,
     "composite": true,
     "rootDir": "src",

modules/engine/tsconfig.json

@@ -3,9 +3,6 @@
   "include": ["src/**/*"],
   "exclude": ["node_modules"],
   "compilerOptions": {
-    "strict": true,
-    "strictNullChecks": true,
-    "noImplicitAny": true,
     "composite": true,
     "rootDir": "src",
     "outDir": "dist"

modules/gltf/src/gltf/create-gltf-model.ts

@@ -118,7 +118,7 @@ export type CreateGLTFModelOptions = {
 };
 
 export function createGLTFModel(device: Device, options: CreateGLTFModelOptions): ModelNode {
-  const {id, geometry, material, vertexCount, materialOptions, modelOptions} = options;
+  const {id, geometry, material, vertexCount, materialOptions, modelOptions = {}} = options;
 
   const parsedMaterial = parsePBRMaterial(device, material, geometry.attributes, materialOptions);
   log.info(4, 'createGLTFModel defines: ', parsedMaterial.defines)();

modules/gltf/src/gltf/gltf-animator.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {log} from '@luma.gl/core';
+import {log, TypedArray} from '@luma.gl/core';
 import {Matrix4, Quaternion} from '@math.gl/core';
 
 // TODO: import from loaders.gl?
@@ -34,7 +34,7 @@ type GLTFAnimationProps = {
 };
 
 class GLTFAnimation {
-  name: string;
+  name: string = 'unnamed';
   startTime: number = 0;
   playing: boolean = true;
   speed: number = 1;
@@ -102,13 +102,17 @@ function accessorToJsArray(accessor) {
     const length = components * accessor.count;
     const {buffer, byteOffset} = accessor.bufferView.data;
 
-    const array = new ArrayType(buffer, byteOffset + (accessor.byteOffset || 0), length);
+    const array: TypedArray = new ArrayType(
+      buffer,
+      byteOffset + (accessor.byteOffset || 0),
+      length
+    );
 
     if (components === 1) {
       accessor._animation = Array.from(array);
     } else {
       // Slice array
-      const slicedArray = [];
+      const slicedArray: number[][] = [];
       for (let i = 0; i < array.length; i += components) {
         slicedArray.push(Array.from(array.slice(i, i + components)));
       }

modules/gltf/src/gltf/gltf-instantiator.ts

@@ -22,7 +22,7 @@ export type GLTFInstantiatorOptions = {
 const DEFAULT_OPTIONS: GLTFInstantiatorOptions = {
   modelOptions: {},
   pbrDebug: false,
-  imageBasedLightingEnvironment: null,
+  imageBasedLightingEnvironment: undefined,
   lights: true,
   useTangents: false
 };
@@ -52,6 +52,7 @@ export class GLTFInstantiator {
       return new GLTFAnimator(this.gltf);
     }
 
+    // @ts-ignore TODO - should we create an empty animator that does nothing?
     return null;
   }
 

modules/gltf/src/pbr/parse-pbr-material.ts

@@ -211,7 +211,7 @@ function addTexture(
   device: Device,
   gltfTexture,
   uniformName: string,
-  define = null,
+  define: string,
   parsedMaterial: ParsedPBRMaterial
 ): void {
   const parameters = gltfTexture?.texture?.sampler?.parameters || {};

modules/gltf/src/pbr/pbr-environment.ts

@@ -23,11 +23,11 @@ export function loadPBREnvironment(device: Device, props: PBREnvironmentProps):
   const brdfLutTexture = new AsyncTexture(device, {
     id: 'brdfLUT',
     sampler: {
-      wrapS: 'clamp-to-edge',
-      wrapT: 'clamp-to-edge',
+      addressModeU: 'clamp-to-edge',
+      addressModeV: 'clamp-to-edge',
       minFilter: 'linear',
-      maxFilter: 'linear'
-    } as SamplerProps,
+      magFilter: 'linear'
+    } as const satisfies SamplerProps,
     // Texture accepts a promise that returns an image as data (Async Textures)
     data: loadImageTexture(props.brdfLutUrl)
   });
@@ -36,28 +36,29 @@ export function loadPBREnvironment(device: Device, props: PBREnvironmentProps):
     id: 'DiffuseEnvSampler',
     getTextureForFace: dir => loadImageTexture(props.getTexUrl('diffuse', dir, 0)),
     sampler: {
-      wrapS: 'clamp-to-edge',
-      wrapT: 'clamp-to-edge',
+      addressModeU: 'clamp-to-edge',
+      addressModeV: 'clamp-to-edge',
       minFilter: 'linear',
-      maxFilter: 'linear'
-    } as SamplerProps
+      magFilter: 'linear'
+    } as const satisfies SamplerProps
   });
 
   const specularEnvSampler = makeCube(device, {
     id: 'SpecularEnvSampler',
     getTextureForFace: (dir: number) => {
-      const imageArray = [];
+      const imageArray: Promise<any>[] = [];
+      // @ts-ignore
       for (let lod = 0; lod <= props.specularMipLevels - 1; lod++) {
         imageArray.push(loadImageTexture(props.getTexUrl('specular', dir, lod)));
       }
       return imageArray;
     },
     sampler: {
-      wrapS: 'clamp-to-edge',
-      wrapT: 'clamp-to-edge',
+      addressModeU: 'clamp-to-edge',
+      addressModeV: 'clamp-to-edge',
       minFilter: 'linear', // [GL.TEXTURE_MIN_FILTER]: GL.LINEAR_MIPMAP_LINEAR,
-      maxFilter: 'linear'
-    } as SamplerProps
+      magFilter: 'linear'
+    } as const satisfies SamplerProps
   });
 
   return {

modules/gltf/tsconfig.json

@@ -3,6 +3,7 @@
   "include": ["src/**/*"],
   "exclude": ["node_modules"],
   "compilerOptions": {
+    "noImplicitAny": false,
     "composite": true,
     "rootDir": "src",
     "outDir": "dist"

modules/shadertools/test/modules/math/fp64-arithmetic-transform.spec.ts

@@ -94,9 +94,7 @@ function getTestCasesFor(device, glslFunc) {
 }
 
 test('fp64#sum_fp64', async t => {
-  console.log('start');
   const webglDevice = await getWebGLTestDevice();
-  console.log('device');
 
   const glslFunc = 'sum_fp64';
   const testCases = getTestCasesFor(webglDevice, glslFunc);

modules/shadertools/tsconfig.json

@@ -1,17 +1,21 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "test"],
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "test"
+  ],
   "compilerOptions": {
-    "strict": true,
-    "strictNullChecks": true,
-    "noImplicitAny": true,
     "composite": true,
     "rootDir": "src",
     "outDir": "dist"
   },
   "references": [
     // TODO: shadertools is almost independent of API, is it worth breaking the dependency?
-    {"path": "../core"}
+    {
+      "path": "../core"
+    }
   ]
-}
+}

modules/test-utils/src/create-test-device.ts

@@ -40,9 +40,9 @@ const webgpuDevicePromise = makeWebGPUTestDevice();
 export async function getTestDevices(
   types: ('webgl' | 'webgpu' | 'null' | 'unknown')[] = ['webgl', 'webgpu']
 ): Promise<Device[]> {
-  return [await getNullTestDevice(), await getWebGLTestDevice(), await getWebGPUTestDevice()]
-    .filter(Boolean)
-    .filter(device => types.includes(device.type));
+  return (
+    [await getNullTestDevice(), await getWebGLTestDevice(), await getWebGPUTestDevice()] as Device[]
+  ).filter(device => types.includes(device?.type));
 }
 
 /** returns WebGPU device promise, if available */
@@ -73,6 +73,7 @@ async function makeWebGPUTestDevice(): Promise<WebGPUDevice | null> {
     webgpuDeviceResolvers.resolve(webgpuDevice);
   } catch (error) {
     log.error(String(error))();
+    // @ts-ignore TODO
     webgpuDeviceResolvers.resolve(null);
   }
   return webgpuDeviceResolvers.promise;
@@ -93,6 +94,7 @@ async function makeWebGLTestDevice(): Promise<WebGLDevice> {
     webglDeviceResolvers.resolve(webglDevice);
   } catch (error) {
     log.error(String(error))();
+    // @ts-ignore TODO
     webglDeviceResolvers.resolve(null);
   }
   return webglDeviceResolvers.promise;
@@ -113,6 +115,7 @@ async function makeNullTestDevice(): Promise<NullDevice> {
     nullDeviceResolvers.resolve(nullDevice);
   } catch (error) {
     log.error(String(error))();
+    // @ts-ignore TODO
     nullDevicePromise = Promise.resolve(null);
   }
   return nullDeviceResolvers.promise;

modules/test-utils/src/deprecated/classic-animation-loop.ts

@@ -2,6 +2,8 @@
 // SPDX-License
 // Copyright (c) vis.gl contributors
 
+// @ts-nocheck This should be replaced with model animation loop
+
 // TODO - replace createGLContext, instrumentGLContext, resizeGLContext?
 // TODO - remove dependency on framebuffer (bundle size impact)
 import {luma, Device, DeviceProps, log} from '@luma.gl/core';

modules/test-utils/src/null-device/null-canvas-context.ts

@@ -14,14 +14,14 @@ export class NullCanvasContext extends CanvasContext {
   readonly device: NullDevice;
   readonly handle = null;
 
-  presentationSize: [number, number];
+  presentationSize: [number, number] = [1, 1];
   private _framebuffer: NullFramebuffer | null = null;
 
   get [Symbol.toStringTag]() {
     return 'NullCanvasContext';
   }
 
-  constructor(device: NullDevice, props: CanvasContextProps) {
+  constructor(device: NullDevice, props?: CanvasContextProps) {
     // Note: Base class creates / looks up the canvas (unless under Node.js)
     super(props);
     this.device = device;

modules/test-utils/src/null-device/resources/null-texture.ts

@@ -28,7 +28,11 @@ export class NullTexture extends Texture {
     // const data = props.data;
     // this.setImageData(props);
 
-    this.setSampler(props.sampler);
+    if (props.sampler) {
+      this.setSampler(props.sampler);
+    }
+
+    this.sampler = new NullSampler(this.device, this.props.sampler);
 
     this.view = new NullTextureView(this.device, {
       ...props,

modules/test-utils/src/performance-test-runner.ts

@@ -30,6 +30,7 @@ export class PerformanceTestRunner extends TestRunner {
     this._fps?.timeEnd();
     this._fps?.timeStart();
 
+    // @ts-ignore TODO
     if (this._fps.count > this.testOptions.maxFramesToRender) {
       animationProps.done();
     }

modules/webgl/src/adapter/converters/webgl-texture-table.ts

@@ -365,7 +365,7 @@ export function getDepthStencilAttachmentWebGL(
 /** TODO - VERY roundabout legacy way of calculating bytes per pixel */
 export function getTextureFormatBytesPerPixel(format: TextureFormat): number {
   const formatInfo = getTextureFormatInfo(format);
-  return formatInfo.bytesPerPixel;
+  return formatInfo.bytesPerPixel as number;
 }
 
 // DATA TYPE HELPERS
@@ -394,7 +394,7 @@ export function getWebGLPixelDataFormat(
 /**
  * Map WebGPU style texture format strings to GL constants
  */
-function convertTextureFormatToGL(format: TextureFormat): GL | undefined {
+function convertTextureFormatToGL(format: TextureFormat): GL {
   const formatInfo = WEBGL_TEXTURE_FORMATS[format];
   const webglFormat = formatInfo?.gl;
   if (webglFormat === undefined) {

modules/webgl/src/adapter/helpers/webgl-texture-utils.ts

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+// @ts-nocheck This file will be deleted in upcoming refactor
+
 import type {Buffer, Texture, FramebufferProps} from '@luma.gl/core';
 import {Framebuffer, getTypedArrayFromDataType, getDataTypeFromTypedArray} from '@luma.gl/core';
 import {

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

@@ -21,9 +21,9 @@ export class WEBGLBuffer extends Buffer {
   readonly glIndexType: GL.UNSIGNED_SHORT | GL.UNSIGNED_INT = GL.UNSIGNED_SHORT;
 
   /** Number of bytes allocated on the GPU for this buffer */
-  byteLength: number;
+  byteLength: number = 0;
   /** Number of bytes used */
-  bytesUsed: number;
+  bytesUsed: number = 0;
 
   constructor(device: WebGLDevice, props: BufferProps = {}) {
     super(device, props);

modules/webgl/src/adapter/resources/webgl-command-buffer.ts

@@ -285,7 +285,7 @@ function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextur
   // TODO - support gl.readBuffer (WebGL2 only)
   // const prevBuffer = gl.readBuffer(attachment);
 
-  let texture: WEBGLTexture = null;
+  let texture: WEBGLTexture;
   let textureTarget: GL;
   if (destinationTexture instanceof WEBGLTexture) {
     texture = destinationTexture;