template.SlotElement() — svelte Function Reference

Source Code

packages/svelte/src/compiler/migrate/index.js lines 1228–1366

	SlotElement(node, { state, path, next, visit }) {
		migrate_slot_usage(node, path, state);

		if (state.analysis.custom_element) return;
		let name = 'children';
		let slot_name = 'default';
		let slot_props = '{ ';
		let aliased_slot_name;

		for (const attr of node.attributes) {
			if (attr.type === 'SpreadAttribute') {
				slot_props += `...${state.str.original.substring(/** @type {number} */ (attr.expression.start), attr.expression.end)}, `;
			} else if (attr.type === 'Attribute') {
				if (attr.name === 'slot') {
					continue;
				}

				if (attr.name === 'name') {
					slot_name = /** @type {any} */ (attr.value)[0].data;
					// if some of the parents or this node itself har a slot
					// attribute with the sane name of this slot
					// we want to create a derived or the migrated snippet
					// will shadow the slot prop
					if (
						path.some(
							(parent) =>
								(parent.type === 'RegularElement' ||
									parent.type === 'SvelteElement' ||
									parent.type === 'Component' ||
									parent.type === 'SvelteComponent' ||
									parent.type === 'SvelteFragment') &&
								parent.attributes.some(
									(attribute) =>
										attribute.type === 'Attribute' &&
										attribute.name === 'slot' &&
										is_text_attribute(attribute) &&
										attribute.value[0].data === slot_name
								)
						) ||
						node.attributes.some(
							(attribute) =>
								attribute.type === 'Attribute' &&
								attribute.name === 'slot' &&
								is_text_attribute(attribute) &&
								attribute.value[0].data === slot_name
						)
					) {
						aliased_slot_name = `${slot_name}_render`;
						state.derived_conflicting_slots.set(aliased_slot_name, slot_name);
					}
				} else {
					const attr_value =
						attr.value === true || Array.isArray(attr.value) ? attr.value : [attr.value];
					let value = 'true';
					if (attr_value !== true) {
						const first = attr_value[0];
						const last = attr_value[attr_value.length - 1];
						for (const attr of attr_value) {
							visit(attr);
						}
						value = state.str
							.snip(
								first.type === 'Text'
									? first.start - 1
									: /** @type {number} */ (first.expression.start),
								last.type === 'Text' ? last.end + 1 : /** @type {number} */ (last.expression.end)
							)
							.toString();
					}
					slot_props += value === attr.name ? `${value}, ` : `${attr.name}: ${value}, `;
				}
			}
		}

		slot_props += '}';
		if (slot_props === '{ }') {
			slot_props = '';
		}

		const existing_prop = state.props.find((prop) => prop.slot_name === slot_name);
		if (existing_prop) {