@fc-components/monaco-editor 0.1.27 → 0.3.1

package/src/expr/validation.ts

@@ -0,0 +1,209 @@
+import * as monaco from 'monaco-editor';
+import { ExprParser } from './parser';
+
+const EXPR_LANG_ID = 'expr';
+
+const parser = new ExprParser();
+
+/**
+ * Validate an expr-lang expression and return Monaco editor markers.
+ * Uses the recursive descent parser for syntax errors,
+ * plus regex-based checks for structural issues like unbalanced quotes/brackets.
+ */
+export const validateExpr = (expr: string): Omit<monaco.editor.IMarker, 'owner' | 'resource'>[] => {
+  const markers: Omit<monaco.editor.IMarker, 'owner' | 'resource'>[] = [];
+
+  if (!expr || expr.trim().length === 0) {
+    return markers;
+  }
+
+  // 1. Parser-based syntax validation
+  const parseErrors = parser.parse(expr);
+  for (const err of parseErrors) {
+    markers.push({
+      severity: monaco.MarkerSeverity.Error,
+      startLineNumber: err.startLine,
+      startColumn: err.startColumn,
+      endLineNumber: err.endLine,
+      endColumn: err.endColumn,
+      message: err.message,
+    });
+  }
+
+  // 2. Line-level structural checks (fallback for issues the parser might miss)
+  const structuralMarkers = validateLineLevel(expr);
+  markers.push(...structuralMarkers);
+
+  return markers;
+};
+
+/**
+ * Basic line-level validation for quotes and bracket balancing.
+ */
+function validateLineLevel(expr: string): Omit<monaco.editor.IMarker, 'owner' | 'resource'>[] {
+  const markers: Omit<monaco.editor.IMarker, 'owner' | 'resource'>[] = [];
+  const lines = expr.split('\n');
+  let inBlockComment = false;
+
+  lines.forEach((line, index) => {
+    const lineNumber = index + 1;
+
+    // Track block comment state
+    if (!inBlockComment) {
+      const blockCommentStart = line.indexOf('/*');
+      if (blockCommentStart !== -1) {
+        const blockCommentEnd = line.indexOf('*/', blockCommentStart + 2);
+        if (blockCommentEnd === -1) {
+          inBlockComment = true;
+        }
+      }
+    } else {
+      const blockCommentEnd = line.indexOf('*/');
+      if (blockCommentEnd !== -1) {
+        inBlockComment = false;
+      }
+      if (inBlockComment || line.trim().startsWith('/*')) {
+        return;
+      }
+    }
+
+    const trimmedLine = line.trim();
+    if (trimmedLine.startsWith('//') || trimmedLine.startsWith('/*')) {
+      return;
+    }
+
+    // Check for unclosed quotes
+    const singleQuotes = countQuotesOutsideBlockComments(line);
+    if (singleQuotes % 2 !== 0) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: "Unclosed single quote '",
+        source: EXPR_LANG_ID,
+      });
+    }
+
+    const doubleQuotes = countDoubleQuotesOutsideBlockComments(line);
+    if (doubleQuotes % 2 !== 0) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unclosed double quote "',
+        source: EXPR_LANG_ID,
+      });
+    }
+
+    const backticks = (line.match(/`/g) || []).length;
+    if (backticks % 2 !== 0) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unclosed backtick `',
+        source: EXPR_LANG_ID,
+      });
+    }
+
+    // Check for unbalanced brackets
+    const openParens = (line.match(/\(/g) || []).length;
+    const closeParens = (line.match(/\)/g) || []).length;
+    if (openParens > closeParens) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unmatched opening parenthesis',
+        source: EXPR_LANG_ID,
+      });
+    } else if (closeParens > openParens) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unmatched closing parenthesis',
+        source: EXPR_LANG_ID,
+      });
+    }
+
+    const openBrackets = (line.match(/\[/g) || []).length;
+    const closeBrackets = (line.match(/\]/g) || []).length;
+    if (openBrackets > closeBrackets) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unmatched opening bracket',
+        source: EXPR_LANG_ID,
+      });
+    } else if (closeBrackets > openBrackets) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unmatched closing bracket',
+        source: EXPR_LANG_ID,
+      });
+    }
+
+    const openBraces = (line.match(/\{/g) || []).length;
+    const closeBraces = (line.match(/\}/g) || []).length;
+    if (openBraces > closeBraces) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unmatched opening curly brace',
+        source: EXPR_LANG_ID,
+      });
+    } else if (closeBraces > openBraces) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unmatched closing curly brace',
+        source: EXPR_LANG_ID,
+      });
+    }
+  });
+
+  return markers;
+}
+
+function countQuotesOutsideBlockComments(line: string): number {
+  const withoutBlockComments = line.replace(/\/\*[\s\S]*?\*\//g, '');
+  return (withoutBlockComments.match(/'/g) || []).length;
+}
+
+function countDoubleQuotesOutsideBlockComments(line: string): number {
+  const withoutBlockComments = line.replace(/\/\*[\s\S]*?\*\//g, '');
+  return (withoutBlockComments.match(/"/g) || []).length;
+}
+
+/**
+ * Validate an expr-lang expression and return a plain array of human-readable error messages.
+ * Returns an empty array if the expression is valid.
+ */
+export function checkExpr(expr: string): string[] {
+  const errors = parser.parse(expr);
+  return errors.map((e) => `${e.startLine}:${e.startColumn}: ${e.message}`);
+}

package/src/index.tsx

@@ -1,7 +1,9 @@
 import promql from './promql';
 import yaml from './yaml';
 import sql from './sql';
+import expr from './expr';
 
 export { promql as PromQLMonacoEditor };
 export { yaml as YamlMonacoEditor };
 export { sql as SqlMonacoEditor };
+export { expr as ExprMonacoEditor };

package/src/promql/__tests__/completions.test.ts

@@ -0,0 +1,72 @@
+import { getCompletions } from '../completion/completions';
+import type { Situation } from '../completion/situation';
+import type { DataProvider } from '../completion/DataProvider';
+
+// Minimal mock DataProvider that returns empty data
+function createMockDataProvider(overrides: Partial<DataProvider> = {}): DataProvider {
+  return {
+    getAllMetricNames: () => [],
+    metricNamesToMetrics: (names: string[]) => names.map((name) => ({ name, help: '', type: '' })),
+    fetchLabels: async () => [],
+    fetchSeries: async () => [],
+    fetchLabelValues: async () => [],
+    getVariablesNames: () => [],
+    durationVariablesCompletion: false,
+    ...overrides,
+  } as unknown as DataProvider;
+}
+
+describe('getCompletions', () => {
+  const mockDataProvider = createMockDataProvider();
+
+  describe('with keyword completion', () => {
+    it('includes "with" in EMPTY completions', async () => {
+      const situation: Situation = { type: 'EMPTY' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      const withCompletion = completions.find((c) => c.label === 'with');
+      expect(withCompletion).toBeDefined();
+      expect(withCompletion!.insertText).toBe('with (');
+      expect(withCompletion!.detail).toContain('cte_name');
+    });
+
+    it('includes "with" in AT_ROOT completions', async () => {
+      const situation: Situation = { type: 'AT_ROOT' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      const withCompletion = completions.find((c) => c.label === 'with');
+      expect(withCompletion).toBeDefined();
+    });
+
+    it('includes "with" in IN_WITH_BODY completions', async () => {
+      const situation: Situation = { type: 'IN_WITH_BODY' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      const withCompletion = completions.find((c) => c.label === 'with');
+      expect(withCompletion).toBeDefined();
+    });
+
+    it('includes "with" in IN_FUNCTION completions', async () => {
+      const situation: Situation = { type: 'IN_FUNCTION' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      const withCompletion = completions.find((c) => c.label === 'with');
+      expect(withCompletion).toBeDefined();
+    });
+  });
+
+  describe('Function completions', () => {
+    it('includes standard PromQL functions', async () => {
+      const situation: Situation = { type: 'AT_ROOT' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      const sumCompletion = completions.find((c) => c.label === 'sum');
+      expect(sumCompletion).toBeDefined();
+      expect(sumCompletion!.type).toBe('FUNCTION');
+    });
+  });
+
+  describe('Duration completions', () => {
+    it('returns duration values for IN_DURATION', async () => {
+      const situation: Situation = { type: 'IN_DURATION' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      expect(completions.length).toBeGreaterThan(0);
+      expect(completions.every((c) => c.type === 'DURATION')).toBe(true);
+    });
+  });
+});

package/src/promql/__tests__/situation.test.ts

@@ -0,0 +1,85 @@
+import { getSituation } from '../completion/situation';
+
+describe('getSituation', () => {
+  describe('EMPTY', () => {
+    it('returns EMPTY for empty text', () => {
+      expect(getSituation('', 0)).toEqual({ type: 'EMPTY' });
+    });
+  });
+
+  describe('IN_WITH_BODY', () => {
+    it('returns IN_WITH_BODY when cursor is after with block', () => {
+      const text = 'with (cpu = sum(rate(foo[5m])))\ncpu';
+      // find the second occurrence of 'cpu' (after the with block)
+      const firstCpu = text.indexOf('cpu');
+      const pos = text.indexOf('cpu', firstCpu + 1);
+      const result = getSituation(text, pos);
+      expect(result).toEqual({ type: 'IN_WITH_BODY' });
+    });
+
+    it('returns IN_WITH_BODY for simple with expression', () => {
+      const text = 'with (a = foo) a';
+      const pos = text.length; // cursor at end
+      const result = getSituation(text, pos);
+      expect(result).toEqual({ type: 'IN_WITH_BODY' });
+    });
+
+    it('returns IN_WITH_BODY for multi-CTE with expressions', () => {
+      const text = 'with (x = rate(foo[5m]), y = sum(bar))\nx + y';
+      const pos = text.length;
+      const result = getSituation(text, pos);
+      expect(result).toEqual({ type: 'IN_WITH_BODY' });
+    });
+
+    it('does NOT return IN_WITH_BODY when cursor is before closing paren', () => {
+      const text = 'with (a = foo|) a';
+      const pipePos = text.indexOf('|');
+      const cleanText = text.slice(0, pipePos) + text.slice(pipePos + 1);
+      const result = getSituation(cleanText, pipePos);
+      expect(result?.type).not.toBe('IN_WITH_BODY');
+    });
+
+    it('does NOT return IN_WITH_BODY for regular query starting with identifier containing "with"', () => {
+      const text = 'without_cpu';
+      const pos = text.length;
+      const result = getSituation(text, pos);
+      expect(result?.type).not.toBe('IN_WITH_BODY');
+    });
+  });
+
+  describe('AT_ROOT', () => {
+    it('returns AT_ROOT for simple metric name', () => {
+      const text = 'node_cpu_seconds_total';
+      const pos = text.length;
+      const result = getSituation(text, pos);
+      expect(result).toEqual({ type: 'AT_ROOT' });
+    });
+
+    it('returns AT_ROOT for function call', () => {
+      const text = 'rate(node_cpu_seconds_total[5m])';
+      const pos = text.length;
+      const result = getSituation(text, pos);
+      expect(result).toEqual({ type: 'AT_ROOT' });
+    });
+  });
+
+  describe('IN_FUNCTION', () => {
+    it('returns IN_FUNCTION inside function body', () => {
+      const text = 'sum()';
+      const pos = text.indexOf(')');
+      const result = getSituation(text, pos);
+      expect(result?.type).toBe('IN_FUNCTION');
+    });
+  });
+
+  describe('IN_DURATION', () => {
+    it('returns a situation for incomplete duration', () => {
+      // Cursor just after `[` but before `]` should trigger some situation
+      const text = 'foo[5';
+      const pos = text.length;
+      const result = getSituation(text, pos);
+      // Result depends on exact parse tree; not null for valid/incomplete input
+      expect(result).toBeDefined();
+    });
+  });
+});

package/src/promql/completion/completions.ts

@@ -58,9 +58,17 @@ const FUNCTION_COMPLETIONS: Completion[] = FUNCTIONS.map((f) => ({
 async function getAllFunctionsAndMetricNamesCompletions(dataProvider: DataProvider): Promise<Completion[]> {
   const metricNames = getAllMetricNamesCompletions(dataProvider);
 
-  return [...FUNCTION_COMPLETIONS, ...metricNames];
+  return [CTE_KEYWORD_COMPLETION, ...FUNCTION_COMPLETIONS, ...metricNames];
 }
 
+const CTE_KEYWORD_COMPLETION: Completion = {
+  type: 'FUNCTION',
+  label: 'with',
+  insertText: 'with (',
+  detail: 'with (cte_name = expr, ...) expr',
+  documentation: 'Define Common Table Expressions (CTEs) for use in the query. MetricsQL extension.',
+};
+
 const DURATION_COMPLETIONS: Completion[] = ['1m', '5m', '10m', '30m', '1h', '1d'].map((text) => ({
   type: 'DURATION',
   label: text,
@@ -177,13 +185,14 @@ export function getCompletions(situation: Situation, dataProvider: DataProvider)
       return Promise.resolve(DURATION_COMPLETIONS);
     case 'IN_FUNCTION':
       return getAllFunctionsAndMetricNamesCompletions(dataProvider);
+    case 'IN_WITH_BODY':
     case 'AT_ROOT': {
       return getAllFunctionsAndMetricNamesCompletions(dataProvider);
     }
     case 'EMPTY': {
       const metricNames = getAllMetricNamesCompletions(dataProvider);
       const historyCompletions = getAllHistoryCompletions(dataProvider);
-      return Promise.resolve([...historyCompletions, ...FUNCTION_COMPLETIONS, ...metricNames]);
+      return Promise.resolve([...historyCompletions, CTE_KEYWORD_COMPLETION, ...FUNCTION_COMPLETIONS, ...metricNames]);
     }
     case 'IN_LABEL_SELECTOR_NO_LABEL_NAME':
       return getLabelNamesForSelectorCompletions(situation.metricName, situation.hasOperator, situation.otherLabels, dataProvider);

package/src/promql/completion/situation.ts

@@ -20,6 +20,8 @@ import {
   StringLiteral,
   UnquotedLabelMatcher,
   VectorSelector,
+  WithExpr,
+  WithAssignment,
 } from '@fc-components/lezer-metricsql';
 
 import { NeverCaseError } from '../util';
@@ -45,7 +47,9 @@ type NodeTypeId =
   | typeof EqlSingle
   | typeof Neq
   | typeof EqlRegex
-  | typeof NeqRegex;
+  | typeof NeqRegex
+  | typeof WithExpr
+  | typeof WithAssignment;
 
 type Path = Array<[Direction, NodeTypeId]>;
 
@@ -128,6 +132,9 @@ export type Situation =
   | {
       type: 'IN_DURATION';
     }
+  | {
+      type: 'IN_WITH_BODY';
+    }
   | {
       type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME';
       metricName?: string;
@@ -216,6 +223,18 @@ const RESOLVERS: Resolver[] = [
     path: [GroupingLabels],
     fun: resolveLabelsForGrouping,
   },
+  {
+    path: [WithExpr],
+    fun: resolveWithExpr,
+  },
+  {
+    path: [WithExpr, PromQL],
+    fun: resolveWithExpr,
+  },
+  {
+    path: [WithAssignment, WithExpr],
+    fun: resolveWithExpr,
+  },
 ];
 
 const LABEL_OP_MAP = new Map<number, LabelOperator>([
@@ -430,6 +449,23 @@ function resolveInFunction(): Situation {
   };
 }
 
+function resolveWithExpr(node: SyntaxNode, text: string, pos: number): Situation | null {
+  // Find the containing WithExpr node (node may be a WithAssignment child)
+  let withExprNode: SyntaxNode | null = node.type.id === WithExpr ? node : node.parent;
+  while (withExprNode && withExprNode.type.id !== WithExpr) {
+    withExprNode = withExprNode.parent;
+  }
+  if (!withExprNode) return null;
+
+  // Only return IN_WITH_BODY when cursor is in the body expression (after the closing ')')
+  const children = getNodeChildren(withExprNode);
+  const closeParen = children.find((c) => getNodeText(c, text) === ')');
+  if (closeParen && pos > closeParen.to) {
+    return { type: 'IN_WITH_BODY' };
+  }
+  return null;
+}
+
 function resolveDurations(): Situation {
   return {
     type: 'IN_DURATION',
@@ -563,6 +599,27 @@ function getErrorNode(tree: Tree, pos: number): SyntaxNode | null {
   return null;
 }
 
+function findMatchingParen(text: string, openPos: number): number {
+  let depth = 0;
+  for (let i = openPos; i < text.length; i++) {
+    if (text[i] === '(') depth++;
+    if (text[i] === ')') {
+      depth--;
+      if (depth === 0) return i;
+    }
+  }
+  return -1;
+}
+
+function isInWithBody(text: string, pos: number): boolean {
+  const withMatch = text.match(/^with\s*\(/i);
+  if (!withMatch) return false;
+  const openParenPos = withMatch[0].length - 1;
+  const closeParenPos = findMatchingParen(text, openParenPos);
+  if (closeParenPos === -1) return false;
+  return pos > closeParenPos;
+}
+
 export function getSituation(text: string, pos: number): Situation | null {
   // there is a special-case when we are at the start of writing text,
   // so we handle that case first
@@ -573,6 +630,13 @@ export function getSituation(text: string, pos: number): Situation | null {
     };
   }
 
+  // text-based check for with body (fallback until grammar supports WithExpr)
+  if (isInWithBody(text, pos)) {
+    return {
+      type: 'IN_WITH_BODY',
+    };
+  }
+
   /**
      PromQL
      Expr

package/src/promql/promql.ts

@@ -243,6 +243,8 @@ for (let _i = 0, aggregations_1 = aggregations; _i < aggregations_1.length; _i++
 // PromQL vector matching + the by and without clauses
 // (https://prometheus.io/docs/prometheus/latest/querying/operators/#vector-matching)
 const vectorMatching = ['on', 'ignoring', 'group_right', 'group_left', 'by', 'without'];
+
+const cteKeywords = ['with'];
 // Produce a regex matching elements : (elt1|elt2|...)
 const vectorMatchingRegex =
   '(' +
@@ -257,7 +259,7 @@ const operators = ['+', '-', '*', '/', '%', '^', '==', '!=', '>', '<', '>=', '<=
 // (https://prometheus.io/docs/prometheus/latest/querying/basics/#offset-modifier)
 const offsetModifier = ['offset'];
 // Merging all the keywords in one list
-const keywords = aggregations.concat(functions).concat(aggregationsOverTime).concat(vectorMatching).concat(offsetModifier);
+const keywords = aggregations.concat(functions).concat(aggregationsOverTime).concat(vectorMatching).concat(offsetModifier).concat(cteKeywords);
 // noinspection JSUnusedGlobalSymbols
 export const language = {
   ignoreCase: false,