From cae5f1ed2669297c8aa5fabc58e3ebe028889850 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Mon, 1 Jul 2024 19:19:11 +0100 Subject: [PATCH] breaking: rename svelte/reactivity helpers to include Svelte prefix (#12248) * breaking: rename svelte/reactivity helpers to include Svelte prefix * keep old exports * add runtime errors * add runtime errors * feedback * feedback * feedback * Update .changeset/nice-jobs-breathe.md Co-authored-by: Conduitry --------- Co-authored-by: Conduitry --- .changeset/nice-jobs-breathe.md | 5 +++ packages/svelte/src/reactivity/date.js | 4 +-- .../svelte/src/reactivity/index-client.js | 33 ++++++++++++++--- .../svelte/src/reactivity/index-server.js | 35 ++++++++++++++++--- packages/svelte/src/reactivity/map.js | 2 +- packages/svelte/src/reactivity/map.test.ts | 18 +++++----- packages/svelte/src/reactivity/set.js | 6 ++-- packages/svelte/src/reactivity/set.test.ts | 14 ++++---- packages/svelte/src/reactivity/url.js | 6 ++-- packages/svelte/src/reactivity/url.test.ts | 8 ++--- .../samples/reactive-date/main.svelte | 4 +-- .../samples/reactive-map/main.svelte | 4 +-- .../samples/reactive-set/main.svelte | 4 +-- .../samples/reactive-to-string/main.svelte | 8 ++--- .../samples/reactive-url/main.svelte | 4 +-- .../samples/state-in-template/main.svelte | 4 +-- packages/svelte/types/index.d.ts | 24 +++++++++---- .../routes/docs/content/01-api/05-imports.md | 6 ++-- 18 files changed, 127 insertions(+), 62 deletions(-) create mode 100644 .changeset/nice-jobs-breathe.md diff --git a/.changeset/nice-jobs-breathe.md b/.changeset/nice-jobs-breathe.md new file mode 100644 index 000000000..0c77cce75 --- /dev/null +++ b/.changeset/nice-jobs-breathe.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +breaking: rename `svelte/reactivity` helpers to include `Svelte` prefix diff --git a/packages/svelte/src/reactivity/date.js b/packages/svelte/src/reactivity/date.js index cf43dfe4a..67a88a490 100644 --- a/packages/svelte/src/reactivity/date.js +++ b/packages/svelte/src/reactivity/date.js @@ -57,14 +57,14 @@ const write = [ var inited = false; -export class ReactiveDate extends Date { +export class SvelteDate extends Date { #raw_time = source(super.getTime()); // We init as part of the first instance so that we can treeshake this class #init() { if (!inited) { inited = true; - const proto = ReactiveDate.prototype; + const proto = SvelteDate.prototype; const date_proto = Date.prototype; for (const method of read) { diff --git a/packages/svelte/src/reactivity/index-client.js b/packages/svelte/src/reactivity/index-client.js index 9c0b28dd2..36f155fa1 100644 --- a/packages/svelte/src/reactivity/index-client.js +++ b/packages/svelte/src/reactivity/index-client.js @@ -1,4 +1,29 @@ -export { ReactiveDate as Date } from './date.js'; -export { ReactiveSet as Set } from './set.js'; -export { ReactiveMap as Map } from './map.js'; -export { ReactiveURL as URL, ReactiveURLSearchParams as URLSearchParams } from './url.js'; +export { SvelteDate } from './date.js'; +export { SvelteSet } from './set.js'; +export { SvelteMap } from './map.js'; +export { SvelteURL, SvelteURLSearchParams } from './url.js'; + +/** @deprecated Use `SvelteDate` instead */ +export function Date() { + throw new Error('Date has been removed, use SvelteDate instead.'); +} + +/** @deprecated Use `SvelteSet` instead */ +export function Set() { + throw new Error('Set has been removed, use SvelteSet instead.'); +} + +/** @deprecated Use `SvelteMap` instead */ +export function Map() { + throw new Error('Map has been removed, use SvelteMap instead.'); +} + +/** @deprecated Use `SvelteURL` instead */ +export function URL() { + throw new Error('URL has been removed, use SvelteURL instead.'); +} + +/** @deprecated Use `SvelteURLSearchParams` instead */ +export function URLSearchParams() { + throw new Error('URLSearchParams has been removed, use SvelteURLSearchParams instead.'); +} diff --git a/packages/svelte/src/reactivity/index-server.js b/packages/svelte/src/reactivity/index-server.js index 63360a30d..a0663adc6 100644 --- a/packages/svelte/src/reactivity/index-server.js +++ b/packages/svelte/src/reactivity/index-server.js @@ -1,5 +1,30 @@ -export const Date = globalThis.Date; -export const Set = globalThis.Set; -export const Map = globalThis.Map; -export const URL = globalThis.URL; -export const URLSearchParams = globalThis.URLSearchParams; +export const SvelteDate = globalThis.Date; +export const SvelteSet = globalThis.Set; +export const SvelteMap = globalThis.Map; +export const SvelteURL = globalThis.URL; +export const SvelteURLSearchParams = globalThis.URLSearchParams; + +/** @deprecated Use `SvelteDate` instead */ +export function Date() { + throw new Error('Date has been removed, use SvelteDate instead.'); +} + +/** @deprecated Use `SvelteSet` instead */ +export function Set() { + throw new Error('Set has been removed, use SvelteSet instead.'); +} + +/** @deprecated Use `SvelteMap` instead */ +export function Map() { + throw new Error('Map has been removed, use SvelteMap instead.'); +} + +/** @deprecated Use `SvelteURL` instead */ +export function URL() { + throw new Error('URL has been removed, use SvelteURL instead.'); +} + +/** @deprecated Use `SvelteURLSearchParams` instead */ +export function URLSearchParams() { + throw new Error('URLSearchParams has been removed, use SvelteURLSearchParams instead.'); +} diff --git a/packages/svelte/src/reactivity/map.js b/packages/svelte/src/reactivity/map.js index da495eef0..30da04c03 100644 --- a/packages/svelte/src/reactivity/map.js +++ b/packages/svelte/src/reactivity/map.js @@ -8,7 +8,7 @@ import { increment } from './utils.js'; * @template V * @extends {Map} */ -export class ReactiveMap extends Map { +export class SvelteMap extends Map { /** @type {Map>} */ #sources = new Map(); #version = source(0); diff --git a/packages/svelte/src/reactivity/map.test.ts b/packages/svelte/src/reactivity/map.test.ts index 6dda7bf80..2f9f064b4 100644 --- a/packages/svelte/src/reactivity/map.test.ts +++ b/packages/svelte/src/reactivity/map.test.ts @@ -1,10 +1,10 @@ import { render_effect, effect_root } from '../internal/client/reactivity/effects.js'; import { flushSync } from '../index-client.js'; -import { ReactiveMap } from './map.js'; +import { SvelteMap } from './map.js'; import { assert, test } from 'vitest'; test('map.values()', () => { - const map = new ReactiveMap([ + const map = new SvelteMap([ [1, 1], [2, 2], [3, 3], @@ -65,7 +65,7 @@ test('map.values()', () => { }); test('map.get(...)', () => { - const map = new ReactiveMap([ + const map = new SvelteMap([ [1, 1], [2, 2], [3, 3] @@ -101,7 +101,7 @@ test('map.get(...)', () => { }); test('map.has(...)', () => { - const map = new ReactiveMap([ + const map = new SvelteMap([ [1, 1], [2, 2], [3, 3] @@ -148,7 +148,7 @@ test('map.has(...)', () => { }); test('map.forEach(...)', () => { - const map = new ReactiveMap([ + const map = new SvelteMap([ [1, 1], [2, 2], [3, 3] @@ -169,7 +169,7 @@ test('map.forEach(...)', () => { }); test('map.delete(...)', () => { - const map = new ReactiveMap([ + const map = new SvelteMap([ [1, 1], [2, 2], [3, 3] @@ -182,7 +182,7 @@ test('map.delete(...)', () => { }); test('map handling of undefined values', () => { - const map = new ReactiveMap(); + const map = new SvelteMap(); const log: any = []; @@ -208,7 +208,7 @@ test('map handling of undefined values', () => { }); test('not invoking reactivity when value is not in the map after changes', () => { - const map = new ReactiveMap([[1, 1]]); + const map = new SvelteMap([[1, 1]]); const log: any = []; @@ -236,5 +236,5 @@ test('not invoking reactivity when value is not in the map after changes', () => }); test('Map.instanceOf', () => { - assert.equal(new ReactiveMap() instanceof Map, true); + assert.equal(new SvelteMap() instanceof Map, true); }); diff --git a/packages/svelte/src/reactivity/set.js b/packages/svelte/src/reactivity/set.js index 7ccb7f9b1..6206ce14e 100644 --- a/packages/svelte/src/reactivity/set.js +++ b/packages/svelte/src/reactivity/set.js @@ -12,7 +12,7 @@ var inited = false; * @template T * @extends {Set} */ -export class ReactiveSet extends Set { +export class SvelteSet extends Set { /** @type {Map>} */ #sources = new Map(); #version = source(0); @@ -41,7 +41,7 @@ export class ReactiveSet extends Set { #init() { inited = true; - var proto = ReactiveSet.prototype; + var proto = SvelteSet.prototype; var set_proto = Set.prototype; for (const method of read_methods) { @@ -59,7 +59,7 @@ export class ReactiveSet extends Set { get(this.#version); // @ts-ignore var set = /** @type {Set} */ (set_proto[method].apply(this, v)); - return new ReactiveSet(set); + return new SvelteSet(set); }; } } diff --git a/packages/svelte/src/reactivity/set.test.ts b/packages/svelte/src/reactivity/set.test.ts index 97d0869c9..a56e43ff8 100644 --- a/packages/svelte/src/reactivity/set.test.ts +++ b/packages/svelte/src/reactivity/set.test.ts @@ -1,10 +1,10 @@ import { render_effect, effect_root } from '../internal/client/reactivity/effects.js'; import { flushSync } from '../index-client.js'; -import { ReactiveSet } from './set.js'; +import { SvelteSet } from './set.js'; import { assert, test } from 'vitest'; test('set.values()', () => { - const set = new ReactiveSet([1, 2, 3, 4, 5]); + const set = new SvelteSet([1, 2, 3, 4, 5]); const log: any = []; @@ -36,7 +36,7 @@ test('set.values()', () => { }); test('set.has(...)', () => { - const set = new ReactiveSet([1, 2, 3]); + const set = new SvelteSet([1, 2, 3]); const log: any = []; @@ -79,7 +79,7 @@ test('set.has(...)', () => { }); test('set.delete(...)', () => { - const set = new ReactiveSet([1, 2, 3]); + const set = new SvelteSet([1, 2, 3]); assert.equal(set.delete(3), true); assert.equal(set.delete(3), false); @@ -88,7 +88,7 @@ test('set.delete(...)', () => { }); test('set.forEach()', () => { - const set = new ReactiveSet([1, 2, 3, 4, 5]); + const set = new SvelteSet([1, 2, 3, 4, 5]); const log: any = []; @@ -108,7 +108,7 @@ test('set.forEach()', () => { }); test('not invoking reactivity when value is not in the set after changes', () => { - const set = new ReactiveSet([1, 2]); + const set = new SvelteSet([1, 2]); const log: any = []; @@ -155,5 +155,5 @@ test('not invoking reactivity when value is not in the set after changes', () => }); test('Set.instanceOf', () => { - assert.equal(new ReactiveSet() instanceof Set, true); + assert.equal(new SvelteSet() instanceof Set, true); }); diff --git a/packages/svelte/src/reactivity/url.js b/packages/svelte/src/reactivity/url.js index ceb6b45fc..bdb6d93b7 100644 --- a/packages/svelte/src/reactivity/url.js +++ b/packages/svelte/src/reactivity/url.js @@ -4,7 +4,7 @@ import { increment } from './utils.js'; const REPLACE = Symbol(); -export class ReactiveURL extends URL { +export class SvelteURL extends URL { #protocol = source(super.protocol); #username = source(super.username); #password = source(super.password); @@ -12,7 +12,7 @@ export class ReactiveURL extends URL { #port = source(super.port); #pathname = source(super.pathname); #hash = source(super.hash); - #searchParams = new ReactiveURLSearchParams(); + #searchParams = new SvelteURLSearchParams(); /** * @param {string | URL} url @@ -153,7 +153,7 @@ export class ReactiveURL extends URL { } } -export class ReactiveURLSearchParams extends URLSearchParams { +export class SvelteURLSearchParams extends URLSearchParams { #version = source(0); /** diff --git a/packages/svelte/src/reactivity/url.test.ts b/packages/svelte/src/reactivity/url.test.ts index 910edba50..9dcfa69d5 100644 --- a/packages/svelte/src/reactivity/url.test.ts +++ b/packages/svelte/src/reactivity/url.test.ts @@ -1,10 +1,10 @@ import { render_effect, effect_root } from '../internal/client/reactivity/effects.js'; import { flushSync } from '../index-client.js'; -import { ReactiveURL, ReactiveURLSearchParams } from './url.js'; +import { SvelteURL, SvelteURLSearchParams } from './url.js'; import { assert, test } from 'vitest'; test('url.hash', () => { - const url = new ReactiveURL('http://google.com'); + const url = new SvelteURL('http://google.com'); const log: any = []; const cleanup = effect_root(() => { @@ -32,7 +32,7 @@ test('url.hash', () => { }); test('url.searchParams', () => { - const url = new ReactiveURL('https://svelte.dev?foo=bar&t=123'); + const url = new SvelteURL('https://svelte.dev?foo=bar&t=123'); const log: any = []; const cleanup = effect_root(() => { @@ -78,7 +78,7 @@ test('url.searchParams', () => { }); test('URLSearchParams', () => { - const params = new ReactiveURLSearchParams(); + const params = new SvelteURLSearchParams(); const log: any = []; const cleanup = effect_root(() => { diff --git a/packages/svelte/tests/runtime-runes/samples/reactive-date/main.svelte b/packages/svelte/tests/runtime-runes/samples/reactive-date/main.svelte index 7c117bb19..a467f4bc9 100644 --- a/packages/svelte/tests/runtime-runes/samples/reactive-date/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/reactive-date/main.svelte @@ -1,7 +1,7 @@
getSeconds: {date.getUTCSeconds()}
diff --git a/packages/svelte/tests/runtime-runes/samples/reactive-map/main.svelte b/packages/svelte/tests/runtime-runes/samples/reactive-map/main.svelte index d712b12a2..9303a458c 100644 --- a/packages/svelte/tests/runtime-runes/samples/reactive-map/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/reactive-map/main.svelte @@ -1,7 +1,7 @@ diff --git a/packages/svelte/tests/runtime-runes/samples/reactive-to-string/main.svelte b/packages/svelte/tests/runtime-runes/samples/reactive-to-string/main.svelte index bcadd9bff..59024c60d 100644 --- a/packages/svelte/tests/runtime-runes/samples/reactive-to-string/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/reactive-to-string/main.svelte @@ -1,13 +1,13 @@
{rset.entries()} {rset.keys()} {rset.values()}
{set.entries()} {set.keys()} {set.values()}
{rmap.entries()} {rmap.keys()} {rmap.values()}
-
{map.entries()} {map.keys()} {map.values()}
\ No newline at end of file +
{map.entries()} {map.keys()} {map.values()}
diff --git a/packages/svelte/tests/runtime-runes/samples/reactive-url/main.svelte b/packages/svelte/tests/runtime-runes/samples/reactive-url/main.svelte index 2116b55a4..4239d7675 100644 --- a/packages/svelte/tests/runtime-runes/samples/reactive-url/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/reactive-url/main.svelte @@ -1,7 +1,7 @@
href: {url.href}
diff --git a/packages/svelte/tests/runtime-runes/samples/state-in-template/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-in-template/main.svelte index b0eb8f8c6..dc7fe3c88 100644 --- a/packages/svelte/tests/runtime-runes/samples/state-in-template/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/state-in-template/main.svelte @@ -1,6 +1,6 @@
{ diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 1bae92f49..98159374b 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -2131,37 +2131,47 @@ declare module 'svelte/motion' { } declare module 'svelte/reactivity' { - class ReactiveDate extends Date { + /** @deprecated Use `SvelteDate` instead */ + function Date_1(): void; + /** @deprecated Use `SvelteSet` instead */ + function Set_1(): void; + /** @deprecated Use `SvelteMap` instead */ + function Map_1(): void; + /** @deprecated Use `SvelteURL` instead */ + function URL_1(): void; + /** @deprecated Use `SvelteURLSearchParams` instead */ + function URLSearchParams_1(): void; + class SvelteDate extends Date { constructor(...values: any[]); #private; } - class ReactiveSet extends Set { + class SvelteSet extends Set { constructor(value?: Iterable | null | undefined); add(value: T): this; #private; } - class ReactiveMap extends Map { + class SvelteMap extends Map { constructor(value?: Iterable | null | undefined); set(key: K, value: V): this; #private; } - class ReactiveURL extends URL { - get searchParams(): ReactiveURLSearchParams; + class SvelteURL extends URL { + get searchParams(): SvelteURLSearchParams; #private; } - class ReactiveURLSearchParams extends URLSearchParams { + class SvelteURLSearchParams extends URLSearchParams { [REPLACE](params: URLSearchParams): void; #private; } const REPLACE: unique symbol; - export { ReactiveDate as Date, ReactiveSet as Set, ReactiveMap as Map, ReactiveURL as URL, ReactiveURLSearchParams as URLSearchParams }; + export { Date_1 as Date, Set_1 as Set, Map_1 as Map, URL_1 as URL, URLSearchParams_1 as URLSearchParams, SvelteDate, SvelteSet, SvelteMap, SvelteURL, SvelteURLSearchParams }; } declare module 'svelte/server' { diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md index 2cbc26f93..f9befc4c6 100644 --- a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md +++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md @@ -95,13 +95,13 @@ To prevent something from being treated as an `$effect`/`$derived` dependency, u ## `svelte/reactivity` -Svelte provides reactive `Map`, `Set`, `Date` and `URL` classes. These can be imported from `svelte/reactivity` and used just like their native counterparts. [Demo:](https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE32QzWrDMBCEX2Wri1uo7bvrBHrvqdBTUogqryuBfhZp5SQYv3slSsmpOc7uN8zsrmI2FpMYDqvw0qEYxCuReBZ8pSrSgpax6BRyVHUyJhUN8f7oj2wchciwwsf7G2wwx-Cg-bX0EaVisxi-Ni-FLbQKPjHkaGEHHs_V9NhoZkpD3-NFOrLYqeB6kqybp-Ia-1uYHx_aFpSW_hsTcADWmLDrOmjbsh-Np8zwZfw0LNJm3K0lqaMYOKhgt_8RHRLX0-8gtdAfUiAdb4XOxlrINElGOOmI8wmkn2AxCmHBmOTdetWw7ct7XZjMbHASA8eM2-f2A-JarmyZAQAA) +Svelte provides reactive `SvelteMap`, `SvelteSet`, `SvelteDate` and `SvelteURL` classes. These can be imported from `svelte/reactivity` and used just like their native counterparts. [Demo:](https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE32QwUrEMBBAf2XMpQrb9t7tFrx7UjxZYWM6NYFkEpJJ16X03yWK9OQeZ3iPecwqZmMxie5tFSQdik48hiAOgq-hDGlByygOIvkcVdn0SUUTeBhpZOOCjwwrvPxgr89PsMEcvYPqV2wjSsVmMXytjiMVR3lKDDlaOAHhZVfvK80cUte2-CVdsNgo79ogWVcPx5H6dj9M_V1dg9KSPjEBe2CNCZumgboeRuoNhczwYWjqFmkzntYcbROiZ6-83f5HtE9c3nADKUF_yEi9jnvQxVgLOUySEc464nwGSRMsRiEsGJO8mVeEbRAH4fxkZoOT6Dhm3N63b9_bGfOlAQAA) ```svelte