refactor(editor): Rename $emits to emits where we use defineEmits (no-changelog) (#9959)

packages/@n8n_io/eslint-config/frontend.js

@@ -56,6 +56,16 @@ module.exports = {
 		'vue/attribute-hyphenation': ['error', 'always'],
 		'import/no-extraneous-dependencies': 'warn',
 		'vue/define-emits-declaration': ['error', 'type-literal'],
+		'vue/require-macro-variable-name': [
+			'error',
+			{
+				defineProps: 'props',
+				defineEmits: 'emit',
+				defineSlots: 'slots',
+				useSlots: 'slots',
+				useAttrs: 'attrs',
+			},
+		],
 
 		// TODO: fix these
 		'@typescript-eslint/no-unsafe-call': 'off',

packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue

@@ -88,8 +88,8 @@ const props = withDefaults(defineProps<ActionDropdownProps>(), {
 	teleported: true,
 });
 
-const $attrs = useAttrs();
-const testIdPrefix = $attrs['data-test-id'];
+const attrs = useAttrs();
+const testIdPrefix = attrs['data-test-id'];
 
 const $style = useCssModule();
 const getItemClasses = (item: ActionDropdownItem): Record<string, boolean> => {
@@ -101,7 +101,7 @@ const getItemClasses = (item: ActionDropdownItem): Record<string, boolean> => {
 	};
 };
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	select: [action: string];
 	visibleChange: [open: boolean];
 }>();
@@ -111,8 +111,8 @@ const popperClass = computed(
 	() => `${$style.shadow}${props.hideArrow ? ` ${$style.hideArrow}` : ''}`,
 );
 
-const onSelect = (action: string) => $emit('select', action);
-const onVisibleChange = (open: boolean) => $emit('visibleChange', open);
+const onSelect = (action: string) => emit('select', action);
+const onVisibleChange = (open: boolean) => emit('visibleChange', open);
 
 const onButtonBlur = (event: FocusEvent) => {
 	// Hide dropdown when clicking outside of current document

packages/design-system/src/components/N8nActionToggle/ActionToggle.vue

@@ -68,12 +68,12 @@ withDefaults(defineProps<ActionToggleProps>(), {
 	iconOrientation: 'vertical',
 });
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	action: [value: string];
 	'visible-change': [value: boolean];
 }>();
-const onCommand = (value: string) => $emit('action', value);
-const onVisibleChange = (value: boolean) => $emit('visible-change', value);
+const onCommand = (value: string) => emit('action', value);
+const onVisibleChange = (value: boolean) => emit('visible-change', value);
 </script>
 
 <style lang="scss" module>

packages/design-system/src/components/N8nButton/Button.vue

@@ -8,7 +8,7 @@
 		:href="href"
 		aria-live="polite"
 		v-bind="{
-			...$attrs,
+			...attrs,
 			...(props.nativeType ? { type: props.nativeType } : {}),
 		}"
 	>
@@ -29,7 +29,7 @@ import N8nSpinner from '../N8nSpinner';
 import type { ButtonProps } from 'n8n-design-system/types/button';
 
 const $style = useCssModule();
