refactor(editor): Drop vue-typed-mixins (no-changelog) (#6257)

packages/editor-ui/src/mixins/completionManager.ts

@@ -1,10 +1,11 @@
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import { ExpressionExtensions } from 'n8n-workflow';
 import type { EditorView, ViewUpdate } from '@codemirror/view';
 
 import { expressionManager } from './expressionManager';
 
-export const completionManager = mixins(expressionManager).extend({
+export const completionManager = defineComponent({
+	mixins: [expressionManager],
 	data() {
 		return {
 			editor: {} as EditorView,

packages/editor-ui/src/mixins/executionsHelpers.ts

@@ -1,7 +1,7 @@
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { i18n as locale } from '@/plugins/i18n';
-import { mapStores } from 'pinia';
-import mixins from 'vue-typed-mixins';
 import { genericHelpers } from './genericHelpers';
 import type { IExecutionsSummary } from 'n8n-workflow';
 
@@ -12,7 +12,8 @@ export interface IExecutionUIData {
 	runningTime: string;
 }
 
-export const executionHelpers = mixins(genericHelpers).extend({
+export const executionHelpers = defineComponent({
+	mixins: [genericHelpers],
 	computed: {
 		...mapStores(useWorkflowsStore),
 		executionId(): string {

packages/editor-ui/src/mixins/expressionManager.ts

@@ -1,18 +1,20 @@
-import mixins from 'vue-typed-mixins';
-import { Expression, ExpressionExtensions } from 'n8n-workflow';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
 import { mapStores } from 'pinia';
+
+import { Expression, ExpressionExtensions } from 'n8n-workflow';
 import { ensureSyntaxTree } from '@codemirror/language';
 
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { useNDVStore } from '@/stores/ndv.store';
 import { EXPRESSION_EDITOR_PARSER_TIMEOUT } from '@/constants';
 
-import type { PropType } from 'vue';
 import type { EditorView } from '@codemirror/view';
 import type { TargetItem } from '@/Interface';
 import type { Html, Plaintext, RawSegment, Resolvable, Segment } from '@/types/expressions';
 
-export const expressionManager = mixins(workflowHelpers).extend({
+export const expressionManager = defineComponent({
+	mixins: [workflowHelpers],
 	props: {
 		targetItem: {
 			type: Object as PropType<TargetItem | null>,

packages/editor-ui/src/mixins/moveNodeWorkflow.ts

@@ -1,10 +1,12 @@
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+
 import { deviceSupportHelpers } from '@/mixins/deviceSupportHelpers';
 import { getMousePosition } from '@/utils/nodeViewUtils';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 
-export const moveNodeWorkflow = mixins(deviceSupportHelpers).extend({
+export const moveNodeWorkflow = defineComponent({
+	mixins: [deviceSupportHelpers],
 	data() {
 		return {
 			moveLastPosition: [0, 0],

packages/editor-ui/src/mixins/nodeBase.ts

@@ -1,11 +1,12 @@
+import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
-import mixins from 'vue-typed-mixins';
+import { mapStores } from 'pinia';
+
 import type { INodeUi } from '@/Interface';
 import { deviceSupportHelpers } from '@/mixins/deviceSupportHelpers';
 import { NO_OP_NODE_TYPE } from '@/constants';
 
 import type { INodeTypeDescription } from 'n8n-workflow';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -15,7 +16,8 @@ import * as NodeViewUtils from '@/utils/nodeViewUtils';
 import { useHistoryStore } from '@/stores/history.store';
 import { useCanvasStore } from '@/stores/canvas.store';
 
-export const nodeBase = mixins(deviceSupportHelpers).extend({
+export const nodeBase = defineComponent({
+	mixins: [deviceSupportHelpers],
 	mounted() {
 		// Initialize the node
 		if (this.data !== null) {

packages/editor-ui/src/mixins/workflowActivate.ts

@@ -1,14 +1,15 @@
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+
 import { externalHooks } from '@/mixins/externalHooks';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { useToast } from '@/composables';
 
-import { defineComponent } from 'vue';
 import {
 	LOCAL_STORAGE_ACTIVATION_FLAG,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	WORKFLOW_ACTIVE_MODAL_KEY,
 } from '@/constants';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';

packages/editor-ui/src/mixins/workflowHelpers.ts

@@ -1,3 +1,5 @@
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import {
 	PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
@@ -47,7 +49,6 @@ import { isEqual } from 'lodash-es';
 
 import { v4 as uuid } from 'uuid';
 import { getSourceItems } from '@/utils';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
@@ -61,7 +62,6 @@ import type { IPermissions } from '@/permissions';
 import { getWorkflowPermissions } from '@/permissions';
 import type { ICredentialsResponse } from '@/Interface';
 import { useEnvironmentsStore } from '@/stores';
-import { defineComponent } from 'vue';
 
 export function resolveParameter(
 	parameter: NodeParameterValue | INodeParameters | NodeParameterValue[] | INodeParameters[],

packages/editor-ui/src/mixins/workflowRun.ts

@@ -1,3 +1,5 @@
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import type { IExecutionPushResponse, IExecutionResponse, IStartRunData } from '@/Interface';
 
 import type { IRunData, IRunExecutionData, IWorkflowBase } from 'n8n-workflow';
@@ -7,9 +9,7 @@ import { externalHooks } from '@/mixins/externalHooks';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { useToast } from '@/composables';
 
-import { defineComponent } from 'vue';
 import { useTitleChange } from '@/composables/useTitleChange';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useRootStore } from '@/stores/n8nRoot.store';