Migrate from clone to structuredClone

GitOrigin-RevId: ce20da79c46a6a1150635e2305748e60f824f061

Author: underoot

.browserslistrc

@@ -10,16 +10,16 @@
 #
 #   Browser        | Limiting Feature      | Min
 #   ---------------|-----------------------|----
-#   Chrome         | Object.hasOwn         | 93
+#   Chrome         | structuredClone       | 98
 #   Safari         | Array.at              | 15.4
 #   Firefox        | Object.hasOwn         | 115
-#   Edge           | Object.hasOwn         | 93
-#   Chrome Android | Object.hasOwn         | 93
+#   Edge           | structuredClone       | 98
+#   Chrome Android | structuredClone       | 98
 #   iOS Safari     | Array.at              | 15.4
 
 chrome >= 93
 safari >= 15.4
 firefox >= 115
-edge >= 93
-and_chr >= 93
+edge >= 98
+and_chr >= 98
 ios_saf >= 15.4

src/style/properties.ts

@@ -1,5 +1,5 @@
 import assert from '../style-spec/util/assert';
-import {clone, easeCubicInOut, sphericalDirectionToCartesian, sphericalPositionToCartesian} from '../util/util';
+import {easeCubicInOut, sphericalDirectionToCartesian, sphericalPositionToCartesian} from '../util/util';
 import * as interpolate from '../style-spec/util/interpolate';
 import {number as interpolateValue} from '../style-spec/util/interpolate';
 import {normalizePropertyExpression} from '../style-spec/expression/index';
