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/__tests__/setup.ts

@@ -3,17 +3,26 @@ import { configure } from '@testing-library/vue';
 import Vue from 'vue';
 import '../plugins';
 import { I18nPlugin } from '@/plugins/i18n';
+import { config } from '@vue/test-utils';
+import { GlobalComponentsPlugin } from '@/plugins/components';
+import { GlobalDirectivesPlugin } from '@/plugins/directives';
+import { FontAwesomePlugin } from '@/plugins/icons';
 
 configure({ testIdAttribute: 'data-test-id' });
 
 Vue.config.productionTip = false;
 Vue.config.devtools = false;
 
+Vue.use(I18nPlugin);
+Vue.use(FontAwesomePlugin);
+Vue.use(GlobalComponentsPlugin);
+Vue.use(GlobalDirectivesPlugin);
+
 // TODO: Investigate why this is needed
 // Without having this 3rd party library imported like this, any component test using 'vue-json-pretty' fail with:
 // [Vue warn]: Failed to mount component: template or render function not defined.
-Vue.component('vue-json-pretty', require('vue-json-pretty').default);
+// Vue.component('vue-json-pretty', require('vue-json-pretty').default);
-Vue.use((vue) => I18nPlugin(vue));
+config.stubs['vue-json-pretty'] = require('vue-json-pretty').default;
 
 window.ResizeObserver =
 	window.ResizeObserver ||

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

