mirror of https://github.com/sveltejs/svelte
breaking: use `structuredClone` inside `$state.snapshot` (#12413)
* move cloning logic into new file, use structuredClone, add tests * changeset * breaking * tweak * use same cloning approach between server and client * get types mostly working * fix type error that popped up * cheeky hack * we no longer need deep_snapshot * shallow copy state when freezing * throw if argument is a state proxy * docs * regeneratepull/12433/head
Rich Harris
1 year ago
committed by
GitHub
parent
e8453e75c6
commit
8d3c0266ce
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
breaking: use structuredClone inside `$state.snapshot`
|
||||
@ -0,0 +1,40 @@
|
||||
import { DEV } from 'esm-env';
|
||||
import { define_property, is_array, is_frozen, object_freeze } from '../shared/utils.js';
|
||||
import { STATE_FROZEN_SYMBOL, STATE_SYMBOL } from './constants.js';
|
||||
import * as e from './errors.js';
|
||||
|
||||
/**
|
||||
* Expects a value that was wrapped with `freeze` and makes it frozen in DEV.
|
||||
* @template T
|
||||
* @param {T} value
|
||||
* @returns {Readonly<T>}
|
||||
*/
|
||||
export function freeze(value) {
|
||||
if (
|
||||
typeof value === 'object' &&
|
||||
value !== null &&
|
||||
!is_frozen(value) &&
|
||||
!(STATE_FROZEN_SYMBOL in value)
|
||||
) {
|
||||
var copy = /** @type {T} */ (value);
|
||||
|
||||
if (STATE_SYMBOL in value) {
|
||||
e.state_frozen_invalid_argument();
|
||||
}
|
||||
|
||||
define_property(copy, STATE_FROZEN_SYMBOL, {
|
||||
value: true,
|
||||
writable: true,
|
||||
enumerable: false
|
||||
});
|
||||
|
||||
// Freeze the object in DEV
|
||||
if (DEV) {
|
||||
object_freeze(copy);
|
||||
}
|
||||
|
||||
return /** @type {Readonly<T>} */ (copy);
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
import { freeze } from './freeze.js';
|
||||
import { assert, test } from 'vitest';
|
||||
import { proxy } from './proxy.js';
|
||||
|
||||
test('freezes an object', () => {
|
||||
const frozen = freeze({ a: 1 });
|
||||
|
||||
assert.throws(() => {
|
||||
// @ts-expect-error
|
||||
frozen.a += 1;
|
||||
}, /Cannot assign to read only property/);
|
||||
});
|
||||
|
||||
test('throws if argument is a state proxy', () => {
|
||||
assert.throws(() => freeze(proxy({})), /state_frozen_invalid_argument/);
|
||||
});
|
||||
@ -1,22 +0,0 @@
|
||||
// Store the references to globals in case someone tries to monkey patch these, causing the below
|
||||
// to de-opt (this occurs often when using popular extensions).
|
||||
export var is_array = Array.isArray;
|
||||
export var array_from = Array.from;
|
||||
export var object_keys = Object.keys;
|
||||
export var object_assign = Object.assign;
|
||||
export var is_frozen = Object.isFrozen;
|
||||
export var object_freeze = Object.freeze;
|
||||
export var define_property = Object.defineProperty;
|
||||
export var get_descriptor = Object.getOwnPropertyDescriptor;
|
||||
export var get_descriptors = Object.getOwnPropertyDescriptors;
|
||||
export var object_prototype = Object.prototype;
|
||||
export var array_prototype = Array.prototype;
|
||||
export var get_prototype_of = Object.getPrototypeOf;
|
||||
|
||||
/**
|
||||
* @param {any} thing
|
||||
* @returns {thing is Function}
|
||||
*/
|
||||
export function is_function(thing) {
|
||||
return typeof thing === 'function';
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
/** @import { Snapshot } from './types' */
|
||||
import { get_prototype_of, is_array, object_prototype } from './utils.js';
|
||||
|
||||
/**
|
||||
* @template T
|
||||
* @param {T} value
|
||||
* @returns {Snapshot<T>}
|
||||
*/
|
||||
export function snapshot(value) {
|
||||
return clone(value, new Map());
|
||||
}
|
||||
|
||||
/**
|
||||
* @template T
|
||||
* @param {T} value
|
||||
* @param {Map<T, Snapshot<T>>} cloned
|
||||
* @returns {Snapshot<T>}
|
||||
*/
|
||||
function clone(value, cloned) {
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
const unwrapped = cloned.get(value);
|
||||
if (unwrapped !== undefined) return unwrapped;
|
||||
|
||||
if (is_array(value)) {
|
||||
const copy = /** @type {Snapshot<any>} */ ([]);
|
||||
cloned.set(value, copy);
|
||||
|
||||
for (const element of value) {
|
||||
copy.push(clone(element, cloned));
|
||||
}
|
||||
|
||||
return copy;
|
||||
}
|
||||
|
||||
if (get_prototype_of(value) === object_prototype) {
|
||||
/** @type {Snapshot<any>} */
|
||||
const copy = {};
|
||||
cloned.set(value, copy);
|
||||
|
||||
for (var key in value) {
|
||||
// @ts-expect-error
|
||||
copy[key] = clone(value[key], cloned);
|
||||
}
|
||||
|
||||
return copy;
|
||||
}
|
||||
|
||||
if (typeof (/** @type {T & { toJSON?: any } } */ (value).toJSON) === 'function') {
|
||||
return clone(/** @type {T & { toJSON(): any } } */ (value).toJSON(), cloned);
|
||||
}
|
||||
}
|
||||
|
||||
return /** @type {Snapshot<T>} */ (structuredClone(value));
|
||||
}
|
||||
@ -0,0 +1,103 @@
|
||||
import { snapshot } from './clone';
|
||||
import { assert, test } from 'vitest';
|
||||
import { proxy } from '../client/proxy';
|
||||
|
||||
test('primitive', () => {
|
||||
assert.equal(42, snapshot(42));
|
||||
});
|
||||
|
||||
test('array', () => {
|
||||
const array = [1, 2, 3];
|
||||
const copy = snapshot(array);
|
||||
|
||||
assert.deepEqual(copy, array);
|
||||
assert.notEqual(copy, array);
|
||||
});
|
||||
|
||||
test('object', () => {
|
||||
const object = { a: 1, b: 2, c: 3 };
|
||||
const copy = snapshot(object);
|
||||
|
||||
assert.deepEqual(copy, object);
|
||||
assert.notEqual(copy, object);
|
||||
});
|
||||
|
||||
test('proxied state', () => {
|
||||
const object = proxy({
|
||||
a: {
|
||||
b: {
|
||||
c: 1
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const copy = snapshot(object);
|
||||
|
||||
assert.deepEqual(copy, object);
|
||||
assert.notEqual(copy, object);
|
||||
|
||||
object.a.b.c = 2;
|
||||
assert.equal(copy.a.b.c, 1);
|
||||
});
|
||||
|
||||
test('cycles', () => {
|
||||
const object: { self?: any } = {};
|
||||
object.self = object;
|
||||
const copy = snapshot(object);
|
||||
|
||||
assert.equal(copy.self, copy);
|
||||
});
|
||||
|
||||
test('class with state field', () => {
|
||||
class Foo {
|
||||
x = 1;
|
||||
#y = 2;
|
||||
|
||||
get y() {
|
||||
return this.#y;
|
||||
}
|
||||
}
|
||||
|
||||
const copy = snapshot(new Foo());
|
||||
|
||||
// @ts-expect-error I can't figure out a way to exclude prototype properties
|
||||
assert.deepEqual(copy, { x: 1 });
|
||||
});
|
||||
|
||||
test('class with toJSON', () => {
|
||||
class Foo {
|
||||
x = 1;
|
||||
#y = 2;
|
||||
|
||||
get y() {
|
||||
return this.#y;
|
||||
}
|
||||
|
||||
toJSON() {
|
||||
return {
|
||||
x: this.x,
|
||||
y: this.y
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const copy = snapshot(new Foo());
|
||||
|
||||
assert.deepEqual(copy, { x: 1, y: 2 });
|
||||
});
|
||||
|
||||
test('reactive class', () => {
|
||||
class SvelteMap<T, U> extends Map<T, U> {
|
||||
constructor(init?: Iterable<[T, U]>) {
|
||||
super(init);
|
||||
}
|
||||
}
|
||||
|
||||
const map = new SvelteMap([[1, 2]]);
|
||||
const copy = snapshot(map);
|
||||
|
||||
assert.ok(copy instanceof Map);
|
||||
assert.notOk(copy instanceof SvelteMap);
|
||||
|
||||
assert.equal(copy.get(1), 2);
|
||||
});
|
||||
Loading…
Reference in new issue