feat(editor): Migrate debounce mixin to useDebounce composable (no-changelog) (#8244)

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

@@ -17,14 +17,17 @@ import { BREAKPOINT_SM, BREAKPOINT_MD, BREAKPOINT_LG, BREAKPOINT_XL } from '@/co
  * xl >= 1920
  */
 
-import { debounceHelper } from '@/mixins/debounce';
 import { useUIStore } from '@/stores/ui.store';
 import { getBannerRowHeight } from '@/utils/htmlUtils';
+import { useDebounce } from '@/composables/useDebounce';
 
 export default defineComponent({
 	name: 'BreakpointsObserver',
-	mixins: [debounceHelper],
 	props: ['valueXS', 'valueXL', 'valueLG', 'valueMD', 'valueSM', 'valueDefault'],
+	setup() {
+		const { callDebounced } = useDebounce();
+		return { callDebounced };
+	},
 	data() {
 		return {
 			width: window.innerWidth,
@@ -83,7 +86,7 @@ export default defineComponent({
 	},
 	methods: {
 		onResize() {
-			void this.callDebounced('onResizeEnd', { debounceTime: 50 });
+			void this.callDebounced(this.onResizeEnd, { debounceTime: 50 });
 		},
 		async onResizeEnd() {
 			this.width = window.innerWidth;

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

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, reactive, onBeforeMount, ref } from 'vue';
-import debounce from 'lodash/debounce';
 import type {
 	ExecutionFilterType,
 	ExecutionFilterMetadata,
@@ -11,10 +10,10 @@ import TagsDropdown from '@/components/TagsDropdown.vue';
 import { getObjectKeys, isEmpty } from '@/utils/typesUtils';
 import { EnterpriseEditionFeature } from '@/constants';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useUsageStore } from '@/stores/usage.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useTelemetry } from '@/composables/useTelemetry';
 import type { Placement } from '@floating-ui/core';
+import { useDebounce } from '@/composables/useDebounce';
 
 export type ExecutionFilterProps = {
 	workflows?: IWorkflowShortResponse[];
@@ -25,8 +24,8 @@ export type ExecutionFilterProps = {
 const DATE_TIME_MASK = 'YYYY-MM-DD HH:mm';
 
 const settingsStore = useSettingsStore();
-const usageStore = useUsageStore();
 const uiStore = useUIStore();
+const { debounce } = useDebounce();
 
 const telemetry = useTelemetry();
 
@@ -37,7 +36,9 @@ const props = withDefaults(defineProps<ExecutionFilterProps>(), {
 const emit = defineEmits<{
 	(event: 'filterChanged', value: ExecutionFilterType): void;
 }>();
-const debouncedEmit = debounce(emit, 500);
+const debouncedEmit = debounce(emit, {
+	debounceTime: 500,
+});
 
 const isCustomDataFilterTracked = ref(false);
 const isAdvancedExecutionFilterEnabled = computed(() =>

packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue

@@ -58,7 +58,6 @@ import { v4 as uuid } from 'uuid';
 import type { Route } from 'vue-router';
 import { executionHelpers } from '@/mixins/executionsHelpers';
 import { range as _range } from 'lodash-es';
-import { debounceHelper } from '@/mixins/debounce';
 import { NO_NETWORK_ERROR_CODE } from '@/utils/apiUtils';
 import { getNodeViewTab } from '@/utils/canvasUtils';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
@@ -69,6 +68,7 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useTagsStore } from '@/stores/tags.store';
 import { executionFilterToQueryFilter } from '@/utils/executionUtils';
 import { useExternalHooks } from '@/composables/useExternalHooks';
+import { useDebounce } from '@/composables/useDebounce';
 
 // Number of execution pages that are fetched before temporary execution card is shown
 const MAX_LOADING_ATTEMPTS = 5;
@@ -80,12 +80,14 @@ export default defineComponent({
 	components: {
 		ExecutionsSidebar,
 	},
-	mixins: [executionHelpers, debounceHelper, workflowHelpers],
+	mixins: [executionHelpers, workflowHelpers],
 	setup() {
 		const externalHooks = useExternalHooks();
+		const { callDebounced } = useDebounce();
 
 		return {
 			externalHooks,
+			callDebounced,
 			...useToast(),
 			...useMessage(),
 		};
@@ -231,7 +233,7 @@ export default defineComponent({
 		},
 		async onLoadMore(): Promise<void> {
 			if (!this.loadingMore) {
-				await this.callDebounced('loadMore', { debounceTime: 1000 });
+				await this.callDebounced(this.loadMore, { debounceTime: 1000 });
 			}
 		},
 		async loadMore(limit = 20): Promise<void> {

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

@@ -89,11 +89,11 @@ import type { IVariableItemSelected } from '@/Interface';
 
 import { EXPRESSIONS_DOCS_URL } from '@/constants';
 
-import { debounceHelper } from '@/mixins/debounce';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { createExpressionTelemetryPayload } from '@/utils/telemetryUtils';
+import { useDebounce } from '@/composables/useDebounce';
 
 import type { Segment } from '@/types/expressions';
 
@@ -104,7 +104,6 @@ export default defineComponent({
 		ExpressionEditorModalOutput,
 		VariableSelector,
 	},
-	mixins: [debounceHelper],
 	props: {
 		dialogVisible: {
 			type: Boolean,
@@ -137,8 +136,10 @@ export default defineComponent({
 	},
 	setup() {
 		const externalHooks = useExternalHooks();
+		const { callDebounced } = useDebounce();
 
 		return {
+			callDebounced,
 			externalHooks,
 		};
 	},
@@ -194,7 +195,9 @@ export default defineComponent({
 				this.updateDisplayValue();
 				this.$emit('update:modelValue', this.latestValue);
 			} else {
-				void this.callDebounced('updateDisplayValue', { debounceTime: 500 });
+				void this.callDebounced(this.updateDisplayValue, {
+					debounceTime: 500,
+				});
 			}
 		},
 

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

@@ -18,7 +18,7 @@ import {
 	DEFAULT_OPERATOR_VALUE,
 } from './constants';
 import { useI18n } from '@/composables/useI18n';
-import { useDebounceHelper } from '@/composables/useDebounce';
+import { useDebounce } from '@/composables/useDebounce';
 import Condition from './Condition.vue';
 import CombinatorSelect from './CombinatorSelect.vue';
 import { resolveParameter } from '@/mixins/workflowHelpers';
@@ -39,7 +39,7 @@ const emit = defineEmits<{
 
 const i18n = useI18n();
 const ndvStore = useNDVStore();
-const { callDebounced } = useDebounceHelper();
+const { callDebounced } = useDebounce();
 
 function createCondition(): FilterConditionValue {
 	return { id: uuid(), leftValue: '', rightValue: '', operator: DEFAULT_OPERATOR_VALUE };

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

@@ -107,7 +107,6 @@ import GiftNotificationIcon from './GiftNotificationIcon.vue';
 import { useMessage } from '@/composables/useMessage';
 import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
 import { userHelpers } from '@/mixins/userHelpers';
-import { debounceHelper } from '@/mixins/debounce';
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 import { useCloudPlanStore } from '@/stores/cloudPlan.store';
@@ -123,6 +122,7 @@ import ExecutionsUsage from '@/components/ExecutionsUsage.vue';
 import MainSidebarSourceControl from '@/components/MainSidebarSourceControl.vue';
 import { hasPermission } from '@/rbac/permissions';
 import { useExternalHooks } from '@/composables/useExternalHooks';
+import { useDebounce } from '@/composables/useDebounce';
 
 export default defineComponent({
 	name: 'MainSidebar',
@@ -131,12 +131,14 @@ export default defineComponent({
 		ExecutionsUsage,
 		MainSidebarSourceControl,
 	},
-	mixins: [userHelpers, debounceHelper],
+	mixins: [userHelpers],
 	setup(props, ctx) {
 		const externalHooks = useExternalHooks();
+		const { callDebounced } = useDebounce();
 
 		return {
 			externalHooks,
+			callDebounced,
 			...useMessage(),
 		};
 	},
@@ -497,7 +499,7 @@ export default defineComponent({
 			return defaultSettingsRoute;
 		},
 		onResize(event: UIEvent) {
-			void this.callDebounced('onResizeEnd', { debounceTime: 100 }, event);
+			void this.callDebounced(this.onResizeEnd, { debounceTime: 100 }, event);
 		},
 		async onResizeEnd(event: UIEvent) {
 			const browserWidth = (event.target as Window).outerWidth;

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

@@ -53,10 +53,10 @@ import type { INodeTypeDescription } from 'n8n-workflow';
 import PanelDragButton from './PanelDragButton.vue';
 
 import { LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH, MAIN_NODE_PANEL_WIDTH } from '@/constants';
-import { debounceHelper } from '@/mixins/debounce';
 import { useNDVStore } from '@/stores/ndv.store';
 import { ndvEventBus } from '@/event-bus';
 import NDVFloatingNodes from '@/components/NDVFloatingNodes.vue';
+import { useDebounce } from '@/composables/useDebounce';
 
 const SIDE_MARGIN = 24;
 const SIDE_PANELS_MARGIN = 80;
@@ -78,7 +78,6 @@ export default defineComponent({
 		PanelDragButton,
 		NDVFloatingNodes,
 	},
-	mixins: [debounceHelper],
 	props: {
 		isDraggable: {
 			type: Boolean,
@@ -94,6 +93,11 @@ export default defineComponent({
 			default: () => ({}),
 		},
 	},
+	setup() {
+		const { callDebounced } = useDebounce();
+
+		return { callDebounced };
+	},
 	data(): {
 		windowWidth: number;
 		isDragging: boolean;
@@ -343,7 +347,7 @@ export default defineComponent({
 		},
 		onResizeDebounced(data: { direction: string; x: number; width: number }) {
 			if (this.initialized) {
-				void this.callDebounced('onResize', { debounceTime: 10, trailing: true }, data);
+				void this.callDebounced(this.onResize, { debounceTime: 10, trailing: true }, data);
 			}
 		},
 		onResize({ direction, x, width }: { direction: string; x: number; width: number }) {

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

@@ -176,7 +176,6 @@ import TitledList from '@/components/TitledList.vue';
 import { get } from 'lodash-es';
 import { getTriggerNodeServiceName } from '@/utils/nodeTypesUtils';
 import type { INodeUi, XYPosition } from '@/Interface';
-import { debounceHelper } from '@/mixins/debounce';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -187,6 +186,7 @@ import { type ContextMenuTarget, useContextMenu } from '@/composables/useContext
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { usePinnedData } from '@/composables/usePinnedData';
+import { useDebounce } from '@/composables/useDebounce';
 
 export default defineComponent({
 	name: 'Node',
@@ -195,7 +195,7 @@ export default defineComponent({
 		FontAwesomeIcon,
 		NodeIcon,
 	},
-	mixins: [nodeBase, workflowHelpers, debounceHelper],
+	mixins: [nodeBase, workflowHelpers],
 	props: {
 		isProductionExecutionPreview: {
 			type: Boolean,
@@ -217,8 +217,9 @@ export default defineComponent({
 		const nodeHelpers = useNodeHelpers();
 		const node = workflowsStore.getNodeByName(props.name);
 		const pinnedData = usePinnedData(node);
+		const { callDebounced } = useDebounce();
 
-		return { contextMenu, externalHooks, nodeHelpers, pinnedData };
+		return { contextMenu, externalHooks, nodeHelpers, pinnedData, callDebounced };
 	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
@@ -679,7 +680,7 @@ export default defineComponent({
 		},
 
 		onClick(event: MouseEvent) {
-			void this.callDebounced('onClickDebounced', { debounceTime: 50, trailing: true }, event);
+			void this.callDebounced(this.onClickDebounced, { debounceTime: 50, trailing: true }, event);
 		},
 
 		onClickDebounced(event: MouseEvent) {

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

@@ -508,7 +508,6 @@ import { isResourceLocatorValue } from '@/utils/typeGuards';
 import { CUSTOM_API_CALL_KEY, HTML_NODE_TYPE, NODES_USING_CODE_NODE_EDITOR } from '@/constants';
 
 import type { PropType } from 'vue';
-import { debounceHelper } from '@/mixins/debounce';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -522,6 +521,7 @@ import { useI18n } from '@/composables/useI18n';
 import type { N8nInput } from 'n8n-design-system';
 import { isCredentialOnlyNodeType } from '@/utils/credentialOnlyNodes';
 import { useExternalHooks } from '@/composables/useExternalHooks';
+import { useDebounce } from '@/composables/useDebounce';
 
 type Picker = { $emit: (arg0: string, arg1: Date) => void };
 
@@ -540,7 +540,7 @@ export default defineComponent({
 		ResourceLocator,
 		TextEdit,
 	},
-	mixins: [workflowHelpers, debounceHelper],
+	mixins: [workflowHelpers],
 	props: {
 		additionalExpressionData: {
 			type: Object as PropType<IDataObject>,
@@ -612,11 +612,13 @@ export default defineComponent({
 		const externalHooks = useExternalHooks();
 		const i18n = useI18n();
 		const nodeHelpers = useNodeHelpers();
+		const { callDebounced } = useDebounce();
 
 		return {
 			externalHooks,
 			i18n,
 			nodeHelpers,
+			callDebounced,
 		};
 	},
 	data() {
@@ -1243,7 +1245,7 @@ export default defineComponent({
 			this.$emit('textInput', parameterData);
 		},
 		valueChangedDebounced(value: NodeParameterValueType | {} | Date) {
-			void this.callDebounced('valueChanged', { debounceTime: 100 }, value);
+			void this.callDebounced(this.valueChanged, { debounceTime: 100 }, value);
 		},
 		onUpdateTextInput(value: string) {
 			this.valueChanged(value);

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

@@ -148,7 +148,6 @@ import type { IResourceLocatorReqParams, IResourceLocatorResultExpanded } from '
 import DraggableTarget from '@/components/DraggableTarget.vue';
 import ExpressionParameterInput from '@/components/ExpressionParameterInput.vue';
 import ParameterIssues from '@/components/ParameterIssues.vue';
-import { debounceHelper } from '@/mixins/debounce';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -174,6 +173,7 @@ import { mapStores } from 'pinia';
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 import ResourceLocatorDropdown from './ResourceLocatorDropdown.vue';
+import { useDebounce } from '@/composables/useDebounce';
 
 interface IResourceLocatorQuery {
 	results: INodeListSearchItems[];
@@ -190,7 +190,7 @@ export default defineComponent({
 		ParameterIssues,
 		ResourceLocatorDropdown,
 	},
-	mixins: [debounceHelper, workflowHelpers],
+	mixins: [workflowHelpers],
 	props: {
 		parameter: {
 			type: Object as PropType<INodeProperties>,
@@ -267,6 +267,11 @@ export default defineComponent({
 			width: 0,
 		};
 	},
+	setup() {
+		const { callDebounced } = useDebounce();
+
+		return { callDebounced };
+	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore, useRootStore, useUIStore, useWorkflowsStore),
 		appName(): string {
@@ -636,7 +641,10 @@ export default defineComponent({
 			}
 		},
 		loadResourcesDebounced() {
-			void this.callDebounced('loadResources', { debounceTime: 1000, trailing: true });
+			void this.callDebounced(this.loadResources, {
+				debounceTime: 1000,
+				trailing: true,
+			});
 		},
 		setResponse(paramsKey: string, props: Partial<IResourceLocatorQuery>) {
 			this.cachedResponses = {

packages/editor-ui/src/components/layouts/ResourcesListLayout.vue

@@ -191,13 +191,13 @@ import type { IUser } from '@/Interface';
 import PageViewLayout from '@/components/layouts/PageViewLayout.vue';
 import PageViewLayoutList from '@/components/layouts/PageViewLayoutList.vue';
 import { EnterpriseEditionFeature } from '@/constants';
-import { debounceHelper } from '@/mixins/debounce';
 import ResourceOwnershipSelect from '@/components/forms/ResourceOwnershipSelect.ee.vue';
 import ResourceFiltersDropdown from '@/components/forms/ResourceFiltersDropdown.vue';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import type { N8nInput, DatatableColumn } from 'n8n-design-system';
 import { useI18n } from '@/composables/useI18n';
+import { useDebounce } from '@/composables/useDebounce';
 
 export interface IResource {
 	id: string;
@@ -227,7 +227,6 @@ export default defineComponent({
 		ResourceOwnershipSelect,
 		ResourceFiltersDropdown,
 	},
-	mixins: [debounceHelper],
 	props: {
 		resourceKey: {
 			type: String,
@@ -289,9 +288,11 @@ export default defineComponent({
 	},
 	setup() {
 		const i18n = useI18n();
+		const { callDebounced } = useDebounce();
 
 		return {
 			i18n,
+			callDebounced,
 		};
 	},
 	data() {
@@ -406,7 +407,7 @@ export default defineComponent({
 		},
 		'filtersModel.search'() {
 			void this.callDebounced(
-				'sendFiltersTelemetry',
+				this.sendFiltersTelemetry,
 				{ debounceTime: 1000, trailing: true },
 				'search',
 			);

packages/editor-ui/src/composables/__tests__/useDebounce.test.ts

@@ -1,8 +1,8 @@
 import { vi, describe, it, expect } from 'vitest';
-import { useDebounceHelper } from '../useDebounce';
+import { useDebounce } from '../useDebounce';
 import { render, screen } from '@testing-library/vue';
 
-describe('useDebounceHelper', () => {
+describe('useDebounce()', () => {
 	const debounceTime = 500;
 
 	const TestComponent = {
@@ -24,7 +24,7 @@ describe('useDebounceHelper', () => {
 		},
 		setup() {
 			vitest.useFakeTimers();
-			const { callDebounced } = useDebounceHelper();
+			const { callDebounced } = useDebounce();
 			return {
 				callDebounced,
 				debounceTime,

packages/editor-ui/src/composables/useClipboard.ts

@@ -1,6 +1,6 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { debounce } from 'lodash-es';
 import { useClipboard as useClipboardCore } from '@vueuse/core';
+import { useDebounce } from '@/composables/useDebounce';
 
 type ClipboardEventFn = (data: string, event?: ClipboardEvent) => void;
 
@@ -11,6 +11,7 @@ export function useClipboard(
 		onPaste() {},
 	},
 ) {
+	const { debounce } = useDebounce();
 	const { copy, copied, isSupported, text } = useClipboardCore();
 
 	const ignoreClasses = ['el-messsage-box', 'ignore-key-press'];
@@ -46,7 +47,9 @@ export function useClipboard(
 		}
 	}
 
-	const debouncedOnPaste = debounce(onPaste, 1000, { leading: true });
+	const debouncedOnPaste = debounce(onPaste, {
+		debounceTime: 1000,
+	});
 
 	/**
 	 * Initialize copy/paste elements and events

packages/editor-ui/src/composables/useDebounce.ts

@@ -1,38 +1,54 @@
 import { ref } from 'vue';
-import { debounce } from 'lodash-es';
+import { debounce as _debounce } from 'lodash-es';
 
-type DebouncedFunction = (...args: unknown[]) => Promise<void> | void;
+export interface DebounceOptions {
+	debounceTime: number;
+	trailing?: boolean;
+}
 
-export function useDebounceHelper() {
+export type DebouncedFunction<R = void> = (...args: unknown[]) => R;
+
+export function useDebounce() {
 	// Create a ref for the WeakMap to store debounced functions.
-	const debouncedFunctions = ref(new WeakMap<DebouncedFunction, DebouncedFunction>());
+	const debounceCache = ref(new WeakMap<DebouncedFunction<unknown>, DebouncedFunction<unknown>>());
 
-	const callDebounced = async (
-		func: DebouncedFunction,
-		options: { debounceTime: number; trailing?: boolean },
-		...inputParameters: unknown[]
-	): Promise<void> => {
+	const debounce = <T extends DebouncedFunction<ReturnType<T>>>(
+		fn: T,
+		options: DebounceOptions,
+	): T => {
 		const { trailing, debounceTime } = options;
 
 		// Check if a debounced version of the function is already stored in the WeakMap.
-		let debouncedFunc = debouncedFunctions.value.get(func);
+		let debouncedFn = debounceCache.value.get(fn);
 
 		// If a debounced version is not found, create one and store it in the WeakMap.
-		if (debouncedFunc === undefined) {
-			debouncedFunc = debounce(
+		if (debouncedFn === undefined) {
+			debouncedFn = _debounce(
 				async (...args: unknown[]) => {
-					await func(...args);
+					return fn(...args);
 				},
 				debounceTime,
 				trailing ? { trailing } : { leading: true },
 			);
-			debouncedFunctions.value.set(func, debouncedFunc);
+
+			debounceCache.value.set(fn, debouncedFn);
 		}
 
-		await debouncedFunc(...inputParameters);
+		return debouncedFn as T;
+	};
+
+	const callDebounced = <T extends DebouncedFunction<ReturnType<T>>>(
+		fn: T,
+		options: DebounceOptions,
+		...inputParameters: Parameters<T>
+	): ReturnType<T> => {
+		const debouncedFn = debounce(fn, options);
+
+		return debouncedFn(...inputParameters) as ReturnType<T>;
 	};
 
 	return {
+		debounce,
 		callDebounced,
 	};
 }

packages/editor-ui/src/composables/useHistoryHelper.ts

@@ -6,11 +6,11 @@ import { useHistoryStore } from '@/stores/history.store';
 import { useUIStore } from '@/stores/ui.store';
 
 import { onMounted, onUnmounted, nextTick } from 'vue';
-import { useDebounceHelper } from './useDebounce';
 import { useDeviceSupport } from 'n8n-design-system/composables/useDeviceSupport';
 import { getNodeViewTab } from '@/utils/canvasUtils';
 import type { Route } from 'vue-router';
 import { useTelemetry } from './useTelemetry';
+import { useDebounce } from '@/composables/useDebounce';
 
 const UNDO_REDO_DEBOUNCE_INTERVAL = 100;
 const ELEMENT_UI_OVERLAY_SELECTOR = '.el-overlay';
@@ -22,7 +22,7 @@ export function useHistoryHelper(activeRoute: Route) {
 	const historyStore = useHistoryStore();
 	const uiStore = useUIStore();
 
-	const { callDebounced } = useDebounceHelper();
+	const { callDebounced } = useDebounce();
 	const { isCtrlKeyPressed } = useDeviceSupport();
 
 	const undo = async () =>

packages/editor-ui/src/mixins/debounce.ts

@@ -1,30 +0,0 @@
-import { debounce } from 'lodash-es';
-import { defineComponent } from 'vue';
-
-export const debounceHelper = defineComponent({
-	data() {
-		return {
-			debouncedFunctions: {} as Record<string, (...args: unknown[]) => Promise<void> | void>,
-		};
-	},
-	methods: {
-		async callDebounced(
-			functionName: string,
-			options: { debounceTime: number; trailing?: boolean },
-			...inputParameters: unknown[]
-		): Promise<void> {
-			const { trailing, debounceTime } = options;
-			if (this.debouncedFunctions[functionName] === undefined) {
-				this.debouncedFunctions[functionName] = debounce(
-					async (...args: unknown[]) => {
-						// @ts-ignore
-						await this[functionName](...args);
-					},
-					debounceTime,
-					trailing ? { trailing } : { leading: true },
-				);
-			}
-			await this.debouncedFunctions[functionName](...inputParameters);
-		},
-	},
-});

packages/editor-ui/src/stores/posthog.store.ts

@@ -8,7 +8,7 @@ import { useSettingsStore } from '@/stores/settings.store';
 import type { FeatureFlags, IDataObject } from 'n8n-workflow';
 import { EXPERIMENTS_TO_TRACK, LOCAL_STORAGE_EXPERIMENT_OVERRIDES } from '@/constants';
 import { useTelemetryStore } from './telemetry.store';
-import { debounce } from 'lodash-es';
+import { useDebounce } from '@/composables/useDebounce';
 
 const EVENTS = {
 	IS_PART_OF_EXPERIMENT: 'User is part of experiment',
@@ -21,6 +21,7 @@ export const usePostHog = defineStore('posthog', () => {
 	const settingsStore = useSettingsStore();
 	const telemetryStore = useTelemetryStore();
 	const rootStore = useRootStore();
+	const { debounce } = useDebounce();
 
 	const featureFlags: Ref<FeatureFlags | null> = ref(null);
 	const trackedDemoExp: Ref<FeatureFlags> = ref({});
@@ -116,7 +117,9 @@ export const usePostHog = defineStore('posthog', () => {
 	const trackExperiments = (featFlags: FeatureFlags) => {
 		EXPERIMENTS_TO_TRACK.forEach((name) => trackExperiment(featFlags, name));
 	};
-	const trackExperimentsDebounced = debounce(trackExperiments, 2000);
+	const trackExperimentsDebounced = debounce(trackExperiments, {
+		debounceTime: 2000,
+	});
 
 	const init = (evaluatedFeatureFlags?: FeatureFlags) => {
 		if (!window.posthog) {

packages/editor-ui/src/views/NodeView.vue

@@ -315,7 +315,6 @@ import type {
 	ToggleNodeCreatorOptions,
 } from '@/Interface';
 
-import { debounceHelper } from '@/mixins/debounce';
 import type { Route, RawLocation } from 'vue-router';
 import { dataPinningEventBus, nodeViewEventBus } from '@/event-bus';
 import { useCanvasStore } from '@/stores/canvas.store';
@@ -377,6 +376,7 @@ import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useClipboard } from '@/composables/useClipboard';
 import { usePinnedData } from '@/composables/usePinnedData';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
+import { useDebounce } from '@/composables/useDebounce';
 
 interface AddNodeOptions {
 	position?: XYPosition;
@@ -404,7 +404,7 @@ export default defineComponent({
 		ContextMenu,
 		SetupWorkflowCredentialsButton,
 	},
-	mixins: [moveNodeWorkflow, workflowHelpers, workflowRun, debounceHelper],
+	mixins: [moveNodeWorkflow, workflowHelpers, workflowRun],
 	async beforeRouteLeave(to, from, next) {
 		if (
 			getNodeViewTab(to) === MAIN_HEADER_TABS.EXECUTIONS ||
@@ -475,6 +475,7 @@ export default defineComponent({
 		const clipboard = useClipboard();
 		const { activeNode } = storeToRefs(ndvStore);
 		const pinnedData = usePinnedData(activeNode);
+		const { callDebounced } = useDebounce();
 
 		return {
 			locale,
@@ -484,6 +485,7 @@ export default defineComponent({
 			externalHooks,
 			clipboard,
 			pinnedData,
+			callDebounced,
 			...useCanvasMouseSelect(),
 			...useGlobalLinkActions(),
 			...useTitleChange(),
@@ -1422,7 +1424,7 @@ export default defineComponent({
 					return;
 				}
 
-				void this.callDebounced('onSaveKeyboardShortcut', { debounceTime: 1000 }, e);
+				void this.callDebounced(this.onSaveKeyboardShortcut, { debounceTime: 1000 }, e);
 
 				return;
 			}
@@ -1467,7 +1469,7 @@ export default defineComponent({
 				.filter((node) => !!node) as INode[];
 
 			if (e.key === 'd' && noModifierKeys && !readOnly) {
-				void this.callDebounced('toggleActivationNodes', { debounceTime: 350 }, selectedNodes);
+				void this.callDebounced(this.toggleActivationNodes, { debounceTime: 350 }, selectedNodes);
 			} else if (e.key === 'd' && ctrlModifier && !readOnly) {
 				if (selectedNodes.length > 0) {
 					e.preventDefault();
@@ -1482,7 +1484,7 @@ export default defineComponent({
 				e.stopPropagation();
 				e.preventDefault();
 
-				void this.callDebounced('deleteNodes', { debounceTime: 500 }, selectedNodes);
+				void this.callDebounced(this.deleteNodes, { debounceTime: 500 }, selectedNodes);
 			} else if (e.key === 'Tab' && noModifierKeys && !readOnly) {
 				this.onToggleNodeCreator({
 					source: NODE_CREATOR_OPEN_SOURCES.TAB,
@@ -1500,7 +1502,7 @@ export default defineComponent({
 				const lastSelectedNode = this.lastSelectedNode;
 				if (lastSelectedNode !== null && lastSelectedNode.type !== STICKY_NODE_TYPE) {
 					void this.callDebounced(
-						'renameNodePrompt',
+						this.renameNodePrompt,
 						{ debounceTime: 1500 },
 						lastSelectedNode.name,
 					);
@@ -1510,15 +1512,15 @@ export default defineComponent({
 				e.stopPropagation();
 				e.preventDefault();
 
-				void this.callDebounced('selectAllNodes', { debounceTime: 1000 });
+				void this.callDebounced(this.selectAllNodes, { debounceTime: 1000 });
 			} else if (e.key === 'c' && ctrlModifier) {
-				void this.callDebounced('copyNodes', { debounceTime: 1000 }, selectedNodes);
+				void this.callDebounced(this.copyNodes, { debounceTime: 1000 }, selectedNodes);
 			} else if (e.key === 'x' && ctrlModifier && !readOnly) {
 				// Cut nodes
 				e.stopPropagation();
 				e.preventDefault();
 
-				void this.callDebounced('cutNodes', { debounceTime: 1000 }, selectedNodes);
+				void this.callDebounced(this.cutNodes, { debounceTime: 1000 }, selectedNodes);
 			} else if (e.key === 'n' && ctrlAltModifier) {
 				// Create a new workflow
 				e.stopPropagation();
@@ -1555,7 +1557,9 @@ export default defineComponent({
 				e.stopPropagation();
 				e.preventDefault();
 
-				void this.callDebounced('selectDownstreamNodes', { debounceTime: 1000 });
+				void this.callDebounced(this.selectDownstreamNodes, {
+					debounceTime: 1000,
+				});
 			} else if (e.key === 'ArrowRight' && noModifierKeys) {
 				// Set child node active
 				const lastSelectedNode = this.lastSelectedNode;
@@ -1572,7 +1576,7 @@ export default defineComponent({
 				}
 
 				void this.callDebounced(
-					'nodeSelectedByName',
+					this.nodeSelectedByName,
 					{ debounceTime: 100 },
 					connections.main[0][0].node,
 					false,
@@ -1583,7 +1587,9 @@ export default defineComponent({
 				e.stopPropagation();
 				e.preventDefault();
 
-				void this.callDebounced('selectUpstreamNodes', { debounceTime: 1000 });
+				void this.callDebounced(this.selectUpstreamNodes, {
+					debounceTime: 1000,
+				});
 			} else if (e.key === 'ArrowLeft' && noModifierKeys) {
 				// Set parent node active
 				const lastSelectedNode = this.lastSelectedNode;
@@ -1604,7 +1610,7 @@ export default defineComponent({
 				}
 
 				void this.callDebounced(
-					'nodeSelectedByName',
+					this.nodeSelectedByName,
 					{ debounceTime: 100 },
 					connections.main[0][0].node,
 					false,
@@ -1676,7 +1682,7 @@ export default defineComponent({
 
 				if (nextSelectNode !== null) {
 					void this.callDebounced(
-						'nodeSelectedByName',
+						this.nodeSelectedByName,
 						{ debounceTime: 100 },
 						nextSelectNode,
 						false,
@@ -3033,7 +3039,7 @@ export default defineComponent({
 		},
 		onDragMove() {
 			const totalNodes = this.nodes.length;
-			void this.callDebounced('updateConnectionsOverlays', {
+			void this.callDebounced(this.updateConnectionsOverlays, {
 				debounceTime: totalNodes > 20 ? 200 : 0,
 			});
 		},

packages/editor-ui/src/views/TemplatesSearchView.vue

@@ -93,13 +93,13 @@ import type {
 import type { IDataObject } from 'n8n-workflow';
 import { setPageTitle } from '@/utils/htmlUtils';
 import { CREATOR_HUB_URL, VIEWS } from '@/constants';
-import { debounceHelper } from '@/mixins/debounce';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useTemplatesStore } from '@/stores/templates.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useToast } from '@/composables/useToast';
 import { usePostHog } from '@/stores/posthog.store';
+import { useDebounce } from '@/composables/useDebounce';
 
 interface ISearchEvent {
 	search_string: string;
@@ -117,9 +117,11 @@ export default defineComponent({
 		TemplateList,
 		TemplatesView,
 	},
-	mixins: [debounceHelper],
 	setup() {
+		const { callDebounced } = useDebounce();
+
 		return {
+			callDebounced,
 			...useToast(),
 		};
 	},
@@ -263,7 +265,10 @@ export default defineComponent({
 			this.loadingWorkflows = true;
 			this.loadingCollections = true;
 			this.search = search;
-			void this.callDebounced('updateSearch', { debounceTime: 500, trailing: true });
+			void this.callDebounced(this.updateSearch, {
+				debounceTime: 500,
+				trailing: true,
+			});
 
 			if (search.length === 0) {
 				this.trackSearch();