-const $attrs = useAttrs();
+const attrs = useAttrs();
 
 defineOptions({ name: 'N8nButton' });
 const props = withDefaults(defineProps<ButtonProps>(), {

packages/design-system/src/components/N8nDatatable/Datatable.vue

@@ -84,7 +84,7 @@ const props = withDefaults(defineProps<DatatableProps>(), {
 	rowsPerPage: 10,
 });
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	'update:currentPage': [value: number];
 	'update:rowsPerPage': [value: number];
 }>();
@@ -115,11 +115,11 @@ const classes = computed(() => ({
 }));
 
 function onUpdateCurrentPage(value: number) {
-	$emit('update:currentPage', value);
+	emit('update:currentPage', value);
 }
 
 function onRowsPerPageChange(value: number) {
-	$emit('update:rowsPerPage', value);
+	emit('update:rowsPerPage', value);
 
 	const maxPage = Math.ceil(totalRows.value / value);
 	if (maxPage < props.currentPage) {

packages/design-system/src/components/N8nFormBox/FormBox.vue

@@ -68,16 +68,16 @@ withDefaults(defineProps<FormBoxProps>(), {
 });
 
 const formBus = createEventBus();
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	submit: [value: { [key: string]: Value }];
 	update: [value: { name: string; value: Value }];
 	secondaryClick: [value: Event];
 }>();
 
-const onUpdateModelValue = (e: { name: string; value: Value }) => $emit('update', e);
-const onSubmit = (e: { [key: string]: Value }) => $emit('submit', e);
+const onUpdateModelValue = (e: { name: string; value: Value }) => emit('update', e);
+const onSubmit = (e: { [key: string]: Value }) => emit('submit', e);
 const onButtonClick = () => formBus.emit('submit');
-const onSecondaryButtonClick = (event: Event) => $emit('secondaryClick', event);
+const onSecondaryButtonClick = (event: Event) => emit('secondaryClick', event);
 </script>
 
 <style lang="scss" module>

packages/design-system/src/components/N8nFormInput/FormInput.vue

@@ -157,7 +157,7 @@ const props = withDefaults(defineProps<Props>(), {
 	tagSize: 'small',
 });
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	validate: [shouldValidate: boolean];
 	'update:modelValue': [value: Validatable];
 	focus: [];
@@ -217,22 +217,22 @@ function getInputValidationError(): ReturnType<IValidator['validate']> {
 function onBlur() {
 	state.hasBlurred = true;
 	state.isTyping = false;
-	$emit('blur');
+	emit('blur');
 }
 
 function onUpdateModelValue(value: Validatable) {
 	state.isTyping = true;
-	$emit('update:modelValue', value);
+	emit('update:modelValue', value);
 }
 
 function onFocus() {
-	$emit('focus');
+	emit('focus');
 }
 
 function onEnter(event: Event) {
 	event.stopPropagation();
 	event.preventDefault();
-	$emit('enter');
+	emit('enter');
 }
 
 const validationError = computed<string | null>(() => {
@@ -258,14 +258,14 @@ const showErrors = computed(
 );
 
 onMounted(() => {
-	$emit('validate', !validationError.value);
+	emit('validate', !validationError.value);
 
 	if (props.focusInitially && inputRef.value) inputRef.value.focus();
 });
 
 watch(
 	() => validationError.value,
-	(error) => $emit('validate', !error),
+	(error) => emit('validate', !error),
 );
 
 defineExpose({ inputRef });

packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue

@@ -68,7 +68,7 @@ const props = withDefaults(defineProps<InfoAccordionProps>(), {
 	initiallyExpanded: false,
 	eventBus: () => createEventBus(),
 });
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	'click:body': [e: MouseEvent];
 	tooltipClick: [item: string, e: MouseEvent];
 }>();
@@ -85,9 +85,9 @@ const toggle = () => {
 	expanded.value = !expanded.value;
 };
 
-const onClick = (e: MouseEvent) => $emit('click:body', e);
+const onClick = (e: MouseEvent) => emit('click:body', e);
 
-const onTooltipClick = (item: string, event: MouseEvent) => $emit('tooltipClick', item, event);
+const onTooltipClick = (item: string, event: MouseEvent) => emit('tooltipClick', item, event);
 </script>
 
 <style lang="scss" module>

packages/design-system/src/components/N8nMarkdown/Markdown.vue

@@ -155,7 +155,7 @@ const htmlContent = computed(() => {
 	return safeHtml;
 });
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	'markdown-click': [link: string, e: MouseEvent];
 	'update-content': [content: string];
 }>();
@@ -174,7 +174,7 @@ const onClick = (event: MouseEvent) => {
 		}
 	}
 	if (clickedLink) {
-		$emit('markdown-click', clickedLink?.href, event);
+		emit('markdown-click', clickedLink?.href, event);
 	}
 };
 
@@ -209,7 +209,7 @@ const onCheckboxChange = (index: number) => {
 
 	// We are using index to connect the checkbox with the corresponding line in the markdown
 	const newContent = toggleCheckbox(currentContent, index);
-	$emit('update-content', newContent);
+	emit('update-content', newContent);
 };
 </script>
 

packages/design-system/src/components/N8nMenu/Menu.vue

@@ -82,7 +82,7 @@ const props = withDefaults(defineProps<MenuProps>(), {
 });
 const $route = useRoute();
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	select: [itemId: string];
 	'update:modelValue': [itemId: string];
 }>();
