set

Author: Rich-Harris

packages/svelte/src/reactivity/map.js

@@ -6,7 +6,7 @@ import { increment } from './utils.js';
 
 /**
  * A reactive version of the built-in [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object.
- * 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?version=5.25.10) below)
+ * 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)
  * will cause it to be re-evaluated as necessary when the map is updated.
  *
  * 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

@@ -10,6 +10,37 @@ var set_like_methods = ['difference', 'intersection', 'symmetricDifference', 'un
 var inited = false;
 
 /**
+ * A reactive version of the built-in [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object.
+ * 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)
+ * will cause it to be re-evaluated as necessary when the set is updated.
+ *
+ * Note that values in a reactive set are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).
+ *
+ * ```svelte
+ * <script>
+ * 	import { SvelteSet } from 'svelte/reactivity';
+ * 	let monkeys = new SvelteSet();
+ *
+ * 	function toggle(monkey) {
+ * 		if (monkeys.has(monkey)) {
+ * 			monkeys.delete(monkey);
+ * 		} else {
+ * 			monkeys.add(monkey);
+ * 		}
+ * 	}
+ * </script>
+ *
+ * {#each ['🙈', '🙉', '🙊'] as monkey}
+ * 	<button onclick={() => toggle(monkey)}>{monkey}</button>
+ * {/each}
+ *
+ * <button onclick={() => monkeys.clear()}>clear</button>
+ *
+ * {#if monkeys.has('🙈')}<p>see no evil</p>{/if}
+ * {#if monkeys.has('🙉')}<p>hear no evil</p>{/if}
+ * {#if monkeys.has('🙊')}<p>speak no evil</p>{/if}
+ * ```
+ *
  * @template T
  * @extends {Set<T>}
  */

packages/svelte/types/index.d.ts

@@ -1935,6 +1935,40 @@ declare module 'svelte/reactivity' {
 		constructor(...params: any[]);
 		#private;
 	}
+	/**
+	 * A reactive version of the built-in [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object.
+	 * 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)
+	 * will cause it to be re-evaluated as necessary when the set is updated.
+	 *
+	 * Note that values in a reactive set are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).
+	 *
+	 * ```svelte
+	 * <script>
+	 * 	import { SvelteSet } from 'svelte/reactivity';
+	 * 	let monkeys = new SvelteSet();
+	 *
+	 * 	function toggle(monkey) {
+	 * 		if (monkeys.has(monkey)) {
+	 * 			monkeys.delete(monkey);
+	 * 		} else {
+	 * 			monkeys.add(monkey);
+	 * 		}
+	 * 	}
+	 * </script>
+	 *
+	 * {#each ['🙈', '🙉', '🙊'] as monkey}
+	 * 	<button onclick={() => toggle(monkey)}>{monkey}</button>
+	 * {/each}
+	 *
+	 * <button onclick={() => monkeys.clear()}>clear</button>
+	 *
+	 * {#if monkeys.has('🙈')}<p>see no evil</p>{/if}
+	 * {#if monkeys.has('🙉')}<p>hear no evil</p>{/if}
+	 * {#if monkeys.has('🙊')}<p>speak no evil</p>{/if}
+	 * ```
+	 *
+	 * 
+	 */
 	export class SvelteSet<T> extends Set<T> {
 
 		constructor(value?: Iterable<T> | null | undefined);
@@ -1944,7 +1978,7 @@ declare module 'svelte/reactivity' {
 	}
 	/**
 	 * A reactive version of the built-in [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object.
-	 * 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?version=5.25.10) below)
+	 * 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)
 	 * will cause it to be re-evaluated as necessary when the map is updated.
 	 *
 	 * Note that values in a reactive map are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).