[deps] Update vega to 6.x (elastic#238618)

## Summary

Update Vega dependencies to 6.x.

This pull request updates the project's Vega and Vega-Lite dependencies
to their latest major versions.

**Dependency Upgrades and Import Handling**

- Upgraded `vega`, `vega-lite`, `vega-interpreter`, `vega-tooltip`, and
related libraries to their latest major versions in `package.json`, and
updated their import paths throughout the codebase.

- Removed legacy Webpack and Storybook configuration for the old `vega`
build, including `noParse` rules and aliases, and updated the import
resolver to point to the new `vega-lite` and `vega-tooltip` build
directories.

**Testing and TypeScript Support**

- Added a Jest setup mock for `vega` and `vega-lite` to ensure tests run
correctly with the new versions, and updated Jest transform ignore
patterns to support new Vega-related packages.
- Updated `tsconfig.base.json` to include type definitions for
`vega-lite` and `vega-tooltip`.

**Babel and Build Tools**

- Added `@babel/plugin-syntax-import-attributes` to dependencies and
Babel preset to enable the new import attributes syntax.

**Test Snapshots**

- Updated Vega visualization test snapshots to reflect the new
rendering/output from upgraded dependencies.

---------

Co-authored-by: Tiago Costa <tiago.costa@elastic.co>
(cherry picked from commit d8c23ae)

# Conflicts:
#	package.json
#	packages/kbn-babel-preset/common_preset.js
#	src/platform/packages/shared/kbn-test/jest-preset.js

Author: markov00

.github/CODEOWNERS

@@ -2020,8 +2020,10 @@ x-pack/platform/plugins/shared/ml/server/models/data_recognizer/modules/security
 /config/serverless.security.essentials.yml @elastic/security-solution @elastic/kibana-security
 /config/serverless.security.complete.yml @elastic/security-solution @elastic/kibana-security
 /typings/ @elastic/kibana-core
+/typings/vega/ @elastic/kibana-visualizations
 /src/platform/test/analytics @elastic/kibana-core
 /src/platform/packages/shared/kbn-test/src/jest/setup/mocks.kbn_i18n_react.js @elastic/kibana-core
+/src/platform/packages/shared/kbn-test/src/jest/setup/mocks.vega.js @elastic/kibana-visualizations
 /x-pack/platform/test/saved_objects_field_count/ @elastic/kibana-core
 /x-pack/platform/test/serverless/**/test_suites/saved_objects_management/ @elastic/kibana-core
 /x-pack/platform/test/serverless/api_integration/test_suites/core/ @elastic/kibana-core

package.json

@@ -105,10 +105,7 @@
     "@xstate5/react/**/xstate": "^5.19.2",
     "apache-arrow": "20.x - 21.x",
     "globby/fast-glob": "^3.3.2",
-    "pkce-challenge": "3.1.0",
-    "vega-expression": "5.2.1",
-    "vega-interpreter": "1.2.1",
-    "vega-util": "1.17.4"
+    "pkce-challenge": "3.1.0"
   },
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^14.1.1",
@@ -1360,12 +1357,12 @@
     "usng.js": "^0.4.5",
     "utility-types": "^3.10.0",
     "uuid": "11.1.0",
-    "vega": "^5.33.0",
-    "vega-interpreter": "1.2.1",
-    "vega-lite": "^5.21.0",
-    "vega-schema-url-parser": "^2.2.0",
-    "vega-spec-injector": "^0.0.2",
-    "vega-tooltip": "^0.34.0",
+    "vega": "6.2.0",
+    "vega-interpreter": "2.2.1",
+    "vega-lite": "6.4.1",
+    "vega-schema-url-parser": "3.0.2",
+    "vega-spec-injector": "0.0.2",
+    "vega-tooltip": "1.1.0",
     "vinyl": "^3.0.0",
     "wellknown": "^0.5.0",
     "xml2js": "^0.6.2",

packages/kbn-babel-preset/common_preset.js

