@neo4j-cypher/react-codemirror 2.0.0-next.4 → 2.0.0-next.6

package/src/lang-cypher/{lang-cypher.ts → langCypher.ts}

@@ -3,30 +3,39 @@ import {
   Language,
   LanguageSupport,
 } from '@codemirror/language';
-import type { DbSchema } from '@neo4j-cypher/language-support';
+import {
+  setConsoleCommandsEnabled,
+  type DbSchema,
+} from '@neo4j-cypher/language-support';
 import { cypherAutocomplete } from './autocomplete';
-import { ParserAdapter } from './ParserAdapter';
-import { cypherLinter } from './syntax-validation';
+import { ParserAdapter } from './parser-adapter';
+import { signatureHelpTooltip } from './signatureHelp';
+import { cypherLinter, semanticAnalysisLinter } from './syntaxValidation';
 
 const facet = defineLanguageFacet({
   commentTokens: { block: { open: '/*', close: '*/' }, line: '//' },
   closeBrackets: { brackets: ['(', '[', '{', "'", '"', '`'] },
 });
 
-const parserAdapter = new ParserAdapter(facet);
-
-const cypherLanguage = new Language(facet, parserAdapter, [], 'cypher');
-
 export type CypherConfig = {
   lint?: boolean;
   schema?: DbSchema;
+  useLightVersion: boolean;
+  setUseLightVersion?: (useLightVersion: boolean) => void;
 };
 
 export function cypher(config: CypherConfig) {
+  setConsoleCommandsEnabled(true);
+  const parserAdapter = new ParserAdapter(facet, config);
+
+  const cypherLanguage = new Language(facet, parserAdapter, [], 'cypher');
+
   return new LanguageSupport(cypherLanguage, [
     cypherLanguage.data.of({
       autocomplete: cypherAutocomplete(config),
     }),
     cypherLinter(config),
+    semanticAnalysisLinter(config),
+    signatureHelpTooltip(config),
   ]);
 }

package/src/lang-cypher/lintWorker.ts

@@ -0,0 +1,14 @@
+import { validateSemantics } from '@neo4j-cypher/language-support';
+import workerpool from 'workerpool';
+
+workerpool.worker({ validateSemantics });
+
+type LinterArgs = Parameters<typeof validateSemantics>;
+
+export type LinterTask = workerpool.Promise<
+  ReturnType<typeof validateSemantics>
+>;
+
+export type LintWorker = {
+  validateSemantics: (...args: LinterArgs) => LinterTask;
+};

package/src/lang-cypher/parser-adapter.ts