@@ -112,7 +112,7 @@ onMounted(() => {
 		activeTab.value = props.items.length > 0 ? props.items[0].id : '';
 	}
 
-	$emit('update:modelValue', activeTab.value);
+	emit('update:modelValue', activeTab.value);
 });
 
 const onSelect = (item: IMenuItem): void => {
@@ -120,8 +120,8 @@ const onSelect = (item: IMenuItem): void => {
 		activeTab.value = item.id;
 	}
 
-	$emit('select', item.id);
-	$emit('update:modelValue', item.id);
+	emit('select', item.id);
+	emit('update:modelValue', item.id);
 };
 </script>
 

packages/design-system/src/components/N8nNotice/Notice.vue

@@ -35,7 +35,7 @@ const props = withDefaults(defineProps<NoticeProps>(), {
 	fullContent: '',
 });
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	action: [key: string];
 }>();
 
@@ -75,7 +75,7 @@ const onClick = (event: MouseEvent) => {
 		} else if (canTruncate.value && anchorKey === 'toggle-expand') {
 			showFullContent.value = !showFullContent.value;
 		} else {
-			$emit('action', anchorKey);
+			emit('action', anchorKey);
 		}
 	}
 };

packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue

@@ -38,7 +38,7 @@ const props = withDefaults(defineProps<RadioButtonsProps>(), {
 	size: 'medium',
 });
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	'update:modelValue': [value: string, e: MouseEvent];
 }>();
 
@@ -49,7 +49,7 @@ const onClick = (
 	if (props.disabled || option.disabled) {
 		return;
 	}
-	$emit('update:modelValue', option.value, event);
+	emit('update:modelValue', option.value, event);
 };
 </script>
 

packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue

@@ -79,7 +79,7 @@ export interface ResizeData {
 	direction: Direction;
 }
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	resizestart: [];
 	resize: [value: ResizeData];
 	resizeend: [];
@@ -141,7 +141,7 @@ const mouseMove = (event: MouseEvent) => {
 	const y = event.y;
 	const direction = state.dir.value as Direction;
 
-	$emit('resize', { height, width, dX, dY, x, y, direction });
+	emit('resize', { height, width, dX, dY, x, y, direction });
 	state.dHeight.value = dHeight;
 	state.dWidth.value = dWidth;
 };
