feat: Replace Vue.extend with defineComponent in editor-ui (no-changelog) (#6033)

* refactor: replace Vue.extend with defineComponent in editor-ui

* fix: change $externalHooks extractions from mixins

* fix: refactor externalHooks mixin

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

@@ -2,10 +2,10 @@
  * Captures any pasted data and sends it to method "receivedCopyPasteData" which has to be
  * defined on the component which uses this mixin
  */
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { debounce } from 'lodash-es';
 
-export const copyPaste = Vue.extend({
+export const copyPaste = defineComponent({
 	data() {
 		return {
 			copyPasteElementsGotCreated: false,

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

@@ -1,7 +1,7 @@
 import { debounce } from 'lodash-es';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export const debounceHelper = Vue.extend({
+export const debounceHelper = defineComponent({
 	data() {
 		return {
 			debouncedFunctions: [] as any[],

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

@@ -1,6 +1,6 @@
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export const deviceSupportHelpers = Vue.extend({
+export const deviceSupportHelpers = defineComponent({
 	data() {
 		return {
 			// @ts-ignore msMaxTouchPoints is deprecated but must fix tablet bugs before fixing this.. otherwise breaks touchscreen computers

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

@@ -1,35 +1,10 @@
-import { IExternalHooks } from '@/Interface';
+import type { IExternalHooks } from '@/Interface';
+import type { IDataObject } from 'n8n-workflow';
 import { useWebhooksStore } from '@/stores/webhooks';
-import { IDataObject } from 'n8n-workflow';
-import { Store } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import { runExternalHook } from '@/utils';
 
-declare global {
-	interface Window {
-		n8nExternalHooks?: Record<
-			string,
-			Record<string, Array<(store: Store, metadata?: IDataObject) => Promise<void>>>
-		>;
-	}
-}
-
-export async function runExternalHook(eventName: string, store: Store, metadata?: IDataObject) {
-	if (!window.n8nExternalHooks) {
-		return;
-	}
-
-	const [resource, operator] = eventName.split('.');
-
-	if (window.n8nExternalHooks[resource]?.[operator]) {
-		const hookMethods = window.n8nExternalHooks[resource][operator];
-
-		for (const hookMethod of hookMethods) {
-			await hookMethod(store, metadata);
-		}
-	}
-}
-
-export const externalHooks = Vue.extend({
+export const externalHooks = defineComponent({
 	methods: {
 		$externalHooks(): IExternalHooks {
 			return {

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

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { parse } from 'flatted';
 
 import { Method } from 'axios';
@@ -55,7 +55,7 @@ function unflattenExecutionData(fullExecutionData: IExecutionFlattedResponse): I
 	return returnData;
 }
 
-export const restApi = Vue.extend({
+export const restApi = defineComponent({
 	computed: {
 		...mapStores(useRootStore),
 	},

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

@@ -1,10 +1,10 @@
-import { IPermissions, IUser } from '@/Interface';
+import type { IPermissions } from '@/Interface';
 import { isAuthorized } from '@/utils';
 import { useUsersStore } from '@/stores/users';
-import Vue from 'vue';
-import { Route } from 'vue-router';
+import { defineComponent } from 'vue';
+import type { Route } from 'vue-router';
 
-export const userHelpers = Vue.extend({
+export const userHelpers = defineComponent({
 	methods: {
 		canUserAccessRouteByName(name: string): boolean {
 			const { route } = this.$router.resolve({ name });