open-index/open-npm huggingface dataset:
npm package: @neo4j-cypher/antlr4
Description: Cypher parser loaded from an antlr4 g4 file
Author: Neo4j Inc.
Latest version: 1.0.0

### @neo4j-cypher/antlr4

This package contains:

- JavaScript code generated from an antlr4 g4 grammar file.
- The antlr4 g4 grammar file.
- An antlr 4 java jar file used to generate the code.

The `generate` script in `package.json` gives an example of how to generate the source code yourself.
npm package: @neo4j-cypher/antlr4-simple
Description: Cypher parser (simple) loaded from an antlr4 g4 file
Author: Neo4j Inc.
Latest version: 1.0.0

### @neo4j-cypher/antlr4-simple

This package contains:

- JavaScript code generated from a simplified antlr4 g4 grammar file.
- The simplified antlr4 g4 grammar file.

The antlr 4 java jar file used to generate the code is in the `@neo4j-cypher/antlr4` package.

The `generate` script in `package.json` gives an example of how to generate the source code yourself.
npm package: @neo4j-cypher/codemirror
Description: Cypher query language integration with CodeMirror 6 editor
Author: Neo4j Inc.
Latest version: 1.0.3

### @neo4j-cypher/codemirror

This package provides a variety of extensions to enable cypher language support in codemirror 6.

This package exports those extensions, and provides a convenience method to create an editor with the following API:

```js
// import { EditorView } from 'codemirror';
// import { CypherEditorSupport } from '@neo4j-cypher/editor-support';

const createCypherEditor = (
  parentDOMElement,
  { text = "initial text here", extensions = undefined } = {}
) => {
  // create editor & editorSupport using given extensions, or default extensions if undefined
  const editor = new EditorView({
    parentDOMElement,
    state: initialState // also contains editorSupport for use by extensions
  });
  return {
    editor: EditorView,
    editorSupport: CypherEditorSupport
  };
};
```
npm package: @neo4j-cypher/editor-support
Description: Core functionality to support Cypher integration into editors
Author: Neo4j Inc.
Latest version: 1.0.2

### @neo4j-cypher/editor-support

This package powers linting, autocompletion, and syntax highlighting for the cypher query language.

It is used by packages that support codemirror 5, codemirror 6, and monaco.

The main export of this package is the `CypherEditorSupport` class.

More docs coming soon...
npm package: @neo4j-cypher/svelte-codemirror
Description: Svelte CodeMirror 6 Cypher editor
Author: Neo4j Inc.
Latest version: 1.0.5

### @neo4j-cypher/svelte-codemirror

This package exports a Svelte component that provides a cypher editor using codemirror 6.

You can use this package like the following full app example:

```
<script lang="ts">
  import { onMount, onDestroy } from "svelte";
  import { CypherEditor } from "@neo4j-cypher/svelte-codemirror";
  import neo4j from "neo4j-driver";

  let cypher = "MATCH (n) RETURN count(n)";
  let viewState: "loading" | "idle" | "executing" = "loading";
  let schema = {};
  let driver;
  let response;

  onMount(async () => {
    driver = neo4j.driver(
      "neo4j://localhost:7687",
      neo4j.auth.basic("neo4j", "password")
    );
    await driver.verifyConnectivity();
    viewState = "idle";
  });
  onDestroy(() => {
    driver.close();
  });

  function execute() {
    return new Promise(async (resolve, reject) => {
      viewState = "executing";
      const session = driver.session();
      try {
        const res = await session.run(cypher.trim());
        resolve(res);
        cypher = "";
      } catch (e) {
        console.log(`Query "${cypher}" failed`, e);
        reject(e);
      }
      session.close();
      viewState = "idle";
    });
  }

  function keyDown(event: KeyboardEvent) {
    const { key, metaKey, ctrlKey } = event;
    if (viewState !== "idle") {
      return;
    }
    if (cypher && key === "Enter" && (metaKey || ctrlKey)) {
      event.preventDefault();
      response = execute();
    }
  }
</script>

<div class="container">
  <CypherEditor
    bind:value={cypher}
    readOnly={viewState === "executing"}
    onKeyDown={keyDown}
    {schema}
    theme="dark"
  />
  {#if viewState !== "loading" && response}
    <div class="response">
      {#await response then res}
        {JSON.stringify(res.records, null, 2)}
      {:catch e}
        {e}
      {/await}
    </div>
  {/if}
</div>

<style>
  .container {
    margin: 0 auto;
    width: 600px;
    padding: 16px;
  }
  .response {
    margin-top: 8px;
    white-space: pre;
    font-family: monospace;
    font-size: 12px;
    height: 400px;
    background-color: #eee;
    overflow: auto;
  }
  :global(.cm-editor) {
    height: 200px;
  }
</style>

```