mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests 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,

10
packages/editor-ui/src/components/CodeNodeEditor/completer.ts
View File

@@ -33,7 +33,12 @@ export const completerExtension = mixins(
jsonFieldCompletions,
).extend({
methods: {
autocompletionExtension(): Extension {
autocompletionExtension(language: 'javaScript' | 'python'): Extension {
const completions = [];
if (language === 'javaScript') {
completions.push(jsSnippets, localCompletionSource);
}
return autocompletion({
compareCompletions: (a: Completion, b: Completion) => {
if (/\.json$|id$|id['"]\]$/.test(a.label)) return 0;
@@ -41,8 +46,7 @@ export const completerExtension = mixins(
return a.label.localeCompare(b.label);
},
override: [
jsSnippets,
localCompletionSource,
...completions,
// core
this.itemCompletions,

46
packages/editor-ui/src/components/CodeNodeEditor/completions/base.completions.ts
View File

@@ -7,7 +7,7 @@ import type { CodeNodeEditorMixin } from '../types';
import { mapStores } from 'pinia';
import { useWorkflowsStore } from '@/stores/workflows';
function getAutocompletableNodeNames(nodes: INodeUi[]) {
function getAutoCompletableNodeNames(nodes: INodeUi[]) {
return nodes
.filter((node: INodeUi) => !NODE_TYPES_EXCLUDED_FROM_AUTOCOMPLETION.includes(node.type))
.map((node: INodeUi) => node.name);
@@ -49,54 +49,55 @@ export const baseCompletions = (Vue as CodeNodeEditorMixin).extend({
* - Complete `$` to `$json $binary $itemIndex` in single-item mode.
*/
baseCompletions(context: CompletionContext): CompletionResult | null {
const preCursor = context.matchBefore(/\$\w*/);
const prefix = this.language === 'python' ? '_' : '$';
const preCursor = context.matchBefore(new RegExp(`\\${prefix}\\w*`));
if (!preCursor || (preCursor.from === preCursor.to && !context.explicit)) return null;
const TOP_LEVEL_COMPLETIONS_IN_BOTH_MODES: Completion[] = [
{
label: '$execution',
label: `${prefix}execution`,
info: this.$locale.baseText('codeNodeEditor.completer.$execution'),
},
{ label: '$input', info: this.$locale.baseText('codeNodeEditor.completer.$input') },
{ label: `${prefix}input`, info: this.$locale.baseText('codeNodeEditor.completer.$input') },
{
label: '$prevNode',
label: `${prefix}prevNode`,
info: this.$locale.baseText('codeNodeEditor.completer.$prevNode'),
},
{
label: '$workflow',
label: `${prefix}workflow`,
info: this.$locale.baseText('codeNodeEditor.completer.$workflow'),
},
{
label: '$vars',
label: `${prefix}vars`,
info: this.$locale.baseText('codeNodeEditor.completer.$vars'),
},
{
label: '$now',
label: `${prefix}now`,
info: this.$locale.baseText('codeNodeEditor.completer.$now'),
},
{
label: '$today',
label: `${prefix}today`,
info: this.$locale.baseText('codeNodeEditor.completer.$today'),
},
{
label: '$jmespath()',
label: `${prefix}jmespath()`,
info: this.$locale.baseText('codeNodeEditor.completer.$jmespath'),
},
{
label: '$if()',
label: `${prefix}if()`,
info: this.$locale.baseText('codeNodeEditor.completer.$if'),
},
{
label: '$min()',
label: `${prefix}min()`,
info: this.$locale.baseText('codeNodeEditor.completer.$min'),
},
{
label: '$max()',
label: `${prefix}max()`,
info: this.$locale.baseText('codeNodeEditor.completer.$max'),
},
{
label: '$runIndex',
label: `${prefix}runIndex`,
info: this.$locale.baseText('codeNodeEditor.completer.$runIndex'),
},
];
@@ -104,9 +105,9 @@ export const baseCompletions = (Vue as CodeNodeEditorMixin).extend({
const options: Completion[] = TOP_LEVEL_COMPLETIONS_IN_BOTH_MODES.map(addVarType);
options.push(
...getAutocompletableNodeNames(this.workflowsStore.allNodes).map((nodeName) => {
...getAutoCompletableNodeNames(this.workflowsStore.allNodes).map((nodeName) => {
return {
label: `$('${nodeName}')`,
label: `${prefix}('${nodeName}')`,
type: 'variable',
info: this.$locale.baseText('codeNodeEditor.completer.$()', {
interpolate: { nodeName },
@@ -117,10 +118,10 @@ export const baseCompletions = (Vue as CodeNodeEditorMixin).extend({
if (this.mode === 'runOnceForEachItem') {
const TOP_LEVEL_COMPLETIONS_IN_SINGLE_ITEM_MODE = [
{ label: '$json' },
{ label: '$binary' },
{ label: `${prefix}json` },
{ label: `${prefix}binary` },
{
label: '$itemIndex',
label: `${prefix}itemIndex`,
info: this.$locale.baseText('codeNodeEditor.completer.$itemIndex'),
},
];
@@ -138,14 +139,15 @@ export const baseCompletions = (Vue as CodeNodeEditorMixin).extend({
* Complete `$(` to `$('nodeName')`.
*/
nodeSelectorCompletions(context: CompletionContext): CompletionResult | null {
const preCursor = context.matchBefore(/\$\(.*/);
const prefix = this.language === 'python' ? '_' : '$';
const preCursor = context.matchBefore(new RegExp(`\\${prefix}\\(.*`));
if (!preCursor || (preCursor.from === preCursor.to && !context.explicit)) return null;
const options: Completion[] = getAutocompletableNodeNames(this.workflowsStore.allNodes).map(
const options: Completion[] = getAutoCompletableNodeNames(this.workflowsStore.allNodes).map(
(nodeName) => {
return {
label: `$('${nodeName}')`,
label: `${prefix}('${nodeName}')`,
type: 'variable',
info: this.$locale.baseText('codeNodeEditor.completer.$()', {
interpolate: { nodeName },

15
packages/editor-ui/src/components/CodeNodeEditor/completions/itemField.completions.ts
View File

@@ -50,10 +50,11 @@ export const itemFieldCompletions = (Vue as CodeNodeEditorMixin).extend({
* - Complete `$input.item.` to `.json .binary`.
*/
inputMethodCompletions(context: CompletionContext): CompletionResult | null {
const prefix = this.language === 'python' ? '_' : '$';
const patterns = {
first: /\$input\.first\(\)\..*/,
last: /\$input\.last\(\)\..*/,
item: /\$input\.item\..*/,
first: new RegExp(`\\${prefix}input\\.first\\(\\)\\..*`),
last: new RegExp(`\\${prefix}input\\.last\\(\\)\\..*`),
item: new RegExp(`\\${prefix}item\\.first\\(\\)\\..*`),
all: /\$input\.all\(\)\[(?<index>\w+)\]\..*/,
};
@@ -64,11 +65,11 @@ export const itemFieldCompletions = (Vue as CodeNodeEditorMixin).extend({
let replacementBase = '';
if (name === 'item') replacementBase = '$input.item';
if (name === 'item') replacementBase = `${prefix}input.item`;
if (name === 'first') replacementBase = '$input.first()';
if (name === 'first') replacementBase = `${prefix}input.first()`;
if (name === 'last') replacementBase = '$input.last()';
if (name === 'last') replacementBase = `${prefix}input.last()`;
if (name === 'all') {
const match = preCursor.text.match(regex);
@@ -77,7 +78,7 @@ export const itemFieldCompletions = (Vue as CodeNodeEditorMixin).extend({
const { index } = match.groups;
replacementBase = `$input.all()[${index}]`;
replacementBase = `${prefix}input.all()[${index}]`;
}
const options: Completion[] = [

4
packages/editor-ui/src/components/CodeNodeEditor/completions/require.completions.ts
View File

@@ -1,5 +1,5 @@
import Vue from 'vue';
import { AUTOCOMPLETABLE_BUILT_IN_MODULES } from '../constants';
import { AUTOCOMPLETABLE_BUILT_IN_MODULES_JS } from '../constants';
import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
import type { CodeNodeEditorMixin } from '../types';
import { useSettingsStore } from '@/stores/settings';
@@ -25,7 +25,7 @@ export const requireCompletions = (Vue as CodeNodeEditorMixin).extend({
if (allowedModules.builtIn) {
if (allowedModules.builtIn.includes('*')) {
options.push(...AUTOCOMPLETABLE_BUILT_IN_MODULES.map(toOption));
options.push(...AUTOCOMPLETABLE_BUILT_IN_MODULES_JS.map(toOption));
} else if (allowedModules?.builtIn?.length > 0) {
options.push(...allowedModules.builtIn.map(toOption));
}

40
packages/editor-ui/src/components/CodeNodeEditor/constants.ts
View File

@@ -1,9 +1,10 @@
import { STICKY_NODE_TYPE } from '@/constants';
import type { Diagnostic } from '@codemirror/lint';
import type { CodeExecutionMode, CodeNodeEditorLanguage } from 'n8n-workflow';
export const NODE_TYPES_EXCLUDED_FROM_AUTOCOMPLETION = [STICKY_NODE_TYPE];
export const AUTOCOMPLETABLE_BUILT_IN_MODULES = [
export const AUTOCOMPLETABLE_BUILT_IN_MODULES_JS = [
'console',
'constants',
'crypto',
@@ -34,23 +35,32 @@ export const DEFAULT_LINTER_DELAY_IN_MS = 300;
*/
export const OFFSET_FOR_SCRIPT_WRAPPER = 'module.exports = async function() {'.length;
export const ALL_ITEMS_PLACEHOLDER = `
// Loop over input items and add a new field
// called 'myNewField' to the JSON of each one
export const CODE_PLACEHOLDERS: Partial<
Record<CodeNodeEditorLanguage, Record<CodeExecutionMode, string>>
> = {
javaScript: {
runOnceForAllItems: `
// Loop over input items and add a new field called 'myNewField' to the JSON of each one
for (const item of $input.all()) {
item.json.myNewField = 1;
}
return $input.all();
`.trim();
export const EACH_ITEM_PLACEHOLDER = `
// Add a new field called 'myNewField' to the
// JSON of the item
return $input.all();`.trim(),
runOnceForEachItem: `
// Add a new field called 'myNewField' to the JSON of the item
$input.item.json.myNewField = 1;
return $input.item;
`.trim();
export const CODE_LANGUAGES = ['javaScript', 'json'] as const;
export const CODE_MODES = ['runOnceForAllItems', 'runOnceForEachItem'] as const;
return $input.item;`.trim(),
},
python: {
runOnceForAllItems: `
# Loop over input items and add a new field called 'myNewField' to the JSON of each one
for item in _input.all():
item.json.myNewField = 1
return _input.all()`.trim(),
runOnceForEachItem: `
# Add a new field called 'myNewField' to the JSON of the item
_input.item.json.myNewField = 1
return _input.item`.trim(),
},
};

19
packages/editor-ui/src/components/CodeNodeEditor/linter.ts
View File

@@ -2,22 +2,19 @@ import Vue from 'vue';
import type { Diagnostic } from '@codemirror/lint';
import { linter as createLinter } from '@codemirror/lint';
import { jsonParseLinter } from '@codemirror/lang-json';
import * as esprima from 'esprima-next';
import {
DEFAULT_LINTER_DELAY_IN_MS,
DEFAULT_LINTER_SEVERITY,
OFFSET_FOR_SCRIPT_WRAPPER,
} from './constants';
import { walk } from './utils';
import type { EditorView } from '@codemirror/view';
import * as esprima from 'esprima-next';
import type { Node } from 'estree';
import type { CodeLanguage, CodeNodeEditorMixin, RangeNode } from './types';
import type { CodeNodeEditorLanguage } from 'n8n-workflow';
import { DEFAULT_LINTER_DELAY_IN_MS, DEFAULT_LINTER_SEVERITY } from './constants';
import { OFFSET_FOR_SCRIPT_WRAPPER } from './constants';
import { walk } from './utils';
import type { CodeNodeEditorMixin, RangeNode } from './types';
export const linterExtension = (Vue as CodeNodeEditorMixin).extend({
methods: {
createLinter(language: CodeLanguage) {
createLinter(language: CodeNodeEditorLanguage) {
switch (language) {
case 'javaScript':
return createLinter(this.lintSource, { delay: DEFAULT_LINTER_DELAY_IN_MS });

9
packages/editor-ui/src/components/CodeNodeEditor/types.ts
View File

@@ -1,19 +1,16 @@
import type { EditorView } from '@codemirror/view';
import type { I18nClass } from '@/plugins/i18n';
import type { Workflow } from 'n8n-workflow';
import type { Workflow, CodeExecutionMode, CodeNodeEditorLanguage } from 'n8n-workflow';
import type { Node } from 'estree';
import type { CODE_LANGUAGES, CODE_MODES } from './constants';
export type CodeNodeEditorMixin = Vue.VueConstructor<
Vue & {
$locale: I18nClass;
editor: EditorView | null;
mode: 'runOnceForAllItems' | 'runOnceForEachItem';
mode: CodeExecutionMode;
language: CodeNodeEditorLanguage;
getCurrentWorkflow(): Workflow;
}
>;
export type RangeNode = Node & { range: [number, number] };
export type CodeLanguage = (typeof CODE_LANGUAGES)[number];
export type CodeMode = (typeof CODE_MODES)[number];