Svelte 5 State Examples

State.svelte

<!--
	Inspired by Joy of Code's YouTube video: Different Ways To Share State in Svelte 5
	https://www.youtube.com/watch?v=qI31XOrBuY0
-->
<script lang="ts" module>
	// This could be `state.svelte.ts`
	// A property of JavaScript: Imported values can only be modified by the exporter.
	// Conversely, the importing module can only read the value but can't re-assign it.

	export const proxied = $state({ value: 0 });

	let hiddenState = $state(0);
	export const getterSetter = {
		get value() {
			return hiddenState;
		},
		set value(newValue: number) {
			hiddenState = newValue;
		},
		increment() {
			hiddenState++;
		}
	};

	export function createGetterSetter() {
		let value = $state(0);

		return {
			get value() {
				return value;
			},
			set value(newValue: number) {
				console.log(`created value: ${value}`);
				value = newValue;
			},
			increment() {
				value++;
			}
		};
	}

	export function createDestructurable() {
		let destructured = $state({ value: 0 });
		$effect(() => {
			console.log(`created destructured value: ${destructured.value}`);
		});
		return {
			destructured,
			incrementDestructured() {
				destructured.value++;
			}
		};
	}

	export class DestructurableClass {
		destructuredClass = $state({ value: 0 });
		incrementDestructuredClass = () => {
			this.destructuredClass.value++;
		};
	}

	export class WrapperClass {
		value = $state(0);
		constructor() {
			$effect(() => {
				console.log(`wrapper class value: ${this.value}`);
			});
		}
		increment = () => {
			this.value++;
		};
	}

	export class WrapperGetterSetterClass {
		#value = $state(0);
		get value() {
			return this.#value;
		}
		set value(newValue: number) {
			console.log(`wrapper gettter setter class value: ${this.#value}`);
			this.#value = newValue;
		}
		increment = () => {
			this.#value++;
		};
	}
</script>

<script lang="ts">
	let basic = $state(0);
	const created = createGetterSetter();
	const { destructured, incrementDestructured } = createDestructurable();
	const { destructuredClass, incrementDestructuredClass } = new DestructurableClass();
	const wrapper = new WrapperClass();
	const wrapperGetterSetter = new WrapperGetterSetterClass();
	// `createDestructurable` but inline:
	const { inline, incrementInline } = $derived.by(() => {
		let inline = $state({ value: 0 });
		return {
			inline,
			incrementInline() {
				inline.value++;
			}
		};
	});
</script>

<button onclick={() => basic++}>
	{basic}
</button>

<button onclick={() => proxied.value++}>
	{proxied.value}
</button>

<button onclick={getterSetter.increment}>
	{getterSetter.value}
</button>

<button onclick={created.increment}>
	{created.value}
</button>

<button onclick={incrementDestructured}>
	{destructured.value}
</button>

<button onclick={incrementDestructuredClass}>
	{destructuredClass.value}
</button>

<button onclick={wrapper.increment}>
	{wrapper.value}
</button>

<button onclick={wrapperGetterSetter.increment}>
	{wrapperGetterSetter.value}
</button>

<button onclick={incrementInline}>
	{inline.value}
</button>