@@ -0,0 +1,145 @@
+import { Facet } from '@codemirror/state';
+import { Input, NodeType, Parser, PartialParse, Tree } from '@lezer/common';
+import {
+  applySyntaxColouring,
+  ParsedCypherToken,
+} from '@neo4j-cypher/language-support';
+
+import Prism from 'prismjs';
+import {
+  CodemirrorParseTokenType,
+  cypherTokenTypeToNode,
+  parserAdapterNodeSet,
+} from './constants';
+// This import will load the cypher support in prisma
+import 'prismjs/components/prism-cypher';
+import { CypherConfig } from './langCypher';
+
+const DEFAULT_NODE_GROUP_SIZE = 4;
+Prism.manual = true;
+
+export class ParserAdapter extends Parser {
+  cypherTokenTypeToNode: Record<CodemirrorParseTokenType, NodeType>;
+
+  constructor(facet: Facet<unknown>, private config: CypherConfig) {
+    super();
+    this.cypherTokenTypeToNode = cypherTokenTypeToNode(facet);
+  }
+
+  createParse(input: Input): PartialParse {
+    return this.startParse(input);
+  }
+
+  /* There are more arguments, but since we don't do any incremental parsing, they are not useful */
+  startParse(input: string | Input): PartialParse {
+    const document =
+      typeof input === 'string' ? input : input.read(0, input.length);
+
+    const tree = this.buildTree(document);
+
+    return {
+      stoppedAt: input.length,
+      parsedPos: input.length,
+      stopAt: () => {
+        return undefined;
+      },
+      advance: () => tree,
+    };
+  }
+
+  private buildTree(document: string) {
+    const parse = this.config.useLightVersion
+      ? this.prismParse(document)
+      : this.antlrParse(document);
+
+    if (parse.tokens.length === 0) {
+      return this.createEmptyTree(document);
+    }
+
+    const buffer =
+      parse.type === 'prism'
+        ? this.createBufferForPrismTokens(parse.tokens)
+        : this.createBufferForAntlrTokens(parse.tokens);
+
+    this.addTopNodeToBuffer(buffer, document);
+
+    return Tree.build({
+      buffer: buffer.flat(),
+      nodeSet: parserAdapterNodeSet(this.cypherTokenTypeToNode),
+      topID: this.cypherTokenTypeToNode.topNode.id,
+    });
+  }
+
+  private antlrParse(document: string) {
+    const startTime = performance.now();
+    const tokens = applySyntaxColouring(document);
+    const timeTaken = performance.now() - startTime;
+    if (timeTaken > 300) {
+      this.config.setUseLightVersion?.(true);
+    }
+    return { type: 'antlr' as const, tokens };
+  }
+
+  private prismParse(document: string) {
+    if (document.length === 0) {
+      this.config.setUseLightVersion?.(false);
+    }
+    const tokens = Prism.tokenize(document, Prism.languages.cypher);
+    return {
+      type: 'prism' as const,
+      tokens,
+    };
+  }
+  private createBufferForAntlrTokens(tokens: ParsedCypherToken[]) {
+    return tokens.map((token) => {
+      const nodeTypeId = this.cypherTokenTypeToNode[token.tokenType].id;
+      const startOffset = token.position.startOffset;
+      const endOffset = token.position.startOffset + token.length;
+
+      return [nodeTypeId, startOffset, endOffset, DEFAULT_NODE_GROUP_SIZE];
+    });
+  }
+
+  private createBufferForPrismTokens(tokens: (string | Prism.Token)[]) {
+    let totalOffset = 0;
+    return tokens.map((token) => {
+      const tokenType = (
+        typeof token === 'string' ? 'variable' : token.type
+      ) as CodemirrorParseTokenType;
+
+      const nodeTypeId = this.cypherTokenTypeToNode[tokenType].id;
+      const startOffset = totalOffset;
+      const endOffset = startOffset + token.length;
+      totalOffset = endOffset;
+
+      return [nodeTypeId, startOffset, endOffset, DEFAULT_NODE_GROUP_SIZE];
+    });
+  }
+
+  private createEmptyTree(document: string) {
+    return Tree.build({
+      buffer: [
+        this.cypherTokenTypeToNode.topNode.id,
+        0,
+        document.length,
+        DEFAULT_NODE_GROUP_SIZE,
+      ],
+      nodeSet: parserAdapterNodeSet(this.cypherTokenTypeToNode),
+      topID: this.cypherTokenTypeToNode.topNode.id,
+    });
+  }
+
+  private addTopNodeToBuffer(buffer: number[][], document: string) {
+    const id = this.cypherTokenTypeToNode.topNode.id;
+    const startOffset = 0;
+    const endOffset = document.length;
+    const totalBufferLength = buffer.length * DEFAULT_NODE_GROUP_SIZE;
+
+    buffer.push([
+      id,
+      startOffset,
+      endOffset,
+      totalBufferLength + DEFAULT_NODE_GROUP_SIZE,
+    ]);
+  }
+}

package/src/lang-cypher/signatureHelp.ts

