[deps] Update vega to 6.x

.buildkite/scripts/steps/security/third_party_packages.txt

@@ -21,3 +21,4 @@ dompurify
 magic-bytes.js
 @axe-core/playwright
 @opentelemetry/exporter-trace-otlp-grpc
+@babel/plugin-syntax-import-attributes

package.json

@@ -105,10 +105,7 @@
     "@types/react-dom": "~18.2.0",
     "@xstate5/react/**/xstate": "^5.19.2",
     "apache-arrow": "20.x - 21.x",
-    "globby/fast-glob": "^3.3.2",
-    "vega-expression": "5.2.1",
-    "vega-interpreter": "1.2.1",
-    "vega-util": "1.17.4"
+    "globby/fast-glob": "^3.3.2"
   },
   "dependencies": {
     "@a2a-js/sdk": "^0.3.4",
@@ -1446,12 +1443,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",
     "xml-formatter": "^3.6.7",
@@ -1482,6 +1479,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-syntax-import-attributes": "^7.27.1",
     "@babel/plugin-transform-class-properties": "^7.24.7",
     "@babel/plugin-transform-numeric-separator": "^7.24.7",
     "@babel/plugin-transform-optional-chaining": "^7.24.8",

packages/kbn-babel-preset/common_preset.js

@@ -47,6 +47,9 @@ module.exports = (api) => ({
             version: '^7.12.5',
           },
         ],
+
+        // Enables import-attributes syntax on imports
+        require.resolve('@babel/plugin-syntax-import-attributes'),
       ],
     },
 

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

@@ -119,10 +119,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: [
         {
@@ -299,7 +296,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

@@ -167,6 +167,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$/,
@@ -60,7 +56,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

@@ -81,6 +81,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'
       : [],
@@ -126,7 +127,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|zod/v4))[/\\\\].+\\.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|zod/v4|vega-interpreter|vega-util|vega-tooltip))[/\\\\].+\\.js$',
     'packages/kbn-pm/dist/index.js',
     '[/\\\\]node_modules(?![\\/\\\\](langchain|langsmith|@langchain|zod/v4))/dist/[/\\\\].+\\.js$',
     '[/\\\\]node_modules(?![\\/\\\\](langchain|langsmith|@langchain|zod/v4))/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 loadVegaAndLite = () => {
+  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 nad vega-lite
+  return cached;
+};
+
+jest.mock('vega', () => {
+  const { vega } = loadVegaAndLite();
+  return { ...vega };
+});
+
+jest.mock('vega-lite', () => {
+  const { vegaLite } = loadVegaAndLite();
+  return { ...vegaLite };
+});

tsconfig.base.json

@@ -2469,7 +2469,9 @@
       "@typescript-eslint/parser": ["typings/@typescript-eslint/parser"],
       "@a2a-js/sdk/server": ["typings/@a2a-js-sdk/server"],
       "zod": ["typings/zod/v3"],
-      "zod/v4": ["typings/zod/v4"]
+      "zod/v4": ["typings/zod/v4"],
+      "vega-lite": ["typings/vega/vega_lite"],
+      "vega-tooltip": ["typings/vega/vega_tooltip"]
     },
     // Support .tsx files and transform JSX into calls to React.createElement
     "jsx": "react",

typings/vega/vega_lite.d.ts

@@ -0,0 +1,12 @@
+/*
+ * 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".
+ */
+
+declare module 'vega-lite' {
+  export * from 'vega-lite/build';
+}

typings/vega/vega_tooltip.d.ts

@@ -0,0 +1,12 @@
+/*
+ * 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".
+ */
+
+declare module 'vega-tooltip' {
+  export * from 'vega-tooltip/build';
+}

x-pack/platform/plugins/shared/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.test.ts

@@ -7,8 +7,7 @@
 
 import 'jest-canvas-mock';
 
-// @ts-ignore
-import { compile } from 'vega-lite/build/vega-lite';
+import { compile } from 'vega-lite';
 
 import type { EuiThemeComputed } from '@elastic/eui';
 

x-pack/platform/plugins/shared/ml/public/application/components/vega_chart/vega_chart_view.tsx

@@ -8,13 +8,8 @@
 import type { FC } from 'react';
 import React, { useMemo, useEffect } from 'react';
 
-// There is still an issue with Vega Lite's typings with the strict mode Kibana is using.
-// @ts-ignore
-import type { TopLevelSpec } from 'vega-lite/build/vega-lite';
-
-// There is still an issue with Vega Lite's typings with the strict mode Kibana is using.
-// @ts-ignore
-import { compile } from 'vega-lite/build/vega-lite';
+import type { TopLevelSpec } from 'vega-lite';
+import { compile } from 'vega-lite';
 import { parse, View, Warn } from 'vega';
 import { expressionInterpreter } from 'vega-interpreter';
 import { Handler } from 'vega-tooltip';