From 202124152cdeb289fc481e80f513a9d3652e9eb1 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 20 Jun 2024 14:17:12 +0200
Subject: [PATCH] refactor(editor): Refactor code editors to composition API
 (no-changelog) (#9757)

---
 .../CodeNodeEditor/CodeNodeEditor.vue         | 661 +++++++------
 .../components/CodeNodeEditor/completer.ts    | 533 +++++-----
 .../completions/itemIndex.completions.ts      |  16 +-
 .../src/components/CodeNodeEditor/linter.ts   | 932 +++++++++---------
 .../src/components/JsEditor/JsEditor.vue      | 151 ++-
 .../src/components/JsonEditor/JsonEditor.vue  | 178 ++--
 6 files changed, 1217 insertions(+), 1254 deletions(-)

diff --git a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
index ff4602475d..6c23faf03a 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
+++ b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		ref="codeNodeEditorContainer"
+		ref="codeNodeEditorContainerRef"
 		:class="['code-node-editor', $style['code-node-editor-container'], language]"
 		@mouseover="onMouseOver"
 		@mouseout="onMouseOut"
@@ -18,7 +18,7 @@
 				data-test-id="code-node-tab-code"
 			>
 				<div
-					ref="codeNodeEditor"
+					ref="codeNodeEditorRef"
 					:class="['ph-no-capture', 'code-editor-tabs', $style.editorInput]"
 				/>
 				<slot name="suffix" />
@@ -33,359 +33,364 @@
 					:key="activeTab"
 					:has-changes="hasChanges"
 					@replace-code="onReplaceCode"
-					@started-loading="isLoadingAIResponse = true"
-					@finished-loading="isLoadingAIResponse = false"
+					@started-loading="onAiLoadStart"
+					@finished-loading="onAiLoadEnd"
 				/>
 			</el-tab-pane>
 		</el-tabs>
 		<!-- If AskAi not enabled, there's no point in rendering tabs -->
 		<div v-else :class="$style.fillHeight">
-			<div ref="codeNodeEditor" :class="['ph-no-capture', $style.fillHeight]" />
+			<div ref="codeNodeEditorRef" :class="['ph-no-capture', $style.fillHeight]" />
 			<slot name="suffix" />
 		</div>
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import jsParser from 'prettier/plugins/babel';
-import { format } from 'prettier';
-import * as estree from 'prettier/plugins/estree';
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import { javascript } from '@codemirror/lang-javascript';
+import { python } from '@codemirror/lang-python';
 import type { LanguageSupport } from '@codemirror/language';
 import type { Extension, Line } from '@codemirror/state';
 import { Compartment, EditorState } from '@codemirror/state';
 import type { ViewUpdate } from '@codemirror/view';
 import { EditorView } from '@codemirror/view';
-import { javascript } from '@codemirror/lang-javascript';
-import { python } from '@codemirror/lang-python';
 import type { CodeExecutionMode, CodeNodeEditorLanguage } from 'n8n-workflow';
-import { CODE_EXECUTION_MODES, CODE_LANGUAGES } from 'n8n-workflow';
+import { format } from 'prettier';
+import jsParser from 'prettier/plugins/babel';
+import * as estree from 'prettier/plugins/estree';
+import { type Ref, computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { ASK_AI_EXPERIMENT, CODE_NODE_TYPE } from '@/constants';
 import { codeNodeEditorEventBus } from '@/event-bus';
 import { useRootStore } from '@/stores/root.store';
 import { usePostHog } from '@/stores/posthog.store';
 
-import { readOnlyEditorExtensions, writableEditorExtensions } from './baseExtensions';
-import { CODE_PLACEHOLDERS } from './constants';
-import { linterExtension } from './linter';
-import { completerExtension } from './completer';
-import { codeNodeEditorTheme } from './theme';
-import AskAI from './AskAI/AskAI.vue';
 import { useMessage } from '@/composables/useMessage';
 import { useSettingsStore } from '@/stores/settings.store';
+import AskAI from './AskAI/AskAI.vue';
+import { readOnlyEditorExtensions, writableEditorExtensions } from './baseExtensions';
+import { useCompleter } from './completer';
+import { CODE_PLACEHOLDERS } from './constants';
+import { useLinter } from './linter';
+import { codeNodeEditorTheme } from './theme';
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
 
-export default defineComponent({
-	name: 'CodeNodeEditor',
-	components: {
-		AskAI,
-	},
-	mixins: [linterExtension, completerExtension],
-	props: {
-		aiButtonEnabled: {
-			type: Boolean,
-			default: false,
-		},
-		fillParent: {
-			type: Boolean,
-			default: false,
-		},
-		mode: {
-			type: String as PropType<CodeExecutionMode>,
-			validator: (value: CodeExecutionMode): boolean => CODE_EXECUTION_MODES.includes(value),
-			required: true,
-		},
-		language: {
-			type: String as PropType<CodeNodeEditorLanguage>,
-			default: 'javaScript' as CodeNodeEditorLanguage,
-			validator: (value: CodeNodeEditorLanguage): boolean => CODE_LANGUAGES.includes(value),
-		},
-		isReadOnly: {
-			type: Boolean,
-			default: false,
-		},
-		rows: {
-			type: Number,
-			default: 4,
-		},
-		modelValue: {
-			type: String,
-			required: true,
-		},
-	},
-	setup() {
-		return {
-			...useMessage(),
-		};
-	},
-	data() {
-		return {
-			editor: null as EditorView | null,
-			languageCompartment: new Compartment(),
-			linterCompartment: new Compartment(),
-			isEditorHovered: false,
-			isEditorFocused: false,
-			tabs: ['code', 'ask-ai'],
-			activeTab: 'code',
-			hasChanges: false,
-			isLoadingAIResponse: false,
-		};
-	},
-	watch: {
-		mode(_newMode, previousMode: CodeExecutionMode) {
-			this.reloadLinter();
+type Props = {
+	mode: CodeExecutionMode;
+	modelValue: string;
+	aiButtonEnabled?: boolean;
+	fillParent?: boolean;
+	language?: CodeNodeEditorLanguage;
+	isReadOnly?: boolean;
+	rows?: number;
+};
 
-			if (
-				this.getCurrentEditorContent().trim() === CODE_PLACEHOLDERS[this.language]?.[previousMode]
-			) {
-				this.refreshPlaceholder();
-			}
-		},
-		language(_newLanguage, previousLanguage: CodeNodeEditorLanguage) {
-			if (
-				this.getCurrentEditorContent().trim() === CODE_PLACEHOLDERS[previousLanguage]?.[this.mode]
-			) {
-				this.refreshPlaceholder();
-			}
-
-			const [languageSupport] = this.languageExtensions;
-			this.editor?.dispatch({
-				effects: this.languageCompartment.reconfigure(languageSupport),
-			});
-		},
-		aiEnabled: {
-			immediate: true,
-			async handler(isEnabled) {
-				if (isEnabled && !this.modelValue) {
-					this.$emit('update:modelValue', this.placeholder);
-				}
-				await this.$nextTick();
-				this.hasChanges = this.modelValue !== this.placeholder;
-			},
-		},
-	},
-	computed: {
-		...mapStores(useRootStore, usePostHog, useSettingsStore),
-		aiEnabled(): boolean {
-			const isAiExperimentEnabled = [ASK_AI_EXPERIMENT.gpt3, ASK_AI_EXPERIMENT.gpt4].includes(
-				(this.posthogStore.getVariant(ASK_AI_EXPERIMENT.name) ?? '') as string,
-			);
-
-			return (
-				isAiExperimentEnabled &&
-				this.settingsStore.settings.ai.enabled &&
-				this.language === 'javaScript'
-			);
-		},
-		placeholder(): string {
-			return CODE_PLACEHOLDERS[this.language]?.[this.mode] ?? '';
-		},
-		// eslint-disable-next-line vue/return-in-computed-property
-		languageExtensions(): [LanguageSupport, ...Extension[]] {
-			switch (this.language) {
-				case 'javaScript':
-					return [javascript(), this.autocompletionExtension('javaScript')];
-				case 'python':
-					return [python(), this.autocompletionExtension('python')];
-			}
-		},
-	},
-	beforeUnmount() {
-		if (!this.isReadOnly) codeNodeEditorEventBus.off('error-line-number', this.highlightLine);
-	},
-	mounted() {
-		if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine);
-
-		const { isReadOnly, language } = this;
-		const extensions: Extension[] = [
-			...readOnlyEditorExtensions,
-			EditorState.readOnly.of(isReadOnly),
-			EditorView.editable.of(!isReadOnly),
-			codeNodeEditorTheme({
-				isReadOnly,
-				maxHeight: this.fillParent ? '100%' : '40vh',
-				minHeight: '20vh',
-				rows: this.rows,
-			}),
-		];
-
-		if (!isReadOnly) {
-			const linter = this.createLinter(language);
-			if (linter) {
-				extensions.push(this.linterCompartment.of(linter));
-			}
-
-			extensions.push(
-				...writableEditorExtensions,
-				EditorView.domEventHandlers({
-					focus: () => {
-						this.isEditorFocused = true;
-					},
-					blur: () => {
-						this.isEditorFocused = false;
-					},
-				}),
-
-				EditorView.updateListener.of((viewUpdate) => {
-					if (!viewUpdate.docChanged) return;
-
-					this.trackCompletion(viewUpdate);
-
-					this.$emit('update:modelValue', this.editor?.state.doc.toString());
-					this.hasChanges = true;
-				}),
-			);
-		}
-
-		const [languageSupport, ...otherExtensions] = this.languageExtensions;
-		extensions.push(this.languageCompartment.of(languageSupport), ...otherExtensions);
-
-		const state = EditorState.create({
-			doc: this.modelValue ?? this.placeholder,
-			extensions,
-		});
-
-		this.editor = new EditorView({
-			parent: this.$refs.codeNodeEditor as HTMLDivElement,
-			state,
-		});
-
-		// empty on first load, default param value
-		if (!this.modelValue) {
-			this.refreshPlaceholder();
-			this.$emit('update:modelValue', this.placeholder);
-		}
-	},
-	methods: {
-		getCurrentEditorContent() {
-			return this.editor?.state.doc.toString() ?? '';
-		},
-		async onBeforeTabLeave(_activeName: string, oldActiveName: string) {
-			// Confirm dialog if leaving ask-ai tab during loading
-			if (oldActiveName === 'ask-ai' && this.isLoadingAIResponse) {
-				const confirmModal = await this.alert(
-					this.$locale.baseText('codeNodeEditor.askAi.sureLeaveTab'),
-					{
-						title: this.$locale.baseText('codeNodeEditor.askAi.areYouSure'),
-						confirmButtonText: this.$locale.baseText('codeNodeEditor.askAi.switchTab'),
-						showClose: true,
-						showCancelButton: true,
-					},
-				);
-
-				if (confirmModal === 'confirm') {
-					return true;
-				}
-
-				return false;
-			}
-
-			return true;
-		},
-		async onReplaceCode(code: string) {
-			const formattedCode = await format(code, {
-				parser: 'babel',
-				plugins: [jsParser, estree],
-			});
-
-			this.editor?.dispatch({
-				changes: { from: 0, to: this.getCurrentEditorContent().length, insert: formattedCode },
-			});
-
-			this.activeTab = 'code';
-			this.hasChanges = false;
-		},
-		onMouseOver(event: MouseEvent) {
-			const fromElement = event.relatedTarget as HTMLElement;
-			const ref = this.$refs.codeNodeEditorContainer as HTMLDivElement | undefined;
-
-			if (!ref?.contains(fromElement)) this.isEditorHovered = true;
-		},
-		onMouseOut(event: MouseEvent) {
-			const fromElement = event.relatedTarget as HTMLElement;
-			const ref = this.$refs.codeNodeEditorContainer as HTMLDivElement | undefined;
-
-			if (!ref?.contains(fromElement)) this.isEditorHovered = false;
-		},
-		reloadLinter() {
-			if (!this.editor) return;
-
-			const linter = this.createLinter(this.language);
-			if (linter) {
-				this.editor.dispatch({
-					effects: this.linterCompartment.reconfigure(linter),
-				});
-			}
-		},
-		refreshPlaceholder() {
-			if (!this.editor) return;
-
-			this.editor.dispatch({
-				changes: { from: 0, to: this.getCurrentEditorContent().length, insert: this.placeholder },
-			});
-		},
-		line(lineNumber: number): Line | null {
-			try {
-				return this.editor?.state.doc.line(lineNumber) ?? null;
-			} catch {
-				return null;
-			}
-		},
-		highlightLine(lineNumber: number | 'final') {
-			if (!this.editor) return;
-
-			if (lineNumber === 'final') {
-				this.editor.dispatch({
-					selection: { anchor: (this.modelValue ?? this.getCurrentEditorContent()).length },
-				});
-				return;
-			}
-
-			const line = this.line(lineNumber);
-
-			if (!line) return;
-
-			this.editor.dispatch({
-				selection: { anchor: line.from },
-			});
-		},
-		trackCompletion(viewUpdate: ViewUpdate) {
-			const completionTx = viewUpdate.transactions.find((tx) => tx.isUserEvent('input.complete'));
-
-			if (!completionTx) return;
-
-			try {
-				// @ts-ignore - undocumented fields
-				const { fromA, toB } = viewUpdate?.changedRanges[0];
-				const full = this.getCurrentEditorContent().slice(fromA, toB);
-				const lastDotIndex = full.lastIndexOf('.');
-
-				let context = null;
-				let insertedText = null;
-
-				if (lastDotIndex === -1) {
-					context = '';
-					insertedText = full;
-				} else {
-					context = full.slice(0, lastDotIndex);
-					insertedText = full.slice(lastDotIndex + 1);
-				}
-
-				// TODO: Still has to get updated for Python and JSON
-				this.$telemetry.track('User autocompleted code', {
-					instance_id: this.rootStore.instanceId,
-					node_type: CODE_NODE_TYPE,
-					field_name: this.mode === 'runOnceForAllItems' ? 'jsCodeAllItems' : 'jsCodeEachItem',
-					field_type: 'code',
-					context,
-					inserted_text: insertedText,
-				});
-			} catch {}
-		},
-	},
+const props = withDefaults(defineProps<Props>(), {
+	aiButtonEnabled: false,
+	fillParent: false,
+	language: 'javaScript',
+	isReadOnly: false,
+	rows: 4,
 });
+const emit = defineEmits<{
+	(event: 'update:modelValue', value: string): void;
+}>();
+
+const message = useMessage();
+const editor = ref(null) as Ref<EditorView | null>;
+const languageCompartment = ref(new Compartment());
+const linterCompartment = ref(new Compartment());
+const isEditorHovered = ref(false);
+const isEditorFocused = ref(false);
+const tabs = ref(['code', 'ask-ai']);
+const activeTab = ref('code');
+const hasChanges = ref(false);
+const isLoadingAIResponse = ref(false);
+const codeNodeEditorRef = ref<HTMLDivElement>();
+const codeNodeEditorContainerRef = ref<HTMLDivElement>();
+
+const { autocompletionExtension } = useCompleter(() => props.mode, editor);
+const { createLinter } = useLinter(() => props.mode, editor);
+
+const rootStore = useRootStore();
+const settingsStore = useSettingsStore();
+const posthog = usePostHog();
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+onMounted(() => {
+	if (!props.isReadOnly) codeNodeEditorEventBus.on('error-line-number', highlightLine);
+
+	const { isReadOnly, language } = props;
+	const extensions: Extension[] = [
+		...readOnlyEditorExtensions,
+		EditorState.readOnly.of(isReadOnly),
+		EditorView.editable.of(!isReadOnly),
+		codeNodeEditorTheme({
+			isReadOnly,
+			maxHeight: props.fillParent ? '100%' : '40vh',
+			minHeight: '20vh',
+			rows: props.rows,
+		}),
+	];
+
+	if (!isReadOnly) {
+		const linter = createLinter(language);
+		if (linter) {
+			extensions.push(linterCompartment.value.of(linter));
+		}
+
+		extensions.push(
+			...writableEditorExtensions,
+			EditorView.domEventHandlers({
+				focus: () => {
+					isEditorFocused.value = true;
+				},
+				blur: () => {
+					isEditorFocused.value = false;
+				},
+			}),
+
+			EditorView.updateListener.of((viewUpdate) => {
+				if (!viewUpdate.docChanged) return;
+
+				trackCompletion(viewUpdate);
+
+				const value = editor.value?.state.doc.toString();
+				if (value) {
+					emit('update:modelValue', value);
+				}
+				hasChanges.value = true;
+			}),
+		);
+	}
+
+	const [languageSupport, ...otherExtensions] = languageExtensions.value;
+	extensions.push(languageCompartment.value.of(languageSupport), ...otherExtensions);
+
+	const state = EditorState.create({
+		doc: props.modelValue ?? placeholder.value,
+		extensions,
+	});
+
+	editor.value = new EditorView({
+		parent: codeNodeEditorRef.value,
+		state,
+	});
+
+	// empty on first load, default param value
+	if (!props.modelValue) {
+		refreshPlaceholder();
+		emit('update:modelValue', placeholder.value);
+	}
+});
+
+onBeforeUnmount(() => {
+	if (!props.isReadOnly) codeNodeEditorEventBus.off('error-line-number', highlightLine);
+});
+
+const aiEnabled = computed(() => {
+	const isAiExperimentEnabled = [ASK_AI_EXPERIMENT.gpt3, ASK_AI_EXPERIMENT.gpt4].includes(
+		(posthog.getVariant(ASK_AI_EXPERIMENT.name) ?? '') as string,
+	);
+
+	return (
+		isAiExperimentEnabled && settingsStore.settings.ai.enabled && props.language === 'javaScript'
+	);
+});
+
+const placeholder = computed(() => {
+	return CODE_PLACEHOLDERS[props.language]?.[props.mode] ?? '';
+});
+
+// eslint-disable-next-line vue/return-in-computed-property
+const languageExtensions = computed<[LanguageSupport, ...Extension[]]>(() => {
+	switch (props.language) {
+		case 'javaScript':
+			return [javascript(), autocompletionExtension('javaScript')];
+		case 'python':
+			return [python(), autocompletionExtension('python')];
+	}
+});
+
+watch(
+	() => props.mode,
+	(_newMode, previousMode: CodeExecutionMode) => {
+		reloadLinter();
+
+		if (getCurrentEditorContent().trim() === CODE_PLACEHOLDERS[props.language]?.[previousMode]) {
+			refreshPlaceholder();
+		}
+	},
+);
+
+watch(
+	() => props.language,
+	(_newLanguage, previousLanguage: CodeNodeEditorLanguage) => {
+		if (getCurrentEditorContent().trim() === CODE_PLACEHOLDERS[previousLanguage]?.[props.mode]) {
+			refreshPlaceholder();
+		}
+
+		const [languageSupport] = languageExtensions.value;
+		editor.value?.dispatch({
+			effects: languageCompartment.value.reconfigure(languageSupport),
+		});
+		reloadLinter();
+	},
+);
+
+watch(
+	aiEnabled,
+	async (isEnabled) => {
+		if (isEnabled && !props.modelValue) {
+			emit('update:modelValue', placeholder.value);
+		}
+		await nextTick();
+		hasChanges.value = props.modelValue !== placeholder.value;
+	},
+	{ immediate: true },
+);
+
+function getCurrentEditorContent() {
+	return editor.value?.state.doc.toString() ?? '';
+}
+
+async function onBeforeTabLeave(_activeName: string, oldActiveName: string) {
+	// Confirm dialog if leaving ask-ai tab during loading
+	if (oldActiveName === 'ask-ai' && isLoadingAIResponse.value) {
+		const confirmModal = await message.alert(i18n.baseText('codeNodeEditor.askAi.sureLeaveTab'), {
+			title: i18n.baseText('codeNodeEditor.askAi.areYouSure'),
+			confirmButtonText: i18n.baseText('codeNodeEditor.askAi.switchTab'),
+			showClose: true,
+			showCancelButton: true,
+		});
+
+		if (confirmModal === 'confirm') {
+			return true;
+		}
+
+		return false;
+	}
+
+	return true;
+}
+
+async function onReplaceCode(code: string) {
+	const formattedCode = await format(code, {
+		parser: 'babel',
+		plugins: [jsParser, estree],
+	});
+
+	editor.value?.dispatch({
+		changes: { from: 0, to: getCurrentEditorContent().length, insert: formattedCode },
+	});
+
+	activeTab.value = 'code';
+	hasChanges.value = false;
+}
+
+function onMouseOver(event: MouseEvent) {
+	const fromElement = event.relatedTarget as HTMLElement;
+	const containerRef = codeNodeEditorContainerRef.value;
+
+	if (!containerRef?.contains(fromElement)) isEditorHovered.value = true;
+}
+
+function onMouseOut(event: MouseEvent) {
+	const fromElement = event.relatedTarget as HTMLElement;
+	const containerRef = codeNodeEditorContainerRef.value;
+
+	if (!containerRef?.contains(fromElement)) isEditorHovered.value = false;
+}
+
+function reloadLinter() {
+	if (!editor.value) return;
+
+	const linter = createLinter(props.language);
+	if (linter) {
+		editor.value.dispatch({
+			effects: linterCompartment.value.reconfigure(linter),
+		});
+	}
+}
+
+function refreshPlaceholder() {
+	if (!editor.value) return;
+
+	editor.value.dispatch({
+		changes: { from: 0, to: getCurrentEditorContent().length, insert: placeholder.value },
+	});
+}
+
+function getLine(lineNumber: number): Line | null {
+	try {
+		return editor.value?.state.doc.line(lineNumber) ?? null;
+	} catch {
+		return null;
+	}
+}
+
+function highlightLine(lineNumber: number | 'final') {
+	if (!editor.value) return;
+
+	if (lineNumber === 'final') {
+		editor.value.dispatch({
+			selection: { anchor: (props.modelValue ?? getCurrentEditorContent()).length },
+		});
+		return;
+	}
+
+	const line = getLine(lineNumber);
+
+	if (!line) return;
+
+	editor.value.dispatch({
+		selection: { anchor: line.from },
+	});
+}
+
+function trackCompletion(viewUpdate: ViewUpdate) {
+	const completionTx = viewUpdate.transactions.find((tx) => tx.isUserEvent('input.complete'));
+
+	if (!completionTx) return;
+
+	try {
+		// @ts-expect-error - undocumented fields
+		const { fromA, toB } = viewUpdate?.changedRanges[0];
+		const full = getCurrentEditorContent().slice(fromA, toB);
+		const lastDotIndex = full.lastIndexOf('.');
+
+		let context = null;
+		let insertedText = null;
+
+		if (lastDotIndex === -1) {
+			context = '';
+			insertedText = full;
+		} else {
+			context = full.slice(0, lastDotIndex);
+			insertedText = full.slice(lastDotIndex + 1);
+		}
+
+		// TODO: Still has to get updated for Python and JSON
+		telemetry.track('User autocompleted code', {
+			instance_id: rootStore.instanceId,
+			node_type: CODE_NODE_TYPE,
+			field_name: props.mode === 'runOnceForAllItems' ? 'jsCodeAllItems' : 'jsCodeEachItem',
+			field_type: 'code',
+			context,
+			inserted_text: insertedText,
+		});
+	} catch {}
+}
+
+function onAiLoadStart() {
+	isLoadingAIResponse.value = true;
+}
+
+function onAiLoadEnd() {
+	isLoadingAIResponse.value = false;
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/completer.ts b/packages/editor-ui/src/components/CodeNodeEditor/completer.ts
index 05e85f4cb9..7e5a96b13c 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/completer.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/completer.ts
@@ -1,15 +1,15 @@
-import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
+import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import { autocompletion } from '@codemirror/autocomplete';
 import { localCompletionSource } from '@codemirror/lang-javascript';
-import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import type { Extension } from '@codemirror/state';
+import type { MaybeRefOrGetter } from 'vue';
+import { toValue } from 'vue';
 
 import { useBaseCompletions } from './completions/base.completions';
 import { jsSnippets } from './completions/js.snippets';
 
+import type { EditorView } from '@codemirror/view';
 import type { CodeExecutionMode } from 'n8n-workflow';
-import { CODE_EXECUTION_MODES } from 'n8n-workflow';
 import { useExecutionCompletions } from './completions/execution.completions';
 import { useItemFieldCompletions } from './completions/itemField.completions';
 import { useItemIndexCompletions } from './completions/itemIndex.completions';
@@ -19,292 +19,283 @@ import { usePrevNodeCompletions } from './completions/prevNode.completions';
 import { useRequireCompletions } from './completions/require.completions';
 import { useVariablesCompletions } from './completions/variables.completions';
 import { useWorkflowCompletions } from './completions/workflow.completions';
-import type { EditorView } from '@codemirror/view';
 
-export const completerExtension = defineComponent({
-	props: {
-		mode: {
-			type: String as PropType<CodeExecutionMode>,
-			validator: (value: CodeExecutionMode): boolean => CODE_EXECUTION_MODES.includes(value),
-			required: true,
-		},
-	},
-	data() {
-		return {
-			editor: null as EditorView | null,
-		};
-	},
-	methods: {
-		autocompletionExtension(language: 'javaScript' | 'python'): Extension {
-			// Base completions
-			const { baseCompletions, itemCompletions, nodeSelectorCompletions } = useBaseCompletions(
-				this.mode,
-				language,
-			);
-			const { executionCompletions } = useExecutionCompletions();
-			const { inputMethodCompletions, selectorMethodCompletions } =
-				useItemFieldCompletions(language);
-			const { inputCompletions, selectorCompletions } = useItemIndexCompletions(this.mode);
-			const { inputJsonFieldCompletions, selectorJsonFieldCompletions } = useJsonFieldCompletions();
-			const { dateTimeCompletions, nowCompletions, todayCompletions } = useLuxonCompletions();
-			const { prevNodeCompletions } = usePrevNodeCompletions();
-			const { requireCompletions } = useRequireCompletions();
-			const { variablesCompletions } = useVariablesCompletions();
-			const { workflowCompletions } = useWorkflowCompletions();
+export const useCompleter = (
+	mode: MaybeRefOrGetter<CodeExecutionMode>,
+	editor: MaybeRefOrGetter<EditorView | null>,
+) => {
+	function autocompletionExtension(language: 'javaScript' | 'python'): Extension {
+		// Base completions
+		const { baseCompletions, itemCompletions, nodeSelectorCompletions } = useBaseCompletions(
+			toValue(mode),
+			language,
+		);
+		const { executionCompletions } = useExecutionCompletions();
+		const { inputMethodCompletions, selectorMethodCompletions } = useItemFieldCompletions(language);
+		const { inputCompletions, selectorCompletions } = useItemIndexCompletions(mode);
+		const { inputJsonFieldCompletions, selectorJsonFieldCompletions } = useJsonFieldCompletions();
+		const { dateTimeCompletions, nowCompletions, todayCompletions } = useLuxonCompletions();
+		const { prevNodeCompletions } = usePrevNodeCompletions();
+		const { requireCompletions } = useRequireCompletions();
+		const { variablesCompletions } = useVariablesCompletions();
+		const { workflowCompletions } = useWorkflowCompletions();
 
-			const completions = [];
-			if (language === 'javaScript') {
-				completions.push(jsSnippets, localCompletionSource);
-			}
+		const completions = [];
+		if (language === 'javaScript') {
+			completions.push(jsSnippets, localCompletionSource);
+		}
 
-			return autocompletion({
-				icons: false,
-				compareCompletions: (a: Completion, b: Completion) => {
-					if (/\.json$|id$|id['"]\]$/.test(a.label)) return 0;
+		return autocompletion({
+			icons: false,
+			compareCompletions: (a: Completion, b: Completion) => {
+				if (/\.json$|id$|id['"]\]$/.test(a.label)) return 0;
 
-					return a.label.localeCompare(b.label);
-				},
-				override: [
-					...completions,
+				return a.label.localeCompare(b.label);
+			},
+			override: [
+				...completions,
 
-					// core
-					itemCompletions,
-					baseCompletions,
-					requireCompletions,
-					nodeSelectorCompletions,
-					prevNodeCompletions,
-					workflowCompletions,
-					variablesCompletions,
-					executionCompletions,
-
-					// luxon
-					todayCompletions,
-					nowCompletions,
-					dateTimeCompletions,
-
-					// item index
-					inputCompletions,
-					selectorCompletions,
-
-					// item field
-					inputMethodCompletions,
-					selectorMethodCompletions,
-
-					// item json field
-					inputJsonFieldCompletions,
-					selectorJsonFieldCompletions,
-
-					// multiline
-					this.multilineCompletions,
-				],
-			});
-		},
-
-		/**
-		 * Complete uses of variables to any of the supported completions.
-		 */
-		multilineCompletions(context: CompletionContext): CompletionResult | null {
-			if (!this.editor) return null;
-
-			let variablesToValues: Record<string, string> = {};
-
-			try {
-				variablesToValues = this.variablesToValues();
-			} catch {
-				return null;
-			}
-
-			if (Object.keys(variablesToValues).length === 0) return null;
-
-			/**
-			 * Complete uses of extended variables, i.e. variables having
-			 * one or more dotted segments already.
-			 *
-			 * const x = $input;
-			 * x.first(). -> .json
-			 * x.first().json. -> .field
-			 */
-
-			const docLines = this.editor.state.doc.toString().split('\n');
-
-			const varNames = Object.keys(variablesToValues);
-
-			const uses = this.extendedUses(docLines, varNames);
-			const { matcherItemFieldCompletions } = useItemFieldCompletions('javaScript');
-			for (const use of uses.itemField) {
-				const matcher = use.replace(/\.$/, '');
-				const completions = matcherItemFieldCompletions(context, matcher, variablesToValues);
-
-				if (completions) return completions;
-			}
-
-			for (const use of uses.jsonField) {
-				const matcher = use.replace(/(\.|\[)$/, '');
-				const completions = matcherItemFieldCompletions(context, matcher, variablesToValues);
-
-				if (completions) return completions;
-			}
-
-			/**
-			 * Complete uses of unextended variables, i.e. variables having
-			 * no dotted segment already.
-			 *
-			 * const x = $input;
-			 * x. -> .first()
-			 *
-			 * const x = $input.first();
-			 * x. -> .json
-			 *
-			 * const x = $input.first().json;
-			 * x. -> .field
-			 */
-
-			const SELECTOR_REGEX = /^\$\((?<quotedNodeName>['"][\w\s]+['"])\)$/; // $('nodeName')
-
-			const INPUT_METHOD_REGEXES = Object.values({
-				first: /\$input\.first\(\)$/,
-				last: /\$input\.last\(\)$/,
-				item: /\$input\.item$/,
-				all: /\$input\.all\(\)\[(?<index>\w+)\]$/,
-			});
-
-			const SELECTOR_METHOD_REGEXES = Object.values({
-				first: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.first\(\)$/,
-				last: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.last\(\)$/,
-				item: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.item$/,
-				all: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.all\(\)\[(?<index>\w+)\]$/,
-			});
-
-			const INPUT_JSON_REGEXES = Object.values({
-				first: /\$input\.first\(\)\.json$/,
-				last: /\$input\.last\(\)\.json$/,
-				item: /\$input\.item\.json$/,
-				all: /\$input\.all\(\)\[(?<index>\w+)\]\.json$/,
-			});
-
-			const SELECTOR_JSON_REGEXES = Object.values({
-				first: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.first\(\)\.json$/,
-				last: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.last\(\)\.json$/,
-				item: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.item\.json$/,
-				all: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.all\(\)\[(?<index>\w+)\]\.json$/,
-			});
-
-			const { executionCompletions } = useExecutionCompletions();
-			const { inputCompletions, selectorCompletions } = useItemIndexCompletions(this.mode);
-			const { matcherJsonFieldCompletions } = useJsonFieldCompletions();
-			const { dateTimeCompletions, nowCompletions, todayCompletions } = useLuxonCompletions();
-			const { variablesCompletions } = useVariablesCompletions();
-			const { workflowCompletions } = useWorkflowCompletions();
-
-			for (const [variable, value] of Object.entries(variablesToValues)) {
-				const { prevNodeCompletions } = usePrevNodeCompletions(variable);
-
-				if (value === '$execution') return executionCompletions(context, variable);
-				if (value === '$vars') return variablesCompletions(context, variable);
-
-				if (value === '$workflow') return workflowCompletions(context, variable);
-				if (value === '$prevNode') return prevNodeCompletions(context);
+				// core
+				itemCompletions,
+				baseCompletions,
+				requireCompletions,
+				nodeSelectorCompletions,
+				prevNodeCompletions,
+				workflowCompletions,
+				variablesCompletions,
+				executionCompletions,
 
 				// luxon
-
-				if (value === '$now') return nowCompletions(context, variable);
-				if (value === '$today') return todayCompletions(context, variable);
-				if (value === 'DateTime') return dateTimeCompletions(context, variable);
+				todayCompletions,
+				nowCompletions,
+				dateTimeCompletions,
 
 				// item index
-
-				if (value === '$input') return inputCompletions(context, variable);
-				if (SELECTOR_REGEX.test(value)) return selectorCompletions(context, variable);
-
-				// json field
-
-				const inputJsonMatched = INPUT_JSON_REGEXES.some((regex) => regex.test(value));
-				const selectorJsonMatched = SELECTOR_JSON_REGEXES.some((regex) => regex.test(value));
-
-				if (inputJsonMatched || selectorJsonMatched) {
-					return matcherJsonFieldCompletions(context, variable, variablesToValues);
-				}
+				inputCompletions,
+				selectorCompletions,
 
 				// item field
+				inputMethodCompletions,
+				selectorMethodCompletions,
 
-				const inputMethodMatched = INPUT_METHOD_REGEXES.some((regex) => regex.test(value));
-				const selectorMethodMatched = SELECTOR_METHOD_REGEXES.some((regex) => regex.test(value));
+				// item json field
+				inputJsonFieldCompletions,
+				selectorJsonFieldCompletions,
 
-				if (inputMethodMatched || selectorMethodMatched) {
-					return matcherItemFieldCompletions(context, variable, variablesToValues);
-				}
+				// multiline
+				multilineCompletions,
+			],
+		});
+	}
+
+	/**
+	 * Complete uses of variables to any of the supported completions.
+	 */
+	function multilineCompletions(context: CompletionContext): CompletionResult | null {
+		const editorValue = toValue(editor);
+		if (!editorValue) return null;
+
+		let variablesToValueMap: Record<string, string> = {};
+
+		try {
+			variablesToValueMap = variablesToValues();
+		} catch {
+			return null;
+		}
+
+		if (Object.keys(variablesToValueMap).length === 0) return null;
+
+		/**
+		 * Complete uses of extended variables, i.e. variables having
+		 * one or more dotted segments already.
+		 *
+		 * const x = $input;
+		 * x.first(). -> .json
+		 * x.first().json. -> .field
+		 */
+
+		const docLines = editorValue.state.doc.toString().split('\n');
+
+		const varNames = Object.keys(variablesToValueMap);
+
+		const uses = extendedUses(docLines, varNames);
+		const { matcherItemFieldCompletions } = useItemFieldCompletions('javaScript');
+		for (const use of uses.itemField) {
+			const matcher = use.replace(/\.$/, '');
+			const completions = matcherItemFieldCompletions(context, matcher, variablesToValueMap);
+
+			if (completions) return completions;
+		}
+
+		for (const use of uses.jsonField) {
+			const matcher = use.replace(/(\.|\[)$/, '');
+			const completions = matcherItemFieldCompletions(context, matcher, variablesToValueMap);
+
+			if (completions) return completions;
+		}
+
+		/**
+		 * Complete uses of unextended variables, i.e. variables having
+		 * no dotted segment already.
+		 *
+		 * const x = $input;
+		 * x. -> .first()
+		 *
+		 * const x = $input.first();
+		 * x. -> .json
+		 *
+		 * const x = $input.first().json;
+		 * x. -> .field
+		 */
+
+		const SELECTOR_REGEX = /^\$\((?<quotedNodeName>['"][\w\s]+['"])\)$/; // $('nodeName')
+
+		const INPUT_METHOD_REGEXES = Object.values({
+			first: /\$input\.first\(\)$/,
+			last: /\$input\.last\(\)$/,
+			item: /\$input\.item$/,
+			all: /\$input\.all\(\)\[(?<index>\w+)\]$/,
+		});
+
+		const SELECTOR_METHOD_REGEXES = Object.values({
+			first: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.first\(\)$/,
+			last: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.last\(\)$/,
+			item: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.item$/,
+			all: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.all\(\)\[(?<index>\w+)\]$/,
+		});
+
+		const INPUT_JSON_REGEXES = Object.values({
+			first: /\$input\.first\(\)\.json$/,
+			last: /\$input\.last\(\)\.json$/,
+			item: /\$input\.item\.json$/,
+			all: /\$input\.all\(\)\[(?<index>\w+)\]\.json$/,
+		});
+
+		const SELECTOR_JSON_REGEXES = Object.values({
+			first: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.first\(\)\.json$/,
+			last: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.last\(\)\.json$/,
+			item: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.item\.json$/,
+			all: /\$\((?<quotedNodeName>['"][\w\s]+['"])\)\.all\(\)\[(?<index>\w+)\]\.json$/,
+		});
+
+		const { executionCompletions } = useExecutionCompletions();
+		const { inputCompletions, selectorCompletions } = useItemIndexCompletions(mode);
+		const { matcherJsonFieldCompletions } = useJsonFieldCompletions();
+		const { dateTimeCompletions, nowCompletions, todayCompletions } = useLuxonCompletions();
+		const { variablesCompletions } = useVariablesCompletions();
+		const { workflowCompletions } = useWorkflowCompletions();
+
+		for (const [variable, value] of Object.entries(variablesToValueMap)) {
+			const { prevNodeCompletions } = usePrevNodeCompletions(variable);
+
+			if (value === '$execution') return executionCompletions(context, variable);
+			if (value === '$vars') return variablesCompletions(context, variable);
+
+			if (value === '$workflow') return workflowCompletions(context, variable);
+			if (value === '$prevNode') return prevNodeCompletions(context);
+
+			// luxon
+
+			if (value === '$now') return nowCompletions(context, variable);
+			if (value === '$today') return todayCompletions(context, variable);
+			if (value === 'DateTime') return dateTimeCompletions(context, variable);
+
+			// item index
+
+			if (value === '$input') return inputCompletions(context, variable);
+			if (SELECTOR_REGEX.test(value)) return selectorCompletions(context, variable);
+
+			// json field
+
+			const inputJsonMatched = INPUT_JSON_REGEXES.some((regex) => regex.test(value));
+			const selectorJsonMatched = SELECTOR_JSON_REGEXES.some((regex) => regex.test(value));
+
+			if (inputJsonMatched || selectorJsonMatched) {
+				return matcherJsonFieldCompletions(context, variable, variablesToValueMap);
 			}
 
-			return null;
-		},
+			// item field
 
-		// ----------------------------------
-		//            helpers
-		// ----------------------------------
+			const inputMethodMatched = INPUT_METHOD_REGEXES.some((regex) => regex.test(value));
+			const selectorMethodMatched = SELECTOR_METHOD_REGEXES.some((regex) => regex.test(value));
 
-		/**
-		 * Create a map of variables and the values they point to.
-		 */
-		variablesToValues() {
-			return this.variableDeclarationLines().reduce<Record<string, string>>((acc, line) => {
-				const [left, right] = line.split('=');
+			if (inputMethodMatched || selectorMethodMatched) {
+				return matcherItemFieldCompletions(context, variable, variablesToValueMap);
+			}
+		}
 
-				const varName = left.replace(/(var|let|const)/, '').trim();
-				const varValue = right.replace(/;/, '').trim();
+		return null;
+	}
 
-				acc[varName] = varValue;
+	// ----------------------------------
+	//            helpers
+	// ----------------------------------
+
+	/**
+	 * Create a map of variables and the values they point to.
+	 */
+	function variablesToValues() {
+		return variableDeclarationLines().reduce<Record<string, string>>((acc, line) => {
+			const [left, right] = line.split('=');
+
+			const varName = left.replace(/(var|let|const)/, '').trim();
+			const varValue = right.replace(/;/, '').trim();
+
+			acc[varName] = varValue;
+
+			return acc;
+		}, {});
+	}
+
+	function variableDeclarationLines() {
+		const editorValue = toValue(editor);
+		if (!editorValue) return [];
+
+		const docLines = editorValue.state.doc.toString().split('\n');
+
+		const isVariableDeclarationLine = (line: string) =>
+			['var', 'const', 'let'].some((varType) => line.startsWith(varType));
+
+		return docLines.filter(isVariableDeclarationLine);
+	}
+
+	/**
+	 * Collect uses of variables pointing to n8n syntax if they have been extended.
+	 *
+	 * x.first().
+	 * x.first().json.
+	 * x.json.
+	 */
+	function extendedUses(docLines: string[], varNames: string[]) {
+		return docLines.reduce<{ itemField: string[]; jsonField: string[] }>(
+			(acc, cur) => {
+				varNames.forEach((varName) => {
+					const accessorPattern = `(${varName}.first\\(\\)|${varName}.last\\(\\)|${varName}.item|${varName}.all\\(\\)\\[\\w+\\]).*`;
+
+					const methodMatch = cur.match(new RegExp(accessorPattern));
+
+					if (methodMatch) {
+						if (/json(\.|\[)$/.test(methodMatch[0])) {
+							acc.jsonField.push(methodMatch[0]);
+						} else {
+							acc.itemField.push(methodMatch[0]);
+						}
+					}
+
+					const jsonPattern = `^${varName}\\.json(\\.|\\[)$`;
+
+					const jsonMatch = cur.match(new RegExp(jsonPattern));
+
+					if (jsonMatch) {
+						acc.jsonField.push(jsonMatch[0]);
+					}
+				});
 
 				return acc;
-			}, {});
-		},
+			},
+			{ itemField: [], jsonField: [] },
+		);
+	}
 
-		variableDeclarationLines() {
-			if (!this.editor) return [];
-
-			const docLines = this.editor.state.doc.toString().split('\n');
-
-			const isVariableDeclarationLine = (line: string) =>
-				['var', 'const', 'let'].some((varType) => line.startsWith(varType));
-
-			return docLines.filter(isVariableDeclarationLine);
-		},
-
-		/**
-		 * Collect uses of variables pointing to n8n syntax if they have been extended.
-		 *
-		 * x.first().
-		 * x.first().json.
-		 * x.json.
-		 */
-		extendedUses(docLines: string[], varNames: string[]) {
-			return docLines.reduce<{ itemField: string[]; jsonField: string[] }>(
-				(acc, cur) => {
-					varNames.forEach((varName) => {
-						const accessorPattern = `(${varName}.first\\(\\)|${varName}.last\\(\\)|${varName}.item|${varName}.all\\(\\)\\[\\w+\\]).*`;
-
-						const methodMatch = cur.match(new RegExp(accessorPattern));
-
-						if (methodMatch) {
-							if (/json(\.|\[)$/.test(methodMatch[0])) {
-								acc.jsonField.push(methodMatch[0]);
-							} else {
-								acc.itemField.push(methodMatch[0]);
-							}
-						}
-
-						const jsonPattern = `^${varName}\\.json(\\.|\\[)$`;
-
-						const jsonMatch = cur.match(new RegExp(jsonPattern));
-
-						if (jsonMatch) {
-							acc.jsonField.push(jsonMatch[0]);
-						}
-					});
-
-					return acc;
-				},
-				{ itemField: [], jsonField: [] },
-			);
-		},
-	},
-});
+	return { autocompletionExtension };
+};
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/completions/itemIndex.completions.ts b/packages/editor-ui/src/components/CodeNodeEditor/completions/itemIndex.completions.ts
index f4e980cec0..8a82017a15 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/completions/itemIndex.completions.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/completions/itemIndex.completions.ts
@@ -1,8 +1,10 @@
-import { escape } from '../utils';
-import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import { useI18n } from '@/composables/useI18n';
+import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
+import type { CodeExecutionMode } from 'n8n-workflow';
+import { toValue, type MaybeRefOrGetter } from 'vue';
+import { escape } from '../utils';
 
-export function useItemIndexCompletions(mode: 'runOnceForEachItem' | 'runOnceForAllItems') {
+export function useItemIndexCompletions(mode: MaybeRefOrGetter<CodeExecutionMode>) {
 	const i18n = useI18n();
 	/**
 	 * - Complete `$input.` to `.first() .last() .all() .itemMatching()` in all-items mode.
@@ -20,7 +22,7 @@ export function useItemIndexCompletions(mode: 'runOnceForEachItem' | 'runOnceFor
 
 		const options: Completion[] = [];
 
-		if (mode === 'runOnceForAllItems') {
+		if (toValue(mode) === 'runOnceForAllItems') {
 			options.push(
 				{
 					label: `${matcher}.first()`,
@@ -45,7 +47,7 @@ export function useItemIndexCompletions(mode: 'runOnceForEachItem' | 'runOnceFor
 			);
 		}
 
-		if (mode === 'runOnceForEachItem') {
+		if (toValue(mode) === 'runOnceForEachItem') {
 			options.push({
 				label: `${matcher}.item`,
 				type: 'variable',
@@ -97,7 +99,7 @@ export function useItemIndexCompletions(mode: 'runOnceForEachItem' | 'runOnceFor
 			},
 		];
 
-		if (mode === 'runOnceForAllItems') {
+		if (toValue(mode) === 'runOnceForAllItems') {
 			options.push(
 				{
 					label: `${replacementBase}.first()`,
@@ -122,7 +124,7 @@ export function useItemIndexCompletions(mode: 'runOnceForEachItem' | 'runOnceFor
 			);
 		}
 
-		if (mode === 'runOnceForEachItem') {
+		if (toValue(mode) === 'runOnceForEachItem') {
 			options.push({
 				label: `${replacementBase}.item`,
 				type: 'variable',
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/linter.ts b/packages/editor-ui/src/components/CodeNodeEditor/linter.ts
index 2613abd68b..254cce2c41 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/linter.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/linter.ts
@@ -1,11 +1,12 @@
 import type { Diagnostic } from '@codemirror/lint';
-import { linter as createLinter } from '@codemirror/lint';
+import { linter } from '@codemirror/lint';
 import type { EditorView } from '@codemirror/view';
 import * as esprima from 'esprima-next';
 import type { Node } from 'estree';
 import type { CodeExecutionMode, CodeNodeEditorLanguage } from 'n8n-workflow';
-import { type PropType, defineComponent } from 'vue';
+import { toValue, type MaybeRefOrGetter } from 'vue';
 
+import { useI18n } from '@/composables/useI18n';
 import {
 	DEFAULT_LINTER_DELAY_IN_MS,
 	DEFAULT_LINTER_SEVERITY,
@@ -14,494 +15,437 @@ import {
 import type { RangeNode } from './types';
 import { walk } from './utils';
 
-export const linterExtension = defineComponent({
-	props: {
-		mode: {
-			type: String as PropType<CodeExecutionMode>,
-			required: true,
-		},
-		editor: { type: Object as PropType<EditorView | null>, default: null },
-	},
-	methods: {
-		createLinter(language: CodeNodeEditorLanguage) {
-			switch (language) {
-				case 'javaScript':
-					return createLinter(this.lintSource, { delay: DEFAULT_LINTER_DELAY_IN_MS });
-			}
-			return undefined;
-		},
+export const useLinter = (
+	mode: MaybeRefOrGetter<CodeExecutionMode>,
+	editor: MaybeRefOrGetter<EditorView | null>,
+) => {
+	const i18n = useI18n();
 
-		lintSource(editorView: EditorView): Diagnostic[] {
-			const doc = editorView.state.doc.toString();
-			const script = `module.exports = async function() {${doc}\n}()`;
+	function createLinter(language: CodeNodeEditorLanguage) {
+		switch (language) {
+			case 'javaScript':
+				return linter(lintSource, { delay: DEFAULT_LINTER_DELAY_IN_MS });
+		}
+		return undefined;
+	}
 
-			let ast: esprima.Program | null = null;
+	function lintSource(editorView: EditorView): Diagnostic[] {
+		const doc = editorView.state.doc.toString();
+		const script = `module.exports = async function() {${doc}\n}()`;
+
+		let ast: esprima.Program | null = null;
+
+		try {
+			ast = esprima.parseScript(script, { range: true });
+		} catch (syntaxError) {
+			let line;
 
 			try {
-				ast = esprima.parseScript(script, { range: true });
-			} catch (syntaxError) {
-				let line;
+				const lineAtError = editorView.state.doc.line(syntaxError.lineNumber - 1).text;
 
-				try {
-					const lineAtError = editorView.state.doc.line(syntaxError.lineNumber - 1).text;
-
-					// optional chaining operators currently unsupported by esprima-next
-					if (['?.', ']?'].some((operator) => lineAtError.includes(operator))) return [];
-				} catch {
-					return [];
-				}
-
-				try {
-					line = editorView.state.doc.line(syntaxError.lineNumber);
-
-					return [
-						{
-							from: line.from,
-							to: line.to,
-							severity: DEFAULT_LINTER_SEVERITY,
-							message: this.$locale.baseText('codeNodeEditor.linter.bothModes.syntaxError'),
-						},
-					];
-				} catch {
-					/**
-					 * For invalid (e.g. half-written) n8n syntax, esprima errors with an off-by-one line number for the final line. In future, we should add full linting for n8n syntax before parsing JS.
-					 */
-					return [];
-				}
+				// optional chaining operators currently unsupported by esprima-next
+				if (['?.', ']?'].some((operator) => lineAtError.includes(operator))) return [];
+			} catch {
+				return [];
 			}
 
-			if (ast === null) return [];
+			try {
+				line = editorView.state.doc.line(syntaxError.lineNumber);
 
-			const lintings: Diagnostic[] = [];
-
-			/**
-			 * Lint for incorrect `.item()` instead of `.item` in `runOnceForEachItem` mode
-			 *
-			 * $input.item() -> $input.item
-			 */
-
-			if (this.mode === 'runOnceForEachItem') {
-				const isItemCall = (node: Node) =>
-					node.type === 'CallExpression' &&
-					node.callee.type === 'MemberExpression' &&
-					node.callee.property.type === 'Identifier' &&
-					node.callee.property.name === 'item';
-
-				walk(ast, isItemCall).forEach((node) => {
-					const [start, end] = this.getRange(node);
-
-					lintings.push({
-						from: start,
-						to: end,
+				return [
+					{
+						from: line.from,
+						to: line.to,
 						severity: DEFAULT_LINTER_SEVERITY,
-						message: this.$locale.baseText('codeNodeEditor.linter.allItems.itemCall'),
-						actions: [
-							{
-								name: 'Fix',
-								apply(view, _, to) {
-									view.dispatch({ changes: { from: end - '()'.length, to } });
-								},
-							},
-						],
-					});
-				});
+						message: i18n.baseText('codeNodeEditor.linter.bothModes.syntaxError'),
+					},
+				];
+			} catch {
+				/**
+				 * For invalid (e.g. half-written) n8n syntax, esprima errors with an off-by-one line number for the final line. In future, we should add full linting for n8n syntax before parsing JS.
+				 */
+				return [];
 			}
+		}
 
-			/**
-			 * Lint for `$json`, `$binary` and `$itemIndex` unavailable in `runOnceForAllItems` mode
-			 *
-			 * $json -> <removed>
-			 */
+		if (ast === null) return [];
 
-			if (this.mode === 'runOnceForAllItems') {
-				const isUnavailableVarInAllItems = (node: Node) =>
-					node.type === 'Identifier' && ['$json', '$binary', '$itemIndex'].includes(node.name);
+		const lintings: Diagnostic[] = [];
 
-				walk(ast, isUnavailableVarInAllItems).forEach((node) => {
-					const [start, end] = this.getRange(node);
+		/**
+		 * Lint for incorrect `.item()` instead of `.item` in `runOnceForEachItem` mode
+		 *
+		 * $input.item() -> $input.item
+		 */
 
-					const varName = this.getText(node);
+		if (toValue(mode) === 'runOnceForEachItem') {
+			const isItemCall = (node: Node) =>
+				node.type === 'CallExpression' &&
+				node.callee.type === 'MemberExpression' &&
+				node.callee.property.type === 'Identifier' &&
+				node.callee.property.name === 'item';
 
-					if (!varName) return;
-
-					const message = [
-						`\`${varName}\``,
-						this.$locale.baseText('codeNodeEditor.linter.allItems.unavailableVar'),
-					].join(' ');
-
-					lintings.push({
-						from: start,
-						to: end,
-						severity: DEFAULT_LINTER_SEVERITY,
-						message,
-						actions: [
-							{
-								name: 'Remove',
-								apply(view, from, to) {
-									view.dispatch({ changes: { from, to } });
-								},
-							},
-						],
-					});
-				});
-			}
-
-			/**
-			 * Lint for `.item` unavailable in `$input` in `runOnceForAllItems` mode
-			 *
-			 * $input.item -> <removed>
-			 */
-
-			if (this.mode === 'runOnceForAllItems') {
-				type TargetNode = RangeNode & { property: RangeNode };
-
-				const isUnavailableInputItemAccess = (node: Node) =>
-					node.type === 'MemberExpression' &&
-					!node.computed &&
-					node.object.type === 'Identifier' &&
-					node.object.name === '$input' &&
-					node.property.type === 'Identifier' &&
-					node.property.name === 'item';
-
-				walk<TargetNode>(ast, isUnavailableInputItemAccess).forEach((node) => {
-					const [start, end] = this.getRange(node.property);
-
-					lintings.push({
-						from: start,
-						to: end,
-						severity: DEFAULT_LINTER_SEVERITY,
-						message: this.$locale.baseText('codeNodeEditor.linter.allItems.unavailableProperty'),
-						actions: [
-							{
-								name: 'Remove',
-								apply(view) {
-									view.dispatch({ changes: { from: start - '.'.length, to: end } });
-								},
-							},
-						],
-					});
-				});
-			}
-
-			/**
-			 * Lint for `items` (legacy var from Function node) unavailable
-			 * in `runOnceForEachItem` mode, unless user-defined `items`.
-			 *
-			 * items -> $input.item
-			 */
-			if (this.mode === 'runOnceForEachItem' && !/(let|const|var) items =/.test(script)) {
-				type TargetNode = RangeNode & { object: RangeNode & { name: string } };
-
-				const isUnavailableLegacyItems = (node: Node) =>
-					node.type === 'Identifier' && node.name === 'items';
-
-				walk<TargetNode>(ast, isUnavailableLegacyItems).forEach((node) => {
-					const [start, end] = this.getRange(node);
-
-					lintings.push({
-						from: start,
-						to: end,
-						severity: DEFAULT_LINTER_SEVERITY,
-						message: this.$locale.baseText('codeNodeEditor.linter.eachItem.unavailableItems'),
-						actions: [
-							{
-								name: 'Fix',
-								apply(view, from, to) {
-									// prevent second insertion of unknown origin
-									if (view.state.doc.toString().slice(from, to).includes('$input.item')) {
-										return;
-									}
-
-									view.dispatch({ changes: { from: start, to: end } });
-									view.dispatch({ changes: { from, insert: '$input.item' } });
-								},
-							},
-						],
-					});
-				});
-			}
-
-			/**
-			 * Lint for `.first()`, `.last()`, `.all()` and `.itemMatching()`
-			 * unavailable in `runOnceForEachItem` mode
-			 *
-			 * $input.first()
-			 * $input.last()
-			 * $input.all()
-			 * $input.itemMatching()
-			 */
-
-			if (this.mode === 'runOnceForEachItem') {
-				type TargetNode = RangeNode & { property: RangeNode & { name: string } };
-
-				const isUnavailableMethodinEachItem = (node: Node) =>
-					node.type === 'MemberExpression' &&
-					!node.computed &&
-					node.object.type === 'Identifier' &&
-					node.object.name === '$input' &&
-					node.property.type === 'Identifier' &&
-					['first', 'last', 'all', 'itemMatching'].includes(node.property.name);
-
-				walk<TargetNode>(ast, isUnavailableMethodinEachItem).forEach((node) => {
-					const [start, end] = this.getRange(node.property);
-
-					const method = this.getText(node.property);
-
-					if (!method) return;
-
-					lintings.push({
-						from: start,
-						to: end,
-						severity: DEFAULT_LINTER_SEVERITY,
-						message: this.$locale.baseText('codeNodeEditor.linter.eachItem.unavailableMethod', {
-							interpolate: { method },
-						}),
-					});
-				});
-			}
-
-			/**
-			 * Lint for `.itemMatching()` called with no argument in `runOnceForAllItems` mode
-			 *
-			 * $input.itemMatching()
-			 */
-
-			if (this.mode === 'runOnceForAllItems') {
-				type TargetNode = RangeNode & { callee: RangeNode & { property: RangeNode } };
-
-				const isItemMatchingCallWithoutArg = (node: Node) =>
-					node.type === 'CallExpression' &&
-					node.callee.type === 'MemberExpression' &&
-					node.callee.property.type === 'Identifier' &&
-					node.callee.property.name === 'itemMatching' &&
-					node.arguments.length === 0;
-
-				walk<TargetNode>(ast, isItemMatchingCallWithoutArg).forEach((node) => {
-					const [start, end] = this.getRange(node.callee.property);
-
-					lintings.push({
-						from: start,
-						to: end + '()'.length,
-						severity: DEFAULT_LINTER_SEVERITY,
-						message: this.$locale.baseText('codeNodeEditor.linter.allItems.itemMatchingNoArg'),
-					});
-				});
-			}
-
-			/**
-			 * Lint for `$input.first()` or `$input.last()` called with argument in `runOnceForAllItems` mode
-			 *
-			 * $input.first(arg) -> $input.first()
-			 * $input.last(arg) -> $input.last()
-			 */
-
-			if (this.mode === 'runOnceForAllItems') {
-				type TargetNode = RangeNode & {
-					callee: { property: { name: string } & RangeNode };
-				};
-
-				const inputFirstOrLastCalledWithArg = (node: Node) =>
-					node.type === 'CallExpression' &&
-					node.callee.type === 'MemberExpression' &&
-					!node.callee.computed &&
-					node.callee.object.type === 'Identifier' &&
-					node.callee.object.name === '$input' &&
-					node.callee.property.type === 'Identifier' &&
-					['first', 'last'].includes(node.callee.property.name) &&
-					node.arguments.length !== 0;
-
-				walk<TargetNode>(ast, inputFirstOrLastCalledWithArg).forEach((node) => {
-					const [start, end] = this.getRange(node.callee.property);
-
-					const message = [
-						`\`$input.${node.callee.property.name}()\``,
-						this.$locale.baseText('codeNodeEditor.linter.allItems.firstOrLastCalledWithArg'),
-					].join(' ');
-
-					lintings.push({
-						from: start,
-						to: end,
-						severity: DEFAULT_LINTER_SEVERITY,
-						message,
-					});
-				});
-			}
-
-			/**
-			 * Lint for empty (i.e. no value) return
-			 *
-			 * return -> <no autofix>
-			 */
-
-			const isEmptyReturn = (node: Node) =>
-				node.type === 'ReturnStatement' && node.argument === null;
-
-			const emptyReturnMessage =
-				this.mode === 'runOnceForAllItems'
-					? this.$locale.baseText('codeNodeEditor.linter.allItems.emptyReturn')
-					: this.$locale.baseText('codeNodeEditor.linter.eachItem.emptyReturn');
-
-			walk<RangeNode>(ast, isEmptyReturn).forEach((node) => {
-				const [start, end] = node.range.map((loc) => loc - OFFSET_FOR_SCRIPT_WRAPPER);
+			walk(ast, isItemCall).forEach((node) => {
+				const [start, end] = getRange(node);
 
 				lintings.push({
 					from: start,
 					to: end,
 					severity: DEFAULT_LINTER_SEVERITY,
-					message: emptyReturnMessage,
+					message: i18n.baseText('codeNodeEditor.linter.allItems.itemCall'),
+					actions: [
+						{
+							name: 'Fix',
+							apply(view, _, to) {
+								view.dispatch({ changes: { from: end - '()'.length, to } });
+							},
+						},
+					],
 				});
 			});
+		}
 
-			/**
-			 * Lint for array return in `runOnceForEachItem` mode
-			 *
-			 * return [] -> <no autofix>
-			 */
+		/**
+		 * Lint for `$json`, `$binary` and `$itemIndex` unavailable in `runOnceForAllItems` mode
+		 *
+		 * $json -> <removed>
+		 */
 
-			if (this.mode === 'runOnceForEachItem') {
-				const isArrayReturn = (node: Node) =>
-					node.type === 'ReturnStatement' &&
-					node.argument !== null &&
-					node.argument !== undefined &&
-					node.argument.type === 'ArrayExpression';
+		if (toValue(mode) === 'runOnceForAllItems') {
+			const isUnavailableVarInAllItems = (node: Node) =>
+				node.type === 'Identifier' && ['$json', '$binary', '$itemIndex'].includes(node.name);
 
-				walk<RangeNode>(ast, isArrayReturn).forEach((node) => {
-					const [start, end] = this.getRange(node);
+			walk(ast, isUnavailableVarInAllItems).forEach((node) => {
+				const [start, end] = getRange(node);
 
-					lintings.push({
-						from: start,
-						to: end,
-						severity: DEFAULT_LINTER_SEVERITY,
-						message: this.$locale.baseText('codeNodeEditor.linter.eachItem.returnArray'),
-					});
+				const varName = getText(node);
+
+				if (!varName) return;
+
+				const message = [
+					`\`${varName}\``,
+					i18n.baseText('codeNodeEditor.linter.allItems.unavailableVar'),
+				].join(' ');
+
+				lintings.push({
+					from: start,
+					to: end,
+					severity: DEFAULT_LINTER_SEVERITY,
+					message,
+					actions: [
+						{
+							name: 'Remove',
+							apply(view, from, to) {
+								view.dispatch({ changes: { from, to } });
+							},
+						},
+					],
 				});
-			}
+			});
+		}
 
-			/**
-			 * Lint for direct access to item property (i.e. not using `json`)
-			 * in `runOnceForAllItems` mode
-			 *
-			 * item.myField = 123 -> item.json.myField = 123;
-			 * const a = item.myField -> const a = item.json.myField;
-			 */
+		/**
+		 * Lint for `.item` unavailable in `$input` in `runOnceForAllItems` mode
+		 *
+		 * $input.item -> <removed>
+		 */
 
-			if (this.mode === 'runOnceForAllItems') {
-				type TargetNode = RangeNode & {
-					left: { declarations: Array<{ id: { type: string; name: string } }> };
-				};
+		if (toValue(mode) === 'runOnceForAllItems') {
+			type TargetNode = RangeNode & { property: RangeNode };
 
-				const isForOfStatementOverN8nVar = (node: Node) =>
-					node.type === 'ForOfStatement' &&
-					node.left.type === 'VariableDeclaration' &&
-					node.left.declarations.length === 1 &&
-					node.left.declarations[0].type === 'VariableDeclarator' &&
-					node.left.declarations[0].id.type === 'Identifier' &&
-					node.right.type === 'CallExpression' &&
-					node.right.callee.type === 'MemberExpression' &&
-					!node.right.callee.computed &&
-					node.right.callee.object.type === 'Identifier' &&
-					node.right.callee.object.name.startsWith('$'); // n8n var, e.g $input
+			const isUnavailableInputItemAccess = (node: Node) =>
+				node.type === 'MemberExpression' &&
+				!node.computed &&
+				node.object.type === 'Identifier' &&
+				node.object.name === '$input' &&
+				node.property.type === 'Identifier' &&
+				node.property.name === 'item';
 
-				const found = walk<TargetNode>(ast, isForOfStatementOverN8nVar);
+			walk<TargetNode>(ast, isUnavailableInputItemAccess).forEach((node) => {
+				const [start, end] = getRange(node.property);
 
-				if (found.length === 1) {
-					const itemAlias = found[0].left.declarations[0].id.name;
+				lintings.push({
+					from: start,
+					to: end,
+					severity: DEFAULT_LINTER_SEVERITY,
+					message: i18n.baseText('codeNodeEditor.linter.allItems.unavailableProperty'),
+					actions: [
+						{
+							name: 'Remove',
+							apply(view) {
+								view.dispatch({ changes: { from: start - '.'.length, to: end } });
+							},
+						},
+					],
+				});
+			});
+		}
 
-					/**
-					 * for (const item of $input.all()) {
-					 * 	const item = {}; // shadow item
-					 * }
-					 */
-					const isShadowItemVar = (node: Node) =>
-						node.type === 'VariableDeclarator' &&
-						node.id.type === 'Identifier' &&
-						node.id.name === 'item' &&
-						node.init !== null;
+		/**
+		 * Lint for `items` (legacy var from Function node) unavailable
+		 * in `runOnceForEachItem` mode, unless user-defined `items`.
+		 *
+		 * items -> $input.item
+		 */
+		if (toValue(mode) === 'runOnceForEachItem' && !/(let|const|var) items =/.test(script)) {
+			type TargetNode = RangeNode & { object: RangeNode & { name: string } };
 
-					const shadowFound = walk(ast, isShadowItemVar);
+			const isUnavailableLegacyItems = (node: Node) =>
+				node.type === 'Identifier' && node.name === 'items';
 
-					let shadowStart: undefined | number;
+			walk<TargetNode>(ast, isUnavailableLegacyItems).forEach((node) => {
+				const [start, end] = getRange(node);
 
-					if (shadowFound.length > 0) {
-						const [shadow] = shadowFound;
-						const [_shadowStart] = this.getRange(shadow);
-						shadowStart = _shadowStart;
-					}
+				lintings.push({
+					from: start,
+					to: end,
+					severity: DEFAULT_LINTER_SEVERITY,
+					message: i18n.baseText('codeNodeEditor.linter.eachItem.unavailableItems'),
+					actions: [
+						{
+							name: 'Fix',
+							apply(view, from, to) {
+								// prevent second insertion of unknown origin
+								if (view.state.doc.toString().slice(from, to).includes('$input.item')) {
+									return;
+								}
 
-					const isDirectAccessToItem = (node: Node) =>
-						node.type === 'MemberExpression' &&
-						node.object.type === 'Identifier' &&
-						node.object.name === itemAlias &&
-						node.property.type === 'Identifier' &&
-						!['json', 'binary'].includes(node.property.name);
+								view.dispatch({ changes: { from: start, to: end } });
+								view.dispatch({ changes: { from, insert: '$input.item' } });
+							},
+						},
+					],
+				});
+			});
+		}
 
-					walk(ast, isDirectAccessToItem).forEach((node) => {
-						const [start, end] = this.getRange(node);
+		/**
+		 * Lint for `.first()`, `.last()`, `.all()` and `.itemMatching()`
+		 * unavailable in `runOnceForEachItem` mode
+		 *
+		 * $input.first()
+		 * $input.last()
+		 * $input.all()
+		 * $input.itemMatching()
+		 */
 
-						if (shadowStart && start > shadowStart) return; // skip shadow item
+		if (toValue(mode) === 'runOnceForEachItem') {
+			type TargetNode = RangeNode & { property: RangeNode & { name: string } };
 
-						const varName = this.getText(node);
+			const isUnavailableMethodinEachItem = (node: Node) =>
+				node.type === 'MemberExpression' &&
+				!node.computed &&
+				node.object.type === 'Identifier' &&
+				node.object.name === '$input' &&
+				node.property.type === 'Identifier' &&
+				['first', 'last', 'all', 'itemMatching'].includes(node.property.name);
 
-						if (!varName) return;
+			walk<TargetNode>(ast, isUnavailableMethodinEachItem).forEach((node) => {
+				const [start, end] = getRange(node.property);
 
-						lintings.push({
-							from: start,
-							to: end,
-							severity: DEFAULT_LINTER_SEVERITY,
-							message: this.$locale.baseText(
-								'codeNodeEditor.linter.bothModes.directAccess.itemProperty',
-							),
-							actions: [
-								{
-									name: 'Fix',
-									apply(view, from, to) {
-										// prevent second insertion of unknown origin
-										if (view.state.doc.toString().slice(from, to).includes('.json')) return;
+				const method = getText(node.property);
 
-										view.dispatch({ changes: { from: from + itemAlias.length, insert: '.json' } });
-									},
-								},
-							],
-						});
-					});
+				if (!method) return;
+
+				lintings.push({
+					from: start,
+					to: end,
+					severity: DEFAULT_LINTER_SEVERITY,
+					message: i18n.baseText('codeNodeEditor.linter.eachItem.unavailableMethod', {
+						interpolate: { method },
+					}),
+				});
+			});
+		}
+
+		/**
+		 * Lint for `.itemMatching()` called with no argument in `runOnceForAllItems` mode
+		 *
+		 * $input.itemMatching()
+		 */
+
+		if (toValue(mode) === 'runOnceForAllItems') {
+			type TargetNode = RangeNode & { callee: RangeNode & { property: RangeNode } };
+
+			const isItemMatchingCallWithoutArg = (node: Node) =>
+				node.type === 'CallExpression' &&
+				node.callee.type === 'MemberExpression' &&
+				node.callee.property.type === 'Identifier' &&
+				node.callee.property.name === 'itemMatching' &&
+				node.arguments.length === 0;
+
+			walk<TargetNode>(ast, isItemMatchingCallWithoutArg).forEach((node) => {
+				const [start, end] = getRange(node.callee.property);
+
+				lintings.push({
+					from: start,
+					to: end + '()'.length,
+					severity: DEFAULT_LINTER_SEVERITY,
+					message: i18n.baseText('codeNodeEditor.linter.allItems.itemMatchingNoArg'),
+				});
+			});
+		}
+
+		/**
+		 * Lint for `$input.first()` or `$input.last()` called with argument in `runOnceForAllItems` mode
+		 *
+		 * $input.first(arg) -> $input.first()
+		 * $input.last(arg) -> $input.last()
+		 */
+
+		if (toValue(mode) === 'runOnceForAllItems') {
+			type TargetNode = RangeNode & {
+				callee: { property: { name: string } & RangeNode };
+			};
+
+			const inputFirstOrLastCalledWithArg = (node: Node) =>
+				node.type === 'CallExpression' &&
+				node.callee.type === 'MemberExpression' &&
+				!node.callee.computed &&
+				node.callee.object.type === 'Identifier' &&
+				node.callee.object.name === '$input' &&
+				node.callee.property.type === 'Identifier' &&
+				['first', 'last'].includes(node.callee.property.name) &&
+				node.arguments.length !== 0;
+
+			walk<TargetNode>(ast, inputFirstOrLastCalledWithArg).forEach((node) => {
+				const [start, end] = getRange(node.callee.property);
+
+				const message = [
+					`\`$input.${node.callee.property.name}()\``,
+					i18n.baseText('codeNodeEditor.linter.allItems.firstOrLastCalledWithArg'),
+				].join(' ');
+
+				lintings.push({
+					from: start,
+					to: end,
+					severity: DEFAULT_LINTER_SEVERITY,
+					message,
+				});
+			});
+		}
+
+		/**
+		 * Lint for empty (i.e. no value) return
+		 *
+		 * return -> <no autofix>
+		 */
+
+		const isEmptyReturn = (node: Node) => node.type === 'ReturnStatement' && node.argument === null;
+
+		const emptyReturnMessage =
+			toValue(mode) === 'runOnceForAllItems'
+				? i18n.baseText('codeNodeEditor.linter.allItems.emptyReturn')
+				: i18n.baseText('codeNodeEditor.linter.eachItem.emptyReturn');
+
+		walk<RangeNode>(ast, isEmptyReturn).forEach((node) => {
+			const [start, end] = node.range.map((loc) => loc - OFFSET_FOR_SCRIPT_WRAPPER);
+
+			lintings.push({
+				from: start,
+				to: end,
+				severity: DEFAULT_LINTER_SEVERITY,
+				message: emptyReturnMessage,
+			});
+		});
+
+		/**
+		 * Lint for array return in `runOnceForEachItem` mode
+		 *
+		 * return [] -> <no autofix>
+		 */
+
+		if (toValue(mode) === 'runOnceForEachItem') {
+			const isArrayReturn = (node: Node) =>
+				node.type === 'ReturnStatement' &&
+				node.argument !== null &&
+				node.argument !== undefined &&
+				node.argument.type === 'ArrayExpression';
+
+			walk<RangeNode>(ast, isArrayReturn).forEach((node) => {
+				const [start, end] = getRange(node);
+
+				lintings.push({
+					from: start,
+					to: end,
+					severity: DEFAULT_LINTER_SEVERITY,
+					message: i18n.baseText('codeNodeEditor.linter.eachItem.returnArray'),
+				});
+			});
+		}
+
+		/**
+		 * Lint for direct access to item property (i.e. not using `json`)
+		 * in `runOnceForAllItems` mode
+		 *
+		 * item.myField = 123 -> item.json.myField = 123;
+		 * const a = item.myField -> const a = item.json.myField;
+		 */
+
+		if (toValue(mode) === 'runOnceForAllItems') {
+			type TargetNode = RangeNode & {
+				left: { declarations: Array<{ id: { type: string; name: string } }> };
+			};
+
+			const isForOfStatementOverN8nVar = (node: Node) =>
+				node.type === 'ForOfStatement' &&
+				node.left.type === 'VariableDeclaration' &&
+				node.left.declarations.length === 1 &&
+				node.left.declarations[0].type === 'VariableDeclarator' &&
+				node.left.declarations[0].id.type === 'Identifier' &&
+				node.right.type === 'CallExpression' &&
+				node.right.callee.type === 'MemberExpression' &&
+				!node.right.callee.computed &&
+				node.right.callee.object.type === 'Identifier' &&
+				node.right.callee.object.name.startsWith('$'); // n8n var, e.g $input
+
+			const found = walk<TargetNode>(ast, isForOfStatementOverN8nVar);
+
+			if (found.length === 1) {
+				const itemAlias = found[0].left.declarations[0].id.name;
+
+				/**
+				 * for (const item of $input.all()) {
+				 * 	const item = {}; // shadow item
+				 * }
+				 */
+				const isShadowItemVar = (node: Node) =>
+					node.type === 'VariableDeclarator' &&
+					node.id.type === 'Identifier' &&
+					node.id.name === 'item' &&
+					node.init !== null;
+
+				const shadowFound = walk(ast, isShadowItemVar);
+
+				let shadowStart: undefined | number;
+
+				if (shadowFound.length > 0) {
+					const [shadow] = shadowFound;
+					const [_shadowStart] = getRange(shadow);
+					shadowStart = _shadowStart;
 				}
-			}
 
-			/**
-			 * Lint for direct access to item property (i.e. not using `json`)
-			 * in `runOnceForEachItem` mode
-			 *
-			 * $input.item.myField = 123 -> $input.item.json.myField = 123;
-			 * const a = $input.item.myField -> const a = $input.item.json.myField;
-			 */
-
-			if (this.mode === 'runOnceForEachItem') {
-				type TargetNode = RangeNode & { object: { property: RangeNode } };
-
-				const isDirectAccessToItemSubproperty = (node: Node) =>
+				const isDirectAccessToItem = (node: Node) =>
 					node.type === 'MemberExpression' &&
-					node.object.type === 'MemberExpression' &&
-					node.object.property.type === 'Identifier' &&
-					node.object.property.name === 'item' &&
+					node.object.type === 'Identifier' &&
+					node.object.name === itemAlias &&
 					node.property.type === 'Identifier' &&
 					!['json', 'binary'].includes(node.property.name);
 
-				walk<TargetNode>(ast, isDirectAccessToItemSubproperty).forEach((node) => {
-					const varName = this.getText(node);
+				walk(ast, isDirectAccessToItem).forEach((node) => {
+					const [start, end] = getRange(node);
+
+					if (shadowStart && start > shadowStart) return; // skip shadow item
+
+					const varName = getText(node);
 
 					if (!varName) return;
 
-					const [start, end] = this.getRange(node);
-
-					const [_, fixEnd] = this.getRange(node.object.property);
-
 					lintings.push({
 						from: start,
 						to: end,
 						severity: DEFAULT_LINTER_SEVERITY,
-						message: this.$locale.baseText(
-							'codeNodeEditor.linter.bothModes.directAccess.itemProperty',
-						),
+						message: i18n.baseText('codeNodeEditor.linter.bothModes.directAccess.itemProperty'),
 						actions: [
 							{
 								name: 'Fix',
@@ -509,44 +453,48 @@ export const linterExtension = defineComponent({
 									// prevent second insertion of unknown origin
 									if (view.state.doc.toString().slice(from, to).includes('.json')) return;
 
-									view.dispatch({ changes: { from: fixEnd, insert: '.json' } });
+									view.dispatch({ changes: { from: from + itemAlias.length, insert: '.json' } });
 								},
 							},
 						],
 					});
 				});
 			}
+		}
 
-			/**
-			 * Lint for direct access to `first()` or `last()` output (i.e. not using `json`)
-			 *
-			 * $input.first().myField -> $input.first().json.myField
-			 */
+		/**
+		 * Lint for direct access to item property (i.e. not using `json`)
+		 * in `runOnceForEachItem` mode
+		 *
+		 * $input.item.myField = 123 -> $input.item.json.myField = 123;
+		 * const a = $input.item.myField -> const a = $input.item.json.myField;
+		 */
 
-			type TargetNode = RangeNode & { object: RangeNode };
+		if (toValue(mode) === 'runOnceForEachItem') {
+			type TargetNode = RangeNode & { object: { property: RangeNode } };
 
-			const isDirectAccessToFirstOrLastCall = (node: Node) =>
+			const isDirectAccessToItemSubproperty = (node: Node) =>
 				node.type === 'MemberExpression' &&
+				node.object.type === 'MemberExpression' &&
+				node.object.property.type === 'Identifier' &&
+				node.object.property.name === 'item' &&
 				node.property.type === 'Identifier' &&
-				!['json', 'binary'].includes(node.property.name) &&
-				node.object.type === 'CallExpression' &&
-				node.object.arguments.length === 0 &&
-				node.object.callee.type === 'MemberExpression' &&
-				node.object.callee.property.type === 'Identifier' &&
-				['first', 'last'].includes(node.object.callee.property.name);
+				!['json', 'binary'].includes(node.property.name);
 
-			walk<TargetNode>(ast, isDirectAccessToFirstOrLastCall).forEach((node) => {
-				const [start, end] = this.getRange(node);
+			walk<TargetNode>(ast, isDirectAccessToItemSubproperty).forEach((node) => {
+				const varName = getText(node);
 
-				const [_, fixEnd] = this.getRange(node.object);
+				if (!varName) return;
+
+				const [start, end] = getRange(node);
+
+				const [, fixEnd] = getRange(node.object.property);
 
 				lintings.push({
 					from: start,
 					to: end,
 					severity: DEFAULT_LINTER_SEVERITY,
-					message: this.$locale.baseText(
-						'codeNodeEditor.linter.bothModes.directAccess.firstOrLastCall',
-					),
+					message: i18n.baseText('codeNodeEditor.linter.bothModes.directAccess.itemProperty'),
 					actions: [
 						{
 							name: 'Fix',
@@ -560,24 +508,70 @@ export const linterExtension = defineComponent({
 					],
 				});
 			});
+		}
 
-			return lintings;
-		},
+		/**
+		 * Lint for direct access to `first()` or `last()` output (i.e. not using `json`)
+		 *
+		 * $input.first().myField -> $input.first().json.myField
+		 */
 
-		// ----------------------------------
-		//            helpers
-		// ----------------------------------
+		type TargetNode = RangeNode & { object: RangeNode };
 
-		getText(node: RangeNode) {
-			if (!this.editor) return null;
+		const isDirectAccessToFirstOrLastCall = (node: Node) =>
+			node.type === 'MemberExpression' &&
+			node.property.type === 'Identifier' &&
+			!['json', 'binary'].includes(node.property.name) &&
+			node.object.type === 'CallExpression' &&
+			node.object.arguments.length === 0 &&
+			node.object.callee.type === 'MemberExpression' &&
+			node.object.callee.property.type === 'Identifier' &&
+			['first', 'last'].includes(node.object.callee.property.name);
 
-			const [start, end] = this.getRange(node);
+		walk<TargetNode>(ast, isDirectAccessToFirstOrLastCall).forEach((node) => {
+			const [start, end] = getRange(node);
 
-			return this.editor.state.doc.toString().slice(start, end);
-		},
+			const [, fixEnd] = getRange(node.object);
 
-		getRange(node: RangeNode) {
-			return node.range.map((loc) => loc - OFFSET_FOR_SCRIPT_WRAPPER);
-		},
-	},
-});
+			lintings.push({
+				from: start,
+				to: end,
+				severity: DEFAULT_LINTER_SEVERITY,
+				message: i18n.baseText('codeNodeEditor.linter.bothModes.directAccess.firstOrLastCall'),
+				actions: [
+					{
+						name: 'Fix',
+						apply(view, from, to) {
+							// prevent second insertion of unknown origin
+							if (view.state.doc.toString().slice(from, to).includes('.json')) return;
+
+							view.dispatch({ changes: { from: fixEnd, insert: '.json' } });
+						},
+					},
+				],
+			});
+		});
+
+		return lintings;
+	}
+
+	// ----------------------------------
+	//            helpers
+	// ----------------------------------
+
+	function getText(node: RangeNode) {
+		const editorValue = toValue(editor);
+
+		if (!editorValue) return null;
+
+		const [start, end] = getRange(node);
+
+		return editorValue.state.doc.toString().slice(start, end);
+	}
+
+	function getRange(node: RangeNode) {
+		return node.range.map((loc) => loc - OFFSET_FOR_SCRIPT_WRAPPER);
+	}
+
+	return { createLinter };
+};
diff --git a/packages/editor-ui/src/components/JsEditor/JsEditor.vue b/packages/editor-ui/src/components/JsEditor/JsEditor.vue
index 4ae28dc67b..3b356d7a2d 100644
--- a/packages/editor-ui/src/components/JsEditor/JsEditor.vue
+++ b/packages/editor-ui/src/components/JsEditor/JsEditor.vue
@@ -1,11 +1,11 @@
 <template>
 	<div :class="$style.editor">
-		<div ref="jsEditor" class="ph-no-capture js-editor"></div>
+		<div ref="jsEditorRef" class="ph-no-capture js-editor"></div>
 		<slot name="suffix" />
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { history, toggleComment } from '@codemirror/commands';
 import { javascript } from '@codemirror/lang-javascript';
 import { foldGutter, indentOnInput } from '@codemirror/language';
@@ -21,9 +21,8 @@ import {
 	keymap,
 	lineNumbers,
 } from '@codemirror/view';
-import { defineComponent } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
-import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
 import {
 	autocompleteKeyMap,
 	enterKeyMap,
@@ -31,86 +30,72 @@ import {
 	tabKeyMap,
 } from '@/plugins/codemirror/keymap';
 import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
+import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
 
-export default defineComponent({
-	name: 'JsEditor',
-	props: {
-		modelValue: {
-			type: String,
-			required: true,
-		},
-		isReadOnly: {
-			type: Boolean,
-			default: false,
-		},
-		fillParent: {
-			type: Boolean,
-			default: false,
-		},
-		rows: {
-			type: Number,
-			default: 4,
-		},
-	},
-	data() {
-		return {
-			editor: null as EditorView | null,
-			editorState: null as EditorState | null,
-		};
-	},
-	computed: {
-		doc(): string {
-			return this.editor?.state.doc.toString() ?? '';
-		},
-		extensions(): Extension[] {
-			const { isReadOnly } = this;
-			const extensions: Extension[] = [
-				javascript(),
-				lineNumbers(),
-				EditorView.lineWrapping,
-				EditorState.readOnly.of(isReadOnly),
-				EditorView.editable.of(!isReadOnly),
-				codeNodeEditorTheme({
-					isReadOnly,
-					maxHeight: this.fillParent ? '100%' : '40vh',
-					minHeight: '20vh',
-					rows: this.rows,
-				}),
-			];
-			if (!isReadOnly) {
-				extensions.push(
-					history(),
-					Prec.highest(
-						keymap.of([
-							...tabKeyMap(),
-							...enterKeyMap,
-							...historyKeyMap,
-							...autocompleteKeyMap,
-							{ key: 'Mod-/', run: toggleComment },
-						]),
-					),
-					lintGutter(),
-					n8nAutocompletion(),
-					indentOnInput(),
-					highlightActiveLine(),
-					highlightActiveLineGutter(),
-					foldGutter(),
-					dropCursor(),
-					EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
-						if (!viewUpdate.docChanged || !this.editor) return;
-						this.$emit('update:modelValue', this.editor?.state.doc.toString());
-					}),
-				);
-			}
-			return extensions;
-		},
-	},
-	mounted() {
-		const state = EditorState.create({ doc: this.modelValue, extensions: this.extensions });
-		const parent = this.$refs.jsEditor as HTMLDivElement;
-		this.editor = new EditorView({ parent, state });
-		this.editorState = this.editor.state;
-	},
+type Props = {
+	modelValue: string;
+	isReadOnly?: boolean;
+	fillParent?: boolean;
+	rows?: number;
+};
+
+const props = withDefaults(defineProps<Props>(), { fillParent: false, isReadOnly: false, rows: 4 });
+const emit = defineEmits<{
+	(event: 'update:modelValue', value: string): void;
+}>();
+
+onMounted(() => {
+	const state = EditorState.create({ doc: props.modelValue, extensions: extensions.value });
+	const parent = jsEditorRef.value;
+	editor.value = new EditorView({ parent, state });
+	editorState.value = editor.value.state;
+});
+
+const jsEditorRef = ref<HTMLDivElement>();
+const editor = ref<EditorView | null>(null);
+const editorState = ref<EditorState | null>(null);
+
+const extensions = computed(() => {
+	const extensionsToApply: Extension[] = [
+		javascript(),
+		lineNumbers(),
+		EditorView.lineWrapping,
+		EditorState.readOnly.of(props.isReadOnly),
+		EditorView.editable.of(!props.isReadOnly),
+		codeNodeEditorTheme({
+			isReadOnly: props.isReadOnly,
+			maxHeight: props.fillParent ? '100%' : '40vh',
+			minHeight: '20vh',
+			rows: props.rows,
+		}),
+	];
+
+	if (!props.isReadOnly) {
+		extensionsToApply.push(
+			history(),
+			Prec.highest(
+				keymap.of([
+					...tabKeyMap(),
+					...enterKeyMap,
+					...historyKeyMap,
+					...autocompleteKeyMap,
+					{ key: 'Mod-/', run: toggleComment },
+				]),
+			),
+			lintGutter(),
+			n8nAutocompletion(),
+			indentOnInput(),
+			highlightActiveLine(),
+			highlightActiveLineGutter(),
+			foldGutter(),
+			dropCursor(),
+			EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
+				if (!viewUpdate.docChanged || !editor.value) return;
+				emit('update:modelValue', editor.value?.state.doc.toString());
+			}),
+		);
+	}
+	return extensionsToApply;
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue b/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
index 4951491197..3f5068a931 100644
--- a/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
+++ b/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
@@ -1,11 +1,11 @@
 <template>
 	<div :class="$style.editor">
-		<div ref="jsonEditor" class="ph-no-capture json-editor"></div>
+		<div ref="jsonEditorRef" class="ph-no-capture json-editor"></div>
 		<slot name="suffix" />
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { history } from '@codemirror/commands';
 import { json, jsonParseLinter } from '@codemirror/lang-json';
 import { bracketMatching, foldGutter, indentOnInput } from '@codemirror/language';
@@ -21,7 +21,6 @@ import {
 	keymap,
 	lineNumbers,
 } from '@codemirror/view';
-import { defineComponent } from 'vue';
 
 import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
 import {
@@ -31,103 +30,90 @@ import {
 	tabKeyMap,
 } from '@/plugins/codemirror/keymap';
 import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
+import { computed, onMounted, ref, watch } from 'vue';
 
-export default defineComponent({
-	name: 'JsonEditor',
-	props: {
-		modelValue: {
-			type: String,
-			required: true,
-		},
-		isReadOnly: {
-			type: Boolean,
-			default: false,
-		},
-		fillParent: {
-			type: Boolean,
-			default: false,
-		},
-		rows: {
-			type: Number,
-			default: 4,
-		},
-	},
-	data() {
-		return {
-			editor: null as EditorView | null,
-			editorState: null as EditorState | null,
-		};
-	},
-	computed: {
-		doc(): string {
-			return this.editor?.state.doc.toString() ?? '';
-		},
-		extensions(): Extension[] {
-			const { isReadOnly } = this;
-			const extensions: Extension[] = [
-				json(),
-				lineNumbers(),
-				EditorView.lineWrapping,
-				EditorState.readOnly.of(isReadOnly),
-				EditorView.editable.of(!isReadOnly),
-				codeNodeEditorTheme({
-					isReadOnly,
-					maxHeight: this.fillParent ? '100%' : '40vh',
-					minHeight: '20vh',
-					rows: this.rows,
-				}),
-			];
-			if (!isReadOnly) {
-				extensions.push(
-					history(),
-					Prec.highest(
-						keymap.of([...tabKeyMap(), ...enterKeyMap, ...historyKeyMap, ...autocompleteKeyMap]),
-					),
-					createLinter(jsonParseLinter()),
-					lintGutter(),
-					n8nAutocompletion(),
-					indentOnInput(),
-					highlightActiveLine(),
-					highlightActiveLineGutter(),
-					foldGutter(),
-					dropCursor(),
-					bracketMatching(),
-					EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
-						if (!viewUpdate.docChanged || !this.editor) return;
-						this.$emit('update:modelValue', this.editor?.state.doc.toString());
-					}),
-				);
-			}
-			return extensions;
-		},
-	},
-	watch: {
-		modelValue(newValue: string) {
-			const editorValue = this.editor?.state?.doc.toString();
+type Props = {
+	modelValue: string;
+	isReadOnly?: boolean;
+	fillParent?: boolean;
+	rows?: number;
+};
 
-			// If model value changes from outside the component
-			if (editorValue && editorValue.length !== newValue.length && editorValue !== newValue) {
-				this.destroyEditor();
-				this.createEditor();
-			}
-		},
-	},
-	mounted() {
-		this.createEditor();
-	},
-	methods: {
-		createEditor() {
-			const state = EditorState.create({ doc: this.modelValue, extensions: this.extensions });
-			const parent = this.$refs.jsonEditor as HTMLDivElement;
+const props = withDefaults(defineProps<Props>(), { fillParent: false, isReadOnly: false, rows: 4 });
+const emit = defineEmits<{
+	(event: 'update:modelValue', value: string): void;
+}>();
 
-			this.editor = new EditorView({ parent, state });
-			this.editorState = this.editor.state;
-		},
-		destroyEditor() {
-			this.editor?.destroy();
-		},
-	},
+const jsonEditorRef = ref<HTMLDivElement>();
+const editor = ref<EditorView | null>(null);
+const editorState = ref<EditorState | null>(null);
+
+const extensions = computed(() => {
+	const extensionsToApply: Extension[] = [
+		json(),
+		lineNumbers(),
+		EditorView.lineWrapping,
+		EditorState.readOnly.of(props.isReadOnly),
+		EditorView.editable.of(!props.isReadOnly),
+		codeNodeEditorTheme({
+			isReadOnly: props.isReadOnly,
+			maxHeight: props.fillParent ? '100%' : '40vh',
+			minHeight: '20vh',
+			rows: props.rows,
+		}),
+	];
+	if (!props.isReadOnly) {
+		extensionsToApply.push(
+			history(),
+			Prec.highest(
+				keymap.of([...tabKeyMap(), ...enterKeyMap, ...historyKeyMap, ...autocompleteKeyMap]),
+			),
+			createLinter(jsonParseLinter()),
+			lintGutter(),
+			n8nAutocompletion(),
+			indentOnInput(),
+			highlightActiveLine(),
+			highlightActiveLineGutter(),
+			foldGutter(),
+			dropCursor(),
+			bracketMatching(),
+			EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
+				if (!viewUpdate.docChanged || !editor.value) return;
+				emit('update:modelValue', editor.value?.state.doc.toString());
+			}),
+		);
+	}
+	return extensionsToApply;
 });
+
+onMounted(() => {
+	createEditor();
+});
+
+watch(
+	() => props.modelValue,
+	(newValue: string) => {
+		const editorValue = editor.value?.state?.doc.toString();
+
+		// If model value changes from outside the component
+		if (editorValue && editorValue.length !== newValue.length && editorValue !== newValue) {
+			destroyEditor();
+			createEditor();
+		}
+	},
+);
+
+function createEditor() {
+	const state = EditorState.create({ doc: props.modelValue, extensions: extensions.value });
+	const parent = jsonEditorRef.value;
+
+	editor.value = new EditorView({ parent, state });
+	editorState.value = editor.value.state;
+}
+
+function destroyEditor() {
+	editor.value?.destroy();
+}
 </script>
 
 <style lang="scss" module>