@bpmn-io/feel-editor 0.5.0 → 0.7.0

package/README.md

@@ -28,8 +28,9 @@ const editor = new FeelEditor({
 
 ### Variables
 
-You can provide a variables array that will be used for auto completion. The Variables
-need to be in the following format:
+You can provide a variables array that will be used for auto completion. Nested 
+structures are supported.  
+The Variables need to be in the following format:
 
 ```JavaScript
 const editor = new FeelEditor({
@@ -38,12 +39,30 @@ const editor = new FeelEditor({
     {
       name: 'variablename to match',
       detail: 'optional inline info',
-      info: 'optional pop-out info'
+      info: 'optional pop-out info',
+      entries: [
+        {
+          name: 'nested variable',
+          ...
+        }
+      ]
     }
   ]
 });
 ```
 
+The variables can be updated on the instance via `FeelEditor#setVariables()`:
+
+```javascript
+editor.setVariables([
+  {
+    name: 'newName',
+    detail: 'new variable inline info',
+    info: 'new pop-out info'
+  }
+]);
+```
+
 ## Hacking the Project
 
 To get the development setup make sure to have [NodeJS](https://nodejs.org/en/download/) installed.

package/dist/index.es.js

@@ -1,11 +1,12 @@
 import { snippetCompletion, autocompletion as autocompletion$1, completeFromList, closeBrackets } from '@codemirror/autocomplete';
 import { defaultKeymap } from '@codemirror/commands';
-import { syntaxTree, LanguageSupport, syntaxHighlighting, HighlightStyle, indentOnInput, bracketMatching } from '@codemirror/language';
+import { syntaxTree, LanguageSupport, syntaxHighlighting, HighlightStyle, bracketMatching, indentOnInput } from '@codemirror/language';
 import { linter as linter$1, setDiagnosticsEffect } from '@codemirror/lint';
-import { EditorState } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
+import { Facet, Compartment, EditorState } from '@codemirror/state';
+import { EditorView, tooltips, keymap } from '@codemirror/view';
 import { snippets, feelLanguage } from 'lang-feel';
 import { domify } from 'min-dom';
+import { cmFeelLinter } from '@bpmn-io/feel-lint';
 import { tags as tags$1 } from '@lezer/highlight';
 
 // helpers ///////////////////////////////
@@ -371,9 +372,10 @@ const options = tags.map(tag => snippetCompletion(
     label: tag.name,
     type: 'function',
     info: () => {
-      const html = domify(tag.description);
+      const html = domify(`<div class="description">${tag.description}<div>`);
       return html;
-    }
+    },
+    boost: -1
   }
 ));
 
@@ -407,7 +409,121 @@ var builtins = context => {
   };
 };
 
