@xterm/xterm 5.4.0-beta.1

package/src/browser/services/Services.ts

@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IEvent } from 'common/EventEmitter';
+import { IRenderDimensions, IRenderer } from 'browser/renderer/shared/Types';
+import { IColorSet, ReadonlyColorSet } from 'browser/Types';
+import { ISelectionRedrawRequestEvent as ISelectionRequestRedrawEvent, ISelectionRequestScrollLinesEvent } from 'browser/selection/Types';
+import { createDecorator } from 'common/services/ServiceRegistry';
+import { AllColorIndex, IDisposable } from 'common/Types';
+
+export const ICharSizeService = createDecorator<ICharSizeService>('CharSizeService');
+export interface ICharSizeService {
+  serviceBrand: undefined;
+
+  readonly width: number;
+  readonly height: number;
+  readonly hasValidSize: boolean;
+
+  readonly onCharSizeChange: IEvent<void>;
+
+  measure(): void;
+}
+
+export const ICoreBrowserService = createDecorator<ICoreBrowserService>('CoreBrowserService');
+export interface ICoreBrowserService {
+  serviceBrand: undefined;
+
+  readonly isFocused: boolean;
+
+  readonly onDprChange: IEvent<number>;
+  readonly onWindowChange: IEvent<Window & typeof globalThis>;
+
+  /**
+   * Gets or sets the parent window that the terminal is rendered into. DOM and rendering APIs (e.g.
+   * requestAnimationFrame) should be invoked in the context of this window. This should be set when
+   * the window hosting the xterm.js instance changes.
+   */
+  window: Window & typeof globalThis;
+  /**
+   * The document of the primary window to be used to create elements when working with multiple
+   * windows. This is defined by the documentOverride setting.
+   */
+  readonly mainDocument: Document;
+  /**
+   * Helper for getting the devicePixelRatio of the parent window.
+   */
+  readonly dpr: number;
+}
+
+export const IMouseService = createDecorator<IMouseService>('MouseService');
+export interface IMouseService {
+  serviceBrand: undefined;
+
+  getCoords(event: {clientX: number, clientY: number}, element: HTMLElement, colCount: number, rowCount: number, isSelection?: boolean): [number, number] | undefined;
+  getMouseReportCoords(event: MouseEvent, element: HTMLElement): { col: number, row: number, x: number, y: number } | undefined;
+}
+
+export const IRenderService = createDecorator<IRenderService>('RenderService');
+export interface IRenderService extends IDisposable {
+  serviceBrand: undefined;
+
+  onDimensionsChange: IEvent<IRenderDimensions>;
+  /**
+   * Fires when buffer changes are rendered. This does not fire when only cursor
+   * or selections are rendered.
+   */
+  onRenderedViewportChange: IEvent<{ start: number, end: number }>;
+  /**
+   * Fires on render
+   */
+  onRender: IEvent<{ start: number, end: number }>;
+  onRefreshRequest: IEvent<{ start: number, end: number }>;
+
+  dimensions: IRenderDimensions;
+
+  addRefreshCallback(callback: FrameRequestCallback): number;
+
+  refreshRows(start: number, end: number): void;
+  clearTextureAtlas(): void;
+  resize(cols: number, rows: number): void;
+  hasRenderer(): boolean;
+  setRenderer(renderer: IRenderer): void;
+  handleDevicePixelRatioChange(): void;
+  handleResize(cols: number, rows: number): void;
+  handleCharSizeChanged(): void;
+  handleBlur(): void;
+  handleFocus(): void;
+  handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
+  handleCursorMove(): void;
+  clear(): void;
+}
+
+export const ISelectionService = createDecorator<ISelectionService>('SelectionService');
+export interface ISelectionService {
+  serviceBrand: undefined;
+
+  readonly selectionText: string;
+  readonly hasSelection: boolean;
+  readonly selectionStart: [number, number] | undefined;
+  readonly selectionEnd: [number, number] | undefined;
+
+  readonly onLinuxMouseSelection: IEvent<string>;
+  readonly onRequestRedraw: IEvent<ISelectionRequestRedrawEvent>;
+  readonly onRequestScrollLines: IEvent<ISelectionRequestScrollLinesEvent>;
+  readonly onSelectionChange: IEvent<void>;
+
+  disable(): void;
+  enable(): void;
+  reset(): void;
+  setSelection(row: number, col: number, length: number): void;
+  selectAll(): void;
+  selectLines(start: number, end: number): void;
+  clearSelection(): void;
+  rightClickSelect(event: MouseEvent): void;
+  shouldColumnSelect(event: KeyboardEvent | MouseEvent): boolean;
+  shouldForceSelection(event: MouseEvent): boolean;
+  refresh(isLinuxMouseSelection?: boolean): void;
+  handleMouseDown(event: MouseEvent): void;
+  isCellInSelection(x: number, y: number): boolean;
+}
+
+export const ICharacterJoinerService = createDecorator<ICharacterJoinerService>('CharacterJoinerService');
+export interface ICharacterJoinerService {
+  serviceBrand: undefined;
+
+  register(handler: (text: string) => [number, number][]): number;
+  deregister(joinerId: number): boolean;
+  getJoinedCharacters(row: number): [number, number][];
+}
+
+export const IThemeService = createDecorator<IThemeService>('ThemeService');
+export interface IThemeService {
+  serviceBrand: undefined;
+
+  readonly colors: ReadonlyColorSet;
+
+  readonly onChangeColors: IEvent<ReadonlyColorSet>;
+
+  restoreColor(slot?: AllColorIndex): void;
+  /**
+   * Allows external modifying of colors in the theme, this is used instead of {@link colors} to
+   * prevent accidental writes.
+   */
+  modifyColors(callback: (colors: IColorSet) => void): void;
+}

