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

package/package.json

@@ -1,6 +1,22 @@
 {
   "name": "@neo4j-cypher/react-codemirror",
+  "version": "2.0.0-next.41",
+  "keywords": [
+    "codemirror",
+    "codemirror 6",
+    "cypher",
+    "editor",
+    "neo4j",
+    "react"
+  ],
+  "bugs": {
+    "url": "https://github.com/neo4j/cypher-language-support/issues"
+  },
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/neo4j/cypher-language-support.git"
+  },
   "files": [
     "dist",
     "src",
@@ -9,76 +25,62 @@
     "LICENSE.md",
     "CHANGELOG.md"
   ],
-  "keywords": [
-    "neo4j",
-    "cypher",
-    "react",
-    "editor",
-    "codemirror",
-    "codemirror 6"
+  "type": "module",
+  "sideEffects": [
+    "**/lang-cypher/prism-global.js"
   ],
-  "version": "2.0.0-next.4",
-  "main": "./dist/cjs/index.cjs",
-  "module": "./dist/esm/index.mjs",
-  "types": "./dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "require": "./dist/cjs/index.cjs",
-      "import": "./dist/esm/index.mjs",
-      "default": "./dist/cjs/index.cjs"
-    }
-  },
-  "sideEffects": false,
-  "scripts": {
-    "build": "concurrently 'npm:build-types' 'npm:build-esm' 'npm:build-commonjs'",
-    "build-types": "tsc --emitDeclarationOnly --outDir dist/types",
-    "build-esm": "esbuild ./src/index.ts --bundle --format=esm --sourcemap --packages=external --outfile=dist/esm/index.mjs",
-    "build-commonjs": "esbuild ./src/index.ts --bundle --format=cjs --sourcemap --packages=external --outfile=dist/cjs/index.cjs",
-    "clean": "rm -rf dist",
-    "test": "jest",
-    "test:e2e": "playwright test -c playwright-ct.config.ts",
-    "test:e2e-ui": "playwright test -c playwright-ct.config.ts --ui"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/neo4j/cypher-language-support.git"
-  },
-  "bugs": {
-    "url": "https://github.com/neo4j/cypher-language-support/issues"
-  },
-  "engineStrict": true,
-  "engines": {
-    "node": ">=18.18.2"
-  },
+  "main": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
   "dependencies": {
-    "@neo4j-cypher/language-support": "2.0.0-next.2",
-    "@codemirror/autocomplete": "^6.5.1",
-    "@codemirror/commands": "^6.2.2",
-    "@codemirror/language": "^6.6.0",
-    "@codemirror/lint": "^6.2.2",
-    "@codemirror/search": "^6.5.0",
-    "@codemirror/state": "^6.2.1",
-    "@codemirror/view": "^6.13.2",
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/language": "^6.11.2",
+    "@codemirror/lint": "^6.8.5",
+    "@codemirror/merge": "^6.12.1",
+    "@codemirror/search": "^6.5.11",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.1",
     "@lezer/common": "^1.0.2",
     "@lezer/highlight": "^1.1.3",
-    "ayu": "^8.0.1",
-    "fastest-levenshtein": "^1.0.16",
-    "vscode-languageserver-types": "^3.17.3"
+    "@types/prismjs": "^1.26.3",
+    "lodash.debounce": "^4.0.8",
+    "prismjs": "^1.29.0",
+    "style-mod": "^4.1.2",
+    "vscode-languageserver-types": "^3.17.3",
+    "workerpool": "^9.3.3",
+    "@neo4j-cypher/language-support": "2.0.0-next.38",
+    "@neo4j-cypher/lint-worker": "1.10.1-next.15"
   },
   "devDependencies": {
-    "@neo4j-ndl/base": "^1.10.1",
-    "@playwright/experimental-ct-react": "^1.39.0",
-    "@playwright/test": "^1.36.2",
+    "@neo4j-ndl/base": "^3.2.10",
+    "@playwright/experimental-ct-react": "1.62.1",
+    "@playwright/test": "1.62.1",
+    "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.0.28",
-    "@vitejs/plugin-react": "^3.1.0",
-    "concurrently": "^8.2.1",
-    "esbuild": "^0.19.4",
-    "lodash": "^4.17.21",
-    "playwright": "^1.36.2",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^6.1.1",
+    "copyfiles": "^2.4.1",
+    "jsdom": "^24.1.1",
+    "playwright": "1.62.1",
     "react": "^18.2.0",
-    "typescript": "^4.9.5"
+    "react-dom": "^18.2.0",
+    "vite": "^8.2.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "engines": {
+    "node": ">=24.11.1"
+  },
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "pnpm copy-lint-worker && tsc --declaration --outDir dist/",
+    "copy-lint-worker": "copyfiles -u 4 ../lint-worker/dist/esm/lintWorker.mjs dist/src/lang-cypher && copyfiles -u 4 ../lint-worker/dist/esm/lintWorker.mjs src/lang-cypher",
+    "clean": "rm -rf dist tsconfig*.tsbuildinfo",
+    "test": "vitest run",
+    "test:e2e": "playwright test -c playwright-ct.config.ts",
+    "test:e2e-ui": "playwright test -c playwright-ct.config.ts --ui",
+    "benchmark": "BENCHMARKING=true playwright test -c playwright-ct.config.ts -g \"benchmarking & performance test session\""
   }