@@ -0,0 +1,102 @@
+import { EditorState, StateField } from '@codemirror/state';
+import { showTooltip, Tooltip } from '@codemirror/view';
+import { signatureHelp } from '@neo4j-cypher/language-support';
+import { CypherConfig } from './langCypher';
+
+function getTriggerCharacter(query: string, caretPosition: number) {
+  let i = caretPosition - 1;
+  let triggerCharacter = query.at(i);
+
+  // Discard all space characters. Note that a space can be more than just a ' '
+  while (/\s/.test(triggerCharacter) && i > 0) {
+    i -= 1;
+    triggerCharacter = query.at(i);
+  }
+
+  return triggerCharacter;
+}
+
+function getSignatureHelpTooltip(
+  state: EditorState,
+  config: CypherConfig,
+): Tooltip[] {
+  let result: Tooltip[] = [];
+  const schema = config.schema;
+  const ranges = state.selection.ranges;
+  const range = ranges.at(0);
+
+  if (schema && ranges.length === 1 && range.from === range.to) {
+    const caretPosition = range.from;
+    const query = state.doc.toString();
+
+    const triggerCharacter = getTriggerCharacter(query, caretPosition);
+
+    if (triggerCharacter === '(' || triggerCharacter === ',') {
+      const signatureHelpInfo = signatureHelp(query, schema, caretPosition);
+      const activeSignature = signatureHelpInfo.activeSignature;
+      const signatures = signatureHelpInfo.signatures;
+      const activeParameter = signatureHelpInfo.activeParameter;
+
+      if (
+        activeSignature !== undefined &&
+        activeSignature >= 0 &&
+        activeSignature < signatures.length &&
+        signatures[activeSignature].documentation !== undefined
+      ) {
+        const signature = signatures[activeSignature];
+        const parameters = signature.parameters;
+        let doc = signature.documentation.toString();
+
+        if (
+          activeParameter >= 0 &&
+          activeParameter <
+            (signatures[activeSignature].parameters?.length ?? 0)
+        ) {
+          doc =
+            parameters[activeParameter].documentation.toString() + '\n\n' + doc;
+        }
+
+        result = [
+          {
+            pos: caretPosition,
+            above: true,
+            strictSide: true,
+            arrow: true,
+            create: () => {
+              const div = document.createElement('div');
+              const methodName = document.createElement('div');
+              const argPlusDescription = document.createElement('div');
+              const separator = document.createElement('hr');
+              const lineBreak = document.createElement('br');
+
+              div.append(
+                ...[methodName, separator, lineBreak, argPlusDescription],
+              );
+              div.className = 'cm-tooltip-signature-help';
+
+              methodName.innerText = signature.label;
+              argPlusDescription.innerText = doc;
+
+              return { dom: div };
+            },
+          },
+        ];
+      }
+    }
+  }
+
+  return result;
+}
+
+export function signatureHelpTooltip(config: CypherConfig) {
+  return StateField.define<readonly Tooltip[]>({
+    create: (state) => getSignatureHelpTooltip(state, config),
+
+    update(tooltips, tr) {
+      if (!tr.docChanged && !tr.selection) return tooltips;
+      return getSignatureHelpTooltip(tr.state, config);
+    },
+
+    provide: (f) => showTooltip.computeN([f], (state) => state.field(f)),
+  });
+}

package/src/lang-cypher/syntaxValidation.ts

