@bpmn-io/feel-editor 1.12.0 → 1.12.1

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { snippetCompletion, autocompletion, closeBrackets } from '@codemirror/autocomplete';
+import { snippetCompletion, completeFromList, autocompletion, closeBrackets } from '@codemirror/autocomplete';
 import { defaultKeymap } from '@codemirror/commands';
 import { syntaxHighlighting, HighlightStyle, syntaxTree, bracketMatching, indentOnInput } from '@codemirror/language';
 import { linter as linter$1, setDiagnosticsEffect } from '@codemirror/lint';
@@ -148,7 +148,7 @@ function pathExpressionCompletion({ variables }) {
     const nodeBefore = syntaxTree(context.state).resolve(context.pos, -1);
 
     if (!isPathExpression(nodeBefore)) {
-      return;
+      return null;
     }
 
     const expression = findPathExpression(nodeBefore);
@@ -169,26 +169,27 @@ function pathExpressionCompletion({ variables }) {
       // only suggest if variable type matches
       if (
         childVar.isList !== 'optional' &&
-        !!childVar.isList !== path[i].isList
+         !!childVar.isList !== path[i].isList
       ) {
-        return;
+        return null;
       }
 
       options = childVar.entries;
     }
 
-    if (!options) return;
+    if (!options) return null;
 
-    options = options.map(v => ({
-      label: v.name,
-      type: 'variable',
-      info: v.info,
-      detail: v.detail
-    }));
+    const completionOptions = options.map(option => (
+      {
+        label: option.name,
+        type: 'variable',
+        info: option.info,
+        detail: option.detail
+      }));
 
     const result = {
       from: from,
-      options: options
+      options: completionOptions
     };
 
     return result;
@@ -312,8 +313,8 @@ function getVariableSuggestions(variables, builtins) {
 
 /**
  * @param {import('..').Variable} variable
- * @param {number} boost
-
+ * @param {number} [boost]
+ *
  * @returns {import('@codemirror/autocomplete').Completion}
  */
 function createVariableSuggestion(variable, boost) {
@@ -383,7 +384,7 @@ function completions({ variables = [], builtins = [] }) {
   return [
     pathExpressionCompletion({ variables }),
     variableCompletion({ variables, builtins }),
-    snippets,
+    completeFromList(snippets),
     ...keywordCompletions
   ];
 }
@@ -452,12 +453,12 @@ const parserDialectFacet = Facet.define();
 /**
  * @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 | (() => HTMLElement)} [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 {boolean|'optional'} [isList] whether the variable is a list
+ * @property {Array<Variable>} [entries] 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
+ * @property {Array<{name: string, type?: string}>} [params] function parameters
  */
 
 /**
@@ -549,12 +550,14 @@ const placeholderConf = new Compartment();
  * @param {ParserDialect} [config.parserDialect]
  * @param {DOMNode|String} [config.tooltipContainer]
  * @param {Function} [config.onChange]
- * @param {Function} [config.onKeyDown]
+ * @param {(event: KeyboardEvent, view: import('@codemirror/view').EditorView) => boolean | void} [config.onKeyDown]
  * @param {Function} [config.onLint]
  * @param {Boolean} [config.readOnly]
  * @param {String} [config.value]
  * @param {Variable[]} [config.variables]
  * @param {Variable[]} [config.builtins]
+ * @param {Object} [config.contentAttributes]
+ * @param {String} [config.placeholder]
  */
 function FeelEditor({
   extensions: editorExtensions = [],
@@ -600,12 +603,12 @@ function FeelEditor({
   );
 
   if (typeof tooltipContainer === 'string') {
-    tooltipContainer = document.querySelector(tooltipContainer);
+    tooltipContainer = /** @type {HTMLElement} */ (document.querySelector(tooltipContainer));
   }
 
   const tooltipLayout = tooltipContainer ? tooltips({
     tooltipSpace: function() {
-      return tooltipContainer.getBoundingClientRect();
+      return /** @type {HTMLElement} */ (tooltipContainer).getBoundingClientRect();
     }
   }) : [];
 
@@ -685,8 +688,7 @@ FeelEditor.prototype.focus = function(position) {
  * Returns the current selection ranges. If no text is selected, a single
  * range with the start and end index at the cursor position will be returned.
  *
- * @returns {Object} selection
- * @returns {Array} selection.ranges
+ * @returns {import('@codemirror/state').EditorSelection} selection - Selection object with ranges array
  */
 FeelEditor.prototype.getSelection = function() {
   return this._cmEditor.state.selection;

package/dist/index.js

@@ -150,7 +150,7 @@ function pathExpressionCompletion({ variables }) {
     const nodeBefore = language$1.syntaxTree(context.state).resolve(context.pos, -1);
 
     if (!isPathExpression(nodeBefore)) {
-      return;
+      return null;
     }
 
     const expression = findPathExpression(nodeBefore);
@@ -171,26 +171,27 @@ function pathExpressionCompletion({ variables }) {
       // only suggest if variable type matches
       if (
         childVar.isList !== 'optional' &&
-        !!childVar.isList !== path[i].isList
+         !!childVar.isList !== path[i].isList
       ) {
-        return;
+        return null;
       }
 
       options = childVar.entries;
     }
 
-    if (!options) return;
+    if (!options) return null;
 
-    options = options.map(v => ({
-      label: v.name,
-      type: 'variable',
-      info: v.info,
-      detail: v.detail
-    }));
+    const completionOptions = options.map(option => (
+      {
+        label: option.name,
+        type: 'variable',
+        info: option.info,
+        detail: option.detail
+      }));
 
     const result = {
       from: from,
-      options: options
+      options: completionOptions
     };
 
     return result;
@@ -314,8 +315,8 @@ function getVariableSuggestions(variables, builtins) {
 
 /**
  * @param {import('..').Variable} variable
- * @param {number} boost
-
+ * @param {number} [boost]
+ *
  * @returns {import('@codemirror/autocomplete').Completion}
  */
 function createVariableSuggestion(variable, boost) {
@@ -385,7 +386,7 @@ function completions({ variables = [], builtins = [] }) {
   return [
     pathExpressionCompletion({ variables }),
     variableCompletion({ variables, builtins }),
-    langFeel.snippets,
+    autocomplete.completeFromList(langFeel.snippets),
     ...langFeel.keywordCompletions
   ];
 }
@@ -454,12 +455,12 @@ const parserDialectFacet = state.Facet.define();
 /**
  * @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 | (() => HTMLElement)} [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 {boolean|'optional'} [isList] whether the variable is a list
+ * @property {Array<Variable>} [entries] 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
+ * @property {Array<{name: string, type?: string}>} [params] function parameters
  */
 
 /**
@@ -551,12 +552,14 @@ const placeholderConf = new state.Compartment();
  * @param {ParserDialect} [config.parserDialect]
  * @param {DOMNode|String} [config.tooltipContainer]
  * @param {Function} [config.onChange]
- * @param {Function} [config.onKeyDown]
+ * @param {(event: KeyboardEvent, view: import('@codemirror/view').EditorView) => boolean | void} [config.onKeyDown]
  * @param {Function} [config.onLint]
  * @param {Boolean} [config.readOnly]
  * @param {String} [config.value]
  * @param {Variable[]} [config.variables]
  * @param {Variable[]} [config.builtins]
+ * @param {Object} [config.contentAttributes]
+ * @param {String} [config.placeholder]
  */
 function FeelEditor({
   extensions: editorExtensions = [],
@@ -602,12 +605,12 @@ function FeelEditor({
   );
 
   if (typeof tooltipContainer === 'string') {
-    tooltipContainer = document.querySelector(tooltipContainer);
+    tooltipContainer = /** @type {HTMLElement} */ (document.querySelector(tooltipContainer));
   }
 
   const tooltipLayout = tooltipContainer ? view.tooltips({
     tooltipSpace: function() {
-      return tooltipContainer.getBoundingClientRect();
+      return /** @type {HTMLElement} */ (tooltipContainer).getBoundingClientRect();
     }
   }) : [];
 
@@ -687,8 +690,7 @@ FeelEditor.prototype.focus = function(position) {
  * Returns the current selection ranges. If no text is selected, a single
  * range with the start and end index at the cursor position will be returned.
  *
- * @returns {Object} selection
- * @returns {Array} selection.ranges
+ * @returns {import('@codemirror/state').EditorSelection} selection - Selection object with ranges array
  */
 FeelEditor.prototype.getSelection = function() {
   return this._cmEditor.state.selection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/feel-editor",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "description": "Editor for FEEL expressions.",
   "files": [
     "dist"
@@ -8,11 +8,14 @@
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "scripts": {
-    "all": "run-s lint test build",
+    "all": "run-s lint check-types test build",
     "test": "karma start",
     "build": "rollup -c --bundleConfigAsCjs",
     "build:watch": "npm run build -- -w",
     "lint": "eslint .",
+    "check-types": "run-s check-types:*",
+    "check-types:src": "tsc",
+    "check-types:test": "tsc -p test",
     "start": "cross-env SINGLE_START=true npm run dev",
     "start:camunda": "cross-env SINGLE_START=camunda npm run dev",
     "dev": "npm test -- --auto-watch --no-single-run",
@@ -46,6 +49,7 @@
   "license": "MIT",
   "dependencies": {
     "@bpmn-io/feel-lint": "^2.1.0",
+    "@bpmn-io/lang-feel": "^2.4.0",
     "@camunda/feel-builtins": "^0.2.0",
     "@codemirror/autocomplete": "^6.16.2",
     "@codemirror/commands": "^6.8.0",
@@ -54,7 +58,6 @@
     "@codemirror/state": "^6.5.1",
     "@codemirror/view": "^6.36.2",
     "@lezer/highlight": "^1.2.1",
-    "@bpmn-io/lang-feel": "^2.4.0",
     "min-dom": "^4.2.1"
   },
   "devDependencies": {
@@ -63,6 +66,10 @@
     "@rollup/plugin-json": "^6.1.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/chai": "^5.2.3",
+    "@types/mocha": "^10.0.10",
+    "@types/sinon": "^17.0.4",
+    "@types/sinon-chai": "^4.0.0",
     "babel-loader": "^9.2.1",
     "babel-plugin-istanbul": "^7.0.0",
     "chai": "^4.5.0",
@@ -85,6 +92,7 @@
     "rollup": "^4.31.0",
     "sinon": "^17.0.1",
     "sinon-chai": "^3.7.0",
+    "typescript": "^5.9.3",
     "webpack": "^5.97.1"
   }
 }