-var variables = variables => context => {
+/**
+ * @type {Facet<import('..').Variable[]>} Variable
+ */
+const variablesFacet = Facet.define();
+
+var pathExpression = context => {
+  const variables = context.state.facet(variablesFacet)[0];
+  const nodeBefore = syntaxTree(context.state).resolve(context.pos, -1);
+
+  if (!isPathExpression(nodeBefore)) {
+    return;
+  }
+
+  const expression = findPathExpression(nodeBefore);
+
+  // if the cursor is directly after the `.`, variable starts at the cursor position
+  const from = nodeBefore === expression ? context.pos : nodeBefore.from;
+
+  const path = getPath(expression, context);
+
+  let options = variables;
+  for (var i = 0; i < path.length - 1; i++) {
+    var childVar = options.find(val => val.name === path[i].name);
+
+    if (!childVar) {
+      return null;
+    }
+
+    // only suggest if variable type matches
+    if (
+      childVar.isList !== 'optional' &&
+      !!childVar.isList !== path[i].isList
+    ) {
+      return;
+    }
+
+    options = childVar.entries;
+  }
+
+  if (!options) return;
+
+  options = options.map(v => ({
+    label: v.name,
+    type: 'variable',
+    info: v.info,
+    detail: v.detail
+  }));
+
+  const result = {
+    from: from,
+    options: options
+  };
+
+  return result;
+};
+
+
+function findPathExpression(node) {
+  while (node) {
+    if (node.name === 'PathExpression') {
+      return node;
+    }
+    node = node.parent;
+  }
+}
+
+// parses the path expression into a list of variable names with type information
+// e.g. foo[0].bar => [ { name: 'foo', isList: true }, { name: 'bar', isList: false } ]
+function getPath(node, context) {
+  let path = [];
+
+  for (let child = node.firstChild; child; child = child.nextSibling) {
+    if (child.name === 'PathExpression') {
+      path.push(...getPath(child, context));
+    } else if (child.name === 'FilterExpression') {
+      path.push(...getFilter(child, context));
+    }
+    else {
+      path.push({
+        name: getNodeContent(child, context),
+        isList: false
+      });
+    }
+  }
+  return path;
+}
+
+function getFilter(node, context) {
+  const list = node.firstChild;
+
+  if (list.name === 'PathExpression') {
+    const path = getPath(list, context);
+    const last = path[path.length - 1];
+    last.isList = true;
+
+    return path;
+  }
+
+  return [ {
+    name: getNodeContent(list, context),
+    isList: true
+  } ];
+}
+
+function getNodeContent(node, context) {
+  return context.state.sliceDoc(node.from, node.to);
+}
+
+/**
+ * @type {import('@codemirror/autocomplete').CompletionSource}
+ */
+var variables = context => {
+
+  const variables = context.state.facet(variablesFacet)[0];
+
   const options = variables.map(v => ({
     label: v.name,
     type: 'variable',
@@ -446,13 +562,14 @@ var variables = variables => context => {
   return result;
 };
 
-function autocompletion(context) {
+function autocompletion() {
   return [
     autocompletion$1({
       override: [
-        variables(context),
+        variables,
         builtins,
-        completeFromList(snippets)
+        completeFromList(snippets.map(s => ({ ...s, boost: -1 }))),
+        pathExpression
       ]
     })
   ];
@@ -462,53 +579,7 @@ function language() {
   return new LanguageSupport(feelLanguage, [ ]);
 }
 
-const FeelLinter = function(editorView) {
-  const messages = [];
-
-  // don't lint if the Editor is empty
-  if (editorView.state.doc.length === 0) {
-    return messages;
-  }
-
-  const tree = syntaxTree(editorView.state);
-
-  tree.iterate({
-    enter: node => {
-      if (node.type.isError) {
-
-        const error = node.toString();
-
-        /* The error has the pattern [⚠ || ⚠(NodeType)]. The regex extracts the node type from inside the brackets */
-        const match = /\((.*?)\)/.exec(error);
-        const nodeType = match && match[1];
-
-        let message;
-
-        if (nodeType) {
-          message = 'unexpected ' + nodeType;
-        } else {
-          message = 'expression expected';
-        }
-
-        messages.push(
-          {
-            from: node.from,
-            to: node.to,
-            severity: 'error',
-            message: message,
-            source: 'syntaxError'
-          }
-        );
-      }
-    }
-  });
-
-  return messages;
-};
-
-var syntaxLinter = linter$1(FeelLinter);
-
-var linter = [ syntaxLinter ];
+var linter = [ linter$1(cmFeelLinter()) ];
 
 const baseTheme = EditorView.theme({
   '& .cm-content': {
@@ -574,22 +645,35 @@ const syntaxClasses = syntaxHighlighting(
 
 var theme = [ baseTheme, highlightTheme, syntaxClasses ];
 
+/**
+ * @typedef {object} Variable
+ * @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
+ */
+
+const autocompletionConf = new Compartment();
+
 /**
  * Creates a FEEL editor in the supplied container
  *
  * @param {Object} config
  * @param {DOMNode} config.container
+ * @param {DOMNode|String} [config.tooltipContainer]
  * @param {Function} [config.onChange]
  * @param {Function} [config.onKeyDown]
  * @param {Function} [config.onLint]
  * @param {Boolean} [config.readOnly]
  * @param {String} [config.value]
- * @param {Array} [config.variables]
+ * @param {Variable[]} [config.variables]
  *
  * @returns {Object} editor
  */
 function FeelEditor({
   container,
+  tooltipContainer,
   onChange = () => {},
   onKeyDown = () => {},
   onLint = () => {},
@@ -624,20 +708,32 @@ function FeelEditor({
     }
   );
 
+  if (typeof tooltipContainer === 'string') {
+    tooltipContainer = document.querySelector(tooltipContainer);
+  }
+
+  const tooltipLayout = tooltipContainer ? tooltips({
+    tooltipSpace: function() {
+      return tooltipContainer.getBoundingClientRect();
+    }
+  }) : [];
+
   const extensions = [
+    autocompletionConf.of(variablesFacet.of(variables)),
+    autocompletion(),
+    bracketMatching(),
+    changeHandler,
+    closeBrackets(),
+    indentOnInput(),
+    keyHandler,
     keymap.of([
       ...defaultKeymap,
     ]),
-    changeHandler,
-    keyHandler,
     language(),
-    autocompletion(variables),
-    theme,
     linter,
-    indentOnInput(),
-    bracketMatching(),
-    closeBrackets(),
-    lintHandler
+    lintHandler,
+    tooltipLayout,
+    theme
   ];
 
   if (readOnly) {
@@ -698,4 +794,15 @@ FeelEditor.prototype.getSelection = function() {
   return this._cmEditor.state.selection;
 };
 
+/**
+ * Set variables to be used for autocompletion.
+ * @param {Variable[]} variables
+ * @returns {void}
+ */
+FeelEditor.prototype.setVariables = function(variables) {
+  this._cmEditor.dispatch({
+    effects: autocompletionConf.reconfigure(variablesFacet.of(variables))
+  });
+};
+
 export { FeelEditor as default };

package/dist/index.js

@@ -8,6 +8,7 @@ var state = require('@codemirror/state');
 var view = require('@codemirror/view');
 var langFeel = require('lang-feel');
 var minDom = require('min-dom');
+var feelLint = require('@bpmn-io/feel-lint');
 var highlight = require('@lezer/highlight');
 
 // helpers ///////////////////////////////
@@ -373,9 +374,10 @@ const options = tags.map(tag => autocomplete.snippetCompletion(
     label: tag.name,
     type: 'function',
     info: () => {
-      const html = minDom.domify(tag.description);
+      const html = minDom.domify(`<div class="description">${tag.description}<div>`);
       return html;
-    }
+    },
+    boost: -1
   }
 ));
 
@@ -409,7 +411,121 @@ var builtins = context => {
   };
 };
 
-var variables = variables => context => {
+/**
+ * @type {Facet<import('..').Variable[]>} Variable
+ */
+const variablesFacet = state.Facet.define();
+
+var pathExpression = context => {
+  const variables = context.state.facet(variablesFacet)[0];
+  const nodeBefore = language$1.syntaxTree(context.state).resolve(context.pos, -1);
+
+  if (!isPathExpression(nodeBefore)) {
+    return;
+  }
+
+  const expression = findPathExpression(nodeBefore);
+
+  // if the cursor is directly after the `.`, variable starts at the cursor position
+  const from = nodeBefore === expression ? context.pos : nodeBefore.from;
+
+  const path = getPath(expression, context);
+
+  let options = variables;
+  for (var i = 0; i < path.length - 1; i++) {
+    var childVar = options.find(val => val.name === path[i].name);
+
+    if (!childVar) {
+      return null;
+    }
+
+    // only suggest if variable type matches
+    if (
+      childVar.isList !== 'optional' &&
+      !!childVar.isList !== path[i].isList
+    ) {
+      return;
+    }
+
+    options = childVar.entries;
+  }
+
+  if (!options) return;
+
+  options = options.map(v => ({
+    label: v.name,
+    type: 'variable',
+    info: v.info,
+    detail: v.detail
+  }));
+
+  const result = {
+    from: from,
+    options: options
+  };
+
+  return result;
+};
+
+
+function findPathExpression(node) {
+  while (node) {
+    if (node.name === 'PathExpression') {
+      return node;
+    }
+    node = node.parent;
+  }
+}
+
+// parses the path expression into a list of variable names with type information
+// e.g. foo[0].bar => [ { name: 'foo', isList: true }, { name: 'bar', isList: false } ]
+function getPath(node, context) {
+  let path = [];
+
+  for (let child = node.firstChild; child; child = child.nextSibling) {
+    if (child.name === 'PathExpression') {
+      path.push(...getPath(child, context));
+    } else if (child.name === 'FilterExpression') {
+      path.push(...getFilter(child, context));
+    }
+    else {
+      path.push({
+        name: getNodeContent(child, context),
+        isList: false
+      });
+    }
+  }
+  return path;
+}
+
+function getFilter(node, context) {
+  const list = node.firstChild;
+
+  if (list.name === 'PathExpression') {
+    const path = getPath(list, context);
+    const last = path[path.length - 1];
+    last.isList = true;
+
+    return path;
+  }
+
+  return [ {
+    name: getNodeContent(list, context),
+    isList: true
+  } ];
+}
+
+function getNodeContent(node, context) {
+  return context.state.sliceDoc(node.from, node.to);
+}
+
+/**
+ * @type {import('@codemirror/autocomplete').CompletionSource}
+ */
+var variables = context => {
+
+  const variables = context.state.facet(variablesFacet)[0];
+
   const options = variables.map(v => ({
     label: v.name,
     type: 'variable',
@@ -448,13 +564,14 @@ var variables = variables => context => {
   return result;
 };
 
-function autocompletion(context) {
+function autocompletion() {
   return [
     autocomplete.autocompletion({
       override: [
-        variables(context),
+        variables,
         builtins,
-        autocomplete.completeFromList(langFeel.snippets)
+        autocomplete.completeFromList(langFeel.snippets.map(s => ({ ...s, boost: -1 }))),
+        pathExpression
       ]
     })
   ];
@@ -464,53 +581,7 @@ function language() {
   return new language$1.LanguageSupport(langFeel.feelLanguage, [ ]);
 }
 
-const FeelLinter = function(editorView) {
-  const messages = [];
-
-  // don't lint if the Editor is empty
-  if (editorView.state.doc.length === 0) {
-    return messages;
-  }
-
-  const tree = language$1.syntaxTree(editorView.state);
-
-  tree.iterate({
-    enter: node => {
-      if (node.type.isError) {
-
-        const error = node.toString();
-
-        /* The error has the pattern [⚠ || ⚠(NodeType)]. The regex extracts the node type from inside the brackets */
-        const match = /\((.*?)\)/.exec(error);
-        const nodeType = match && match[1];
-
-        let message;
-
-        if (nodeType) {
-          message = 'unexpected ' + nodeType;
-        } else {
-          message = 'expression expected';
-        }
-
-        messages.push(
-          {
-            from: node.from,
-            to: node.to,
-            severity: 'error',
-            message: message,
-            source: 'syntaxError'
-          }
-        );
-      }
-    }
-  });
-
-  return messages;
-};
-
-var syntaxLinter = lint.linter(FeelLinter);
-
-var linter = [ syntaxLinter ];
+var linter = [ lint.linter(feelLint.cmFeelLinter()) ];
 
 const baseTheme = view.EditorView.theme({
   '& .cm-content': {
@@ -576,22 +647,35 @@ const syntaxClasses = language$1.syntaxHighlighting(
 
 var theme = [ baseTheme, highlightTheme, syntaxClasses ];
 
+/**
+ * @typedef {object} Variable
+ * @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
+ */
+
+const autocompletionConf = new state.Compartment();
+
 /**
  * Creates a FEEL editor in the supplied container
  *
  * @param {Object} config
  * @param {DOMNode} config.container
+ * @param {DOMNode|String} [config.tooltipContainer]
  * @param {Function} [config.onChange]
  * @param {Function} [config.onKeyDown]
  * @param {Function} [config.onLint]
  * @param {Boolean} [config.readOnly]
  * @param {String} [config.value]
- * @param {Array} [config.variables]
+ * @param {Variable[]} [config.variables]
  *
  * @returns {Object} editor
  */
 function FeelEditor({
   container,
+  tooltipContainer,
   onChange = () => {},
   onKeyDown = () => {},
   onLint = () => {},
@@ -626,20 +710,32 @@ function FeelEditor({
     }
   );
 
+  if (typeof tooltipContainer === 'string') {
+    tooltipContainer = document.querySelector(tooltipContainer);
+  }
+
+  const tooltipLayout = tooltipContainer ? view.tooltips({
+    tooltipSpace: function() {
+      return tooltipContainer.getBoundingClientRect();
+    }
+  }) : [];
+
   const extensions = [
+    autocompletionConf.of(variablesFacet.of(variables)),
+    autocompletion(),
+    language$1.bracketMatching(),
+    changeHandler,
+    autocomplete.closeBrackets(),
+    language$1.indentOnInput(),
+    keyHandler,
     view.keymap.of([
       ...commands.defaultKeymap,
     ]),
-    changeHandler,
-    keyHandler,
     language(),
-    autocompletion(variables),
-    theme,
     linter,
-    language$1.indentOnInput(),
-    language$1.bracketMatching(),
-    autocomplete.closeBrackets(),
-    lintHandler
+    lintHandler,
+    tooltipLayout,
+    theme
   ];
 
   if (readOnly) {
@@ -700,4 +796,15 @@ FeelEditor.prototype.getSelection = function() {
   return this._cmEditor.state.selection;
 };
 
+/**
+ * Set variables to be used for autocompletion.
+ * @param {Variable[]} variables
+ * @returns {void}
+ */
+FeelEditor.prototype.setVariables = function(variables) {
+  this._cmEditor.dispatch({
+    effects: autocompletionConf.reconfigure(variablesFacet.of(variables))
+  });
+};
+
 module.exports = FeelEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/feel-editor",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Editor for FEEL expressions.",
   "files": [
     "dist"
@@ -45,17 +45,17 @@
   "license": "MIT",
   "dependencies": {
     "@babel/core": "^7.20.2",
-    "@codemirror/autocomplete": "^6.1.1",
-    "@codemirror/commands": "^6.0.0",
-    "@codemirror/language": "^6.0.0",
-    "@codemirror/lint": "^6.0.0",
-    "@codemirror/state": "^6.0.0",
-    "@codemirror/view": "^6.0.0",
-    "@lezer/highlight": "^1.0.0",
+    "@bpmn-io/feel-lint": "^0.1.1",
+    "@codemirror/autocomplete": "^6.3.2",
+    "@codemirror/commands": "^6.1.2",
+    "@codemirror/language": "^6.3.1",
+    "@codemirror/lint": "^6.1.0",
+    "@codemirror/state": "^6.1.4",
+    "@codemirror/view": "^6.5.1",
+    "@lezer/highlight": "^1.1.2",
     "babel-loader": "^9.1.0",
     "babel-plugin-istanbul": "^6.1.1",
-    "lang-feel": "^0.0.3",
-    "lezer-feel": "^0.14.1",
+    "lang-feel": "^0.1.0",
     "min-dom": "^4.0.1"
   },
   "devDependencies": {
@@ -81,7 +81,7 @@
     "mocha": "^10.0.0",
     "mocha-test-container-support": "^0.2.0",
     "npm-run-all": "^4.1.5",
-    "puppeteer": "^19.2.2",
+    "puppeteer": "^19.3.0",
     "rollup": "^3.3.0",
     "sinon": "^14.0.0",
     "sinon-chai": "^3.7.0",