fix: use `state` instead of `source` in reactive classes

source-to-state-in-class-belt-and-braces
paoloricciuti 2 months ago
parent 777e67b948
commit de8053ef1d

@ -5,7 +5,7 @@ import { writable } from '../store/shared/index.js';
import { loop } from '../internal/client/loop.js'; import { loop } from '../internal/client/loop.js';
import { raf } from '../internal/client/timing.js'; import { raf } from '../internal/client/timing.js';
import { is_date } from './utils.js'; import { is_date } from './utils.js';
import { set, source } from '../internal/client/reactivity/sources.js'; import { set, state } from '../internal/client/reactivity/sources.js';
import { render_effect } from '../internal/client/reactivity/effects.js'; import { render_effect } from '../internal/client/reactivity/effects.js';
import { tag } from '../internal/client/dev/tracing.js'; import { tag } from '../internal/client/dev/tracing.js';
import { get } from '../internal/client/runtime.js'; import { get } from '../internal/client/runtime.js';
@ -170,9 +170,9 @@ export function spring(value, opts = {}) {
* @since 5.8.0 * @since 5.8.0
*/ */
export class Spring { export class Spring {
#stiffness = source(0.15); #stiffness = state(0.15);
#damping = source(0.8); #damping = state(0.8);
#precision = source(0.01); #precision = state(0.01);
#current; #current;
#target; #target;
@ -194,8 +194,8 @@ export class Spring {
* @param {SpringOpts} [options] * @param {SpringOpts} [options]
*/ */
constructor(value, options = {}) { constructor(value, options = {}) {
this.#current = DEV ? tag(source(value), 'Spring.current') : source(value); this.#current = DEV ? tag(state(value), 'Spring.current') : state(value);
this.#target = DEV ? tag(source(value), 'Spring.target') : source(value); this.#target = DEV ? tag(state(value), 'Spring.target') : state(value);
if (typeof options.stiffness === 'number') this.#stiffness.v = clamp(options.stiffness, 0, 1); if (typeof options.stiffness === 'number') this.#stiffness.v = clamp(options.stiffness, 0, 1);
if (typeof options.damping === 'number') this.#damping.v = clamp(options.damping, 0, 1); if (typeof options.damping === 'number') this.#damping.v = clamp(options.damping, 0, 1);

@ -6,7 +6,7 @@ import { raf } from '../internal/client/timing.js';
import { loop } from '../internal/client/loop.js'; import { loop } from '../internal/client/loop.js';
import { linear } from '../easing/index.js'; import { linear } from '../easing/index.js';
import { is_date } from './utils.js'; import { is_date } from './utils.js';
import { set, source } from '../internal/client/reactivity/sources.js'; import { set, state } from '../internal/client/reactivity/sources.js';
import { tag } from '../internal/client/dev/tracing.js'; import { tag } from '../internal/client/dev/tracing.js';
import { get, render_effect } from 'svelte/internal/client'; import { get, render_effect } from 'svelte/internal/client';
import { DEV } from 'esm-env'; import { DEV } from 'esm-env';
@ -191,8 +191,8 @@ export class Tween {
* @param {TweenedOptions<T>} options * @param {TweenedOptions<T>} options
*/ */
constructor(value, options = {}) { constructor(value, options = {}) {
this.#current = source(value); this.#current = state(value);
this.#target = source(value); this.#target = state(value);
this.#defaults = options; this.#defaults = options;
if (DEV) { if (DEV) {

@ -2,7 +2,7 @@
import { DEV } from 'esm-env'; import { DEV } from 'esm-env';
import { set, source, state } from '../internal/client/reactivity/sources.js'; import { set, source, state } from '../internal/client/reactivity/sources.js';
import { label, tag } from '../internal/client/dev/tracing.js'; import { label, tag } from '../internal/client/dev/tracing.js';
import { get } from '../internal/client/runtime.js'; import { get, push_reaction_value } from '../internal/client/runtime.js';
import { increment } from './utils.js'; import { increment } from './utils.js';
/** /**
@ -83,11 +83,13 @@ export class SvelteMap extends Map {
has(key) { has(key) {
var sources = this.#sources; var sources = this.#sources;
var s = sources.get(key); var s = sources.get(key);
var is_new = false;
if (s === undefined) { if (s === undefined) {
var ret = super.get(key); var ret = super.get(key);
if (ret !== undefined) { if (ret !== undefined) {
s = source(0); s = source(0);
is_new = true;
if (DEV) { if (DEV) {
tag(s, `SvelteMap get(${label(key)})`); tag(s, `SvelteMap get(${label(key)})`);
@ -103,6 +105,12 @@ export class SvelteMap extends Map {
} }
get(s); get(s);
if (is_new) {
// if it's a new source we want to push to the reactions values
// AFTER we read it so that the effect depends on it but we don't
// trigger an unsafe mutation (since it was created within the derived)
push_reaction_value(s);
}
return true; return true;
} }
@ -119,11 +127,13 @@ export class SvelteMap extends Map {
get(key) { get(key) {
var sources = this.#sources; var sources = this.#sources;
var s = sources.get(key); var s = sources.get(key);
var is_new = false;
if (s === undefined) { if (s === undefined) {
var ret = super.get(key); var ret = super.get(key);
if (ret !== undefined) { if (ret !== undefined) {
s = source(0); s = source(0);
is_new = true;
if (DEV) { if (DEV) {
tag(s, `SvelteMap get(${label(key)})`); tag(s, `SvelteMap get(${label(key)})`);
@ -139,6 +149,12 @@ export class SvelteMap extends Map {
} }
get(s); get(s);
if (is_new) {
// if it's a new source we want to push to the reactions values
// AFTER we read it so that the effect depends on it but we don't
// trigger an unsafe mutation (since it was created within the derived)
push_reaction_value(s);
}
return super.get(key); return super.get(key);
} }
@ -154,7 +170,7 @@ export class SvelteMap extends Map {
var version = this.#version; var version = this.#version;
if (s === undefined) { if (s === undefined) {
s = source(0); s = state(0);
if (DEV) { if (DEV) {
tag(s, `SvelteMap get(${label(key)})`); tag(s, `SvelteMap get(${label(key)})`);
@ -216,11 +232,12 @@ export class SvelteMap extends Map {
get(this.#version); get(this.#version);
var sources = this.#sources; var sources = this.#sources;
var new_sources = new WeakSet();
if (this.#size.v !== sources.size) { if (this.#size.v !== sources.size) {
for (var key of super.keys()) { for (var key of super.keys()) {
if (!sources.has(key)) { if (!sources.has(key)) {
var s = source(0); var s = source(0);
new_sources.add(s);
if (DEV) { if (DEV) {
tag(s, `SvelteMap get(${label(key)})`); tag(s, `SvelteMap get(${label(key)})`);
} }
@ -232,6 +249,12 @@ export class SvelteMap extends Map {
for ([, s] of this.#sources) { for ([, s] of this.#sources) {
get(s); get(s);
if (new_sources.has(s)) {
// if it's a new source we want to push to the reactions values
// AFTER we read it so that the effect depends on it but we don't
// trigger an unsafe mutation (since it was created within the derived)
push_reaction_value(s);
}
} }
} }

@ -2,7 +2,7 @@
import { DEV } from 'esm-env'; import { DEV } from 'esm-env';
import { source, set, state } from '../internal/client/reactivity/sources.js'; import { source, set, state } from '../internal/client/reactivity/sources.js';
import { label, tag } from '../internal/client/dev/tracing.js'; import { label, tag } from '../internal/client/dev/tracing.js';
import { get } from '../internal/client/runtime.js'; import { get, push_reaction_value } from '../internal/client/runtime.js';
import { increment } from './utils.js'; import { increment } from './utils.js';
var read_methods = ['forEach', 'isDisjointFrom', 'isSubsetOf', 'isSupersetOf']; var read_methods = ['forEach', 'isDisjointFrom', 'isSubsetOf', 'isSupersetOf'];
@ -107,6 +107,7 @@ export class SvelteSet extends Set {
var has = super.has(value); var has = super.has(value);
var sources = this.#sources; var sources = this.#sources;
var s = sources.get(value); var s = sources.get(value);
var is_new = false;
if (s === undefined) { if (s === undefined) {
if (!has) { if (!has) {
@ -117,6 +118,7 @@ export class SvelteSet extends Set {
} }
s = source(true); s = source(true);
is_new = true;
if (DEV) { if (DEV) {
tag(s, `SvelteSet has(${label(value)})`); tag(s, `SvelteSet has(${label(value)})`);
@ -126,6 +128,9 @@ export class SvelteSet extends Set {
} }
get(s); get(s);
if (is_new) {
push_reaction_value(s);
}
return has; return has;
} }

Loading…
Cancel
Save