@@ -149,7 +149,7 @@ const mouseMove = (event: MouseEvent) => {
 const mouseUp = (event: MouseEvent) => {
 	event.preventDefault();
 	event.stopPropagation();
-	$emit('resizeend');
+	emit('resizeend');
 	window.removeEventListener('mousemove', mouseMove);
 	window.removeEventListener('mouseup', mouseUp);
 	document.body.style.cursor = 'unset';
@@ -176,7 +176,7 @@ const resizerMove = (event: MouseEvent) => {
 
 	window.addEventListener('mousemove', mouseMove);
 	window.addEventListener('mouseup', mouseUp);
-	$emit('resizestart');
+	emit('resizestart');
 };
 </script>
 

packages/design-system/src/components/N8nTabs/Tabs.vue

@@ -110,13 +110,13 @@ onUnmounted(() => {
 	resizeObserver?.disconnect();
 });
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	tooltipClick: [tab: string, e: MouseEvent];
 	'update:modelValue': [tab: string];
 }>();
 
-const handleTooltipClick = (tab: string, event: MouseEvent) => $emit('tooltipClick', tab, event);
-const handleTabClick = (tab: string) => $emit('update:modelValue', tab);
+const handleTooltipClick = (tab: string, event: MouseEvent) => emit('tooltipClick', tab, event);
+const handleTabClick = (tab: string) => emit('update:modelValue', tab);
 
 const scroll = (left: number) => {
 	const container = tabs.value;

packages/design-system/src/components/N8nTags/Tags.vue

@@ -4,7 +4,7 @@
 			v-for="tag in visibleTags"
 			:key="tag.id"
 			:text="tag.name"
-			@click="$emit('click:tag', tag.id, $event)"
+			@click="emit('click:tag', tag.id, $event)"
 		/>
 		<N8nLink
 			v-if="truncate && !showAll && hiddenTagsLength > 0"
@@ -42,7 +42,7 @@ const props = withDefaults(defineProps<TagsProp>(), {
 	truncateAt: 3,
 });
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	expand: [value: boolean];
 	'click:tag': [tagId: string, e: MouseEvent];
 }>();
@@ -63,7 +63,7 @@ const hiddenTagsLength = computed((): number => props.tags.length - props.trunca
 
 const onExpand = () => {
 	showAll.value = true;
-	$emit('expand', true);
+	emit('expand', true);
 };
 </script>
 

packages/design-system/src/components/N8nUserSelect/UserSelect.vue

@@ -54,7 +54,7 @@ const props = withDefaults(defineProps<UserSelectProps>(), {
 	currentUserId: '',
 });
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	blur: [];
 	focus: [];
 }>();
@@ -105,8 +105,8 @@ const setFilter = (value: string) => {
 	filter.value = value;
 };
 
-const onBlur = () => $emit('blur');
-const onFocus = () => $emit('focus');
+const onBlur = () => emit('blur');
+const onFocus = () => emit('focus');
 
 const getLabel = (user: IUser) =>
 	!user.fullName ? user.email : `${user.fullName} (${user.email})`;

packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
 	selectedCredentialId: string | null;
 }>();
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	credentialSelected: [credentialId: string];
 	credentialDeselected: [];
 	credentialModalOpened: [];
@@ -38,18 +38,18 @@ const credentialOptions = computed(() => {
 });
 
 const onCredentialSelected = (credentialId: string) => {
-	$emit('credentialSelected', credentialId);
+	emit('credentialSelected', credentialId);
 };
 const createNewCredential = () => {
 	uiStore.openNewCredential(props.credentialType, true);
 	wasModalOpenedFromHere.value = true;
-	$emit('credentialModalOpened');
+	emit('credentialModalOpened');
 };
 const editCredential = () => {
 	assert(props.selectedCredentialId);
 	uiStore.openExistingCredential(props.selectedCredentialId);
 	wasModalOpenedFromHere.value = true;
-	$emit('credentialModalOpened');
+	emit('credentialModalOpened');
 };
 
 listenForCredentialChanges({
@@ -59,7 +59,7 @@ listenForCredentialChanges({
 			return;
 		}
 
-		$emit('credentialSelected', credential.id);
+		emit('credentialSelected', credential.id);
 	},
 	onCredentialDeleted: (deletedCredentialId) => {
 		if (!wasModalOpenedFromHere.value) {
@@ -74,9 +74,9 @@ listenForCredentialChanges({
 			.map((credential) => credential.id)
 			.filter((id) => id !== deletedCredentialId);
 		if (optionsWoDeleted.length > 0) {
-			$emit('credentialSelected', optionsWoDeleted[0]);
+			emit('credentialSelected', optionsWoDeleted[0]);
 		} else {
-			$emit('credentialDeselected');
+			emit('credentialDeselected');
 		}
 	},
 });

packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
 	selectedCredentialId: string | null;
 }>();
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
 	credentialSelected: [credentialId: string];
 	newCredential: [];
 }>();
@@ -23,9 +23,9 @@ const NEW_CREDENTIALS_TEXT = `- ${i18n.baseText('nodeCredentials.createNew')} -`
 
 const onCredentialSelected = (credentialId: string) => {
 	if (credentialId === NEW_CREDENTIALS_TEXT) {
-		$emit('newCredential');
+		emit('newCredential');
 	} else {
-		$emit('credentialSelected', credentialId);
+		emit('credentialSelected', credentialId);
 	}
 };
 </script>