tick() — svelte Function Reference

Architecture documentation for the tick() function in runtime.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 1 called by 2

Entity Profile

ClientRuntime→ Hydration→ tick() — svelte Function Reference

Dependency Diagram

graph TD
  a53cae39_471c_2887_0e0b_eedb385d245a["tick()"]
  bde4209f_8ffc_1594_4024_b1835a44bcf6["runtime.js"]
  a53cae39_471c_2887_0e0b_eedb385d245a -->|defined in| bde4209f_8ffc_1594_4024_b1835a44bcf6
  5c05338d_77e4_261b_050c_69794590bc6f["bind_value()"]
  5c05338d_77e4_261b_050c_69794590bc6f -->|calls| a53cae39_471c_2887_0e0b_eedb385d245a
  df0bba2e_5fd6_624d_e576_6c964cadc587["animate()"]
  df0bba2e_5fd6_624d_e576_6c964cadc587 -->|calls| a53cae39_471c_2887_0e0b_eedb385d245a
  5bc3c950_96f7_e454_6cb7_65ffc2179811["flushSync()"]
  a53cae39_471c_2887_0e0b_eedb385d245a -->|calls| 5bc3c950_96f7_e454_6cb7_65ffc2179811
  style a53cae39_471c_2887_0e0b_eedb385d245a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/runtime.js lines 483–499

export async function tick() {
	if (async_mode_flag) {
		return new Promise((f) => {
			// Race them against each other - in almost all cases requestAnimationFrame will fire first,
			// but e.g. in case the window is not focused or a view transition happens, requestAnimationFrame
			// will be delayed and setTimeout helps us resolve fast enough in that case
			requestAnimationFrame(() => f());
			setTimeout(() => f());
		});
	}

	await Promise.resolve();

	// By calling flushSync we guarantee that any pending state changes are applied after one tick.
	// TODO look into whether we can make flushing subsequent updates synchronously in the future.
	flushSync();
}