@neo4j-cypher/react-codemirror - npm Package Compare versions

Comparing version 2.0.0-canary-2a6f081 to 2.0.0-canary-2e72ac8

CHANGELOG.md

 # @neo4j-cypher/react-codemirror
 
+## 2.0.0-next.11
+
+### Patch Changes
+
+- Updated dependencies [05663bd]
+  - @neo4j-cypher/language-support@2.0.0-next.8
+
+## 2.0.0-next.10
+
+### Patch Changes
+
+- bb7e9d3: Simplify detection and handling of value prop updates
+
+## 2.0.0-next.9
+
+### Patch Changes
+
+- fbd5f7e: allow signature help panel to render below editor when there's not enough space above it
+- 09dfae2: Add an ariaLabel prop to CypherEditor
+- 7154e94: Fix bug causing debouncing to override value
+- 62c152f: execute single line query on enter by default
+- cbfc75e: Fix a bug causing debounced value updates to get cancelled erroneously
+- 04ae35e: Set initial latestDispatchedValue and flush debounced changes onExecute
+  Add tests for debounce behaviour
+- Updated dependencies [3661e9d]
+- Updated dependencies [b76af58]
+- Updated dependencies [21699b7]
+- Updated dependencies [6afc0e3]
+- Updated dependencies [39b924d]
+  - @neo4j-cypher/language-support@2.0.0-next.7
+
 ## 2.0.0-next.8
@@ -4,0 +35,0 @@

dist/CypherEditor.d.ts

@@ -159,3 +159,2 @@ import { EditorState, Extension } from '@codemirror/state';
     private schemaRef;
