OnDirective() — svelte Function Reference

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

Function javascript Compiler Transformer calls 2

Entity Profile

Compiler→ Transformer→ OnDirective() — svelte Function Reference

Dependency Diagram

graph TD
  1fd2e260_163e_201e_1773_5744f70a7e9c["OnDirective()"]
  c19211c5_1457_5635_6aff_780db82c7240["OnDirective.js"]
  1fd2e260_163e_201e_1773_5744f70a7e9c -->|defined in| c19211c5_1457_5635_6aff_780db82c7240
  cd53dd1a_8bd9_06e2_6bfe_ed90344d0b28["build_event_handler()"]
  1fd2e260_163e_201e_1773_5744f70a7e9c -->|calls| cd53dd1a_8bd9_06e2_6bfe_ed90344d0b28
  2ed29e53_0d07_f94c_69fa_4365c369a1dd["build_event()"]
  1fd2e260_163e_201e_1773_5744f70a7e9c -->|calls| 2ed29e53_0d07_f94c_69fa_4365c369a1dd
  style 1fd2e260_163e_201e_1773_5744f70a7e9c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js lines 19–38

export function OnDirective(node, context) {
	if (!node.expression) {
		context.state.analysis.needs_props = true;
	}

	let handler = build_event_handler(node.expression, node.metadata.expression, context);

	for (const modifier of modifiers) {
		if (node.modifiers.includes(modifier)) {
			handler = b.call('$.' + modifier, handler);
		}
	}

	const capture = node.modifiers.includes('capture');
	const passive =
		node.modifiers.includes('passive') ||
		(node.modifiers.includes('nonpassive') ? false : undefined);

	return build_event(node.name, context.state.node, handler, capture, passive);
}