Add file watching with automated reloads for VSCode & Codemirror (#487)

OskarDamkjaer · web-flow · commit 343e29b1809c · 2025-05-08T16:35:47.000+02:00
* bump typescript

* fix clean scripts

* esm builds work, barring antlr-c3

* fix build

* fix bundling

* selfreview

* selfreview

* fold in exporting change

* fix bundling

* mergemain

* self review

* unignore files

* fix lock file

* update node version

* prevent timeout of e2e tests by testing production builds

* mergemain
diff --git a/.eslintignore b/.eslintignore
@@ -2,13 +2,8 @@ out/
 dist/
 esm/
 packages/language-support/src/generated-parser/*
-vitest.config.ts
-vitest.config.mts
-rollup.config.js
-index.html
-packages/language-support/src/highlighting/semanticAnalysis.js
-.eslintrc.js
+semanticAnalysis.js
 vendor/*
-packages/vscode-extension/genTextMate.js
-packages/vscode-extension/esbuild.js
-modify-semantic-analysis.js
+node_modules/*
+packages/vscode-extension/tests/fixtures/textmate/simple-match.js
+packages/react-codemirror/playwright/index.tsx
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -8,14 +8,18 @@ module.exports = {
   env: {
     browser: true,
     es2022: true,
+    node: true,
   },
   parser: '@typescript-eslint/parser',
   parserOptions: {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     tsconfigRootDir: __dirname,
     project: ['./**/tsconfig.json', './**/tsconfig.node.json'],
   },
   rules: {
     '@typescript-eslint/consistent-type-exports': 'error',
     'no-console': ['warn', { allow: ['warn', 'error'] }],
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/unbound-method': 'off',
   },
 };
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-22.15.0
+v22.15.0
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -6,14 +6,16 @@
       "command": "pnpm dev-codemirror",
       "name": "Codemirror Playground",
       "request": "launch",
-      "type": "node-terminal",
-      "preLaunchTask": "npm: watch"
+      "type": "node-terminal"
     },
     {
       "type": "extensionHost",
       "request": "launch",
       "name": "VSCode Playground",
       "runtimeExecutable": "${execPath}",
+      "env": {
+        "watch": "true"
+      },
       "args": [
         "--extensionDevelopmentPath=${workspaceRoot}/packages/vscode-extension"
       ],
@@ -25,7 +27,7 @@
       ],
       "autoAttachChildProcesses": true,
       "sourceMaps": true,
-      "preLaunchTask": "npm: build-vscode"
+      "preLaunchTask": "npm: dev-vscode"
     },
     {
       "type": "extensionHost",
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -13,11 +13,12 @@
     },
     {
       "type": "npm",
-      "script": "build-vscode",
+      "script": "dev-vscode",
       "group": "build",
-      "problemMatcher": [],
-      "label": "npm: build-vscode",
-      "detail": "pnpm build-vscode"
+      "problemMatcher": "$tsc-watch",
+      "isBackground": true,
+      "label": "npm: dev-vscode",
+      "detail": "pnpm dev-vscode"
     }
   ]
 }
diff --git a/package.json b/package.json
@@ -13,16 +13,17 @@
     "prepare": "husky install",
     "build": "pnpm --recursive build",
     "build-vscode": "pnpm --filter='neo4j-for-vscode...' build",
-    "dev-codemirror": "pnpm --filter='...@neo4j-cypher/react-codemirror-playground' build && pnpm --filter='@neo4j-cypher/react-codemirror-playground' dev",
+    "dev-codemirror": "pnpm --recursive --parallel --filter='@neo4j-cypher/react-codemirror-playground...' dev",
+    "dev-vscode": "pnpm --recursive --parallel --filter='neo4j-for-vscode...' dev",
     "release": "pnpm build && pnpm publish -r --tag next --access=public",
     "snapshot-release": "pnpm changeset pre exit && pnpm changeset version --snapshot canary && pnpm install --frozen-lockfile=false && pnpm build && pnpm publish -r --tag canary --no-git-checks --access=public",
     "deep-clean": "rimraf -g **/{node_modules,dist,tsconfig.tsbuildinfo}",
     "clean": "pnpm --recursive --parallel clean",
     "test": "pnpm --recursive --parallel test",
     "test:e2e": "pnpm --recursive test:e2e",
     "test:formattingIntegrity": "ts-node ./packages/language-support/src/tests/formatting/verification/verificationCheck.ts",