@@ -0,0 +1,99 @@
+import { Diagnostic, linter } from '@codemirror/lint';
+import { Extension } from '@codemirror/state';
+import { parserWrapper, validateSyntax } from '@neo4j-cypher/language-support';
+import { DiagnosticSeverity } from 'vscode-languageserver-types';
+import workerpool from 'workerpool';
+import type { CypherConfig } from './langCypher';
+import type { LinterTask, LintWorker } from './lintWorker';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore ignore: https://v3.vitejs.dev/guide/features.html#import-with-query-suffixes
+import WorkerURL from './lintWorker?url&worker';
+
+const pool = workerpool.pool(WorkerURL as string, {
+  minWorkers: 2,
+  workerOpts: { type: 'module' },
+  workerTerminateTimeout: 2000,
+});
+
+let lastSemanticJob: LinterTask | undefined;
+
+export const cypherLinter: (config: CypherConfig) => Extension = (config) =>
+  linter((view) => {
+    if (!config.lint) {
+      return [];
+    }
+
+    const query = view.state.doc.toString();
+    const syntaxErrors = validateSyntax(query, config.schema ?? {});
+
+    return syntaxErrors.map(
+      (diagnostic): Diagnostic => ({
+        from: diagnostic.offsets.start,
+        to: diagnostic.offsets.end,
+        severity:
+          diagnostic.severity === DiagnosticSeverity.Error
+            ? 'error'
+            : 'warning',
+        message: diagnostic.message,
+      }),
+    );
+  });
+
+export const semanticAnalysisLinter: (config: CypherConfig) => Extension = (
+  config,
+) =>
+  linter(async (view) => {
+    if (!config.lint) {
+      return [];
+    }
+
+    const query = view.state.doc.toString();
+    if (query.length === 0) {
+      return [];
+    }
+
+    // we want to avoid the ANTLR4 reparse in the worker thread, this should hit our main thread cache
+    const parse = parserWrapper.parse(query);
+    const statements = parse.statementsParsing;
+
+    const anySyntacticError =
+      statements.filter((statement) => statement.diagnostics.length !== 0)
+        .length > 0;
+
+    if (anySyntacticError) {
+      return [];
+    }
+
+    try {
+      if (lastSemanticJob !== undefined && !lastSemanticJob.resolved) {
+        void lastSemanticJob.cancel();
+      }
+
+      const proxyWorker = (await pool.proxy()) as unknown as LintWorker;
+      lastSemanticJob = proxyWorker.validateSemantics(
+        query,
+        config.schema ?? {},
+      );
+      const result = await lastSemanticJob;
+
+      return result.map((diag) => {
+        return {
+          from: diag.offsets.start,
+          to: diag.offsets.end,
+          severity:
+            diag.severity === DiagnosticSeverity.Error ? 'error' : 'warning',
+          message: diag.message,
+        };
+      });
+    } catch (err) {
+      if (!(err instanceof workerpool.Promise.CancellationError)) {
+        console.error(String(err) + ' ' + query);
+      }
+    }
+    return [];
+  });
+
+export const cleanupWorkers = () => {
+  void pool.terminate();
+};

package/src/{ndl-tokens-copy.test.ts → ndlTokensCopy.test.ts}

@@ -1,5 +1,5 @@
 import { tokens } from '@neo4j-ndl/base';
-import { tokens as tokensCopy } from './ndl-tokens-copy';
+import { tokens as tokensCopy } from './ndlTokensCopy';
 
 /*
  * Needle has some odd package configuration that made playwright stop working

package/src/themes.ts

@@ -3,8 +3,8 @@ import { light, mirage } from 'ayu';
 import {
   createCypherTheme,
   ThemeOptions,
-} from './lang-cypher/create-cypher-theme';
-import { tokens } from './ndl-tokens-copy';
+} from './lang-cypher/createCypherTheme';
+import { tokens } from './ndlTokensCopy';
 
 /* ndl exports most tokens as hex colors but some tokens are exported as rgb colors, in the form of "10, 20, 30"
    This should be fixed in version 2 of ndl.
@@ -60,6 +60,7 @@ export const lightThemeConstants: ThemeOptions = {
     paramDollar: light.syntax.regexp.hex(),
     paramValue: light.syntax.regexp.hex(),
     namespace: light.syntax.special.hex(),
+    consoleCommand: light.editor.fg.hex(),
   },
 };
 
@@ -101,6 +102,7 @@ export const darkThemeConstants: ThemeOptions = {
     paramDollar: mirage.syntax.regexp.hex(),
     paramValue: mirage.syntax.regexp.hex(),
     namespace: mirage.syntax.special.hex(),
+    consoleCommand: mirage.editor.fg.hex(),
   },
 };