feat: migrate editor-ui to Vite.js and various DX improvements (N8N-2277) (#4061)

* feat: Added vite.js dependencies.

* chore: Removed tests folder to follow same structure as design-system

* chore: Removed unused testing config.

* chore: Created vite.js index.html

* refactor: Updated scss structure and imports.

* refactor: Updated workflow building.

* fix: Cleared up all workflow dependency cycles. Added proper package.json imports config.

* feat: Got a working build using Vite. Need to fix issues next.

* fix: Progress! Getting process.env error.

* fix: Changed process.env to import.meta.env.

* fix: Fixed circular imports that used require(). Fixed monaco editor.

* chore: Removed commented code.

* chore: Cleaned up package.json

* feat: Made necessary changes to replace base path in css files.

* feat: Serve CSS files for `editor-ui` Vite migration (#4069)

⚡ Serve CSS files for Vite migration

* chore: Fixed package-lock.json.

* fix: Fixed build after centralized tsconfig update.

* fix: Removed lodash-es replacement.

* fix: Commented out vitest test command.

* style: Fixed linting issues.

* fix: Added lodash-es hotfix back.

* chore: Updated package-lock.json

* refactor: Renamed all n8n scss variables to no longer be defined as private.

* feat(editor): add application-wide el-button replacement.

* fix(editor): Fix import in page alert after merge.

* chore(editor): update package-lock.json.

* fix: Case sensitive lodash-es replacement for vue-agile.

* fix: add alias for lodash-es camelcase import.

* fix: add patch-package support for fixing quill

* feat: add patch-package on postinstall

* fix: update quill patch path.

* refactor: rename quill patch

* fix: update quill version.

* fix: update quill patch

* fix: fix linting rules after installing eslint in design-system

* fix: update date picker button to have primary color

* test: update callout component snapshots

* fix(editor): fix linting issues in editor after enabling eslint

* fix(cli): add /assets/* to auth ignore endpoints in server

* chore: update package-lock.json

* chore: update package-lock.json

* fix(editor): fix linting issues

* feat: add vite-legacy support

* fix: update workflow package interface imports to type imports.

* chore: update package-lock.json

* fix(editor) fix importing translations other than english

* fix(editor): remove test command until vitest is added

* fix: increase memory allocation for vite build

* fix: add patch-package patches to n8n-custom docker build

* fix: add performance and load time improvements

* fix: add proper typing to setNodeType

* chore: update package-lock.json

* style: use generic type for reduce in setNodeType

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>

packages/workflow/package.json

@@ -12,8 +12,17 @@
     "type": "git",
     "url": "git+https://github.com/n8n-io/n8n.git"
   },
-  "main": "dist/src/index",
+  "main": "dist/src/index.js",
+  "module": "src/index.ts",
   "types": "dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/src/index.js",
+      "import": "./src/index.ts",
+      "types": "./dist/src/index.d.ts"
+    },
+    "./*": "./*"
+  },
   "scripts": {
     "dev": "npm run watch",
     "build": "tsc",
@@ -25,7 +34,7 @@
     "test:dev": "jest --watch"
   },
   "files": [
-    "dist"
+    "dist/**/*"
   ],
   "devDependencies": {
     "@n8n_io/eslint-config": "",

packages/workflow/src/Expression.ts

@@ -1,9 +1,7 @@
 import * as tmpl from '@n8n_io/riot-tmpl';
 import { DateTime, Duration, Interval } from 'luxon';
 
-// eslint-disable-next-line import/no-cycle
 import {
-	ExpressionError,
 	IExecuteData,
 	INode,
 	INodeExecutionData,
@@ -14,10 +12,11 @@ import {
 	IWorkflowDataProxyData,
 	NodeParameterValue,
 	NodeParameterValueType,
-	Workflow,
-	WorkflowDataProxy,
 	WorkflowExecuteMode,
-} from '.';
+} from './Interfaces';
+import { ExpressionError } from './ExpressionError';
+import { WorkflowDataProxy } from './WorkflowDataProxy';
+import type { Workflow } from './Workflow';
 
 // Set it to use double curly brackets instead of single ones
 tmpl.brackets.set('{{ }}');
@@ -111,16 +110,19 @@ export class Expression {
 		const data = dataProxy.getDataProxy();
 
 		// Support only a subset of process properties
-		data.process = {
-			arch: process.arch,
-			env: process.env,
-			platform: process.platform,
-			pid: process.pid,
-			ppid: process.ppid,
-			release: process.release,
-			version: process.pid,
-			versions: process.versions,
-		};
+		data.process =
+			typeof process !== 'undefined'
+				? {
+						arch: process.arch,
+						env: process.env,
+						platform: process.platform,
+						pid: process.pid,
+						ppid: process.ppid,
+						release: process.release,
+						version: process.pid,
+						versions: process.versions,
+				  }
+				: {};
 
 		/**
 		 * Denylist

packages/workflow/src/ExpressionError.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-cycle
 import { ExecutionBaseError } from './NodeErrors';
 
 /**

packages/workflow/src/Interfaces.ts

@@ -1,17 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable import/no-cycle */
 // eslint-disable-next-line import/no-extraneous-dependencies
 // eslint-disable-next-line max-classes-per-file
 import * as express from 'express';
 import * as FormData from 'form-data';
-import { URLSearchParams } from 'url';
-import { IDeferredPromise } from './DeferredPromise';
-import { Workflow } from './Workflow';
-import { WorkflowHooks } from './WorkflowHooks';
-import { WorkflowActivationError } from './WorkflowActivationError';
-import { WorkflowOperationError } from './WorkflowErrors';
-import { NodeApiError, NodeOperationError } from './NodeErrors';
+import type { URLSearchParams } from 'url';
+import type { IDeferredPromise } from './DeferredPromise';
+import type { Workflow } from './Workflow';
+import type { WorkflowHooks } from './WorkflowHooks';
+import type { WorkflowActivationError } from './WorkflowActivationError';
+import type { WorkflowOperationError } from './WorkflowErrors';
+import type { NodeApiError, NodeOperationError } from './NodeErrors';
 
 export interface IAdditionalCredentialOptions {
 	oauth2?: IOAuth2Options;

packages/workflow/src/LoggerProxy.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-// eslint-disable-next-line import/no-cycle
 import { ILogger, LogTypes } from './Interfaces';
 
 let logger: ILogger | undefined;

packages/workflow/src/NodeErrors.ts

@@ -7,8 +7,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 // eslint-disable-next-line max-classes-per-file
 import { parseString } from 'xml2js';
-// eslint-disable-next-line import/no-cycle
-import { IDataObject, INode, IStatusCodeMessages, JsonObject } from '.';
+import { IDataObject, INode, IStatusCodeMessages, JsonObject } from './Interfaces';
 
 /**
  * Top-level properties where an error message can be found in an API response.

packages/workflow/src/NodeHelpers.ts

@@ -12,7 +12,6 @@
 /* eslint-disable prefer-spread */
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable import/no-cycle */
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { get, isEqual } from 'lodash';
 
@@ -40,7 +39,7 @@ import {
 	WebhookHttpMethod,
 } from './Interfaces';
 
-import { Workflow } from './Workflow';
+import type { Workflow } from './Workflow';
 
 export const cronNodeOptions: INodePropertyCollection[] = [
 	{

packages/workflow/src/ObservableObject.ts

@@ -2,8 +2,7 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 /* eslint-disable no-param-reassign */
 /* eslint-disable no-underscore-dangle */
-// eslint-disable-next-line import/no-cycle
-import { IDataObject, IObservableObject } from '.';
+import { IDataObject, IObservableObject } from './Interfaces';
 
 export interface IObservableOptions {
 	ignoreEmptyOnFirstChild?: boolean;

packages/workflow/src/RoutingNode.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable import/no-cycle */
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 /* eslint-disable no-param-reassign */
 /* eslint-disable no-continue */
@@ -30,15 +29,8 @@ import {
 	ITaskDataConnections,
 	IWorkflowDataProxyAdditionalKeys,
 	IWorkflowExecuteAdditionalData,
-	NodeApiError,
-	NodeHelpers,
-	NodeOperationError,
 	NodeParameterValue,
-	Workflow,
 	WorkflowExecuteMode,
-} from '.';
-
-import {
 	IDataObject,
 	IExecuteData,
 	IExecuteSingleFunctions,
@@ -48,6 +40,10 @@ import {
 	NodeParameterValueType,
 	PostReceiveAction,
 } from './Interfaces';
+import { NodeApiError, NodeOperationError } from './NodeErrors';
+import * as NodeHelpers from './NodeHelpers';
+
+import type { Workflow } from '.';
 
 export class RoutingNode {
 	additionalData: IWorkflowExecuteAdditionalData;

packages/workflow/src/TelemetryHelpers.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-cycle */
 import {
 	IConnection,
 	INode,
@@ -8,8 +7,8 @@ import {
 	INodesGraphResult,
 	IWorkflowBase,
 	INodeTypes,
-} from '.';
-import { INodeType } from './Interfaces';
+	INodeType,
+} from './Interfaces';
 
 const STICKY_NODE_TYPE = 'n8n-nodes-base.stickyNote';
 

packages/workflow/src/Workflow.ts

@@ -13,12 +13,9 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable no-continue */
 /* eslint-disable no-restricted-syntax */
-/* eslint-disable import/no-cycle */
 
 import {
-	Expression,
 	IConnections,
-	IDeferredPromise,
 	IExecuteResponsePromiseData,
 	IGetExecuteTriggerFunctions,
 	INode,
@@ -39,15 +36,9 @@ import {
 	IWorfklowIssues,
 	IWorkflowExecuteAdditionalData,
 	IWorkflowSettings,
-	NodeHelpers,
-	ObservableObject,
-	RoutingNode,
 	WebhookSetupMethodNames,
 	WorkflowActivateMode,
 	WorkflowExecuteMode,
-} from '.';
-
-import {
 	IConnection,
 	IConnectedNode,
 	IDataObject,
@@ -58,6 +49,12 @@ import {
 	IRunNodeResponse,
 	NodeParameterValueType,
 } from './Interfaces';
+import { IDeferredPromise } from './DeferredPromise';
+
+import * as NodeHelpers from './NodeHelpers';
+import * as ObservableObject from './ObservableObject';
+import { RoutingNode } from './RoutingNode';
+import { Expression } from './Expression';
 
 function dedupe<T>(arr: T[]): T[] {
 	return [...new Set(arr)];

packages/workflow/src/WorkflowActivationError.ts

@@ -1,5 +1,5 @@
-// eslint-disable-next-line import/no-cycle
-import { ExecutionBaseError, INode } from '.';
+import { INode } from './Interfaces';
+import { ExecutionBaseError } from './NodeErrors';
 
 /**
  * Class for instantiating an workflow activation error

packages/workflow/src/WorkflowDataProxy.ts

@@ -10,9 +10,7 @@
 import { DateTime, Duration, Interval, Settings } from 'luxon';
 import * as jmespath from 'jmespath';
 
-// eslint-disable-next-line import/no-cycle
 import {
-	ExpressionError,
 	IDataObject,
 	IExecuteData,
 	INodeExecutionData,
@@ -24,11 +22,12 @@ import {
 	IWorkflowDataProxyAdditionalKeys,
 	IWorkflowDataProxyData,
 	INodeParameterResourceLocator,
-	NodeHelpers,
 	NodeParameterValueType,
-	Workflow,
 	WorkflowExecuteMode,
-} from '.';
+} from './Interfaces';
+import * as NodeHelpers from './NodeHelpers';
+import { ExpressionError } from './ExpressionError';
+import type { Workflow } from './Workflow';
 
 export function isResourceLocatorValue(value: unknown): value is INodeParameterResourceLocator {
 	return Boolean(

packages/workflow/src/WorkflowErrors.ts

@@ -1,5 +1,4 @@
-// eslint-disable-next-line import/no-cycle
-import { INode } from '.';
+import { INode } from './Interfaces';
 
 /**
  * Class for instantiating an operational error, e.g. a timeout error.

packages/workflow/src/WorkflowHooks.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-cycle
 import {
 	IWorkflowBase,
 	IWorkflowExecuteHooks,

packages/workflow/src/index.ts

@@ -1,7 +1,7 @@
-/* eslint-disable import/no-cycle */
 import * as LoggerProxy from './LoggerProxy';
 import * as NodeHelpers from './NodeHelpers';
 import * as ObservableObject from './ObservableObject';
+import * as TelemetryHelpers from './TelemetryHelpers';
 
 export * from './Cron';
 export * from './DeferredPromise';
@@ -9,11 +9,10 @@ export * from './Interfaces';
 export * from './Expression';
 export * from './ExpressionError';
 export * from './NodeErrors';
-export * as TelemetryHelpers from './TelemetryHelpers';
 export * from './RoutingNode';
 export * from './Workflow';
 export * from './WorkflowActivationError';
 export * from './WorkflowDataProxy';
 export * from './WorkflowErrors';
 export * from './WorkflowHooks';
-export { LoggerProxy, NodeHelpers, ObservableObject };
+export { LoggerProxy, NodeHelpers, ObservableObject, TelemetryHelpers };

packages/workflow/tsconfig.test.json

@@ -0,0 +1,7 @@
+{
+	"extends": "./tsconfig.json",
+	"include": [
+		"test/**/*.d.ts",
+		"test/**/*"
+	]
+}