-    "lint": "eslint . --ext .ts",
-    "lint-fix": "eslint . --fix --ext .ts",
+    "lint": "eslint . --ext .ts,.tsx,.js,.mts",
+    "lint-fix": "pnpm lint --fix",
     "format": "prettier --config .prettierrc.json '**/*.ts' --write",
     "benchmark": "pnpm --recursive benchmark --concurrency=1"
   },
@@ -33,6 +34,7 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.28.1",
+    "@types/node": "^22.15.0",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.0.0",
     "concurrently": "^8.2.1",
@@ -48,8 +50,7 @@
     "semver": "^7.6.1",
     "ts-node": "10.9.1",
     "typescript": "5.8.3",
-    "vitest": "^2.1.9",
-    "@types/node": "^22.15.0"
+    "vitest": "^2.1.9"
   },
   "packageManager": "pnpm@10.7.1+sha512.2d92c86b7928dc8284f53494fb4201f983da65f0fb4f0d40baafa5cf628fa31dae3e5968f12466f17df7e97310e30f343a648baea1b9b350685dafafffdf5808"
 }
diff --git a/packages/language-server/package.json b/packages/language-server/package.json
@@ -46,6 +46,7 @@
     "build": "tsc -b && pnpm bundle && pnpm make-executable && pnpm bundle-worker",
     "bundle": "esbuild ./src/server.ts --bundle --format=cjs --platform=node --outfile=dist/cypher-language-server.js --minify --conditions=require",
     "bundle-worker": "esbuild ./src/lintWorker.ts --bundle --format=cjs --platform=node --conditions=require --outfile=dist/lintWorker.js --minify",
+    "dev": "tsc --watch",
     "make-executable": "cd dist && echo '#!/usr/bin/env node' > cypher-language-server && cat cypher-language-server.js >> cypher-language-server",
     "clean": "rm -rf {dist,tsconfig.tsbuildinfo}"
   },
diff --git a/packages/language-server/src/lint-worker.ts b/packages/language-server/src/lint-worker.ts
@@ -0,0 +1 @@
+import '@neo4j-cypher/lint-worker/lintWorker';
diff --git a/packages/language-support/package.json b/packages/language-support/package.json
@@ -28,10 +28,10 @@
   "types": "./dist/esm/project/language-support/src/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/esm/project/language-support/src/index.d.ts",
       "require": "./dist/cjs/index.cjs",
       "import": "./dist/esm/project/language-support/src/index.js",
-      "default": "./dist/cjs/index.cjs",
-      "types": "./dist/esm/project/language-support/src/index.d.ts"
+      "default": "./dist/cjs/index.cjs"
     }
   },
   "sideEffects": false,
@@ -56,6 +56,7 @@
     "build": "cd ../../vendor/antlr4-c3/ && pnpm build && cd - && pnpm gen-parser && concurrently 'npm:build-esm-and-types' 'npm:build-commonjs'",
     "build-esm-and-types": "tsc --module esnext --outDir dist/esm/project/language-support && cp src/syntaxValidation/semanticAnalysis.js dist/esm/project/language-support/src/syntaxValidation/semanticAnalysis.js && mkdir -p dist/esm/vendor/antlr4-c3/dist/ && cp -r ../../vendor/antlr4-c3/dist/esm  dist/esm/vendor/antlr4-c3/dist/",
     "build-commonjs": "esbuild ./src/index.ts --bundle --format=cjs --sourcemap --outfile=dist/cjs/index.cjs",
+    "dev": "pnpm build && concurrently 'tsc --module esnext --outDir dist/esm/project/language-support --watch' 'npm:build-commonjs -- --watch'",
     "benchmark": "esbuild ./src/tests/benchmarks/benchmark.ts --bundle --outfile=dist/benchmark/benchmark.js && BENCHMARKING=true node dist/benchmark/benchmark.js",
     "clean": "rm -rf {dist,src/generated-parser}",
     "test": "vitest run"
