@bpmn-io/feel-editor 1.3.0 → 1.4.0

package/dist/index.es.js

@@ -679,12 +679,7 @@ var variables = context => {
 
   const variables = context.state.facet(variablesFacet)[0];
 
-  const options = variables.map(v => ({
-    label: v.name,
-    type: 'variable',
-    info: v.info,
-    detail: v.detail
-  }));
+  const options = variables.map(v => createVariableSuggestion(v));
 
   // In most cases, use what is typed before the cursor
   let nodeBefore = syntaxTree(context.state).resolve(context.pos, -1);
@@ -717,6 +712,55 @@ var variables = context => {
   return result;
 };
 
+/**
+ * @param {import('..').Variable} variable
+ * @returns {import('@codemirror/autocomplete').Completion}
+ */
+function createVariableSuggestion(variable) {
+  if (variable.type === 'function') {
+    return createFunctionVariable(variable);
+  }
+
+  return {
+    label: variable.name,
+    type: 'variable',
+    info: variable.info,
+    detail: variable.detail
+  };
+}
+
+/**
+ * @param {import('..').Variable} variable
+ * @returns {import('@codemirror/autocomplete').Completion}
+ */
+function createFunctionVariable(variable) {
+  const {
+    name,
+    info,
+    detail,
+    params = []
+  } = variable;
+
+  const paramsWithNames = params.map(({ name, type }, index) => ({
+    name: name || `param ${index + 1}`,
+    type
+  }));
+
+  const template = `${name}(${paramsWithNames.map(p => '${' + p.name + '}').join(', ')})`;
+
+  const paramsSignature = paramsWithNames.map(({ name, type }) => (
+    type ? `${name}: ${type}` : name
+  )).join(', ');
+  const label = `${name}(${paramsSignature})`;
+
+  return snippetCompletion(template, {
+    label,
+    type: 'function',
+    info,
+    detail
+  });
+}
+
 function autocompletion() {
   return [
     autocompletion$1({
@@ -813,12 +857,13 @@ var theme = [ baseTheme, highlightTheme, syntaxClasses ];
 
 /**
  * @typedef {object} Variable
- * @typedef {import('@codemirror/state').Extension} Extension
  * @property {string} name name or key of the variable
  * @property {string} [info] short information about the variable, e.g. type
  * @property {string} [detail] longer description of the variable content
  * @property {boolean} [isList] whether the variable is a list
- * @property {array<Variable>} [schema] array of child variables if the variable is a context or list
+ * @property {Array<Variable>} [schema] array of child variables if the variable is a context or list
+ * @property {'function'|'variable'} [type] type of the variable
+ * @property {Array<{name: string, type: string}>} [params] function parameters
  */
 
 const autocompletionConf = new Compartment();

package/dist/index.js

@@ -681,12 +681,7 @@ var variables = context => {
 
   const variables = context.state.facet(variablesFacet)[0];
 
-  const options = variables.map(v => ({
-    label: v.name,
-    type: 'variable',
-    info: v.info,
-    detail: v.detail
-  }));
+  const options = variables.map(v => createVariableSuggestion(v));
 
   // In most cases, use what is typed before the cursor
   let nodeBefore = language$1.syntaxTree(context.state).resolve(context.pos, -1);
@@ -719,6 +714,55 @@ var variables = context => {
   return result;
 };
 
+/**
+ * @param {import('..').Variable} variable
+ * @returns {import('@codemirror/autocomplete').Completion}
+ */
+function createVariableSuggestion(variable) {
+  if (variable.type === 'function') {
+    return createFunctionVariable(variable);
+  }
+
+  return {
+    label: variable.name,
+    type: 'variable',
+    info: variable.info,
+    detail: variable.detail
+  };
+}
+
+/**
+ * @param {import('..').Variable} variable
+ * @returns {import('@codemirror/autocomplete').Completion}
+ */
+function createFunctionVariable(variable) {
+  const {
+    name,
+    info,
+    detail,
+    params = []
+  } = variable;
+
+  const paramsWithNames = params.map(({ name, type }, index) => ({
+    name: name || `param ${index + 1}`,
+    type
+  }));
+
+  const template = `${name}(${paramsWithNames.map(p => '${' + p.name + '}').join(', ')})`;
+
+  const paramsSignature = paramsWithNames.map(({ name, type }) => (
+    type ? `${name}: ${type}` : name
+  )).join(', ');
+  const label = `${name}(${paramsSignature})`;
+
+  return autocomplete.snippetCompletion(template, {
+    label,
+    type: 'function',
+    info,
+    detail
+  });
+}
+
 function autocompletion() {
   return [
     autocomplete.autocompletion({
@@ -815,12 +859,13 @@ var theme = [ baseTheme, highlightTheme, syntaxClasses ];
 
 /**
  * @typedef {object} Variable
- * @typedef {import('@codemirror/state').Extension} Extension
  * @property {string} name name or key of the variable
  * @property {string} [info] short information about the variable, e.g. type
  * @property {string} [detail] longer description of the variable content
  * @property {boolean} [isList] whether the variable is a list
- * @property {array<Variable>} [schema] array of child variables if the variable is a context or list
+ * @property {Array<Variable>} [schema] array of child variables if the variable is a context or list
+ * @property {'function'|'variable'} [type] type of the variable
+ * @property {Array<{name: string, type: string}>} [params] function parameters
  */
 
 const autocompletionConf = new state.Compartment();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/feel-editor",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Editor for FEEL expressions.",
   "files": [
     "dist"