@@ -209,7 +209,7 @@ export class Transitionable<Props extends {[Key in keyof Props]: Props[Key]}> {
     }
 
     getValue<S extends keyof Props, T>(name: S): PropertyValueSpecification<T> | undefined {
-        return clone(this._values[name].value.value as PropertyValueSpecification<T> | undefined);
+        return structuredClone(this._values[name].value.value as PropertyValueSpecification<T> | undefined);
     }
 
     setValue<S extends keyof Props, T>(name: S, value?: PropertyValueSpecification<T>) {
@@ -218,7 +218,7 @@ export class Transitionable<Props extends {[Key in keyof Props]: Props[Key]}> {
         }
         // Note that we do not _remove_ an own property in the case where a value is being reset
         // to the default: the transition might still be non-default.
-        this._values[name].value = new PropertyValue(this._values[name].property, value === null ? undefined : clone(value), this._scope, this._options, this._iconImageUseTheme);
+        this._values[name].value = new PropertyValue(this._values[name].property, value === null ? undefined : structuredClone(value), this._scope, this._options, this._iconImageUseTheme);
         if (this._values[name].value.expression.configDependencies) {
             this.configDependencies = new Set([...this.configDependencies, ...this._values[name].value.expression.configDependencies]);
             this._isIndoorDependent = this._isIndoorDependent || this._values[name].value.isIndoorDependent();
@@ -245,14 +245,14 @@ export class Transitionable<Props extends {[Key in keyof Props]: Props[Key]}> {
     }
 
     getTransition<S extends keyof Props>(name: S): TransitionSpecification | undefined {
-        return clone(this._values[name].transition);
+        return structuredClone(this._values[name].transition);
     }
 
     setTransition<S extends keyof Props>(name: S, value?: TransitionSpecification) {
         if (!Object.hasOwn(this._values, name)) {
             this._values[name] = new TransitionablePropertyValue(this._values[name].property) as TransitionablePropertyValues<Props>[S];
         }
-        this._values[name].transition = clone(value) || undefined;
+        this._values[name].transition = structuredClone(value) || undefined;
     }
 
     serialize(): PropertyValueSpecifications<Props> {
@@ -474,11 +474,11 @@ export class Layout<Props extends {
     }
 
     getValue<S extends keyof Props, T>(name: S): PropertyValueSpecification<T> | void {
-        return clone(this._values[name].value as PropertyValueSpecification<T> | void);
+        return structuredClone(this._values[name].value as PropertyValueSpecification<T> | void);
     }
 
     setValue<S extends keyof Props>(name: S, value: unknown) {
-        this._values[name] = new PropertyValue(this._values[name].property, value === null ? undefined : clone(value), this._scope, this._options, this._iconImageUseTheme) as PropertyValues<Props>[S];
+        this._values[name] = new PropertyValue(this._values[name].property, value === null ? undefined : structuredClone(value), this._scope, this._options, this._iconImageUseTheme) as PropertyValues<Props>[S];
         if (this._values[name].expression.configDependencies) {
             this.configDependencies = new Set([...this.configDependencies, ...this._values[name].expression.configDependencies]);
             this._isIndoorDependent = this._isIndoorDependent || this._values[name].isIndoorDependent();

src/style/style.ts

@@ -11,7 +11,7 @@ import Terrain, {DrapeRenderMode} from './terrain';
 import Fog from './fog';
 import Snow from './snow';
 import Rain from './rain';
-import {pick, clone, deepEqual, filterObject, cartesianPositionToSpherical, warnOnce} from '../util/util';
+import {pick, deepEqual, filterObject, cartesianPositionToSpherical, warnOnce} from '../util/util';
 import {getJSON, getReferrer, ResourceType} from '../util/ajax';
 import {isMapboxURL} from '../util/mapbox_url';
 import {stripQueryParameters} from '../util/url';
@@ -918,7 +918,7 @@ class Style extends Evented<MapEvents> {
             this.addSource(id, json.sources[id], {validate: false, isInitialLoad: true});
         }
 
-        this.stylesheet = clone(json);
+        this.stylesheet = structuredClone(json);
 
         const proceedWithStyleLoad = () => {
             if (json.iconsets) {
@@ -2212,7 +2212,7 @@ class Style extends Evented<MapEvents> {
 
         if (emitValidationErrors(this, validateStyle(nextState))) return false;
 
-        nextState = clone(nextState);
+        nextState = structuredClone(nextState);
         nextState.layers = deref(nextState.layers);
 
         const changes = diffStyles(this.serialize(), nextState)
@@ -2984,7 +2984,7 @@ class Style extends Evented<MapEvents> {
         } else {
             if (typeof layerObject.source === 'object') {
                 this.addSource(id, layerObject.source);
-                layerObject = clone(layerObject);
+                layerObject = structuredClone(layerObject);
                 layerObject = (Object.assign(layerObject, {source: id}));
             }
 
@@ -3242,7 +3242,7 @@ class Style extends Evented<MapEvents> {
             return;
         }
 
-        layer.filter = clone(filter);
+        layer.filter = structuredClone(filter);
         this._updateLayer(layer);
     }
 
@@ -3254,7 +3254,7 @@ class Style extends Evented<MapEvents> {
     getFilter(layerId: string): FilterSpecification | null | undefined {
         const layer = this._checkLayer(layerId);
         if (!layer) return;
-        return clone(layer.filter);
+        return structuredClone(layer.filter);
     }
 
     setLayoutProperty<T extends keyof LayoutSpecification>(layerId: string, name: T, value: LayoutSpecification[T], options: StyleSetterOptions = {}) {
@@ -4000,7 +4000,7 @@ class Style extends Evented<MapEvents> {
             if ("source" in options && typeof options.source === 'object') {
                 const id = 'terrain-dem-src';
                 this.addSource(id, options.source);
-                options = clone(options);
+                options = structuredClone(options);
                 options = Object.assign(options, {source: id});
             }
 

src/util/util.ts

@@ -447,21 +447,6 @@ export function filterObject<T extends Record<PropertyKey, unknown>>(
     return output;
 }
 
-/**
- * Deeply clones two objects.
- *
- * @private
- */
-export function clone<T>(input: T): T {
-    if (Array.isArray(input)) {
-        return input.map(clone) as T;
-    } else if (typeof input === 'object' && input) {
-        return mapObject(input as Record<PropertyKey, unknown>, clone) as T;
-    } else {
-        return input;
-    }
-}
-
 /**
  * Maps a value from a range between [min, max] to the range [outMin, outMax]
  *

test/unit/util/util.test.ts

@@ -2,7 +2,7 @@
 // @ts-nocheck
 import Point from '@mapbox/point-geometry';
 import {describe, test, expect} from '../../util/vitest';
-import {mapValue, degToRad, radToDeg, easeCubicInOut, getAABBPointSquareDist, furthestTileCorner, keysDifference, pick, uniqueId, bindAll, asyncAll, clamp, smoothstep, wrap, bezier, mapObject, filterObject, deepEqual, clone, arraysIntersect, isCounterClockwise, parseCacheControl, parseExpiryData, uuid, validateUuid, nextPowerOfTwo, isPowerOfTwo, bufferConvexPolygon, prevPowerOfTwo, shortestAngle} from '../../../src/util/util';
+import {mapValue, degToRad, radToDeg, easeCubicInOut, getAABBPointSquareDist, furthestTileCorner, keysDifference, pick, uniqueId, bindAll, asyncAll, clamp, smoothstep, wrap, bezier, mapObject, filterObject, deepEqual, arraysIntersect, isCounterClockwise, parseCacheControl, parseExpiryData, uuid, validateUuid, nextPowerOfTwo, isPowerOfTwo, bufferConvexPolygon, prevPowerOfTwo, shortestAngle} from '../../../src/util/util';
 
 const EPSILON = 1e-8;
 
@@ -265,36 +265,6 @@ describe('util', () => {
         expect(deepEqual(null, null)).toBeTruthy();
     });
 
-    describe('clone', () => {
-        test('array', () => {
-            const input = [false, 1, 'two'];
-            const output = clone(input);
-            expect(input).not.toBe(output);
-            expect(input).toEqual(output);
-        });
-
-        test('object', () => {
-            const input = {a: false, b: 1, c: 'two'};
-            const output = clone(input);
-            expect(input).not.toBe(output);
-            expect(input).toEqual(output);
-        });
-
-        test('deep object', () => {
-            const input = {object: {a: false, b: 1, c: 'two'}};
-            const output = clone(input);
-            expect(input.object).not.toBe(output.object);
-            expect(input.object).toEqual(output.object);
-        });
-
-        test('deep array', () => {
-            const input = {array: [false, 1, 'two']};
-            const output = clone(input);
-            expect(input.array).not.toBe(output.array);
-            expect(input.array).toEqual(output.array);
-        });
-    });
-
     describe('arraysIntersect', () => {
         test('intersection', () => {
             const a = ["1", "2", "3"];