admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 10:02:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(Code Node): Add Python support (#4295)

Browse Source
This commit is contained in:
Jan Oberhauser
2023-05-04 20:00:00 +02:00
committed by GitHub
parent 1e6a75f341
commit 35c8510ab6
25 changed files with 962 additions and 591 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
:class="['code-node-editor', $style['code-node-editor-container']]"
:class="['code-node-editor', $style['code-node-editor-container'], language]"
@mouseover="onMouseOver"
@mouseout="onMouseOut"
ref="codeNodeEditorContainer"
@@ -23,50 +23,42 @@ import type { PropType } from 'vue';
import { mapStores } from 'pinia';
import mixins from 'vue-typed-mixins';
import type { LanguageSupport } from '@codemirror/language';
import type { Extension } 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 { json } from '@codemirror/lang-json';
import { python } from '@codemirror/lang-python';
import type { CodeExecutionMode, CodeNodeEditorLanguage } from 'n8n-workflow';
import { CODE_EXECUTION_MODES, CODE_LANGUAGES } from 'n8n-workflow';
import { readOnlyEditorExtensions, writableEditorExtensions } from './baseExtensions';
import { linterExtension } from './linter';
import { completerExtension } from './completer';
import { codeNodeEditorTheme } from './theme';
import { workflowHelpers } from '@/mixins/workflowHelpers'; // for json field completions
import { ASK_AI_MODAL_KEY, CODE_NODE_TYPE } from '@/constants';
import { codeNodeEditorEventBus } from '@/event-bus';
import {
ALL_ITEMS_PLACEHOLDER,
CODE_LANGUAGES,
CODE_MODES,
EACH_ITEM_PLACEHOLDER,
} from './constants';
import { useRootStore } from '@/stores/n8nRootStore';
import Modal from '../Modal.vue';
import { useSettingsStore } from '@/stores/settings';
import type { CodeLanguage, CodeMode } from './types';
import Modal from '@/components/Modal.vue';
const placeholders: Partial<Record<CodeLanguage, Record<CodeMode, string>>> = {
javaScript: {
runOnceForAllItems: ALL_ITEMS_PLACEHOLDER,
runOnceForEachItem: EACH_ITEM_PLACEHOLDER,
},
};
import { readOnlyEditorExtensions, writableEditorExtensions } from './baseExtensions';
import { CODE_PLACEHOLDERS } from './constants';
import { linterExtension } from './linter';
import { completerExtension } from './completer';
import { codeNodeEditorTheme } from './theme';
export default mixins(linterExtension, completerExtension, workflowHelpers).extend({
name: 'code-node-editor',
components: { Modal },
props: {
mode: {
type: String as PropType<CodeMode>,
validator: (value: CodeMode): boolean => CODE_MODES.includes(value),
type: String as PropType<CodeExecutionMode>,
validator: (value: CodeExecutionMode): boolean => CODE_EXECUTION_MODES.includes(value),
},
language: {
type: String as PropType<CodeLanguage>,
default: 'javaScript' as CodeLanguage,
validator: (value: CodeLanguage): boolean => CODE_LANGUAGES.includes(value),
type: String as PropType<CodeNodeEditorLanguage>,
default: 'javaScript' as CodeNodeEditorLanguage,
validator: (value: CodeNodeEditorLanguage): boolean => CODE_LANGUAGES.includes(value),
},
isReadOnly: {
type: Boolean,
@@ -79,19 +71,30 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
data() {
return {
editor: null as EditorView | null,
languageCompartment: new Compartment(),
linterCompartment: new Compartment(),
isEditorHovered: false,
isEditorFocused: false,
};
},
watch: {
mode(newMode, previousMode: CodeMode) {
mode(newMode, previousMode: CodeExecutionMode) {
this.reloadLinter();
if (this.content.trim() === placeholders[this.language]?.[previousMode]) {
if (this.content.trim() === CODE_PLACEHOLDERS[this.language]?.[previousMode]) {
this.refreshPlaceholder();
}
},
language(newLanguage, previousLanguage: CodeNodeEditorLanguage) {
if (this.content.trim() === CODE_PLACEHOLDERS[previousLanguage]?.[this.mode]) {
this.refreshPlaceholder();
}
const [languageSupport] = this.languageExtensions;
this.editor?.dispatch({
effects: this.languageCompartment.reconfigure(languageSupport),
});
},
},
computed: {
...mapStores(useRootStore),
@@ -104,7 +107,17 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
return this.editor.state.doc.toString();
},
placeholder(): string {
return placeholders[this.language]?.[this.mode] ?? '';
return CODE_PLACEHOLDERS[this.language]?.[this.mode] ?? '';
},
languageExtensions(): [LanguageSupport, ...Extension[]] {
switch (this.language) {
case 'json':
return [json()];
case 'javaScript':
return [javascript(), this.autocompletionExtension('javaScript')];
case 'python':
return [python(), this.autocompletionExtension('python')];
}
},
},
methods: {
@@ -178,6 +191,7 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
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,
@@ -234,14 +248,8 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
);
}
switch (language) {
case 'json':
extensions.push(json());
break;
case 'javaScript':
extensions.push(javascript(), this.autocompletionExtension());
break;
}
const [languageSupport, ...otherExtensions] = this.languageExtensions;
extensions.push(this.languageCompartment.of(languageSupport), ...otherExtensions);
const state = EditorState.create({
doc: this.value || this.placeholder,