@@ -8,6 +8,10 @@
  */
 
 module.exports = () => ({
+  // Enables import-attributes syntax on imports
+  generatorOpts: {
+    importAttributesKeyword: 'with',
+  },
   presets: [
     // plugins always run before presets, but in this case we need the
     // @babel/preset-typescript preset to run first so we have to move

packages/kbn-eslint-config/javascript.js

@@ -29,7 +29,10 @@ module.exports = {
         ecmaVersion: 2018,
         requireConfigFile: false,
         babelOptions: {
-          presets: ['@kbn/babel-preset/node_preset']
+          presets: ['@kbn/babel-preset/node_preset'],
+          parserOpts: {
+            plugins: ['importAttributes']
+          }
         },
       },
 

packages/kbn-optimizer/src/worker/webpack.config.ts

@@ -118,10 +118,7 @@ export function getWebpackConfig(
       // no parse rules for a few known large packages which have no require() statements
       // or which have require() statements that should be ignored because the file is
       // already bundled with all its necessary dependencies
-      noParse: [
-        /[\/\\]node_modules[\/\\]lodash[\/\\]index\.js$/,
-        /[\/\\]node_modules[\/\\]vega[\/\\]build-es5[\/\\]vega\.js$/,
-      ],
+      noParse: [/[\/\\]node_modules[\/\\]lodash[\/\\]index\.js$/],
 
       rules: [
         {
@@ -294,7 +291,6 @@ export function getWebpackConfig(
       extensions: ['.js', '.ts', '.tsx', '.json'],
       mainFields: ['browser', 'module', 'main'],
       alias: {
-        vega: Path.resolve(worker.repoRoot, 'node_modules/vega/build-es5/vega.js'),
         'react-dom$': 'react-dom/profiling',
         'scheduler/tracing': 'scheduler/tracing-profiling',
         buffer: [

src/platform/packages/private/kbn-import-resolver/src/import_resolver.ts

@@ -165,6 +165,14 @@ export class ImportResolver {
       return Path.resolve(REPO_ROOT, `node_modules/zod/v3/index.cjs`);
     }
 
+    if (req.startsWith('vega-lite')) {
+      return Path.resolve(REPO_ROOT, `node_modules/vega-lite/build`);
+    }
+
+    if (req.startsWith('vega-tooltip')) {
+      return Path.resolve(REPO_ROOT, `node_modules/vega-tooltip/build`);
+    }
+
     // turn root-relative paths into relative paths
     if (
       req.startsWith('src/') ||

src/platform/packages/shared/kbn-storybook/src/webpack.config.ts

@@ -26,10 +26,6 @@ export default ({ config: storybookConfig }: { config: Configuration }) => {
     },
     externals,
     module: {
-      // no parse rules for a few known large packages which have no require() statements
-      // or which have require() statements that should be ignored because the file is
-      // already bundled with all its necessary dependencies
-      noParse: [/[\/\\]node_modules[\/\\]vega[\/\\]build-es5[\/\\]vega\.js$/],
       rules: [
         {
           test: /\.mjs$/,
@@ -54,7 +50,6 @@ export default ({ config: storybookConfig }: { config: Configuration }) => {
       mainFields: ['browser', 'main'],
       alias: {
         core_styles: resolve(REPO_ROOT, 'src/core/public/index.scss'),
-        vega: resolve(REPO_ROOT, 'node_modules/vega/build-es5/vega.js'),
       },
     },
     stats: 'errors-only',

src/platform/packages/shared/kbn-test/jest-preset.js

@@ -76,6 +76,7 @@ module.exports = {
     '<rootDir>/src/platform/packages/shared/kbn-test/src/jest/setup/mocks.eui.js',
     '<rootDir>/src/platform/packages/shared/kbn-test/src/jest/setup/react_testing_library.js',
     '<rootDir>/src/platform/packages/shared/kbn-test/src/jest/setup/mocks.kbn_i18n_react.js',
+    '<rootDir>/src/platform/packages/shared/kbn-test/src/jest/setup/mocks.vega.js',
     process.env.CI
       ? '<rootDir>/src/platform/packages/shared/kbn-test/src/jest/setup/disable_console_logs.js'
       : [],
@@ -119,7 +120,7 @@ module.exports = {
   transformIgnorePatterns: [
     // ignore all node_modules except monaco-editor, monaco-yaml which requires babel transforms to handle dynamic import()
     // since ESM modules are not natively supported in Jest yet (https://github.com/facebook/jest/issues/4842)
-    '[/\\\\]node_modules(?![\\/\\\\](byte-size|monaco-editor|monaco-yaml|monaco-languageserver-types|monaco-marker-data-provider|monaco-worker-manager|vscode-languageserver-types|d3-interpolate|d3-color|langchain|langsmith|@cfworker|gpt-tokenizer|flat|@langchain|eventsource-parser|fast-check|@fast-check/jest|@assemblyscript|quickselect|rbush))[/\\\\].+\\.js$',
+    '[/\\\\]node_modules(?![\\/\\\\](byte-size|monaco-editor|monaco-yaml|monaco-languageserver-types|monaco-marker-data-provider|monaco-worker-manager|vscode-languageserver-types|d3-interpolate|d3-color|langchain|langsmith|@cfworker|gpt-tokenizer|flat|@langchain|eventsource-parser|fast-check|@fast-check/jest|@assemblyscript|quickselect|rbush|vega-interpreter|vega-util|vega-tooltip))[/\\\\].+\\.js$',
     'packages/kbn-pm/dist/index.js',
     '[/\\\\]node_modules(?![\\/\\\\](langchain|langsmith|@langchain))/dist/[/\\\\].+\\.js$',
     '[/\\\\]node_modules(?![\\/\\\\](langchain|langsmith|@langchain))/dist/util/[/\\\\].+\\.js$',

src/platform/packages/shared/kbn-test/src/jest/setup/mocks.vega.js

@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+/* eslint-env jest */
+
+const fs = require('fs');
+const vm = require('vm');
+const path = require('path');
+
+let cached = null;
+
+const loadVegaAndVegaLite = () => {
+  if (cached) return cached;
+
+  const sandbox = {
+    window: {},
+    globalThis: {},
+    structuredClone: (obj) => JSON.parse(JSON.stringify(obj)),
+  };
+
+  // vega
+  const vegaPath = path.resolve('node_modules/vega/build/vega.min.js');
+  const vegaCode = fs.readFileSync(vegaPath, 'utf8');
+  vm.createContext(sandbox);
+  vm.runInContext(vegaCode, sandbox);
+
+  sandbox.window.vega = sandbox.globalThis.vega = sandbox.window.vega || sandbox.globalThis.vega;
+
+  // vega-lite
+  const litePath = path.resolve('node_modules/vega-lite/build/vega-lite.min.js');
+  const liteCode = fs.readFileSync(litePath, 'utf8');
+  vm.runInContext(liteCode, sandbox);
+
+  cached = {
+    vega: sandbox.window.vega || sandbox.globalThis.vega,
+    vegaLite: sandbox.window.vegaLite || sandbox.globalThis.vegaLite,
+  };
+
+  // both Vega and Vega-Lite
+  return cached;
+};
+
+jest.mock('vega', () => {
+  const { vega } = loadVegaAndVegaLite();
+  return { ...vega };
+});
+
+jest.mock('vega-lite', () => {
+  const { vegaLite } = loadVegaAndVegaLite();
+  return { ...vegaLite };
+});