@@ -44,6 +44,7 @@ import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
+import TimeAgo from '@/components/TimeAgo.vue';
 
 export const CREDENTIAL_LIST_ITEM_ACTIONS = {
 	OPEN: 'open',
@@ -62,6 +63,7 @@ export default defineComponent({
 		};
 	},
 	components: {
+		TimeAgo,
 		CredentialIcon,
 	},
 	props: {

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

@@ -14,8 +14,12 @@ import { useCredentialsStore } from '@/stores/credentials.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import type { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
+import NodeIcon from '@/components/NodeIcon.vue';
 
 export default defineComponent({
+	components: {
+		NodeIcon,
+	},
 	props: {
 		credentialTypeName: {
 			type: String,

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

@@ -41,9 +41,13 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import NodeIcon from '@/components/NodeIcon.vue';
 
 export default defineComponent({
 	name: 'NodeTitle',
+	components: {
+		NodeIcon,
+	},
 	props: {
 		value: {
 			type: String,

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

@@ -49,6 +49,7 @@ import { defineComponent } from 'vue';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { filterTemplateNodes, abbreviateNumber } from '@/utils';
 import NodeList from './NodeList.vue';
+import TimeAgo from '@/components/TimeAgo.vue';
 
 export default defineComponent({
 	name: 'TemplateCard',
@@ -73,6 +74,7 @@ export default defineComponent({
 		},
 	},
 	components: {
+		TimeAgo,
 		NodeList,
 	},
 	data() {

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

@@ -55,18 +55,13 @@
 </template>
 
 <script lang="ts">
-import Vue, { defineComponent } from 'vue';
+import { defineComponent } from 'vue';
 import NodeIcon from './NodeIcon.vue';
 import TimeAgo from './TimeAgo.vue';
 import Badge from './Badge.vue';
 import WarningTooltip from './WarningTooltip.vue';
 import type { IVersionNode } from '@/Interface';
 
-Vue.component('NodeIcon', NodeIcon);
-Vue.component('TimeAgo', TimeAgo);
-Vue.component('Badge', Badge);
-Vue.component('WarningTooltip', WarningTooltip);
-
 export default defineComponent({
 	name: 'VersionCard',
 	components: { NodeIcon, TimeAgo, Badge, WarningTooltip },

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

@@ -81,6 +81,7 @@ import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
+import TimeAgo from '@/components/TimeAgo.vue';
 
 type ActivatorRef = InstanceType<typeof WorkflowActivator>;
 
@@ -104,6 +105,7 @@ export default defineComponent({
 		};
 	},
 	components: {
+		TimeAgo,
 		WorkflowActivator,
 	},
 	props: {

packages/editor-ui/src/main.ts

@@ -2,12 +2,11 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue';
 
-import './plugins';
 import 'vue-json-pretty/lib/styles.css';
 import '@jsplumb/browser-ui/css/jsplumbtoolkit.css';
 import 'n8n-design-system/css/index.scss';
-import './n8n-theme.scss';
 
+import './n8n-theme.scss';
 import './styles/autocomplete-theme.scss';
 
 import '@fontsource/open-sans/latin-400.css';
@@ -17,20 +16,26 @@ import '@fontsource/open-sans/latin-700.css';
 import App from '@/App.vue';
 import router from './router';
 
-import { runExternalHook } from '@/utils';
 import { TelemetryPlugin } from './plugins/telemetry';
 import { I18nPlugin, i18nInstance } from './plugins/i18n';
+import { GlobalComponentsPlugin } from './plugins/components';
+import { GlobalDirectivesPlugin } from './plugins/directives';
+import { FontAwesomePlugin } from './plugins/icons';
 
+import { runExternalHook } from '@/utils';
 import { createPinia, PiniaVuePlugin } from 'pinia';
-
 import { useWebhooksStore } from '@/stores';
 
 Vue.config.productionTip = false;
 
 Vue.use(TelemetryPlugin);
-Vue.use((vue) => I18nPlugin(vue));
 Vue.use(PiniaVuePlugin);
 
+Vue.use(I18nPlugin);
+Vue.use(FontAwesomePlugin);
+Vue.use(GlobalComponentsPlugin);
+Vue.use(GlobalDirectivesPlugin);
+
 const pinia = createPinia();
 
 new Vue({

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);
+export const GlobalComponentsPlugin: PluginObject<{}> = {
-Vue.use(VueAgile);
+	install(app) {
+		const messageService = useMessage();
 
-Vue.use(ElementUI);
+		app.component('enterprise-edition', EnterpriseEdition);
-Vue.use(N8nPlugin);
 
-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);
+		app.prototype.$loading = Loading.service;
-
+		app.prototype.$msgbox = MessageBox;
-Vue.prototype.$loading = Loading.service;
+		app.prototype.$alert = messageService.alert;
-Vue.prototype.$msgbox = MessageBox;
+		app.prototype.$confirm = messageService.confirm;
-
+		app.prototype.$prompt = messageService.prompt;
-const messageService = useMessage();
+		app.prototype.$message = messageService.message;
-
+		app.prototype.$notify = Notification;
-Vue.prototype.$alert = messageService.alert;
+	},
-Vue.prototype.$confirm = messageService.confirm;
+};
-Vue.prototype.$prompt = messageService.prompt;
-Vue.prototype.$message = messageService.message;
-
-Vue.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);
+export const GlobalDirectivesPlugin: PluginObject<{}> = {
-Vue.use(vClickOutside);
+	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 const i18nInstance = new VueI18n({
-
+	locale: 'en',
-export function I18nPlugin(vue: typeof Vue): void {
+	fallbackLocale: 'en',
-	i18n = new I18nClass();
+	messages: { en: englishBaseText },
-
+	silentTranslationWarn: true,
-	Object.defineProperty(vue, '$locale', {
+});
-		get() {
-			return i18n;
-		},
-	});
-
-	Object.defineProperty(vue.prototype, '$locale', {
-		get() {
-			return i18n;
-		},
-	});
-}
 
 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);
+export const FontAwesomePlugin: PluginObject<{}> = {
-addIcon(faAngleDown);
+	install: (app) => {
-addIcon(faAngleLeft);
+		addIcon(faAngleDoubleLeft);
-addIcon(faAngleRight);
+		addIcon(faAngleDown);
-addIcon(faAngleUp);
+		addIcon(faAngleLeft);
-addIcon(faArrowLeft);
+		addIcon(faAngleRight);
-addIcon(faArrowRight);
+		addIcon(faAngleUp);
-addIcon(faArrowUp);
+		addIcon(faArrowLeft);
-addIcon(faArrowDown);
+		addIcon(faArrowRight);
-addIcon(faAt);
+		addIcon(faArrowUp);
-addIcon(faBan);
+		addIcon(faArrowDown);
-addIcon(faBolt);
+		addIcon(faAt);
-addIcon(faBook);
+		addIcon(faBan);
-addIcon(faBoxOpen);
+		addIcon(faBolt);
-addIcon(faBug);
+		addIcon(faBook);
-addIcon(faCalculator);
+		addIcon(faBoxOpen);
-addIcon(faCalendar);
+		addIcon(faBug);
-addIcon(faChartBar);
+		addIcon(faCalculator);
-addIcon(faCheck);
+		addIcon(faCalendar);
-addIcon(faCheckCircle);
+		addIcon(faChartBar);
-addIcon(faCheckSquare);
+		addIcon(faCheck);
-addIcon(faChevronLeft);
+		addIcon(faCheckCircle);
-addIcon(faChevronRight);
+		addIcon(faCheckSquare);
-addIcon(faChevronDown);
+		addIcon(faChevronLeft);
-addIcon(faChevronUp);
+		addIcon(faChevronRight);
-addIcon(faCode);
+		addIcon(faChevronDown);
-addIcon(faCodeBranch);
+		addIcon(faChevronUp);
-addIcon(faCog);
+		addIcon(faCode);
-addIcon(faCogs);
+		addIcon(faCodeBranch);
-addIcon(faClipboardList);
+		addIcon(faCog);
-addIcon(faClock);
+		addIcon(faCogs);
-addIcon(faClone);
+		addIcon(faClipboardList);
-addIcon(faCloud);
+		addIcon(faClock);
-addIcon(faCloudDownloadAlt);
+		addIcon(faClone);
-addIcon(faCopy);
+		addIcon(faCloud);
-addIcon(faCube);
+		addIcon(faCloudDownloadAlt);
-addIcon(faCut);
+		addIcon(faCopy);
-addIcon(faDotCircle);
+		addIcon(faCube);
-addIcon(faGripVertical);
+		addIcon(faCut);
-addIcon(faEdit);
+		addIcon(faDotCircle);
-addIcon(faEllipsisH);
+		addIcon(faGripVertical);
-addIcon(faEllipsisV);
+		addIcon(faEdit);
-addIcon(faEnvelope);
+		addIcon(faEllipsisH);
-addIcon(faEye);
+		addIcon(faEllipsisV);
-addIcon(faExclamationTriangle);
+		addIcon(faEnvelope);
-addIcon(faExpand);
+		addIcon(faEye);
-addIcon(faExpandAlt);
+		addIcon(faExclamationTriangle);
-addIcon(faExternalLinkAlt);
+		addIcon(faExpand);
-addIcon(faExchangeAlt);
+		addIcon(faExpandAlt);
-addIcon(faFile);
+		addIcon(faExternalLinkAlt);
-addIcon(faFileAlt);
+		addIcon(faExchangeAlt);
-addIcon(faFileArchive);
+		addIcon(faFile);
-addIcon(faFileCode);
+		addIcon(faFileAlt);
-addIcon(faFileDownload);
+		addIcon(faFileArchive);
-addIcon(faFileExport);
+		addIcon(faFileCode);
-addIcon(faFileImport);
+		addIcon(faFileDownload);
-addIcon(faFilePdf);
+		addIcon(faFileExport);
-addIcon(faFilter);
+		addIcon(faFileImport);
-addIcon(faFingerprint);
+		addIcon(faFilePdf);
-addIcon(faFlask);
+		addIcon(faFilter);
-addIcon(faFolderOpen);
+		addIcon(faFingerprint);
-addIcon(faFont);
+		addIcon(faFlask);
-addIcon(faGift);
+		addIcon(faFolderOpen);
-addIcon(faGlobe);
+		addIcon(faFont);
-addIcon(faGlobeAmericas);
+		addIcon(faGift);
-addIcon(faGraduationCap);
+		addIcon(faGlobe);
-addIcon(faHandPointLeft);
+		addIcon(faGlobeAmericas);
-addIcon(faHashtag);
+		addIcon(faGraduationCap);
-addIcon(faHdd);
+		addIcon(faHandPointLeft);
-addIcon(faHome);
+		addIcon(faHashtag);
-addIcon(faHourglass);
+		addIcon(faHdd);
-addIcon(faImage);
+		addIcon(faHome);
-addIcon(faInbox);
+		addIcon(faHourglass);
-addIcon(faInfo);
+		addIcon(faImage);
-addIcon(faInfoCircle);
+		addIcon(faInbox);
-addIcon(faKey);
+		addIcon(faInfo);
-addIcon(faLink);
+		addIcon(faInfoCircle);
-addIcon(faList);
+		addIcon(faKey);
-addIcon(faLightbulb);
+		addIcon(faLink);
-addIcon(faLock);
+		addIcon(faList);
-addIcon(faMapSigns);
+		addIcon(faLightbulb);
-addIcon(faMousePointer);
+		addIcon(faLock);
-addIcon(faNetworkWired);
+		addIcon(faMapSigns);
-addIcon(faPause);
+		addIcon(faMousePointer);
-addIcon(faPauseCircle);
+		addIcon(faNetworkWired);
-addIcon(faPen);
+		addIcon(faPause);
-addIcon(faPencilAlt);
+		addIcon(faPauseCircle);
-addIcon(faPlay);
+		addIcon(faPen);
-addIcon(faPlayCircle);
+		addIcon(faPencilAlt);
-addIcon(faPlug);
+		addIcon(faPlay);
-addIcon(faPlus);
+		addIcon(faPlayCircle);
-addIcon(faPlusCircle);
+		addIcon(faPlug);
-addIcon(faPlusSquare);
+		addIcon(faPlus);
-addIcon(faQuestion);
+		addIcon(faPlusCircle);
-addIcon(faQuestionCircle);
+		addIcon(faPlusSquare);
-addIcon(faRedo);
+		addIcon(faQuestion);
-addIcon(faRss);
+		addIcon(faQuestionCircle);
-addIcon(faSave);
+		addIcon(faRedo);
-addIcon(faSatelliteDish);
+		addIcon(faRss);
-addIcon(faSearch);
+		addIcon(faSave);
-addIcon(faSearchMinus);
+		addIcon(faSatelliteDish);
-addIcon(faSearchPlus);
+		addIcon(faSearch);
-addIcon(faServer);
+		addIcon(faSearchMinus);
-addIcon(faSignInAlt);
+		addIcon(faSearchPlus);
-addIcon(faSignOutAlt);
+		addIcon(faServer);
-addIcon(faSlidersH);
+		addIcon(faSignInAlt);
-addIcon(faSpinner);
+		addIcon(faSignOutAlt);
-addIcon(faSolidStickyNote);
+		addIcon(faSlidersH);
-addIcon(faStickyNote as IconDefinition);
+		addIcon(faSpinner);
-addIcon(faStop);
+		addIcon(faSolidStickyNote);
-addIcon(faSun);
+		addIcon(faStickyNote as IconDefinition);
-addIcon(faSync);
+		addIcon(faStop);
-addIcon(faSyncAlt);
+		addIcon(faSun);
-addIcon(faTable);
+		addIcon(faSync);
-addIcon(faTasks);
+		addIcon(faSyncAlt);
-addIcon(faTerminal);
+		addIcon(faTable);
-addIcon(faThLarge);
+		addIcon(faTasks);
-addIcon(faThumbtack);
+		addIcon(faTerminal);
-addIcon(faTimes);
+		addIcon(faThLarge);
-addIcon(faTimesCircle);
+		addIcon(faThumbtack);
-addIcon(faToolbox);
+		addIcon(faTimes);
-addIcon(faTrash);
+		addIcon(faTimesCircle);
-addIcon(faUndo);
+		addIcon(faToolbox);
-addIcon(faUnlink);
+		addIcon(faTrash);
-addIcon(faUser);
+		addIcon(faUndo);
-addIcon(faUserCircle);
+		addIcon(faUnlink);
-addIcon(faUserFriends);
+		addIcon(faUser);
-addIcon(faUsers);
+		addIcon(faUserCircle);
-addIcon(faVariable);
+		addIcon(faUserFriends);
-addIcon(faVideo);
+		addIcon(faUsers);
-addIcon(faTree);
+		addIcon(faVariable);
-addIcon(faUserLock);
+		addIcon(faVideo);
-addIcon(faGem);
+		addIcon(faTree);
+		addIcon(faUserLock);
+		addIcon(faGem);
 
-Vue.component('font-awesome-icon', FontAwesomeIcon);
+		app.component('font-awesome-icon', FontAwesomeIcon);
+	},
+};

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

@@ -8,7 +8,6 @@ import { getAvailableCommunityPackageCount } from '@/api/settings';
 import { defineStore } from 'pinia';
 import { useRootStore } from './n8nRoot.store';
 import type { PublicInstalledPackage } from 'n8n-workflow';
-import Vue from 'vue';
 import type { CommunityNodesState, CommunityPackageMap } from '@/Interface';
 import { STORES } from '@/constants';
 

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

@@ -32,7 +32,6 @@ import type {
 	IUser,
 } from 'n8n-workflow';
 import { defineStore } from 'pinia';
-import Vue from 'vue';
 import { useRootStore } from './n8nRoot.store';
 import { useNodeTypesStore } from './nodeTypes.store';
 import { useSettingsStore } from './settings.store';

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

@@ -2,7 +2,6 @@ import { createTag, deleteTag, getTags, updateTag } from '@/api/tags';
 import { STORES } from '@/constants';
 import type { ITag, ITagsState } from '@/Interface';
 import { defineStore } from 'pinia';
-import Vue from 'vue';
 import { useRootStore } from './n8nRoot.store';
 import { useWorkflowsStore } from './workflows.store';
 

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

@@ -58,7 +58,6 @@ import type {
 	IWorkflowSettings,
 } from 'n8n-workflow';
 import { deepCopy, NodeHelpers, Workflow } from 'n8n-workflow';
-import Vue from 'vue';
 
 import { useRootStore } from './n8nRoot.store';
 import {