@luma.gl/core 9.2.6 → 9.3.0-alpha.4

package/src/adapter/device.ts

@@ -24,6 +24,7 @@ import type {CommandBuffer} from './resources/command-buffer';
 import type {VertexArray, VertexArrayProps} from './resources/vertex-array';
 import type {TransformFeedback, TransformFeedbackProps} from './resources/transform-feedback';
 import type {QuerySet, QuerySetProps} from './resources/query-set';
+import type {Fence} from './resources/fence';
 
 import {getVertexFormatInfo} from '../shadertypes/vertex-arrays/decode-vertex-format';
 import {textureFormatDecoder} from '../shadertypes/textures/texture-format-decoder';
@@ -400,7 +401,7 @@ export abstract class Device {
   /** True if this device has been reused during device creation (app has multiple references) */
   _reused: boolean = false;
   /** Used by other luma.gl modules to store data on the device */
-  _lumaData: {[key: string]: unknown} = {};
+  private _moduleData: Record<string, Record<string, unknown>> = {};
 
   // Capabilities
 
@@ -451,9 +452,6 @@ export abstract class Device {
     return textureCaps;
   }
 
-  /** Return the implementation specific alignment for a texture format. 1 on WebGL, 256 on WebGPU */
-  abstract getTextureByteAlignment(): number;
-
   /** Calculates the number of mip levels for a texture of width, height and in case of 3d textures only, depth */
   getMipLevelCount(width: number, height: number, depth3d: number = 1): number {
     const maxSize = Math.max(width, height, depth3d);
@@ -548,7 +546,13 @@ export abstract class Device {
     const isHandled = this.props.onError(error, context);
     if (!isHandled) {
       // Note: Returns a function that must be called: `device.reportError(...)()`
-      return log.error(error.message, context, ...args);
+      return log.error(
+        this.type === 'webgl' ? '%cWebGL' : '%cWebGPU',
+        'color: white; background: red; padding: 2px 6px; border-radius: 3px;',
+        error.message,
+        context,
+        ...args
+      );
     }
     return () => {};
   }
@@ -622,6 +626,11 @@ or create a device with the 'debug: true' prop.`;
 
   abstract createQuerySet(props: QuerySetProps): QuerySet;
 
+  /** Create a fence sync object */
+  createFence(): Fence {
+    throw new Error('createFence() not implemented');
+  }
+
   /** Create a RenderPass using the default CommandEncoder */
   beginRenderPass(props?: RenderPassProps): RenderPass {
     return this.commandEncoder.beginRenderPass(props);
@@ -711,6 +720,15 @@ or create a device with the 'debug: true' prop.`;
     throw new Error('not implemented');
   }
 
+  // INTERNAL LUMA.GL METHODS
+
+  getModuleData<ModuleDataT extends Record<string, unknown>>(moduleName: string): ModuleDataT {
+    this._moduleData[moduleName] ||= {};
+    return this._moduleData[moduleName] as ModuleDataT;
+  }
+
+  // INTERNAL HELPERS
+
   // IMPLEMENTATION
 
   /** Helper to get the canvas context props */

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

@@ -11,7 +11,7 @@ import {Resource, ResourceProps} from './resource';
 //   // onSubmittedWorkDone(): Promise<undefined>;
 
 //   writeBuffer(options: WriteBufferOptions): void;
-//   writeTexture(options: WriteTextureOptions): void;
+//   writeTexture(options: TextureWriteOptions): void;
 
 //   // copyExternalImageToTexture(
 //   //   GPUImageCopyExternalImage source,

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

@@ -27,11 +27,11 @@ export type CopyBufferToTextureOptions = {
   byteOffset?: number;
   destinationTexture: Texture;
   mipLevel?: number; //  = 0;
-  origin?: [number, number, number] | number[];
+  origin?: [number, number, number];
   aspect?: 'all' | 'stencil-only' | 'depth-only';
   bytesPerRow: number;
   rowsPerImage: number;
-  size: [number, number, number] | number[];
+  size: [number, number, number];
 };
 
 export type CopyTextureToBufferOptions = {
@@ -49,7 +49,7 @@ export type CopyTextureToBufferOptions = {
   width?: number;
   height?: number;
   depthOrArrayLayers?: number;
-  origin?: number[];
+  origin?: [number, number, number];
 
   /** Destination buffer */
   destinationBuffer: Buffer;
@@ -74,7 +74,7 @@ export type CopyTextureToTextureOptions = {
   /**  Mip-map level of the texture to copy to/from. (Default 0) */
   mipLevel?: number;
   /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy from. */
-  origin?: number[];
+  origin?: [number, number, number];
   /** Defines which aspects of the {@link GPUImageCopyTexture#texture} to copy to/from. */
   aspect?: 'all' | 'stencil-only' | 'depth-only';
 
@@ -83,7 +83,7 @@ export type CopyTextureToTextureOptions = {
   /**  Mip-map level of the texture to copy to/from. (Default 0) */
   destinationMipLevel?: number;
   /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to. */
-  destinationOrigin?: number[];
+  destinationOrigin?: [number, number, number];
   /** Defines which aspects of the {@link GPUImageCopyTexture#texture} to copy to/from. */
   destinationAspect?: 'all' | 'stencil-only' | 'depth-only';
 
@@ -113,7 +113,7 @@ export type ClearTextureOptions = {
 //   size?: number;
 // };
 
-// export type WriteTextureOptions = {
+// export type TextureWriteOptions = {
 //   destination: Texture;
 //   mipLevel?: number; //  = 0;
 //   origin?: [number, number, number] | number[];
@@ -166,7 +166,7 @@ export abstract class CommandEncoder extends Resource<CommandEncoderProps> {
   /** Add a command that clears a texture mip level. */
   // abstract clearTexture(options: ClearTextureOptions): void;
 
-  // abstract readTexture(options: ReadTextureOptions): Promise<TypedArray>;
+  // abstract readTexture(options: TextureReadOptions): Promise<TypedArray>;
 
   /** Reads results from a query set into a GPU buffer. Values are 64 bits so byteLength must be querySet.props.count * 8 */
   abstract resolveQuerySet(

package/src/adapter/resources/fence.ts

@@ -0,0 +1,30 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {Device} from '../device';
+import {Resource, type ResourceProps} from './resource';
+
+export type FenceProps = ResourceProps;
+
+/** Synchronization primitive that resolves when GPU work is completed */
+export abstract class Fence extends Resource<FenceProps> {
+  static override defaultProps: Required<FenceProps> = {
+    ...Resource.defaultProps
+  };
+
+  [Symbol.toStringTag]: string = 'WEBGLFence';
+
+  /** Promise that resolves when the fence is signaled */
+  abstract readonly signaled: Promise<void>;
+
+  constructor(device: Device, props: FenceProps = {}) {
+    super(device, props, Fence.defaultProps);
+  }
+
+  /** Destroy the fence and release any resources */
+  abstract override destroy(): void;
+
+  /** Check if the fence has been signaled */
+  abstract isSignaled(): boolean;
+}

package/src/adapter/resources/framebuffer.ts

@@ -56,7 +56,12 @@ export abstract class Framebuffer extends Resource<FramebufferProps> {
     const depthStencilAttachment =
       this.depthStencilAttachment && this.depthStencilAttachment.texture.clone(size);
 
-    return this.device.createFramebuffer({...this.props, colorAttachments, depthStencilAttachment});
+    return this.device.createFramebuffer({
+      ...this.props,
+      ...size,
+      colorAttachments,
+      depthStencilAttachment
+    });
   }
 
   /**
@@ -146,17 +151,15 @@ export abstract class Framebuffer extends Resource<FramebufferProps> {
    * and destroys existing textures if owned
    */
   protected resizeAttachments(width: number, height: number): void {
-    for (let i = 0; i < this.colorAttachments.length; ++i) {
-      if (this.colorAttachments[i]) {
-        const resizedTexture = this.colorAttachments[i].texture.clone({
-          width,
-          height
-        });
-        this.destroyAttachedResource(this.colorAttachments[i]);
-        this.colorAttachments[i] = resizedTexture.view;
-        this.attachResource(resizedTexture.view);
-      }
-    }
+    this.colorAttachments.forEach((colorAttachment, i) => {
+      const resizedTexture = colorAttachment.texture.clone({
+        width,
+        height
+      });
+      this.destroyAttachedResource(colorAttachment);
+      this.colorAttachments[i] = resizedTexture.view;
+      this.attachResource(resizedTexture.view);
+    });
 
     if (this.depthStencilAttachment) {
       const resizedTexture = this.depthStencilAttachment.texture.clone({

package/src/adapter/resources/resource.ts

@@ -33,10 +33,15 @@ export abstract class Resource<Props extends ResourceProps> {
 
   /** props.id, for debugging. */
   id: string;
+  /** The props that this resource was created with */
   readonly props: Required<Props>;
+  /** User data object, reserved for the application */
   readonly userData: Record<string, unknown> = {};
+  /** The device that this resource is associated with */
   abstract readonly device: Device;
+  /** The handle for the underlying resource, e.g. WebGL object or WebGPU handle */
   abstract readonly handle: unknown;
+  /** The device that this resource is associated with - TODO can we remove this dup? */
   private _device: Device;
 
   /** Whether this resource has been destroyed */

package/src/adapter/resources/shader.ts

@@ -106,38 +106,38 @@ export abstract class Shader extends Resource<ShaderProps> {
 
     const shaderName: string = shaderId; // getShaderName(this.source) || ;
     const shaderTitle: string = `${this.stage} shader "${shaderName}"`;
-    let htmlLog = formatCompilerLog(messages, this.source, {showSourceCode: 'all', html: true});
+    const htmlLog = formatCompilerLog(messages, this.source, {showSourceCode: 'all', html: true});
     // Show translated source if available
     const translatedSource = this.getTranslatedSource();
+
+    const container = document.createElement('div');
+    container.innerHTML = `\
+<h1>Compilation error in ${shaderTitle}</h1>
+<div style="display:flex;position:fixed;top:10px;right:20px;gap:2px;">
+<button id="copy">Copy source</button><br/>
+<button id="close">Close</button>
+</div>
+<code><pre>${htmlLog}</pre></code>`;
     if (translatedSource) {
-      htmlLog += `<br /><br /><h1>Translated Source</h1><br /><br /><code style="user-select:text;"><pre>${translatedSource}</pre></code>`;
+      container.innerHTML += `<br /><h1>Translated Source</h1><br /><br /><code><pre>${translatedSource}</pre></code>`;
     }
-    // Make it clickable so we can copy to clipboard
-    const button = document.createElement('Button');
-    button.innerHTML = `
-<h1>Compilation error in ${shaderTitle}</h1><br /><br />
-<code style="user-select:text;"><pre>
-${htmlLog}
-</pre></code>`;
-    button.style.top = '10px';
-    button.style.left = '10px';
-    button.style.position = 'absolute';
-    button.style.zIndex = '9999';
-    button.style.width = '100%';
-    button.style.textAlign = 'left';
-    document.body.appendChild(button);
-
-    const errors = document.getElementsByClassName('luma-compiler-log-error');
-    errors[0]?.scrollIntoView();
-
-    // TODO - add a small embedded copy button (instead of main button)
-    button.onclick = () => {
-      // const source = this.source.replaceAll('\n', '<br />');
-      const dataURI = `data:text/plain,${encodeURIComponent(this.source)}`;
-      navigator.clipboard.writeText(dataURI);
+    container.style.top = '0';
+    container.style.left = '0';
+    container.style.background = 'white';
+    container.style.position = 'fixed';
+    container.style.zIndex = '9999';
+    container.style.maxWidth = '100vw';
+    container.style.maxHeight = '100vh';
+    container.style.overflowY = 'auto';
+    document.body.appendChild(container);
+    const error = container.querySelector('.luma-compiler-log-error');
+    error?.scrollIntoView();
+    (container.querySelector('button#close') as HTMLButtonElement).onclick = () => {
+      container.remove();
+    };
+    (container.querySelector('button#copy') as HTMLButtonElement).onclick = () => {
+      navigator.clipboard.writeText(this.source);
     };
-
-    // TODO - add a small embedded close button
   }
 
   static override defaultProps: Required<ShaderProps> = {
@@ -162,5 +162,5 @@ function getShaderIdFromProps(props: ShaderProps): string {
 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_NAME_REGEXP.exec(shader);
-  return match ? match[1] : defaultName;
+  return match?.[1] ?? defaultName;
 }

package/src/adapter/resources/texture.ts

@@ -2,14 +2,19 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {TypedArray} from '@math.gl/types';
-import type {Device} from '../device';
-import type {TextureFormat} from '../../shadertypes/textures/texture-formats';
-import type {TextureView, TextureViewProps} from './texture-view';
-import {Resource, ResourceProps} from './resource';
-import {Sampler, SamplerProps} from './sampler';
-import {ExternalImage} from '../../image-utils/image-types';
+import {type TypedArray} from '@math.gl/types';
+import {type Device} from '../device';
+import {
+  type TextureFormat,
+  type TextureMemoryLayout
+} from '../../shadertypes/textures/texture-formats';
+import {type ExternalImage} from '../../image-utils/image-types';
+import {type TextureView, type TextureViewProps} from './texture-view';
+import {Resource, type ResourceProps} from './resource';
+import {Sampler, type SamplerProps} from './sampler';
+import {Buffer} from './buffer';
 import {log} from '../../utils/log';
+import {textureFormatDecoder} from '../../shadertypes/textures/texture-format-decoder';
 
 /** Options for Texture.copyExternalImage */
 export type CopyExternalImageOptions = {
@@ -65,18 +70,40 @@ export type CopyImageDataOptions = {
   aspect?: 'all' | 'stencil-only' | 'depth-only';
 };
 
-const BASE_DIMENSIONS: Record<string, '1d' | '2d' | '3d'> = {
+export type TextureReadOptions = {
+  x?: number;
+  y?: number;
+  z?: number;
+  width?: number;
+  height?: number;
+  depthOrArrayLayers?: number;
+  mipLevel?: number;
+  aspect?: 'all' | 'stencil-only' | 'depth-only';
+};
+
+export type TextureWriteOptions = {
+  x?: number;
+  y?: number;
+  z?: number;
+  width?: number;
+  height?: number;
+  depthOrArrayLayers?: number;
+  mipLevel?: number;
+  aspect?: 'all' | 'stencil-only' | 'depth-only';
+};
+
+const BASE_DIMENSIONS = {
   '1d': '1d',
   '2d': '2d',
   '2d-array': '2d',
   cube: '2d',
   'cube-array': '2d',
   '3d': '3d'
-};
+} as const satisfies Record<string, '1d' | '2d' | '3d'>;
 
 /** Texture properties */
 export type TextureProps = ResourceProps & {
-  /** @deprecated Use AsyncTexture to create textures with data. */
+  /** @deprecated Use DynamicTexture to create textures with data. */
   data?: ExternalImage | TypedArray | null;
   /** Dimension of this texture. Defaults to '2d' */
   dimension?: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d';
@@ -130,19 +157,26 @@ export abstract class Texture extends Resource<TextureProps> {
   /** format of this texture */
   readonly format: TextureFormat;
   /** width in pixels of this texture */
-  width: number;
+  readonly width: number;
   /** height in pixels of this texture */
-  height: number;
+  readonly height: number;
   /** depth of this texture */
-  depth: number;
+  readonly depth: number;
   /** mip levels in this texture */
-  mipLevels: number;
+  readonly mipLevels: number;
+  /** Rows are multiples of this length, padded with extra bytes if needed */
+  readonly byteAlignment: number;
   /** Default sampler for this texture */
   abstract sampler: Sampler;
   /** Default view for this texture */
   abstract view: TextureView;
 
-  /** "Time" of last update. Monotonically increasing timestamp. TODO move to AsyncTexture? */
+  /** The ready promise is always resolved. It is provided for type compatibility with DynamicTexture. */
+  readonly ready: Promise<Texture> = Promise.resolve(this);
+  /** isReady is always true. It is provided for type compatibility with DynamicTexture. */
+  readonly isReady: boolean = true;
+
+  /** "Time" of last update. Monotonically increasing timestamp. TODO move to DynamicTexture? */
   updateTimestamp: number;
 
   override get [Symbol.toStringTag](): string {
@@ -154,7 +188,7 @@ export abstract class Texture extends Resource<TextureProps> {
   }
 
   /** Do not use directly. Create with device.createTexture() */
-  constructor(device: Device, props: TextureProps) {
+  constructor(device: Device, props: TextureProps, backendProps?: {byteAlignment?: number}) {
     props = Texture.normalizeProps(device, props);
     super(device, props, Texture.defaultProps);
     this.dimension = this.props.dimension;
@@ -167,6 +201,10 @@ export abstract class Texture extends Resource<TextureProps> {
     this.depth = this.props.depth;
     this.mipLevels = this.props.mipLevels;
 
+    if (this.dimension === 'cube') {
+      this.depth = 6;
+    }
+
     // Calculate size, if not provided
     if (this.props.width === undefined || this.props.height === undefined) {
       if (device.isExternalImage(props.data)) {
@@ -178,38 +216,122 @@ export abstract class Texture extends Resource<TextureProps> {
         this.height = 1;
         if (this.props.width === undefined || this.props.height === undefined) {
           log.warn(
-            `${this} created with undefined width or height. This is deprecated. Use AsyncTexture instead.`
+            `${this} created with undefined width or height. This is deprecated. Use DynamicTexture instead.`
           )();
         }
       }
     }
 
+    this.byteAlignment = backendProps?.byteAlignment || 1;
+
     // TODO - perhaps this should be set on async write completion?
     this.updateTimestamp = device.incrementTimestamp();
   }
 
+  /**
+   * Create a new texture with the same parameters and optionally a different size
+   * @note Textures are immutable and cannot be resized after creation, but we can create a similar texture with the same parameters but a new size.
+   * @note Does not copy contents of the texture
+   */
+  clone(size?: {width: number; height: number}): Texture {
+    return this.device.createTexture({...this.props, ...size});
+  }
+
   /** Set sampler props associated with this texture */
   setSampler(sampler: Sampler | SamplerProps): void {
     this.sampler = sampler instanceof Sampler ? sampler : this.device.createSampler(sampler);
   }
+
   /** Create a texture view for this texture */
   abstract createView(props: TextureViewProps): TextureView;
+
   /** Copy an image (e.g an ImageBitmap) into the texture */
   abstract copyExternalImage(options: CopyExternalImageOptions): {width: number; height: number};
+
   /** Copy raw image data (bytes) into the texture */
   abstract copyImageData(options: CopyImageDataOptions): void;
-  /** Generate mipmaps (WebGL only) */
-  abstract generateMipmapsWebGL(): void;
 
   /**
-   * Create a new texture with the same parameters and optionally a different size
-   * @note Textures are immutable and cannot be resized after creation, but we can create a similar texture with the same parameters but a new size.
-   * @note Does not copy contents of the texture
+   * Calculates the memory layout of the texture, required when reading and writing data.
+   * @return the memory layout of the texture, in particular bytesPerRow which includes required padding
    */
-  clone(size?: {width: number; height: number}): Texture {
-    return this.device.createTexture({...this.props, ...size});
+  computeMemoryLayout(options_: TextureReadOptions = {}): TextureMemoryLayout {
+    const options = this._normalizeTextureReadOptions(options_);
+    const {width = this.width, height = this.height, depthOrArrayLayers = this.depth} = options;
+    const {format, byteAlignment} = this;
+
+    // TODO - does the overriding above make sense?
+    // return textureFormatDecoder.computeMemoryLayout(this);
+    return textureFormatDecoder.computeMemoryLayout({
+      format,
+      width,
+      height,
+      depth: depthOrArrayLayers,
+      byteAlignment
+    });
+  }
+
+  /**
+   * Read the contents of a texture into a GPU Buffer.
+   * @returns A Buffer containing the texture data.
+   *
+   * @note The memory layout of the texture data is determined by the texture format and dimensions.
+   * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+   * @note The application can call Buffer.readAsync()
+   * @note If not supplied a buffer will be created and the application needs to call Buffer.destroy
+   */
+  readBuffer(options?: TextureReadOptions, buffer?: Buffer): Buffer {
+    throw new Error('readBuffer not implemented');
+  }
+
+  /**
+   * Reads data from a texture into an ArrayBuffer.
+   * @returns An ArrayBuffer containing the texture data.
+   *
+   * @note The memory layout of the texture data is determined by the texture format and dimensions.
+   * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+   */
+  readDataAsync(options?: TextureReadOptions): Promise<ArrayBuffer> {
+    throw new Error('readBuffer not implemented');
+  }
+
+  /**
+   * Writes an GPU Buffer into a texture.
+   *
+   * @note The memory layout of the texture data is determined by the texture format and dimensions.
+   * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+   */
+  writeBuffer(buffer: Buffer, options?: TextureWriteOptions): void {
+    throw new Error('readBuffer not implemented');
+  }
+
+  /**
+   * Writes an array buffer into a texture.
+   *
+   * @note The memory layout of the texture data is determined by the texture format and dimensions.
+   * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+   */
+  writeData(data: ArrayBuffer | ArrayBufferView, options?: TextureWriteOptions): void {
+    throw new Error('readBuffer not implemented');
+  }
+
+  // IMPLEMENTATION SPECIFIC
+
+  /**
+   * WebGL can read data synchronously.
+   * @note While it is convenient, the performance penalty is very significant
+   */
+  readDataSyncWebGL(options?: TextureReadOptions): ArrayBuffer | ArrayBufferView {
+    throw new Error('readDataSyncWebGL not available');
   }
 
+  /** Generate mipmaps (WebGL only) */
+  generateMipmapsWebGL(): void {
+    throw new Error('generateMipmapsWebGL not available');
+  }
+
+  // HELPERS
+
   /** Ensure we have integer coordinates */
   protected static normalizeProps(device: Device, props: TextureProps): TextureProps {
     const newProps = {...props};
@@ -225,8 +347,6 @@ export abstract class Texture extends Resource<TextureProps> {
     return newProps;
   }
 
-  // HELPERS
-
   /** Initialize texture with supplied props */
   // eslint-disable-next-line max-statements
   _initializeData(data: TextureProps['data']): void {
@@ -290,13 +410,30 @@ export abstract class Texture extends Resource<TextureProps> {
     return options;
   }
 
-  /** Default options */
+  _normalizeTextureReadOptions(options_: TextureReadOptions): Required<TextureReadOptions> {
+    const {width, height} = this;
+    const options = {...Texture.defaultTextureReadOptions, width, height, ...options_};
+    // WebGL will error if we try to copy outside the bounds of the texture
+    options.width = Math.min(options.width, this.width - options.x);
+    options.height = Math.min(options.height, this.height - options.y);
+    return options;
+  }
+
+  _normalizeTextureWriteOptions(options_: TextureWriteOptions): Required<TextureWriteOptions> {
+    const {width, height} = this;
+    const options = {...Texture.defaultTextureReadOptions, width, height, ...options_};
+    // WebGL will error if we try to copy outside the bounds of the texture
+    options.width = Math.min(options.width, this.width - options.x);
+    options.height = Math.min(options.height, this.height - options.y);
+    return options;
+  }
+
   static override defaultProps: Required<TextureProps> = {
     ...Resource.defaultProps,
     data: null,
     dimension: '2d',
     format: 'rgba8unorm',
-    usage: Texture.TEXTURE | Texture.RENDER_ATTACHMENT | Texture.COPY_DST,
+    usage: Texture.SAMPLE | Texture.RENDER | Texture.COPY_DST,
     width: undefined!,
     height: undefined!,
     depth: 1,
@@ -335,4 +472,15 @@ export abstract class Texture extends Resource<TextureProps> {
     premultipliedAlpha: false,
     flipY: false
   };
+
+  protected static defaultTextureReadOptions: Required<TextureReadOptions> = {
+    x: 0,
+    y: 0,
+    z: 0,
+    width: undefined!,
+    height: undefined!,
+    depthOrArrayLayers: 1,
+    mipLevel: 0,
+    aspect: 'all'
+  };
 }

package/src/adapter-utils/format-compiler-log.ts

@@ -21,25 +21,33 @@ export function formatCompilerLog(
   switch (options?.showSourceCode || 'no') {
     case 'all':
       // Parse the error - note: browser and driver dependent
-      let currentMessage = 0;
+      let currentMessageIndex = 0;
       for (let lineNum = 1; lineNum <= lines.length; lineNum++) {
-        formattedLog += getNumberedLine(lines[lineNum - 1], lineNum, options);
-        while (log.length > currentMessage && log[currentMessage].lineNum === lineNum) {
-          const message = log[currentMessage++];
-          formattedLog += formatCompilerMessage(message, lines, message.lineNum, {
+        const line = lines[lineNum - 1];
+        const currentMessage = log[currentMessageIndex];
+        if (line && currentMessage) {
+          formattedLog += getNumberedLine(line, lineNum, options);
+        }
+        while (log.length > currentMessageIndex && currentMessage.lineNum === lineNum) {
+          const message = log[currentMessageIndex++];
+          if (message) {
+            formattedLog += formatCompilerMessage(message, lines, message.lineNum, {
+              ...options,
+              inlineSource: false
+            });
+          }
+        }
+      }
+      // Print any remaining messages
+      while (log.length > currentMessageIndex) {
+        const message = log[currentMessageIndex++];
+        if (message) {
+          formattedLog += formatCompilerMessage(message, [], 0, {
             ...options,
             inlineSource: false
           });
         }
       }
-      // Print any remaining messages
-      while (log.length > currentMessage) {
-        const message = log[currentMessage++];
-        formattedLog += formatCompilerMessage(message, [], 0, {
-          ...options,
-          inlineSource: false
-        });
-      }
       return formattedLog;
 
     case 'issues':
@@ -75,9 +83,9 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
 
 `;
   }
-  const color = message.type === 'error' ? 'red' : '#8B4000'; // dark orange
+  const color = message.type === 'error' ? 'red' : 'orange';
   return options?.html
-    ? `<div class='luma-compiler-log-error' style="color:${color};"><b> ${message.type.toUpperCase()}: ${
+    ? `<div class='luma-compiler-log-${message.type}' style="color:${color};"><b> ${message.type.toUpperCase()}: ${
         message.message
       }</b></div>`
     : `${message.type.toUpperCase()}: ${message.message}`;