Migrate to ESM & update the Vega libraries (#214)

* chore(deps): bump vega-expression and vega-lite

Bumps [vega-expression](https://github.com/vega/vega) to 5.2.1 and updates ancestor dependency [vega-lite](https://github.com/vega/vega-lite). These dependencies need to be updated together.


Updates `vega-expression` from 5.2.0 to 5.2.1
- [Release notes](https://github.com/vega/vega/releases)
- [Commits](https://github.com/vega/vega/commits)

Updates `vega-lite` from 5.23.0 to 6.4.1
- [Release notes](https://github.com/vega/vega-lite/releases)
- [Changelog](https://github.com/vega/vega-lite/blob/main/CHANGELOG.md)
- [Commits](vega/vega-lite@v5.23.0...v6.4.1)

---
updated-dependencies:
- dependency-name: vega-expression
  dependency-version: 5.2.1
  dependency-type: indirect
- dependency-name: vega-lite
  dependency-version: 6.4.1
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>

Author: Artmann

.eslintrc.js .eslintrc.cjs.eslintrc.js renamed to .eslintrc.cjs

@@ -47,7 +47,7 @@ module.exports = {
         '@typescript-eslint/no-explicit-any': 'error',
         '@typescript-eslint/no-non-null-assertion': 'off',
         'no-unused-vars': 'off',
-        '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '_\\w*' }],
+        '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '_\\w*', varsIgnorePattern: '_\\w*' }],
         'no-use-before-define': 'off',
         '@typescript-eslint/no-use-before-define': [
             'error',
@@ -74,7 +74,14 @@ module.exports = {
         'import/no-unresolved': [
             'error',
             {
-                ignore: ['monaco-editor', 'vscode', 'react-error-boundary']
+                ignore: [
+                    'monaco-editor',
+                    'vscode',
+                    'react-error-boundary',
+                    'vega-lite',
+                    'vega-embed',
+                    'why-is-node-running'
+                ]
             }
         ],
         'import/prefer-default-export': 'off',
@@ -225,18 +232,32 @@ module.exports = {
                 'import/no-restricted-paths': ['off']
             }
         },
+        {
+            files: ['src/kernels/**/*.ts'],
+            rules: {
+                '@typescript-eslint/no-restricted-imports': 'off'
+            }
+        },
+        {
+            files: ['src/notebooks/**/*.ts', 'src/webviews/**/*.ts'],
+            rules: {
+                '@typescript-eslint/no-restricted-imports': 'off'
+            }
+        },
         {
             files: ['**/*.test.ts'],
             rules: {
                 '@typescript-eslint/no-explicit-any': 'off',
-                '@typescript-eslint/no-restricted-imports': 'off'
+                '@typescript-eslint/no-restricted-imports': 'off',
+                '@typescript-eslint/no-empty-function': 'off'
             }
         },
         {
             files: ['src/test/**/*.ts'],
             rules: {
                 '@typescript-eslint/no-explicit-any': 'off',
-                '@typescript-eslint/no-restricted-imports': 'off'
+                '@typescript-eslint/no-restricted-imports': 'off',
+                '@typescript-eslint/no-empty-function': 'off'
             }
         },
         {

.gitignore

@@ -73,3 +73,4 @@ tmp
 vscode.d.ts
 vscode.proposed.*.d.ts
 xunit-test-results.xml
+tsconfig.tsbuildinfo

.prettierrc.js .prettierrc.cjs.prettierrc.js renamed to .prettierrc.cjs

@@ -1,5 +1,5 @@
 {
-    "reporterEnabled": "./build/ci/scripts/spec_with_pid,mocha-junit-reporter",
+    "reporterEnabled": "./build/ci/scripts/spec_with_pid.js,mocha-junit-reporter",
     "mochaJunitReporterReporterOptions": {
         "includePending": true
     }

build/.mocha-multi-reporters.config

@@ -1,9 +1,10 @@
 {
     "spec": "./out/**/*.unit.test.js",
-    "require": ["source-map-support/register", "out/test/unittests.js"],
-    "reporter": "mocha-multi-reporters",
-    "reporter-option": "configFile=build/.mocha-multi-reporters.config",
+    "loader": ["./build/mocha-esm-loader.js"],
+    "require": ["./out/test/unittests.js"],
+    "reporter": "spec",
     "ui": "tdd",
     "recursive": true,
-    "colors": true
+    "colors": true,
+    "node-option": ["no-warnings=ExperimentalWarning", "loader=./build/mocha-esm-loader.js"]
 }

build/.mocha.unittests.js.json

@@ -1,9 +1,10 @@
 {
     "spec": "./out/**/*.unit.test.js",
-    "require": ["out/test/unittests.js"],
+    "loader": ["./build/mocha-esm-loader.js"],
     "reporter": "mocha-multi-reporters",
     "reporter-option": "configFile=build/.mocha-multi-reporters.config",
     "ui": "tdd",
     "recursive": true,
-    "colors": true
+    "colors": true,
+    "node-option": ["--no-warnings=ExperimentalWarning"]
 }

build/.mocha.unittests.json

@@ -1,8 +1,9 @@
 {
-    "require": ["ts-node/register", "out/test/unittests.js"],
+    "loader": ["ts-node/esm", "./build/mocha-esm-loader.js"],
     "reporter": "mocha-multi-reporters",
     "reporter-option": "configFile=build/.mocha-multi-reporters.config",
     "ui": "tdd",
     "recursive": true,
-    "colors": true
+    "colors": true,
+    "node-option": ["--no-warnings=ExperimentalWarning"]
 }

build/.mocha.unittests.ts.json

@@ -0,0 +1,97 @@
+#!/usr/bin/env node
+// Script to add .js extensions to all relative imports in TypeScript files
+// This is required for ESM compatibility
+
+import { promises as fs } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const rootDir = path.join(__dirname, '..');
+const srcDir = path.join(rootDir, 'src');
+
+// Regex patterns to match import statements with relative paths
+// Updated to handle multi-line imports/exports by using [\s\S] to match newlines
+const importPatterns = [
+    // import ... from './path' or '../path' (supports multi-line named imports)
+    /^(\s*import\s+[\s\S]+?from\s+['"])(\.\/.+?|\.\.?\/.+?)(['"])/gm,
+    // export ... from './path' or '../path' (supports multi-line named exports)
+    /^(\s*export\s+[\s\S]+?from\s+['"])(\.\/.+?|\.\.?\/.+?)(['"])/gm,
+    // import('./path') or import('../path') (supports newlines before parentheses and quotes)
+    /(\bimport[\s\S]*?\([\s\S]*?['"])(\.\/.+?|\.\.?\/.+?)(['"])/gm,
+    // await import('./path') (supports newlines in await import statements)
+    /(\bawait\s+import[\s\S]*?\([\s\S]*?['"])(\.\/.+?|\.\.?\/.+?)(['"])/gm,
+];
+
+async function getAllTsFiles(dir) {
+    const files = [];
+    const entries = await fs.readdir(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+
+        if (entry.isDirectory()) {
+            // Skip node_modules, out, dist, etc.
+            if (!['node_modules', 'out', 'dist', '.git', '.vscode', 'resources'].includes(entry.name)) {
+                files.push(...(await getAllTsFiles(fullPath)));
+            }
+        } else if ((entry.name.endsWith('.ts') || entry.name.endsWith('.tsx')) && !entry.name.endsWith('.d.ts')) {
+            // Include .ts and .tsx files, but exclude .d.ts declaration files
+            files.push(fullPath);
+        }
+    }
+
+    return files;
+}
+
+function addJsExtension(content) {
+    let modified = content;
+    let changeCount = 0;
+
+    for (const pattern of importPatterns) {
+        modified = modified.replace(pattern, (match, before, importPath, after) => {
+            // Skip if already has an extension
+            if (/\.(js|ts|tsx|json|css|less|svg|png|jpg)$/i.test(importPath)) {
+                return match;
+            }
+
+            changeCount++;
+            return `${before}${importPath}.js${after}`;
+        });
+    }
+
+    return { content: modified, changed: changeCount > 0, changeCount };
+}
+
+async function main() {
+    console.log('🔍 Finding all TypeScript files in src/...');
+    const tsFiles = await getAllTsFiles(srcDir);
+    console.log(`📁 Found ${tsFiles.length} TypeScript files\n`);
+
+    let totalFilesChanged = 0;
+    let totalImportsChanged = 0;
+
+    for (const file of tsFiles) {
+        const content = await fs.readFile(file, 'utf-8');
+        const { content: newContent, changed, changeCount } = addJsExtension(content);
+
+        if (changed) {
+            await fs.writeFile(file, newContent, 'utf-8');
+            totalFilesChanged++;
+            totalImportsChanged += changeCount;
+            const relativePath = path.relative(rootDir, file);
+            console.log(`✅ ${relativePath} (${changeCount} import${changeCount > 1 ? 's' : ''})`);
+        }
+    }
+
+    console.log(`\n✨ Done!`);
+    console.log(`📊 Modified ${totalFilesChanged} files`);
+    console.log(`🔗 Updated ${totalImportsChanged} import statements`);
+}
+
+main().catch(error => {
+    console.error('❌ Error:', error);
+    process.exit(1);
+});

build/add-js-extensions.mjs

@@ -1,18 +1,22 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-'use strict';
 
-const { EOL } = require('os');
-const colors = require('colors/safe');
-const fs = require('fs-extra');
-const path = require('path');
-const constants = require('../constants');
-const common = require('../webpack/common');
-const { downloadZMQ } = require('@vscode/zeromq');
+import { EOL } from 'node:os';
+import colors from 'colors/safe.js';
+import fs from 'fs-extra';
+import path from 'node:path';
+import { ExtensionRootDir } from '../constants.js';
+import { getBundleConfiguration, bundleConfiguration } from '../webpack/common.js';
+import { downloadZMQ } from '@vscode/zeromq';
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 function fixVariableNameInKernelDefaultJs() {
     var relativePath = path.join('node_modules', '@jupyterlab', 'services', 'lib', 'kernel', 'default.js');
-    var filePath = path.join(constants.ExtensionRootDir, relativePath);
+    var filePath = path.join(ExtensionRootDir, relativePath);
     if (!fs.existsSync(filePath)) {
         throw new Error(
             "Jupyter lab default kernel not found '" + filePath + "' (Jupyter Extension post install script)"
@@ -32,7 +36,7 @@ function fixVariableNameInKernelDefaultJs() {
 }
 function removeUnnecessaryLoggingFromKernelDefault() {
     var relativePath = path.join('node_modules', '@jupyterlab', 'services', 'lib', 'kernel', 'default.js');
-    var filePath = path.join(constants.ExtensionRootDir, relativePath);
+    var filePath = path.join(ExtensionRootDir, relativePath);
     if (!fs.existsSync(filePath)) {
         throw new Error(
             "Jupyter lab default kernel not found '" + filePath + "' (Jupyter Extension post install script)"
@@ -61,7 +65,7 @@ function makeVariableExplorerAlwaysSorted() {
         'case g.NONE:e=r?g.DESC:g.ASC;break;case g.ASC:e=r?g.NONE:g.DESC;break;case g.DESC:e=r?g.ASC:g.NONE';
     for (const fileName of fileNames) {
         var relativePath = path.join('node_modules', 'react-data-grid', 'dist', fileName);
-        var filePath = path.join(constants.ExtensionRootDir, relativePath);
+        var filePath = path.join(ExtensionRootDir, relativePath);
         if (!fs.existsSync(filePath)) {
             throw new Error("react-data-grid dist file not found '" + filePath + "' (pvsc post install script)");
         }
@@ -134,7 +138,8 @@ exports.javascript = {
  * See comments here build/webpack/moment.js
  */
 function verifyMomentIsOnlyUsedByJupyterLabCoreUtils() {
-    const packageLock = require(path.join(__dirname, '..', '..', 'package-lock.json'));
+    const packageLockPath = path.join(__dirname, '..', '..', 'package-lock.json');
+    const packageLock = JSON.parse(fs.readFileSync(packageLockPath, 'utf8'));
     const packagesAllowedToUseMoment = ['node_modules/@jupyterlab/coreutils', '@jupyterlab/coreutils'];
     const otherPackagesUsingMoment = [];
     ['packages', 'dependencies'].forEach((key) => {
@@ -167,7 +172,7 @@ function verifyMomentIsOnlyUsedByJupyterLabCoreUtils() {
     }
 }
 async function downloadZmqBinaries() {
-    if (common.getBundleConfiguration() === common.bundleConfiguration.web) {
+    if (getBundleConfiguration() === bundleConfiguration.web) {
         // No need to download zmq binaries for web.
         return;
     }

build/ci/postInstall.js

@@ -1,29 +1,27 @@
-'use strict';
 /**
  * @module Spec
  */
 /**
  * Module dependencies.
  */
 
-var Base = require('mocha/lib/reporters/base');
-var constants = require('mocha/lib/runner').constants;
-var EVENT_RUN_BEGIN = constants.EVENT_RUN_BEGIN;
-var EVENT_RUN_END = constants.EVENT_RUN_END;
-var EVENT_SUITE_BEGIN = constants.EVENT_SUITE_BEGIN;
-var EVENT_SUITE_END = constants.EVENT_SUITE_END;
-var EVENT_TEST_FAIL = constants.EVENT_TEST_FAIL;
-var EVENT_TEST_PASS = constants.EVENT_TEST_PASS;
-var EVENT_TEST_PENDING = constants.EVENT_TEST_PENDING;
-var inherits = require('mocha/lib/utils').inherits;
-var color = Base.color;
+import Base from 'mocha/lib/reporters/base';
+import { constants } from 'mocha/lib/runner';
+import { inherits } from 'mocha/lib/utils';
+
+const EVENT_RUN_BEGIN = constants.EVENT_RUN_BEGIN;
+const EVENT_RUN_END = constants.EVENT_RUN_END;
+const EVENT_SUITE_BEGIN = constants.EVENT_SUITE_BEGIN;
+const EVENT_SUITE_END = constants.EVENT_SUITE_END;
+const EVENT_TEST_FAIL = constants.EVENT_TEST_FAIL;
+const EVENT_TEST_PASS = constants.EVENT_TEST_PASS;
+const EVENT_TEST_PENDING = constants.EVENT_TEST_PENDING;
+const color = Base.color;
 
 /**
  * Expose `Spec`.
  */
 
-exports = module.exports = Spec;
-
 const prefix = process.env.VSC_JUPYTER_CI_TEST_PARALLEL ? `${process.pid}   ` : '';
 
 /**
@@ -96,3 +94,5 @@ function Spec(runner, options) {
 inherits(Spec, Base);
 
 Spec.description = 'hierarchical & verbose [default]';
+
+export default Spec;