-    private latestDispatchedValue;
     /**
@@ -162,0 +161,0 @@ * Focus the editor

dist/CypherEditor.js

@@ -7,2 +7,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Component, createRef } from 'react';
+import { DEBOUNCE_TIME } from './constants';
 import { replaceHistory, replMode as historyNavigation, } from './historyNavigation';
@@ -13,3 +14,3 @@ import { cypher } from './lang-cypher/langCypher';
 import { getThemeExtension } from './themes';
-const executeKeybinding = (onExecute, newLineOnEnter) => {
+const executeKeybinding = (onExecute, newLineOnEnter, flush) => {
     const keybindings = {
@@ -37,2 +38,3 @@ 'Shift-Enter': {
                 if (doc.trim() !== '') {
+                    flush?.();
                     onExecute(doc);
@@ -55,2 +57,3 @@ }
                     if (doc.trim() !== '') {
+                        flush?.();
                         onExecute(doc);
@@ -92,3 +95,2 @@ }
     schemaRef = createRef();
-    latestDispatchedValue;
     /**
@@ -138,5 +140,4 @@ * Focus the editor
         ? debounce(((value, viewUpdate) => {
-            this.latestDispatchedValue = value;
             this.props.onChange(value, viewUpdate);
-        }), 200)
+        }), DEBOUNCE_TIME)
         : undefined;
@@ -176,3 +177,3 @@ componentDidMount() {
                 keyBindingCompartment.of(keymap.of([
-                    ...executeKeybinding(onExecute, newLineOnEnter),
+                    ...executeKeybinding(onExecute, newLineOnEnter, () => this.debouncedOnChange?.flush()),
                     ...extraKeybindings,
@@ -222,5 +223,6 @@ ])),
         const currentCmValue = this.editorView.current.state?.doc.toString() ?? '';
-        if (this.props.value !== undefined &&
-            this.props.value !== this.latestDispatchedValue) {
-            this.debouncedOnChange?.cancel();
+        if (this.props.value !== undefined && // If the component becomes uncontolled, we just leave the value as is
+            this.props.value !== prevProps.value && // The value prop has changed, we need to update the editor
+            this.props.value !== currentCmValue // No need to dispatch an update if the value is the same
+        ) {
             this.editorView.current.dispatch({
@@ -266,3 +268,3 @@ changes: {
                 effects: keyBindingCompartment.reconfigure(keymap.of([
-                    ...executeKeybinding(this.props.onExecute, this.props.newLineOnEnter),
+                    ...executeKeybinding(this.props.onExecute, this.props.newLineOnEnter, () => this.debouncedOnChange?.flush()),
                     ...this.props.extraKeybindings,
@@ -269,0 +271,0 @@ ])),

dist/e2e_tests/autoCompletion.spec.js

@@ -41,2 +41,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 });
+test('get completions when typing in controlled component', async ({ mount, page, }) => {
+    let value = '';
+    const onChange = (val) => {
+        value = val;
+        void component.update(_jsx(CypherEditor, { value: val, onChange: onChange }));
+    };
+    const component = await mount(_jsx(CypherEditor, { value: value, onChange: onChange }));
+    const textField = page.getByRole('textbox');
+    await textField.fill('RETU');
+    await page.waitForTimeout(500); // wait for debounce
+    await expect(page.locator('.cm-tooltip-autocomplete').getByText('RETURN')).toBeVisible();
+    // We need to wait for the editor to realise there is a completion open
+    // so that it does not just indent with tab key
+    await page.waitForTimeout(500);
+    await textField.press('Tab');
+    await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+    await expect(component).toContainText('RETURN');
+});
 test('can complete labels', async ({ mount, page }) => {
@@ -43,0 +61,0 @@ const component = await mount(_jsx(CypherEditor, { schema: {

dist/e2e_tests/sanityChecks.spec.js

@@ -24,3 +24,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
     const textField = page.getByRole('textbox');
+    await textField.fill('');
     await textField.fill('RETURN 12');
+    await expect(textField).toHaveText('RETURN 12');
     // editor update is debounced, retry wait for debounced
@@ -30,6 +32,2 @@ await expect(() => {
     }).toPass({ intervals: [300, 300, 1000] });
-    await page.keyboard.type('34');
-    await expect(() => {
-        expect(editorValueCopy).toBe('RETURN 12');
-    }).toPass({ intervals: [300, 300, 1000] });
 });
@@ -36,0 +34,0 @@ test('can complete RETURN', async ({ page, mount }) => {

dist/lang-cypher/contants.test.js

 import { tags } from '@lezer/highlight';
 import { applySyntaxColouring, CypherTokenType, } from '@neo4j-cypher/language-support';
+import { expect, test } from 'vitest';
 import { tokenTypeToStyleTag } from './constants';
@@ -4,0 +5,0 @@ const cypherQueryWithAllTokenTypes = `MATCH (variable :Label)-[:REL_TYPE]->()

dist/lang-cypher/syntaxValidation.js

@@ -5,5 +5,3 @@ import { linter } from '@codemirror/lint';
 import workerpool from 'workerpool';
-// 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';
+import WorkerURL from './lintWorker?worker&url';
 const pool = workerpool.pool(WorkerURL, {
@@ -41,4 +39,3 @@ minWorkers: 2,
     const statements = parse.statementsParsing;
-    const anySyntacticError = statements.filter((statement) => statement.diagnostics.length !== 0)
-        .length > 0;
+    const anySyntacticError = statements.some((statement) => statement.syntaxErrors.length !== 0);
     if (anySyntacticError) {
@@ -45,0 +42,0 @@ return [];

dist/ndlTokensCopy.test.js

 import { tokens } from '@neo4j-ndl/base';
+import { expect, test } from 'vitest';
 import { tokens as tokensCopy } from './ndlTokensCopy';
@@ -3,0 +4,0 @@ /*

package.json

@@ -20,3 +20,3 @@ {
   ],
-  "version": "2.0.0-canary-2a6f081",
+  "version": "2.0.0-canary-2e72ac8",
   "main": "./dist/index.js",
@@ -29,3 +29,3 @@ "types": "./dist/index.d.ts",
     "clean": "rm -rf dist",
-    "test": "jest",
+    "test": "vitest run",
     "test:e2e": "playwright test -c playwright-ct.config.ts",
@@ -53,6 +53,6 @@ "test:e2e-ui": "playwright test -c playwright-ct.config.ts --ui",
     "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.28.4",
+    "@codemirror/view": "^6.29.1",
     "@lezer/common": "^1.0.2",
     "@lezer/highlight": "^1.1.3",
-    "@neo4j-cypher/language-support": "2.0.0-canary-2a6f081",
+    "@neo4j-cypher/language-support": "2.0.0-canary-2e72ac8",
     "@types/prismjs": "^1.26.3",
@@ -69,13 +69,15 @@ "@types/workerpool": "^6.4.7",
     "@neo4j-ndl/base": "^1.10.1",
-    "@playwright/experimental-ct-react": "^1.39.0",
-    "@playwright/test": "^1.36.2",
+    "@playwright/experimental-ct-react": "^1.45.3",
+    "@playwright/test": "^1.45.3",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.0.28",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "concurrently": "^8.2.1",
     "esbuild": "^0.19.4",
+    "jsdom": "^24.1.1",
     "lodash": "^4.17.21",
-    "playwright": "^1.36.2",
+    "playwright": "^1.45.3",
     "react": "^18.2.0",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "vite": "^5.3.5"
   },
@@ -82,0 +84,0 @@ "peerDependencies": {

src/lang-cypher/contants.test.ts

@@ -6,2 +6,3 @@ import { tags } from '@lezer/highlight';
 } from '@neo4j-cypher/language-support';
+import { expect, test } from 'vitest';
 import { tokenTypeToStyleTag } from './constants';
@@ -8,0 +9,0 @@

src/lang-cypher/syntaxValidation.ts

@@ -8,8 +8,5 @@ import { Diagnostic, linter } from '@codemirror/lint';
 import type { LinterTask, LintWorker } from './lintWorker';
+import WorkerURL from './lintWorker?worker&url';
 
-// 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, {
+const pool = workerpool.pool(WorkerURL, {
   minWorkers: 2,
@@ -61,5 +58,5 @@ workerOpts: { type: 'module' },
 
-    const anySyntacticError =
-      statements.filter((statement) => statement.diagnostics.length !== 0)
-        .length > 0;
+    const anySyntacticError = statements.some(
+      (statement) => statement.syntaxErrors.length !== 0,
+    );
 
@@ -66,0 +63,0 @@ if (anySyntacticError) {

src/ndlTokensCopy.test.ts

 import { tokens } from '@neo4j-ndl/base';
+import { expect, test } from 'vitest';
 import { tokens as tokensCopy } from './ndlTokensCopy';
@@ -3,0 +4,0 @@

No alert changes

Improved metrics

Total package byte prevSize

670629

increased by5.91%

Number of package files

138

increased by10.4%

Lines of code

8934

increased by6%

Worsened metrics

Dev dependency count

14

increased by16.67%

Dependency changes

• + Added@neo4j-cypher/language-support@2.0.0-canary-2e72ac8(transitive)

• - Removed@neo4j-cypher/language-support@2.0.0-canary-2a6f081(transitive)

• Updated@codemirror/view@^6.29.1

• Updated@neo4j-cypher/language-support@2.0.0-canary-2e72ac8