@bpmn-io/feel-editor 0.6.0 → 0.7.1

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,7 +39,13 @@ 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',
+          ...
+        }
+      ]
     }
   ]
 });
@@ -51,7 +58,7 @@ editor.setVariables([
   {
     name: 'newName',
     detail: 'new variable inline info',
-    info: 'new pop-out info
+    info: 'new pop-out info'
   }
 ]);
 ```

package/dist/index.es.js

@@ -6,6 +6,7 @@ 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
   }
 ));
 
@@ -412,6 +414,109 @@ var builtins = context => {
  */
 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}
  */
@@ -463,7 +568,8 @@ function autocompletion() {
       override: [
         variables,
         builtins,
-        completeFromList(snippets)
+        completeFromList(snippets.map(s => ({ ...s, boost: -1 }))),
+        pathExpression
       ]
     })
   ];
@@ -473,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': {
@@ -531,6 +591,16 @@ const baseTheme = EditorView.theme({
   '&.cm-editor.cm-focused': {
     outline: 'none',
   },
+  '& .cm-completionInfo': {
+    whiteSpace: 'pre-wrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+
+  // Don't wrap whitespace for custom HTML
+  '& .cm-completionInfo > *': {
+    whiteSpace: 'normal'
+  },
   '& .cm-completionInfo ul': {
     margin: 0,
     paddingLeft: '15px'
@@ -587,9 +657,11 @@ var theme = [ baseTheme, highlightTheme, syntaxClasses ];
 
 /**
  * @typedef {object} Variable
- * @property {string} name
- * @property {string} [info]
- * @property {string} [detail]
+ * @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();

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
   }
 ));
 
@@ -414,6 +416,109 @@ var builtins = context => {
  */
 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}
  */
@@ -465,7 +570,8 @@ function autocompletion() {
       override: [
         variables,
         builtins,
-        autocomplete.completeFromList(langFeel.snippets)
+        autocomplete.completeFromList(langFeel.snippets.map(s => ({ ...s, boost: -1 }))),
+        pathExpression
       ]
     })
   ];
@@ -475,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': {
@@ -533,6 +593,16 @@ const baseTheme = view.EditorView.theme({
   '&.cm-editor.cm-focused': {
     outline: 'none',
   },
+  '& .cm-completionInfo': {
+    whiteSpace: 'pre-wrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+
+  // Don't wrap whitespace for custom HTML
+  '& .cm-completionInfo > *': {
+    whiteSpace: 'normal'
+  },
   '& .cm-completionInfo ul': {
     margin: 0,
     paddingLeft: '15px'
@@ -589,9 +659,11 @@ var theme = [ baseTheme, highlightTheme, syntaxClasses ];
 
 /**
  * @typedef {object} Variable
- * @property {string} name
- * @property {string} [info]
- * @property {string} [detail]
+ * @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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/feel-editor",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Editor for FEEL expressions.",
   "files": [
     "dist"
@@ -45,6 +45,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/core": "^7.20.2",
+    "@bpmn-io/feel-lint": "^0.1.1",
     "@codemirror/autocomplete": "^6.3.2",
     "@codemirror/commands": "^6.1.2",
     "@codemirror/language": "^6.3.1",
@@ -80,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",