mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-10 06:34:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

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

* fix linting issues

---------

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
This commit is contained in:
Alex Grozav 2023-06-16 10:30:57 +03:00 committed by GitHub
parent 5819be5ced
commit bbe493896c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 231 additions and 205 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/editor-ui/src/__tests__/setup.ts
View file

@ -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.use((vue) => I18nPlugin(vue));
// Vue.component('vue-json-pretty', require('vue-json-pretty').default);
config.stubs['vue-json-pretty'] = require('vue-json-pretty').default;
window.ResizeObserver =
window.ResizeObserver ||

2
packages/editor-ui/src/components/CredentialCard.vue
View file

@ -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: {

4
packages/editor-ui/src/components/CredentialIcon.vue
View file

@ -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,

4
packages/editor-ui/src/components/NodeTitle.vue
View file

@ -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,

2
packages/editor-ui/src/components/TemplateCard.vue
View file

@ -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() {

7
packages/editor-ui/src/components/VersionCard.vue
View file

@ -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 },

2
packages/editor-ui/src/components/WorkflowCard.vue
View file

@ -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: {

15
packages/editor-ui/src/main.ts
View file

@ -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({

38
packages/editor-ui/src/plugins/components.ts
View file

@ -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;
},
};

11
packages/editor-ui/src/plugins/directives.ts
View file

@ -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);
},
};

59
packages/editor-ui/src/plugins/i18n/index.ts
View file

@ -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
// ----------------------------------

275
packages/editor-ui/src/plugins/icons/index.ts
View file

@ -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);
},
};

1
packages/editor-ui/src/stores/communityNodes.store.ts
View file

@ -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';

1
packages/editor-ui/src/stores/credentials.store.ts
View file

@ -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';

1
packages/editor-ui/src/stores/tags.store.ts
View file

@ -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';

1
packages/editor-ui/src/stores/workflows.store.ts
View file

@ -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 {