Skip to content

Commit 515d056

Browse files
Rich-HarrisRich-Harris
committed
more
1 parent 0985ba9 commit 515d056

File tree

6 files changed

+117
-10
lines changed

6 files changed

+117
-10
lines changed

‎packages/svelte/src/reactivity/date.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ var inited = false;
77

88
/**
99
* A reactive version of the built-in [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object.
10-
* Reading the date in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived) (whether with methods like `date.getTime()` or `date.toString()`,
11-
* or via things like [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)) will cause it to be re-evaluated when the
12-
* value of the date changes.
10+
* Reading the date (whether with methods like `date.getTime()` or `date.toString()`, or via things like [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat))
11+
* in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
12+
* will cause it to be re-evaluated when the value of the date changes.
1313
*
1414
* ```svelte
1515
* <script>

‎packages/svelte/src/reactivity/map.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { increment } from './utils.js';
66

77
/**
88
* A reactive version of the built-in [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object.
9-
* Reading contents of the map in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived) (by iterating, or by reading `map.size` or calling `map.get(...)` or `map.has(...)` as in the [tic-tac-toe example](https://svelte.dev/playground/0b0ff4aa49c9443f9b47fe5203c78293) below)
9+
* Reading contents of the map (by iterating, or by reading `map.size` or calling `map.get(...)` or `map.has(...)` as in the [tic-tac-toe example](https://svelte.dev/playground/0b0ff4aa49c9443f9b47fe5203c78293) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
1010
* will cause it to be re-evaluated as necessary when the map is updated.
1111
*
1212
* Note that values in a reactive map are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).

‎packages/svelte/src/reactivity/set.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ var inited = false;
1111

1212
/**
1313
* A reactive version of the built-in [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object.
14-
* Reading contents of the set in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived) (by iterating, or by reading `set.size` or calling `set.has(...)` as in the [example](https://svelte.dev/playground/53438b51194b4882bcc18cddf9f96f15) below)
14+
* Reading contents of the set (by iterating, or by reading `set.size` or calling `set.has(...)` as in the [example](https://svelte.dev/playground/53438b51194b4882bcc18cddf9f96f15) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
1515
* will cause it to be re-evaluated as necessary when the set is updated.
1616
*
1717
* Note that values in a reactive set are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).

‎packages/svelte/src/reactivity/url-search-params.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,32 @@ import { increment } from './utils.js';
55

66
export const REPLACE = Symbol();
77

8+
/**
9+
* A reactive version of the built-in [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) object.
10+
* Reading its contents (by iterating, or by calling `params.get(...)` or `params.getAll(...)` as in the [example](https://svelte.dev/playground/b3926c86c5384bab9f2cf993bc08c1c8) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
11+
* will cause it to be re-evaluated as necessary when the params are updated.
12+
*
13+
* ```svelte
14+
* <script>
15+
* import { SvelteURLSearchParams } from 'svelte/reactivity';
16+
*
17+
* const params = new SvelteURLSearchParams('message=hello');
18+
*
19+
* let key = $state('key');
20+
* let value = $state('value');
21+
* </script>
22+
*
23+
* <input bind:value={key} />
24+
* <input bind:value={value} />
25+
* <button onclick={() => params.append(key, value)}>append</button>
26+
*
27+
* <p>?{params.toString()}</p>
28+
*
29+
* {#each params as [key, value]}
30+
* <p>{key}: {value}</p>
31+
* {/each}
32+
* ```
33+
*/
834
export class SvelteURLSearchParams extends URLSearchParams {
935
#version = source(0);
1036
#url = get_current_url();
@@ -23,6 +49,7 @@ export class SvelteURLSearchParams extends URLSearchParams {
2349

2450
/**
2551
* @param {URLSearchParams} params
52+
* @internal
2653
*/
2754
[REPLACE](params) {
2855
if (this.#updating) return;

‎packages/svelte/src/reactivity/url.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,33 @@ export function get_current_url() {
1010
return current_url;
1111
}
1212

13+
/**
14+
* A reactive version of the built-in [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) object.
15+
* Reading properties of the URL (such as `url.href` or `url.pathname`) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
16+
* will cause it to be re-evaluated as necessary when the URL changes.
17+
*
18+
* The `searchParams` property is an instance of [SvelteURLSearchParams](http://localhost:5173/docs/svelte/svelte-reactivity#SvelteURLSearchParams).
19+
*
20+
* [Example](https://svelte.dev/playground/5a694758901b448c83dc40dc31c71f2a):
21+
*
22+
* ```svelte
23+
* <script>
24+
* import { SvelteURL } from 'svelte/reactivity';
25+
*
26+
* const url = new SvelteURL('https://example.com/path');
27+
* </script>
28+
*
29+
* <!-- changes to these... -->
30+
* <input bind:value={url.protocol} />
31+
* <input bind:value={url.hostname} />
32+
* <input bind:value={url.pathname} />
33+
*
34+
* <hr />
35+
*
36+
* <!-- will update `href` and vice versa -->
37+
* <input bind:value={url.href} size="65" />
38+
* ```
39+
*/
1340
export class SvelteURL extends URL {
1441
#protocol = source(super.protocol);
1542
#username = source(super.username);

‎packages/svelte/types/index.d.ts

Lines changed: 58 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1900,9 +1900,9 @@ declare module 'svelte/motion' {
19001900
declare module 'svelte/reactivity' {
19011901
/**
19021902
* A reactive version of the built-in [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object.
1903-
* Reading the date in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived) (whether with methods like `date.getTime()` or `date.toString()`,
1904-
* or via things like [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)) will cause it to be re-evaluated when the
1905-
* value of the date changes.
1903+
* Reading the date (whether with methods like `date.getTime()` or `date.toString()`, or via things like [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat))
1904+
* in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
1905+
* will cause it to be re-evaluated when the value of the date changes.
19061906
*
19071907
* ```svelte
19081908
* <script>
@@ -1937,7 +1937,7 @@ declare module 'svelte/reactivity' {
19371937
}
19381938
/**
19391939
* A reactive version of the built-in [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object.
1940-
* Reading contents of the set in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived) (by iterating, or by reading `set.size` or calling `set.has(...)` as in the [example](https://svelte.dev/playground/53438b51194b4882bcc18cddf9f96f15) below)
1940+
* Reading contents of the set (by iterating, or by reading `set.size` or calling `set.has(...)` as in the [example](https://svelte.dev/playground/53438b51194b4882bcc18cddf9f96f15) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
19411941
* will cause it to be re-evaluated as necessary when the set is updated.
19421942
*
19431943
* Note that values in a reactive set are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).
@@ -1978,7 +1978,7 @@ declare module 'svelte/reactivity' {
19781978
}
19791979
/**
19801980
* A reactive version of the built-in [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object.
1981-
* Reading contents of the map in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived) (by iterating, or by reading `map.size` or calling `map.get(...)` or `map.has(...)` as in the [tic-tac-toe example](https://svelte.dev/playground/0b0ff4aa49c9443f9b47fe5203c78293) below)
1981+
* Reading contents of the map (by iterating, or by reading `map.size` or calling `map.get(...)` or `map.has(...)` as in the [tic-tac-toe example](https://svelte.dev/playground/0b0ff4aa49c9443f9b47fe5203c78293) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
19821982
* will cause it to be re-evaluated as necessary when the map is updated.
19831983
*
19841984
* Note that values in a reactive map are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).
@@ -2027,11 +2027,64 @@ declare module 'svelte/reactivity' {
20272027
set(key: K, value: V): this;
20282028
#private;
20292029
}
2030+
/**
2031+
* A reactive version of the built-in [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) object.
2032+
* Reading properties of the URL (such as `url.href` or `url.pathname`) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
2033+
* will cause it to be re-evaluated as necessary when the URL changes.
2034+
*
2035+
* The `searchParams` property is an instance of [SvelteURLSearchParams](http://localhost:5173/docs/svelte/svelte-reactivity#SvelteURLSearchParams).
2036+
*
2037+
* [Example](https://svelte.dev/playground/5a694758901b448c83dc40dc31c71f2a):
2038+
*
2039+
* ```svelte
2040+
* <script>
2041+
* import { SvelteURL } from 'svelte/reactivity';
2042+
*
2043+
* const url = new SvelteURL('https://example.com/path');
2044+
* </script>
2045+
*
2046+
* <!-- changes to these... -->
2047+
* <input bind:value={url.protocol} />
2048+
* <input bind:value={url.hostname} />
2049+
* <input bind:value={url.pathname} />
2050+
*
2051+
* <hr />
2052+
*
2053+
* <!-- will update `href` and vice versa -->
2054+
* <input bind:value={url.href} size="65" />
2055+
* ```
2056+
*/
20302057
export class SvelteURL extends URL {
20312058
get searchParams(): SvelteURLSearchParams;
20322059
#private;
20332060
}
20342061
const REPLACE: unique symbol;
2062+
/**
2063+
* A reactive version of the built-in [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) object.
2064+
* Reading its contents (by iterating, or by calling `params.get(...)` or `params.getAll(...)` as in the [example](https://svelte.dev/playground/b3926c86c5384bab9f2cf993bc08c1c8) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
2065+
* will cause it to be re-evaluated as necessary when the params are updated.
2066+
*
2067+
* ```svelte
2068+
* <script>
2069+
* import { SvelteURLSearchParams } from 'svelte/reactivity';
2070+
*
2071+
* const params = new SvelteURLSearchParams('message=hello');
2072+
*
2073+
* let key = $state('key');
2074+
* let value = $state('value');
2075+
* </script>
2076+
*
2077+
* <input bind:value={key} />
2078+
* <input bind:value={value} />
2079+
* <button onclick={() => params.append(key, value)}>append</button>
2080+
*
2081+
* <p>?{params.toString()}</p>
2082+
*
2083+
* {#each params as [key, value]}
2084+
* <p>{key}: {value}</p>
2085+
* {/each}
2086+
* ```
2087+
*/
20352088
export class SvelteURLSearchParams extends URLSearchParams {
20362089

20372090
[REPLACE](params: URLSearchParams): void;

0 commit comments

Comments
 (0)