feat(editor): Add support for unplugin-icons and auto-importing com…

…ponents (no-changelog) (n8n-io#10055)
netroy · Jul 23, 2024 · f2ad122 · f2ad122
1 parent 0fd2c5e
commit f2ad122
Show file tree

Hide file tree

Showing 20 changed files with 257 additions and 83 deletions.
diff --git a/packages/@n8n/chat/package.json b/packages/@n8n/chat/package.json
@@ -46,7 +46,7 @@
     "@iconify-json/mdi": "^1.1.54",
     "@n8n/storybook": "workspace:*",
     "@types/markdown-it": "^12.2.3",
-    "unplugin-icons": "^0.17.0",
+    "unplugin-icons": "^0.19.0",
     "vite-plugin-dts": "^3.9.1"
   },
   "files": [

diff --git a/packages/design-system/.gitignore b/packages/design-system/.gitignore
@@ -1,2 +1,5 @@
 storybook-static
 **/*.stories.js
+
+# Auto-generated
+src/components.d.ts
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -31,7 +31,9 @@
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "sass": "^1.64.1",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.3",
+    "unplugin-icons": "^0.19.0",
+    "unplugin-vue-components": "^0.27.2"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.36",

diff --git a/packages/design-system/vite.config.mts b/packages/design-system/vite.config.mts
@@ -3,6 +3,9 @@ import { resolve } from 'path';
 import { defineConfig, mergeConfig } from 'vite';
 import { type UserConfig } from 'vitest';
 import { defineConfig as defineVitestConfig } from 'vitest/config';
+import components from 'unplugin-vue-components/vite';
+import icons from 'unplugin-icons/vite';
+import iconsResolver from 'unplugin-icons/resolver';
 
 export const vitestConfig = defineVitestConfig({
 	test: {
@@ -30,7 +33,22 @@ export const vitestConfig = defineVitestConfig({
 
 export default mergeConfig(
 	defineConfig({
-		plugins: [vue()],
+		plugins: [
+			vue(),
+			icons({
+				compiler: 'vue3',
+				autoInstall: true,
+			}),
+			components({
+				dirs: [],
+				dts: false,
+				resolvers: [
+					iconsResolver({
+						prefix: 'icon'
+					})
+				]
+			}),
+		],
 		resolve: {
 			alias: {
 				'@': resolve(__dirname, 'src'),

diff --git a/packages/editor-ui/.gitignore b/packages/editor-ui/.gitignore
@@ -22,3 +22,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+# Auto-generated files
+src/components.d.ts
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
@@ -77,6 +77,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
+    "@iconify/json": "^2.2.228",
     "@pinia/testing": "^0.1.3",
     "@sentry/vite-plugin": "^2.5.0",
     "@types/dateformat": "^3.0.0",
@@ -88,7 +89,8 @@
     "@types/uuid": "^8.3.2",
     "cross-env": "^7.0.3",
     "miragejs": "^0.1.48",
-    "unplugin-icons": "^0.17.0"
+    "unplugin-icons": "^0.19.0",
+    "unplugin-vue-components": "^0.27.2"
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-svg-core": "*",

diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue
@@ -135,7 +135,7 @@ const getProperties = computed(() => {
 	const returnProperties = [];
 	let tempProperties;
 	for (const name of propertyNames.value) {
-		tempProperties = getOptionProperties(name);
+		tempProperties = getOptionProperties(name) as INodeProperties[];
 		if (tempProperties !== undefined) {
 			returnProperties.push(...tempProperties);
 		}

diff --git a/packages/editor-ui/src/components/ImportCurlParameter.vue b/packages/editor-ui/src/components/ImportCurlParameter.vue
@@ -3,7 +3,7 @@ import { IMPORT_CURL_MODAL_KEY } from '@/constants';
 import { useUIStore } from '@/stores/ui.store';
 
 defineProps<{
-	isReadOnly: boolean;
+	isReadOnly?: boolean;
 }>();
 
 const uiStore = useUIStore();

diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue
@@ -18,7 +18,7 @@ type Props = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-const NodeCreator = defineAsyncComponent(
+const LazyNodeCreator = defineAsyncComponent(
 	async () => await import('@/components/Node/NodeCreator/NodeCreator.vue'),
 );
 
@@ -135,7 +135,7 @@ function nodeTypeSelected(nodeTypes: string[]) {
 			</div>
 		</div>
 		<Suspense>
-			<NodeCreator
+			<LazyNodeCreator
 				:active="createNodeActive"
 				@node-type-selected="nodeTypeSelected"
 				@close-node-creator="closeNodeCreator"

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -67,7 +67,7 @@
 				/>
 				<Suspense v-if="!asyncLoadingError">
 					<template #default>
-						<CollectionParameter
+						<LazyCollectionParameter
 							v-if="parameter.type === 'collection'"
 							:parameter="parameter"
 							:values="getParameterValue(parameter.name)"
@@ -76,7 +76,7 @@
 							:is-read-only="isReadOnly"
 							@value-changed="valueChanged"
 						/>
-						<FixedCollectionParameter
+						<LazyFixedCollectionParameter
 							v-else-if="parameter.type === 'fixedCollection'"
 							:parameter="parameter"
 							:values="getParameterValue(parameter.name)"
@@ -192,10 +192,10 @@ import {
 import { get, set } from 'lodash-es';
 import { useRouter } from 'vue-router';
 
-const FixedCollectionParameter = defineAsyncComponent(
+const LazyFixedCollectionParameter = defineAsyncComponent(
 	async () => await import('./FixedCollectionParameter.vue'),
 );
-const CollectionParameter = defineAsyncComponent(
+const LazyCollectionParameter = defineAsyncComponent(
 	async () => await import('./CollectionParameter.vue'),
 );
 
@@ -205,7 +205,7 @@ type Props = {
 	path?: string;
 	hideDelete?: boolean;
 	indent?: boolean;
-	isReadOnly: boolean;
+	isReadOnly?: boolean;
 	hiddenIssuesInputs?: string[];
 	entryIndex?: number;
 };
@@ -227,7 +227,7 @@ const workflowHelpers = useWorkflowHelpers({ router });
 
 onErrorCaptured((e, component) => {
 	if (
-		!['FixedCollectionParameter', 'CollectionParameter'].includes(
+		!['LazyFixedCollectionParameter', 'LazyCollectionParameter'].includes(
 			component?.$options.name as string,
 		)
 	) {

diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
@@ -50,7 +50,7 @@
 				data-test-id="run-data-pane-header"
 				@click.stop
 			>
-				<RunDataSearch
+				<LazyRunDataSearch
 					v-if="showIOSearch"
 					v-model="search"
 					:class="$style.search"
@@ -380,7 +380,7 @@
 			</div>
 
 			<Suspense v-else-if="hasNodeRun && displayMode === 'table' && node">
-				<RunDataTable
+				<LazyRunDataTable
 					:node="node"
 					:input-data="inputDataPage"
 					:mapping-enabled="mappingEnabled"
@@ -397,7 +397,7 @@
 			</Suspense>
 
 			<Suspense v-else-if="hasNodeRun && displayMode === 'json' && node">
-				<RunDataJson
+				<LazyRunDataJson
 					:pane-type="paneType"
 					:edit-mode="editMode"
 					:push-ref="pushRef"
@@ -412,11 +412,11 @@
 			</Suspense>
 
 			<Suspense v-else-if="hasNodeRun && isPaneTypeOutput && displayMode === 'html'">
-				<RunDataHtml :input-html="inputHtml" />
+				<LazyRunDataHtml :input-html="inputHtml" />
 			</Suspense>
 
 			<Suspense v-else-if="hasNodeRun && isSchemaView">
-				<RunDataSchema
+				<LazyRunDataSchema
 					:nodes="nodes"
 					:mapping-enabled="mappingEnabled"
 					:node="node"
@@ -628,15 +628,19 @@ import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useRootStore } from '@/stores/root.store';
 import RunDataPinButton from '@/components/RunDataPinButton.vue';
 
-const RunDataTable = defineAsyncComponent(
+const LazyRunDataTable = defineAsyncComponent(
 	async () => await import('@/components/RunDataTable.vue'),
 );
-const RunDataJson = defineAsyncComponent(async () => await import('@/components/RunDataJson.vue'));
-const RunDataSchema = defineAsyncComponent(
+const LazyRunDataJson = defineAsyncComponent(
+	async () => await import('@/components/RunDataJson.vue'),
+);
+const LazyRunDataSchema = defineAsyncComponent(
 	async () => await import('@/components/RunDataSchema.vue'),
 );
-const RunDataHtml = defineAsyncComponent(async () => await import('@/components/RunDataHtml.vue'));
-const RunDataSearch = defineAsyncComponent(
+const LazyRunDataHtml = defineAsyncComponent(
+	async () => await import('@/components/RunDataHtml.vue'),
+);
+const LazyRunDataSearch = defineAsyncComponent(
 	async () => await import('@/components/RunDataSearch.vue'),
 );
 
@@ -650,11 +654,11 @@ export default defineComponent({
 		BinaryDataDisplay,
 		NodeErrorView,
 		JsonEditor,
-		RunDataTable,
-		RunDataJson,
-		RunDataSchema,
-		RunDataHtml,
-		RunDataSearch,
+		LazyRunDataTable,
+		LazyRunDataJson,
+		LazyRunDataSchema,
+		LazyRunDataHtml,
+		LazyRunDataSearch,
 		RunDataPinButton,
 	},
 	props: {

diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
@@ -1,7 +1,7 @@
 <template>
 	<div :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
 		<Suspense>
-			<RunDataJsonActions
+			<LazyRunDataJsonActions
 				v-if="!editMode.enabled"
 				:node="node"
 				:push-ref="pushRef"
@@ -93,7 +93,7 @@ import { nonExistingJsonPath } from '@/constants';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import TextWithHighlights from './TextWithHighlights.vue';
 
-const RunDataJsonActions = defineAsyncComponent(
+const LazyRunDataJsonActions = defineAsyncComponent(
 	async () => await import('@/components/RunDataJsonActions.vue'),
 );
 
@@ -102,7 +102,7 @@ export default defineComponent({
 	components: {
 		VueJsonPretty,
 		Draggable,
-		RunDataJsonActions,
+		LazyRunDataJsonActions,
 		MappingPill,
 		TextWithHighlights,
 	},

diff --git a/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue b/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue
@@ -54,7 +54,7 @@
 						locale.baseText('chat.window.logs')
 					}}</n8n-text>
 					<div :class="$style.logs">
-						<RunDataAi :key="messages.length" :node="node" hide-title slim />
+						<LazyRunDataAi :key="messages.length" :node="node" hide-title slim />
 					</div>
 				</div>
 			</div>
@@ -137,7 +137,7 @@ import { get, last } from 'lodash-es';
 import { isEmpty } from '@/utils/typesUtils';
 import { chatEventBus } from '@n8n/chat/event-buses';
 
-const RunDataAi = defineAsyncComponent(
+const LazyRunDataAi = defineAsyncComponent(
 	async () => await import('@/components/RunDataAi/RunDataAi.vue'),
 );
 

diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -162,7 +162,7 @@ import type { Scope } from '@n8n/permissions';
 export type IResource = {
 	id: string;
 	name: string;
-	value: string;
+	value?: string;
 	key?: string;
 	updatedAt?: string;
 	createdAt?: string;

diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -92,11 +92,11 @@ import { createEventBus } from 'n8n-design-system';
 import type { PinDataSource } from '@/composables/usePinnedData';
 import { useClipboard } from '@/composables/useClipboard';
 
-const NodeCreation = defineAsyncComponent(
+const LazyNodeCreation = defineAsyncComponent(
 	async () => await import('@/components/Node/NodeCreation.vue'),
 );
 
-const NodeDetailsView = defineAsyncComponent(
+const LazyNodeDetailsView = defineAsyncComponent(
 	async () => await import('@/components/NodeDetailsView.vue'),
 );
 
@@ -1533,7 +1533,7 @@ onBeforeUnmount(() => {
 			/>
 		</div>
 		<Suspense>
-			<NodeCreation
+			<LazyNodeCreation
 				v-if="!isCanvasReadOnly"
 				:create-node-active="uiStore.isCreateNodeActive"
 				:node-view-scale="viewportTransform.zoom"
@@ -1542,7 +1542,7 @@ onBeforeUnmount(() => {
 			/>
 		</Suspense>
 		<Suspense>
-			<NodeDetailsView
+			<LazyNodeDetailsView
 				:workflow-object="editableWorkflowObject"
 				:read-only="isCanvasReadOnly"
 				:is-production-execution-preview="isProductionExecutionPreview"

diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
@@ -102,11 +102,11 @@
 			/>
 			<Suspense>
 				<div :class="$style.setupCredentialsButtonWrapper">
-					<SetupWorkflowCredentialsButton />
+					<LazySetupWorkflowCredentialsButton />
 				</div>
 			</Suspense>
 			<Suspense>
-				<NodeCreation
+				<LazyNodeCreation
 					v-if="!isReadOnlyRoute && !readOnlyEnv"
 					:create-node-active="createNodeActive"
 					:node-view-scale="nodeViewScale"
@@ -115,7 +115,7 @@
 				/>
 			</Suspense>
 			<Suspense>
-				<CanvasControls />
+				<LazyCanvasControls />
 			</Suspense>
 			<Suspense>
 				<ContextMenu @action="onContextMenuAction" />
@@ -390,13 +390,13 @@ interface AddNodeOptions {
 	name?: string;
 }
 
-const NodeCreation = defineAsyncComponent(
+const LazyNodeCreation = defineAsyncComponent(
 	async () => await import('@/components/Node/NodeCreation.vue'),
 );
-const CanvasControls = defineAsyncComponent(
+const LazyCanvasControls = defineAsyncComponent(
 	async () => await import('@/components/CanvasControls.vue'),
 );
-const SetupWorkflowCredentialsButton = defineAsyncComponent(
+const LazySetupWorkflowCredentialsButton = defineAsyncComponent(
 	async () =>
 		await import('@/components/SetupWorkflowCredentialsButton/SetupWorkflowCredentialsButton.vue'),
 );
@@ -409,10 +409,10 @@ export default defineComponent({
 		Sticky,
 		CanvasAddButton,
 		KeyboardShortcutTooltip,
-		NodeCreation,
-		CanvasControls,
+		LazyNodeCreation,
+		LazyCanvasControls,
 		ContextMenu,
-		SetupWorkflowCredentialsButton,
+		LazySetupWorkflowCredentialsButton,
 	},
 	async beforeRouteLeave(to, from, next) {
 		if (