package/src/browser/services/ThemeService.ts

@@ -0,0 +1,237 @@
+/**
+ * Copyright (c) 2022 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ColorContrastCache } from 'browser/ColorContrastCache';
+import { IThemeService } from 'browser/services/Services';
+import { IColorContrastCache, IColorSet, ReadonlyColorSet } from 'browser/Types';
+import { channels, color, css, NULL_COLOR } from 'common/Color';
+import { EventEmitter } from 'common/EventEmitter';
+import { Disposable } from 'common/Lifecycle';
+import { IOptionsService, ITheme } from 'common/services/Services';
+import { AllColorIndex, IColor, SpecialColorIndex } from 'common/Types';
+
+interface IRestoreColorSet {
+  foreground: IColor;
+  background: IColor;
+  cursor: IColor;
+  ansi: IColor[];
+}
+
+
+const DEFAULT_FOREGROUND = css.toColor('#ffffff');
+const DEFAULT_BACKGROUND = css.toColor('#000000');
+const DEFAULT_CURSOR = css.toColor('#ffffff');
+const DEFAULT_CURSOR_ACCENT = css.toColor('#000000');
+const DEFAULT_SELECTION = {
+  css: 'rgba(255, 255, 255, 0.3)',
+  rgba: 0xFFFFFF4D
+};
+
+// An IIFE to generate DEFAULT_ANSI_COLORS.
+export const DEFAULT_ANSI_COLORS = Object.freeze((() => {
+  const colors = [
+    // dark:
+    css.toColor('#2e3436'),
+    css.toColor('#cc0000'),
+    css.toColor('#4e9a06'),
+    css.toColor('#c4a000'),
+    css.toColor('#3465a4'),
+    css.toColor('#75507b'),
+    css.toColor('#06989a'),
+    css.toColor('#d3d7cf'),
+    // bright:
+    css.toColor('#555753'),
+    css.toColor('#ef2929'),
+    css.toColor('#8ae234'),
+    css.toColor('#fce94f'),
+    css.toColor('#729fcf'),
+    css.toColor('#ad7fa8'),
+    css.toColor('#34e2e2'),
+    css.toColor('#eeeeec')
+  ];
+
+  // Fill in the remaining 240 ANSI colors.
+  // Generate colors (16-231)
+  const v = [0x00, 0x5f, 0x87, 0xaf, 0xd7, 0xff];
+  for (let i = 0; i < 216; i++) {
+    const r = v[(i / 36) % 6 | 0];
+    const g = v[(i / 6) % 6 | 0];
+    const b = v[i % 6];
+    colors.push({
+      css: channels.toCss(r, g, b),
+      rgba: channels.toRgba(r, g, b)
+    });
+  }
+
+  // Generate greys (232-255)
+  for (let i = 0; i < 24; i++) {
+    const c = 8 + i * 10;
+    colors.push({
+      css: channels.toCss(c, c, c),
+      rgba: channels.toRgba(c, c, c)
+    });
+  }
+
+  return colors;
+})());
+
+export class ThemeService extends Disposable implements IThemeService {
+  public serviceBrand: undefined;
+
+  private _colors: IColorSet;
+  private _contrastCache: IColorContrastCache = new ColorContrastCache();
+  private _halfContrastCache: IColorContrastCache = new ColorContrastCache();
+  private _restoreColors!: IRestoreColorSet;
+
+  public get colors(): ReadonlyColorSet { return this._colors; }
+
+  private readonly _onChangeColors = this.register(new EventEmitter<ReadonlyColorSet>());
+  public readonly onChangeColors = this._onChangeColors.event;
+
+  constructor(
+    @IOptionsService private readonly _optionsService: IOptionsService
+  ) {
+    super();
+
+    this._colors = {
+      foreground: DEFAULT_FOREGROUND,
+      background: DEFAULT_BACKGROUND,
+      cursor: DEFAULT_CURSOR,
+      cursorAccent: DEFAULT_CURSOR_ACCENT,
+      selectionForeground: undefined,
+      selectionBackgroundTransparent: DEFAULT_SELECTION,
+      selectionBackgroundOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
+      selectionInactiveBackgroundTransparent: DEFAULT_SELECTION,
+      selectionInactiveBackgroundOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
+      ansi: DEFAULT_ANSI_COLORS.slice(),
+      contrastCache: this._contrastCache,
+      halfContrastCache: this._halfContrastCache
+    };
+    this._updateRestoreColors();
+    this._setTheme(this._optionsService.rawOptions.theme);
+
+    this.register(this._optionsService.onSpecificOptionChange('minimumContrastRatio', () => this._contrastCache.clear()));
+    this.register(this._optionsService.onSpecificOptionChange('theme', () => this._setTheme(this._optionsService.rawOptions.theme)));
+  }
+
+  /**
+   * Sets the terminal's theme.
+   * @param theme The  theme to use. If a partial theme is provided then default
+   * colors will be used where colors are not defined.
+   */
+  private _setTheme(theme: ITheme = {}): void {
+    const colors = this._colors;
+    colors.foreground = parseColor(theme.foreground, DEFAULT_FOREGROUND);
+    colors.background = parseColor(theme.background, DEFAULT_BACKGROUND);
+    colors.cursor = parseColor(theme.cursor, DEFAULT_CURSOR);
+    colors.cursorAccent = parseColor(theme.cursorAccent, DEFAULT_CURSOR_ACCENT);
+    colors.selectionBackgroundTransparent = parseColor(theme.selectionBackground, DEFAULT_SELECTION);
+    colors.selectionBackgroundOpaque = color.blend(colors.background, colors.selectionBackgroundTransparent);
+    colors.selectionInactiveBackgroundTransparent = parseColor(theme.selectionInactiveBackground, colors.selectionBackgroundTransparent);
+    colors.selectionInactiveBackgroundOpaque = color.blend(colors.background, colors.selectionInactiveBackgroundTransparent);
+    colors.selectionForeground = theme.selectionForeground ? parseColor(theme.selectionForeground, NULL_COLOR) : undefined;
+    if (colors.selectionForeground === NULL_COLOR) {
+      colors.selectionForeground = undefined;
+    }
+
+    /**
+     * If selection color is opaque, blend it with background with 0.3 opacity
+     * Issue #2737
+     */
+    if (color.isOpaque(colors.selectionBackgroundTransparent)) {
+      const opacity = 0.3;
+      colors.selectionBackgroundTransparent = color.opacity(colors.selectionBackgroundTransparent, opacity);
+    }
+    if (color.isOpaque(colors.selectionInactiveBackgroundTransparent)) {
+      const opacity = 0.3;
+      colors.selectionInactiveBackgroundTransparent = color.opacity(colors.selectionInactiveBackgroundTransparent, opacity);
+    }
+    colors.ansi = DEFAULT_ANSI_COLORS.slice();
+    colors.ansi[0] = parseColor(theme.black, DEFAULT_ANSI_COLORS[0]);
+    colors.ansi[1] = parseColor(theme.red, DEFAULT_ANSI_COLORS[1]);
+    colors.ansi[2] = parseColor(theme.green, DEFAULT_ANSI_COLORS[2]);
+    colors.ansi[3] = parseColor(theme.yellow, DEFAULT_ANSI_COLORS[3]);
+    colors.ansi[4] = parseColor(theme.blue, DEFAULT_ANSI_COLORS[4]);
+    colors.ansi[5] = parseColor(theme.magenta, DEFAULT_ANSI_COLORS[5]);
+    colors.ansi[6] = parseColor(theme.cyan, DEFAULT_ANSI_COLORS[6]);
+    colors.ansi[7] = parseColor(theme.white, DEFAULT_ANSI_COLORS[7]);
+    colors.ansi[8] = parseColor(theme.brightBlack, DEFAULT_ANSI_COLORS[8]);
+    colors.ansi[9] = parseColor(theme.brightRed, DEFAULT_ANSI_COLORS[9]);
+    colors.ansi[10] = parseColor(theme.brightGreen, DEFAULT_ANSI_COLORS[10]);
+    colors.ansi[11] = parseColor(theme.brightYellow, DEFAULT_ANSI_COLORS[11]);
+    colors.ansi[12] = parseColor(theme.brightBlue, DEFAULT_ANSI_COLORS[12]);
+    colors.ansi[13] = parseColor(theme.brightMagenta, DEFAULT_ANSI_COLORS[13]);
+    colors.ansi[14] = parseColor(theme.brightCyan, DEFAULT_ANSI_COLORS[14]);
+    colors.ansi[15] = parseColor(theme.brightWhite, DEFAULT_ANSI_COLORS[15]);
+    if (theme.extendedAnsi) {
+      const colorCount = Math.min(colors.ansi.length - 16, theme.extendedAnsi.length);
+      for (let i = 0; i < colorCount; i++) {
+        colors.ansi[i + 16] = parseColor(theme.extendedAnsi[i], DEFAULT_ANSI_COLORS[i + 16]);
+      }
+    }
+    // Clear our the cache
+    this._contrastCache.clear();
+    this._halfContrastCache.clear();
+    this._updateRestoreColors();
+    this._onChangeColors.fire(this.colors);
+  }
+
+  public restoreColor(slot?: AllColorIndex): void {
+    this._restoreColor(slot);
+    this._onChangeColors.fire(this.colors);
+  }
+
+  private _restoreColor(slot: AllColorIndex | undefined): void {
+    // unset slot restores all ansi colors
+    if (slot === undefined) {
+      for (let i = 0; i < this._restoreColors.ansi.length; ++i) {
+        this._colors.ansi[i] = this._restoreColors.ansi[i];
+      }
+      return;
+    }
+    switch (slot) {
+      case SpecialColorIndex.FOREGROUND:
+        this._colors.foreground = this._restoreColors.foreground;
+        break;
+      case SpecialColorIndex.BACKGROUND:
+        this._colors.background = this._restoreColors.background;
+        break;
+      case SpecialColorIndex.CURSOR:
+        this._colors.cursor = this._restoreColors.cursor;
+        break;
+      default:
+        this._colors.ansi[slot] = this._restoreColors.ansi[slot];
+    }
+  }
+
+  public modifyColors(callback: (colors: IColorSet) => void): void {
+    callback(this._colors);
+    // Assume the change happened
+    this._onChangeColors.fire(this.colors);
+  }
+
+  private _updateRestoreColors(): void {
+    this._restoreColors = {
+      foreground: this._colors.foreground,
+      background: this._colors.background,
+      cursor: this._colors.cursor,
+      ansi: this._colors.ansi.slice()
+    };
+  }
+}
+
+function parseColor(
+  cssString: string | undefined,
+  fallback: IColor
+): IColor {
+  if (cssString !== undefined) {
+    try {
+      return css.toColor(cssString);
+    } catch {
+      // no-op
+    }
+  }
+  return fallback;
+}

