Skip to content

Commit

Permalink
feat(Code Node): Add Python support (#4295)
Browse files Browse the repository at this point in the history
  • Loading branch information
@janober
janober authored May 4, 2023
1 parent 1e6a75f commit 35c8510
Show file tree
Hide file tree
Showing 25 changed files with 962 additions and 591 deletions.
1 change: 1 addition & 0 deletions packages/editor-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"@codemirror/commands": "^6.1.0",
"@codemirror/lang-javascript": "^6.1.2",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/lang-python": "^6.1.2",
"@codemirror/lang-sql": "^6.4.1",
"@codemirror/language": "^6.2.1",
"@codemirror/lint": "^6.0.0",
Expand Down
78 changes: 43 additions & 35 deletions packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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,
Expand All @@ -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),
Expand All @@ -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: {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
10 changes: 7 additions & 3 deletions packages/editor-ui/src/components/CodeNodeEditor/completer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,20 @@ 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;

return a.label.localeCompare(b.label);
},
override: [
jsSnippets,
localCompletionSource,
...completions,

// core
this.itemCompletions,
Expand Down
46 changes: 24 additions & 22 deletions packages/editor-ui/src/components/CodeNodeEditor/completions/base.completions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -49,64 +49,65 @@ 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'),
},
];

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 },
Expand All @@ -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'),
},
];
Expand All @@ -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 },
Expand Down
15 changes: 8 additions & 7 deletions packages/editor-ui/src/components/CodeNodeEditor/completions/itemField.completions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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+)\]\..*/,
};

Expand All @@ -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);
Expand All @@ -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[] = [
Expand Down
4 changes: 2 additions & 2 deletions packages/editor-ui/src/components/CodeNodeEditor/completions/require.completions.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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));
}
Expand Down
Loading

0 comments on commit 35c8510

Please sign in to comment.