diff --git a/packages/query-tools/package.json b/packages/query-tools/package.json
@@ -30,12 +30,10 @@
     "neo4j-driver": "catalog:"
   },
   "scripts": {
-    "build": "concurrently \"npm:build-esm\" \"npm:build-commonjs\"",
+    "build": "concurrently 'npm:build-esm' 'npm:build-commonjs'",
     "build-esm": "tsc --module esnext --outDir dist/esm",
     "build-commonjs": "tsc --module commonjs --outDir dist/cjs",
+    "dev": "concurrently 'npm:build-esm -- --watch' 'npm:build-commonjs -- --watch'",
     "clean": "rm -rf {dist,tsconfig.tsbuildinfo}"
-  },
-  "devDependencies": {
-    "@types/node": "^22.15.0"
   }
 }
diff --git a/packages/query-tools/src/metadataPoller.ts b/packages/query-tools/src/metadataPoller.ts
@@ -1,11 +1,11 @@
 import type { CypherVersion } from '@neo4j-cypher/language-support';
 import {
+  _internalFeatureFlags,
   cypher25Supported,
   cypherVersions,
   DbSchema,
   Neo4jFunction,
   Neo4jProcedure,
-  _internalFeatureFlags,
 } from '@neo4j-cypher/language-support';
 import { EventEmitter } from 'events';
 import { Neo4jConnection } from './neo4jConnection.js';
