@valtzu/codemirror-lang-el 0.10.0 → 1.0.0

package/CHANGELOG.md

@@ -1,6 +1,12 @@
 CHANGELOG
 =========
 
+1.0
+---
+
+* Render completion info as HTML
+* Bump to stable
+
 0.10
 ---
 

package/CONFIGURATION.md

@@ -0,0 +1,108 @@
+
+## Enum
+
+- [ELScalar](#elscalar)
+
+### ELScalar
+
+
+
+| Property | Type | Description |
+| ---------- | ---------- | ---------- |
+| `Bool` | `'bool'` | Equivalent to PHP `bool` |
+| `Number` | `'number'` | Equivalent to PHP `int` or `float` |
+| `String` | `'string'` | Equivalent to PHP `string` |
+| `Null` | `'null'` | Equivalent to PHP `null` |
+| `Any` | `'any'` | Equivalent to PHP `mixed` |
+
+
+## Interfaces
+
+- [ExpressionLanguageConfig](#expressionlanguageconfig)
+- [ELType](#eltype)
+- [ELIdentifier](#elidentifier)
+- [ELFunction](#elfunction)
+- [ELParameter](#elparameter)
+- [ELKeyword](#elkeyword)
+
+### ExpressionLanguageConfig
+
+The configuration object that is passed to `expressionlanguage` function
+
+| Property | Type | Description |
+| ---------- | ---------- | ---------- |
+| `types` | `{ [key: string]: ELType; } or undefined` | Type definitions used in `identifiers` and `functions` |
+| `identifiers` | `ELIdentifier[] or undefined` | Top-level variables |
+| `functions` | `ELFunction[] or undefined` | Top-level functions |
+
+
+### ELType
+
+
+
+| Property | Type | Description |
+| ---------- | ---------- | ---------- |
+| `identifiers` | `ELIdentifier[] or undefined` | Properties of the object |
+| `functions` | `ELFunction[] or undefined` | Methods of the object |
+| `info` | `string or undefined` |  |
+
+
+### ELIdentifier
+
+Represents a variable or a property of an object
+
+| Property | Type | Description |
+| ---------- | ---------- | ---------- |
+| `name` | `string` |  |
+| `detail` | `string or undefined` | If set, this is shown instead of `type` |
+| `info` | `string or undefined` | Text to show in hover tooltip, autocomplete etc. |
+| `type` | `string[] or undefined` | All possible types for this identifier |
+
+
+### ELFunction
+
+Represents a function or a method of an object
+
+| Property | Type | Description |
+| ---------- | ---------- | ---------- |
+| `name` | `string` |  |
+| `args` | `ELParameter[] or undefined` |  |
+| `info` | `string or undefined` |  |
+| `returnType` | `string[] or undefined` |  |
+
+
+### ELParameter
+
+
+
+| Property | Type | Description |
+| ---------- | ---------- | ---------- |
+| `name` | `string` |  |
+| `type` | `string[] or undefined` |  |
+| `info` | `string or undefined` |  |
+| `optional` | `boolean or undefined` |  |
+
+
+### ELKeyword
+
+
+
+| Property | Type | Description |
+| ---------- | ---------- | ---------- |
+| `name` | `string` |  |
+| `detail` | `string or undefined` |  |
+| `info` | `string or undefined` |  |
+
+
+## Types
+
+- [ELTypeName](#eltypename)
+
+### ELTypeName
+
+One of predefined types (`ELScalar`) or a custom type from `ExpressionLanguageConfig.types`
+
+| Type | Type |
+| ---------- | ---------- |
+| `ELTypeName` | `ELScalar or string` |
+

package/README.md

@@ -1,7 +1,5 @@
 ## Symfony Expression Language support for CodeMirror 6
 
-> :warning: **This is unstable**: Expect breaking changes until v1 is out.
-
 ### Features
 
 #### Linting
@@ -58,6 +56,10 @@ yarn add @valtzu/codemirror-lang-el
 
 ---
 
+### Configuration
+
+See [CONFIGURATION.md](CONFIGURATION.md)
+
 ### Example
 
 [Live demo](https://jsfiddle.net/turse2xq/)

package/dist/index.cjs

@@ -35,12 +35,18 @@ const parser = lr.LRParser.deserialize({
   tokenPrec: 532
 });
 
+// generate CONFIGURATION.md from this file by running "tsdoc --src=src/types.ts --dest=CONFIGURATION.md --noemoji --types"
 exports.ELScalar = void 0;
 (function (ELScalar) {
+    /** Equivalent to PHP `bool` */
     ELScalar["Bool"] = "bool";
+    /** Equivalent to PHP `int` or `float` */
     ELScalar["Number"] = "number";
+    /** Equivalent to PHP `string` */
     ELScalar["String"] = "string";
+    /** Equivalent to PHP `null` */
     ELScalar["Null"] = "null";
+    /** Equivalent to PHP `mixed` */
     ELScalar["Any"] = "any";
 })(exports.ELScalar || (exports.ELScalar = {}));
 
@@ -70,6 +76,11 @@ const createInfoElement = (html) => {
     dom.className = 'cm-diagnostic';
     return dom;
 };
+const createCompletionInfoElement = (html) => {
+    const dom = document.createElement("div");
+    dom.innerHTML = html;
+    return dom;
+};
 function resolveFunctionDefinition(node, state, config) {
     var _a;
     if (!node) {
@@ -192,6 +203,7 @@ const keywords = [
 
 var utils = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    createCompletionInfoElement: createCompletionInfoElement,
     createInfoElement: createInfoElement,
     getExpressionLanguageConfig: getExpressionLanguageConfig,
     keywords: keywords,
@@ -301,7 +313,7 @@ const autocompleteFunction = (x) => {
             view.dispatch(Object.assign(Object.assign({}, autocomplete.insertCompletionText(view.state, `${x.name}()`, from, to)), { selection: { anchor: from + x.name.length + (((_b = (_a = x.args) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 ? 1 : 2) } }));
         },
         detail: (_c = x.returnType) === null || _c === void 0 ? void 0 : _c.join('|'),
-        info: x.info,
+        info: () => ({ dom: createCompletionInfoElement(x.info) }),
         type: "function",
     });
 };
@@ -310,7 +322,7 @@ const autocompleteIdentifier = (x) => {
     return ({
         label: x.name,
         apply: x.name,
-        info: x.info,
+        info: () => ({ dom: createCompletionInfoElement(x.info) }),
         detail: x.detail || ((_a = x.type) === null || _a === void 0 ? void 0 : _a.join('|')),
         type: 'variable',
     });
@@ -323,7 +335,7 @@ function completeOperatorKeyword(state, config, tree, from, to, explicit) {
         options: (_a = keywords.map(({ name, info, detail }) => ({
             label: name,
             apply: `${name} `,
-            info: info,
+            info: () => ({ dom: createCompletionInfoElement(info) }),
             detail,
             type: "keyword"
         }))) !== null && _a !== void 0 ? _a : [],
@@ -536,6 +548,9 @@ const baseTheme = view.EditorView.baseTheme({
         fontSize: ".8em",
         fontStyle: "monospace",
         backgroundColor: "rgba(127, 127, 127, .3)",
+        display: 'inline-block',
+        padding: '2px 4px',
+        borderRadius: '3px',
     },
 });
 

package/dist/index.d.cts

@@ -5,14 +5,37 @@ import { CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import { SyntaxNode } from '@lezer/common';
 import { Tooltip } from '@codemirror/view';
 
+/**
+ * The configuration object that is passed to `expressionlanguage` function
+ */
+interface ExpressionLanguageConfig {
+    /** Type definitions used in `identifiers` & `functions` */
+    types?: {
+        [key: string]: ELType;
+    };
+    /** Top-level variables */
+    identifiers?: ELIdentifier[];
+    /** Top-level functions */
+    functions?: ELFunction[];
+}
+interface ELType {
+    /** Properties of the object */
+    identifiers?: ELIdentifier[];
+    /** Methods of the object */
+    functions?: ELFunction[];
+    info?: string;
+}
 /**
  * Represents a variable or a property of an object
  */
 interface ELIdentifier {
     name: string;
+    /** If set, this is shown instead of `type` */
     detail?: string;
+    /** Text to show in hover tooltip, autocomplete etc. */
     info?: string;
-    type?: string[];
+    /** All possible types for this identifier */
+    type?: ELTypeName[];
 }
 /**
  * Represents a function or a method of an object
@@ -21,38 +44,35 @@ interface ELFunction {
     name: string;
     args?: ELParameter[];
     info?: string;
-    returnType?: string[];
+    returnType?: ELTypeName[];
 }
 interface ELParameter {
     name: string;
-    type?: string[];
+    type?: ELTypeName[];
     info?: string;
     optional?: boolean;
 }
-interface ELType {
-    identifiers?: ELIdentifier[];
-    functions?: ELFunction[];
-    info?: string;
-}
-interface ExpressionLanguageConfig {
-    types?: {
-        [key: string]: ELType;
-    };
-    identifiers?: ELIdentifier[];
-    functions?: ELFunction[];
-}
 interface ELKeyword {
     name: string;
     detail?: string;
     info?: string;
 }
 declare enum ELScalar {
+    /** Equivalent to PHP `bool` */
     Bool = "bool",
+    /** Equivalent to PHP `int` or `float` */
     Number = "number",
+    /** Equivalent to PHP `string` */
     String = "string",
+    /** Equivalent to PHP `null` */
     Null = "null",
+    /** Equivalent to PHP `mixed` */
     Any = "any"
 }
+/**
+ * One of predefined types (`ELScalar`) or a custom type from `ExpressionLanguageConfig.types`
+ */
+type ELTypeName = ELScalar | string;
 
 declare function expressionLanguageCompletion(context: CompletionContext): CompletionResult | null;
 
@@ -74,6 +94,7 @@ declare const Property: number;
 declare const Variable: number;
 
 declare const createInfoElement: (html: string) => HTMLDivElement;
+declare const createCompletionInfoElement: (html: string) => HTMLDivElement;
 declare function resolveFunctionDefinition(node: SyntaxNode | null, state: EditorState, config: ExpressionLanguageConfig): ELFunction | undefined;
 declare const resolveIdentifier: (nodeTypeId: typeof Method | typeof Property | typeof Function | typeof Variable, identifier?: string, config?: {
     identifiers?: ELIdentifier[];
@@ -83,6 +104,7 @@ declare function resolveTypes(state: EditorState, node: SyntaxNode | undefined |
 declare function getExpressionLanguageConfig(state: EditorState): ExpressionLanguageConfig;
 declare const keywords: ELKeyword[];
 
+declare const utils_d_createCompletionInfoElement: typeof createCompletionInfoElement;
 declare const utils_d_createInfoElement: typeof createInfoElement;
 declare const utils_d_getExpressionLanguageConfig: typeof getExpressionLanguageConfig;
 declare const utils_d_keywords: typeof keywords;
@@ -90,7 +112,7 @@ declare const utils_d_resolveFunctionDefinition: typeof resolveFunctionDefinitio
 declare const utils_d_resolveIdentifier: typeof resolveIdentifier;
 declare const utils_d_resolveTypes: typeof resolveTypes;
 declare namespace utils_d {
-  export { utils_d_createInfoElement as createInfoElement, utils_d_getExpressionLanguageConfig as getExpressionLanguageConfig, utils_d_keywords as keywords, utils_d_resolveFunctionDefinition as resolveFunctionDefinition, utils_d_resolveIdentifier as resolveIdentifier, utils_d_resolveTypes as resolveTypes };
+  export { utils_d_createCompletionInfoElement as createCompletionInfoElement, utils_d_createInfoElement as createInfoElement, utils_d_getExpressionLanguageConfig as getExpressionLanguageConfig, utils_d_keywords as keywords, utils_d_resolveFunctionDefinition as resolveFunctionDefinition, utils_d_resolveIdentifier as resolveIdentifier, utils_d_resolveTypes as resolveTypes };
 }
 
 declare const cursorTooltipField: StateField<readonly Tooltip[]>;
@@ -107,4 +129,4 @@ declare namespace tooltip_d {
 declare const ELLanguage: LRLanguage;
 declare function expressionlanguage(config?: ExpressionLanguageConfig, extensions?: Extension[]): LanguageSupport;
 
-export { type ELFunction, type ELIdentifier, type ELKeyword, ELLanguage, type ELParameter, ELScalar, type ELType, type ExpressionLanguageConfig, complete_d as _complete, linter_d as _linter, tooltip_d as _tooltip, utils_d as _utils, expressionlanguage };
+export { type ELFunction, type ELIdentifier, type ELKeyword, ELLanguage, type ELParameter, ELScalar, type ELType, type ELTypeName, type ExpressionLanguageConfig, complete_d as _complete, linter_d as _linter, tooltip_d as _tooltip, utils_d as _utils, expressionlanguage };

package/dist/index.d.ts

@@ -5,14 +5,37 @@ import { CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import { SyntaxNode } from '@lezer/common';
 import { Tooltip } from '@codemirror/view';
 
+/**
+ * The configuration object that is passed to `expressionlanguage` function
+ */
+interface ExpressionLanguageConfig {
+    /** Type definitions used in `identifiers` & `functions` */
+    types?: {
+        [key: string]: ELType;
+    };
+    /** Top-level variables */
+    identifiers?: ELIdentifier[];
+    /** Top-level functions */
+    functions?: ELFunction[];
+}
+interface ELType {
+    /** Properties of the object */
+    identifiers?: ELIdentifier[];
+    /** Methods of the object */
+    functions?: ELFunction[];
+    info?: string;
+}
 /**
  * Represents a variable or a property of an object
  */
 interface ELIdentifier {
     name: string;
+    /** If set, this is shown instead of `type` */
     detail?: string;
+    /** Text to show in hover tooltip, autocomplete etc. */
     info?: string;
-    type?: string[];
+    /** All possible types for this identifier */
+    type?: ELTypeName[];
 }
 /**
  * Represents a function or a method of an object
@@ -21,38 +44,35 @@ interface ELFunction {
     name: string;
     args?: ELParameter[];
     info?: string;
-    returnType?: string[];
+    returnType?: ELTypeName[];
 }
 interface ELParameter {
     name: string;
-    type?: string[];
+    type?: ELTypeName[];
     info?: string;
     optional?: boolean;
 }
-interface ELType {
-    identifiers?: ELIdentifier[];
-    functions?: ELFunction[];
-    info?: string;
-}
-interface ExpressionLanguageConfig {
-    types?: {
-        [key: string]: ELType;
-    };
-    identifiers?: ELIdentifier[];
-    functions?: ELFunction[];
-}
 interface ELKeyword {
     name: string;
     detail?: string;
     info?: string;
 }
 declare enum ELScalar {
+    /** Equivalent to PHP `bool` */
     Bool = "bool",
+    /** Equivalent to PHP `int` or `float` */
     Number = "number",
+    /** Equivalent to PHP `string` */
     String = "string",
+    /** Equivalent to PHP `null` */
     Null = "null",
+    /** Equivalent to PHP `mixed` */
     Any = "any"
 }
+/**
+ * One of predefined types (`ELScalar`) or a custom type from `ExpressionLanguageConfig.types`
+ */
+type ELTypeName = ELScalar | string;
 
 declare function expressionLanguageCompletion(context: CompletionContext): CompletionResult | null;
 
@@ -74,6 +94,7 @@ declare const Property: number;
 declare const Variable: number;
 
 declare const createInfoElement: (html: string) => HTMLDivElement;
+declare const createCompletionInfoElement: (html: string) => HTMLDivElement;
 declare function resolveFunctionDefinition(node: SyntaxNode | null, state: EditorState, config: ExpressionLanguageConfig): ELFunction | undefined;
 declare const resolveIdentifier: (nodeTypeId: typeof Method | typeof Property | typeof Function | typeof Variable, identifier?: string, config?: {
     identifiers?: ELIdentifier[];
@@ -83,6 +104,7 @@ declare function resolveTypes(state: EditorState, node: SyntaxNode | undefined |
 declare function getExpressionLanguageConfig(state: EditorState): ExpressionLanguageConfig;
 declare const keywords: ELKeyword[];
 
+declare const utils_d_createCompletionInfoElement: typeof createCompletionInfoElement;
 declare const utils_d_createInfoElement: typeof createInfoElement;
 declare const utils_d_getExpressionLanguageConfig: typeof getExpressionLanguageConfig;
 declare const utils_d_keywords: typeof keywords;
@@ -90,7 +112,7 @@ declare const utils_d_resolveFunctionDefinition: typeof resolveFunctionDefinitio
 declare const utils_d_resolveIdentifier: typeof resolveIdentifier;
 declare const utils_d_resolveTypes: typeof resolveTypes;
 declare namespace utils_d {
-  export { utils_d_createInfoElement as createInfoElement, utils_d_getExpressionLanguageConfig as getExpressionLanguageConfig, utils_d_keywords as keywords, utils_d_resolveFunctionDefinition as resolveFunctionDefinition, utils_d_resolveIdentifier as resolveIdentifier, utils_d_resolveTypes as resolveTypes };
+  export { utils_d_createCompletionInfoElement as createCompletionInfoElement, utils_d_createInfoElement as createInfoElement, utils_d_getExpressionLanguageConfig as getExpressionLanguageConfig, utils_d_keywords as keywords, utils_d_resolveFunctionDefinition as resolveFunctionDefinition, utils_d_resolveIdentifier as resolveIdentifier, utils_d_resolveTypes as resolveTypes };
 }
 
 declare const cursorTooltipField: StateField<readonly Tooltip[]>;
@@ -107,4 +129,4 @@ declare namespace tooltip_d {
 declare const ELLanguage: LRLanguage;
 declare function expressionlanguage(config?: ExpressionLanguageConfig, extensions?: Extension[]): LanguageSupport;
 
-export { type ELFunction, type ELIdentifier, type ELKeyword, ELLanguage, type ELParameter, ELScalar, type ELType, type ExpressionLanguageConfig, complete_d as _complete, linter_d as _linter, tooltip_d as _tooltip, utils_d as _utils, expressionlanguage };
+export { type ELFunction, type ELIdentifier, type ELKeyword, ELLanguage, type ELParameter, ELScalar, type ELType, type ELTypeName, type ExpressionLanguageConfig, complete_d as _complete, linter_d as _linter, tooltip_d as _tooltip, utils_d as _utils, expressionlanguage };

package/dist/index.js

@@ -33,11 +33,17 @@ const parser = /*@__PURE__*/LRParser.deserialize({
   tokenPrec: 532
 });
 
+// generate CONFIGURATION.md from this file by running "tsdoc --src=src/types.ts --dest=CONFIGURATION.md --noemoji --types"
 var ELScalar = /*@__PURE__*/(function (ELScalar) {
+    /** Equivalent to PHP `bool` */
     ELScalar["Bool"] = "bool";
+    /** Equivalent to PHP `int` or `float` */
     ELScalar["Number"] = "number";
+    /** Equivalent to PHP `string` */
     ELScalar["String"] = "string";
+    /** Equivalent to PHP `null` */
     ELScalar["Null"] = "null";
+    /** Equivalent to PHP `mixed` */
     ELScalar["Any"] = "any";
 return ELScalar})(ELScalar || (ELScalar = {}));
 
@@ -67,6 +73,11 @@ const createInfoElement = (html) => {
     dom.className = 'cm-diagnostic';
     return dom;
 };
+const createCompletionInfoElement = (html) => {
+    const dom = document.createElement("div");
+    dom.innerHTML = html;
+    return dom;
+};
 function resolveFunctionDefinition(node, state, config) {
     var _a;
     if (!node) {
@@ -189,6 +200,7 @@ const keywords = [
 
 var utils = /*#__PURE__*//*@__PURE__*/Object.freeze({
     __proto__: null,
+    createCompletionInfoElement: createCompletionInfoElement,
     createInfoElement: createInfoElement,
     getExpressionLanguageConfig: getExpressionLanguageConfig,
     keywords: keywords,
@@ -298,7 +310,7 @@ const autocompleteFunction = (x) => {
             view.dispatch(Object.assign(Object.assign({}, insertCompletionText(view.state, `${x.name}()`, from, to)), { selection: { anchor: from + x.name.length + (((_b = (_a = x.args) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 ? 1 : 2) } }));
         },
         detail: (_c = x.returnType) === null || _c === void 0 ? void 0 : _c.join('|'),
-        info: x.info,
+        info: () => ({ dom: createCompletionInfoElement(x.info) }),
         type: "function",
     });
 };
@@ -307,7 +319,7 @@ const autocompleteIdentifier = (x) => {
     return ({
         label: x.name,
         apply: x.name,
-        info: x.info,
+        info: () => ({ dom: createCompletionInfoElement(x.info) }),
         detail: x.detail || ((_a = x.type) === null || _a === void 0 ? void 0 : _a.join('|')),
         type: 'variable',
     });
@@ -320,7 +332,7 @@ function completeOperatorKeyword(state, config, tree, from, to, explicit) {
         options: (_a = keywords.map(({ name, info, detail }) => ({
             label: name,
             apply: `${name} `,
-            info: info,
+            info: () => ({ dom: createCompletionInfoElement(info) }),
             detail,
             type: "keyword"
         }))) !== null && _a !== void 0 ? _a : [],
@@ -533,6 +545,9 @@ const baseTheme = /*@__PURE__*/EditorView.baseTheme({
         fontSize: ".8em",
         fontStyle: "monospace",
         backgroundColor: "rgba(127, 127, 127, .3)",
+        display: 'inline-block',
+        padding: '2px 4px',
+        borderRadius: '3px',
     },
 });
 

package/package.json

@@ -27,7 +27,8 @@
   "devDependencies": {
     "@codemirror/buildhelper": "^1.0.0",
     "@types/mocha": "^10.0.10",
-    "@types/node": "^22.10.5"
+    "@types/node": "^22.10.5",
+    "tsdoc-markdown": "^1.1.1"
   },
   "license": "MIT",
   "repository": {
@@ -38,5 +39,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "version": "0.10.0"
+  "version": "1.0.0"
 }