derived() — svelte Function Reference

Architecture documentation for the derived() function in index.js from the svelte codebase.

Function javascript SharedInternal BitFlags calls 3

Entity Profile

SharedInternal→ BitFlags→ derived() — svelte Function Reference

Dependency Diagram

graph TD
  859279c4_7e63_3830_c144_7e5e2ad3366d["derived()"]
  b874f390_a6ee_7d84_7151_b2b77f0388d5["index.js"]
  859279c4_7e63_3830_c144_7e5e2ad3366d -->|defined in| b874f390_a6ee_7d84_7151_b2b77f0388d5
  a6e21914_fa35_9517_31ef_4774ea1ecde3["readable()"]
  859279c4_7e63_3830_c144_7e5e2ad3366d -->|calls| a6e21914_fa35_9517_31ef_4774ea1ecde3
  257e3ffe_958d_4447_c42b_d1cd05172fdb["subscribe_to_store()"]
  859279c4_7e63_3830_c144_7e5e2ad3366d -->|calls| 257e3ffe_958d_4447_c42b_d1cd05172fdb
  ff67bcc0_629f_eab4_221d_71e6bc15e31e["run_all()"]
  859279c4_7e63_3830_c144_7e5e2ad3366d -->|calls| ff67bcc0_629f_eab4_221d_71e6bc15e31e
  style 859279c4_7e63_3830_c144_7e5e2ad3366d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/store/shared/index.js lines 129–181

export function derived(stores, fn, initial_value) {
	const single = !Array.isArray(stores);
	/** @type {Array<Readable<any>>} */
	const stores_array = single ? [stores] : stores;
	if (!stores_array.every(Boolean)) {
		throw new Error('derived() expects stores as input, got a falsy value');
	}
	const auto = fn.length < 2;
	return readable(initial_value, (set, update) => {
		let started = false;
		/** @type {T[]} */
		const values = [];
		let pending = 0;
		let cleanup = noop;
		const sync = () => {
			if (pending) {
				return;
			}
			cleanup();
			const result = fn(single ? values[0] : values, set, update);
			if (auto) {
				set(result);
			} else {
				cleanup = typeof result === 'function' ? result : noop;
			}
		};
		const unsubscribers = stores_array.map((store, i) =>
			subscribe_to_store(
				store,
				(value) => {
					values[i] = value;
					pending &= ~(1 << i);
					if (started) {
						sync();
					}
				},
				() => {
					pending |= 1 << i;
				}
			)
		);
		started = true;
		sync();
		return function stop() {
			run_all(unsubscribers);
			cleanup();
			// We need to set this to false because callbacks can still happen despite having unsubscribed:
			// Callbacks might already be placed in the queue which doesn't know it should no longer
			// invoke this derived store.
			started = false;
		};
	});
}