feat: Replace Vue.extend with defineComponent in editor-ui (no-changelog)

packages/editor-ui/src/__tests__/utils.ts

@@ -1,4 +1,6 @@
 import { ISettingsState, UserManagementAuthenticationMethod } from '@/Interface';
+import { render } from '@testing-library/vue';
+import { PiniaVuePlugin } from 'pinia';
 
 export const retry = (assertion: () => any, { interval = 20, timeout = 200 } = {}) => {
 	return new Promise((resolve, reject) => {
@@ -18,6 +20,12 @@ export const retry = (assertion: () => any, { interval = 20, timeout = 200 } = {
 	});
 };
 
+type RenderParams = Parameters<typeof render>;
+export const renderComponent = (Component: RenderParams[0], renderOptions: RenderParams[1] = {}) =>
+	render(Component, renderOptions, (vue) => {
+		vue.use(PiniaVuePlugin);
+	});
+
 export const waitAllPromises = () => new Promise((resolve) => setTimeout(resolve));
 
 export const SETTINGS_STORE_DEFAULT_STATE: ISettingsState = {

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

@@ -54,15 +54,15 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import Modal from './Modal.vue';
 import { ABOUT_MODAL_KEY } from '../constants';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { createEventBus } from '@/event-bus';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'About',
 	components: {
 		Modal,

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

@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 import Modal from '@/components/Modal.vue';
 import {
@@ -51,7 +51,7 @@ import { useWorkflowsStore } from '@/stores/workflows';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { createEventBus } from '@/event-bus';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ActivationModal',
 	components: {
 		Modal,

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

@@ -23,12 +23,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import Modal from './Modal.vue';
 import { ASK_AI_MODAL_KEY, ASK_AI_WAITLIST_URL } from '../constants';
 import { createEventBus } from '@/event-bus';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'AskAI',
 	components: {
 		Modal,

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

@@ -36,9 +36,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'Banner',
 	data() {
 		return {

packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue

@@ -68,12 +68,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 import TimeAgo from '../TimeAgo.vue';
 import { INodeTypeDescription } from 'n8n-workflow';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'CredentialInfo',
 	props: ['nodesWithAccess', 'nodeAccess', 'currentCredential', 'credentialPermissions'],
 	components: {

packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue

@@ -24,12 +24,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { IParameterLabel } from 'n8n-workflow';
 import { IUpdateInformation } from '@/Interface';
 import ParameterInputExpanded from '../ParameterInputExpanded.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'CredentialsInput',
 	props: [
 		'credentialProperties',

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

@@ -12,9 +12,9 @@ import { useRootStore } from '@/stores/n8nRootStore';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
 import { mapStores } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		credentialTypeName: {
 			type: String,

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

@@ -56,7 +56,7 @@
 
 <script lang="ts">
 import { ICredentialType } from 'n8n-workflow';
-import Vue from 'vue';
+import Vue, { defineComponent } from 'vue';
 import ScopesNotice from '@/components/ScopesNotice.vue';
 import NodeCredentials from '@/components/NodeCredentials.vue';
 import { mapStores } from 'pinia';
@@ -65,7 +65,7 @@ import { N8nSelect } from 'n8n-design-system';
 
 type N8nSelectRef = InstanceType<typeof N8nSelect>;
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'CredentialsSelect',
 	components: {
 		ScopesNotice,

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

@@ -19,12 +19,12 @@
 import { XYPosition } from '@/Interface';
 import { useNDVStore } from '@/stores/ndv';
 import { mapStores } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 // @ts-ignore
 import Teleport from 'vue2-teleport';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'draggable',
 	components: {
 		Teleport,

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

@@ -7,9 +7,10 @@
 <script lang="ts">
 import { useNDVStore } from '@/stores/ndv';
 import { mapStores } from 'pinia';
-import Vue, { PropType } from 'vue';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		type: {
 			type: String,

packages/editor-ui/src/components/EnterpriseEdition.ee.vue

@@ -6,12 +6,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { EnterpriseEditionFeature } from '@/constants';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'EnterpriseEdition',
 	props: {
 		features: {

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

@@ -7,13 +7,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import ExecutionsList from '@/components/ExecutionsList.vue';
 import Modal from '@/components/Modal.vue';
 import { EXECUTIONS_MODAL_KEY } from '@/constants';
 import { createEventBus } from '@/event-bus';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ExecutionsModal',
 	components: {
 		Modal,

packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue

@@ -27,10 +27,10 @@ import { PLACEHOLDER_EMPTY_WORKFLOW_ID, VIEWS } from '@/constants';
 import { useUIStore } from '@/stores/ui';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { mapStores } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import ExecutionsInfoAccordion from './ExecutionsInfoAccordion.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'executions-landing-page',
 	components: {
 		ExecutionsInfoAccordion,

packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue

@@ -70,7 +70,7 @@ import ExecutionFilter from '@/components/ExecutionFilter.vue';
 import { VIEWS } from '@/constants';
 import type { IExecutionsSummary } from 'n8n-workflow';
 import { Route } from 'vue-router';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { PropType } from 'vue';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
@@ -79,7 +79,7 @@ import { ExecutionFilterType } from '@/Interface';
 
 type ExecutionCardRef = InstanceType<typeof ExecutionCard>;
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'executions-sidebar',
 	components: {
 		ExecutionCard,

packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue

@@ -6,9 +6,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ExpandableInputBase',
 	props: ['value', 'placeholder', 'staticSize'],
 	computed: {

packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue

@@ -16,11 +16,12 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent } from 'vue';
 import ExpandableInputBase from './ExpandableInputBase.vue';
-import { EventBus } from '@/event-bus';
+import type { PropType } from 'vue';
+import type { EventBus } from '@/event-bus';
 
-export default Vue.extend({
+export default defineComponent({
 	components: { ExpandableInputBase },
 	name: 'ExpandableInputEdit',
 	props: {

packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue

@@ -12,10 +12,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import ExpandableInputBase from './ExpandableInputBase.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: { ExpandableInputBase },
 	name: 'ExpandableInputPreview',
 	props: ['value'],

packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue

@@ -3,17 +3,18 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
 import { EditorView } from '@codemirror/view';
 import { EditorState } from '@codemirror/state';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
 
 import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
 import { outputTheme } from './theme';
 
 import type { Plaintext, Resolved, Segment } from '@/types/expressions';
 import { forceParse } from '@/utils/forceParse';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ExpressionEditorModalOutput',
 	props: {
 		segments: {

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

@@ -66,7 +66,7 @@
 
 <script lang="ts">
 import { mapStores } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 import { useNDVStore } from '@/stores/ndv';
 import { useWorkflowsStore } from '@/stores/workflows';
@@ -81,7 +81,7 @@ import type { TargetItem } from '@/Interface';
 
 type InlineExpressionEditorInputRef = InstanceType<typeof InlineExpressionEditorInput>;
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ExpressionParameterInput',
 	components: {
 		InlineExpressionEditorInput,

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

@@ -35,9 +35,9 @@ import { useSettingsStore } from '@/stores/settings';
 import { useUIStore } from '@/stores/ui';
 import { useUsersStore } from '@/stores/users';
 import { mapStores } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'FeatureComingSoon',
 	props: {
 		featureId: {

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

@@ -112,21 +112,21 @@
 </template>
 
 <script lang="ts">
-import Vue, { Component, PropType } from 'vue';
-import { IUpdateInformation } from '@/Interface';
+import { defineComponent } from 'vue';
+import type { Component, PropType } from 'vue';
+import type { IUpdateInformation } from '@/Interface';
 
-import {
+import { deepCopy, isINodePropertyCollectionList } from 'n8n-workflow';
+import type {
 	INodeParameters,
 	INodeProperties,
 	INodePropertyCollection,
 	NodeParameterValue,
-	deepCopy,
-	isINodePropertyCollectionList,
 } from 'n8n-workflow';
 
 import { get } from 'lodash-es';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'FixedCollectionParameter',
 	props: {
 		nodeValues: {

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

@@ -7,9 +7,9 @@
 
 <script lang="ts">
 import { VIEWS } from '@/constants';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'GoBackButton',
 	data() {
 		return {

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

@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 import { ITemplatesNode } from '@/Interface';
 import { INodeTypeDescription } from 'n8n-workflow';
@@ -54,7 +54,7 @@ interface NodeIconData {
 	fileBuffer?: string;
 }
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'HoverableNodeIcon',
 	props: {
 		circle: {