package/src/common/CircularList.ts

@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ICircularList } from 'common/Types';
+import { EventEmitter } from 'common/EventEmitter';
+import { Disposable } from 'common/Lifecycle';
+
+export interface IInsertEvent {
+  index: number;
+  amount: number;
+}
+
+export interface IDeleteEvent {
+  index: number;
+  amount: number;
+}
+
+/**
+ * Represents a circular list; a list with a maximum size that wraps around when push is called,
+ * overriding values at the start of the list.
+ */
+export class CircularList<T> extends Disposable implements ICircularList<T> {
+  protected _array: (T | undefined)[];
+  private _startIndex: number;
+  private _length: number;
+
+  public readonly onDeleteEmitter = this.register(new EventEmitter<IDeleteEvent>());
+  public readonly onDelete = this.onDeleteEmitter.event;
+  public readonly onInsertEmitter = this.register(new EventEmitter<IInsertEvent>());
+  public readonly onInsert = this.onInsertEmitter.event;
+  public readonly onTrimEmitter = this.register(new EventEmitter<number>());
+  public readonly onTrim = this.onTrimEmitter.event;
+
+  constructor(
+    private _maxLength: number
+  ) {
+    super();
+    this._array = new Array<T>(this._maxLength);
+    this._startIndex = 0;
+    this._length = 0;
+  }
+
+  public get maxLength(): number {
+    return this._maxLength;
+  }
+
+  public set maxLength(newMaxLength: number) {
+    // There was no change in maxLength, return early.
+    if (this._maxLength === newMaxLength) {
+      return;
+    }
+
+    // Reconstruct array, starting at index 0. Only transfer values from the
+    // indexes 0 to length.
+    const newArray = new Array<T | undefined>(newMaxLength);
+    for (let i = 0; i < Math.min(newMaxLength, this.length); i++) {
+      newArray[i] = this._array[this._getCyclicIndex(i)];
+    }
+    this._array = newArray;
+    this._maxLength = newMaxLength;
+    this._startIndex = 0;
+  }
+
+  public get length(): number {
+    return this._length;
+  }
+
+  public set length(newLength: number) {
+    if (newLength > this._length) {
+      for (let i = this._length; i < newLength; i++) {
+        this._array[i] = undefined;
+      }
+    }
+    this._length = newLength;
+  }
+
+  /**
+   * Gets the value at an index.
+   *
+   * Note that for performance reasons there is no bounds checking here, the index reference is
+   * circular so this should always return a value and never throw.
+   * @param index The index of the value to get.
+   * @returns The value corresponding to the index.
+   */
+  public get(index: number): T | undefined {
+    return this._array[this._getCyclicIndex(index)];
+  }
+
+  /**
+   * Sets the value at an index.
+   *
+   * Note that for performance reasons there is no bounds checking here, the index reference is
+   * circular so this should always return a value and never throw.
+   * @param index The index to set.
+   * @param value The value to set.
+   */
+  public set(index: number, value: T | undefined): void {
+    this._array[this._getCyclicIndex(index)] = value;
+  }
+
+  /**
+   * Pushes a new value onto the list, wrapping around to the start of the array, overriding index 0
+   * if the maximum length is reached.
+   * @param value The value to push onto the list.
+   */
+  public push(value: T): void {
+    this._array[this._getCyclicIndex(this._length)] = value;
+    if (this._length === this._maxLength) {
+      this._startIndex = ++this._startIndex % this._maxLength;
+      this.onTrimEmitter.fire(1);
+    } else {
+      this._length++;
+    }
+  }
+
+  /**
+   * Advance ringbuffer index and return current element for recycling.
+   * Note: The buffer must be full for this method to work.
+   * @throws When the buffer is not full.
+   */
+  public recycle(): T {
+    if (this._length !== this._maxLength) {
+      throw new Error('Can only recycle when the buffer is full');
+    }
+    this._startIndex = ++this._startIndex % this._maxLength;
+    this.onTrimEmitter.fire(1);
+    return this._array[this._getCyclicIndex(this._length - 1)]!;
+  }
+
+  /**
+   * Ringbuffer is at max length.
+   */
+  public get isFull(): boolean {
+    return this._length === this._maxLength;
+  }
+
+  /**
+   * Removes and returns the last value on the list.
+   * @returns The popped value.
+   */
+  public pop(): T | undefined {
+    return this._array[this._getCyclicIndex(this._length-- - 1)];
+  }
+
+  /**
+   * Deletes and/or inserts items at a particular index (in that order). Unlike
+   * Array.prototype.splice, this operation does not return the deleted items as a new array in
+   * order to save creating a new array. Note that this operation may shift all values in the list
+   * in the worst case.
+   * @param start The index to delete and/or insert.
+   * @param deleteCount The number of elements to delete.
+   * @param items The items to insert.
+   */
+  public splice(start: number, deleteCount: number, ...items: T[]): void {
+    // Delete items
+    if (deleteCount) {
+      for (let i = start; i < this._length - deleteCount; i++) {
+        this._array[this._getCyclicIndex(i)] = this._array[this._getCyclicIndex(i + deleteCount)];
+      }
+      this._length -= deleteCount;
+      this.onDeleteEmitter.fire({ index: start, amount: deleteCount });
+    }
+
+    // Add items
+    for (let i = this._length - 1; i >= start; i--) {
+      this._array[this._getCyclicIndex(i + items.length)] = this._array[this._getCyclicIndex(i)];
+    }
+    for (let i = 0; i < items.length; i++) {
+      this._array[this._getCyclicIndex(start + i)] = items[i];
+    }
+    if (items.length) {
+      this.onInsertEmitter.fire({ index: start, amount: items.length });
+    }
+
+    // Adjust length as needed
+    if (this._length + items.length > this._maxLength) {
+      const countToTrim = (this._length + items.length) - this._maxLength;
+      this._startIndex += countToTrim;
+      this._length = this._maxLength;
+      this.onTrimEmitter.fire(countToTrim);
+    } else {
+      this._length += items.length;
+    }
+  }
+
+  /**
+   * Trims a number of items from the start of the list.
+   * @param count The number of items to remove.
+   */
+  public trimStart(count: number): void {
+    if (count > this._length) {
+      count = this._length;
+    }
+    this._startIndex += count;
+    this._length -= count;
+    this.onTrimEmitter.fire(count);
+  }
+
+  public shiftElements(start: number, count: number, offset: number): void {
+    if (count <= 0) {
+      return;
+    }
+    if (start < 0 || start >= this._length) {
+      throw new Error('start argument out of range');
+    }
+    if (start + offset < 0) {
+      throw new Error('Cannot shift elements in list beyond index 0');
+    }
+
+    if (offset > 0) {
+      for (let i = count - 1; i >= 0; i--) {
+        this.set(start + i + offset, this.get(start + i));
+      }
+      const expandListBy = (start + count + offset) - this._length;
+      if (expandListBy > 0) {
+        this._length += expandListBy;
+        while (this._length > this._maxLength) {
+          this._length--;
+          this._startIndex++;
+          this.onTrimEmitter.fire(1);
+        }
+      }
+    } else {
+      for (let i = 0; i < count; i++) {
+        this.set(start + i + offset, this.get(start + i));
+      }
+    }
+  }
+
+  /**
+   * Gets the cyclic index for the specified regular index. The cyclic index can then be used on the
+   * backing array to get the element associated with the regular index.
+   * @param index The regular index.
+   * @returns The cyclic index.
+   */
+  private _getCyclicIndex(index: number): number {
+    return (this._startIndex + index) % this._maxLength;
+  }
+}

package/src/common/Clone.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+/*
+ * A simple utility for cloning values
+ */
+export function clone<T>(val: T, depth: number = 5): T {
+  if (typeof val !== 'object') {
+    return val;
+  }
+
+  // If we're cloning an array, use an array as the base, otherwise use an object
+  const clonedObject: any = Array.isArray(val) ? [] : {};
+
+  for (const key in val) {
+    // Recursively clone eack item unless we're at the maximum depth
+    clonedObject[key] = depth <= 1 ? val[key] : (val[key] && clone(val[key], depth - 1));
+  }
+
+  return clonedObject as T;
+}