diff --git a/packages/react-codemirror/package.json b/packages/react-codemirror/package.json
@@ -24,6 +24,7 @@
   "sideEffects": false,
   "scripts": {
     "build": "tsc --declaration --outDir dist/",
+    "dev": "tsc --watch",
     "clean": "rm -rf {dist,tsconfig.tsbuildinfo}",
     "test": "vitest run",
     "test:e2e": "playwright test -c playwright-ct.config.ts",
diff --git a/packages/vscode-extension/esbuild-extension.js b/packages/vscode-extension/esbuild-extension.js
diff --git a/packages/vscode-extension/esbuild-extension.mts b/packages/vscode-extension/esbuild-extension.mts
@@ -0,0 +1,23 @@
+import * as esbuild from 'esbuild';
+const production = process.argv.includes('--production');
+
+const ctx = await esbuild.context({
+  entryPoints: ['src/extension.ts'],
+  bundle: true,
+  format: 'cjs',
+  minify: production,
+  sourcemap: !production,
+  sourcesContent: false,
+  platform: 'node',
+  outfile: 'dist/extension.js',
+  external: ['vscode'],
+  logLevel: 'info',
+  conditions: ['require'],
+});
+
+if (production) {
+  await ctx.rebuild();
+  await ctx.dispose();
+} else {
+  await ctx.watch();
+}
diff --git a/packages/vscode-extension/package.json b/packages/vscode-extension/package.json
@@ -419,12 +419,13 @@
     "gen-textmate": "node ./genTextMate.js",
     "vscode:prepublish": "pnpm build",
     "bundle-language-server": "cd ../language-server && pnpm bundle && cp dist/cypher-language-server.js ../vscode-extension/dist/ && pnpm bundle-worker && cp dist/lintWorker.js ../vscode-extension/dist/",
-    "bundle-extension": "node ./esbuild-extension.js --production",
+    "bundle-extension": "node --experimental-strip-types esbuild-extension.mts --production",
     "update-ndl-css": "esbuild src/ndl.ts --outfile=resources/styles/ndl.js --bundle --loader:.woff2=dataurl && rm resources/styles/ndl.js",
-    "bundle-extension:dev": "node ./esbuild-extension.js",
+    "bundle-extension:dev": "node --experimental-strip-types esbuild-extension.mts",
     "bundle-webview-controllers": "esbuild ./src/webviews/controllers/* --bundle --outdir=dist/webviews/ --platform=browser",
     "build": "tsc -b && pnpm gen-textmate && pnpm bundle-extension && pnpm bundle-language-server && pnpm bundle-webview-controllers",
-    "build:dev": "tsc -b && pnpm gen-textmate && pnpm bundle-extension:dev && pnpm bundle-language-server && pnpm bundle-webview-controllers",
+    "build:dev": "tsc -b && pnpm gen-textmate && pnpm bundle-extension && pnpm bundle-language-server && pnpm bundle-webview-controllers",
+    "dev": "tsc -b && pnpm gen-textmate && concurrently 'node --experimental-strip-types esbuild-extension.mts' 'pnpm bundle-webview-controllers --watch' ",
     "clean": "rm -rf {dist,tsconfig.tsbuildinfo}",
     "package": "pnpm vsce package --pre-release --no-dependencies",
     "test:e2e": "DEBUG_VSCODE_TESTS=false && pnpm build:dev && pnpm test:apiAndUnit && pnpm test:webviews",
diff --git a/packages/vscode-extension/src/extension.ts b/packages/vscode-extension/src/extension.ts
@@ -1,5 +1,12 @@
 import * as path from 'path';
-import { ExtensionContext, workspace } from 'vscode';
+import {
+  commands,
+  ExtensionContext,
+  RelativePattern,
+  Uri,
+  window,
+  workspace,
+} from 'vscode';
 import {
   LanguageClient,
   LanguageClientOptions,
@@ -64,6 +71,25 @@ export async function activate(context: ExtensionContext) {
   // Handle any sequence events for activation
   await reconnectDatabaseConnectionOnExtensionActivation();
   await sendParametersToLanguageServer();
+
+  // in developement mode, we manually reload the extension.
+  if (process.env.watch === 'true') {
+    const watcher = workspace.createFileSystemWatcher(
+      new RelativePattern(
+        Uri.file(context.asAbsolutePath('dist')),
+        'extension.js',
+      ),
+    );
+
+    watcher.onDidChange(() => {
+      void window.showInformationMessage('Extension rebuilt, reloading...');
+      void commands.executeCommand<void>(
+        'workbench.action.restartExtensionHost',
+      );
+    });
+
+    context.subscriptions.push(watcher);
+  }
 }
 
 export async function deactivate(): Promise<void> | undefined {
diff --git a/packages/vscode-extension/tsconfig.node.json b/packages/vscode-extension/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+  "include": [
+    "./esbuild-extension.mts",
+    "./genTextMate.js",
+    "./tests/fixtures/textmate/simple-match.js"
+  ],
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "bundler",
+    "noEmit": true
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tsconfig.json b/tsconfig.json
@@ -4,11 +4,15 @@
   "include": [],
   "references": [
     { "path": "packages/language-support" },
-    { "path": "packages/react-codemirror" },
-    { "path": "packages/react-codemirror-playground" },
-    { "path": "packages/language-server" },
-    { "path": "packages/vscode-extension" },
-    { "path": "packages/query-tools" }
+    { "path": "packages/react-codemirror/" },
+    { "path": "packages/react-codemirror/tsconfig.node.json" },
+    { "path": "packages/react-codemirror-playground/" },
+    { "path": "packages/react-codemirror-playground/tsconfig.node.json" },
+    { "path": "packages/language-server/" },
+    { "path": "packages/language-server/tsconfig.node.json" },
+    { "path": "packages/vscode-extension/" },
+    { "path": "packages/vscode-extension/tsconfig.node.json" },
+    { "path": "packages/query-tools/" }
     // { "path": "vendor/antlr4-c3" } -> this one does not inherit from the root tsconfig.json
   ]
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
@@ -3,5 +3,5 @@
     "allowJs": true,
     "noEmit": true
   },
-  "include": [".eslint.rc.js", "vitest.workspace.ts"]
+  "include": [".eslintrc.js", "vitest.workspace.ts"]
 }

Original file line number	Diff line number	Diff line change
`@@ -13,11 +13,12 @@`
`13`	`13`	`},`
`14`	`14`	`{`
`15`	`15`	`"type": "npm",`
`16`		`- "script": "build-vscode",`
	`16`	`+ "script": "dev-vscode",`
`17`	`17`	`"group": "build",`
`18`		`- "problemMatcher": [],`
`19`		`- "label": "npm: build-vscode",`
`20`		`- "detail": "pnpm build-vscode"`
	`18`	`+ "problemMatcher": "$tsc-watch",`
	`19`	`+ "isBackground": true,`
	`20`	`+ "label": "npm: dev-vscode",`
	`21`	`+ "detail": "pnpm dev-vscode"`
`21`	`22`	`}`
`22`	`23`	`]`
`23`	`24`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+import '@neo4j-cypher/lint-worker/lintWorker';`