-}
+}

package/src/CypherEditor.test.tsx

@@ -0,0 +1,211 @@
+// @vitest-environment jsdom
+
+import type { EditorView } from '@codemirror/view';
+import { createRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
+import { DEBOUNCE_TIME } from './constants';
+import { CypherEditor } from './CypherEditor';
+
+const container = document.createElement('div');
+let root: ReturnType<typeof createRoot>;
+
+const ref = createRef<CypherEditor>();
+let value = '';
+const onChange = vi.fn<(v: string) => void>((v) => {
+  value = v;
+  rerender();
+});
+
+(global as any).IS_REACT_ACT_ENVIRONMENT = true;
+const DEBOUNCE_TIME_WITH_MARGIN = DEBOUNCE_TIME + 100;
+
+/** Avoids crash in test environment */
+function mockEditorView(editorView: EditorView) {
+  editorView.coordsAtPos = vi
+    .fn<() => { left: number; top: number; right: number; bottom: number }>()
+    .mockReturnValue({
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+    });
+}
+
+async function debounce() {
+  await new Promise((resolve) =>
+    setTimeout(resolve, DEBOUNCE_TIME_WITH_MARGIN),
+  );
+}
+
+function getEditorValue() {
+  return ref.current.editorView.current.state.doc.toString();
+}
+
+function rerender() {
+  act(() => {
+    root.render(<CypherEditor value={value} onChange={onChange} ref={ref} />);
+  });
+}
+
+beforeEach(() => {
+  root = createRoot(container);
+  act(() => {
+    root.render(<CypherEditor value={value} onChange={onChange} ref={ref} />);
+  });
+  mockEditorView(ref.current.editorView.current);
+});
+
+afterEach(() => {
+  act(() => {
+    root.unmount();
+  });
+  value = '';
+  vi.clearAllMocks();
+});
+
+test('editorValue updates props.value after debounce', async () => {
+  ref.current.setValueAndFocus('new value');
+  expect(onChange).not.toHaveBeenCalled();
+  expect(getEditorValue()).toBe('new value');
+  expect(value).toBe('');
+  await debounce();
+
+  expect(onChange).toHaveBeenCalledOnce();
+  expect(getEditorValue()).toBe('new value');
+  expect(value).toBe('new value');
+});
+
+test('editorValue updates should not be applied twice', async () => {
+  const dispatch = vi.spyOn(ref.current.editorView.current, 'dispatch');
+
+  ref.current.setValueAndFocus('new value');
+  await debounce();
+
+  expect(onChange).toHaveBeenCalledOnce();
+  expect(dispatch).toHaveBeenCalledOnce(); // it gets called once for the initial setValueAndFocus
+});
+
+test('props.value updates editorValue', () => {
+  value = 'external value';
+  rerender();
+
+  expect(getEditorValue()).toBe('external value');
+  expect(value).toBe('external value');
+});
+
+test('props.value set to undefined preserves editorValue', () => {
+  // 1. value is set initially
+  value = 'initial';
+  rerender();
+
+  // 2. value is set to undefined
+  value = undefined;
+  rerender();
+
+  expect(onChange).not.toHaveBeenCalled();
+  expect(value).toBeUndefined();
+  expect(getEditorValue()).toBe('initial');
+});
+
+// This test documents unexpected behaviour:
+//  value updates (from outside onExecute) are overwritten by pending updates.
+test('new props.value should cancel onChange', async () => {
+  // 1. value is updated internally
+  ref.current.setValueAndFocus('update');
+
+  // 2. editor is rerendered with a new value while a value update is still pending
+  // the update to 'new external value' is overwritten by the pending update to 'update'
+  value = 'new external value';
+  rerender();
+
+  await debounce();
+
+  // NOTE: These assertions currently check for the WRONG behavior (they are inverted).
+  expect(onChange).toHaveBeenCalled();
+  expect(getEditorValue()).not.toBe('new external value');
+  expect(value).not.toBe('new external value');
+});
+
+// This test documents unexpected behaviour:
+//  value updates (from outside onExecute) are overwritten by pending updates
+test('new props.value set to same value should cancel onChange', async () => {
+  // 1. value is set initially
+  value = 'same value';
+  rerender();
+
+  // 2. value is updated internally
+  ref.current.setValueAndFocus('update');
+
+  // 3. editor is rerendered with a new value while a value update is still pending
+  // the update to 'same value' is overwritten by the pending update to 'update'
+  value = 'same value';
+  rerender();
+
+  await debounce();
+
+  // NOTE: These assertions currently check for the WRONG behavior (they are inverted).
+  expect(onChange).toHaveBeenCalled();
+  expect(getEditorValue()).not.toBe('same value');
+  expect(value).not.toBe('same value');
+});
+
+test('rerender should not cancel onChange', async () => {
+  // 1. value is updated internally
+  ref.current.setValueAndFocus('changed');
+
+  // 2. editor is rerendered while a value update is still pending
+  rerender();
+
+  await debounce();
+
+  expect(onChange).toHaveBeenCalledOnce();
+  expect(getEditorValue()).toBe('changed');
+  expect(value).toBe('changed');
+});
+
+test('rerender with a previous update should not cancel onChange', async () => {
+  // 1. value is updated internally
+  ref.current.setValueAndFocus('changed');
+  await debounce();
+
+  // 2. value is updated internally again
+  ref.current.setValueAndFocus('new change');
+
+  // 3. editor is rerendered while a value update is still pending
+  rerender();
+
+  await debounce();
+
+  expect(onChange).toHaveBeenCalledTimes(2);
+  expect(getEditorValue()).toBe('new change');
+  expect(value).toBe('new change');
+});
+
+test('rerender with prior external update should not cancel onChange', async () => {
+  // 1. value is set initially
+  ref.current.setValueAndFocus('initial');
+  await debounce();
+
+  // 2. value is updated externally
+  value = 'external update';
+  rerender();
+
+  // 3. value is updated internally
+  ref.current.setValueAndFocus('internal update');
+
+  // 4. editor is rerendered while a value update is still pending
+  rerender();
+
+  await debounce();
+
+  expect(getEditorValue()).toBe('internal update');
+  expect(value).toBe('internal update');
+});
+
+test('setValueAndFocus should handle CRLF newline characters', () => {
+  expect(() =>
+    ref.current.setValueAndFocus('new value\r\nnew line'),
+  ).not.toThrow();
+});