@neo4j-cypher/react-codemirror 2.0.0-next.1 → 2.0.0-next.11

package/src/lang-cypher/syntaxValidation.ts

@@ -0,0 +1,96 @@
+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';
+import WorkerURL from './lintWorker?worker&url';
+
+const pool = workerpool.pool(WorkerURL, {
+  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/lang-cypher/utils.ts

@@ -0,0 +1,9 @@
+import { MarkupContent } from 'vscode-languageserver-types';
+
+export function getDocString(result: string | MarkupContent): string {
+  if (MarkupContent.is(result)) {
+    result.value;
+  } else {
+    return result;
+  }
+}

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

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

package/src/{neo4j-setup.tsx → neo4jSetup.tsx}

@@ -1,9 +1,14 @@
 import {
   acceptCompletion,
   autocompletion,
+  clearSnippet,
   closeBrackets,
   closeBracketsKeymap,
+  closeCompletion,
   completionKeymap,
+  nextSnippetField,
+  prevSnippetField,
+  snippetKeymap,
 } from '@codemirror/autocomplete';
 import {
   defaultKeymap,
@@ -22,11 +27,13 @@ import {
 import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
 import { EditorState, Extension, StateCommand } from '@codemirror/state';
 import {
+  Command,
   crosshairCursor,
   drawSelection,
   dropCursor,
   EditorView,
   highlightSpecialChars,
+  KeyBinding,
   keymap,
   rectangularSelection,
 } from '@codemirror/view';
@@ -55,7 +62,7 @@ const insertTab: StateCommand = (cmd) => {
 };
 
 export const basicNeo4jSetup = (): Extension[] => {
-  const keymaps = [
+  const keymaps: KeyBinding[] = [
     closeBracketsKeymap,
     defaultKeymap,
     searchKeymap,
@@ -125,5 +132,48 @@ export const basicNeo4jSetup = (): Extension[] => {
 
   extensions.push(keymap.of(keymaps));
 
+  extensions.push(
+    snippetKeymap.of([
+      {
+        key: 'Tab',
+        run: acceptCompletionOrGotoNextSnippet,
+        shift: acceptCompletionOrGotoPrevSnippet,
+      },
+      { key: 'Escape', run: closeCompletionsOrClearSnippets },
+    ]),
+  );
+
   return extensions;
 };
+
+// The logic to check if there's a completion open is surprisingly complex
+// https://github.com/codemirror/autocomplete/blob/5ad2ebc861f2f61cdc943fc087a5bfb756a7d0fa/src/view.ts#L31
+// For example it respects an interaction delay, so we can't just check if the completion is open
+// instead we just run the acceptCompletion command which returns true if a completion was accepted
+// in that case we know that we shouldn't move to the next snippet field
+const acceptCompletionOrGotoNextSnippet: Command = (view: EditorView) => {
+  const didCompletion = acceptCompletion(view);
+  if (didCompletion) {
+    return true;
+  }
+
+  return nextSnippetField(view);
+};
+
+const acceptCompletionOrGotoPrevSnippet: Command = (view: EditorView) => {
+  const didCompletion = acceptCompletion(view);
+  if (didCompletion) {
+    return true;
+  }
+
+  return prevSnippetField(view);
+};
+
+const closeCompletionsOrClearSnippets: Command = (view: EditorView) => {
+  const closedCompletions = closeCompletion(view);
+  if (closedCompletions) {
+    return true;
+  }
+
+  return clearSnippet(view);
+};

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(),
   },
 };
 

package/src/viteEnv.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />