fix: Remove Vue.component usage and refactor plugins into Vue Plugins (no-changelog) (#6445)

* fix: remove Vue.component usage and refactor plugins into Vue Plugins system (no-changelog)

* fix linting issues

---------

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>

packages/editor-ui/src/plugins/components.ts

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import type { PluginObject } from 'vue';
 import Fragment from 'vue-fragment';
 import VueAgile from 'vue-agile';
 
@@ -10,24 +10,24 @@ import { N8nPlugin } from 'n8n-design-system';
 import EnterpriseEdition from '@/components/EnterpriseEdition.ee.vue';
 import { useMessage } from '@/composables/useMessage';
 
-Vue.use(Fragment.Plugin);
-Vue.use(VueAgile);
+export const GlobalComponentsPlugin: PluginObject<{}> = {
+	install(app) {
+		const messageService = useMessage();
 
-Vue.use(ElementUI);
-Vue.use(N8nPlugin);
+		app.component('enterprise-edition', EnterpriseEdition);
 
-Vue.component('enterprise-edition', EnterpriseEdition);
+		app.use(Fragment.Plugin);
+		app.use(VueAgile);
+		app.use(ElementUI);
+		app.use(N8nPlugin);
+		app.use(Loading.directive);
 
-Vue.use(Loading.directive);
-
-Vue.prototype.$loading = Loading.service;
-Vue.prototype.$msgbox = MessageBox;
-
-const messageService = useMessage();
-
-Vue.prototype.$alert = messageService.alert;
-Vue.prototype.$confirm = messageService.confirm;
-Vue.prototype.$prompt = messageService.prompt;
-Vue.prototype.$message = messageService.message;
-
-Vue.prototype.$notify = Notification;
+		app.prototype.$loading = Loading.service;
+		app.prototype.$msgbox = MessageBox;
+		app.prototype.$alert = messageService.alert;
+		app.prototype.$confirm = messageService.confirm;
+		app.prototype.$prompt = messageService.prompt;
+		app.prototype.$message = messageService.message;
+		app.prototype.$notify = Notification;
+	},
+};

packages/editor-ui/src/plugins/directives.ts

@@ -1,8 +1,11 @@
-import Vue from 'vue';
-
+import type { PluginObject } from 'vue';
 import Vue2TouchEvents from 'vue2-touch-events';
 // @ts-ignore
 import vClickOutside from 'v-click-outside';
 
-Vue.use(Vue2TouchEvents);
-Vue.use(vClickOutside);
+export const GlobalDirectivesPlugin: PluginObject<{}> = {
+	install(app) {
+		app.use(Vue2TouchEvents);
+		app.use(vClickOutside);
+	},
+};

packages/editor-ui/src/plugins/i18n/index.ts

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import type { PluginObject } from 'vue';
 import axios from 'axios';
 import VueI18n from 'vue-i18n';
 import type { INodeTranslationHeaders } from '@/Interface';
@@ -16,25 +17,13 @@ import { useNDVStore } from '@/stores/ndv.store';
 import type { INodeProperties, INodePropertyCollection, INodePropertyOptions } from 'n8n-workflow';
 
 Vue.use(VueI18n);
-locale.use('en');
 
-export let i18n: I18nClass;
-
-export function I18nPlugin(vue: typeof Vue): void {
-	i18n = new I18nClass();
-
-	Object.defineProperty(vue, '$locale', {
-		get() {
-			return i18n;
-		},
-	});
-
-	Object.defineProperty(vue.prototype, '$locale', {
-		get() {
-			return i18n;
-		},
-	});
-}
+export const i18nInstance = new VueI18n({
+	locale: 'en',
+	fallbackLocale: 'en',
+	messages: { en: englishBaseText },
+	silentTranslationWarn: true,
+});
 
 export class I18nClass {
 	private get i18n(): VueI18n {
@@ -509,17 +498,6 @@ export class I18nClass {
 	};
 }
 
-export const i18nInstance = new VueI18n({
-	locale: 'en',
-	fallbackLocale: 'en',
-	messages: { en: englishBaseText },
-	silentTranslationWarn: true,
-});
-
-locale.i18n((key: string, options?: { interpolate: object }) =>
-	i18nInstance.t(key, options && options.interpolate),
-);
-
 const loadedLanguages = ['en'];
 
 function setLanguage(language: string) {
@@ -619,6 +597,29 @@ export function addHeaders(headers: INodeTranslationHeaders, language: string) {
 	);
 }
 
+export const i18n: I18nClass = new I18nClass();
+
+export const I18nPlugin: PluginObject<{}> = {
+	install(app): void {
+		locale.use('en');
+		locale.i18n((key: string, options?: { interpolate: object }) =>
+			i18nInstance.t(key, options && options.interpolate),
+		);
+
+		Object.defineProperty(app, '$locale', {
+			get() {
+				return i18n;
+			},
+		});
+
+		Object.defineProperty(app.prototype, '$locale', {
+			get() {
+				return i18n;
+			},
+		});
+	},
+};
+
 // ----------------------------------
 //             typings
 // ----------------------------------

packages/editor-ui/src/plugins/icons/index.ts

@@ -1,5 +1,4 @@
-import Vue from 'vue';
-
+import type { PluginObject } from 'vue';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import {
@@ -143,138 +142,142 @@ function addIcon(icon: IconDefinition) {
 	library.add(icon);
 }
 
-addIcon(faAngleDoubleLeft);
-addIcon(faAngleDown);
-addIcon(faAngleLeft);
-addIcon(faAngleRight);
-addIcon(faAngleUp);
-addIcon(faArrowLeft);
-addIcon(faArrowRight);
-addIcon(faArrowUp);
-addIcon(faArrowDown);
-addIcon(faAt);
-addIcon(faBan);
-addIcon(faBolt);
-addIcon(faBook);
-addIcon(faBoxOpen);
-addIcon(faBug);
-addIcon(faCalculator);
-addIcon(faCalendar);
-addIcon(faChartBar);
-addIcon(faCheck);
-addIcon(faCheckCircle);
-addIcon(faCheckSquare);
-addIcon(faChevronLeft);
-addIcon(faChevronRight);
-addIcon(faChevronDown);
-addIcon(faChevronUp);
-addIcon(faCode);
-addIcon(faCodeBranch);
-addIcon(faCog);
-addIcon(faCogs);
-addIcon(faClipboardList);
-addIcon(faClock);
-addIcon(faClone);
-addIcon(faCloud);
-addIcon(faCloudDownloadAlt);
-addIcon(faCopy);
-addIcon(faCube);
-addIcon(faCut);
-addIcon(faDotCircle);
-addIcon(faGripVertical);
-addIcon(faEdit);
-addIcon(faEllipsisH);
-addIcon(faEllipsisV);
-addIcon(faEnvelope);
-addIcon(faEye);
-addIcon(faExclamationTriangle);
-addIcon(faExpand);
-addIcon(faExpandAlt);
-addIcon(faExternalLinkAlt);
-addIcon(faExchangeAlt);
-addIcon(faFile);
-addIcon(faFileAlt);
-addIcon(faFileArchive);
-addIcon(faFileCode);
-addIcon(faFileDownload);
-addIcon(faFileExport);
-addIcon(faFileImport);
-addIcon(faFilePdf);
-addIcon(faFilter);
-addIcon(faFingerprint);
-addIcon(faFlask);
-addIcon(faFolderOpen);
-addIcon(faFont);
-addIcon(faGift);
-addIcon(faGlobe);
-addIcon(faGlobeAmericas);
-addIcon(faGraduationCap);
-addIcon(faHandPointLeft);
-addIcon(faHashtag);
-addIcon(faHdd);
-addIcon(faHome);
-addIcon(faHourglass);
-addIcon(faImage);
-addIcon(faInbox);
-addIcon(faInfo);
-addIcon(faInfoCircle);
-addIcon(faKey);
-addIcon(faLink);
-addIcon(faList);
-addIcon(faLightbulb);
-addIcon(faLock);
-addIcon(faMapSigns);
-addIcon(faMousePointer);
-addIcon(faNetworkWired);
-addIcon(faPause);
-addIcon(faPauseCircle);
-addIcon(faPen);
-addIcon(faPencilAlt);
-addIcon(faPlay);
-addIcon(faPlayCircle);
-addIcon(faPlug);
-addIcon(faPlus);
-addIcon(faPlusCircle);
-addIcon(faPlusSquare);
-addIcon(faQuestion);
-addIcon(faQuestionCircle);
-addIcon(faRedo);
-addIcon(faRss);
-addIcon(faSave);
-addIcon(faSatelliteDish);
-addIcon(faSearch);
-addIcon(faSearchMinus);
-addIcon(faSearchPlus);
-addIcon(faServer);
-addIcon(faSignInAlt);
-addIcon(faSignOutAlt);
-addIcon(faSlidersH);
-addIcon(faSpinner);
-addIcon(faSolidStickyNote);
-addIcon(faStickyNote as IconDefinition);
-addIcon(faStop);
-addIcon(faSun);
-addIcon(faSync);
-addIcon(faSyncAlt);
-addIcon(faTable);
-addIcon(faTasks);
-addIcon(faTerminal);
-addIcon(faThLarge);
-addIcon(faThumbtack);
-addIcon(faTimes);
-addIcon(faTimesCircle);
-addIcon(faToolbox);
-addIcon(faTrash);
-addIcon(faUndo);
-addIcon(faUnlink);
-addIcon(faUser);
-addIcon(faUserCircle);
-addIcon(faUserFriends);
-addIcon(faUsers);
-addIcon(faVariable);
-addIcon(faVideo);
-addIcon(faTree);
-addIcon(faUserLock);
-addIcon(faGem);
+export const FontAwesomePlugin: PluginObject<{}> = {
+	install: (app) => {
+		addIcon(faAngleDoubleLeft);
+		addIcon(faAngleDown);
+		addIcon(faAngleLeft);
+		addIcon(faAngleRight);
+		addIcon(faAngleUp);
+		addIcon(faArrowLeft);
+		addIcon(faArrowRight);
+		addIcon(faArrowUp);
+		addIcon(faArrowDown);
+		addIcon(faAt);
+		addIcon(faBan);
+		addIcon(faBolt);
+		addIcon(faBook);
+		addIcon(faBoxOpen);
+		addIcon(faBug);
+		addIcon(faCalculator);
+		addIcon(faCalendar);
+		addIcon(faChartBar);
+		addIcon(faCheck);
+		addIcon(faCheckCircle);
+		addIcon(faCheckSquare);
+		addIcon(faChevronLeft);
+		addIcon(faChevronRight);
+		addIcon(faChevronDown);
+		addIcon(faChevronUp);
+		addIcon(faCode);
+		addIcon(faCodeBranch);
+		addIcon(faCog);
+		addIcon(faCogs);
+		addIcon(faClipboardList);
+		addIcon(faClock);
+		addIcon(faClone);
+		addIcon(faCloud);
+		addIcon(faCloudDownloadAlt);
+		addIcon(faCopy);
+		addIcon(faCube);
+		addIcon(faCut);
+		addIcon(faDotCircle);
+		addIcon(faGripVertical);
+		addIcon(faEdit);
+		addIcon(faEllipsisH);
+		addIcon(faEllipsisV);
+		addIcon(faEnvelope);
+		addIcon(faEye);
+		addIcon(faExclamationTriangle);
+		addIcon(faExpand);
+		addIcon(faExpandAlt);
+		addIcon(faExternalLinkAlt);
+		addIcon(faExchangeAlt);
+		addIcon(faFile);
+		addIcon(faFileAlt);
+		addIcon(faFileArchive);
+		addIcon(faFileCode);
+		addIcon(faFileDownload);
+		addIcon(faFileExport);
+		addIcon(faFileImport);
+		addIcon(faFilePdf);
+		addIcon(faFilter);
+		addIcon(faFingerprint);
+		addIcon(faFlask);
+		addIcon(faFolderOpen);
+		addIcon(faFont);
+		addIcon(faGift);
+		addIcon(faGlobe);
+		addIcon(faGlobeAmericas);
+		addIcon(faGraduationCap);
+		addIcon(faHandPointLeft);
+		addIcon(faHashtag);
+		addIcon(faHdd);
+		addIcon(faHome);
+		addIcon(faHourglass);
+		addIcon(faImage);
+		addIcon(faInbox);
+		addIcon(faInfo);
+		addIcon(faInfoCircle);
+		addIcon(faKey);
+		addIcon(faLink);
+		addIcon(faList);
+		addIcon(faLightbulb);
+		addIcon(faLock);
+		addIcon(faMapSigns);
+		addIcon(faMousePointer);
+		addIcon(faNetworkWired);
+		addIcon(faPause);
+		addIcon(faPauseCircle);
+		addIcon(faPen);
+		addIcon(faPencilAlt);
+		addIcon(faPlay);
+		addIcon(faPlayCircle);
+		addIcon(faPlug);
+		addIcon(faPlus);
+		addIcon(faPlusCircle);
+		addIcon(faPlusSquare);
+		addIcon(faQuestion);
+		addIcon(faQuestionCircle);
+		addIcon(faRedo);
+		addIcon(faRss);
+		addIcon(faSave);
+		addIcon(faSatelliteDish);
+		addIcon(faSearch);
+		addIcon(faSearchMinus);
+		addIcon(faSearchPlus);
+		addIcon(faServer);
+		addIcon(faSignInAlt);
+		addIcon(faSignOutAlt);
+		addIcon(faSlidersH);
+		addIcon(faSpinner);
+		addIcon(faSolidStickyNote);
+		addIcon(faStickyNote as IconDefinition);
+		addIcon(faStop);
+		addIcon(faSun);
+		addIcon(faSync);
+		addIcon(faSyncAlt);
+		addIcon(faTable);
+		addIcon(faTasks);
+		addIcon(faTerminal);
+		addIcon(faThLarge);
+		addIcon(faThumbtack);
+		addIcon(faTimes);
+		addIcon(faTimesCircle);
+		addIcon(faToolbox);
+		addIcon(faTrash);
+		addIcon(faUndo);
+		addIcon(faUnlink);
+		addIcon(faUser);
+		addIcon(faUserCircle);
+		addIcon(faUserFriends);
+		addIcon(faUsers);
+		addIcon(faVariable);
+		addIcon(faVideo);
+		addIcon(faTree);
+		addIcon(faUserLock);
+		addIcon(faGem);
 
-Vue.component('font-awesome-icon', FontAwesomeIcon);
+		app.component('font-awesome-icon', FontAwesomeIcon);
+	},
+};