svelte Architecture Docs
Home / Function/ TransitionDirective() — svelte Function Reference

TransitionDirective() — svelte Function Reference

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

Function javascript Compiler Migrator calls 2

Entity Profile

Dependency Diagram

graph TD
  2602b54c_5262_bee1_c331_76eb3bbd07f5["TransitionDirective()"]
  42ba314e_c59a_5f97_37c4_16009ba66836["TransitionDirective.js"]
  2602b54c_5262_bee1_c331_76eb3bbd07f5 -->|defined in| 42ba314e_c59a_5f97_37c4_16009ba66836
  adc3771e_5aef_eddf_fcf6_46eb2c97455a["parse_directive_name()"]
  2602b54c_5262_bee1_c331_76eb3bbd07f5 -->|calls| adc3771e_5aef_eddf_fcf6_46eb2c97455a
  c8d80c9d_ab6c_13c0_c85e_a9b120f82f45["blockers()"]
  2602b54c_5262_bee1_c331_76eb3bbd07f5 -->|calls| c8d80c9d_ab6c_13c0_c85e_a9b120f82f45
  style 2602b54c_5262_bee1_c331_76eb3bbd07f5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js lines 12–41

export function TransitionDirective(node, context) {
	let flags = node.modifiers.includes('global') ? TRANSITION_GLOBAL : 0;
	if (node.intro) flags |= TRANSITION_IN;
	if (node.outro) flags |= TRANSITION_OUT;

	const args = [
		b.literal(flags),
		context.state.node,
		b.thunk(/** @type {Expression} */ (context.visit(parse_directive_name(node.name))))
	];

	if (node.expression) {
		args.push(b.thunk(/** @type {Expression} */ (context.visit(node.expression))));
	}

	// in after_update to ensure it always happens after bind:this
	let statement = b.stmt(b.call('$.transition', ...args));

	if (node.metadata.expression.is_async()) {
		statement = b.stmt(
			b.call(
				'$.run_after_blockers',
				node.metadata.expression.blockers(),
				b.thunk(b.block([statement]))
			)
		);
	}

	context.state.after_update.push(statement);
}

Domain

Subdomains

Defined In

Calls

Source

Frequently Asked Questions

What does TransitionDirective() do?
TransitionDirective() is a function in the svelte codebase, defined in packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js.
Where is TransitionDirective() defined?
TransitionDirective() is defined in packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js at line 12.
What does TransitionDirective() call?
TransitionDirective() calls 2 function(s): blockers, parse_directive_name.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free